Rebuild the hero as an editorial split with the reel as an aperture

Featurekamo-marketing
Shipped
August 19, 2026 at 2:57 AM UTC
Author
Kamo
Commit
e6e05db

The reel was a centred rounded rectangle with a drop shadow — an object placed on the design rather than part of it — and it was the ONLY thing in the hero: ff04781 deleted the badge, headline, description, CTAs and stats when it landed the video, which left HeroHeadline.tsx orphaned and ten copy keys unused. So the section had no thesis and no call to action, which is most of why it read as a square in the middle of the screen. Now a two-column composition: eyebrow, headline, lede, CTA and the free-forever note on the left; the reel on the right, running PAST the right edge of the viewport. Three things do the integrating: - the frame's corners are chamfered at 45°, the same geometry as the hexagon field already behind it, instead of the border-radius every SaaS hero uses; - a light rail down its left edge carries the olive of the headline's travelling pass, tying the two halves of the split together; - it bleeds off-screen rather than stopping short, so there is no fourth edge to make it read as a card. The section's overflow-hidden is what clips it. The rim is a 1px gradient showing through the parent's padding box, because clip-path cuts borders off at the chamfer. Both boxes repeat the polygon — clip-path does not inherit, and a square inner box pokes its corners through. Detail work: the sound control moved to the bottom LEFT, since the frame's right edge is deliberately off-screen and a control anchored there would be unreachable. A progress rail along the bottom shows position in the loop — the only cue that the reel is finite rather than an animated background. Stats are a hairline rule under the composition, with no count-up: four figures racing on load compete with the reel at the moment it should be watched. "Watch Demo" is gone as a CTA because the reel beside the button is the demo; the secondary link reuses the CTA strip's own "View Pricing" label and target so the page names the action one way. No new copy: every string already existed in en.json. i18n/request.ts already deep-merges each locale with English, so the stat labels missing from 21 locales render in English until the dictionary CI catches up. Dead code removed along the way: an accent-glow div keyed off a `group-hover` with no `group` ancestor, an unused videoContainerRef, and object-contain on a 16:9 source inside a 16:9 frame.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing