TheMagin UITheMagin UIPRO
ComponentsPremium

Hero

Top-of-page hero section examples

Hero

Hero sections introduce the product or page with a headline, short summary, visual, and a primary CTA.

Example

function HomeHero() {
  return (
    <section className="hero">
      <div className="container">
        <h1 className="text-4xl font-bold">Build beautiful apps</h1>
        <p className="mt-2 text-lg">
          A short summary of what your product does.
        </p>
        <div className="mt-6">
          <button className="btn btn-primary">Get started</button>
          <a href="/docs" className="ml-4">
            Read docs
          </a>
        </div>
      </div>
    </section>
  );
}

Notes

  • Keep hero text concise and prioritize one main CTA.

On this page