Spaces:

JamesToth
/

futurevisionpro

Running

App Files Files Community

JamesToth commited on Apr 7, 2025

Commit

302735e

verified ·

1 Parent(s): d62a246

Upload 2 files

Browse files

Files changed (1) hide show

index.html +487 -712

index.html CHANGED Viewed

@@ -3,35 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Future Vision Pro | The Ultimate Spatial Computer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700;800;900&display=swap');
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-        }
         body {
-            overflow-x: hidden;
             background-color: #000;
             color: #fff;
         }
         .hero-video {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100vh;
             object-fit: cover;
-            z-index: -1;
         }
         .gradient-overlay {
@@ -39,608 +29,607 @@
             top: 0;
             left: 0;
             width: 100%;
-            height: 100vh;
-            background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
-            z-index: 0;
         }
         .glass-effect {
             background: rgba(255, 255, 255, 0.05);
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .device-3d {
-            transform-style: preserve-3d;
-            perspective: 1000px;
-        }
-        .device-screen {
-            transform: translateZ(20px);
-            box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
         }
-        .parallax-element {
-            will-change: transform;
         }
-        .app-icon {
-            transition: all 0.3s ease;
-            transform-origin: center;
         }
-        .app-icon:hover {
-            transform: scale(1.1) translateZ(20px);
         }
-        .eye-tracking-dot {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background-color: rgba(255, 255, 255, 0.8);
-            border-radius: 50%;
-            filter: blur(1px);
-            animation: float 3s infinite ease-in-out;
         }
         @keyframes float {
-            0%, 100% { transform: translateY(0) translateX(0); }
-            50% { transform: translateY(-10px) translateX(5px); }
         }
-        .pulse-ring {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border: 2px solid rgba(255, 255, 255, 0.5);
-            border-radius: 50%;
             animation: pulse 2s infinite;
-            opacity: 0;
         }
         @keyframes pulse {
-            0% { transform: scale(0.8); opacity: 0.7; }
-            70% { transform: scale(1.2); opacity: 0; }
-            100% { transform: scale(0.8); opacity: 0; }
         }
-        .scroll-hint {
             position: absolute;
-            bottom: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-            animation: bounce 2s infinite;
         }
-        @keyframes bounce {
-            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
-            40% { transform: translateY(-20px) translateX(-50%); }
-            60% { transform: translateY(-10px) translateX(-50%); }
         }
-        .feature-card {
-            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
-            transform-style: preserve-3d;
         }
-        .feature-card:hover {
-            transform: translateY(-10px) translateZ(10px);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
         }
-        .spatial-audio-wave {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-            border-radius: 50%;
-            animation: expand 3s infinite ease-out;
         }
-        @keyframes expand {
-            0% { transform: scale(0.5); opacity: 1; }
-            100% { transform: scale(1.5); opacity: 0; }
         }
-        .typing-cursor {
-            display: inline-block;
-            width: 2px;
-            height: 24px;
-            background-color: white;
-            animation: blink 1s infinite;
         }
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
         }
     </style>
 </head>
-<body class="antialiased">
     <!-- Navigation -->
-    <nav class="fixed w-full z-50 glass-effect py-4 px-6">
-        <div class="max-w-7xl mx-auto flex justify-between items-center">
-            <a href="#" class="text-white text-xl font-semibold">
-                <i class="fab fa-apple mr-2"></i> Vision Pro
-            </a>
-            <div class="hidden md:flex space-x-8">
-                <a href="#overview" class="text-white hover:text-gray-300 transition">Overview</a>
-                <a href="#features" class="text-white hover:text-gray-300 transition">Features</a>
-                <a href="#technology" class="text-white hover:text-gray-300 transition">Technology</a>
-                <a href="#apps" class="text-white hover:text-gray-300 transition">Apps</a>
-                <a href="#specs" class="text-white hover:text-gray-300 transition">Tech Specs</a>
             </div>
-            <button class="bg-white text-black px-6 py-2 rounded-full font-medium hover:bg-opacity-90 transition">
-                Buy
-            </button>
         </div>
     </nav>
     <!-- Hero Section -->
-    <section class="relative h-screen flex items-center justify-center overflow-hidden">
         <video autoplay muted loop class="hero-video">
             <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/hero/large.mp4" type="video/mp4">
         </video>
         <div class="gradient-overlay"></div>
-        <div class="relative z-10 text-center px-4">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                <span class="inline-block">Welcome to the era of</span>
-                <span class="inline-block">spatial computing.</span>
-            </h1>
-            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">
-                Future Vision Pro seamlessly blends digital content with your physical space.
-                <span class="typing-cursor"></span>
-            </p>
-            <div class="flex flex-col md:flex-row justify-center gap-4">
-                <button class="bg-white text-black px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition flex items-center justify-center">
-                    <i class="fas fa-play-circle mr-2"></i> Watch the film
-                </button>
-                <button class="bg-transparent border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
-                    <i class="fas fa-mobile-alt mr-2"></i> Take a closer look
-                </button>
             </div>
         </div>
-        <div class="scroll-hint">
-            <div class="w-6 h-10 border-2 border-white rounded-full flex items-center justify-center">
-                <div class="w-1 h-2 bg-white rounded-full animate-bounce"></div>
-            </div>
         </div>
     </section>
-    <!-- Device Showcase -->
-    <section id="overview" class="py-20 px-4 relative">
-        <div class="max-w-7xl mx-auto">
-            <div class="text-center mb-20">
-                <h2 class="text-4xl md:text-6xl font-bold mb-6">Future Vision Pro</h2>
-                <p class="text-xl md:text-2xl max-w-4xl mx-auto">
-                    The most advanced personal electronics device ever created.
-                    Transform the way you work, collaborate, connect, and entertain.
-                </p>
             </div>
-            <div class="flex flex-col lg:flex-row items-center justify-center gap-12">
-                <div class="device-3d relative w-full max-w-lg">
-                    <div class="relative">
-                        <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_base__bco6tv0mzxxq_large.jpg"
-                             alt="Future Vision Pro" class="w-full h-auto">
-                        <div class="device-screen absolute inset-0 overflow-hidden">
-                            <video autoplay muted loop class="w-full h-full object-cover">
-                                <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-spatial/large.mp4" type="video/mp4">
-                            </video>
-                        </div>
                     </div>
-                    <!-- Eye tracking dots -->
-                    <div class="eye-tracking-dot" style="top: 45%; left: 45%;"></div>
-                    <div class="eye-tracking-dot" style="top: 48%; left: 52%;"></div>
-                    <div class="eye-tracking-dot" style="top: 43%; left: 55%;"></div>
                 </div>
-                <div class="max-w-md">
-                    <h3 class="text-3xl font-bold mb-6">A revolutionary spatial computer</h3>
-                    <p class="text-lg mb-6">
-                        Future Vision Pro creates an infinite canvas for apps that scales beyond the boundaries of a traditional display.
-                        Experience digital content like never before.
-                    </p>
-                    <ul class="space-y-4 mb-8">
-                        <li class="flex items-start">
-                            <div class="relative mr-4">
-                                <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-check text-white text-xs"></i>
-                                </div>
-                                <div class="pulse-ring"></div>
-                            </div>
-                            <span>Powered by visionOS, the world's first spatial operating system</span>
-                        </li>
-                        <li class="flex items-start">
-                            <div class="relative mr-4">
-                                <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-check text-white text-xs"></i>
-                                </div>
-                                <div class="pulse-ring"></div>
-                            </div>
-                            <span>More pixels than a 4K TV for each eye</span>
-                        </li>
-                        <li class="flex items-start">
-                            <div class="relative mr-4">
-                                <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-check text-white text-xs"></i>
-                                </div>
-                                <div class="pulse-ring"></div>
-                            </div>
-                            <span>Advanced Spatial Audio with dynamic head tracking</span>
-                        </li>
-                    </ul>
-                    <button class="bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition">
-                        Learn more about the technology
-                    </button>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Features Section -->
-    <section id="features" class="py-20 px-4 bg-black bg-opacity-50">
-        <div class="max-w-7xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-6xl font-bold mb-6">Features</h2>
-                <p class="text-xl md:text-2xl max-w-4xl mx-auto">
-                    Future Vision Pro transforms how you experience entertainment, productivity, and connection.
-                </p>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Feature 1 -->
-                <div class="feature-card glass-effect rounded-2xl p-8">
-                    <div class="relative mb-6">
-                        <video autoplay muted loop class="w-full rounded-xl">
-                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-entertainment/large.mp4" type="video/mp4">
                         </video>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-4">Entertainment</h3>
-                    <p class="text-gray-300 mb-4">
-                        Experience movies, shows, and games on a 100-foot screen with Spatial Audio that makes it feel like the sound is coming from all around you.
-                    </p>
-                    <div class="flex items-center text-blue-400">
-                        <span>Learn more</span>
-                        <i class="fas fa-chevron-right ml-2 text-sm"></i>
                     </div>
                 </div>
-                <!-- Feature 2 -->
-                <div class="feature-card glass-effect rounded-2xl p-8">
-                    <div class="relative mb-6">
-                        <video autoplay muted loop class="w-full rounded-xl">
-                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-productivity/large.mp4" type="video/mp4">
                         </video>
                     </div>
-                    <h3 class="text-2xl font-bold mb-4">Productivity</h3>
-                    <p class="text-gray-300 mb-4">
-                        Create the perfect workspace with multiple apps floating in your space. Resize them and place them anywhere you want.
-                    </p>
-                    <div class="flex items-center text-blue-400">
-                        <span>Learn more</span>
-                        <i class="fas fa-chevron-right ml-2 text-sm"></i>
                     </div>
                 </div>
-                <!-- Feature 3 -->
-                <div class="feature-card glass-effect rounded-2xl p-8">
-                    <div class="relative mb-6">
-                        <video autoplay muted loop class="w-full rounded-xl">
                             <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-connection/large.mp4" type="video/mp4">
                         </video>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-4">Connection</h3>
-                    <p class="text-gray-300 mb-4">
-                        Stay connected with FaceTime in spatial environments that make it feel like you're together in the same room.
-                    </p>
-                    <div class="flex items-center text-blue-400">
-                        <span>Learn more</span>
-                        <i class="fas fa-chevron-right ml-2 text-sm"></i>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Technology Section -->
-    <section id="technology" class="py-20 px-4 relative overflow-hidden">
-        <div class="absolute inset-0">
-            <div class="absolute inset-0 bg-gradient-to-b from-blue-900 to-purple-900 opacity-20"></div>
-            <div class="absolute inset-0 bg-[url('https://www.apple.com/v/apple-vision-pro/a/images/overview/technology/technology_connections_endframe__d6ioq0wxp5oi_large.jpg')] bg-cover bg-center opacity-10"></div>
-        </div>
-        <div class="max-w-7xl mx-auto relative">
-            <div class="text-center mb-20">
-                <h2 class="text-4xl md:text-6xl font-bold mb-6">Breakthrough Technology</h2>
-                <p class="text-xl md:text-2xl max-w-4xl mx-auto">
-                    Future Vision Pro is packed with innovations that create an unprecedented experience.
-                </p>
             </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-                <div>
-                    <div class="mb-8">
-                        <h3 class="text-3xl font-bold mb-4">Micro-OLED Display System</h3>
-                        <p class="text-lg">
-                            Two displays the size of a postage stamp contain 23 million pixels — more than a 4K TV for each eye — for stunning clarity.
-                        </p>
                     </div>
-                    <div class="mb-8">
-                        <h3 class="text-3xl font-bold mb-4">Advanced Spatial Audio</h3>
-                        <div class="relative w-32 h-32 mb-4">
-                            <div class="absolute inset-0 flex items-center justify-center">
-                                <div class="w-16 h-16 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-headphones text-white text-2xl"></i>
-                                </div>
                             </div>
-                            <div class="spatial-audio-wave"></div>
-                            <div class="spatial-audio-wave" style="animation-delay: 0.5s;"></div>
-                            <div class="spatial-audio-wave" style="animation-delay: 1s;"></div>
                         </div>
-                        <p class="text-lg">
-                            Dual-driver audio pods deliver personalized sound while environmental sensors adjust to your surroundings.
-                        </p>
-                    </div>
-                    <div>
-                        <h3 class="text-3xl font-bold mb-4">R1 Chip</h3>
-                        <p class="text-lg">
-                            Our new custom silicon delivers real-time processing of camera, sensor, and microphone inputs for a lag-free experience.
-                        </p>
                     </div>
                 </div>
-                <div class="relative">
-                    <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/technology/technology_hardware__fmy8dq5x12qe_large.jpg"
-                         alt="Future Vision Pro Technology" class="w-full h-auto rounded-2xl">
-                    <div class="absolute -inset-8 border border-white border-opacity-20 rounded-2xl pointer-events-none"></div>
-                </div>
             </div>
         </div>
     </section>
-    <!-- Apps Section -->
-    <section id="apps" class="py-20 px-4 bg-black bg-opacity-70">
-        <div class="max-w-7xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-6xl font-bold mb-6">visionOS Apps</h2>
-                <p class="text-xl md:text-2xl max-w-4xl mx-auto">
-                    A new platform for spatial computing with familiar apps redesigned for Future Vision Pro.
-                </p>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 mb-16">
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-photo-film text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">Photos</span>
                 </div>
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-purple-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-film text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">TV</span>
                 </div>
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-red-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-music text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">Music</span>
                 </div>
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-green-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-safari text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">Safari</span>
                 </div>
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-yellow-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-envelope text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">Mail</span>
                 </div>
-                <div class="app-icon glass-effect rounded-2xl p-6 flex flex-col items-center">
-                    <div class="w-16 h-16 bg-pink-500 rounded-xl flex items-center justify-center mb-3">
-                        <i class="fas fa-message text-white text-2xl"></i>
                     </div>
-                    <span class="text-center">Messages</span>
-                </div>
-            </div>
-            <div class="relative rounded-3xl overflow-hidden">
-                <video autoplay muted loop class="w-full">
-                    <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-apps/large.mp4" type="video/mp4">
-                </video>
-                <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
-                <div class="absolute bottom-0 left-0 right-0 p-12">
-                    <h3 class="text-3xl md:text-4xl font-bold mb-4">Your apps live in your space</h3>
-                    <p class="text-xl max-w-2xl">
-                        With visionOS, apps can appear anywhere and be any size. Arrange them how you want and bring them closer for more detail.
-                    </p>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Tech Specs -->
-    <section id="specs" class="py-20 px-4">
-        <div class="max-w-7xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-6xl font-bold mb-6">Tech Specs</h2>
             </div>
-            <div class="glass-effect rounded-2xl p-8 md:p-12">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
-                    <div>
-                        <h3 class="text-2xl font-bold mb-6">Display</h3>
-                        <ul class="space-y-4">
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Display type</span>
-                                <span class="font-medium">Micro-OLED</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Resolution</span>
-                                <span class="font-medium">4K per eye</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Brightness</span>
-                                <span class="font-medium">5000 nits</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Refresh rate</span>
-                                <span class="font-medium">90Hz</span>
-                            </li>
-                        </ul>
                     </div>
-                    <div>
-                        <h3 class="text-2xl font-bold mb-6">Performance</h3>
-                        <ul class="space-y-4">
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Chip</span>
-                                <span class="font-medium">M2 + R1</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Memory</span>
-                                <span class="font-medium">16GB unified</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Storage</span>
-                                <span class="font-medium">256GB, 512GB, 1TB</span>
-                            </li>
-                            <li class="flex justify-between border-b border-white border-opacity-10 pb-2">
-                                <span>Audio</span>
-                                <span class="font-medium">Spatial Audio</span>
-                            </li>
-                        </ul>
                     </div>
                 </div>
-                <div class="mt-12">
-                    <h3 class="text-2xl font-bold mb-6">Sensors</h3>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <div class="glass-effect rounded-xl p-4 flex flex-col items-center">
-                            <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
-                                <i class="fas fa-eye text-blue-400"></i>
-                            </div>
-                            <span class="text-sm text-center">Eye tracking</span>
                         </div>
-                        <div class="glass-effect rounded-xl p-4 flex flex-col items-center">
-                            <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
-                                <i class="fas fa-hand-pointer text-purple-400"></i>
-                            </div>
-                            <span class="text-sm text-center">Hand tracking</span>
                         </div>
-                        <div class="glass-effect rounded-xl p-4 flex flex-col items-center">
-                            <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
-                                <i class="fas fa-vr-cardboard text-green-400"></i>
-                            </div>
-                            <span class="text-sm text-center">Depth sensing</span>
                         </div>
-                        <div class="glass-effect rounded-xl p-4 flex flex-col items-center">
-                            <div class="w-12 h-12 bg-yellow-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
-                                <i class="fas fa-lightbulb text-yellow-400"></i>
-                            </div>
-                            <span class="text-sm text-center">LiDAR scanner</span>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Final CTA -->
-    <section class="py-32 px-4 relative overflow-hidden">
-        <div class="absolute inset-0">
-            <div class="absolute inset-0 bg-gradient-to-b from-blue-900 to-purple-900 opacity-30"></div>
-            <div class="absolute inset-0 bg-[url('https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_endframe__dzong3g5x4qe_large.jpg')] bg-cover bg-center opacity-20"></div>
-        </div>
-        <div class="max-w-4xl mx-auto text-center relative">
-            <h2 class="text-4xl md:text-6xl font-bold mb-8">Welcome to the future of computing.</h2>
-            <p class="text-xl md:text-2xl mb-12">
-                Future Vision Pro will be available early next year starting at $3,499.
-            </p>
-            <div class="flex flex-col md:flex-row justify-center gap-4">
-                <button class="bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-opacity-90 transition flex items-center justify-center">
-                    <i class="fas fa-shopping-bag mr-3"></i> Order now
-                </button>
-                <button class="bg-transparent border border-white text-white px-8 py-4 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
-                    <i class="fas fa-map-marker-alt mr-3"></i> Find a store
-                </button>
             </div>
         </div>
     </section>
     <!-- Footer -->
-    <footer class="bg-black bg-opacity-80 py-12 px-4">
-        <div class="max-w-7xl mx-auto">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Shop and Learn</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Store</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Mac</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">iPad</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">iPhone</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Vision Pro</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Services</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future Music</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future TV+</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future Arcade</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">iCloud</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future One</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Future Store</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Find a Store</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Genius Bar</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Today at Future</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future Camp</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future Trade In</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">About Future</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Newsroom</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Future Leadership</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Career Opportunities</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Investors</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Ethics & Compliance</a></li>
                     </ul>
                 </div>
             </div>
-            <div class="pt-8 border-t border-white border-opacity-10">
                 <div class="flex flex-col md:flex-row justify-between items-center">
-                    <p class="text-gray-400 mb-4 md:mb-0">
                         Copyright © 2023 Future Inc. All rights reserved.
-                    </p>
                     <div class="flex space-x-6">
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i class="fab fa-facebook-f"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-twitter"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-instagram"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-youtube"></i>
                         </a>
                     </div>
@@ -650,263 +639,49 @@
     </footer>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Typing animation
-            const phrases = [
-                "Experience digital content like never before.",
-                "Transform your space into a personal theater.",
-                "Redefine how you work and play.",
-                "The most advanced personal electronics device ever created."
-            ];
-            let currentPhrase = 0;
-            let currentChar = 0;
-            let isDeleting = false;
-            const typingCursor = document.querySelector('.typing-cursor');
-            const typingElement = document.querySelector('.typing-cursor').previousSibling;
-            function typeWriter() {
-                const fullTxt = phrases[currentPhrase];
-                if (isDeleting) {
-                    typingElement.textContent = fullTxt.substring(0, currentChar - 1);
-                    currentChar--;
-                } else {
-                    typingElement.textContent = fullTxt.substring(0, currentChar + 1);
-                    currentChar++;
-                }
-                if (!isDeleting && currentChar === fullTxt.length) {
-                    isDeleting = true;
-                    setTimeout(typeWriter, 2000);
-                } else if (isDeleting && currentChar === 0) {
-                    isDeleting = false;
-                    currentPhrase = (currentPhrase + 1) % phrases.length;
-                    setTimeout(typeWriter, 500);
-                } else {
-                    const typingSpeed = isDeleting ? 50 : 100;
-                    setTimeout(typeWriter, typingSpeed);
                 }
-            }
-            setTimeout(typeWriter, 1000);
-            // GSAP animations
-            gsap.registerPlugin(ScrollTrigger);
-            // Hero section animations
-            gsap.from('nav', {
-                duration: 1,
-                y: -50,
-                opacity: 0,
-                ease: "power2.out"
-            });
-            gsap.from('.hero-video', {
-                duration: 2,
-                scale: 1.2,
-                ease: "power2.inOut"
-            });
-            const heroText = document.querySelectorAll('.hero h1 span');
-            heroText.forEach((text, i) => {
-                gsap.from(text, {
-                    duration: 1,
-                    y: 50,
-                    opacity: 0,
-                    delay: 0.3 + i * 0.2,
-                    ease: "power3.out"
-                });
-            });
-            gsap.from('.hero p', {
-                duration: 1,
-                y: 30,
-                opacity: 0,
-                delay: 0.8,
-                ease: "power2.out"
-            });
-            gsap.from('.hero button', {
-                duration: 1,
-                y: 30,
-                opacity: 0,
-                delay: 1,
-                ease: "power2.out",
-                stagger: 0.2
-            });
-            // Device showcase animations
-            gsap.from('.device-3d', {
-                scrollTrigger: {
-                    trigger: '.device-3d',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1.5,
-                y: 100,
-                opacity: 0,
-                ease: "power3.out"
-            });
-            gsap.from('.device-3d + div', {
-                scrollTrigger: {
-                    trigger: '.device-3d + div',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1.5,
-                y: 100,
-                opacity: 0,
-                delay: 0.3,
-                ease: "power3.out"
-            });
-            // Features cards animation
-            gsap.from('.feature-card', {
-                scrollTrigger: {
-                    trigger: '.feature-card',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 0.8,
-                y: 50,
-                opacity: 0,
-                stagger: 0.2,
-                ease: "back.out(1.7)"
-            });
-            // Technology section animations
-            gsap.from('#technology h2, #technology p', {
-                scrollTrigger: {
-                    trigger: '#technology',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                y: 50,
-                opacity: 0,
-                stagger: 0.2,
-                ease: "power2.out"
             });
-            gsap.from('#technology .grid > div', {
-                scrollTrigger: {
-                    trigger: '#technology .grid',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                x: -50,
-                opacity: 0,
-                stagger: 0.3,
-                ease: "power2.out"
-            });
-            gsap.from('#technology .grid > div + div', {
-                scrollTrigger: {
-                    trigger: '#technology .grid',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                x: 50,
-                opacity: 0,
-                delay: 0.3,
-                ease: "power2.out"
-            });
-            // Apps section animations
-            gsap.from('.app-icon', {
-                scrollTrigger: {
-                    trigger: '.app-icon',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 0.5,
-                scale: 0,
-                opacity: 0,
-                stagger: 0.1,
-                ease: "back.out(1.7)"
-            });
-            // Final CTA animations
-            gsap.from('#specs + section h2', {
-                scrollTrigger: {
-                    trigger: '#specs + section',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                y: 50,
-                opacity: 0,
-                ease: "power2.out"
-            });
-            gsap.from('#specs + section p', {
-                scrollTrigger: {
-                    trigger: '#specs + section',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                y: 50,
-                opacity: 0,
-                delay: 0.2,
-                ease: "power2.out"
-            });
-            gsap.from('#specs + section button', {
-                scrollTrigger: {
-                    trigger: '#specs + section',
-                    start: "top 80%",
-                    toggleActions: "play none none none"
-                },
-                duration: 1,
-                y: 50,
-                opacity: 0,
-                delay: 0.4,
-                stagger: 0.2,
-                ease: "power2.out"
-            });
-            // Eye tracking dots animation
-            const dots = document.querySelectorAll('.eye-tracking-dot');
-            dots.forEach(dot => {
-                setInterval(() => {
-                    const x = Math.random() * 20 - 10;
-                    const y = Math.random() * 20 - 10;
-                    gsap.to(dot, {
-                        duration: 3,
-                        x: `${x}px`,
-                        y: `${y}px`,
-                        ease: "sine.inOut"
-                    });
-                }, 3000);
-            });
-            // App icon hover effect
-            const appIcons = document.querySelectorAll('.app-icon');
-            appIcons.forEach(icon => {
-                icon.addEventListener('mouseenter', () => {
-                    gsap.to(icon, {
-                        duration: 0.3,
-                        y: -10,
-                        boxShadow: '0 10px 20px rgba(0,0,0,0.2)',
-                        ease: "power2.out"
-                    });
-                });
-                icon.addEventListener('mouseleave', () => {
-                    gsap.to(icon, {
-                        duration: 0.3,
-                        y: 0,
-                        boxShadow: 'none',
-                        ease: "power2.out"
                     });
-                });
             });
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JamesToth/futurevisionpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Future Vision Pro - The Future of Spatial Computing</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Inter', sans-serif;
             background-color: #000;
             color: #fff;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
         }
         .hero-video {
             width: 100%;
             height: 100vh;
             object-fit: cover;
+            position: relative;
+            z-index: 1;
         }
         .gradient-overlay {
             top: 0;
             left: 0;
             width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
+            z-index: 2;
+        }
+        .product-display {
+            perspective: 1000px;
+        }
+        .product-rotate {
+            transform-style: preserve-3d;
+            animation: rotate 20s infinite linear;
+        }
+        @keyframes rotate {
+            0% { transform: rotateY(0deg); }
+            100% { transform: rotateY(360deg); }
+        }
+        .parallax-section {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            min-height: 100vh;
+            position: relative;
         }
         .glass-effect {
             background: rgba(255, 255, 255, 0.05);
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
+            border-radius: 16px;
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
+        .scroll-indicator {
+            animation: bounce 2s infinite;
         }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+            40% {transform: translateY(-20px);}
+            60% {transform: translateY(-10px);}
         }
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
         }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
         }
+        .float-animation {
+            animation: float 6s ease-in-out infinite;
         }
         @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
         }
+        .pulse {
             animation: pulse 2s infinite;
         }
         @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .video-container {
+            position: relative;
+            overflow: hidden;
+            border-radius: 24px;
+            box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.1);
         }
+        .video-overlay {
             position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
+            z-index: 2;
         }
+        .tech-spec {
+            transition: all 0.3s ease;
         }
+        .tech-spec:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.1);
         }
+        .feature-card {
+            transition: all 0.3s ease;
         }
+        .feature-card:hover {
+            transform: scale(1.03);
         }
+        .glow-text {
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
         }
+        .scroll-snap {
+            scroll-snap-type: y mandatory;
         }
+        .scroll-snap > section {
+            scroll-snap-align: start;
         }
     </style>
 </head>
+<body class="scroll-snap">
     <!-- Navigation -->
+    <nav class="fixed w-full z-50 glass-effect">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex-shrink-0 flex items-center">
+                    <span class="text-white text-xl font-bold">FUTURE</span>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-8">
+                        <a href="#" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Store</a>
+                        <a href="#vision-pro" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Future Vision Pro</a>
+                        <a href="#glasses-pro" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Future Glasses Pro</a>
+                        <a href="#tech" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Technology</a>
+                        <a href="#" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Support</a>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
+                            <span class="sr-only">View cart</span>
+                            <i class="fas fa-shopping-bag h-6 w-6"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <section class="relative h-screen overflow-hidden">
         <video autoplay muted loop class="hero-video">
             <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/hero/large.mp4" type="video/mp4">
         </video>
         <div class="gradient-overlay"></div>
+        <div class="absolute inset-0 flex items-center justify-center z-10">
+            <div class="text-center px-4">
+                <h1 class="text-6xl md:text-8xl font-bold mb-4 glow-text">Future Vision Pro</h1>
+                <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto fade-in">Welcome to the era of spatial computing. A revolutionary product that seamlessly blends digital content with your physical space.</p>
+                <div class="flex justify-center space-x-4">
+                    <a href="#buy" class="bg-white text-black px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition pulse">Buy now</a>
+                    <a href="#vision-pro" class="text-white border border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
+                </div>
             </div>
         </div>
+        <div class="absolute bottom-10 left-0 right-0 text-center z-10 scroll-indicator">
+            <a href="#vision-pro"><i class="fas fa-chevron-down text-white text-2xl"></i></a>
         </div>
     </section>
+    <!-- Product Showcase -->
+    <section id="vision-pro" class="py-20 bg-black min-h-screen flex items-center">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">Future Vision Pro</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">The most advanced spatial computing device ever created.</p>
             </div>
+            <div class="product-display flex justify-center mb-20">
+                <div class="w-full md:w-2/3 product-rotate float-animation">
+                    <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_base__bcofud6brk2m_large.jpg" alt="Future Vision Pro" class="w-full h-auto">
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+                <div class="glass-effect p-8 rounded-2xl feature-card fade-in">
+                    <div class="text-5xl mb-4 text-blue-400">
+                        <i class="fas fa-eye"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Ultra-High Resolution</h3>
+                    <p class="text-gray-300">More pixels than a 4K TV for each eye, delivering stunning clarity.</p>
                 </div>
+                <div class="glass-effect p-8 rounded-2xl feature-card fade-in" style="transition-delay: 0.2s;">
+                    <div class="text-5xl mb-4 text-purple-400">
+                        <i class="fas fa-microchip"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">M3 Neural Engine</h3>
+                    <p class="text-gray-300">Our most powerful chip ever, designed specifically for spatial computing.</p>
+                </div>
+                <div class="glass-effect p-8 rounded-2xl feature-card fade-in" style="transition-delay: 0.4s;">
+                    <div class="text-5xl mb-4 text-green-400">
+                        <i class="fas fa-hand-pointer"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Intuitive Controls</h3>
+                    <p class="text-gray-300">Navigate with just your eyes, hands, and voice. No controllers needed.</p>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Immersive Experience -->
+    <section class="parallax-section min-h-screen" style="background-image: url('https://www.apple.com/v/apple-vision-pro/a/images/overview/experience/immersive__dmb59l0q7v6q_large.jpg');">
+        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+        <div class="relative z-10 min-h-screen flex items-center">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+                <div class="md:w-1/2 fade-in">
+                    <h2 class="text-4xl md:text-6xl font-bold mb-6">Immersive Experiences</h2>
+                    <p class="text-xl md:text-2xl mb-8">Future Vision Pro can transform any room into your own personal theater. Expand your movies, shows, and games up to the perfect size while feeling like you're part of the action with Spatial Audio.</p>
+                    <a href="#" class="inline-flex items-center text-white text-lg font-medium">
+                        Learn more about experiences <i class="fas fa-chevron-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Use Cases Section -->
+    <section class="py-20 bg-black min-h-screen flex items-center">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">How You'll Use It</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">Future Vision Pro transforms how you work, play, and connect.</p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-12">
+                <div class="fade-in">
+                    <h3 class="text-3xl font-bold mb-4">Work</h3>
+                    <p class="text-xl text-gray-300 mb-6">Create, collaborate, and get more done with multiple virtual displays that go anywhere. Perfect for professionals who need flexibility.</p>
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-productivity/large.mp4" type="video/mp4">
                         </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
+                <div class="fade-in" style="transition-delay: 0.2s;">
+                    <h3 class="text-3xl font-bold mb-4">Entertainment</h3>
+                    <p class="text-xl text-gray-300 mb-6">Watch movies and shows on a screen that feels 100 feet wide with immersive Spatial Audio. Play games that surround you in 3D.</p>
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-entertainment/large.mp4" type="video/mp4">
                         </video>
+                        <div class="video-overlay"></div>
                     </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div class="fade-in" style="transition-delay: 0.4s;">
+                    <h3 class="text-3xl font-bold mb-4">Design</h3>
+                    <p class="text-xl text-gray-300 mb-6">Manipulate 3D models with your hands. Sketch in midair. Visualize architectural designs at scale.</p>
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-design/large.mp4" type="video/mp4">
+                        </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
+                <div class="fade-in" style="transition-delay: 0.6s;">
+                    <h3 class="text-3xl font-bold mb-4">Connect</h3>
+                    <p class="text-xl text-gray-300 mb-6">Make FaceTime calls where participants appear life-size in your space. Share experiences with others in real time.</p>
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
                             <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/experience-connection/large.mp4" type="video/mp4">
                         </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Glasses Pro Section -->
+    <section id="glasses-pro" class="py-20 bg-gray-900 min-h-screen flex items-center">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">Future Glasses Pro 2.0</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">Our most advanced smart glasses, reimagined.</p>
             </div>
+            <div class="flex flex-col md:flex-row items-center gap-12 mb-20">
+                <div class="md:w-1/2 fade-in">
+                    <div class="product-display">
+                        <div class="product-rotate float-animation">
+                            <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_endframe__dzong6k9h6uq_large.jpg" alt="Future Glasses Pro 2.0" class="w-full h-auto">
+                        </div>
                     </div>
+                </div>
+                <div class="md:w-1/2 fade-in" style="transition-delay: 0.3s;">
+                    <h3 class="text-3xl font-bold mb-6">Lightweight Design, Powerful Performance</h3>
+                    <p class="text-xl text-gray-300 mb-8">At just 450 grams, Future Glasses Pro 2.0 delivers an incredible AR experience with all-day comfort. The redesigned form factor is 40% thinner than the previous generation.</p>
+                    <div class="grid grid-cols-2 gap-6">
+                        <div class="glass-effect p-6 rounded-xl tech-spec">
+                            <div class="text-blue-400 text-3xl mb-3">
+                                <i class="fas fa-bolt"></i>
                             </div>
+                            <h4 class="font-semibold mb-1">M2 Neural Engine</h4>
+                            <p class="text-sm text-gray-300">For seamless AR performance</p>
+                        </div>
+                        <div class="glass-effect p-6 rounded-xl tech-spec">
+                            <div class="text-purple-400 text-3xl mb-3">
+                                <i class="fas fa-camera"></i>
+                            </div>
+                            <h4 class="font-semibold mb-1">12MP Cameras</h4>
+                            <p class="text-sm text-gray-300">For high-quality passthrough</p>
+                        </div>
+                        <div class="glass-effect p-6 rounded-xl tech-spec">
+                            <div class="text-green-400 text-3xl mb-3">
+                                <i class="fas fa-volume-up"></i>
+                            </div>
+                            <h4 class="font-semibold mb-1">Spatial Audio</h4>
+                            <p class="text-sm text-gray-300">Immersive directional sound</p>
+                        </div>
+                        <div class="glass-effect p-6 rounded-xl tech-spec">
+                            <div class="text-yellow-400 text-3xl mb-3">
+                                <i class="fas fa-battery-full"></i>
+                            </div>
+                            <h4 class="font-semibold mb-1">All-Day Battery</h4>
+                            <p class="text-sm text-gray-300">Up to 18 hours of use</p>
                         </div>
                     </div>
                 </div>
+            </div>
+            <div class="video-container fade-in" style="transition-delay: 0.6s;">
+                <video autoplay muted loop class="w-full">
+                    <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/glass-pro-demo/large.mp4" type="video/mp4">
+                </video>
+                <div class="video-overlay"></div>
             </div>
         </div>
     </section>
+    <!-- Technology Section -->
+    <section id="tech" class="py-20 bg-black min-h-screen flex items-center">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">Breakthrough Technology</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">Future Vision Pro is packed with innovations that create an unprecedented experience.</p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
+                <div class="fade-in">
+                    <h3 class="text-3xl font-bold mb-4">Advanced Displays</h3>
+                    <p class="text-xl text-gray-300 mb-6">Custom micro‑OLED displays deliver more pixels than a 4K TV to each eye — for stunning clarity. A specially designed three‑element lens creates the feeling of a display that's everywhere you look.</p>
+                    <div class="glass-effect p-6 rounded-xl inline-block">
+                        <div class="flex items-center">
+                            <div class="text-blue-400 text-2xl mr-3">
+                                <i class="fas fa-tv"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">23 million pixels</h4>
+                                <p class="text-sm text-gray-300">Per eye</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <div class="fade-in" style="transition-delay: 0.2s;">
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/display-technology/large.mp4" type="video/mp4">
+                        </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
+                <div class="order-2 md:order-1 fade-in" style="transition-delay: 0.4s;">
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/input-controls/large.mp4" type="video/mp4">
+                        </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
+                <div class="order-1 md:order-2 fade-in" style="transition-delay: 0.6s;">
+                    <h3 class="text-3xl font-bold mb-4">Revolutionary Input System</h3>
+                    <p class="text-xl text-gray-300 mb-6">Future Vision Pro creates an input system unlike anything you've experienced before. Your eyes, hands, and voice become the ultimate controllers — no additional hardware needed.</p>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="glass-effect p-4 rounded-lg">
+                            <div class="text-purple-400 text-xl mb-2">
+                                <i class="fas fa-eye"></i>
+                            </div>
+                            <h4 class="font-semibold text-sm">Eye Tracking</h4>
+                            <p class="text-xs text-gray-300">High-speed cameras track your gaze</p>
+                        </div>
+                        <div class="glass-effect p-4 rounded-lg">
+                            <div class="text-green-400 text-xl mb-2">
+                                <i class="fas fa-hand-paper"></i>
+                            </div>
+                            <h4 class="font-semibold text-sm">Hand Gestures</h4>
+                            <p class="text-xs text-gray-300">Natural interactions with your hands</p>
+                        </div>
+                        <div class="glass-effect p-4 rounded-lg">
+                            <div class="text-yellow-400 text-xl mb-2">
+                                <i class="fas fa-microphone"></i>
+                            </div>
+                            <h4 class="font-semibold text-sm">Voice Control</h4>
+                            <p class="text-xs text-gray-300">Speak commands naturally</p>
+                        </div>
+                        <div class="glass-effect p-4 rounded-lg">
+                            <div class="text-red-400 text-xl mb-2">
+                                <i class="fas fa-memory"></i>
+                            </div>
+                            <h4 class="font-semibold text-sm">Neural Engine</h4>
+                            <p class="text-xs text-gray-300">Processes inputs instantly</p>
+                        </div>
                     </div>
                 </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div class="fade-in">
+                    <h3 class="text-3xl font-bold mb-4">Spatial Audio</h3>
+                    <p class="text-xl text-gray-300 mb-6">Dual-driver audio pods positioned next to each ear deliver personalized Spatial Audio that makes sounds feel like they're coming from all around you. Advanced algorithms analyze your room's acoustic properties to adapt the sound to your space.</p>
+                    <div class="glass-effect p-6 rounded-xl inline-block">
+                        <div class="flex items-center">
+                            <div class="text-green-400 text-2xl mr-3">
+                                <i class="fas fa-headphones"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Room Adaptation</h4>
+                                <p class="text-sm text-gray-300">Sound adjusts to your environment</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <div class="fade-in" style="transition-delay: 0.2s;">
+                    <div class="video-container">
+                        <video autoplay muted loop class="w-full">
+                            <source src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/spatial-audio/large.mp4" type="video/mp4">
+                        </video>
+                        <div class="video-overlay"></div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Product Comparison -->
+    <section id="buy" class="py-20 bg-gray-900 min-h-screen flex items-center">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">Choose Your Future</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">Two extraordinary products. One incredible ecosystem.</p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div class="glass-effect p-8 rounded-2xl feature-card fade-in">
+                    <div class="flex justify-center mb-8">
+                        <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_base__bcofud6brk2m_large.jpg" alt="Future Vision Pro" class="h-48 float-animation">
                     </div>
+                    <h3 class="text-2xl font-bold mb-2">Future Vision Pro</h3>
+                    <p class="text-gray-300 mb-6">The ultimate spatial computing experience with our most advanced technologies.</p>
+                    <div class="text-3xl font-bold mb-6">₹50,000</div>
+                    <div class="mb-8">
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Ultra-high-resolution display system</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>M3 Neural Engine</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Advanced Spatial Audio</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Eye tracking and hand controls</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Full AR/VR capabilities</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>3D camera for spatial photos</span>
+                        </div>
                     </div>
+                    <a href="#" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-full font-medium inline-block text-center pulse">Buy</a>
                 </div>
+                <div class="glass-effect p-8 rounded-2xl feature-card fade-in" style="transition-delay: 0.2s;">
+                    <div class="flex justify-center mb-8">
+                        <img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/hero_endframe__dzong6k9h6uq_large.jpg" alt="Future Glasses Pro 2.0" class="h-48 float-animation">
+                    </div>
+                    <h3 class="text-2xl font-bold mb-2">Future Glasses Pro 2.0</h3>
+                    <p class="text-gray-300 mb-6">Our most advanced smart glasses with premium features at an incredible value.</p>
+                    <div class="text-3xl font-bold mb-6">₹45,000</div>
+                    <div class="mb-8">
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>High-resolution micro-OLED displays</span>
                         </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>M2 Neural Engine</span>
                         </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Spatial Audio</span>
                         </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Voice and touch controls</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Augmented Reality focus</span>
+                        </div>
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            <span>Lightweight all-day design</span>
                         </div>
                     </div>
+                    <a href="#" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-full font-medium inline-block text-center pulse">Buy</a>
                 </div>
             </div>
+            <div class="mt-20 text-center fade-in" style="transition-delay: 0.4s;">
+                <h3 class="text-2xl font-bold mb-6">Need help choosing?</h3>
+                <a href="#" class="inline-flex items-center text-blue-400 text-lg font-medium">
+                    Compare both products <i class="fas fa-chevron-right ml-2"></i>
+                </a>
             </div>
         </div>
     </section>
     <!-- Footer -->
+    <footer class="bg-black py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                 <div>
+                    <h4 class="text-white text-sm font-semibold mb-4">Shop and Learn</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Store</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Future Vision Pro</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Future Glasses Pro</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Accessories</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="text-white text-sm font-semibold mb-4">Services</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Future Care</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Software Updates</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Developer</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="text-white text-sm font-semibold mb-4">Account</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Manage Your Account</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Order Status</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Shopping Help</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="text-white text-sm font-semibold mb-4">About Future</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Newsroom</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Investors</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Ethics & Compliance</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact Future</a></li>
                     </ul>
                 </div>
             </div>
+            <div class="border-t border-gray-800 pt-8">
                 <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="text-gray-400 text-sm mb-4 md:mb-0">
                         Copyright © 2023 Future Inc. All rights reserved.
+                    </div>
                     <div class="flex space-x-6">
+                        <a href="#" class="text-gray-400 hover:text-white">
                             <i class="fab fa-twitter"></i>
                         </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
                             <i class="fab fa-instagram"></i>
                         </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-facebook"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
                             <i class="fab fa-youtube"></i>
                         </a>
                     </div>
     </footer>
     <script>
+        // Intersection Observer for fade-in animations
+        const fadeElements = document.querySelectorAll('.fade-in');
+        const fadeObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
                 }
             });
+        }, {
+            threshold: 0.1
+        });
+        fadeElements.forEach(element => {
+            fadeObserver.observe(element);
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
                     });
+                }
             });
         });
+        // Add shadow to navbar on scroll
+        window.addEventListener('scroll', () => {
+            const nav = document.querySelector('nav');
+            if (window.scrollY > 10) {
+                nav.classList.add('shadow-lg');
+            } else {
+                nav.classList.remove('shadow-lg');
+            }
+        });
     </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MoiMoi-01/future-vision-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>