The profile card, perfected — Cardly component showcase

Summary

A clean, modern component-showcase landing page built around a single hero component: a shippable user profile card. The hero pairs a bold 'The profile card, perfected.' headline (the word 'perfected.' in an emerald gradient) and a copy-the-prompt CTA beside the star card itself, a ~380px wide rounded white card on a soft dotted slate 'canvas' holding a ring-shadowed circular avatar with a verified badge, a name + role, a 3-column stat row (Projects / Followers / Following) divided by hairlines, a short bio, three skill tags, and a primary Follow + secondary Message button pair. Below the hero: a 4-up 'built from deliberate parts' anatomy grid (Identity / Stats / Tags / Actions), a full-bleed dark 'ship this in one prompt' section with a terminal-style code panel, and a footer. Sticky translucent blurred top nav; the hero reflows from a 2-col grid to a single centered column below lg.

Style

Clean, professional product-component aesthetic in the Inter typeface on a near-white page with a soft dotted slate 'canvas' behind the hero and a single emerald accent against a full slate ('ink') neutral scale. Extrabold tracking-tight headlines, an emerald text-gradient on one headline word, generously rounded surfaces (rounded-full pills, rounded-2xl cards, a rounded-[28px] hero card), and layered soft slate-tinted shadows. The signature surface is the profile card: a white rounded-[28px] card with a top emerald accent bar, a 112px circular avatar wrapped in a white+mint+emerald glow ring with a verified check badge, a bordered slate-tinted 3-up stat block, pill skill tags, and an emerald Follow / outlined Message button pair. A subtle emerald ambient glow sits behind the card, and the canvas carries a faint radial-dot grid.

Layout & Structure

A full-width sticky 64px translucent nav over a stacked single-page layout, all centered in a max-w-7xl container: a HERO 'showcase' section (canvas-grid background + an ambient emerald glow, a 2-col grid on lg of a copy column + the profile card), a white 'components' anatomy section (a centered header + a 4-up card grid), a full-bleed dark 'prompts' section (a 2-col grid of copy + a terminal-style code panel), and a footer. The hero grid is lg:grid-cols-2 and collapses to a single centered column below lg; the anatomy grid is sm:grid-cols-2 lg:grid-cols-4; the prompts grid is lg:grid-cols-2.

Sticky top nav

Hero / Showcase (copy + profile card)

The profile card (hero component)

Anatomy / Components grid

Dark prompt CTA + code panel

Footer

Special Notes

Single-accent system: emerald is the only chromatic color (50 #ecfdf5 / 100 #d1fae5 / 200 #a7f3d0 / 300 #6ee7b7 / 400 #34d399 / 500 #10b981 / 600 #059669 / 700 #047857); everything else is the slate 'ink' neutral scale (950 #0b1220 / 900 #0f172a / 800 #1e293b / 700 #334155 / 600 #475569 / 500 #64748b / 400 #94a3b8 / 300 #cbd5e1 / 200 #e2e8f0 / 100 #f1f5f9 / 50 #f8fafc) plus white, so emerald always reads as the action/accent. ONE typeface: Inter (weights 400-900) via Google Fonts; headlines use font-extrabold with tracking-tight (hero leading-[1.05]). All hex values are exact and should be preserved, including the three custom box-shadow recipes (card-shadow, avatar-ring, btn-follow-shadow), the canvas-grid dot pattern (rgba(15,23,42,0.05) 1px dots on a 22px grid), the emerald headline text-gradient (#047857 -> #10b981) and the code-panel syntax tints (emerald-400 verb, emerald-300 nouns). Icons are Iconify lucide (lucide:*) glyphs. No em-dashes in any copy. The whole page is centered in a max-w-7xl container and reflows from the 2-col hero to a single centered column below lg (nav center links hide below md, the Sign in link below sm).