HowItWorks

Step-by-step process visualization.

Usage

import { HowItWorks } from '@/components/landing';

<HowItWorks />

Location: src/components/landing/HowItWorks.tsx

Features

• 3-step timeline
• Alternating left/right layout on desktop
• Numbered steps with connecting line
• Scroll animation

Customization

Edit the steps array in HowItWorks.tsx:

const steps: Step[] = [
  {
    number: 1,
    titleKey: 'step1.title',
    descriptionKey: 'step1.description',
    icon: DownloadIcon,
  },
  {
    number: 2,
    titleKey: 'step2.title',
    descriptionKey: 'step2.description',
    icon: CodeIcon,
  },
  {
    number: 3,
    titleKey: 'step3.title',
    descriptionKey: 'step3.description',
    icon: RocketIcon,
  },
];

i18n

Update translations:

{
  "landing": {
    "howItWorks": {
      "title": "How It Works",
      "subtitle": "Get started in 3 simple steps",
      "step1": {
        "title": "Install",
        "description": "Run a single command to scaffold your project"
      },
      "step2": {
        "title": "Customize",
        "description": "Configure your features, branding, and integrations"
      },
      "step3": {
        "title": "Deploy",
        "description": "Push to production with one click"
      }
    }
  }
}

Layout Structure

The component uses alternating layout for visual interest:

<div className="relative">
  {/* Connecting line */}
  <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-800 hidden md:block" />

  {steps.map((step, index) => (
    <div
      key={index}
      className={`flex items-center gap-8 mb-16 ${
        index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
      }`}
    >
      {/* Step content */}
      <div className="flex-1">
        <div className="flex items-center gap-4 mb-4">
          <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 flex items-center justify-center font-bold text-xl">
            {step.number}
          </div>
          <h3 className="text-2xl font-bold">{t(step.titleKey)}</h3>
        </div>
        <p className="text-zinc-600 dark:text-zinc-400">
          {t(step.descriptionKey)}
        </p>
      </div>

      {/* Icon/Visual */}
      <div className="flex-1 hidden md:flex justify-center">
        <step.icon className="w-24 h-24 text-zinc-300 dark:text-zinc-700" />
      </div>
    </div>
  ))}
</div>