Vandoko Hero — Email Signup + Tri-Image Collage

Two-column hero pairing a work-email signup card with an overlapping three-image collage and playful oklch accent marks.

Installation

Synthesis

Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (Customer.io / HubSpot / Clearbit classic-SaaS landing language) + Vandoko color & content (oklch tokens, cyan as signal, brand-true copy).

Lineage

Sources

• shadcnblocks — Hero 172 - Hero with email signup and overlapping tri-images (payload)
• Mobbin (page-coherent form spec): Customer.io · HubSpot · Clearbit

Modifications

• rebuilt the email-capture form as a plain controlled Input + Button with useState (demo submit + confirmation); dropped react-hook-form, zod, @hookform/resolvers, and @/components/ui/field
• dropped @/components/ui/aspect-ratio — tri-image collage now uses Tailwind aspect-[w/h] utilities preserving the overlap layout + ratios
• replaced hardcoded scribble colors (#5DCA8A, #0F1F2C, sky-500, amber-500) with oklch token strokes (border/muted-foreground + one primary accent); dropped the heaviest blob SVGs as dark-theme noise
• form lifted into a soft-shadow rounded-2xl bg-card card, solid primary button + arrow, no-credit-card microcopy, Vandoko outcomes voice
• registry-alias imports + oklch tokens only, eslint-disable above each img, dropped utils regDep

Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (landing-page6, two-front campaign).