Hero

Overview

The Hero component is the first thing visitors see. It contains a social-proof badge, a bold headline, a subtitle, a primary CTA button, and a browser-mockup screenshot placeholder.

File: src/components/Hero.tsx

Animation

The component uses framer-motion to stagger-animate each element on page load:

All elements animate from opacity: 0, y: 20 (or y: 40 for the browser mock) to their final position.

Customization

Badge

Update the badge text to reflect your own social proof:

<span className="inline-block rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700">
  Trusted by 500+ teams
</span>

Heading

The heading uses a two-tone pattern. The highlighted phrase is wrapped in a <span> with text-indigo-600:

<motion.h1 className="... text-5xl font-extrabold tracking-tight text-gray-900 md:text-6xl lg:text-7xl">
  Ship your SaaS in days,{" "}
  <span className="text-indigo-600">not months</span>
</motion.h1>

Change the text and accent color to match your brand.

Subtitle

Edit the <motion.p> below the heading. Keep it under two sentences for maximum impact.

CTA Button

The primary CTA links to #pricing. Update the text and destination:

<a href="#pricing" className="inline-block rounded-lg bg-indigo-600 px-8 py-4 text-lg font-medium text-white ...">
  Get Started Free
</a>
<p className="mt-4 text-sm text-gray-400">
  No credit card required.
</p>

Browser Mockup

The bottom section renders a fake browser window with traffic-light dots and an address bar. Replace the placeholder content inside the aspect-video div with an actual screenshot:

<div className="flex aspect-video items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
  <img src="/images/dashboard-preview.png" alt="Dashboard" className="h-full w-full object-cover" />
</div>

Key Tailwind Classes

Tips

• Remove the motion wrappers if you do not want entrance animations (this also removes the framer-motion dependency for this component).
• Add a secondary CTA (e.g., "Watch Demo") next to the primary button for higher engagement.