Hero Section

The Hero Section is the main landing component that appears at the top of your homepage. It features a compelling headline, subtitle, announcement badge, and call-to-action buttons designed to convert visitors.

Usage

import { HeroSection } from '@/components/sections';

export default function HomePage() {
  return (
    <div>
      <HeroSection />
      {/* Other sections */}
    </div>
  );
}

Features

• Announcement Badge - Highlight new features or announcements
• Large Headline - Eye-catching title with creative styling
• Subtitle - Supporting description text
• CTA Buttons - Primary and secondary call-to-action buttons
• Responsive Design - Optimized for all device sizes
• Dark Mode Support - Seamless theme switching

Structure

The component includes:

1. Announcement Badge - "New" badge with feature highlights
2. Main Headline - Large, bold title with creative "toilet" styling
3. Subtitle - Descriptive text explaining the value proposition
4. Button Group - Primary CTA and secondary demo button

Customization

Headline Text

Edit the main headline in the component file:

<h1 className="text-foreground text-5xl leading-tight font-bold tracking-tight sm:text-6xl lg:text-8xl">
  Ship your startup
  <br />
  while on the{' '}
  <span className="inline-block -rotate-2 transform rounded-lg bg-purple-600 px-4 py-2 text-white">
    toilet
  </span>
</h1>

Announcement Badge

Update the announcement content:

<Badge className="mr-3 bg-orange-100 text-orange-800 border-orange-200 hover:bg-orange-200 dark:bg-orange-900 dark:text-orange-200 dark:border-orange-800">
  New
</Badge>
<span className="text-sm text-muted-foreground">
  Your announcement text here
</span>

Call-to-Action Buttons

Modify the button links and text:

<Button size="lg" className="h-12 px-8" asChild>
  <Link href="/signup">Get Started Free</Link>
</Button>
<Button variant="outline" size="lg" className="h-12 px-8" asChild>
  <Link href="/demo">View Demo</Link>
</Button>

Styling

The component uses:

• Purple accent for the creative headline styling
• Orange theme for the announcement badge
• Responsive text sizing from text-5xl to text-8xl
• Background blur effects for modern glass-morphism
• Transform rotate for playful headline accent

Dependencies

• @/components/ui/button - Button component
• @/components/ui/badge - Badge component
• Next.js Link component (if CTAs link to other pages)

Best Practices

1. Keep headline short - Aim for 5-8 words maximum
2. Clear value proposition - Make benefits obvious
3. Strong CTAs - Use action-oriented button text
4. Test on mobile - Ensure text is readable on small screens
5. A/B test headlines - Try different messaging variations

This component sets the tone for your entire application and is crucial for conversion, so customize it to match your specific value proposition and brand voice.