Z-Shape Layout

Build a SaaS landing page in Next.js with Tailwind CSS using the Z-pattern reading flow. Section 1 (top of Z): sticky nav with logo far left and "Get Started Free" CTA button far right. Section 2 (diagonal of Z): alternating feature rows — `flex-row` on desktop, `flex-col` on mobile. First row: text left, product screenshot/mockup right. Second row: flips to image left, text right. This forces the eye to travel diagonally. Each feature row needs an eyebrow tag, H2, a 2-sentence description, a short bullet list with checkmark icons, and a text link CTA. Section 3 (bottom of Z): full-width social proof bar — 5 logo images in a row, and below that a 3-column stat grid. Section 4: centered CTA section with a bold H2, subtext, and two buttons (primary filled, secondary outline). Use `scroll-mt-20` on sections for anchor nav. Add a subtle diagonal divider between sections using a skewed `div` with `transform: skewY(-2deg)`.