Why Your React Hero Section Isn't Converting (and How to Fix It)

If your React hero section isn't converting, the cause is almost always one of three things: the headline sells the product instead of the outcome, the CTA is below the fold, or you can't prove the CTA is even being seen. Fix the first two with copy and layout; fix the third by instrumenting the button.

1. The headline states the outcome, not the product

"An AI growth agent for React apps" describes you. "Ship a conversion fix every week — as a Pull Request" describes what the visitor gets. Lead with the outcome; put the category description in the subhead. This single change often moves hero conversion more than any visual tweak.

2. The CTA is above the fold — with one primary action

Competing buttons split attention. Use one primary CTA and, at most, one low-weight secondary link:

function Hero() {
  return (
    <section className="hero">
      <h1>Ship a conversion fix every week</h1>
      <p>Velyr finds your #1 conversion problem and opens the fix as a Pull Request.</p>
      <div className="hero-actions">
        <a className="btn-primary" href="/signup">Start free trial</a>
        <a className="btn-link" href="#how">See how it works</a>
      </div>
    </section>
  )
}

Keep the hero short enough that .hero-actions is visible on a ~640px mobile viewport without scrolling.

3. Prove the CTA is seen (the unique part)

Most teams measure CTA clicks but never measure whether the button was even visible. A large gap between "rendered" and "seen" is the signal that your CTA is too low. An IntersectionObserver answers this precisely:

import { useEffect, useRef } from 'react'

function PrimaryCta({ onSeen }) {
  const ref = useRef(null)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          onSeen()            // e.g. posthog.capture('cta_seen', { id: 'hero' })
          obs.disconnect()    // fire once per page view
        }
      },
      { threshold: 0.5 }      // at least half the button visible
    )
    obs.observe(el)
    return () => obs.disconnect()
  }, [onSeen])

  return (
    <a ref={ref} className="btn-primary" href="/signup">Start free trial</a>
  )
}

Now you can compute a "seen → clicked" rate. If 90% of visitors see the CTA and 4% click, the button is working and the lever is upstream (the offer or headline). If only 35% ever see it, the button is below the fold — move it up. Pair cta_seen with a cta_clicked event to track both ends of that funnel.

What not to bother with

Button color, gradient backgrounds, and hero animations rarely move the number in a measurable way. Spend the effort on a clear outcome headline, a visible single CTA, and the instrumentation that tells you which half of the funnel to fix next.