Hero Section

Prominent opening section carrying the page's main message.

html

<section class="hero hero--left" style="background:#241430;">
  <h1 class="hero__headline">Run your whole business from one screen</h1>
  <p class="hero__sub">Billing, support and analytics, finally in the same place.</p>
  <button type="button" class="hero__cta" style="color:#241430;">Get started free</button>
</section>
<style>
.hero { font: 16px/1.5 system-ui, sans-serif; color: #FAF7F2; padding: 72px 32px; border-radius: 16px; }
.hero--left { text-align: left; }
.hero--center { text-align: center; }
.hero__headline { margin: 0 0 16px; font-size: 40px; font-weight: 800; max-width: 18ch; }
.hero--center .hero__headline { margin-left: auto; margin-right: auto; }
.hero__sub { margin: 0 0 28px; font-size: 17px; opacity: .85; max-width: 46ch; }
.hero--center .hero__sub { margin-left: auto; margin-right: auto; }
.hero__cta { background: #FAF7F2; border: none; padding: 14px 30px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.hero__cta:hover, .hero__cta:focus-visible { opacity: .9; }
</style>

tailwind

<section class="hero-tw hero-tw--left font-sans text-[#FAF7F2] px-8 py-18 rounded-2xl" style="background:#241430;">
  <h1 class="m-0 mb-4 text-4xl font-extrabold max-w-[18ch]">Run your whole business from one screen</h1>
  <p class="m-0 mb-7 text-[17px] opacity-85 max-w-[46ch]">Billing, support and analytics, finally in the same place.</p>
  <button type="button" class="bg-[#FAF7F2] border-0 px-7.5 py-3.5 rounded-xl font-bold text-[15px] cursor-pointer hover:opacity-90" style="color:#241430;">Get started free</button>
</section>
<style>
.hero-tw--left { text-align: left; }
.hero-tw--center { text-align: center; }
.hero-tw--center h1, .hero-tw--center p { margin-left: auto; margin-right: auto; }
</style>

react

export function HeroSection({
  headline = "Run your whole business from one screen",
  subheadline = "Billing, support and analytics, finally in the same place.",
  ctaText = "Get started free",
  align = "left",
  bg = "#241430",
}) {
  const centered = align === "center";
  return (
    <section style={{ font: "16px/1.5 system-ui, sans-serif", color: "#FAF7F2", padding: "72px 32px",
      borderRadius: 16, textAlign: align, background: bg }}>
      <h1 style={{ margin: centered ? "0 auto 16px" : "0 0 16px", fontSize: 40, fontWeight: 800, maxWidth: "18ch" }}>{headline}</h1>
      <p style={{ margin: centered ? "0 auto 28px" : "0 0 28px", fontSize: 17, opacity: 0.85, maxWidth: "46ch" }}>{subheadline}</p>
      <button type="button" style={{ background: "#FAF7F2", border: "none", padding: "14px 30px", borderRadius: 10,
        fontWeight: 700, fontSize: 15, cursor: "pointer", color: bg }}>{ctaText}</button>
    </section>
  );
}