All layouts

Two-column Layout

Divides the page into a wide main content area and a narrower sidebar, creating clear information hierarchy with a primary reading path and supporting context.

BlogsSaaS pagesdocumentation

AI Prompt

Build a two-column blog layout in Next.js using Tailwind CSS. The main content column should be roughly 65% wide (use `lg:col-span-8` in a 12-column grid) and the sticky sidebar 35% (`lg:col-span-4`). Main content: article title in a serif font, author meta row (avatar circle + name + date + read time), hero image placeholder with aspect-ratio-video, body text with proper line-height (leading-7), and a "Share this article" row with icon buttons. Sidebar: author bio card with a circular avatar, rounded tags list, a "You might like" section with 3 mini article links (thumbnail + headline + date), and a sticky newsletter CTA card with an email input and submit button. The grid should be single-column below `lg`. Use `prose` class from @tailwindcss/typography on the article body. Make all interactive elements (tags, links, buttons) have smooth hover transitions.