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, 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"
/>

Newsletter Signup

Email subscription form.

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

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