Spaces:

JamesToth
/

futurevisionpro

Running

App Files Files Community

JamesToth commited on Apr 5, 2025

Commit

d62a246

verified ·

1 Parent(s): c246fa4

Add 1 files

Browse files

Files changed (1) hide show

index.html +23 -23

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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>
@@ -65,9 +65,9 @@
             will-change: transform;
         }
-        .app-icon
             transition: all 0.3s ease;
-            transform-origin: center;5
         }
         .app-icon:hover {
@@ -190,7 +190,7 @@
                 <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">
@@ -214,7 +214,7 @@
     <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.
@@ -225,7 +225,7 @@
                 <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">
@@ -242,7 +242,7 @@
                 <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">
@@ -288,7 +288,7 @@
             <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>
@@ -358,7 +358,7 @@
             <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>
@@ -398,7 +398,7 @@
                 <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>
@@ -411,7 +411,7 @@
             <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>
@@ -566,7 +566,7 @@
         <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">
@@ -596,28 +596,28 @@
                 <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>
@@ -628,7 +628,7 @@
             <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">

 <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>
             will-change: transform;
         }
+        .app-icon {
             transition: all 0.3s ease;
+            transform-origin: center;
         }
         .app-icon:hover {
                 <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">
     <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.
                 <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">
                 <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">
             <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="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="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 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="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">
                 <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>
             <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">