Hero Sections

Aurora Launch Hero

Use this hero for product launches, new SaaS homepages, or bold campaign entries that need depth without relying on stock art.

herolanding pagesaasctagradient

Pré-visualização

Shipping fast UI systems for modern apps

Build a sharper product surface before your first user lands.

Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.

Start free See demo

Teams

1.2k

Launches

184

Avg. uplift

31%

HTML + Tailwind

Código pronto para copiar

<section class="relative overflow-hidden rounded-[32px] bg-slate-950 px-6 py-7 text-white shadow-2xl shadow-slate-950/20">
  <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-r from-cyan-400/20 via-sky-400/10 to-violet-400/20 blur-3xl"></div>
  <div class="absolute -right-10 top-8 h-36 w-36 rounded-full bg-cyan-400/20 blur-3xl"></div>
  <div class="absolute bottom-0 left-0 h-32 w-32 rounded-full bg-violet-500/20 blur-3xl"></div>
  <div class="relative space-y-6">
    <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-200">
      <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
      Shipping fast UI systems for modern apps
    </div>
    <div class="space-y-3">
      <h1 class="max-w-2xl text-4xl font-semibold tracking-tight text-white">Build a sharper product surface before your first user lands.</h1>
      <p class="max-w-xl text-sm leading-6 text-slate-300">Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.</p>
    </div>
    <div class="flex flex-wrap gap-3">
      <a class="inline-flex items-center justify-center rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-slate-950" href="#">Start free</a>
      <a class="inline-flex items-center justify-center rounded-full border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-semibold text-white" href="#">See demo</a>
    </div>
    <div class="grid gap-3 sm:grid-cols-3">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Teams</p>
        <p class="mt-2 text-2xl font-semibold">1.2k</p>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Launches</p>
        <p class="mt-2 text-2xl font-semibold">184</p>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Avg. uplift</p>
        <p class="mt-2 text-2xl font-semibold">31%</p>
      </div>
    </div>
  </div>
</section>

Blocos relacionados

Edition 03

Turn quiet product pages into bold, readable launches.

A softer landing section for studios, creators, and calm SaaS brands that want contrast without neon overload.

Browse examples Design notes

Reading time

4 minutes

Conversion system Live

Hero Sections

Split Editorial Hero

A clean split hero that mixes product copy with magazine-style cards and soft color fields.

heroeditorialportfoliolanding page

Abrir bloco

MRR

$42k

Churn

1.8%

Activation

68%

Weekly activity

+12%

Dashboard

Command Center Shell

A dense dashboard shell with a compact rail, summary cards, and activity surfaces.

dashboardadminanalyticssaas

Abrir bloco

Starter

$19

For early products and single operators.

Unlimited blocks
Email support
Basic exports

Popular

Growth

$49

For teams shipping every week.

Shared libraries
Advanced exports
Priority support

Scale

$129

For larger teams and multi-brand systems.

Unlimited seats
Approval flows
Dedicated onboarding

Pricing

Prism Pricing Grid

A three-tier pricing layout with a highlighted middle plan and compact benefit density.

pricingplanssaascards

Abrir bloco