Introducing Marketing Components: Crafting Stunning Landing Pages with Ease

We're excited to announce the release of Marketing Components, a collection of reusable UI components for marketing websites and landing pages.

I am super happy to introduce a new set of Marketing Components that will help you create stunning landing pages for your projects. These components are designed to be highly customizable, responsive, and easy to use, allowing you to focus on creating engaging content without worrying about the underlying layout and styling.

Let's dive into what makes these components so exciting:

  1. Hero Component: The centerpiece of any great landing page. The new Hero component is a game-changer. It's a versatile, customizable section that allows you to create stunning above-the-fold content with ease. With props for title, subtitle, CTA, and even an optional "pill" for highlighting new features, you can create a compelling first impression in minutes.
  2. Feature Showcase: Highlight Your Product's Best Attributes. The FeatureShowcase, FeatureGrid, and FeatureCard components work together seamlessly to help you present your product's features in an visually appealing and organized manner. Whether you're showcasing a beautiful dashboard, authentication options, or billing features, these components have got you covered.
  3. SecondaryHero: For When One Hero Isn't Enough. Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections, ideal for pricing information or secondary CTAs.
  4. Header and Footer: Polished Navigation and Information. No landing page is complete without a sleek header and informative footer. Makerkit's new Header and Footer components are fully customizable and responsive, ensuring your page looks professional from top to bottom.
  5. Call-to-Action Buttons: Drive User Engagement. The new CtaButton component makes it easy to create eye-catching call-to-action buttons. Whether you're encouraging sign-ups or directing users to contact you, these buttons are designed to convert.
  6. Gradient Text Components: Add a Touch of Flair. With GradientText and GradientSecondaryText components, you can add a modern, stylish touch to your typography. These components leverage Tailwind CSS, allowing for easy customization of gradient colors.

For a complete list of available components and detailed documentation, check out the Marketing Components documentation.

Using Marketing Components in Your Next.js Supabase SaaS Kit

Let's dive into some practical examples to see just how easy it is to create stunning landing pages with Makerkit's new Marketing Components:

Creating an Attention-Grabbing Hero Section

Here's how you can use the Hero component to create a compelling hero section for your landing page:

import { Hero, Pill } from '@kit/ui/marketing';
import { Button } from '@kit/ui/button';
import Image from 'next/image';
function LandingPage() {
  return (
    <Hero
      pill={<Pill>New Feature</Pill>}
      title="Welcome to Our Revolutionary App"
      subtitle="Discover the power of our innovative solution"
      cta={<Button>Get Started Free</Button>}
      image={
        <img
          src="/hero-image.jpg"
          alt="App Dashboard"
          width={1200}
          height={600}
        />
      }
    />
  );
}

With just a few lines of code, you've created a professional-looking hero section complete with a highlighted pill, compelling title and subtitle, a call-to-action button, and a featured image. The Hero component handles all the layout and styling, allowing you to focus on your content.

Hero Component

Showcasing Your Product's Features

The FeatureShowcase, FeatureGrid, and FeatureCard components work together to help you present your product's features in a visually appealing way. Here's an example of how you can use these components to showcase a beautiful dashboard:

import { FeatureShowcase, FeatureGrid, FeatureCard, FeatureShowcaseIconContainer } from '@kit/ui/marketing';
import { LayoutDashboard } from 'lucide-react';
import Image from 'next/image';
function FeaturesSection() {
  return (
    <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."
        >
          <img
            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>
        {/* Add more FeatureCard components as needed */}
      </FeatureGrid>
    </FeatureShowcase>
  );
}

This example demonstrates how easy it is to create a visually appealing feature showcase. The FeatureShowcase component provides a clean layout, while FeatureGrid and FeatureCard components allow you to highlight individual features with images and descriptions.

Features Grid Component

Adding a Secondary Hero Section

Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections. Here's an example of how you can use it to showcase pricing information:

import { SecondaryHero, Pill } from '@kit/ui/marketing';
function PricingSection() {
  return (
    <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."
    />
  );
}
Secondary Hero Component

A polished footer is essential for any landing page. Makerkit's Footer component makes it easy to create a professional footer that complements your page's design:

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" /> },
          ],
        },
        // Add more sections as needed
      ]}
    />
  );
}

The Footer component allows you to quickly set up a comprehensive footer with multiple sections, links, and even supports internationalization out of the box.

Conclusion

This is the first iteration of Makerkit's Marketing Components, but you can expect some more components to be released in the future.

Can't wait to see how you'll use these components to create stunning landing pages for your projects! 🚀