All 18 Marketing Components — A Complete Guide

import { HeroCentered } from "@/components/marketing/hero-centered";
 
<HeroCentered
  eyebrow="Now in Beta"
  headline="Ship your SaaS in days, not months"
  subheadline="Auth, payments, blog, ecommerce — pre-built and production-ready."
  primaryCta={{ label: "Get Started", href: "/pricing" }}
  secondaryCta={{ label: "View Demo", href: "/demo" }}
/>

import { HeroSplit } from "@/components/marketing/hero-split";
 
<HeroSplit
  headline="Build faster with MantleKit"
  subheadline="Everything you need to launch your next project."
  image="/images/hero-screenshot.png"
  primaryCta={{ label: "Start Building", href: "/pricing" }}
/>

import { HeroVideo } from "@/components/marketing/hero-video";
 
<HeroVideo
  headline="See MantleKit in action"
  subheadline="Watch a 2-minute walkthrough of what you get."
  videoUrl="https://youtube.com/embed/your-video-id"
  primaryCta={{ label: "Try It Free", href: "/pricing" }}
/>

import { Testimonials } from "@/components/marketing/testimonials";
 
<Testimonials
  eyebrow="What People Say"
  headline="Loved by developers"
  testimonials={[
    {
      quote: "Saved me weeks of setup time.",
      author: "Sarah Chen",
      role: "Indie Hacker",
      avatar: "/images/avatar-sarah-chen.jpg",
    },
    {
      quote: "The theme quality is in a different league.",
      author: "Marcus Rivera",
      role: "CTO, Rivera Digital",
      avatar: "/images/avatar-marcus-rivera.jpg",
    },
  ]}
/>

import { LogoCloud } from "@/components/marketing/logo-cloud";
 
<LogoCloud
  label="Trusted by teams at"
  logos={["Vercel", "Supabase", "Stripe", "Linear", "Notion"]}
/>

import { StatsSection } from "@/components/marketing/stats-section";
 
<StatsSection
  eyebrow="By the Numbers"
  headline="Built for scale"
  stats={[
    { value: "2,400+", label: "Teams using MantleKit" },
    { value: "99.9%", label: "Uptime" },
    { value: "< 1hr", label: "Average setup time" },
  ]}
/>

import { FeaturesGrid } from "@/components/marketing/features-grid";
import { Shield, CreditCard, Palette } from "lucide-react";
 
<FeaturesGrid
  eyebrow="Features"
  headline="Everything you need"
  features={[
    {
      icon: Shield,
      title: "Authentication",
      description: "Google OAuth, magic links, email/password.",
    },
    {
      icon: CreditCard,
      title: "Payments",
      description: "Stripe, Lemon Squeezy, or Polar.",
    },
    {
      icon: Palette,
      title: "5+ Themes",
      description: "Each visually distinct. CSS variable-driven.",
    },
  ]}
/>

import { ComparisonTable } from "@/components/marketing/comparison-table";
 
<ComparisonTable
  eyebrow="Compare"
  headline="Why MantleKit?"
  product="MantleKit"
  competitors={["DIY", "Other Boilerplates"]}
  features={[
    { name: "5+ Themes", values: [true, false, false] },
    { name: "Ecommerce", values: [true, false, "Partial"] },
    { name: "CLI Setup", values: [true, false, false] },
  ]}
/>

import { TimelineSection } from "@/components/marketing/timeline-section";
 
<TimelineSection
  eyebrow="Roadmap"
  headline="What's coming"
  items={[
    { date: "Q1 2026", title: "Launch", description: "Public release with 10+ themes." },
    { date: "Q2 2026", title: "Marketplace", description: "Community theme marketplace." },
  ]}
/>

import { PricingTable } from "@/components/marketing/pricing-table";
 
<PricingTable
  eyebrow="Pricing"
  headline="Simple, transparent pricing"
  tiers={[
    {
      name: "Starter",
      price: "$79",
      description: "Perfect for your first SaaS",
      features: ["1 Theme", "Auth + Payments", "MDX Blog"],
      cta: { label: "Get Started", href: "/checkout/starter" },
    },
    {
      name: "Pro",
      price: "$149",
      description: "Everything you need",
      features: ["All Themes", "Ecommerce", "All Providers"],
      cta: { label: "Get Pro", href: "/checkout/pro" },
      featured: true,
    },
  ]}
/>

import { PricingComparison } from "@/components/marketing/pricing-comparison";
 
<PricingComparison
  eyebrow="Compare Plans"
  headline="Find your perfect plan"
  tiers={["Starter", "Pro", "Agency"]}
  categories={[
    {
      name: "Core",
      features: [
        { name: "Themes", values: ["1", "All 10+", "All 10+"] },
        { name: "Payment Providers", values: ["1", "3", "3"] },
      ],
    },
  ]}
/>

import { TeamSection } from "@/components/marketing/team-section";
 
<TeamSection
  eyebrow="Team"
  headline="Meet the Team"
  members={[
    {
      name: "Sarah Chen",
      role: "Lead Engineer",
      image: "/images/staff-sarah-chen.jpg",
      bio: "Full-stack engineer building developer tools.",
    },
  ]}
/>

import { ContactForm } from "@/components/marketing/contact-form";
 
<ContactForm />

import { BlogCards } from "@/components/marketing/blog-cards";
 
<BlogCards
  eyebrow="Blog"
  headline="Latest from the team"
  posts={[
    {
      title: "Getting Started with MantleKit",
      excerpt: "Everything you need to go from zero to deployed.",
      href: "/blog/guides/getting-started",
      image: "/images/blog-dashboard.jpg",
      tag: "Guide",
      date: "Mar 28, 2026",
    },
  ]}
/>

import { CtaSection } from "@/components/marketing/cta-section";
 
<CtaSection
  headline="Ready to ship?"
  subheadline="Get MantleKit and launch your project this weekend."
  primaryCta={{ label: "Get Started", href: "/pricing" }}
  secondaryCta={{ label: "View Demo", href: "/demo" }}
/>

import { NewsletterSignup } from "@/components/marketing/newsletter-signup";
 
<NewsletterSignup
  eyebrow="Newsletter"
  headline="Stay in the loop"
  subheadline="Get updates on new themes, features, and tips."
/>

import { AnnouncementBanner } from "@/components/marketing/announcement-banner";
 
<AnnouncementBanner
  message="MantleKit v2 is here!"
  linkText="See what's new"
  linkHref="/blog/guides/whats-new"
/>

import { CheckoutModal } from "@/components/marketing/checkout-modal";
 
<CheckoutModal
  tier="pro"
  price="$149"
  features={["All Themes", "Ecommerce", "Priority Support"]}
/>

import { HeroCentered } from "@/components/marketing/hero-centered";
import { LogoCloud } from "@/components/marketing/logo-cloud";
import { FeaturesGrid } from "@/components/marketing/features-grid";
import { Testimonials } from "@/components/marketing/testimonials";
import { PricingTable } from "@/components/marketing/pricing-table";
import { CtaSection } from "@/components/marketing/cta-section";
 
export default function LandingPage() {
  return (
    <>
      <HeroCentered {...heroProps} />
      <LogoCloud {...logoProps} />
      <FeaturesGrid {...featureProps} />
      <Testimonials {...testimonialProps} />
      <PricingTable {...pricingProps} />
      <CtaSection {...ctaProps} />
    </>
  );
}