src/App.jsx

[LVT-ENG]

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Camera } from 'lucide-react';

export default function App() {
const [step, setStep] = useState('LANDING');

return (

{step === 'LANDING' && (
<motion.div className="text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>

TRYONYOU

We don't sell clothes. We sell certainty.

<button onClick={() => setStep('SCAN')} className="bg-tryon-gold text-tryonyou-black px-6 py-3 rounded font-bold">
INICIAR ESCÁNER BIOMÉTRICO

</motion.div>
)}

  {step === 'SCAN' && (
    <motion.div className="text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
       <Camera size={64} className="mx-auto text-tryon-gold mb-6 animate-pulse" />
       <p className="mb-8 text-xl">Escaneando silueta en tiempo real...</p>
       <button onClick={() => setStep('RESULT')} className="bg-tryon-gold text-tryonyou-black px-6 py-3 rounded font-bold">
         APLICAR OVERLAY (FIT ENGINE)
       </button>
    </motion.div>
  )}

  {step === 'RESULT' && (
    <motion.div className="text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      <h2 className="text-3xl text-tryon-gold mb-6">AJUSTEMENT PARFAIT</h2>
      <div className="border border-tryon-gold p-6 rounded-lg mb-8 text-left">
          <p className="mb-2">✓ Zero Sizes Algorithm: <strong>ACTIF</strong></p>
          <p className="mb-2">✓ Precisión Biométrica: <strong>99.7%</strong></p>
          <p>✓ Tencel Elasticity: <strong>OPTIMAL</strong></p>
      </div>
      <button className="bg-tryon-gold text-tryonyou-black px-8 py-3 rounded font-bold mb-6">
        RÉSERVER EN TIENDA
      </button>
      <p className="text-xs mt-8 opacity-50">PATENT PCT/EP2025/067317 | DIVINEO V7</p>
    </motion.div>
  )}
</div>

);
}