|
|
<!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/[email protected]" 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> |
