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.

5 min read
Cover Image for Introducing Marketing Components: Crafting Stunning Landing Pages with Ease

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={ <Image 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." > <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> {/* 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! 馃殌


Read more about Changelog

Cover Image for Using the new Shadcn Sidebar in Makerkit

Using the new Shadcn Sidebar in Makerkit

3 min read
We have updated the sidebar to use the new Shadcn Sidebar. It's a new design and a more powerful component. In this post, we will learn how to use the new Shadcn Sidebar in Makerkit.
Cover Image for Upgrading to Next.js 15

Upgrading to Next.js 15

11 min read
Preparing the migration to Next.js 15. In this post, we will cover the changes that you need to make to your project to upgrade to Next.js 15, and how Makerkit will approach the migration.
Cover Image for Announcing the Analytics Package for Makerkit

Announcing the Analytics Package for Makerkit

5 min read
We're excited to announce the launch of the Analytics Package for Makerkit, enabling you to track user interactions and monitor your users behavior.
Cover Image for Introducing the Roadmap Plugin: Track and Share Your Project's Progress

Introducing the Roadmap Plugin: Track and Share Your Project's Progress

3 min read
The Roadmap Plugin allows you to create a roadmap for your project and display it on your website. Your users can see what features are planned, in progress, and completed and suggest new features or comment on existing ones.
Cover Image for Introducing the Testimonial Plugin for Makerkit

Introducing the Testimonial Plugin for Makerkit

4 min read
Introducing a new plugin to add testimonials to your app with ease
Cover Image for Creating a Delightful Onboarding Experience with Multi-Step Forms

Creating a Delightful Onboarding Experience with Multi-Step Forms

10 min read
In this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.