Marketing

Landing page components for heroes, features, and CTAs.

Pre-built components for marketing and landing pages. All marketing components are exported from a single module.

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

Hero

Main hero section for landing pages.

<Hero>
  <HeroTitle>Build your SaaS faster</HeroTitle>
  <p className="text-muted-foreground text-lg">
    Launch your product in days, not months.
  </p>
  <div className="flex gap-4">
    <CtaButton>Get Started</CtaButton>
    <Button variant="outline">Learn More</Button>
  </div>
</Hero>

Hero Title

Large, bold hero heading.

<HeroTitle>
  The fastest way to build SaaS
</HeroTitle>

Secondary Hero

Smaller hero variant for secondary sections.

<SecondaryHero>
  <h2>Feature Highlight</h2>
  <p>Description of the feature section.</p>
</SecondaryHero>

CTA Button

Call-to-action button with enhanced styling.

<CtaButton>Start Free Trial</CtaButton>
<CtaButton variant="outline">Learn More</CtaButton>

Pill

Small badge/pill for labels and tags.

<Pill>New Feature</Pill>
<Pill>Beta</Pill>
<Pill>Coming Soon</Pill>

Gradient Text

Text with gradient color effect.

<h1>
  Build <GradientText>amazing</GradientText> products
</h1>
{/* Secondary variant */}
<GradientSecondaryText>Highlighted text</GradientSecondaryText>

Feature Card

Card for displaying product features.

<FeatureCard
  icon={<Zap className="h-6 w-6" />}
  title="Lightning Fast"
  description="Optimized for performance out of the box."
/>

Feature Grid

Grid layout for feature cards.

<FeatureGrid>
  <FeatureCard
    icon={<Shield />}
    title="Secure"
    description="Enterprise-grade security."
  />
  <FeatureCard
    icon={<Zap />}
    title="Fast"
    description="Optimized performance."
  />
  <FeatureCard
    icon={<Globe />}
    title="Global"
    description="CDN deployment worldwide."
  />
</FeatureGrid>

Feature Showcase

Showcase section with image and features list.

<FeatureShowcase
  heading="Everything you need"
  description="All the features to build your SaaS"
  features={[
    'Authentication built-in',
    'Multi-tenancy support',
    'Stripe billing integration',
    'Beautiful UI components',
  ]}
  image="/screenshot.png"
/>

Email subscription form.

<NewsletterSignup
  heading="Stay updated"
  description="Get the latest news and updates."
  successMessage="Thanks for subscribing!"
/>

Complete newsletter signup form with built-in state management for loading, success, and error states.

<NewsletterSignupContainer
  heading="Stay Updated"
  description="Join our community for weekly insights."
  successMessage="Welcome aboard! Check your inbox."
  errorMessage="Oops! Something went wrong. Please try again later."
  onSignup={async (email) => {
    await fetch('/api/newsletter', {
      method: 'POST',
      body: JSON.stringify({ email }),
    });
  }}
/>

Props:

Prop	Type	Default	Description
`onSignup`	`(email: string) => Promise<void>`	Required	Async handler for signup
`heading`	`string`	`'Subscribe to our newsletter'`	Form heading
`description`	`string`	`'Get the latest updates...'`	Form description
`successMessage`	`string`	`'Thank you for subscribing!'`	Success alert message
`errorMessage`	`string`	`'An error occurred...'`	Error alert message

Features:

Automatic state management (idle, loading, success, error)
Loading spinner during signup
Success/error alerts with appropriate styling
Console error logging for debugging

Ecosystem Showcase

Showcase section with a two-column layout for displaying ecosystem features or integrations.

<EcosystemShowcase
  heading="Our Integrations"
  description="Connect with all your favorite tools and services seamlessly."
  textPosition="left"
>
  <div className="grid grid-cols-3 gap-4">
    <IntegrationCard name="Stripe" />
    <IntegrationCard name="GitHub" />
    <IntegrationCard name="Slack" />
  </div>
</EcosystemShowcase>

Props:

Prop	Type	Default	Description
`heading`	`ReactNode`	Required	Main heading text
`description`	`ReactNode`	-	Description text below heading
`textPosition`	`'left' \| 'right'`	`'left'`	Position of the text column
`children`	`ReactNode`	-	Content to display (e.g., integration cards)

Features:

Responsive layout: stacks vertically on mobile, side-by-side on desktop
Text column takes 1/3 width, content takes 2/3 width on desktop
Muted background with rounded corners
Supports custom className for additional styling

Marketing page header with navigation.

<Header
  logo={<Logo />}
  navigation={
    <nav className="flex gap-6">
      <Link href="/features">Features</Link>
      <Link href="/pricing">Pricing</Link>
      <Link href="/docs">Docs</Link>
    </nav>
  }
  actions={
    <div className="flex gap-2">
      <Button variant="ghost">Sign In</Button>
      <Button>Get Started</Button>
    </div>
  }
/>

Marketing page footer.

<Footer
  logo={<Logo />}
  columns={[
    {
      title: 'Product',
      links: [
        { label: 'Features', href: '/features' },
        { label: 'Pricing', href: '/pricing' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About', href: '/about' },
        { label: 'Blog', href: '/blog' },
      ],
    },
  ]}
  copyright="2024 Your Company"
/>

Coming Soon

Coming soon page template.

<ComingSoon
  title="Something big is coming"
  description="Sign up to be notified when we launch."
/>

Previous: Utilities