Spaces:

JamesToth
/

futurevisionpro

Running

App Files Files Community

JamesToth commited on Apr 5, 2025

Commit

c246fa4

verified ·

1 Parent(s): 1519d6d

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +912 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Futurevisionpro
-emoji: 📉
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: futurevisionpro
+emoji: 🐳
+colorFrom: purple
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,912 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apple 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 {
+            position: absolute;
+            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;5
+        }
+        .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">
+                Apple 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">Apple 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="Apple 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">
+                        Apple 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">
+                    Apple 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">
+                    Apple 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="Apple 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 Apple 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">
+                Apple 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">Apple Music</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Apple TV+</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Apple 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">Apple One</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Apple 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 Apple</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Apple Camp</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Apple Trade In</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">About Apple</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">Apple 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 Apple 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>
+                </div>
+            </div>
+        </div>
+    </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>