F-Shape Layout
Structures content to match how users actually scan screens — two strong horizontal bands at the top, then a left-weighted vertical strip for continued reading.
AI Prompt
Build an article page in Next.js with Tailwind CSS optimized for the F-pattern reading behavior. Structure: (1) Full-width masthead with publication name, date, and category nav — this is the first horizontal bar of the F. (2) Article header zone spanning full width: category badge, H1 headline in a bold serif, author meta row (avatar + name + role + publish date), and a full-width featured image with caption. (3) Two-column body: left 70% for article text (`max-w-prose`), right 30% for sidebar. Article text: use `@tailwindcss/typography` prose styles with `prose-slate` and `prose-lg`. Drop cap on the first paragraph using `::first-letter`. Sidebar: sticky (`sticky top-20`), contains a "Jump to section" anchor list that highlights the active heading using IntersectionObserver, and an inline ad card. (4) F-pattern principle: every section starts with a bold H2 that spans full width (second horizontal bar), followed by shorter left-aligned paragraphs (the vertical bar). Add a reading progress bar fixed to the top of the viewport.