Questions, Answered — Corporate Split FAQ

Summary

A two-column split FAQ section on a full-bleed dark-navy marketing page, in a confident corporate-product voice. A sticky frosted navy top nav (an amber rounded sparkle logo + 'Promptcraft' wordmark, a row of nav links with the active 'FAQ' link in white, a ghost 'Sign in' link and a solid amber 'Start free' pill) sits above a 12-column grid: the LEFT column (col-span-5, sticky on desktop) carries the section identity, an amber eyebrow pill ('SUPPORT' with a small dot), a big tight-tracked two-line 'Questions, answered.' heading whose second word is amber, a muted lead paragraph, a short amber accent rule, and a 'Still stuck?' contact CTA card (an amber chat-bubble chip, a reassuring two-line label, a solid amber 'Talk to us' button, and an 'avg first reply under 3 hours' micro-line). The RIGHT column (col-span-7) is the accordion itself: numbered full-width question rows (01, 02, ...) divided by hairline white borders, each a left-aligned question with a circular amber plus toggle on the right; opening a row reveals its answer with a smooth grid-template-rows height animation, paints a 2px amber accent rail down its left edge, turns the question white and the number amber, and rotates the plus 45deg into an x. Only one row is open at a time (the first is open by default), and the column closes with a 'Browse the full help center' micro-link. A full-width dark footer (logo + copyright + social icons) anchors the page. Built on the Tailwind CDN with the Inter font and inline SVG icons; the page carries a subtle dotted grain texture and two soft ambient color glows behind the section, and below lg the two columns stack to a single column.

Style

A premium, trustworthy, corporate dark-mode SaaS aesthetic built around a single warm amber accent on a deep cool-navy ground. The whole page is full-bleed navy (body #0b1f3a) with the section sitting on navy-850 #0b1f3a over a navy-900 #071735 footer; text is a warm cream (#f6f1e7 headings, #cdd6e6 soft body, #93a3bf dim captions). Amber (#f0b429, brightening to #ffc94a on hover) is the only accent, used sparingly but deliberately: the logo chip, the eyebrow pill + dot, the second word of the heading, the accent rule, the contact CTA chip + button, the open-row left rail, the active number, the toggle circles, inline check icons, and the footer link. Surfaces are soft and rounded (rounded-md to rounded-2xl, full-round pills and toggle circles) with hairline white borders (border-white/10) doing the structural work instead of heavy shadows; depth comes from translucent navy panels (bg-navy-800/60), a frosted backdrop-blur nav (bg-navy-850/85), a faint radial-dot grain overlay, and two large blurred ambient glows (an amber/10 glow top-left, a navy-600/40 glow bottom-right). Typography is Inter across a wide weight range (400-900) with tight negative letter-spacing on the big heading (tracking-tight, leading-[1.05]) and a clear size hierarchy (2.5rem-3.1rem heading, 17px questions, 15-15.5px body, 12-13px captions). The signature feel is calm, dark, and editorial: generous whitespace, a strict hairline grid, one confident warm accent against deep navy, and motion that is smooth and unhurried (a .4s cubic-bezier ease on the accordion open, a .35s rail/icon ease, a gentle float-up reveal on the left column).

Layout & Structure

A sticky frosted top nav, then a full-bleed navy FAQ section laid out as a two-column 12-col grid (a sticky left identity/CTA column and a right accordion column), then a full-width dark footer. The `<header>` is `sticky top-0 z-50 border-b border-white/10 bg-navy-850/85 backdrop-blur-md`, its content centered in a `mx-auto max-w-[1200px] px-6 sm:px-8` row at `h-16`: a brand cluster on the left (an amber `rounded-md bg-amber` logo chip with a sparkle SVG + a 'Promptcraft' wordmark), a `hidden md:flex` row of nav links in the middle-right (Library / Canvas / Pricing, plus an active white 'FAQ' link to #faq), and a right cluster (a `hidden sm:block` ghost 'Sign in' link + a solid amber `rounded-full` 'Start free' pill). The FAQ `<section id="faq">` is `relative overflow-hidden bg-navy-850 grain` with two absolutely-positioned blurred ambient glows behind it, and an inner `relative mx-auto max-w-[1200px] px-6 py-20 sm:px-8 lg:py-28` holding a `grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-16`. The LEFT `<aside class="reveal lg:col-span-5">` wraps a `lg:sticky lg:top-28` block: an amber eyebrow pill, the two-line 'Questions, answered.' heading, a muted lead, an amber accent rule, and a contact CTA card. The RIGHT `<div class="lg:col-span-7">` holds `#accordion` (a `divide-y divide-white/10 border-y border-white/10` stack of `.faq-item` rows) plus a 'Browse the full help center' micro-link beneath it. Each accordion row is a `<button class="faq-trigger">` with a two-digit `.faq-num`, the question text, and a circular plus toggle, followed by a `.faq-body` grid-collapse wrapper holding the answer. The `<footer>` is `border-t border-white/10 bg-navy-900` with a centered `max-w-[1200px]` row of brand / copyright / social icons. Below lg the grid collapses to one column (left identity stacks above the accordion); below md the nav links hide; below sm the 'Sign in' link and footer row reflow.

Sticky frosted top nav

Full-bleed navy section shell + ambient glows + grain

Left identity column (eyebrow + heading + lead + accent rule)

Left contact CTA card

Right accordion column

Dark footer

Accordion open/close behavior

Responsive reflow

Special Notes

Exact tokens (Tailwind config extend): fonts = Inter (Google Fonts weights 400;500;600;700;800;900) set as `fontFamily.sans = ['Inter','ui-sans-serif','system-ui','sans-serif']`. Colors: `navy` ramp 900 #071735 / 850 #0b1f3a / 800 #0f2748 / 700 #16335c / 600 #1d3f72; `cream` DEFAULT #f6f1e7 / soft #cdd6e6 / dim #93a3bf; `amber` DEFAULT #f0b429 / bright #ffc94a. Body `font-sans text-cream antialiased` with `body { background:#0b1f3a }`, `html { scroll-behavior:smooth }`, and `::selection { background:#f0b429; color:#071735 }`. Amber is the ONLY accent; everything else is the cream-on-navy ramp; structure via hairline `border-white/10` and `divide-white/10`, with depth from translucent navy panels (`bg-navy-800/60`), the frosted nav (`bg-navy-850/85 backdrop-blur-md`), the `.grain` dotted overlay (radial-gradient rgba(255,255,255,0.035) 1px dots at 3px spacing) and two `blur-[120px]` ambient orbs (amber/10 top-left, navy-600/40 bottom-right). Corners: rounded-md (logo chips), rounded-xl (CTA inner chip + button), rounded-2xl (contact card), rounded-full (pills + toggle circles). Accordion mechanics: `.faq-body { display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1) }` with `.faq-body > div { overflow:hidden }`, opening to `grid-template-rows:1fr` on `.faq-item.open`. Open-row treatment: `.faq-item` is `position:relative` with a `.faq-item::before` 2px #f0b429 rail (left:-1px; top:14px; bottom:14px; width:2px; radius 2px; transform-origin top) that goes `scaleY(0)->scaleY(1)` over .35s; on open the `.faq-num` turns #f0b429 and the `.faq-q` turns #ffffff. Toggle: the `.faq-icon` plus SVG rotates `rotate(45deg)` over .35s and its circle brightens to `bg rgba(240,180,41,0.18) / border rgba(240,180,41,0.7)` on open; the trigger hovers to `bg rgba(255,255,255,0.025)` with an 8px radius. The accent rule is a `linear-gradient(90deg, #f0b429, rgba(240,180,41,0))` fading amber hairline. The left column reveals with `@keyframes floatUp` (.7s) via the `.reveal` class. Heading `text-[2.5rem] sm:text-[3.1rem] font-extrabold leading-[1.05] tracking-tight` ('Questions,' / 'answered.' with the second word in amber). Questions `text-[17px] font-semibold leading-snug`; numbers `tabular-nums`. Icons are inline SVG (a four-point sparkle logo glyph, a chat-bubble, an arrow-right, a plus, a filled check-circle, and X/GitHub/Discord social marks). JS enforces single-open accordion (close all + reset `.faq-q` to text-cream-soft, then open the clicked row if it was closed). Layout: a sticky frosted nav over a full-bleed `bg-navy-850 grain` `#faq` section whose inner `max-w-[1200px]` holds a `grid-cols-1 lg:grid-cols-12` split (a `lg:col-span-5` `lg:sticky lg:top-28` identity/CTA aside + a `lg:col-span-7` accordion), closed by a `bg-navy-900` footer; below lg it stacks to one column, below md the nav links hide, the 'Sign in' link is `hidden sm:block`. This is an original prompt-library product for the placeholder design-tool brand 'Promptcraft' (faithfully reproducing the build HTML); the prompt-library value is the corporate two-column split FAQ pattern itself (a sticky identity/CTA column beside a numbered hairline-divided amber-accent accordion on deep navy).