Hero

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

<Hero
    promoText="LOREM IPSUM DOLOR SIT AMET"
    title={
        <>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.{" "}
            <span className="relative mt-4 inline-block rotate-2 whitespace-nowrap bg-blue-600 p-2 text-white">
                Lorem, ipsum.
            </span>
        </>
    }
    subtitle="Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, saepe dicta eligendi praesentium accusamus cupiditate?"
    primaryCTA={{
        text: "Get Started Now",
        onClick: (e) => handleSmoothScroll(e, "#pricing"),
    }}
    secondaryCTA={{
        text: "Watch Demo",
        onClick: (e) => handleSmoothScroll(e, "#product-demo"),
    }}
    demoVideoUrl="https://framerusercontent.com/assets/hABzjRMXjNw1XA1si9W04jXifs.mp4"
/>;

// ❌ Bad Example
title =
    "This comprehensive, enterprise-grade solution helps development teams streamline their workflow processes and improve through advanced automation";
// ✅ Good Example
title = "Build Your MVP in a WEEKEND, not Months, with Next.js and Supabase";

// ❌ Bad Example
description = "Our solution is the best in class";
// ✅ Good Example
description =
    "20+ pre-built React components, authentication, and email templates - everything you need to launch faster";

// ❌ Bad Example
primaryCTA = { text: "Click here", onClick: () => {} };
secondaryCTA = { text: "More info", onClick: () => {} };

// ✅ Good Example
primaryCTA = { text: "Start Building", onClick: () => {} };
secondaryCTA = { text: "Watch Demo", onClick: () => {} };

// ❌ Bad Example
"generic-company-intro.mp4"
// ✅ Good Example
"product-walkthrough.mp4"

// ❌ Bad Example
"Trusted by developers";
// ✅ Good Example
"Trusted by 10,000+ developers from Google, Meta, and Amazon";