Landing Page

Create an effective landing page for your SaaS product.

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:

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:

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:

<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:

<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:

<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>

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

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

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

<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:

<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):

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

FeatureCard

Individual feature cards with label and description:

<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:

<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:

<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:

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

A newsletter signup form component:

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

Example Landing Page Structure

A typical landing page follows this structure:

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 →