fix: production-navigable Antracite/Gold UI + real V1 API routes#202
Merged
fix: production-navigable Antracite/Gold UI + real V1 API routes#202
Conversation
…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>
|
Deployment failed with the following error: Learn More: https://vercel.link/invalid-route-source-pattern |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
App was not scrollable —
overflow: hiddenonhtml,body, and#rootprevented any scrolling. The React root wasposition: fixedwithpointer-events: none, making buttons unclickable in many contexts.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.
Missing API routes —
App.tsxandjulesClient.tscalled/api/v1/checkout/perfect-selection,/api/v1/leads, and/api/v1/mirror/snap, but none of these routes existed inapi/index.py. The "Mi Selección Perfecta" button had no backend to connect to.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)overflow: hiddenfromhtml/body/#root#rootfromposition: fixed; pointer-events: nonetoposition: relative; z-index: 10opacity: 0.15(atmospheric background, not blocking)Antracite/Gold Theme (
src/App.tsx,src/App.css,src/index.css)#141619→#0c0d10) with gold#D4AF37accentsV1 API Routes (
api/index.py)/api/v1/checkout/perfect-selection— wired toshopify_bridge.resolve_shopify_checkout_urlandamazon_bridge.resolve_amazon_checkout_urlfor real cart URLs/api/v1/leads— persists lead intents through the bunker orchestrator/api/v1/mirror/snap— integratesinventory_engine.inventory_match_payloadfor biometric garment matching, returns garment reference + Jules emotional message/api/healthto returnok: true, service name, and SIREN/patent — fixes PAU status display in frontendVerification
tsc --noEmit): 0 errorsvite build): 0 warnings, 0 errorsScreenshots
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