Create isolated TRYONYOU_LANDING_INTEGRATION workspace with React landing page

[Copilot]

Implements a standalone React landing page for TryOnYou virtual try-on, designed for iframe integration with the demo app without touching existing TRYONYOU_MAIN codebase.

Workspace Structure

• landing/ - React 18 + Vite SPA (port 3001)
  • Hero, Features, DemoIntegration, Footer components
  • Multi-language (EN/ES/FR) via translation utilities
  • SVG placeholder assets (hero, mockups, Pau mascot, logos)
• integration_config.json - iframe configuration with postMessage communication, security sandbox, origin validation
• translations/ - i18n strings and content structure map
• tryonyou-landing-bundle.zip - distribution package (28KB, excludes node_modules)

Integration Architecture

// DemoIntegration.jsx - iframe with bidirectional communication
const iframeUrl = process.env.VITE_DEMO_URL || 'http://localhost:3000/demo/';

// postMessage listener validates origins from config
window.addEventListener('message', (event) => {
  if (!integrationConfig.communication.allowedOrigins.includes(event.origin)) return;
  // Handle demo lifecycle events
});

Vite proxy: /demo/ → configurable via VITE_DEMO_URL env var (defaults localhost:3000)

Key Implementation Details

• React refs for iframe manipulation (no DOM queries)
• Environment-driven proxy configuration
• Sandbox: allow-same-origin allow-scripts allow-forms allow-popups
• Loading/error states with retry mechanism
• Responsive breakpoints: <768px, 768-1024px, >1024px

Asset Placeholders

Replace SVG stubs in assets/images/ with TRYONYOU_FULL_KIT_V2:

• hero/hero-background.jpg
• logo/tryonyou-logo{,-white}.svg
• mascot/pau-mascot.svg
• mockups/{ai,instant,easy}-feature.png
• mockups/product-{1,2,3}.jpg

Build verified, 0 security vulnerabilities (CodeQL).

Original prompt

Task:
Create a new isolated workspace for TRYONYOU_LANDING_INTEGRATION.
Do not modify the existing TRYONYOU_MAIN project.

Inside this new workspace, perform the following steps:

1. Create a clean React placeholder project for the landing page.
   • Folder name: landing/
   • Import visual assets from TRYONYOU_FULL_KIT_V2 (hero images, mockups, Pau mascot, logo).
   • Use the translations from translations.txt and the content structure from content_map.txt.
2. Prepare integration hooks so the landing can later embed the TRYONYOU demo (React app) without touching the informatician’s project.
   • Create an iframe placeholder referencing /demo/
   • Add configuration file integration_config.json.
3. Organize files into clean folders:
   • /assets
   • /translations
   • /components
   • /public
4. Output the full landing bundle as a ZIP and commit it to the new workspace folder.
   • Do not push or modify any existing repos.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.