Hero Sections

10 variants

A growing set of premium hero section variants with polished copy layout, CTA placement, and product demo framing for modern React landing pages.

Voice mobile

hero-voice-mobile.tsx

An editorial split hero for an AI voice-note app with a restrained navigation, clear mobile download CTA, animated dither stage, and a translucent phone interface that turns speech into ready actions.

AI voice notes for busy days

Say it once.Keep moving.

Sona turns loose thoughts into clear notes, follow-ups, and reminders before the moment disappears.

No typing requiredPrivate by default

Thursday, August 14

Good morning, Maya

Launch thoughts

1:24 · transcribed

Move the launch review to Friday. Send the updated brief to Nina and remind me to check the final copy this afternoon.

Ready from your note

2 actions found

Send project recapToday
Review the launch brief4:30 PM

Say what’s next…

Install

$ bunx --bun shadcn add @beui-pro/hero-voice-mobile

Workflow aurora

hero-decision-spectrum.tsx

A theme-aware SaaS hero with restrained navigation, two-line positioning, dual conversion paths, fictional customer marks, and a layered aurora field rising from the page floor.

Projects move faster.Teams stay in sync.

Daymark brings projects, docs, and automated handoffs into one shared workspace, so every team knows what is moving and what needs attention.

Trusted by teams that ship every week

NORTH/COFieldworkKinlineFORMArcside

Install

$ bunx --bun shadcn add @beui-pro/hero-decision-spectrum

DeFi routing

hero-defi-routing.tsx

A centered DeFi savings hero with a compact announcement, early-access form, responsive navigation, animated balance chart, transaction history, and a polished non-custodial mobile wallet visual.

Introducing Basin Earn

Earn more onyour stablecoins.

A non-custodial savings vault that routes your cash across audited onchain markets. Withdraw anytime.

Available in the US. More regions coming soon.

Total balance

$12,593.00

+$421.25 this month · 3.4%

Balance increasing over the selected period

Transaction history

Deposit

Today, 9:42 AM

+$350.00

Withdrawal

Yesterday

−$100.00

Yield earned

August 12

+$42.18

Install

$ bunx --bun shadcn add @beui-pro/hero-defi-routing

AI marketplace

hero-ai-marketplace.tsx

A theme-aware AI marketplace hero with a compact responsive navbar, rising spectrum floor, staged headline reveal, rotating prompt composer, specialist shortcuts, and a functional matching state.

A marketplace of AI specialists

Bring the right AIto every piece of work.

Describe the outcome once. The workspace finds the right specialist, gathers the context, and moves the work forward.

Auto-match a specialist

Find the strongest angle in our customer feedback

Install

$ bunx --bun shadcn add @beui-pro/hero-ai-marketplace

Signal aurora

hero-signal-aurora.tsx

An editorial product-intelligence hero with a globally theme-aware animated WebGL mesh aurora, compact navigation, restrained serif headline, focused CTA, and a marquee of real product-company marks.

Luma
Product intelligence, without the guesswork

Turn customer signals into your next clear move

Bring product usage, revenue, support, and feedback into one calm view — then see what deserves your attention next.

LinearNotionHubSpotIntercomStripeFigma

Install

$ bunx --bun shadcn add @beui-pro/hero-signal-aurora

Workflow split

hero-workflow-split.tsx

A copy column with an inline email capture and a trusted-by logo marquee beside a bleeding AI agent-ops dashboard mock with live stat tickers.

Agentic ops platform

Put your back office on autopilot

Helio lets you design, deploy, and supervise AI agents that handle support, billing, and renewals — connected to your stack and resolving work in minutes.

Trusted by teams automating support and revenue ops

NorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelay
Helio
Dashboard

Welcome back, Priya

Your agents resolved 1,840 tasks while you were away.

Tasks resolved

18,402

+18% from last week

Resolution rate

96.4%

+1.2% from last week

Active agents
AgentResolved
Refund resolver9,412
Churn watcher7,980
Invoice matcher6,524
Onboarding guide5,118
Renewal nudger4,307

Recent playbooks

Active

Refund resolver

Updated 1h ago · Inbound

Active

Churn watcher

Updated 3h ago · Schedule

Install

$ bunx --bun shadcn add @beui-pro/hero-workflow-split

Agent centered

hero-agent-centered.tsx

A centered hero with a two-tone headline and paired CTAs over an animated grainient demo stage: an agent incident timeline beside a live AI chat, both in frosted glass frames.

Loved by platform teams

Resolve incidents before
anyone files a ticket

An always-on agent that watches your services, finds the root cause, and ships the fix — looping in humans only when it actually matters.

Latency spike detected

checkout-api · 30s ago

Workflow progress

Anomaly detected

p99 latency crossed 800ms on checkout-api

Agent investigating

Tracing slow spans and recent deploys

Root cause isolated

Database connection pool saturated

Fix applied

Pool size raised, +2 replicas rolled out

Team notified

Summary posted to #incidents

Incident resolved09:42

AI Agent

Site reliability agent · online

checkout-api is throwing latency alerts — take a look?

p99 latency hit 920ms — pulling traces from the last deploy now.

Root cause: the connection pool is saturated under peak load.

Raised the pool size and added 2 replicas — latency is back to 180ms.

Ask anything or type a command…

Install

$ bunx --bun shadcn add @beui-pro/hero-agent-centered

Code demo

hero-code-demo.tsx

A dark inference-API hero: a promo pill, a bold headline beside copy and amber/dark CTAs, over a scenic backdrop with a floating glass terminal that streams a curl request and JSON response.

NewFree fine-tuning in beta

Inference that adapts to your traffic autonomously

One request away from production-grade inference. Atlas watches where your model struggles, then quietly retrains on your own data — no MLOps team required.

# Drop-in replacement for the OpenAI API. Bring any model.
$ curl https://api.atlas.dev/v1/chat/completions \
-H "Authorization: Bearer $ATLAS_KEY" \
-H "Content-Type: application/json" \
-d '{
"model": "llama-3.1-70b",
"messages": [{"role":"user","content":"hi"}],
"adaptive": true
}'
✓ 200 OK118mstokens=18
{
"id": "infr_8f2a…",
"choices": [{ "message": { "content": "Hi there 👋" }}],
"adaptive_score": 0.94
}

Install

$ bunx --bun shadcn add @beui-pro/hero-code-demo

Centered demo

hero-sections.tsx

A centered hero with paired CTAs over a grainient demo stage: an AI knowledge-base answer that streams a cited, step-by-step response in a frosted glass card.

AI knowledge base

Every answer your team needs, instantly cited

Connect your docs, wikis, and tickets — Atlas answers in plain language and links the exact source every time.

How do I rotate our API keys?

Rotate keys without downtime in three steps — your old key keeps working until you revoke it.

Generate a fresh key under Settings → API
Sync it into your environment secrets
Revoke the previous key after deploy
Sourcesapi-keys.mdRunbookplatform

Install

$ bunx --bun shadcn add @beui-pro/hero-centered-demo

Centered marquee

hero-split-demo.tsx

A centered hero — eyebrow, headline, and paired CTAs — over a hover-pausing logo marquee of icon wordmarks.

Trusted by 8,000+ teams

Search that understands what you mean

Ask in plain language and Atlas ranks the most relevant docs, tickets, and threads — no keywords or filters required.

Searched across the stacks teams trust

NorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelayNorthwindCadenzaVertexMosaicBeaconRelay

Install

$ bunx --bun shadcn add @beui-pro/hero-split-demo