Feature 06

1import { cn } from "@/lib/utils";
2import { IterationCw, Handshake, FolderCog, UserRoundPlus } from "lucide-react";
3 
4interface StepItem {
5  step: number;
6  title: string;
7  description: string;
8  img?: string;
9  icon?: React.ReactNode;
10}
11 
12interface Feature06Props {
13  label?: string;
14  title?: string;
15  description?: string;
16  steps?: StepItem[];
17  className?: string;
18}
19 
20const StepCard = ({
21  step,
22  index,
23  total,
24}: {
25  step: StepItem;
26  index: number;
27  total: number;
28}) => {
29  const isLast = index === total - 1;
30  const isLeftColumnMd = index % 2 === 0;
31  const isTopRowMd = index < 2;
32 
33  return (
34    <div
35      className={cn(
36        "relative flex h-full flex-col gap-4 p-4",
37        !isLast && "border-b md:border-b-0",
38        isLeftColumnMd && !isLast && "md:border-r lg:border-r-0",
39        isTopRowMd && "md:border-b lg:border-b-0",
40        !isLast && "lg:border-r",
41      )}
42    >
43      <span className="inline-flex w-fit items-center justify-center rounded-full border bg-background px-4 py-1 text-sm font-medium">
44        Step {step.step}
45      </span>
46      <div className="flex flex-1 flex-col gap-4">
47        <h3 className="text-xl font-medium tracking-tight">{step.title}</h3>
48        <p className="text-sm leading-relaxed text-muted-foreground">
49          {step.description}
50        </p>
51      </div>
52      <div className="mt-4 aspect-video w-full overflow-hidden rounded-md bg-muted">
53        {step.img ? (
54          <img
55            src={step.img}
56            alt={step.title}
57            className="size-full object-cover"
58          />
59        ) : (
60          <div className="flex size-full items-center justify-center">
61            {step.icon ? (
62              <div className="text-primary">{step.icon}</div>
63            ) : (
64              <div className="flex size-16 items-center justify-center rounded-full bg-muted-foreground/10">
65                <span className="text-2xl font-medium text-muted-foreground/40">
66                  {step.step}
67                </span>
68              </div>
69            )}
70          </div>
71        )}
72      </div>
73    </div>
74  );
75};
76 
77const Feature06 = ({
78  label = "How it works",
79  title = "Work normally. We handle the rest.",
80  description = "Get started in minutes with our simple 4-step process. No complex setup required.",
81  steps = [
82    {
83      step: 1,
84      title: "Create your account",
85      description:
86// … truncated