Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amplify - Mental Performance for Champions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://www.360cities.net/lib/embed.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap'); | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .vr-headset { | |
| transform-style: preserve-3d; | |
| transform: perspective(1000px) rotateY(-15deg); | |
| transition: all 0.3s ease; | |
| } | |
| .vr-headset:hover { | |
| transform: perspective(1000px) rotateY(0deg); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(212, 175, 55, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-['Montserrat']"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Cart Dropdown (moved before navigation) --> | |
| <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-black border border-yellow-500 rounded-lg shadow-lg py-2 z-50"> | |
| <div class="px-4 py-2 text-white border-b border-gray-700">Your Cart</div> | |
| <div id="cart-items" class="max-h-60 overflow-y-auto"> | |
| <div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div> | |
| </div> | |
| <div class="px-4 py-2 border-t border-gray-700"> | |
| <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 rounded transition disabled:opacity-50" disabled> | |
| Checkout | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="text-yellow-500"></i> | |
| <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a> | |
| <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a> | |
| <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a> | |
| <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a> | |
| <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a> | |
| <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a> | |
| <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="language-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe mr-1"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> | |
| <span id="current-language">EN</span> | |
| </button> | |
| <div id="language-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-50"> | |
| <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a> | |
| <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a> | |
| <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a> | |
| <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="cart-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition"> | |
| <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i> | |
| <span id="cart-count" class="text-white">0</span> | |
| </button> | |
| </div> | |
| <a href="login.html" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center"> | |
| <i data-feather="user" class="mr-2"></i> Login | |
| </a> | |
| <script> | |
| // Cart functionality | |
| let cart = []; | |
| const cartButton = document.getElementById('cart-button'); | |
| const cartDropdown = document.getElementById('cart-dropdown'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartItems = document.getElementById('cart-items'); | |
| const checkoutBtn = document.getElementById('checkout-btn'); | |
| function updateCart() { | |
| cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| if(cart.length === 0) { | |
| cartItems.innerHTML = '<div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>'; | |
| checkoutBtn.disabled = true; | |
| } else { | |
| cartItems.innerHTML = cart.map(item => ` | |
| <div class="px-4 py-3 border-b border-gray-700 flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">${item.name}</div> | |
| <div class="text-sm text-gray-400">${item.price}/mo</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="decrease-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="mx-2">${item.quantity}</span> | |
| <button class="increase-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| <button class="remove-item text-gray-400 hover:text-red-500 ml-2 p-1" data-id="${item.id}"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| // Calculate total | |
| const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| cartItems.innerHTML += ` | |
| <div class="px-4 py-3 bg-gray-900 flex justify-between font-bold"> | |
| <span>Total:</span> | |
| <span>${total.toFixed(2)}/mo</span> | |
| </div> | |
| `; | |
| checkoutBtn.disabled = false; | |
| // Re-render feather icons | |
| feather.replace(); | |
| // Add event listeners to new buttons | |
| document.querySelectorAll('.increase-item').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').dataset.id; | |
| const item = cart.find(i => i.id === id); | |
| if(item) { | |
| item.quantity++; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.decrease-item').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').dataset.id; | |
| const item = cart.find(i => i.id === id); | |
| if(item && item.quantity > 1) { | |
| item.quantity--; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-item').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').dataset.id; | |
| cart = cart.filter(i => i.id !== id); | |
| updateCart(); | |
| }); | |
| }); | |
| } | |
| } | |
| cartButton.addEventListener('click', () => { | |
| cartDropdown.classList.toggle('hidden'); | |
| }); | |
| // Close cart when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if(!cartButton.contains(e.target) && !cartDropdown.contains(e.target)) { | |
| cartDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Add to cart functionality | |
| function addToCart(item) { | |
| const existingItem = cart.find(i => i.id === item.id); | |
| if(existingItem) { | |
| existingItem.quantity++; | |
| } else { | |
| cart.push({...item, quantity: 1}); | |
| } | |
| updateCart(); | |
| cartDropdown.classList.remove('hidden'); | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative z-10 hero-gradient min-h-screen flex items-center"> | |
| <div class="container mx-auto px-6 py-20 md:py-32"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider"> | |
| <span class="text-yellow-500 glow-text">AMPLIFY</span> YOUR MIND | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300"> | |
| Mental fitness training for professionals and performers. | |
| <span class="text-yellow-500 font-bold">Practice under pressure.</span> | |
| <span class="text-red-500 font-bold">Build resilience.</span> | |
| <span class="text-yellow-500 font-bold">Perform at your peak.</span> | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-[#9b0000] hover:bg-[#7a0000] text-white font-bold px-8 py-4 rounded-lg text-lg transition transform hover:scale-105"> | |
| Get Started | |
| </button> | |
| <button onclick="window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')" class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-8 py-4 rounded-lg text-lg transition transform hover:scale-105"> | |
| Watch Demo <i data-feather="play" class="inline ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="vr-headset pulse-animation"> | |
| <img src="http://static.photos/technology/640x360/42" alt="VR Headset" class="rounded-lg shadow-2xl border-4 border-yellow-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="relative z-10 py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <!-- Features Section --> | |
| <section id="features" class="relative z-10 py-20 bg-black bg-opacity-90"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider"> | |
| <span class="text-yellow-500">TRAIN</span> <span class="text-red-500">YOUR</span> <span class="text-white">MIND</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition h-full flex flex-col"> | |
| <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="eye" class="text-black text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">VR Scenarios</h3> | |
| <p class="text-gray-300 text-center flex-grow"> | |
| Immersive virtual reality puts you in high-pressure situations before the big moment. Practice speeches, game-winning shots, or important interviews. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-red-500 transform hover:scale-105 transition h-full flex flex-col"> | |
| <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="layers" class="text-black text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-red-500">AR Training</h3> | |
| <p class="text-gray-300 text-center flex-grow"> | |
| Augmented reality overlays provide real-time feedback on posture, breathing, and movement during your practice sessions. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition h-full flex flex-col"> | |
| <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="activity" class="text-black text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Biometrics</h3> | |
| <p class="text-gray-300 text-center"> | |
| Track heart rate, breathing patterns, and stress levels to understand and control your physiological responses to pressure. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800"> | |
| <h3 class="text-2xl font-bold mb-4 text-yellow-500">How It Works</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-500 text-black rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Select Your Scenario</h4> | |
| <p class="text-gray-400">Choose from our library of high-pressure situations or create a custom scenario.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-500 text-black rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Practice in VR/AR</h4> | |
| <p class="text-gray-400">Experience the situation in a safe, controlled environment with our technology.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-500 text-black rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Analyze Performance</h4> | |
| <p class="text-gray-400">Review biometric data and get personalized feedback on how to improve.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-500 text-black rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Repeat & Improve</h4> | |
| <p class="text-gray-400">Build confidence through repeated exposure and measurable progress.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800"> | |
| <h3 class="text-2xl font-bold mb-4 text-red-500">Real-Time Performance Dashboard</h3> | |
| <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border-2 border-yellow-500 bg-black"> | |
| <div id="performance-dashboard" class="w-full h-full flex flex-col justify-center items-center"> | |
| <div class="flex justify-around w-full mb-8"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-yellow-500" id="confidence-level">87%</div> | |
| <div class="text-gray-300">Confidence</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-red-500" id="stress-level">42%</div> | |
| <div class="text-gray-300">Stress</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-green-500" id="focus-level">93%</div> | |
| <div class="text-gray-300">Focus</div> | |
| </div> | |
| </div> | |
| <div class="w-4/5 h-4 bg-gray-800 rounded-full mb-2"> | |
| <div id="performance-bar" class="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <p class="text-gray-300">Your current performance score</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| This interactive dashboard simulates real biometric data from our training sessions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="relative z-10 py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-6 font-['Bebas+Neue'] tracking-wider"> | |
| <span class="text-yellow-500">CHOOSE</span> <span class="text-white">YOUR</span> <span class="text-red-500">PLAN</span> | |
| </h2> | |
| <p class="text-xl text-center text-gray-400 mb-16 max-w-2xl mx-auto"> | |
| Select the level of access that fits your mental training needs. All plans include our VR and AR technology. | |
| </p> | |
| <div class="flex justify-center"> | |
| <div class="grid grid-cols-1 gap-8 max-w-4xl"> | |
| <!-- Free Trial --> | |
| <div class="bg-gradient-to-b from-gray-900 to-black p-8 rounded-xl border border-green-500 transform hover:scale-105 transition mx-auto hovered-element"> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-green-500">7-Day Free Trial</h3> | |
| <div class="text-center mb-6 hovered-element"> | |
| <span class="text-4xl font-bold text-green-500">$0</span> | |
| <span class="text-gray-400">for 7 days</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check text-green-500 mr-2"><polyline points="20 6 9 17 4 12"></polyline></svg> | |
| <span>Full access to all features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check text-green-500 mr-2"><polyline points="20 6 9 17 4 12"></polyline></svg> | |
| <span>Unlimited VR/AR scenarios</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check text-green-500 mr-2"><polyline points="20 6 9 17 4 12"></polyline></svg> | |
| <span>Basic biometric analysis</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x text-red-500 mr-2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| <span class="text-gray-400">No custom scenarios</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x text-red-500 mr-2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| <span class="text-gray-400">No coaching sessions</span> | |
| </li> | |
| </ul> | |
| <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="w-full bg-gradient-to-r from-green-600 to-green-800 hover:from-green-500 hover:to-green-700 text-white font-bold py-3 rounded-lg transition flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap mr-2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Start Free Trial | |
| </a> | |
| </div> | |
| <!-- Core Plan --> | |
| <div class="bg-gradient-to-b from-gray-900 to-black p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition mx-auto"> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Amplify Core</h3> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold text-yellow-500">$60</span> | |
| <span class="text-gray-400">/month</span> | |
| <div class="mt-2 text-yellow-400"> | |
| <span class="font-bold">$700/year</span> - Save $80 with annual billing | |
| </div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Unlimited VR/AR scenarios</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Full biometric suite with AI analysis</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>24/7 professional support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Full scenario library + custom builds</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="plus" class="text-yellow-500 mr-2"></i> | |
| <span class="text-gray-400">(Optional Add-On $35/session) Monthly 1-on-1 real human coaching sessions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Personalized training plan</span> | |
| </li> | |
| </ul> | |
| <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/amplify-1/" class="w-full bg-gradient-to-r from-yellow-600 to-yellow-800 hover:from-yellow-500 hover:to-yellow-700 text-white font-bold py-3 rounded-lg transition flex items-center justify-center"> | |
| <i data-feather="zap" class="mr-2"></i> Buy Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="relative z-10 py-20 bg-black bg-opacity-90"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <div class="relative mb-8"> | |
| <img src="http://static.photos/education/640x360/123" alt="Coach" class="rounded-lg border-2 border-yellow-500 hovered-element"> | |
| <div class="absolute bottom-0 left-0 bg-yellow-500 text-black px-4 py-2 rounded-tr-lg"> | |
| <i data-feather="user" class="inline mr-2"></i> Elite Coaches | |
| </div> | |
| </div> | |
| <h2 class="text-4xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider"> | |
| <span class="text-yellow-500">ABOUT</span> <span class="text-white">AMPLIFY</span> | |
| </h2> | |
| <p class="text-lg mb-6 text-gray-300"> | |
| At Amplify, we believe that success starts in our minds. Our company's mission is to help people unlock their full potential mentally and physically by bridging technology, psychology, and personal growth. | |
| </p> | |
| <p class="text-lg mb-6 text-gray-300"> | |
| We created this platform to empower people to develop the mentality required to become the best version of themselves- whether stepping onto the field, into the classroom, or into an interview. By combining biometric tracking, personalized training, 1-on-1 coaching, and VR/AR experiences, we give our users the tools they need to strengthen focus, build confidence, and master the art of mental preparation. | |
| </p> | |
| <p class="text-lg mb-8 text-gray-300"> | |
| We at Amplify don't just prepare you for big moments- we help you create them. Our VR headset brings nervous scenarios to life so you can practice and prepare, while our AR technology provides hands-on learning in real-world environments. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-6 py-3 rounded-lg transition flex items-center"> | |
| <i data-feather="users" class="mr-2"></i> Meet the Team | |
| </button> | |
| <button class="border-2 border-[#9b0000] hover:bg-[#9b0000] hover:text-white text-white font-bold px-6 py-3 rounded-lg transition flex items-center"> | |
| <i data-feather="book" class="mr-2"></i> Our Story | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-yellow-500 h-48 flex flex-col justify-center items-center"> | |
| <i data-feather="target" class="text-yellow-500 text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold text-center text-white">Our Mission</h3> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-red-500 h-48 flex flex-col justify-center items-center"> | |
| <i data-feather="eye" class="text-red-500 text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold text-center text-white">Our Vision</h3> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-yellow-500 h-48 flex flex-col justify-center items-center"> | |
| <i data-feather="award" class="text-yellow-500 text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold text-center text-white">Our Values</h3> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-red-500 h-48 flex flex-col justify-center items-center"> | |
| <i data-feather="trending-up" class="text-red-500 text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold text-center text-white">Our Growth</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="relative z-10 py-20 bg-gradient-to-r from-black via-gray-900 to-black"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider"> | |
| <span class="text-yellow-500">READY</span> <span class="text-white">TO</span> <span class="text-red-500">AMPLIFY</span> <span class="text-white">YOUR</span> <span class="text-yellow-500">PERFORMANCE?</span> | |
| </h2> | |
| <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300"> | |
| Join thousands of athletes, performers, and professionals who are mastering their minds with our technology. | |
| </p> | |
| <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="bg-gradient-to-r from-green-600 to-green-800 hover:from-green-500 hover:to-green-700 text-white font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg mb-4 inline-block"> | |
| Start 7-Day Free Trial | |
| </a> | |
| <p class="text-sm text-gray-400">No credit card required • Cancel anytime</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="zap" class="text-yellow-500"></i> | |
| <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Mental performance technology for champions in sports, business, and life. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li> | |
| <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency Converter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Community</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2025 Amplify Technologies. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center"> | |
| <button id="mobile-menu-close" class="absolute top-4 right-4 text-white text-2xl"> | |
| <i data-feather="x"></i> | |
| </button> | |
| <div class="flex flex-col space-y-6 text-center"> | |
| <a href="index.html" class="text-2xl text-white hover:text-yellow-500 transition">Home</a> | |
| <a href="index.html#features" class="text-2xl text-white hover:text-yellow-500 transition">Features</a> | |
| <a href="index.html#pricing" class="text-2xl text-white hover:text-yellow-500 transition">Pricing</a> | |
| <a href="about.html" class="text-2xl text-white hover:text-yellow-500 transition">About</a> | |
| <a href="currency.html" class="text-2xl text-white hover:text-yellow-500 transition">Currency</a> | |
| <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a> | |
| <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a> | |
| </div> | |
| </div> | |
| <!-- Add i18next libraries --> | |
| <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script> | |
| <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script> | |
| <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script> | |
| <script> | |
| // Initialize i18next with translations | |
| i18next | |
| .use(i18nextBrowserLanguageDetector) | |
| .init({ | |
| fallbackLng: 'en', | |
| debug: false, | |
| resources: { | |
| en: { | |
| translation: { | |
| "home": "Home", | |
| "features": "Features", | |
| "pricing": "Pricing", | |
| "about": "About", | |
| "currency": "Currency", | |
| "events": "Events", | |
| "results": "Results", | |
| "login": "Login", | |
| "title": "Amplify - Mental Performance for Champions", | |
| "hero_title": "AMPLIFY YOUR MIND", | |
| "hero_subtitle": "VR & AR mental training for athletes and performers.", | |
| "get_started": "Get Started", | |
| "watch_demo": "Watch Demo", | |
| "train_your_mind": "TRAIN YOUR MIND", | |
| "vr_scenarios": "VR Scenarios", | |
| "vr_desc": "Immersive virtual reality puts you in high-pressure situations before the big moment.", | |
| "ar_training": "AR Training", | |
| "ar_desc": "Augmented reality overlays provide real-time feedback on posture, breathing, and movement.", | |
| "biometrics": "Biometrics", | |
| "bio_desc": "Track heart rate, breathing patterns, and stress levels to understand your physiological responses." | |
| // Add more translations as needed | |
| } | |
| }, | |
| es: { | |
| translation: { | |
| "home": "Inicio", | |
| "features": "Características", | |
| "pricing": "Precios", | |
| "about": "Sobre nosotros", | |
| "currency": "Moneda", | |
| "events": "Eventos", | |
| "results": "Resultados", | |
| "login": "Iniciar sesión", | |
| "title": "Amplify - Rendimiento mental para campeones", | |
| "hero_title": "AMPLIFICA TU MENTE", | |
| "hero_subtitle": "Entrenamiento mental con VR y AR para atletas y artistas.", | |
| "get_started": "Comenzar", | |
| "watch_demo": "Ver demo", | |
| "train_your_mind": "ENTRENA TU MENTE", | |
| "vr_scenarios": "Escenarios VR", | |
| "vr_desc": "La realidad virtual inmersiva te coloca en situaciones de alta presión antes del gran momento.", | |
| "ar_training": "Entrenamiento AR", | |
| "ar_desc": "Las superposiciones de realidad aumentada proporcionan retroalimentación en tiempo real sobre postura, respiración y movimiento.", | |
| "biometrics": "Biometría", | |
| "bio_desc": "Monitorea ritmo cardíaco, patrones de respiración y niveles de estrés para entender tus respuestas fisiológicas." | |
| // Add more Spanish translations as needed | |
| } | |
| }, | |
| fr: { | |
| translation: { | |
| "home": "Accueil", | |
| "features": "Fonctionnalités", | |
| "pricing": "Tarifs", | |
| "about": "À propos", | |
| "currency": "Devise", | |
| "events": "Événements", | |
| "results": "Résultats", | |
| "login": "Connexion", | |
| "title": "Amplify - Performance mentale pour les champions", | |
| "hero_title": "AMPLIFIEZ VOTRE ESPRIT", | |
| "hero_subtitle": "Formation mentale en VR et AR pour les athlètes et les artistes.", | |
| "get_started": "Commencer", | |
| "watch_demo": "Voir la démo", | |
| "train_your_mind": "ENTRAÎNEZ VOTRE ESPRIT", | |
| "vr_scenarios": "Scénarios VR", | |
| "vr_desc": "La réalité virtuelle immersive vous place dans des situations de haute pression avant le grand moment.", | |
| "ar_training": "Formation AR", | |
| "ar_desc": "Les superpositions de réalité augmentée fournissent des commentaires en temps réel sur la posture, la respiration et le mouvement.", | |
| "biometrics": "Biométrie", | |
| "bio_desc": "Suivez la fréquence cardiaque, les schémas respiratoires et les niveaux de stress pour comprendre vos réponses physiologiques." | |
| // Add more French translations as needed | |
| } | |
| }, | |
| de: { | |
| translation: { | |
| "home": "Startseite", | |
| "features": "Funktionen", | |
| "pricing": "Preise", | |
| "about": "Über uns", | |
| "currency": "Währung", | |
| "events": "Veranstaltungen", | |
| "results": "Ergebnisse", | |
| "login": "Anmelden", | |
| "title": "Amplify - Mentale Leistung für Champions", | |
| "hero_title": "VERSTÄRKEN SIE IHREN GEIST", | |
| "hero_subtitle": "VR- und AR-Mentaltraining für Sportler und Künstler.", | |
| "get_started": "Loslegen", | |
| "watch_demo": "Demo ansehen", | |
| "train_your_mind": "TRAINIEREN SIE IHREN GEIST", | |
| "vr_scenarios": "VR-Szenarien", | |
| "vr_desc": "Immersives Virtual Reality versetzt Sie in Hochdrucksituationen vor dem großen Moment.", | |
| "ar_training": "AR-Training", | |
| "ar_desc": "Augmented-Realität-Overlays liefern Echtzeit-Feedback zu Haltung, Atmung und Bewegung.", | |
| "biometrics": "Biometrie", | |
| "bio_desc": "Verfolgen Sie Herzfrequenz, Atemmuster und Stresslevel, um Ihre physiologischen Reaktionen zu verstehen." | |
| // Add more German translations as needed | |
| } | |
| } | |
| } | |
| }, function(err, t) { | |
| // Initial translations loaded | |
| updateContent(); | |
| }); | |
| // Language switcher | |
| const languageButton = document.getElementById('language-button'); | |
| const languageDropdown = document.getElementById('language-dropdown'); | |
| languageButton.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| languageDropdown.classList.toggle('hidden'); | |
| }); | |
| document.querySelectorAll('.language-switch').forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const lang = e.target.getAttribute('data-lang'); | |
| i18next.changeLanguage(lang, () => { | |
| document.getElementById('current-language').textContent = lang.toUpperCase(); | |
| updateContent(); | |
| languageDropdown.classList.add('hidden'); | |
| }); | |
| }); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!languageButton.contains(e.target) && !languageDropdown.contains(e.target)) { | |
| languageDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Update page content with translations | |
| function updateContent() { | |
| // Update navigation items | |
| document.querySelectorAll('nav a[href="index.html"]').forEach(el => { | |
| el.textContent = i18next.t('home'); | |
| }); | |
| document.querySelectorAll('nav a[href="index.html#features"]').forEach(el => { | |
| el.textContent = i18next.t('features'); | |
| }); | |
| document.querySelectorAll('nav a[href="index.html#pricing"]').forEach(el => { | |
| el.textContent = i18next.t('pricing'); | |
| }); | |
| document.querySelectorAll('nav a[href="about.html"]').forEach(el => { | |
| el.textContent = i18next.t('about'); | |
| }); | |
| document.querySelectorAll('nav a[href="currency.html"]').forEach(el => { | |
| el.textContent = i18next.t('currency'); | |
| }); | |
| document.querySelectorAll('nav a[href="events.html"]').forEach(el => { | |
| el.textContent = i18next.t('events'); | |
| }); | |
| document.querySelectorAll('nav a[href="results.html"]').forEach(el => { | |
| el.textContent = i18next.t('results'); | |
| }); | |
| document.querySelectorAll('nav a[href="login.html"]').forEach(el => { | |
| el.textContent = i18next.t('login'); | |
| }); | |
| // Update hero section | |
| document.querySelector('h1 span.text-yellow-500').textContent = i18next.t('hero_title'); | |
| document.querySelector('section.hero-gradient p').textContent = i18next.t('hero_subtitle'); | |
| document.querySelector('section.hero-gradient button:nth-of-type(1)').textContent = i18next.t('get_started'); | |
| document.querySelector('section.hero-gradient button:nth-of-type(2)').textContent = i18next.t('watch_demo'); | |
| // Update features section | |
| document.querySelector('section#features h2').textContent = i18next.t('train_your_mind'); | |
| document.querySelectorAll('section#features h3')[0].textContent = i18next.t('vr_scenarios'); | |
| document.querySelectorAll('section#features p')[2].textContent = i18next.t('vr_desc'); | |
| document.querySelectorAll('section#features h3')[1].textContent = i18next.t('ar_training'); | |
| document.querySelectorAll('section#features p')[3].textContent = i18next.t('ar_desc'); | |
| document.querySelectorAll('section#features h3')[2].textContent = i18next.t('biometrics'); | |
| document.querySelectorAll('section#features p')[4].textContent = i18next.t('bio_desc'); | |
| // Update document title | |
| document.title = i18next.t('title'); | |
| // Re-render feather icons after text changes | |
| feather.replace(); | |
| } | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const mobileMenuClose = document.getElementById('mobile-menu-close'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| feather.replace(); | |
| }); | |
| mobileMenuClose.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| // Performance Dashboard Animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const metrics = ['confidence-level', 'stress-level', 'focus-level']; | |
| const performanceBar = document.getElementById('performance-bar'); | |
| function updateMetrics() { | |
| const realisticValues = [ | |
| { confidence: 87, stress: 42, focus: 93, width: 72 }, | |
| { confidence: 78, stress: 38, focus: 88, width: 68 }, | |
| { confidence: 92, stress: 29, focus: 95, width: 82 }, | |
| { confidence: 84, stress: 45, focus: 90, width: 76 }, | |
| { confidence: 89, stress: 33, focus: 91, width: 79 } | |
| ]; | |
| const currentValues = realisticValues[Math.floor(Math.random() * realisticValues.length)]; | |
| document.getElementById('confidence-level').textContent = currentValues.confidence + '%'; | |
| document.getElementById('stress-level').textContent = currentValues.stress + '%'; | |
| document.getElementById('focus-level').textContent = currentValues.focus + '%'; | |
| performanceBar.style.width = `${currentValues.width}%`; | |
| performanceBar.style.background = `linear-gradient(to right, | |
| ${currentValues.width < 30 ? '#ef4444' : currentValues.width < 70 ? '#f59e0b' : '#10b981'}, | |
| ${currentValues.width < 30 ? '#f59e0b' : currentValues.width < 70 ? '#10b981' : '#3b82f6'})`; | |
| } | |
| // Update every 5 seconds | |
| updateMetrics(); | |
| setInterval(updateMetrics, 5000); | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xb8860b, | |
| backgroundColor: 0x0, | |
| size: 0.8 | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |