# Marketing

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

*Canonical: https://makerkit.dev/docs/tanstack-prisma/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,
} 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>
  <h2>Feature Highlight</h2>
  <p>Description of the feature section.</p>
</SecondaryHero>
```

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

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

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

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

## 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
  title="Something big is coming"
  description="Sign up to be notified when we launch."
/>
```

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

---

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