How It Works

import HowItWorks from "@/components/marketing/HowItWorks";

<HowItWorks
    eyebrow="Lorem, ipsum dolor."
    title={
        <>
            Lorem ipsum{" "}
            <span className="relative mt-4 inline-block whitespace-nowrap bg-blue-600 p-2 text-white">
                amet consectetur.
            </span>
        </>
    }
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam voluptates totam fuga labore inventore."
    steps={[
        {
            icon: Asterisk,
            title: "Lorem, ipsum dolor.",
            description:
                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quis error saepe eum quia?",
            badge: {
                text: "Step 1",
                bgColor: "bg-blue-50 dark:bg-blue-950/50",
                textColor: "text-blue-600",
            },
            metrics: [
                { value: "85%", label: "Success Rate" },
                { value: "2min", label: "Setup Time" },
            ],
        },
        {
            icon: Asterisk,
            title: "Lorem, ipsum dolor.",
            description:
                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quis error saepe eum quia?",
            badge: {
                text: "Step 2",
                bgColor: "bg-blue-50 dark:bg-blue-950/50",
                textColor: "text-blue-600",
            },
            metrics: [
                { value: "85%", label: "Success Rate" },
                { value: "2min", label: "Setup Time" },
            ],
        },
        {
            icon: Asterisk,
            title: "Lorem, ipsum dolor.",
            description:
                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quis error saepe eum quia?",
            badge: {
                text: "Step 3",
                bgColor: "bg-blue-50 dark:bg-blue-950/50",
                textColor: "text-blue-600",
            },
            metrics: [
                { value: "85%", label: "Success Rate" },
                { value: "2min", label: "Setup Time" },
            ],
        },
    ]}
/>

// ❌ Bad Example - Unclear progression
steps={[
    { title: "Advanced Features", description: "..." },
    { title: "Getting Started", description: "..." },
    { title: "Configuration", description: "..." },
]}
// ✅ Good Example - Clear progression
steps={[
    { title: "Create Account", description: "..." },
    { title: "Configure Settings", description: "..." },
    { title: "Launch Project", description: "..." },
]}

// ❌ Bad Example - Vague descriptions
{
    title: "Setup",
    description: "Do the initial setup of the system.",
}
// ✅ Good Example - Clear instructions
{
    title: "Setup Your Workspace",
    description: "Clone the repository and install dependencies with a single command.",
}

// ❌ Bad Example - Generic title
title="How to use our product"
// ✅ Good Example - Benefit-focused title
title={
<>
Three steps to{" "}
<span className="bg-blue-600 text-white">
launch 10x faster
</span>
</>
}

// ❌ Bad Example - Too many steps
steps={[
    { title: "Step 1", ... },
    { title: "Step 2", ... },
    { title: "Step 3", ... },
    { title: "Step 4", ... },
    { title: "Step 5", ... },
    { title: "Step 6", ... },
    { title: "Step 7", ... },
]}
// ✅ Good Example - Concise steps
steps={[
    { title: "Step 1", ... },
    { title: "Step 2", ... },
    { title: "Step 3", ... },
]}