| | <!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> |
