Landing Page

Standalone page designed around a single goal or campaign.

html

<div class="lpage">
  <section class="lpage__hero lpage__hero--single-column" style="background:#241430;">
    <div>
      <h1 class="lpage__headline">Launch your campaign in a day</h1>
      <button type="button" class="lpage__cta" style="color:#241430;">Get early access</button>
    </div>
    <div class="lpage__visual" aria-hidden="true"></div>
  </section>
  <section class="lpage__strip">
    <div></div><div></div><div></div>
  </section>
  <footer class="lpage__footer">&copy; 2026 Campaign Co.</footer>
</div>
<style>
.lpage { font: 16px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; border-radius: 14px; overflow: hidden; max-width: 480px; background: #FAF7F2; }
.lpage__hero { color: #FAF7F2; padding: 32px 24px; display: flex; align-items: center; gap: 20px; }
.lpage__hero--single-column { flex-direction: column; text-align: center; }
.lpage__hero--split-hero { flex-direction: row; text-align: left; }
.lpage__headline { margin: 0 0 14px; font-size: 22px; font-weight: 800; }
.lpage__cta { background: #FAF7F2; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.lpage__cta:hover, .lpage__cta:focus-visible { opacity: .9; }
.lpage__visual { flex: 1 1 120px; min-height: 80px; border-radius: 10px; background: #FAF7F233; }
.lpage__hero--single-column .lpage__visual { width: 100%; }
.lpage__strip { display: flex; gap: 10px; padding: 16px 24px; }
.lpage__strip div { flex: 1; height: 34px; border-radius: 8px; background: #24143012; }
.lpage__footer { padding: 12px 24px; font-size: 12px; color: #241430aa; border-top: 1px solid #24143018; }
</style>

tailwind

<div class="font-sans text-[#241430] border border-[#24143022] rounded-2xl overflow-hidden max-w-[480px] bg-[#FAF7F2]">
  <section class="lpage-tw lpage-tw--single-column text-[#FAF7F2] px-6 py-8 flex items-center gap-5" style="background:#241430;">
    <div>
      <h1 class="m-0 mb-3.5 text-[22px] font-extrabold">Launch your campaign in a day</h1>
      <button type="button" class="bg-[#FAF7F2] border-0 px-5 py-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90" style="color:#241430;">Get early access</button>
    </div>
    <div class="flex-1 min-w-[120px] min-h-[80px] rounded-[10px] bg-[#FAF7F233]" aria-hidden="true"></div>
  </section>
  <section class="flex gap-2.5 px-6 py-4">
    <div class="flex-1 h-[34px] rounded-lg bg-[#24143012]"></div>
    <div class="flex-1 h-[34px] rounded-lg bg-[#24143012]"></div>
    <div class="flex-1 h-[34px] rounded-lg bg-[#24143012]"></div>
  </section>
  <footer class="px-6 py-3 text-xs text-[#241430]/65 border-t border-[#24143018]">&copy; 2026 Campaign Co.</footer>
</div>
<style>
.lpage-tw--single-column { flex-direction: column; text-align: center; }
.lpage-tw--split-hero { flex-direction: row; text-align: left; }
</style>

react

export function LandingPage({
  headline = "Launch your campaign in a day",
  ctaText = "Get early access",
  layout = "single-column",
  accent = "#241430",
  showFooter = true,
}) {
  const split = layout === "split-hero";
  return (
    <div style={{ font: "16px system-ui, sans-serif", color: "#241430", border: "1px solid #24143022",
      borderRadius: 14, overflow: "hidden", maxWidth: 480, background: "#FAF7F2" }}>
      <section style={{ color: "#FAF7F2", padding: "32px 24px", display: "flex", alignItems: "center", gap: 20,
        flexDirection: split ? "row" : "column", textAlign: split ? "left" : "center", background: accent }}>
        <div>
          <h1 style={{ margin: "0 0 14px", fontSize: 22, fontWeight: 800 }}>{headline}</h1>
          <button type="button" style={{ background: "#FAF7F2", border: "none", padding: "10px 20px", borderRadius: 8,
            fontWeight: 700, cursor: "pointer", color: accent }}>{ctaText}</button>
        </div>
        <div aria-hidden="true" style={{ flex: "1 1 120px", minHeight: 80, borderRadius: 10, background: "#FAF7F233",
          width: split ? "auto" : "100%" }} />
      </section>
      <section style={{ display: "flex", gap: 10, padding: "16px 24px" }}>
        {[0, 1, 2].map((i) => <div key={i} style={{ flex: 1, height: 34, borderRadius: 8, background: "#24143012" }} />)}
      </section>
      {showFooter && <footer style={{ padding: "12px 24px", fontSize: 12, color: "#241430aa", borderTop: "1px solid #24143018" }}>&copy; 2026 Campaign Co.</footer>}
    </div>
  );
}