Download index.html from kozlin/testspace: direct link, hf CLI and curl.
- Browser
- Download file 55.2 kB
-
https://huggingface.co/spaces/kozlin/testspace/resolve/main/index.html
- Command line
-
hf download hf://spaces/kozlin/testspace/index.html
-
curl -L -o index.html https://huggingface.co/spaces/kozlin/testspace/resolve/main/index.html
55.2 kB
| <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> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Mobile menu --> | |
| <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> | |
| <!-- Hero Section --> | |
| <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> | |
| <!-- About 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> | |
| <!-- Benefits 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"> | |
| <!-- Benefit 1 --> | |
| <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> | |
| <!-- Benefit 2 --> | |
| <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> | |
| <!-- Benefit 3 --> | |
| <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> | |
| <!-- Benefit 4 --> | |
| <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> | |
| <!-- Benefit 5 --> | |
| <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> | |
| <!-- Benefit 6 --> | |
| <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> | |
| <!-- Program 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"> | |
| <!-- Week 1-2 --> | |
| <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> | |
| <!-- Week 3-4 --> | |
| <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> | |
| <!-- Week 5-6 --> | |
| <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> | |
| <!-- Week 7-8 --> | |
| <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> | |
| <!-- Week 9-10 --> | |
| <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> | |
| <!-- Week 11-12 --> | |
| <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> | |
| <!-- Investors 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> | |
| <!-- Contact 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> | |
| <!-- CTA 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 --> | |
| <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> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| 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' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Form submission handling | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| 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; | |
| // Here you would typically send the form data to a server | |
| // For this demo, we'll just show an alert | |
| alert(`Thank you for your message, ${firstName}! We'll get back to you soon.`); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| } | |
| // Animate elements when they come into view | |
| 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> |