# Landing Page

> Create an effective landing page for your SaaS product.

*Canonical: https://makerkit.dev/docs/nextjs-drizzle/marketing-pages/landing-page*

---

This guide documents the landing page shipped in this repo.

The landing page is the main entry point for your SaaS product. The kit provides a comprehensive set of marketing components to help you build effective landing pages.

## File Location

The landing page is located at `apps/web/app/[locale]/(public)/page.tsx`.

This page is wrapped by the public layout at `apps/web/app/[locale]/(public)/layout.tsx`, which provides the site header and footer.

## Marketing Layout

The public layout provides the structure for all marketing pages:

```tsx
import { getSession } from '@kit/better-auth/context';

import { SiteFooter } from './_components/site-footer';
import { SiteHeader } from './_components/site-header';

async function SiteLayout(props: React.PropsWithChildren) {
  const session = await getSession();

  return (
    <div className={'flex min-h-[100vh] flex-col'}>
      <SiteHeader user={session?.user ?? null} />
      {props.children}
      <SiteFooter />
    </div>
  );
}
```

The layout includes app-local wrappers:
- **SiteHeader**: Sticky navigation with logo, navigation links, and account actions
- **SiteFooter**: Footer with logo, description, and link sections

## Marketing Components

All marketing components are exported from `@kit/ui/marketing`:

```tsx
import {
  Hero,
  HeroTitle,
  Pill,
  PillActionButton,
  CtaButton,
  Header,
  Footer,
  FeatureShowcase,
  FeatureShowcaseIconContainer,
  FeatureGrid,
  FeatureCard,
  SecondaryHero,
  GradientText,
  GradientSecondaryText,
  EcosystemShowcase,
  NewsletterSignup,
} from '@kit/ui/marketing';
```

### Hero

The main hero section with optional pill, title, subtitle, CTA, and image:

```tsx
<Hero
  pill={
    <Pill label={'New'}>
      <span>The SaaS Starter Kit for ambitious developers</span>
      <PillActionButton asChild>
        <Link href={'/auth/sign-up'}>
          <ArrowRightIcon className={'h-4 w-4'} />
        </Link>
      </PillActionButton>
    </Pill>
  }
  title={
    <span className="text-secondary-foreground">
      Ship a SaaS faster than ever.
    </span>
  }
  subtitle={
    <span>
      Makerkit gives you a production-ready boilerplate to build your
      SaaS faster than ever before.
    </span>
  }
  cta={<MainCallToActionButton />}
  image={
    <Image
      priority
      className="w-full rounded-lg border border-gray-200"
      width={3558}
      height={2222}
      src="/images/dashboard.webp"
      alt="App Image"
    />
  }
/>
```

**Props:**
- `pill`: Optional announcement pill above the title
- `title`: Main heading (ReactNode)
- `subtitle`: Subheading text
- `cta`: Call-to-action buttons
- `image`: Hero image below the content
- `animate`: Enable entrance animations (default: true)

### Pill

An announcement badge with optional label and action button:

```tsx
<Pill label="New">
  <span>Check out our latest features</span>
  <PillActionButton asChild>
    <Link href="/features">
      <ArrowRightIcon className="h-4 w-4" />
    </Link>
  </PillActionButton>
</Pill>
```

### CtaButton

A styled button for call-to-action links:

```tsx
<CtaButton className="h-10 text-sm">
  <Link href="/auth/sign-up">
    <span className="flex items-center space-x-0.5">
      <span>Get Started</span>
      <ArrowRightIcon className="h-4" />
    </span>
  </Link>
</CtaButton>

<CtaButton variant="link" className="h-10 text-sm">
  <Link href="/pricing">View Pricing</Link>
</CtaButton>
```

### Header

The site header component with logo, navigation, and actions:

```tsx
<Header
  logo={<AppLogo />}
  navigation={<SiteNavigation />}
  actions={<SiteHeaderAccountSection user={user} />}
/>
```

### Footer

The site footer with logo, description, copyright, and link sections:

```tsx
<Footer
  logo={<AppLogo />}
  description="Your app description here"
  copyright={`© ${new Date().getFullYear()} Your Company`}
  sections={[
    {
      heading: 'About',
      links: [
        { href: '/blog', label: 'Blog' },
        { href: '/contact', label: 'Contact' },
      ],
    },
    {
      heading: 'Legal',
      links: [
        { href: '/terms-of-service', label: 'Terms of Service' },
        { href: '/privacy-policy', label: 'Privacy Policy' },
      ],
    },
  ]}
/>
```

### FeatureShowcase

Display a feature section with a heading, icon, and grid of feature cards:

```tsx
<FeatureShowcase
  heading={
    <>
      <b className="font-medium tracking-tight dark:text-white">
        The ultimate SaaS Starter Kit
      </b>.{' '}
      <span className="text-secondary-foreground/70 block font-normal">
        Unleash your creativity and build your SaaS faster.
      </span>
    </>
  }
  icon={
    <FeatureShowcaseIconContainer>
      <LayoutDashboard className="h-4 w-4" />
      <span>All-in-one solution</span>
    </FeatureShowcaseIconContainer>
  }
>
  <FeatureGrid>
    <FeatureCard
      label="Beautiful Dashboard"
      description="Makerkit provides a beautiful dashboard to manage your SaaS."
    />
    <FeatureCard
      label="Authentication"
      description="Multiple providers to allow your users to sign in."
    />
    <FeatureCard
      label="Billing"
      description="Support for multiple payment gateways."
    />
  </FeatureGrid>
</FeatureShowcase>
```

### FeatureGrid

A responsive grid layout for feature cards (3 columns on desktop):

```tsx
<FeatureGrid>
  {features.map((feature) => (
    <FeatureCard
      key={feature.label}
      label={feature.label}
      description={feature.description}
    />
  ))}
</FeatureGrid>
```

### FeatureCard

Individual feature cards with label and description:

```tsx
<FeatureCard
  className="relative col-span-1 overflow-hidden"
  label="Authentication"
  description="Makerkit provides a variety of providers to allow your users to sign in."
/>
```

### SecondaryHero

A secondary hero section for additional content sections:

```tsx
<SecondaryHero
  pill={<Pill label="Start for free">No credit card required.</Pill>}
  heading="Fair pricing for all types of businesses"
  subheading="Get started on our free plan and upgrade when you are ready."
/>
```

### EcosystemShowcase

A split layout with text and image/content:

```tsx
<EcosystemShowcase
  heading="The ultimate SaaS Starter Kit for founders."
  description="Unleash your creativity and build your SaaS faster than ever."
  textPosition="left" // or "right"
>
  <Image
    src="/images/sign-in.webp"
    alt="Sign in"
    width={1000}
    height={1000}
  />
</EcosystemShowcase>
```

### GradientText

Apply a gradient effect to text:

```tsx
<GradientText className="from-primary to-secondary">
  Gradient styled text
</GradientText>
```

### NewsletterSignup

A newsletter signup form component:

```tsx
<NewsletterSignup
  onSignup={(data) => handleSubscribe(data.email)}
  buttonText="Subscribe"
  placeholder="Enter your email"
/>
```

## Example Landing Page Structure

A typical landing page follows this structure:

```tsx
function Home() {
  return (
    <div className="mt-4 flex flex-col space-y-24 py-14">
      {/* Hero Section */}
      <div className="mx-auto">
        <Hero
          pill={<Pill label="New">...</Pill>}
          title={...}
          subtitle={...}
          cta={<MainCallToActionButton />}
          image={<Image ... />}
        />
      </div>

      {/* Features Section */}
      <div className="container mx-auto">
        <FeatureShowcase heading={...} icon={...}>
          <FeatureGrid>
            <FeatureCard ... />
            <FeatureCard ... />
          </FeatureGrid>
        </FeatureShowcase>
      </div>

      {/* Ecosystem Showcase */}
      <div className="container mx-auto">
        <EcosystemShowcase heading="..." description="...">
          <Image ... />
        </EcosystemShowcase>
      </div>

      {/* Pricing Section */}
      <div className="container mx-auto">
        <SecondaryHero
          pill={<Pill .../>}
          heading="..."
          subheading="..."
        />
        <PricingTable config={billingConfig} ... />
      </div>
    </div>
  );
}
```

## Customizing Header and Footer

The site header and footer are defined in:
- `apps/web/app/[locale]/(public)/_components/site-header.tsx`
- `apps/web/app/[locale]/(public)/_components/site-footer.tsx`

Modify these files to customize navigation links, footer sections, and account actions.

---

**Next:** [Blog System →](./blog-system)