Skip to content

Hero Section

A landing page hero block with headline, description, CTA buttons, and a visual area. Fully responsive with dark mode support.

A full-width hero section with a gradient headline, supporting text, dual CTA buttons, and a visual content area. Designed for SaaS landing pages.

Copy the block source into your project:

// views/landing/hero-section.tsx
 
import Link from "next/link";
import { cn } from "@/lib/cn";
 
interface HeroSectionProps {
  /** Main headline */
  headline: string;
  /** Gradient text within the headline */
  gradientText?: string;
  /** Supporting description */
  description: string;
  /** Primary CTA button */
  primaryCta: { text: string; href: string };
  /** Secondary CTA button (optional) */
  secondaryCta?: { text: string; href: string };
  /** Additional CSS classes */
  className?: string;
}
 
export function HeroSection({
  headline,
  gradientText,
  description,
  primaryCta,
  secondaryCta,
  className,
}: HeroSectionProps) {
  return (
    <section
      className={cn(
        "relative flex flex-col items-center justify-center px-4 py-20 text-center sm:py-32",
        className
      )}
    >
      <h1 className="max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
        {headline}{" "}
        {gradientText && (
          <span className="bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">
            {gradientText}
          </span>
        )}
      </h1>
 
      <p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
        {description}
      </p>
 
      <div className="mt-10 flex flex-col gap-4 sm:flex-row">
        <Link
          href={primaryCta.href}
          className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-orange-500 to-orange-600 px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-orange-500/25 transition-all hover:-translate-y-0.5 hover:shadow-orange-500/40"
        >
          {primaryCta.text}
        </Link>
 
        {secondaryCta && (
          <Link
            href={secondaryCta.href}
            className="inline-flex items-center justify-center rounded-xl border border-border bg-background px-8 py-3 text-sm font-semibold text-foreground transition-all hover:bg-accent"
          >
            {secondaryCta.text}
          </Link>
        )}
      </div>
    </section>
  );
}

import { HeroSection } from "@/views/landing/hero-section";
 
export default function LandingPage() {
  return (
    <HeroSection
      headline="Ship your SaaS with"
      gradientText="$0/month infrastructure"
      description="Production-ready starters built on Cloudflare's free tier. Auth, billing, teams — scaffold in 2 minutes."
      primaryCta={{ text: "Get Started", href: "/signup?plan=pro" }}
      secondaryCta={{ text: "See Demo", href: "https://demo.studio.orunk.com" }}
    />
  );
}

PropTypeDefaultDescription
headlinestring—Main headline text
gradientTextstring—Text rendered with orange gradient
descriptionstring—Supporting description below headline
primaryCta{ text, href }—Primary call-to-action button
secondaryCta{ text, href }—Secondary button (optional)
classNamestring—Additional CSS classes on section

Change the gradient colors

<span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
  Custom gradient
</span>

Add a background pattern

<HeroSection
  className="bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-orange-500/5 via-transparent to-transparent"
  headline="With background pattern"
  description="..."
  primaryCta={{ text: "Get Started", href: "/" }}
/>
Aurora Button