Promptcraft · Answers, sorted (gradient-CTA FAQ)
A warm, friendly FAQ / help-center page on a cream base built around one sunset gradient (coral->amber): a sticky blurred nav, a centered hero with a gradient-clipped 'We've got answers.' headline + a 'FAQ & HELP CENTER' pill over a warm radial wash with blurred blobs, a stack of soft white rounded accordion cards (one pre-opened, lifting on a coral glow with its icon tile swapping to the gradient via a grid-template-rows CSS reveal), a bold full-bleed sunset-gradient CTA card with a frosted-dark reassurance pill, and a minimal cream footer.
Summary
A warm, friendly FAQ / help-center landing section built around a soft sunset-gradient palette. A sticky blurred cream nav (a gradient sparkle-square logo + 'Promptcraft' wordmark, Library / Showcase / Pricing / FAQ links, a gradient 'Start free' pill) sits over a centered hero: a white 'FAQ & HELP CENTER' pill, a huge two-line headline 'Got questions?' / 'We've got answers.' (the second line filled with a coral->amber gradient text clip), and a lead with a 'Talk to a human.' underline link, all over a warm radial-gradient header band with soft blurred coral/amber blobs. Below, a vertically stacked accordion of white rounded cards, each with a rounded square icon tile + question + a rotating caret, where the open card lifts on a soft coral shadow and its icon tile fills with the gradient. The section closes with a bold full-width sunset-gradient CTA card ('Still have questions?', a frosted-dark sub-pill, a white 'Contact support' button + an outline 'Browse docs' button) and a minimal cream footer with the gradient logo + social icons.
Style
A warm, optimistic, friendly-SaaS aesthetic on a cream #fdf8f3 base with near-black warm ink #1c140e text and muted brown #6c5d52 secondary text. The signature is a coral->amber sunset gradient (coral #ff6b4a -> amber #ffb020, with a deeper coral #cf3a13 and a hot #f7572e for the loud CTA) used as the single accent system: a gradient-clipped headline phrase, gradient pill / logo tiles, gradient open-card icon fills, and one big full-bleed gradient CTA card. Surfaces are soft and rounded: white #ffffff cards with very light ink/8 borders and faint warm shadows (no hard lines), generous rounding (rounded-2xl cards, rounded-full pills, a rounded-[28px] CTA), and warm radial / layered gradient wash backgrounds plus large blurred color blobs for depth. Type is set entirely in Plus Jakarta Sans (weights 400-800), tracking tight on display (-0.02em), with extrabold huge headlines and relaxed-leading muted body. Motion is gentle and delightful: a 0.32s cubic-bezier grid-template-rows accordion, a 0.3s caret rotate, an open-card coral glow + gradient icon swap. The result feels human, reassuring and a little playful, not corporate or clinical.
Layout & Structure
A single full-width FAQ section centered in a max-w-[1180px] container (px-6/sm:px-8), with the accordion and CTA narrowed further (max-w-[820px] and max-w-[940px]). Top to bottom: a sticky blurred cream nav bar; a centered hero band (an eyebrow pill, a two-line gradient headline, a muted lead with a 'Talk to a human.' link) sitting on a warm gradient wash with blurred blobs; a vertical stack of white rounded accordion cards (one pre-opened); a bold full-bleed sunset-gradient CTA card; and a minimal cream footer row.
Sticky nav
Hero header band
Accordion list (closed cards)
Accordion open / active state
Gradient CTA card
Footer
Special Notes
Centered max-w-[1180px] container (px-6 / sm:px-8), with the accordion narrowed to max-w-[820px] and the CTA to max-w-[940px], all on a cream #fdf8f3 page. Palette is fixed and warm: cream #fdf8f3 base, white #ffffff cards, warm ink #1c140e text, muted #6c5d52 / soft #8a7c70 secondary text, and ONE sunset-gradient accent system, coral #ff6b4a -> amber #ffb020 (links use the deeper coral #cf3a13; the CTA card uses the hotter #f7572e -> #ff7a3a -> #ff9d18). No hard borders (only hairline ink/5-ink/8), soft warm shadows, big rounding (rounded-2xl cards, rounded-full pills, rounded-[28px] CTA). ONE typeface: Plus Jakarta Sans (weights 400-800) via Google Fonts; display headlines are extrabold, tracking -0.02em, leading 1.05; body is 15-18px relaxed leading. Icons are Iconify Phosphor (ph:* bold/fill) throughout (sparkle, question, magic-wand, books, plugs-connected, credit-card, export, users-three, caret-down, chats-circle, paper-plane-tilt, arrow-up-right, social logos). Exactly one FAQ card ships pre-opened; the accordion is pure-CSS native <details> with a grid-template-rows 0fr->1fr 0.32s cubic-bezier(0.4,0,0.2,1) reveal + a 0.3s caret rotate, and the open card lifts on a coral glow with a gradient icon fill. Responsive: nav center links + 'Sign in' hide below md/sm, the headline drops from 64->44px and its line break hides, the CTA buttons stack full-width on mobile, and the footer goes single-column; no horizontal overflow at 390px. Copy is human, warm and reassuring with zero em-dashes (proactive-friend voice: 'Talk to a human.', 'Our team actually answers, real humans, fast replies. Ping us and we'll sort it out together.', 'Your work stays safe, nothing is deleted.', 'no attribution required').