Escape AI Slop — A Layout Reasoning Guide

Reading the current state first

• Structure: image-left, text-right, roughly 60/40 — if I described this out loud as "photo on one side, copy and buttons on the other, split down the middle," that description alone is the tell. A topology model may have been intended, but nothing forces the DOM to prove it; this is the default split most agents converge on without deciding to.
• Color: background is white. That's already the right call under a white-first default — no fix needed here.
• Cognitive bug risk: both CTAs live together in the one spot every visitor expects a CTA to be — the hero. Nothing below the fold echoes them. That's banner-blindness territory: the exact zone visitors have learned to tune out is the only place asking them to act.

Three structurally different directions (plain text, no code):

Direction 1 — Bottom-anchored, photo-led

┌──────────────────────────────────┐
│  Traceable Everyday Basics        │
│  Honest thread, quietly told.     │
│  [Explore]  [Trace supply chain]  │
├────────────────────────────────────┤
│                                      │
│   FULL-BLEED PRODUCT PHOTOGRAPH     │
│   (edge-to-edge, cropped by the     │
│    fold — carries the full weight)  │
└────────────────────────────────────┘

Quiet copy up top, a single large photograph doing all the visual work at the bottom of the first screen. Fits a brand whose whole pitch is "look at the supply chain" — the photo is the proof, not a decoration next to the proof. Bonus: the CTA row now sits above a hard visual break instead of floating in "the usual hero corner," which softens the banner-blindness risk from the current version.

Direction 2 — Offset, overlapping

┌──────────────────────────────────┐
│ Traceable Everyday Basics          │
│ Honest thread          ┌────────┐ │
│ from seed to     ┌─────┤ PHOTO  │ │
│ garment.         │PHOTO│ (bleeds│ │
│ [Explore][Trace] └─────┤ off    │ │
│                         │ edge)  │ │
└─────────────────────────┴────────┘

Same zigzag idea as the current split, but the photo overlaps the text block and bleeds off the right edge instead of sitting in its own clean column. The asymmetry and overlap are what make it read as designed rather than assembled — a straight 50/50 (or 60/40) division never does.

Direction 3 — Single-column, punctuated

┌──────────────────────────────────┐
│      Traceable Everyday Basics    │
│    Honest thread from seed        │
│       to garment.                 │
│   [Explore]   [Trace supply]      │
├────────────────────────────────────┤
│       FULL-BLEED PHOTO BREAK        │
├────────────────────────────────────┤
│   (traceability story continues     │
│    down a single centered column)   │
└────────────────────────────────────┘

Centered, narrow, one statement at a time — a full-bleed photo interrupts the column rather than sitting beside it. Matches the "basics, nothing extra" brand voice more literally than a side-by-side layout does.

One cross-cutting note regardless of which direction you pick: add at least one inline CTA further down the page (e.g. after the Traceability Index teaser) so the hero pair isn't the only ask on the page — that's the concrete fix for the banner-blindness risk flagged above.

No code was touched. Pick a direction (or mix elements from more than one) and it gets implemented from there.