React Hero Sections That Actually Convert: 5 Patterns with Code

The hero section has one job: make someone keep scrolling. It’s not a branding exercise. It’s not a place to show off animation chops. It’s a conversion decision that happens in about three seconds.

Most hero sections fail because they’re built for the client presentation, not the end user. They look impressive in Figma. They don’t do the thing they’re supposed to do.

Here are five patterns that consistently work, with the React code to implement each one.

Pattern 1: The Direct Value Proposition

When to use it: Service businesses, agencies, consultants — anywhere the question is “can they help me with [specific thing]?”

What it does: States exactly what you do, who you do it for, and what happens next. No cleverness. No mystery.

export function DirectHero() {
  return (
    <section className="min-h-[80vh] flex items-center bg-gray-950 text-white px-6">
      <div className="max-w-4xl mx-auto">
        <p className="text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-4">
          Web Development for Contractors
        </p>
        <h1 className="text-5xl md:text-7xl font-bold leading-tight mb-6">
          Fast websites that <br />
          <span className="text-indigo-400">get you more calls.</span>
        </h1>
        <p className="text-xl text-gray-400 max-w-2xl mb-10">
          We build clean, mobile-first sites for roofing, HVAC, and trades businesses.
          No templates. No WordPress. Live in 2 weeks.
        </p>
        <div className="flex flex-col sm:flex-row gap-4">
          <a
            href="/get-started"
            className="bg-indigo-500 hover:bg-indigo-600 text-white font-semibold
              px-8 py-4 rounded-lg text-center transition-colors"
          >
            Get a Free Quote
          </a>
          <a
            href="/work"
            className="border border-gray-600 hover:border-gray-400 text-gray-300
              font-semibold px-8 py-4 rounded-lg text-center transition-colors"
          >
            See Our Work
          </a>
        </div>
      </div>
    </section>
  );
}

Why it works: The headline is a direct benefit statement. The subhead handles objections (how long, what kind). Two CTAs — one for ready buyers, one for browsers.

Pattern 2: Social Proof Lead

When to use it: Businesses with strong reviews, credentials, or client logos. Trust is the primary purchase driver.

What it does: Opens with proof before making any claim. Credibility first, pitch second.

const STATS = [
  { value: '200+', label: 'Sites Launched' },
  { value: '4.9★', label: 'Average Rating' },
  { value: '2 Weeks', label: 'Avg. Delivery' },
];

export function SocialProofHero() {
  return (
    <section className="min-h-[80vh] flex flex-col justify-center bg-white px-6 py-20">
      <div className="max-w-5xl mx-auto w-full">
        <div className="flex items-center gap-3 mb-8">
          <div className="flex -space-x-2">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="w-9 h-9 rounded-full bg-gray-300 border-2 border-white"
              />
            ))}
          </div>
          <p className="text-sm text-gray-600">
            Trusted by <strong>200+ contractors</strong> across Southern California
          </p>
        </div>

        <h1 className="text-5xl md:text-6xl font-bold text-gray-900 leading-tight mb-6">
          The last website <br /> you'll ever need to redo.
        </h1>

        <p className="text-lg text-gray-500 max-w-xl mb-12">
          Built fast, built clean, built to rank. We've done this for roofing companies,
          HVAC contractors, and general contractors from LA to San Bernardino.
        </p>

        <div className="grid grid-cols-3 gap-8 mb-12 max-w-md">
          {STATS.map((stat) => (
            <div key={stat.label}>
              <p className="text-3xl font-bold text-gray-900">{stat.value}</p>
              <p className="text-sm text-gray-500">{stat.label}</p>
            </div>
          ))}
        </div>

        <a
          href="/get-started"
          className="inline-block bg-gray-900 text-white font-semibold px-8 py-4
            rounded-lg hover:bg-gray-700 transition-colors"
        >
          Start Your Project →
        </a>
      </div>
    </section>
  );
}

Pattern 3: Problem/Solution Frame

When to use it: Markets where the prospect already feels the pain. You’re naming it before offering the fix.

What it does: Opens by articulating a frustration the visitor is already experiencing. The relief of being understood carries them into the pitch.

export function ProblemSolutionHero() {
  return (
    <section className="min-h-[80vh] flex items-center bg-slate-900 text-white px-6">
      <div className="max-w-4xl mx-auto">
        <div className="bg-slate-800 border border-slate-700 rounded-xl px-6 py-4
          inline-block mb-8">
          <p className="text-slate-400 text-sm">
            😤 "My WordPress site is slow, broken, and I have no idea who built it."
          </p>
        </div>

        <h1 className="text-5xl md:text-6xl font-bold leading-tight mb-6">
          There's a better way <br />
          <span className="text-emerald-400">to have a website.</span>
        </h1>

        <p className="text-lg text-slate-400 max-w-2xl mb-10">
          No plugins. No databases. No mystery. Just a fast, clean site you actually
          understand — delivered in two weeks and maintained by us forever.
        </p>

        <a
          href="/get-started"
          className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white
            font-bold px-8 py-4 rounded-lg transition-colors"
        >
          Fix My Website
        </a>
      </div>
    </section>
  );
}

Pattern 4: Split Layout with Visual

When to use it: When you have a strong visual — a product screenshot, a before/after, a photo of real work.

What it does: Text on the left, image on the right. Classic, effective, works at every screen size.

export function SplitHero() {
  return (
    <section className="min-h-[85vh] grid md:grid-cols-2 bg-white">
      {/* Left: Copy */}
      <div className="flex flex-col justify-center px-8 md:px-16 py-20">
        <span className="text-xs font-bold tracking-widest text-indigo-500 uppercase mb-4">
          Static Sites · Next.js · Render.com
        </span>
        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-snug mb-6">
          Websites built to load fast and rank high.
        </h1>
        <p className="text-gray-500 text-lg mb-8">
          We build Next.js static sites for contractors who want more inbound leads
          without paying a developer every time something breaks.
        </p>
        <a
          href="/contact"
          className="self-start bg-indigo-600 hover:bg-indigo-700 text-white
            font-semibold px-7 py-3.5 rounded-lg transition-colors"
        >
          Get a Free Audit
        </a>
      </div>

      {/* Right: Visual */}
      <div className="bg-gray-100 flex items-center justify-center p-8">
        {/* Replace with actual image */}
        <div className="w-full max-w-md aspect-video rounded-xl bg-gray-300
          flex items-center justify-center text-gray-500 text-sm">
          [Site Screenshot / Photo of Work]
        </div>
      </div>
    </section>
  );
}

Pattern 5: Minimal Dark with Single CTA

When to use it: Developer tools, technical products, portfolios. When you want to project confidence and let the work speak.

What it does: Maximum whitespace, one thing to click, no distractions. Works best when your brand has equity or when the target visitor already knows what they want.

export function MinimalDarkHero() {
  return (
    <section className="min-h-screen bg-black text-white flex flex-col
      items-center justify-center text-center px-6">
      <p className="text-gray-500 text-sm tracking-widest uppercase mb-6">
        Static Signal
      </p>
      <h1 className="text-6xl md:text-8xl font-black tracking-tight mb-6">
        Build less.<br />
        <span className="text-gray-500">Ship more.</span>
      </h1>
      <p className="text-gray-400 text-lg max-w-md mb-10">
        Writing about static sites, Next.js, and modern web development that
        actually matters.
      </p>
      <a
        href="/blog"
        className="border border-white text-white hover:bg-white hover:text-black
          font-semibold px-8 py-4 rounded-lg transition-colors"
      >
        Read the Blog
      </a>
    </section>
  );
}

Choosing the Right Pattern

The patterns aren’t interchangeable. Each one is built for a specific visitor mindset at the moment they land. Pick based on who’s arriving and what they need to feel in the first three seconds — not what looks best in a side-by-side comparison.

The most common mistake is picking a pattern because it looks coolest in isolation. A minimal dark hero on a business with no brand recognition is just noise with good typography.