Update index.html

index.html

@@ -196,6 +196,11 @@
         <section class="px-6 py-24 relative z-10">
             <div class="max-w-5xl mx-auto">
                 <div class="mb-16 text-center reveal-on-scroll">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
+                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
+                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Tecnical Background</span>
+                    </div>
+                
                     <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">
                         The Fabric <span class="text-[#00ff41]">Decoder</span>
                     </h2>
@@ -282,6 +287,162 @@
         </section>
 
 
+<section class="relative z-10 py-32 bg-[#030303] overflow-hidden border-t border-[#333]">
+            
+            <div class="absolute inset-0 pointer-events-none select-none opacity-20" 
+                 style="background-image: url('data:image/svg+xml,%3Csvg width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M11 11h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM11 51h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM51 11h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM51 51h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1z%27 fill=%27%2300ff41%27 fill-opacity=%270.4%27/%3E%3C/g%3E%3C/svg%3E');">
+            </div>
+            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#00ff41] rounded-full filter blur-[200px] opacity-5 animate-pulse pointer-events-none"></div>
+
+            <div class="max-w-6xl mx-auto relative z-20 px-6">
+                
+                <div class="mb-16 text-center reveal-on-scroll">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
+                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
+                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Research & Development</span>
+                    </div>
+                    <h2 class="font-serif text-3xl md:text-5xl font-bold mb-4 text-white">
+                        Oniverse <span class="text-[#00ff41]">Prototyping</span>
+                    </h2>
+                    <p class="font-mono text-xs md:text-sm opacity-60 max-w-2xl mx-auto">
+                        // Architetture sperimentali per l'ecosistema Phygital.
+                    </p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
+                    
+                    <svg class="hidden md:block absolute top-12 left-0 w-full h-full pointer-events-none z-0 opacity-20" xmlns="http://www.w3.org/2000/svg">
+                        <line x1="16%" y1="50%" x2="84%" y2="50%" stroke="#00ff41" stroke-width="1" stroke-dasharray="4,4"/>
+                    </svg>
+
+                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95">
+                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
+                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
+
+                            <div class="flex justify-between items-start mb-6">
+                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                                </div>
+                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: OMNICHANNEL</span>
+                            </div>
+
+                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: STYLE_INTELLIGENCE</h3>
+                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
+                                Piattaforma di Hyper-Personalization Cross-Brand. Unisce AI armocromatica e Virtual Try-On.
+                            </p>
+
+                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Customer Identity Analysis</strong>
+                                        Profilazione automatica (Armocromia) per upselling mirato tra brand (es. Intimissimi/Falconeri).
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Generative Fitting Room</strong>
+                                        Virtual Try-On su figura utente per abbattere i resi e aumentare il conversion rate.
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 pb-2">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Store Digital Extension</strong>
+                                        Scan-to-Look: Il prodotto fisico in negozio genera contenuti video AI (Sora/Gemini) istantanei.
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95" style="transition-delay: 0.2s;">
+                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
+                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
+
+                            <div class="flex justify-between items-start mb-6">
+                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h10"/><path d="M9 4v16"/><path d="M3 9l3 3-3 3"/><path d="M12 9l3 3-3 3"/></svg>
+                                </div>
+                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: SUSTAINABILITY</span>
+                            </div>
+
+                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: SMART_PRODUCT_LINK</h3>
+                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
+                                Trasformazione dell'oggetto fisico (Loyalty) in un touchpoint digitale attivo e sostenibile.
+                            </p>
+
+                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Phygital Gateway</strong>
+                                        QR Code su prodotto (padella) che attiva l'assistente AI, aumentando la retention post-acquisto.
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Computer Vision Inventory</strong>
+                                        Analisi visiva degli ingredienti per gestione scadenze e riduzione sprechi.
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 pb-2">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Contextual Content (RAG)</strong>
+                                        Generazione dinamica di ricette basata su disponibilità reale e preferenze salute.
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95" style="transition-delay: 0.4s;">
+                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
+                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
+
+                            <div class="flex justify-between items-start mb-6">
+                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                                </div>
+                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: RETENTION</span>
+                            </div>
+
+                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: ENGAGEMENT_ECOSYSTEM</h3>
+                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
+                                Strategia di Gamification circolare per massimizzare la frequenza di visita e la Data Collection.
+                            </p>
+
+                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Cross-Brand Journey</strong>
+                                        Sistema unificato di Badge/Achievement che guida l'utente attraverso i diversi brand del gruppo.
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Performance Marketing</strong>
+                                        Conversione dell'attività ludica in incentivi d'acquisto dinamici (codici sconto targettizzati).
+                                    </div>
+                                </li>
+                                <li class="flex items-start gap-3 pb-2">
+                                    <span class="text-[#00ff41] mt-0.5">▹</span>
+                                    <div>
+                                        <strong class="text-white block mb-0.5">Behavioral Insights</strong>
+                                        Utilizzo del layer di gioco per profilazione preferenze in modalità non invasiva.
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
         
         <style>
             /* --- GESTIONE IFRAME GAME --- */
@@ -321,11 +482,15 @@
             <div class="max-w-5xl mx-auto reveal-on-scroll">
                 
                 <div class="text-center mb-8">
-                    <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
+                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
+                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Gamification</span>
+                    </div>
+                    <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">
                         Innovation <span class="text-[#00ff41]">Run</span>
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        // <span class="text-[#00ff41]">Mission:</span> Crea un PoC visionario OMNICANALE
+                        // Mission: Crea un PoC visionario OMNICANALE
                     </p>
                 </div>
 
@@ -416,12 +581,17 @@
             
             <div class="max-w-3xl mx-auto relative text-center reveal-on-scroll">
                 <div class="mb-8">
-                    <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4 text-white">
+
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
+                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
+                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Augmented Reality</span>
+                    </div>
+
+                    <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4 text-white">
                         The Hidden <span class="text-[#00ff41] animate-pulse">Layer</span>
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        C'è un quarto livello di realtà nascosto in questo tessuto. 
-                        Sblocca il protocollo AR per immergerti dentro.
+                        // C'è un quarto livello di realtà nascosta. Sblocca il protocollo AR!
                     </p>
                 </div>
 
@@ -459,7 +629,8 @@
         <!-- MISSING LINK SECTION & CODE BLOCK -->
         <section class="px-6 py-24 relative z-10 bg-black/60 backdrop-blur-md border-y border-[#333]">
             <div class="max-w-3xl mx-auto reveal-on-scroll">
-                <h2 class="font-serif text-3xl md:text-4xl font-bold text-center mb-12">
+                
+                <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-12">
                     The <span class="text-[#00ff41]">"Missing Link"</span>
                 </h2>
                 
@@ -532,7 +703,7 @@
         <!-- FOOTER -->
         <section class="px-6 py-20 bg-black relative z-10">
             <div class="max-w-2xl mx-auto text-center reveal-on-scroll">
-                <h2 class="font-serif text-3xl md:text-4xl font-bold mb-12">
+                <h2 class="font-serif text-4xl md:text-5xl font-bold mb-12">
                     Iniziamo a <span class="text-[#00ff41]">Innovare</span>?
                 </h2>