|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>VR Academy | Learn VR Development in Virtual Reality</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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0f0f1a; |
|
|
color: #e0e0e0; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
} |
|
|
|
|
|
.vr-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.glow { |
|
|
text-shadow: 0 0 10px rgba(100, 149, 237, 0.8); |
|
|
} |
|
|
|
|
|
.vr-headset { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.vr-headset::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: radial-gradient(circle at center, rgba(100, 149, 237, 0.2) 0%, transparent 70%); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.program-step { |
|
|
position: relative; |
|
|
padding-left: 2.5rem; |
|
|
} |
|
|
|
|
|
.program-step::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 1.5rem; |
|
|
height: 1.5rem; |
|
|
background-color: #4f46e5; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.program-step::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0.75rem; |
|
|
top: 1.5rem; |
|
|
width: 2px; |
|
|
height: calc(100% - 1.5rem); |
|
|
background-color: #4f46e5; |
|
|
} |
|
|
|
|
|
.program-step:last-child::after { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.investor-card { |
|
|
transition: all 0.3s ease; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.investor-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #4f46e5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.form-input { |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-input:focus { |
|
|
outline: none; |
|
|
border-color: #4f46e5; |
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold text-white font-orbitron">VR<span class="text-indigo-500">Academy</span></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="#benefits" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Benefits</a> |
|
|
<a href="#program" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Program</a> |
|
|
<a href="#investors" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Investors</a> |
|
|
<a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> |
|
|
Enroll Now |
|
|
</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-gray-900"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">About</a> |
|
|
<a href="#benefits" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Benefits</a> |
|
|
<a href="#program" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Program</a> |
|
|
<a href="#investors" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Investors</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a> |
|
|
<button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-600">Enroll Now</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient min-h-screen flex items-center pt-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 font-orbitron glow"> |
|
|
Learn <span class="text-indigo-400">VR Development</span> in Virtual Reality |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
The world's first immersive education platform where you learn VR development by building in VR. |
|
|
Join our revolutionary program in Meta Horizon and VRChat environments. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-300"> |
|
|
Start Learning |
|
|
</button> |
|
|
<button class="border border-indigo-400 text-indigo-400 hover:bg-indigo-900 hover:bg-opacity-20 px-8 py-3 rounded-md text-lg font-medium transition duration-300"> |
|
|
Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-8 flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/43.jpg" alt=""> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/65.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-gray-400">Join <span class="text-white font-medium">1,200+</span> students learning in VR</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative w-full h-96 md:h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl opacity-20 blur-3xl"></div> |
|
|
<div class="relative bg-gray-900 bg-opacity-50 border border-gray-700 rounded-2xl p-6 backdrop-blur-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<span class="text-sm text-gray-400">VR Development Console</span> |
|
|
</div> |
|
|
<div class="h-64 md:h-80 bg-gray-800 rounded-lg overflow-hidden relative vr-headset"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="floating mb-6"> |
|
|
<i class="fas fa-vr-cardboard text-6xl text-indigo-400"></i> |
|
|
</div> |
|
|
<p class="text-xl text-gray-300">Entering VR Learning Environment...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400">Connecting to Meta Horizon...</span> |
|
|
<span class="text-sm text-indigo-400">v2.0.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4 font-orbitron"> |
|
|
The <span class="text-indigo-400">Future</span> of Education |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
We're redefining how people learn to create virtual reality experiences by teaching entirely within VR. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="order-2 lg:order-1"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Learn by Doing in Virtual Reality</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Traditional online courses teach VR development through videos and text. We've created a revolutionary |
|
|
approach where you learn VR development by actually building VR experiences inside VR environments like |
|
|
Meta Horizon and VRChat. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Our immersive learning platform provides real-time feedback, collaborative workspaces, and hands-on |
|
|
projects that accelerate your learning curve. You'll gain practical skills faster than with any other |
|
|
learning method. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-indigo-400 mr-2"></i> |
|
|
<span class="text-gray-300">No prior experience needed</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-indigo-400 mr-2"></i> |
|
|
<span class="text-gray-300">Learn at your own pace</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="order-1 lg:order-2 relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl opacity-20 blur-3xl"></div> |
|
|
<div class="relative bg-gray-800 bg-opacity-50 border border-gray-700 rounded-2xl overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" |
|
|
alt="VR Learning Environment" class="w-full h-auto object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-white bg-opacity-90 hover:bg-opacity-100 text-indigo-600 rounded-full w-16 h-16 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="benefits" class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4 font-orbitron"> |
|
|
Why Learn <span class="text-indigo-400">in VR</span>? |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Our immersive learning approach offers unique advantages over traditional education methods. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-hands-helping text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Hands-On Learning</h3> |
|
|
<p class="text-gray-400"> |
|
|
Build VR experiences directly in VR with real-time feedback. No more abstract concepts - see your code come to life instantly. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-users text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Collaborative Environment</h3> |
|
|
<p class="text-gray-400"> |
|
|
Work alongside instructors and classmates in shared VR spaces. Get help, share ideas, and learn from others in real-time. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-bolt text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Faster Skill Acquisition</h3> |
|
|
<p class="text-gray-400"> |
|
|
Studies show immersive learning leads to 4x faster skill development compared to traditional methods. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-project-diagram text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Portfolio Projects</h3> |
|
|
<p class="text-gray-400"> |
|
|
Graduate with a portfolio of real VR projects built in professional environments, not just tutorial exercises. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-user-tie text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Industry Connections</h3> |
|
|
<p class="text-gray-400"> |
|
|
Network with VR professionals who visit our virtual campus for talks, workshops, and recruitment events. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vr-card bg-gray-900 rounded-xl p-8 transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-graduation-cap text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Certification</h3> |
|
|
<p class="text-gray-400"> |
|
|
Earn a recognized certification that demonstrates your VR development skills to employers. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="program" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4 font-orbitron"> |
|
|
Learning <span class="text-indigo-400">Program</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Our comprehensive 12-week curriculum takes you from beginner to professional VR developer. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 1-2: VR Fundamentals</h3> |
|
|
<p class="text-gray-400"> |
|
|
Introduction to VR development concepts, Unity basics, and navigating VR creation tools. Build your first simple VR environment. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 3-4: Interactive Elements</h3> |
|
|
<p class="text-gray-400"> |
|
|
Learn to create interactive objects, UI elements in VR, and basic physics. Develop a VR puzzle or mini-game. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 5-6: Avatars & Social VR</h3> |
|
|
<p class="text-gray-400"> |
|
|
Create and customize avatars, implement social features, and understand networking basics for multiplayer VR. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 7-8: Advanced Interactions</h3> |
|
|
<p class="text-gray-400"> |
|
|
Hand tracking, gesture recognition, and complex interactions. Build a VR tool or instrument. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 9-10: Optimization & Performance</h3> |
|
|
<p class="text-gray-400"> |
|
|
Learn techniques for optimizing VR experiences across different hardware. Implement performance monitoring. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-step"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Weeks 11-12: Capstone Project</h3> |
|
|
<p class="text-gray-400"> |
|
|
Design and develop your own complete VR application with guidance from instructors and peers. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-gray-800 bg-opacity-50 rounded-xl p-6"> |
|
|
<h4 class="text-lg font-bold text-white mb-3">Program Details</h4> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-calendar-alt text-indigo-400 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 font-medium">Duration</p> |
|
|
<p class="text-white">12 weeks (part-time)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-clock text-indigo-400 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 font-medium">Time Commitment</p> |
|
|
<p class="text-white">15-20 hours/week</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-user-graduate text-indigo-400 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 font-medium">Format</p> |
|
|
<p class="text-white">Live sessions + self-paced</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-vr-cardboard text-indigo-400 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 font-medium">Requirements</p> |
|
|
<p class="text-white">VR headset & capable PC</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl opacity-20 blur-3xl"></div> |
|
|
<div class="relative bg-gray-800 bg-opacity-50 border border-gray-700 rounded-2xl p-8 h-full"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">What You'll Build</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Interactive VR Environments</h4> |
|
|
<p class="text-gray-400"> |
|
|
Create immersive worlds with interactive elements and physics. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Social VR Experiences</h4> |
|
|
<p class="text-gray-400"> |
|
|
Develop multiplayer spaces with avatar interactions. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">VR Tools & Games</h4> |
|
|
<p class="text-gray-400"> |
|
|
Build functional applications and entertaining experiences. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Performance Optimized Apps</h4> |
|
|
<p class="text-gray-400"> |
|
|
Learn to create smooth experiences across devices. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Portfolio-Ready Project</h4> |
|
|
<p class="text-gray-400"> |
|
|
Complete a showcase project demonstrating your skills. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 bg-gray-900 rounded-xl p-6"> |
|
|
<h4 class="text-lg font-bold text-white mb-3">Upcoming Cohorts</h4> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-white">January 2024</p> |
|
|
<p class="text-gray-400 text-sm">Early Bird Discount Available</p> |
|
|
</div> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
|
|
Apply Now |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-white">March 2024</p> |
|
|
<p class="text-gray-400 text-sm">Standard Enrollment</p> |
|
|
</div> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
|
|
Apply Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="investors" class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4 font-orbitron"> |
|
|
For <span class="text-indigo-400">Investors</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Join us in shaping the future of education and the metaverse. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> |
|
|
<div class="investor-card bg-gray-900 rounded-xl p-8"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Market Opportunity</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
The VR education market is projected to reach $12.6 billion by 2028, growing at 42% CAGR. |
|
|
Our first-mover advantage in VR-native education positions us for leadership in this space. |
|
|
</p> |
|
|
<div class="bg-gray-800 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-gray-400 text-sm">VR Education Market</span> |
|
|
<span class="text-indigo-400 text-sm font-medium">$12.6B by 2028</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-indigo-500 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="investor-card bg-gray-900 rounded-xl p-8"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-lightbulb text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Innovative Model</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Our learn-by-doing approach in VR has shown 3x better retention and 4x faster skill acquisition compared to traditional methods. |
|
|
This creates a defensible moat around our educational offering. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-800 rounded-lg p-3 text-center"> |
|
|
<p class="text-2xl font-bold text-indigo-400">3x</p> |
|
|
<p class="text-gray-400 text-sm">Retention Rate</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-3 text-center"> |
|
|
<p class="text-2xl font-bold text-indigo-400">4x</p> |
|
|
<p class="text-gray-400 text-sm">Skill Acquisition</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="investor-card bg-gray-900 rounded-xl p-8"> |
|
|
<div class="w-16 h-16 bg-indigo-900 bg-opacity-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-rocket text-3xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Growth Potential</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
With our scalable platform, we can expand beyond VR development into other technical fields, |
|
|
corporate training, and eventually general education - a $7 trillion global market. |
|
|
</p> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div> |
|
|
<span class="text-gray-300 text-sm">Phase 1: VR Development (Current)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-indigo-400 mr-2 opacity-50"></div> |
|
|
<span class="text-gray-400 text-sm">Phase 2: Technical Fields (2024)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-indigo-400 mr-2 opacity-25"></div> |
|
|
<span class="text-gray-400 text-sm">Phase 3: General Education (2025+)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-50 rounded-2xl p-8 backdrop-blur-md"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6 text-center">Investment Highlights</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 text-center"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">$1.2M</div> |
|
|
<p class="text-gray-400">Seed Round Raised</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 text-center"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">1,200+</div> |
|
|
<p class="text-gray-400">Students Enrolled</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 text-center"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">87%</div> |
|
|
<p class="text-gray-400">Completion Rate</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 text-center"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">$5M</div> |
|
|
<p class="text-gray-400">Series A Target</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 text-center"> |
|
|
<button class="border-2 border-indigo-400 text-indigo-400 hover:bg-indigo-900 hover:bg-opacity-20 px-8 py-3 rounded-md text-lg font-medium transition duration-300"> |
|
|
Download Investor Deck |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4 font-orbitron"> |
|
|
Get in <span class="text-indigo-400">Touch</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Have questions about our program or investment opportunities? We'd love to hear from you. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="first-name" class="block text-sm font-medium text-gray-300 mb-1">First Name</label> |
|
|
<input type="text" id="first-name" class="form-input w-full px-4 py-3 rounded-md text-white"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="last-name" class="block text-sm font-medium text-gray-300 mb-1">Last Name</label> |
|
|
<input type="text" id="last-name" class="form-input w-full px-4 py-3 rounded-md text-white"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
|
|
<input type="email" id="email" class="form-input w-full px-4 py-3 rounded-md text-white"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> |
|
|
<select id="subject" class="form-input w-full px-4 py-3 rounded-md text-white"> |
|
|
<option value="">Select a topic</option> |
|
|
<option value="admissions">Admissions Questions</option> |
|
|
<option value="technical">Technical Requirements</option> |
|
|
<option value="investors">Investment Inquiry</option> |
|
|
<option value="partnerships">Partnership Opportunities</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> |
|
|
<textarea id="message" rows="5" class="form-input w-full px-4 py-3 rounded-md text-white"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-8 py-3 rounded-md text-lg font-medium w-full transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl opacity-20 blur-3xl"></div> |
|
|
<div class="relative bg-gray-800 bg-opacity-50 border border-gray-700 rounded-2xl p-8 h-full"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Location</h4> |
|
|
<p class="text-gray-400"> |
|
|
Virtual HQ in Meta Horizon<br> |
|
|
Physical Office: San Francisco, CA |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Email</h4> |
|
|
<p class="text-gray-400"> |
|
|
hello@vracademy.io<br> |
|
|
investors@vracademy.io |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 bg-opacity-50 text-indigo-400"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">Phone</h4> |
|
|
<p class="text-gray-400"> |
|
|
+1 (415) 555-0199<br> |
|
|
Available 9AM-5PM PST |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-lg font-bold text-white mb-4">Visit Our Virtual Campus</h4> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Experience our learning environment firsthand in Meta Horizon or VRChat. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fab fa-meta mr-2"></i> Meta Horizon |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-vr-cardboard mr-2"></i> VRChat |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-br from-indigo-900 to-purple-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6 font-orbitron"> |
|
|
Ready to <span class="text-indigo-300">Build</span> the <span class="text-purple-300">Metaverse</span>? |
|
|
</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10"> |
|
|
Join the next generation of VR developers and creators. Applications for our January cohort are now open. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-indigo-900 hover:bg-gray-100 px-8 py-4 rounded-md text-lg font-bold transition duration-300"> |
|
|
Apply Now |
|
|
</button> |
|
|
<button class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-md text-lg font-medium transition duration-300"> |
|
|
Schedule VR Tour |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black bg-opacity-90 py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-white font-orbitron mb-4">VR<span class="text-indigo-500">Academy</span></h3> |
|
|
<p class="text-gray-400"> |
|
|
The future of education is immersive. We're training the next generation of VR developers and metaverse creators. |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Programs</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">VR Development</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Metaverse Design</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Unity for VR</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">VR Animation</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Corporate Training</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Community</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">VR Hardware Guide</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Press</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Partners</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
© 2023 VR Academy. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Accessibility</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.querySelector('form'); |
|
|
if (contactForm) { |
|
|
contactForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const firstName = document.getElementById('first-name').value; |
|
|
const lastName = document.getElementById('last-name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const subject = document.getElementById('subject').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
|
|
|
alert(`Thank you for your message, ${firstName}! We'll get back to you soon.`); |
|
|
|
|
|
|
|
|
contactForm.reset(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.vr-card, .program-step, .investor-card').forEach(card => { |
|
|
observer.observe(card); |
|
|
}); |
|
|
</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=kozlin/testspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
