Skip to content

fix: production-navigable Antracite/Gold UI + real V1 API routes#202

Merged
LVT-ENG merged 3 commits intomainfrom
fix/production-navigable-v11
Apr 13, 2026
Merged

fix: production-navigable Antracite/Gold UI + real V1 API routes#202
LVT-ENG merged 3 commits intomainfrom
fix/production-navigable-v11

Conversation

@LVT-ENG
Copy link
Copy Markdown
Member

@LVT-ENG LVT-ENG commented Apr 13, 2026

Summary

This PR makes the TryOnYou web app fully navigable, visually production-ready with an Antracite/Gold Vogue-tech theme, and wires the missing V1 API routes to real backend logic.

Problems Fixed

  1. App was not scrollableoverflow: hidden on html, body, and #root prevented any scrolling. The React root was position: fixed with pointer-events: none, making buttons unclickable in many contexts.

  2. z-index layering blocked React UI — The MediaPipe canvas shell at z-index 1 and the legacy nav-bottom shell overlapped the React app. Users couldn't interact with the actual SPA.

  3. Missing API routesApp.tsx and julesClient.ts called /api/v1/checkout/perfect-selection, /api/v1/leads, and /api/v1/mirror/snap, but none of these routes existed in api/index.py. The "Mi Selección Perfecta" button had no backend to connect to.

  4. Light theme didn't match brand — The inline gradient was #F5F5DC → #FFFFFF → #D3B26A (beige/white), not the Antracite/Gold identity specified in CSS variables.

Changes

Layout & Scrollability (index.html, src/index.css, src/App.css)

  • Removed overflow: hidden from html/body/#root
  • Changed #root from position: fixed; pointer-events: none to position: relative; z-index: 10
  • Dimmed MediaPipe canvas to opacity: 0.15 (atmospheric background, not blocking)
  • Hidden legacy shell nav-bottom/pay-bar (React handles all CTAs)

Antracite/Gold Theme (src/App.tsx, src/App.css, src/index.css)

  • Dark anthracite background (#141619#0c0d10) with gold #D4AF37 accents
  • Cinzel serif + Inter sans-serif typography (Google Fonts)
  • Glass-morphism buttons with gold glow and backdrop-filter
  • BALMAIN / DIOR / PRADA / CHANEL / YSL brand rotation in hero
  • All inline styles updated to use anthracite/gold palette

V1 API Routes (api/index.py)

  • /api/v1/checkout/perfect-selection — wired to shopify_bridge.resolve_shopify_checkout_url and amazon_bridge.resolve_amazon_checkout_url for real cart URLs
  • /api/v1/leads — persists lead intents through the bunker orchestrator
  • /api/v1/mirror/snap — integrates inventory_engine.inventory_match_payload for biometric garment matching, returns garment reference + Jules emotional message
  • Enhanced /api/health to return ok: true, service name, and SIREN/patent — fixes PAU status display in frontend

Verification

  • TypeScript typecheck (tsc --noEmit): 0 errors
  • Production build (vite build): 0 warnings, 0 errors
  • Manual testing: full page scrollable, all buttons interactive, locale switcher works (FR/EN/ES)

Screenshots

Hero Section — Antracite/Gold theme with brand rotation:
Hero section with TRYONYOU branding and gold accents

Pricing Cards and Video Sections:
Pricing grid showing 12500€ and 109900€ packs

Ofrenda Overlay with Action Buttons:
Lower section with Balmain, payment, reservation buttons

Video Walkthrough

Full navigability demo including scrolling, locale switching (FR → EN → ES → FR), and all UI sections:

tryonyou_full_walkthrough_antracite_gold.mp4

To show artifacts inline, enable in settings.

Slack Thread

Open in Web Open in Cursor 

cursoragent and others added 3 commits April 13, 2026 01:47
…ion UI

- Remove overflow:hidden from html/body/#root that blocked all scrolling
- Set #root to position:relative z-index:10 instead of position:fixed with pointer-events:none
- Dim the MediaPipe canvas overlay to opacity:0.15 so React UI is fully visible
- Hide the legacy nav-bottom/pay-bar shell elements (React handles all CTAs)
- Import Google Fonts (Cinzel + Inter) for Vogue-tech typography

Co-authored-by: Tryonme <LVT-ENG@users.noreply.github.com>
- Replace light beige/white gradient with dark anthracite background
- Apply gold (#D4AF37) accents throughout: buttons, borders, text highlights
- Add BALMAIN/DIOR/PRADA/CHANEL/YSL brand rotation in hero section
- Use Cinzel serif for headings, Inter for body — luxury typography
- Restyle all CTAs with glass-morphism and gold glow effects
- Add proper footer with SIRET/patent information
- Ensure all inline styles use anthracite/gold palette consistently

Co-authored-by: Tryonme <LVT-ENG@users.noreply.github.com>
…snap

- Add /api/v1/checkout/perfect-selection: connects to Shopify/Amazon bridges
  for real cart addition (not simulated), returns checkout URLs
- Add /api/v1/leads: persists lead intents through orchestrator
- Add /api/v1/mirror/snap: integrates inventory engine for biometric match,
  returns garment reference and Jules emotional message
- Import inventory_engine, shopify_bridge, amazon_bridge modules
- Enhance /api/health with ok:true, service name, and SIREN/patent fields
  so frontend julesClient correctly displays PAU orchestration status

Co-authored-by: Tryonme <LVT-ENG@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 13, 2026

Deployment failed with the following error:

Header at index 0 has invalid `source` pattern "/docs/(.*\.(pdf|csv|md|zip))".

Learn More: https://vercel.link/invalid-route-source-pattern

Copy link
Copy Markdown
Member Author

@LVT-ENG LVT-ENG left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

@LVT-ENG LVT-ENG marked this pull request as ready for review April 13, 2026 05:02
@LVT-ENG LVT-ENG merged commit 63c18a7 into main Apr 13, 2026
2 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants