# Marketing Components in the Next.js Supabase SaaS kit

> Learn how to use the Marketing components in the Next.js Supabase SaaS kit

*Canonical: https://makerkit.dev/docs/next-supabase-turbo/components/marketing-components*

---

Marketing components are designed to help you create beautiful and engaging marketing pages for your SaaS application. These components are built on top of the Shadcn UI library and are designed to work seamlessly with Next.js routing.

## Hero

The Hero component is a versatile and customizable landing page hero section for React applications.

{% component path="marketing/hero" /%}

### Import

```jsx
import { Hero } from '@kit/ui/marketing';
```

### Usage

```jsx
import { Hero, Pill, CtaButton } from '@kit/ui/marketing';
import Image from 'next/image';

function LandingPage() {
  return (
    <Hero
      pill={<Pill>New Feature</Pill>}
      title="Welcome to Our App"
      subtitle="Discover the power of our innovative solution"
      cta={<CtaButton>Get Started</CtaButton>}
      image={
        <Image
          src="/hero-image.jpg"
          alt="Hero Image"
          width={1200}
          height={600}
        />
      }
    />
  );
}
```

### Styling

The Hero component uses Tailwind CSS for styling. You can customize its appearance by:

1. Modifying the default classes in the component.
2. Passing additional classes via the `className` prop.
3. Overriding styles in your CSS using the appropriate selectors.

### Animations

By default, the Hero component applies entrance animations to its elements. You can disable these animations by setting the `animate` prop to `false`.

### Accessibility

The Hero component uses semantic HTML elements and follows accessibility best practices:

- The main title uses an `<h1>` tag (via the `HeroTitle` component).
- The subtitle uses an `<h3>` tag for proper heading hierarchy.

Ensure that any images passed via the `image` prop include appropriate `alt` text for screen readers.

### Notes

- The Hero component is designed to be flexible and can accommodate various content types through its props.
- For optimal performance, consider lazy-loading large images passed to the `image` prop.
- The component is responsive and adjusts its layout for different screen sizes.

### A Larger example straight from the kit

Below is a larger example of a Hero component with additional elements like a pill, CTA button, and image:

```tsx
import { Hero, Pill, CtaButton, GradientSecondaryText } from '@kit/ui/marketing';
import { Trans } from '@kit/ui/trans';
import { LayoutDashboard } from 'lucide-react';
import Image from 'next/image';

<Hero
  pill={
    <Pill label={'New'}>
      <span>The leading SaaS Starter Kit for ambitious developers</span>
    </Pill>
  }
  title={
    <>
      <span>The ultimate SaaS Starter</span>
      <span>for your next project</span>
    </>
  }
  subtitle={
    <span>
      Build and Ship a SaaS faster than ever before with the next-gen SaaS
      Starter Kit. Ship your SaaS in days, not months.
    </span>
  }
  cta={<MainCallToActionButton />}
  image={
    <Image
      priority
      className={
        'delay-250 rounded-2xl border border-gray-200 duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both dark:border-primary/10'
      }
      width={3558}
      height={2222}
      src={`/images/dashboard.webp`}
      alt={`App Image`}
    />
  }
/>

function MainCallToActionButton() {
  return (
    <div className={'flex space-x-4'}>
      <CtaButton>
        <Link href={'/auth/sign-up'}>
          <span className={'flex items-center space-x-0.5'}>
            <span>
              <Trans i18nKey={'common.getStarted'} />
            </span>

            <ArrowRightIcon
              className={
                'h-4 animate-in fade-in slide-in-from-left-8' +
                ' delay-1000 duration-1000 zoom-in fill-mode-both'
              }
            />
          </span>
        </Link>
      </CtaButton>

      <CtaButton variant={'link'}>
        <Link href={'/contact'}>
          <Trans i18nKey={'common.contactUs'} />
        </Link>
      </CtaButton>
    </div>
  );
}
```

## HeroTitle

The `HeroTitle` component is a specialized heading component used within the Hero component to display the main title.

{% component path="marketing/hero-title" /%}

### Props

The `HeroTitle` component accepts the following props:

1. `asChild?: boolean`: Whether to render the component as a child of the `Slot` component.
2. `HTMLAttributes<HTMLHeadingElement>`: Additional attributes to apply to the heading element.

### Usage

```tsx
import { HeroTitle } from '@kit/ui/marketing';

function LandingPage() {
  return (
    <HeroTitle asChild>
      Welcome to Our App
    </HeroTitle>
  );
}
```

## Pill

The `Pill` component is a small, rounded content container often used for highlighting or categorizing information.

{% component path="marketing/pill" /%}

### Usage

Use the `Pill` component to create a small, rounded content container with optional label text.

```tsx
import { Pill } from '@kit/ui/marketing';

function LandingPage() {
  return (
    <Pill label="New">
      Discover the power of our innovative
    </Pill>
  );
}
```

## Features

The `FeatureShowcase`, `FeatureShowcaseIconContainer`, `FeatureGrid`, and `FeatureCard` components are designed to showcase product features on marketing pages.

### FeatureShowcase

The `FeatureShowcase` component is a layout component that showcases a feature with an icon, heading, and description.

### FeatureShowcaseIconContainer

The `FeatureShowcaseIconContainer` component is a layout component that contains an icon for the `FeatureShowcase` component.

### FeatureGrid

The `FeatureGrid` component is a layout component that arranges `FeatureCard` components in a grid layout.

### FeatureCard

The `FeatureCard` component is a card component that displays a feature with a label, description, and optional image.

### Usage

Use the `FeatureShowcase` component to showcase a feature with an icon, heading, and description.

```tsx
 <div className={'container mx-auto'}>
  <div
    className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
  >
    <FeatureShowcase
      heading={
        <>
          <b className="font-semibold dark:text-white">
            The ultimate SaaS Starter Kit
          </b>
          .{' '}
          <GradientSecondaryText>
            Unleash your creativity and build your SaaS faster than ever
            with Makerkit.
          </GradientSecondaryText>
        </>
      }
      icon={
        <FeatureShowcaseIconContainer>
          <LayoutDashboard className="h-5" />
          <span>All-in-one solution</span>
        </FeatureShowcaseIconContainer>
      }
    >
      <FeatureGrid>
        <FeatureCard
          className={
            'relative col-span-2 overflow-hidden bg-violet-500 text-white lg:h-96'
          }
          label={'Beautiful Dashboard'}
          description={`Makerkit provides a beautiful dashboard to manage your SaaS business.`}
        >
          <Image
            className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-10/12"
            src={'/images/dashboard-header.webp'}
            width={'2061'}
            height={'800'}
            alt={'Dashboard Header'}
          />
        </FeatureCard>

        <FeatureCard
          className={
            'relative col-span-2 w-full overflow-hidden lg:col-span-1'
          }
          label={'Authentication'}
          description={`Makerkit provides a variety of providers to allow your users to sign in.`}
        >
          <Image
            className="absolute left-16 top-32 hidden h-auto w-8/12 rounded-l-2xl lg:flex"
            src={'/images/sign-in.webp'}
            width={'1760'}
            height={'1680'}
            alt={'Sign In'}
          />
        </FeatureCard>

        <FeatureCard
          className={
            'relative col-span-2 overflow-hidden lg:col-span-1 lg:h-96'
          }
          label={'Multi Tenancy'}
          description={`Multi tenant memberships for your SaaS business.`}
        >
          <Image
            className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border lg:top-28 lg:flex lg:h-auto lg:w-8/12"
            src={'/images/multi-tenancy.webp'}
            width={'2061'}
            height={'800'}
            alt={'Multi Tenancy'}
          />
        </FeatureCard>

        <FeatureCard
          className={'relative col-span-2 overflow-hidden lg:h-96'}
          label={'Billing'}
          description={`Makerkit supports multiple payment gateways to charge your customers.`}
        >
          <Image
            className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-11/12"
            src={'/images/billing.webp'}
            width={'2061'}
            height={'800'}
            alt={'Billing'}
          />
        </FeatureCard>
      </FeatureGrid>
    </FeatureShowcase>
  </div>
</div>
```

## SecondaryHero

The `SecondaryHero` component is a secondary hero section that can be used to highlight additional features or content on a landing page.

```tsx
<SecondaryHero
  pill={<Pill>Get started 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."
/>
```

{% component path="marketing/secondary-hero" /%}

## Header

The `Header` component is a navigation header that can be used to display links to different sections of a marketing page.

```tsx
export function SiteHeader(props: { user?: User | null }) {
  return (
    <Header
      logo={<AppLogo />}
      navigation={<SiteNavigation />}
      actions={<SiteHeaderAccountSection user={props.user ?? null} />}
    />
  );
}
```

## Footer

The `Footer` component is a footer section that can be used to display links, social media icons, and other information on a marketing page.

```tsx
import { Footer } from '@kit/ui/marketing';
import { Trans } from '@kit/ui/trans';

import { AppLogo } from '~/components/app-logo';
import appConfig from '~/config/app.config';

export function SiteFooter() {
  return (
    <Footer
      logo={<AppLogo className="w-[85px] md:w-[95px]" />}
      description={<Trans i18nKey="marketing.footerDescription" />}
      copyright={
        <Trans
          i18nKey="marketing.copyright"
          values={{
            product: appConfig.name,
            year: new Date().getFullYear(),
          }}
        />
      }
      sections={[
        {
          heading: <Trans i18nKey="marketing.about" />,
          links: [
            { href: '/blog', label: <Trans i18nKey="marketing.blog" /> },
            { href: '/contact', label: <Trans i18nKey="marketing.contact" /> },
          ],
        },
        {
          heading: <Trans i18nKey="marketing.product" />,
          links: [
            {
              href: '/docs',
              label: <Trans i18nKey="marketing.documentation" />,
            },
          ],
        },
        {
          heading: <Trans i18nKey="marketing.legal" />,
          links: [
            {
              href: '/terms-of-service',
              label: <Trans i18nKey="marketing.termsOfService" />,
            },
            {
              href: '/privacy-policy',
              label: <Trans i18nKey="marketing.privacyPolicy" />,
            },
            {
              href: '/cookie-policy',
              label: <Trans i18nKey="marketing.cookiePolicy" />,
            },
          ],
        },
      ]}
    />
  );
}
```

## CtaButton

The `CtaButton` component is a call-to-action button that can be used to encourage users to take a specific action.

{% component path="marketing/cta-button" /%}

```tsx
function MainCallToActionButton() {
  return (
    <div className={'flex space-x-4'}>
      <CtaButton>
        <Link href={'/auth/sign-up'}>
          <span className={'flex items-center space-x-0.5'}>
            <span>
              <Trans i18nKey={'common.getStarted'} />
            </span>

            <ArrowRightIcon
              className={
                'h-4 animate-in fade-in slide-in-from-left-8' +
                ' delay-1000 duration-1000 zoom-in fill-mode-both'
              }
            />
          </span>
        </Link>
      </CtaButton>

      <CtaButton variant={'link'}>
        <Link href={'/contact'}>
          <Trans i18nKey={'common.contactUs'} />
        </Link>
      </CtaButton>
    </div>
  );
}
```

## GradientSecondaryText

The `GradientSecondaryText` component is a text component that applies a gradient color to the text.

{% component path="marketing/gradient-secondary-text" /%}

```tsx
function GradientSecondaryTextExample() {
  return (
    <p>
      <GradientSecondaryText>
        Unleash your creativity and build your SaaS faster than ever with
        Makerkit.
      </GradientSecondaryText>
    </p>
  );
}
```

## GradientText

The `GradientText` component is a text component that applies a gradient color to the text.

{% component path="marketing/gradient-text" /%}

```tsx
function GradientTextExample() {
  return (
    <p>
      <GradientText className={'from-primary/60 to-primary'}>
        Unleash your creativity and build your SaaS faster than ever with
        Makerkit.
      </GradientText>
    </p>
  );
}
```

You can use the Tailwind CSS gradient utility classes to customize the gradient colors.

```tsx
<GradientText className={'from-violet-500 to-purple-700'}>
  Unleash your creativity and build your SaaS faster than ever with Makerkit.
</GradientText>
```

## NewsletterSignupContainer

The `NewsletterSignupContainer` is a comprehensive component for handling newsletter signups in a marketing context. It manages the entire signup flow, including form display, loading state, and success/error messages.

{% component path="marketing/newsletter-sign-up" /%}

### Import

```jsx
import { NewsletterSignupContainer } from '@kit/ui/marketing';
```

### Props

The `NewsletterSignupContainer` accepts the following props:
- `onSignup`: the callback function that will notify you of a submission
- `heading`: the heading of the component
- `description`: the description below the heading
- `successMessage`: the text to display on successful submissions
- `errorMessage`: the text to display on errors

The component also accepts all standard HTML div attributes.

### Usage

```tsx
'use client';

import { NewsletterSignupContainer } from '@kit/ui/marketing';

function WrapperNewsletterComponent() {
  const handleNewsletterSignup = async (email: string) => {
    // Implement your signup logic here
    await apiClient.subscribeToNewsletter(email);
  };

  return (
    <NewsletterSignupContainer 
      onSignup={handleNewsletterSignup}
      heading="Join Our Community"
      description="Be the first to know about new features and updates."
      successMessage="You're all set! Check your inbox for a confirmation email."
      errorMessage="Oops! Something went wrong. Please try again later."
      className="max-w-md mx-auto"
    />
  );
}
```

Wrap the component into a parent `client` component as you'll need to pass the `onSignup` function to the component.

The `onSignup` function should handle the signup process, such as making an API request to subscribe the user to the newsletter, whichever provider you're using.

### Behavior

1. Initially displays the newsletter signup form.
2. When the form is submitted, it shows a loading spinner.
3. On successful signup, displays a success message.
4. If an error occurs during signup, shows an error message.

### Styling

The component uses Tailwind CSS for styling. The container is flexbox-based and centers its content. You can customize the appearance by passing additional classes via the `className` prop.

### Accessibility

- Uses semantic HTML structure with appropriate headings.
- Provides clear feedback for form submission states.
- Error and success messages are displayed using the `Alert` component for consistent styling and accessibility.

### Notes

- It integrates with other Makerkit UI components like `Alert`, `Heading`, and `Spinner`.
- The actual signup logic is decoupled from the component, allowing for flexibility in implementation.