SaaSHeroSection

A modern hero section with glassmorphism elements, animated gradient blob buttons, and social proof. Features elegant typography mixing, risk-free messaging, and smooth hover animations. Perfect for SaaS landing pages, product launches, or any application needing a premium hero section.

✨ Features

• Responsive Typography: Elegant serif/sans-serif mixing with large headlines
• Animated Gradient Buttons: CTA buttons with moving gradient blob effects
• Glassmorphism Social Proof: "Trusted by" section with company logos and backdrop blur
• Risk-Free Messaging: Builds user confidence with trial details
• Header Height Compensation: Adjusts for fixed navigation headers
• Primary & Secondary CTAs: Distinct button variants with hover animations
• Dark Mode Support: Automatic adaptation with proper contrast ratios
• Custom SVG Logos: Six included company logos with hover states

📋 Prerequisites

This component requires:

• Next.js (with App Router)
• Tailwind CSS 4

🚀 Installation

# No additional dependencies required beyond Next.js and Tailwind

📁 Files Included

The component bundle includes:

• index.tsx - Main hero section with sub-components
• README.md - This documentation

🎯 Basic Usage

1import { SaaSHeroSection } from './components/saas-hero-section';
2
3export default function LandingPage() {
4    return (
5        <div>
6            <SaaSHeroSection />
7        </div>
8    );
9}

The component renders a complete hero section with headline, description, CTA buttons, risk-free messaging, and social proof with company logos.

🔧 Props

SaaSHeroSection

📖 Examples

Basic Implementation

1import { SaaSHeroSection } from './components/saas-hero-section';
2
3export default function HomePage() {
4    return (
5        <div>
6            <header className="fixed top-0 w-full h-16 bg-white z-50">
7                <nav>Your navigation</nav>
8            </header>
9
10            <SaaSHeroSection headerHeightInPx={64} />
11
12            <main>
13                <section>Rest of your content</section>
14            </main>
15        </div>
16    );
17}

No Fixed Header

1<SaaSHeroSection headerHeightInPx={0} />

Custom Header Height

1// For a 80px tall fixed header
2<SaaSHeroSection headerHeightInPx={80} />
3
4// For a 120px tall header with announcement bar
5<SaaSHeroSection headerHeightInPx={120} />

Landing Page Layout

1export default function ProductLanding() {
2    return (
3        <div className="min-h-screen">
4            {/* Fixed navigation */}
5            <nav className="fixed top-0 w-full h-18 z-50">
6                Navigation content
7            </nav>
8
9            {/* Hero takes remaining viewport height */}
10            <SaaSHeroSection headerHeightInPx={72} />
11
12            {/* Additional sections */}
13            <section className="py-20">Features</section>
14            <section className="py-20">Pricing</section>
15            <section className="py-20">Testimonials</section>
16        </div>
17    );
18}

📝 Customizing Content

Headline and Description

Edit directly in the component file:

1<h1 className='...'>
2  Your Custom <span className='font-serif italic'>Headline</span> Here
3</h1>
4<p className='...'>
5  Your compelling value proposition and description text.
6</p>

CTA Buttons

1<CtaButton>
2  Your Primary CTA
3  {/* Optional icon */}
4</CtaButton>
5<CtaButton variant={'secondary'}>
6  Secondary Action
7</CtaButton>

Risk-Free Messaging

1<div className="text-xs text-zinc-500 dark:text-zinc-400 font-light">
2    Your custom risk-free message • 30-day trial • No commitments
3</div>

Company Logos

Replace the company data in TrustedBySection:

1const companies = [
2    { name: 'Your Company 1', logo: <YourLogo1 /> },
3    { name: 'Your Company 2', logo: <YourLogo2 /> },
4    // Add up to 6 companies for best layout
5];

🎨 Built-in Components

CtaButton

Reusable gradient blob button component:

1<CtaButton variant="primary">
2  Primary Action
3</CtaButton>
4
5<CtaButton variant="secondary">
6  Secondary Action
7</CtaButton>

TrustedBySection

Glassmorphism social proof section with animated background blobs:

1<TrustedBySection />

🎭 Animation Details

Gradient Blob Effects

• Hover Animation: Blobs grow and change position on hover
• Color Variants: Different gradients for primary/secondary buttons
• Duration: 700ms smooth transitions with ease-out timing

Button Interactions

• Scale Effect: Buttons scale to 102% on hover
• Backdrop Blur: Uses backdrop-blur-xl for glassmorphism
• Color Transitions: Smooth color changes for dark/light modes

Glassmorphism Social Proof

• Background: Semi-transparent with backdrop blur
• Inner Glow: Gradient overlay appears on hover
• Logo Effects: Company logos have subtle hover states

💡 Content Guidelines

Typography Hierarchy

• Main Headline: Mix serif italic with sans-serif for emphasis
• Description: Keep concise, focus on value proposition
• Risk-Free Text: Use bullet points for easy scanning

CTA Strategy

• Primary Button: Action-oriented ("Start Free Trial", "Get Started")
• Secondary Button: Lower commitment ("Learn More", "Contact Sales")
• Risk-Free: Address common objections (no credit card, cancel anytime)

Social Proof

• Company Selection: Choose recognizable brands or relevant industry leaders
• Logo Quality: Use simple, clean SVG logos for best scaling
• Quantity: 3-6 companies work best for visual balance

📱 Responsive Behavior

Typography Scaling

• Mobile: 4xl headline (2.25rem)
• Desktop: 7xl headline (4.5rem)
• Line Height: Tight leading for impact

Layout Adjustments

• Mobile: Stacked elements, smaller gaps
• Desktop: Centered content with wider containers
• Buttons: Maintain size and spacing across devices

Company Logos

• Mobile: 3-column grid layout
• Desktop: 6-column horizontal layout
• Spacing: Responsive gaps between logos

🌙 Dark Mode Support

Automatically adapts styling for dark mode:

Text Colors

• Headlines: text-black dark:text-white
• Descriptions: text-zinc-600 dark:text-zinc-400
• Risk-Free: text-zinc-500 dark:text-zinc-400

Button Variants

• Primary: Dark button in light mode, light button in dark mode
• Secondary: Light button in light mode, dark button in dark mode
• Gradients: Adjusted opacity and colors for both modes

Glassmorphism Effects

• Background: bg-white/50 dark:bg-zinc-900/50
• Borders: border-white/30 dark:border-zinc-700/50
• Gradient Blobs: Mode-specific color variations

🔧 Header Height Calculation

The component uses calc(100svh - {headerHeight}px) to ensure proper viewport usage:

1// For 72px header
2minHeight: 'calc(100svh - 72px)';
3
4// For no header
5minHeight: 'calc(100svh - 0px)';
6
7// For custom height
8minHeight: 'calc(100svh - 120px)';

This ensures the hero section fills the remaining viewport height perfectly.