Docs
Hero Minimal Centered

Hero Minimal Centered

A clean, focused hero section with centered content and lots of whitespace. Features optional badge, dual CTAs, and company logos.

Launching Soon

Build products people love

The simplest way to create, launch, and grow your business. No complexity, just results.

Get StartedLearn More

Trusted by leading companies

Stripe
Vercel
Linear
Notion
Figma

Features

  • ✅ Centered layout - Perfect vertical and horizontal centering
  • ✅ Generous whitespace - Breathing room around all elements
  • ✅ Clean typography - Large, readable text with proper hierarchy
  • ✅ Optional badge - Subtle top badge for announcements
  • ✅ Dual CTAs - Primary (dark) and secondary (outlined)
  • ✅ Company logos - Social proof section at bottom
  • ✅ Hover effects - Smooth transitions on all interactive elements
  • ✅ Responsive - Scales beautifully on all devices
  • ✅ Light theme - White background for clean aesthetic
  • ✅ TypeScript support - Full type safety

Installation

Copy and paste the following code into your project.

import { ArrowRight } from "lucide-react";
 
interface Company {
  name: string;
  logo?: string;
}
 
interface HeroMinimalCenteredProps {
  badge?: string;
  title: string;
  description: string;
  primaryCTA?: {
    text: string;
    href: string;
  };
  secondaryCTA?: {
    text: string;
    href: string;
  };
  companies?: Company[];
  className?: string;
}
 
export function HeroMinimalCentered({
  badge,
  title,
  description,
  primaryCTA,
  secondaryCTA,
  companies,
  className = "",
}: HeroMinimalCenteredProps) {
  return (
    <section
      className={`flex min-h-screen items-center justify-center bg-white px-4 py-20 dark:bg-zinc-950 ${className}`}
    >
      <div className="mx-auto w-full max-w-4xl text-center">
        {badge && (
          <div className="mb-8 inline-flex items-center rounded-full border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300">
            {badge}
          </div>
        )}
 
        <h1 className="mb-6 text-5xl font-bold leading-tight tracking-tight text-zinc-900 dark:text-white sm:text-6xl lg:text-7xl">
          {title}
        </h1>
 
        <p className="mx-auto mb-12 max-w-2xl text-xl leading-relaxed text-zinc-600 dark:text-zinc-400 sm:text-2xl">
          {description}
        </p>
 
        {(primaryCTA || secondaryCTA) && (
          <div className="mb-16 flex flex-col items-center justify-center gap-4 sm:flex-row">
            {primaryCTA && (
              <a
                href={primaryCTA.href}
                className="group inline-flex items-center gap-2 rounded-full bg-zinc-900 px-8 py-4 text-lg font-semibold text-white transition-all hover:bg-zinc-800 hover:gap-3 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
              >
                {primaryCTA.text}
                <ArrowRight className="h-5 w-5 transition-all" />
              </a>
            )}
            {secondaryCTA && (
              <a
                href={secondaryCTA.href}
                className="inline-flex items-center gap-2 rounded-full border-2 border-zinc-200 bg-white px-8 py-4 text-lg font-semibold text-zinc-900 transition-all hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:hover:border-zinc-600 dark:hover:bg-zinc-900"
              >
                {secondaryCTA.text}
              </a>
            )}
          </div>
        )}
 
        {companies && companies.length > 0 && (
          <div className="border-t border-zinc-200 pt-12 dark:border-zinc-800">
            <p className="mb-8 text-sm font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
              Trusted by leading companies
            </p>
            <div className="flex flex-wrap items-center justify-center gap-8 sm:gap-12">
              {companies.map((company, index) => (
                <div
                  key={index}
                  className="flex items-center justify-center text-zinc-400 transition-colors hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400"
                >
                  {company.logo ? (
                    <img
                      src={company.logo}
                      alt={company.name}
                      className="h-8 opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0"
                    />
                  ) : (
                    <span className="text-2xl font-bold">{company.name}</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

Usage

Basic Usage

import HeroMinimalCentered from "@/components/ui/hero-minimal-centered";
 
export default function Page() {
  return (
    <HeroMinimalCentered
      title="Build products people love"
      description="The simplest way to create and grow your business"
      primaryCTA={{
        text: "Get Started",
        href: "/signup",
      }}
    />
  );
}

With Badge

<HeroMinimalCentered
  badge="Launching Soon"
  title="Your Title"
  description="Your description"
  primaryCTA={{
    text: "Get Started",
    href: "#",
  }}
/>

With Dual CTAs

<HeroMinimalCentered
  title="Your Title"
  description="Your description"
  primaryCTA={{
    text: "Get Started",
    href: "#",
  }}
  secondaryCTA={{
    text: "Learn More",
    href: "#",
  }}
/>

With Company Logos

<HeroMinimalCentered
  title="Your Title"
  description="Your description"
  primaryCTA={{
    text: "Get Started",
    href: "#",
  }}
  companies={[
    { name: "Stripe" },
    { name: "Vercel" },
    { name: "Linear" },
    { name: "Notion" },
    { name: "Figma" },
  ]}
/>

With Logo Images

<HeroMinimalCentered
  title="Your Title"
  description="Your description"
  primaryCTA={{
    text: "Get Started",
    href: "#",
  }}
  companies={[
    { name: "Company 1", logo: "/logos/company1.svg" },
    { name: "Company 2", logo: "/logos/company2.svg" },
  ]}
/>

Props

HeroMinimalCenteredProps

PropTypeDefaultDescription
titlestringRequiredMain heading text
descriptionstringRequiredSubheading text
badgestringundefinedOptional top badge
primaryCTA{ text: string; href: string }undefinedPrimary button
secondaryCTA{ text: string; href: string }undefinedSecondary button
companiesCompany[]undefinedCompany logos/names
classNamestring""Additional CSS classes

Company

PropTypeRequiredDescription
namestringYesCompany name
logostringNoLogo image URL

TypeScript Interface

interface Company {
  name: string;
  logo?: string;
}
 
interface HeroMinimalCenteredProps {
  badge?: string;
  title: string;
  description: string;
  primaryCTA?: {
    text: string;
    href: string;
  };
  secondaryCTA?: {
    text: string;
    href: string;
  };
  companies?: Company[];
  className?: string;
}

Use Cases

Perfect for:

  • Product launches
  • Landing pages
  • Portfolio sites
  • Agency homepages
  • SaaS products
  • Minimalist brands
  • Premium products
  • Professional services

Customization

Dark Mode

<HeroMinimalCentered
  className="bg-zinc-950"
  // Update text colors in component
/>

Add Gradient Text

<h1 className="bg-gradient-to-r from-zinc-900 to-zinc-600 bg-clip-text text-transparent">
  {title}
</h1>

Add Subtle Animation

<div className="animate-fade-in">
  <h1>{title}</h1>
</div>

Custom Button Colors

// Replace bg-zinc-900 with your brand color
className="bg-blue-600 hover:bg-blue-700"

Accessibility

  • Semantic HTML - Proper heading hierarchy
  • Alt text - Required for company logos
  • Contrast - WCAG AA compliant
  • Focus states - Visible keyboard focus
  • Touch targets - Minimum 44x44px

Performance

  • No images - Fast loading (unless company logos)
  • Minimal CSS - Small bundle size
  • No animations - Smooth 60fps
  • Responsive images - Optimized logo sizes
Split Screen HeroFeature Grid 3-Column