Loomly — Sunset Spotlight Testimonial

Summary

A warm, full-viewport 'spotlight' testimonial section for a prompt-to-UI design product (placeholder brand 'Promptframe'), built around a SINGLE big editorial pull-quote centered on a soft sunset gradient. The ground is a layered radial+linear sunset wash (peach #fff6ee -> #fff1e6 -> #ffe9dc, lit by warm coral #ff6b4a and amber #ffb020 glows) with deep-cocoa ink text (#241712) and a muted cocoa for secondary copy (#7a6258). Top-down: a sticky translucent peach nav (a coral->amber gradient sparkle logo tile + 'Promptframe' wordmark, center text links, a 'Sign in' link and a coral->amber gradient 'Start free' pill); then a min-h-screen centered figure: a small uppercase wide-tracked 'Loved by builders' pill (white chip with a coral heart), a giant serif decorative opening quote glyph painted in the sunset gradient, one large extrabold Plus-Jakarta blockquote (~40-46px) with a key clause set in a darkened-sunset gradient text accent, and a centered figcaption (a coral->amber gradient ring around a circular avatar photo, then the name + a gradient dot + a role with a small mountains icon). Two big blurred coral/amber glow orbs sit behind the section corners. Plus Jakarta Sans throughout, Iconify Phosphor icons.

Style

A warm, optimistic 'golden hour' spotlight style: the whole stage is a soft SUNSET gradient (a base linear #fff6ee -> #fff1e6 -> #ffe9dc, overlaid with a bright center-clearing radial of near-white peach plus warm coral #ff6b4a and amber #ffb020 radial glows top-left/top-right and a coral wash rising from the bottom), so the section glows like dusk light. Text is deep warm cocoa ink #241712 (not pure black) with a muted cocoa #7a6258 for secondary copy, keeping everything warm. The two-color accent is a coral->amber gradient (linear 120deg #ff6b4a -> #ffb020), used as the .pill-grad for the logo tile + CTA + dots, the .glyph-grad on the decorative quote mark, the .avatar-ring around the portrait, and the corner glow orbs. Crucially, the accent ON real sentence content is a DARKENED sunset gradient (.text-grad, 115deg #a8380c -> #b8430a -> #8a4a00) chosen so both ends stay >=4.5:1 on the peach backdrop, so the highlighted clause stays fully legible. Type is Plus Jakarta Sans (400-800, plus an italic 500): a single huge extrabold tracking-[-0.02em] blockquote is the hero, with small bold UPPERCASE wide-tracked (0.18em) eyebrow/role micro-text; the decorative quote glyph uses a Georgia/serif face for an editorial flourish. Everything is centered and airy with generous whitespace; soft blurred orbs and the gradient ring give a gentle glow but there are no hard borders or hard shadows. Mood: warm, premium, human, single-voice spotlight rather than a dense grid; the page is one confident quote bathed in sunset light.

Layout & Structure

A single full-viewport spotlight section, top-down: (1) a STICKY translucent peach nav (h-16, bg-[#fff6ee]/80 backdrop-blur-md, border-b border-coral/10) inside a mx-auto max-w-6xl px-6/lg:px-8 row = a coral->amber gradient sparkle logo tile (ph:sparkle-fill) + a text-[17px] font-extrabold 'Promptframe' on the left, a center ul of text links (Library / Templates / Praise(active) / Pricing, hidden below md), and on the right a 'Sign in' text link + a coral->amber gradient rounded-full 'Start free' pill; (2) the SPOTLIGHT section#praise = a .sunset relative overflow-hidden flex items-center min-h-[calc(100vh-4rem)] holding two big blurred glow orbs (an amber w-80 h-80 top-left, a coral w-96 h-96 bottom-right, both blur-3xl pointer-events-none) and a centered figure in a relative mx-auto max-w-6xl px-6/lg:px-8 py-20/sm:py-24, mx-auto max-w-3xl text-center flex flex-col items-center: a 'Loved by builders' eyebrow PILL, a giant decorative quote GLYPH, the BLOCKQUOTE, and a FIGCAPTION (avatar + byline). The whole thing is one centered column with no second section. Responsive: the blockquote scales 28 -> 40 -> 46px and the glyph 76 -> 92px; the nav links hide below md (logo + Start-free pill remain); the byline name/role stack vertically below sm (a row with a gradient dot above sm); generous py shrinks on small screens.

Sticky translucent sunset nav

Sunset stage + glow orbs

Eyebrow pill + decorative quote glyph + blockquote

Avatar + byline figcaption

Special Notes

Single font via Google Fonts: Plus Jakarta Sans (weights 400/500/600/700/800 + italic 500), set as fontFamily.sans ['"Plus Jakarta Sans"', system-ui, sans-serif]. Styled with Tailwind via CDN using a custom theme with colors coral #ff6b4a, amber #ffb020, ink #241712, inkdim #7a6258; body class font-sans bg-[#fff6ee] text-ink antialiased. Custom CSS: html scroll-behavior smooth; -webkit-font-smoothing antialiased; .quote-mark uses Georgia/'Times New Roman' serif line-height 0.7; the layered .sunset background (see layout); .pill-grad background-image linear-gradient(120deg, #ff6b4a, #ffb020); .glyph-grad same gradient with -webkit-background-clip:text + color transparent (decorative glyph keeps the bright gradient); .text-grad on REAL sentence content uses the DARKENED sunset linear-gradient(115deg, #a8380c, #b8430a 42%, #8a4a00) clipped to text so both ends are >=4.5:1 on the warm/peach backdrop and every word stays legible; .avatar-ring background-image linear-gradient(135deg, #ff6b4a, #ffb020). Icons are the Iconify runtime (code.iconify.design) rendering Phosphor (ph:) icons: sparkle-fill, heart-fill, mountains-fill. The avatar is a real Unsplash faces portrait (object-cover). There is no JS beyond the Iconify/Tailwind CDNs; nav links and pills are static anchors. The signature moves are the layered golden-hour sunset gradient stage, the single big editorial blockquote spotlight, the coral->amber gradient system (pill/ring/glyph) balanced against a legibility-safe DARKENED gradient on actual sentence content, the gradient-ringed circular portrait, and the two ambient glow orbs. Keep accent strictly as gradients (never flat coral text on peach), keep the highlighted clause on the darkened .text-grad for contrast, keep it warm/airy/centered with no hard borders or shadows.