New: AI-powered features

Build faster with modern tools

The complete platform for building, deploying, and scaling your applications. Ship faster with our powerful developer tools.

No credit card required

14-day free trial

Cancel anytime

Loved by 10,000+ users

Vercel

Stripe

Linear

Notion

+127%

Growth

10K+

Users

Features

✅ Responsive 2-column layout (stacks on mobile)
✅ Animated gradient backgrounds with multiple layers
✅ Staggered fade-in animations
✅ Shimmer effect on product preview
✅ Floating stat cards with animations
✅ Gradient text with underline effect
✅ Primary and secondary CTAs with hover effects
✅ Feature checklist with animated icons
✅ Star ratings and user count
✅ Trust badges with hover effects
✅ Fully customizable and accessible

Installation

Copy and paste the following code into your project.

"use client";
 
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2, Sparkles, Star } from "lucide-react";
 
export function SaasHeroClassic() {
  return (
    <section className="relative overflow-hidden py-20 sm:py-32">
      <div className="absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:40px_40px]" />
        <div className="absolute left-1/2 top-0 -z-10 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-gradient-to-br from-primary/20 via-primary/5 to-transparent blur-3xl" />
        <div className="absolute right-0 top-1/2 -z-10 h-[400px] w-[400px] -translate-y-1/2 rounded-full bg-gradient-to-l from-purple-500/10 to-transparent blur-3xl" />
      </div>
 
      <div className="container mx-auto px-4">
        <div className="grid items-center gap-16 lg:grid-cols-2 lg:gap-20">
          <div className="flex flex-col space-y-8 lg:space-y-10">
            <div className="group inline-flex w-fit animate-in fade-in slide-in-from-bottom-3 items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-sm backdrop-blur-sm transition-all hover:border-primary/30 hover:bg-primary/10">
              <Sparkles className="h-3.5 w-3.5 text-primary" />
              <span className="font-medium">New: AI-powered features</span>
            </div>
 
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
              <h1 className="text-4xl font-bold leading-tight tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
                Build faster with{" "}
                <span className="relative inline-block">
                  <span className="bg-gradient-to-r from-primary via-purple-500 to-primary bg-clip-text text-transparent">
                    modern tools
                  </span>
                  <span className="absolute -bottom-2 left-0 h-1 w-full bg-gradient-to-r from-primary/50 via-purple-500/50 to-primary/50 blur-sm" />
                </span>
              </h1>
              <p className="max-w-xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
                The complete platform for building, deploying, and scaling your
                applications. Ship faster with our powerful developer tools.
              </p>
            </div>
 
            <div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-5 duration-1000 sm:flex-row">
              <Button size="lg" className="group relative overflow-hidden">
                <span className="relative z-10 flex items-center">
                  Get Started Free
                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                </span>
                <div className="absolute inset-0 -z-0 bg-gradient-to-r from-primary to-purple-600 opacity-0 transition-opacity group-hover:opacity-100" />
              </Button>
              <Button size="lg" variant="outline" className="group">
                <span className="flex items-center">
                  View Demo
                  <svg
                    className="ml-2 h-4 w-4 transition-transform group-hover:scale-110"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                    />
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </span>
              </Button>
            </div>
 
            <div className="flex flex-col gap-3 pt-2 animate-in fade-in slide-in-from-bottom-6 duration-1000">
              {[
                "No credit card required",
                "14-day free trial",
                "Cancel anytime",
              ].map((feature, i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 text-sm transition-transform hover:translate-x-1"
                >
                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500/10">
                    <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
                  </div>
                  <span className="text-muted-foreground">{feature}</span>
                </div>
              ))}
            </div>
 
            <div className="pt-8 animate-in fade-in slide-in-from-bottom-7 duration-1000">
              <div className="mb-6 flex items-center gap-2">
                <div className="flex -space-x-2">
                  {[1, 2, 3, 4].map((i) => (
                    <div
                      key={i}
                      className="h-8 w-8 rounded-full border-2 border-background bg-gradient-to-br from-primary/20 to-purple-500/20"
                    />
                  ))}
                </div>
                <div className="flex items-center gap-1">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <Star
                      key={i}
                      className="h-4 w-4 fill-yellow-400 text-yellow-400"
                    />
                  ))}
                </div>
                <span className="text-sm font-medium">
                  Loved by 10,000+ users
                </span>
              </div>
              <div className="flex flex-wrap items-center gap-6 opacity-60 transition-opacity hover:opacity-100">
                {["Vercel", "Stripe", "Linear", "Notion"].map((company) => (
                  <div
                    key={company}
                    className="text-xl font-semibold tracking-tight transition-transform hover:scale-105"
                  >
                    {company}
                  </div>
                ))}
              </div>
            </div>
          </div>
 
          <div className="relative animate-in fade-in slide-in-from-right duration-1000 lg:animate-in lg:slide-in-from-right-10">
            <div className="group relative">
              <div className="relative aspect-[4/3] overflow-hidden rounded-3xl border border-border/50 bg-gradient-to-br from-muted/50 to-muted shadow-2xl transition-all duration-500 group-hover:shadow-primary/20">
                <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" />
                <div className="flex h-full flex-col items-center justify-center p-8">
                  <div className="relative mb-6">
                    <div className="h-32 w-32 rounded-2xl bg-gradient-to-br from-primary/20 to-purple-500/20 shadow-lg" />
                    <div className="absolute -right-2 -top-2 h-8 w-8 rounded-full bg-green-500 shadow-lg" />
                  </div>
                  <div className="space-y-3 text-center">
                    <div className="mx-auto h-4 w-48 rounded-full bg-muted-foreground/20" />
                    <div className="mx-auto h-4 w-32 rounded-full bg-muted-foreground/10" />
                  </div>
                </div>
 
                <div className="absolute right-4 top-4 h-20 w-20 rounded-full bg-primary/20 blur-2xl" />
                <div className="absolute bottom-4 left-4 h-24 w-24 rounded-full bg-purple-500/20 blur-2xl" />
              </div>
 
              <div className="absolute -right-4 -top-4 -z-10 h-72 w-72 rounded-full bg-gradient-to-br from-primary/20 to-transparent blur-3xl" />
              <div className="absolute -bottom-4 -left-4 -z-10 h-72 w-72 rounded-full bg-gradient-to-tr from-purple-500/20 to-transparent blur-3xl" />
            </div>
 
            <div className="absolute -left-4 top-1/4 hidden animate-float rounded-2xl border border-border/50 bg-background/80 p-4 shadow-lg backdrop-blur-sm lg:block">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10">
                  <svg
                    className="h-5 w-5 text-green-500"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                </div>
                <div>
                  <div className="text-sm font-semibold">+127%</div>
                  <div className="text-xs text-muted-foreground">Growth</div>
                </div>
              </div>
            </div>
 
            <div className="absolute -right-4 bottom-1/4 hidden animate-float-delayed rounded-2xl border border-border/50 bg-background/80 p-4 shadow-lg backdrop-blur-sm animation-delay-2000 lg:block">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10">
                  <svg
                    className="h-5 w-5 text-blue-500"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
                    />
                  </svg>
                </div>
                <div>
                  <div className="text-sm font-semibold">10K+</div>
                  <div className="text-xs text-muted-foreground">Users</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
 
      <style jsx>{`
        @keyframes shimmer {
          100% {
            transform: translateX(100%);
          }
        }
        @keyframes float {
          0%,
          100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        @keyframes float-delayed {
          0%,
          100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        .animate-float {
          animation: float 3s ease-in-out infinite;
        }
        .animate-float-delayed {
          animation: float-delayed 3s ease-in-out infinite;
          animation-delay: 1s;
        }
      `}</style>
    </section>
  );
}

Update the import paths to match your project setup.

Usage

import SaasHeroClassic from "@/components/ui/saas-hero-classic";
 
export default function HomePage() {
  return <SaasHeroClassic />;
}

Customization

Change the headline and badge

<div className="group inline-flex w-fit items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-sm">
  <Sparkles className="h-3.5 w-3.5 text-primary" />
  <span className="font-medium">Your custom badge text</span>
</div>
 
<h1 className="text-4xl font-bold leading-tight tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
  Your headline{" "}
  <span className="relative inline-block">
    <span className="bg-gradient-to-r from-primary via-purple-500 to-primary bg-clip-text text-transparent">
      with gradient
    </span>
    <span className="absolute -bottom-2 left-0 h-1 w-full bg-gradient-to-r from-primary/50 via-purple-500/50 to-primary/50 blur-sm" />
  </span>
</h1>

Update CTAs and features

<Button size="lg" className="group relative overflow-hidden">
  <span className="relative z-10 flex items-center">
    Your CTA Text
    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
  </span>
  <div className="absolute inset-0 -z-0 bg-gradient-to-r from-primary to-purple-600 opacity-0 transition-opacity group-hover:opacity-100" />
</Button>
 
{["Feature 1", "Feature 2", "Feature 3"].map((feature, i) => (
  <div key={i} className="flex items-center gap-3 text-sm">
    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500/10">
      <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
    </div>
    <span className="text-muted-foreground">{feature}</span>
  </div>
))}

Customize stats and trust badges

<div className="mb-6 flex items-center gap-2">
  <div className="flex -space-x-2">
    {[1, 2, 3, 4].map((i) => (
      <div key={i} className="h-8 w-8 rounded-full border-2 border-background bg-gradient-to-br from-primary/20 to-purple-500/20" />
    ))}
  </div>
  <div className="flex items-center gap-1">
    {[1, 2, 3, 4, 5].map((i) => (
      <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
    ))}
  </div>
  <span className="text-sm font-medium">Loved by 10,000+ users</span>
</div>
 
<div className="flex flex-wrap items-center gap-6">
  {["Your", "Company", "Logos", "Here"].map((company) => (
    <div key={company} className="text-xl font-semibold">{company}</div>
  ))}
</div>

Add floating stat cards

<div className="absolute -left-4 top-1/4 animate-float rounded-2xl border bg-background/80 p-4 shadow-lg backdrop-blur-sm">
  <div className="flex items-center gap-3">
    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10">
      {/* Your icon */}
    </div>
    <div>
      <div className="text-sm font-semibold">+127%</div>
      <div className="text-xs text-muted-foreground">Growth</div>
    </div>
  </div>
</div>

Best Practices

Keep headline clear - Users should understand your value proposition in 3 seconds
Strong CTA - Use action-oriented text like "Get Started Free" or "Start Building"
Add social proof - Include logos of well-known companies using your product
Show the product - Use a high-quality screenshot or demo video
Mobile-first - Ensure it looks great on all screen sizes
Fast loading - Optimize images and use lazy loading

Use Cases

B2B SaaS products
Developer tools
Productivity apps
API platforms
Analytics dashboards
Project management tools

Examples

This hero section style is used by:

Stripe - Payment processing
Notion - Productivity workspace
Linear - Issue tracking
Vercel - Deployment platform

Props

This component doesn't accept props by default, but you can easily convert it to accept props for dynamic content:

interface SaasHeroClassicProps {
  badge?: {
    icon?: React.ReactNode;
    text: string;
  };
  headline: string;
  highlightedText: string;
  description: string;
  primaryCTA: {
    text: string;
    onClick?: () => void;
  };
  secondaryCTA?: {
    text: string;
    onClick?: () => void;
  };
  features?: string[];
  stats?: {
    users: string;
    rating: number;
  };
  trustBadges?: string[];
}

Classic SaaS Hero