| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Spatial Voyagers</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| spatial: { |
| 100: '#f0f9ff', |
| 200: '#e0f3fe', |
| 300: '#bae6fd', |
| 400: '#7dd3fc', |
| 500: '#38bdf8', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| spatialDark: '#0c1c2c' |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| mono: ['Space Mono', 'monospace'], |
| title: ['Rajdhani', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=Space+Mono&display=swap" rel="stylesheet"> |
| <style> |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.5; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.5; } |
| } |
| |
| .float { animation: float 6s ease-in-out infinite; } |
| .pulse { animation: pulse 4s ease-in-out infinite; } |
| |
| .spatial-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(16px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); |
| border-radius: 24px; |
| overflow: hidden; |
| } |
| |
| .vertical-text { |
| writing-mode: vertical-lr; |
| text-orientation: mixed; |
| transform: rotate(180deg); |
| letter-spacing: -6px; |
| } |
| |
| .gradient-overlay { |
| background: linear-gradient(180deg, rgba(12,28,44,0) 0%, rgba(12,28,44,0.8) 80%); |
| } |
| |
| .glow { |
| filter: drop-shadow(0 0 15px rgba(7, 89, 133, 0.5)); |
| } |
| |
| .brand-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
| gap: 30px; |
| place-items: center; |
| } |
| |
| @media (max-width: 768px) { |
| .brand-grid { |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| gap: 20px; |
| } |
| |
| .vertical-text { |
| writing-mode: horizontal-tb; |
| text-orientation: unset; |
| transform: rotate(0deg); |
| letter-spacing: normal; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-spatialDark text-white font-sans overflow-x-hidden"> |
| |
| <div class="fixed w-full h-full top-0 left-0 pointer-events-none overflow-hidden -z-10"> |
| <div class="absolute w-[400px] h-[400px] top-[5%] left-[5%] rounded-full bg-spatial-800 opacity-5 float"></div> |
| <div class="absolute w-[600px] h-[600px] top-[15%] left-[75%] rounded-full bg-spatial-600 opacity-5 float" style="animation-delay: -3s;"></div> |
| <div class="absolute w-[300px] h-[300px] top-[70%] left-[20%] rounded-full bg-spatial-700 opacity-5 float" style="animation-delay: -5s;"></div> |
| |
| |
| <div class="absolute top-0 left-0 w-full h-full" style="background: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 50px 50px;"></div> |
| </div> |
| |
| |
| <header class="py-6 px-4 md:px-8 lg:px-16 fixed top-0 w-full z-50"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-43.svg" alt="Spatial Voyagers" class="h-12 mr-3 glow"> |
| <h1 class="font-title text-2xl md:text-3xl font-bold tracking-wide">SPATIAL VOYAGERS</h1> |
| </div> |
| |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-8 font-medium"> |
| <li><a href="#apps" class="hover:text-spatial-400 transition">Apps</a></li> |
| <li><a href="#experiences" class="hover:text-spatial-400 transition">Experiences</a></li> |
| <li><a href="#games" class="hover:text-spatial-400 transition">Games</a></li> |
| <li><a href="#work" class="hover:text-spatial-400 transition">Our Work</a></li> |
| </ul> |
| </nav> |
| |
| <button class="md:hidden"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| </svg> |
| </button> |
| </div> |
| </header> |
| |
| <main> |
| |
| <section class="pt-32 pb-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto text-center max-w-4xl"> |
| <h1 class="font-title text-5xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight"> |
| FUTURE OF <span class="text-spatial-400">SPATIAL COMPUTING</span> |
| </h1> |
| <p class="text-xl md:text-2xl text-spatial-300 max-w-2xl mx-auto mb-12"> |
| Creating the next generation of applications that bridge the digital and physical worlds. |
| </p> |
| <div class="flex justify-center gap-4"> |
| <button class="px-8 py-4 bg-spatial-600 rounded-full font-medium text-lg transition hover:bg-spatial-500"> |
| Explore Projects |
| </button> |
| <button class="px-8 py-4 border-2 border-spatial-600 rounded-full font-medium text-lg transition hover:bg-spatial-800"> |
| Contact Us |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="apps" class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="spatial-card p-8 md:p-12"> |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-12"> |
| <div class="lg:col-span-2"> |
| <div class="mb-6"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-43.svg" alt="Spatial Apps" class="h-12 mb-6"> |
| <h2 class="font-title text-4xl font-bold mb-6"> |
| <span class="block vertical-text text-3xl tracking-widest">S P A T I A L A P P S</span> |
| </h2> |
| </div> |
| <p class="text-lg text-spatial-200"> |
| We develop this new type of applications that adapt to the real world using floating screens or 3D elements. The future of Apps. |
| </p> |
| </div> |
| |
| <div class="lg:col-span-3 relative"> |
| <div class="relative rounded-2xl overflow-hidden"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-43.svg" alt="Spatial Apps Preview" class="w-full h-auto object-cover"> |
| <div class="absolute bottom-0 left-0 w-full p-6 gradient-overlay"> |
| <p class="text-lg"> |
| A virtual desktop with augmented reality follows you anywhere, offering customization, collaboration, security, and efficient task management for a flexible and immersive work experience. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="experiences" class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="spatial-card p-8 md:p-12"> |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-12"> |
| <div class="lg:col-span-3 relative"> |
| <div class="relative rounded-2xl overflow-hidden"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-44.svg" alt="Spatial Experiences Preview" class="w-full h-auto object-cover"> |
| <div class="absolute bottom-0 left-0 w-full p-6 gradient-overlay"> |
| <p class="text-lg"> |
| Soon we will announce the first brands we are working with that are already betting on being part of the great virtual wave of Spatial Computing. |
| </p> |
| <p class="mt-4 text-spatial-400 font-bold">Coming Soon</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:col-span-2"> |
| <div class="mb-6"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-44.svg" alt="Spatial Experiences" class="h-12 mb-6"> |
| <h2 class="font-title text-4xl font-bold mb-6"> |
| <span class="block vertical-text text-3xl tracking-widest">S P A T I A L E X P E R I E N C E S</span> |
| </h2> |
| </div> |
| <p class="text-lg text-spatial-200"> |
| Physical spaces like museums, stores, leisure places, or events can now have a virtual experiential layer that coexists with them on a large scale. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="games" class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="spatial-card p-8 md:p-12"> |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-12"> |
| <div class="lg:col-span-2"> |
| <div class="mb-6"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-45.svg" alt="Spatial Games" class="h-12 mb-6"> |
| <h2 class="font-title text-4xl font-bold mb-6"> |
| <span class="block vertical-text text-3xl tracking-widest">S P A T I A L G A M E S</span> |
| </h2> |
| </div> |
| <p class="text-lg text-spatial-200"> |
| Our game lab generates all the R&D needed for projects with the most innovative brands, coming soon to Stores. |
| </p> |
| </div> |
| |
| <div class="lg:col-span-3 relative"> |
| <div class="relative rounded-2xl overflow-hidden"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/02/Asset-45.svg" alt="Spatial Games Preview" class="w-full h-auto object-cover"> |
| <div class="absolute bottom-0 left-0 w-full p-6 gradient-overlay"> |
| <p class="text-lg"> |
| Our first Spatial Game for Vision Pro and Meta Quest 3 turns your room into a 70s-style thief adventure. |
| </p> |
| <p class="mt-4 text-spatial-400 font-bold">Video reel</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="spatial-card p-8 md:p-12"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> |
| <div class="text-center"> |
| <div class="text-8xl font-title font-bold text-spatial-400 mb-4">10</div> |
| <h3 class="text-2xl font-medium uppercase tracking-widest mb-4">Years of Experience in XR Creation</h3> |
| <p class="text-lg text-spatial-200 max-w-md mx-auto"> |
| We carry out complete Spatial Computing projects from concept, design, and programming. We create a dream team exclusively for each client. |
| </p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="text-7xl font-title font-bold text-spatial-400 mb-4">250+</div> |
| <div class="text-2xl font-medium uppercase tracking-widest mb-4">Projects for more than</div> |
| <div class="text-7xl font-title font-bold text-spatial-400 mb-4">90+</div> |
| <div class="text-2xl font-medium uppercase tracking-widest mb-4">innovative brands</div> |
| <p class="text-lg text-spatial-200 max-w-md mx-auto"> |
| Más de 250 proyectos para más de 90 marcas innovadoras |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="work" class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="font-title text-4xl font-bold mb-4">Brands We've Worked With</h2> |
| <p class="text-xl text-spatial-300 max-w-2xl mx-auto"> |
| We've collaborated with industry leaders to create immersive spatial experiences |
| </p> |
| </div> |
| |
| <div class="brand-grid"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/05-vodafone-1.png" alt="Vodafone" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/04-inditex-1.png" alt="Inditex" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/07-acciona-1.png" alt="Acciona" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/06-oxfam-1.png" alt="Oxfam" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/03-disney.png" alt="Disney" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/02-meta-1.png" alt="Meta" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/10-caixa.png" alt="Caixa" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/01-loewe-1.png" alt="Loewe" class="h-16 object-contain"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/08-mastercard-1-1.png" alt="Mastercard" class="h-16 object-contain"> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-4 md:px-8 lg:px-16"> |
| <div class="container mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="font-title text-4xl font-bold mb-4"> |
| <span class="block vertical-text text-3xl tracking-widest inline-block align-middle mr-4">O U R C O L L A B O R A T O R S</span> |
| </h2> |
| <p class="text-xl text-spatial-300 max-w-2xl mx-auto"> |
| Partnering with industry leaders to push the boundaries of spatial computing |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> |
| <div class="spatial-card p-8 text-center"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/logo_colaborador.svg" alt="Apple Coding Academy" class="h-24 mx-auto mb-6"> |
| <h3 class="font-title text-2xl font-bold mb-4">Apple Coding Academy</h3> |
| <p class="text-lg">Training and Development in the native Apple Environment</p> |
| </div> |
| |
| <div class="spatial-card p-8 text-center"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/BlackLogoTextslider.svg" alt="Argonauts XR" class="h-24 mx-auto mb-6"> |
| <h3 class="font-title text-2xl font-bold mb-4">Argonauts XR</h3> |
| <p class="text-lg">Virtual Production & XR Content</p> |
| </div> |
| |
| <div class="spatial-card p-8 text-center"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/Asset-2@3x.png" alt="Spatialuser" class="h-24 mx-auto mb-6"> |
| <h3 class="font-title text-2xl font-bold mb-4">Spatialuser</h3> |
| <p class="text-lg">Immersive visual space design & branding</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| |
| |
| <footer class="py-12 px-4 md:px-8 lg:px-16 border-t border-spatial-800"> |
| <div class="container mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-6 md:mb-0"> |
| <img src="https://spatialvoyagers.com/wp-content/uploads/2024/01/logo_black_R2.svg" alt="Spatial Voyagers Logo" class="h-10"> |
| <span class="ml-3">Copyright ® Spatial Voyagers</span> |
| </div> |
| |
| <div> |
| <a href="https://spatialvoyagers.com/legal.pdf" class="text-spatial-400 hover:text-white transition">Legal</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <div class="fixed bottom-8 right-8 z-50"> |
| <button class="w-16 h-16 rounded-full bg-spatial-600 flex items-center justify-center shadow-lg glow hover:bg-spatial-500 transition-all"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> |
| </svg> |
| </button> |
| </div> |
| |
| |
| <div class="fixed top-0 left-0 w-full h-full pointer-events-none -z-10 overflow-hidden"> |
| <div class="absolute top-1/4 left-1/4 w-3 h-3 rounded-full bg-spatial-400 pulse" style="animation-delay: 0s;"></div> |
| <div class="absolute top-1/3 left-3/4 w-2 h-2 rounded-full bg-spatial-500 pulse" style="animation-delay: -1s;"></div> |
| <div class="absolute top-2/3 left-1/3 w-3 h-3 rounded-full bg-spatial-600 pulse" style="animation-delay: -2s;"></div> |
| <div class="absolute top-3/4 left-2/3 w-2 h-2 rounded-full bg-spatial-400 pulse" style="animation-delay: -3s;"></div> |
| </div> |
| <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=ancerlop/spacedeep" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
