Marketing Components in the Next.js Supabase SaaS kit

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

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.

Import

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

Usage

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:

Modifying the default classes in the component.
Passing additional classes via the className prop.
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:

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.

Props

The HeroTitle component accepts the following props:

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

Usage

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.

Usage

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

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.

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

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

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

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

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

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.

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.

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.

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.

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

Import

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

Props

The NewsletterSignupContainer accepts the following props:

---
---

---

---

The component also accepts all standard HTML div attributes.

Usage

'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

Initially displays the newsletter signup form.
When the form is submitted, it shows a loading spinner.
On successful signup, displays a success message.
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.