Hero

Main hero section with headline, subtitle, and CTAs.

Default Usage

import { Hero } from '@/components/landing';

<Hero />

Location: src/components/landing/Hero.tsx

Features

• Large headline with brand interpolation
• Subtitle/tagline
• Two CTA buttons (primary + secondary)
• Gradient background with grid pattern
• Auth-aware buttons (shows Dashboard if logged in)

Props

Customization

Edit translations in src/locales/en.json:

{
  "landing": {
    "hero": {
      "title": "Build your app faster with {brand}",
      "subtitle": "Production-ready template with auth, billing, and more.",
      "primaryCta": "Get Started Free",
      "secondaryCta": "View Demo"
    }
  }
}

Variants

Variant 1: Hero (Default)

Centered hero with logo, gradient background, and grid pattern.

// src/components/landing/Hero.tsx
'use client';

import { useTranslations } from 'next-intl';
import Link from 'next/link';
import Image from 'next/image';
import { useAuth } from '@/contexts/AuthContext';
import { Button } from '@/components/ui';
import { ArrowRightIcon } from '@/components/icons';

export default function Hero() {
  const t = useTranslations('landing.hero');
  const { isAuthenticated } = useAuth();

  return (
    <section className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-b from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-950">
      {/* Grid pattern background */}
      <div className="absolute inset-0 bg-[linear-gradient(...)] bg-[size:4rem_4rem] [mask-image:radial-gradient(...)]" />

      <div className="relative container mx-auto px-4 py-20 sm:py-32">
        <div className="mx-auto max-w-4xl text-center">
          {/* Logo */}
          <div className="mb-8 flex justify-center">
            <Image src="/logo.png" alt="Logo" width={120} height={120} priority />
          </div>

          <h1 className="mb-6 text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
            {t('title', { brand: 'Starterbase' })}
          </h1>
          <p className="mb-10 text-xl text-zinc-600 dark:text-zinc-300 sm:text-2xl">
            {t('subtitle')}
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
            {isAuthenticated ? (
              <Link href="/dashboard">
                <Button color="dark/white">{t('primaryCta')}</Button>
              </Link>
            ) : (
              <>
                <Link href="/register">
                  <Button color="dark/white">{t('primaryCta')}</Button>
                </Link>
                <Link href="http://localhost:3001">
                  <Button outline>{t('secondaryCta')}</Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Best for: Default landing page, products with logo/brand focus

Variant 2: HeroSimple

Minimal centered hero without logo or background effects.

// src/components/landing/HeroSimple.tsx
'use client';

import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { Button } from '@/components/ui';
import { ArrowRightIcon } from '@/components/icons';

export default function HeroSimple() {
  const t = useTranslations('landing.hero');
  const { isAuthenticated } = useAuth();

  return (
    <section className="flex min-h-screen items-center justify-center bg-white dark:bg-zinc-950">
      <div className="container mx-auto px-4 py-20 sm:py-32">
        <div className="mx-auto max-w-3xl text-center">
          <h1 className="mb-6 text-5xl font-bold tracking-tight sm:text-6xl">
            {t('title', { brand: 'Starterbase' })}
          </h1>
          <p className="mb-10 text-xl text-zinc-600 dark:text-zinc-300">
            {t('subtitle')}
          </p>

          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
            {isAuthenticated ? (
              <Link href="/dashboard">
                <Button color="dark/white">{t('primaryCta')}</Button>
              </Link>
            ) : (
              <>
                <Link href="/register">
                  <Button color="dark/white">{t('primaryCta')}</Button>
                </Link>
                <Link href="#features">
                  <Button outline>{t('secondaryCta')}</Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Best for: Clean, minimal design; coming soon pages

Choosing a Variant