## When to use

Hero/CTA: top-of-page block on any marketing or landing page where the goal is "do this one thing". Referral: when growth benefits from existing users inviting others (paid plans, workspaces, social products). Achievements: when ongoing engagement needs a non-monetary reward — streaks, completion badges, level-ups.

## Hero — title + subtitle + CTA

The minimal hero. Centered display headline, subtitle, primary CTA + secondary "Learn more" ghost. No supporting image — works when the headline carries the weight.

v0.0.27 — out today Generative UI, deterministically. AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.

## Hero — split with visual

Two-column hero. Headline + subtitle + CTA on the left, supporting visual on the right. The visual is a placeholder card here; in production it's a screenshot, animation, or video poster.

For teams Ship UI as fast as your model thinks. A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.
[ Product visual ]

## Referral — share link

Read-only input prefilled with the user's referral URL + Copy button. Below it: per-channel share buttons (email, X, LinkedIn). Reward copy describes what referrer + referee get ("$10 credit each").

Invite a friend, both get $10 When they sign up and verify, $10 in credit lands in both your accounts.

## Referral — status

The user's referral history. Stats grid (referrals sent / converted / credits earned), then a list of per-referral rows with avatar + status tag. Pending = invite sent, no signup; Joined = signed up, no verify; Verified = credit earned.

Your referrals $30 credit earned · 3 friends joined
avery@example.com · 5 days ago Verified · $10 jordan@example.com · 2 weeks ago Verified · $10 sam@example.com · 3 weeks ago Joined Sent 1 month ago Pending

## Achievements — earned badges

Grid of earned + locked badges. Each card shows the icon, name, description, and earn-date. Earned badges carry the date as a `success` tag; locked badges show progress as a `muted` tag and live in a `ghost` card so they read as quieter without raw opacity.

Achievements 5 of 12 unlocked
🚀 First launch Shipped your first prompt Apr 12
🔥 7-day streak A week of daily use Apr 19
🎨 Theme artist Created 3 custom themes Apr 22
🏗️ Builder Ship 10 prompts 7 of 10
🌟 30-day streak A month of daily use 12 of 30
🤝 Connector Refer 5 friends 3 of 5

## Achievements — unlock moment

The just-earned achievement card — usually appears as a toast or modal moment. Big icon, "You earned…" header, description, and a CTA to share or keep going. This is the dopamine hit; don't make it dismissive.

🔥 Achievement unlocked 7-day streak A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.

## Composition rules

- Hero CTA is one primary action, not three — "Get started" + "See demos" (ghost) is the maximum. Three primaries means none — the user reads ambivalence.
- Hero kicker tag is for new/version/audience badges — "v0.0.27 out today" or "For teams" reads as a slim eyebrow above the headline. Skip the tag if there's no signal.
- Referral copy leads with the symmetrical reward — "Both get $10" beats "Get $10 when they sign up". Symmetry signals trust; one-sided rewards trigger spam reflex.
- Referral statuses are 3-state — Pending (link sent, no signup) · Joined (signed up, not verified) · Verified (credit earned). Anything else is collapsing distinct states into noise.
- Achievement badges show locked + earned together — locked badges with progress hints ("7 of 10") drive engagement; hiding them removes the goalpost. Use `variant="ghost"` on locked cards + `color="subtle"` on the icon — communicates state without raw opacity hacks.
- Don't auto-advance the unlock modal — the moment is the reward; let the user dismiss when ready. Auto-dismiss erases the dopamine hit.
- Streaks reset honestly — "You broke your 7-day streak" is honest; "You earned a 6-day streak" is patronizing. The product respects the user when it doesn't hide the loss.
- Achievements are private by default, shareable by choice — auto-posting "Kim earned 7-day streak" to a feed feels like surveillance. The Share button is the consent.

## See also

- card-ui · button-ui · tag-ui — primitives.
- stat-ui — referral metrics.
- field-ui · input-ui — referral link field.
- system-banners — adjacent (announcement banners are sibling marketing-promo surfaces).
- profile-public-and-verification — adjacent (achievements often surface on the public profile).