Design a conversion-focused landing page mockup with hero section, feature blocks, testimonials, and CTA buttons ready for developer handoff.

Step 1: 960px Grid Layout

Create 1440×3000px document. Set guides at 240px margins for 960px content area.

Step 2: Hero Section

Full-width hero at 600px height. Gradient background, headline text, subhead, and primary CTA button.

Step 3: Navigation Bar

80px height nav with logo left, menu center, sign-up button right. Use consistent 16px spacing.

Step 4: Feature Blocks

Three-column feature section with icons, headings, and 2-line descriptions. 40px gutter between columns.

Step 5: Social Proof

Testimonial section with avatar circles, quote text, and star ratings.

Step 6: Footer Design

Four-column footer with links, newsletter signup, and social icons. Dark background (#1a1a2e).

Step 7: Developer Handoff

Label all layers clearly. Export assets at 1x and 2x. Include spacing annotations.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.