Hero section

The starting point

Count the problems.

Layer 1: Copywriting

Fix the headline

Before: "Build Better Websites with Our Platform" After: "Ship interfaces your users actually notice"

Fix the subheadline

Before: "Our innovative solution helps you create beautiful, fast, and reliable websites with ease." After: "The thousand small decisions (the right easing curve, the curly apostrophe, the CTA that says exactly what happens next) are the difference between forgettable and remarkable."

Fix the CTA

Before: "Learn More" After: "Start the course, free"

Layer 2: Typography

Eyebrow text

Headline sizing

Subheadline typography

Proper punctuation

Layer 3: Craft

Spacing system

Button styling

<a>, not <button>. h-11 is a 44px touch target.

Secondary action

Primary has a background, secondary is text-only.

Layer 4: Animation

Stagger entrance

Reduced motion

When initial is false, motion/react skips the entrance entirely.