# Marketing

> Landing page components for heroes, features, and CTAs.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/marketing*

---

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

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

## Hero

Main hero section for landing pages.

```tsx
<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.

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

## Secondary Hero

Smaller hero variant for secondary sections.

```tsx
<SecondaryHero
  pill={<Pill>New</Pill>}
  heading="Feature Highlight"
  subheading="Description of the feature section."
/>
```

## CTA Button

Call-to-action button with enhanced styling.

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

## Pill

Small badge/pill for labels and tags.

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

## Gradient Text

Text with gradient color effect.

```tsx
<h1>
  Build <GradientText>amazing</GradientText> products
</h1>

{/* Secondary variant */}
<GradientSecondaryText>Highlighted text</GradientSecondaryText>
```

## Feature Card

Card for displaying product features.

```tsx
<FeatureCard
  label="Lightning Fast"
  description="Optimized for performance out of the box."
/>
```

## Feature Grid

Grid layout for feature cards.

```tsx
<FeatureGrid>
  <FeatureCard
    label="Secure"
    description="Enterprise-grade security."
  />
  <FeatureCard
    label="Fast"
    description="Optimized performance."
  />
  <FeatureCard
    label="Global"
    description="CDN deployment worldwide."
  />
</FeatureGrid>
```

## Feature Showcase

Showcase section with a heading and arbitrary children.

```tsx
<FeatureShowcase heading="Everything you need">
  <p>All the features to build your SaaS.</p>
  <FeatureGrid>{/* feature cards */}</FeatureGrid>
</FeatureShowcase>
```

## Newsletter Signup

Email subscription form.

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

## Newsletter Signup Container

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

```tsx
<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.

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

## Header

Marketing page header with navigation.

```tsx
import { Link } from '@tanstack/react-router';

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

## Footer

Marketing page footer. Each entry in `sections` has a `heading` and a list of `links` (`{ href, label }`):

```tsx
<Footer
  logo={<Logo />}
  description="Your app description here"
  copyright={`© ${new Date().getFullYear()} Your Company`}
  sections={[
    {
      heading: 'Product',
      links: [
        { label: 'Features', href: '/features' },
        { label: 'Pricing', href: '/pricing' },
      ],
    },
    {
      heading: 'Company',
      links: [
        { label: 'About', href: '/about' },
        { label: 'Blog', href: '/blog' },
      ],
    },
  ]}
/>
```

## Coming Soon

Coming soon page template.

```tsx
<ComingSoon>
  <ComingSoonLogo>
    <img src="/logo.svg" alt="Logo" />
  </ComingSoonLogo>
  <ComingSoonHeading>Something big is coming</ComingSoonHeading>
  <ComingSoonText>Sign up to be notified when we launch.</ComingSoonText>
  <ComingSoonButton>Notify me</ComingSoonButton>
</ComingSoon>
```

These marketing components are part of the [TanStack Start Drizzle SaaS Kit](/drizzle).

---

**Previous:** [Utilities](./utilities)