Asymmetrical Layout
Uses deliberate imbalance — unequal columns, overlapping elements, and offset grids — to create tension and visual energy that symmetric layouts cannot achieve.
AI Prompt
Design an asymmetrical hero section for a creative agency in Next.js with Tailwind CSS. Use a 12-column CSS grid. Left side: spans 7 columns and contains an eyebrow tag ("Independent Studio"), a massive display headline in a heavy serif or ultra-bold sans font (clamp 3.5rem to 6rem), a one-liner subtext, and a row with a primary CTA button and a secondary "Watch Reel" button with a play icon circle. Right side: spans 5 columns and contains a tall image card (`aspect-[3/4]`) that bleeds 40px above the section top using negative margin-top. Overlay the image with a small floating stats badge (absolute positioned bottom-left of image: "47 projects shipped"). Below the two-column hero, add a full-width marquee strip with client logos. The key asymmetric detail: the headline on the left should use a mix of normal and italic weight for alternate words. Use `overflow: hidden` on the section and let the image deliberately clip at the top edge. Add a vertical rule line between sections using a 1px border-right on the left column.