How We Do It - Process Overview

Features 200

About

How We Do It – Agile-driven process overview. Displays each stage from ideation to launch using bold cards and icons. Each block outlines a key phase (e.g., Brainstorming, QA, Release). Ideal for explaining workflow clearly and visually.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds How We Do It - Process Overview to your project and fits it to your theme.

Code

How How We Do It - Process Overview is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { ProcessSection } from '@/components/ui/how-we-do-it-process-overview';
import { BrainCircuit, Target, PenTool, Code, ShieldCheck, Megaphone } from 'lucide-react';

// Demo component to showcase the ProcessSection
const ProcessSectionDemo = () => {
  const processItems = [
    {
      icon: BrainCircuit,
      title: 'Brainstorming',
      description: 'Ideas & Concepts',
    },
    {
      icon: Target,
      title: 'Market Strategy',
      description: 'Overall Planning',
    },
    {
      icon: PenTool,
      title: 'Product Design',
      description: 'UI/UX & Prototyping',
    },
    {
      icon: Code,
      title: 'Development',
      description: 'Full-Stack Engineering',
    },
    {
      icon: ShieldCheck,
      title: 'Testing & QA',
      description: 'Quality Assurance',
    },
    {
      icon: Megaphone,
      title: 'Release & Marketing',
      description: 'Launch Campaign',
    },
  ];

  return (
    <div className="w-full">
      <ProcessSection
        subtitle="Our Model"
        title="How We Do It"
        description="We work on a typical matrix of time, effort, and money, following Agile methodologies to deliver exceptional results."
        buttonText="Learn More"
        items={processItems}
      />
    </div>
  );
};

export default ProcessSectionDemo;