Hero Section

Landing page hero section with various layout options.

Centered Hero

Left-aligned Hero

Copy This Pattern

import { cn } from '@stackmates/shared-utils';

interface HeroProps {
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
  image?: React.ReactNode;
  align?: 'left' | 'center';
}

function Hero({ title, subtitle, action, image, align = 'center' }: HeroProps) {
  return (
    <section className="py-24 sm:py-32">
      <div className="container mx-auto px-4">
        <div className={cn(
          'flex flex-col gap-8',
          align === 'center' ? 'items-center text-center' : 'items-start'
        )}>
          <h1 className="text-4xl font-bold sm:text-6xl">{title}</h1>
          {subtitle && <p className="text-lg text-muted-foreground">{subtitle}</p>}
          {action && <div className="flex gap-4">{action}</div>}
        </div>
      </div>
    </section>
  );
}