Spaces:
Running
Running
create me a website for a company named "Amplify" its a mental health app/website designed for athletes or anyone that wants to build confidence before a big event. Make sure to include currency exchange language translator and also events calender option in the top right corner under "options". Also make sure to include the about us "mplify, 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. 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, and VR and AR experiences, we give our users the tools they need to strengthen focus, build confidence, and master the art of mental preparation. We at Amplify don’t just prepare you for big moments- we help you create them" Include the description of the product as being a vr headset that brings the "nervous scenarios" to life so they can be prepared and that there is Augmented Reality for hands on learning. Make it interactive and make it playful and attractive to customers make the color scheme black, gold, and red. Include subscriptions- free will have vr and ar but only 3 scenarios per month, basic will have 5 scenarios per month- and premium will have unlimited acces and 101 help from proffesionals 24/7.
Browse files- README.md +7 -4
- index.html +483 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji: 🐢
|
| 4 |
colorFrom: gray
|
| 5 |
-
colorTo:
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: MindMaster VR Arena 🧠🔥
|
|
|
|
| 3 |
colorFrom: gray
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,484 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Amplify - Mental Performance for Champions</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
|
| 13 |
+
.hero-gradient {
|
| 14 |
+
background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%);
|
| 15 |
+
}
|
| 16 |
+
.pulse-animation {
|
| 17 |
+
animation: pulse 2s infinite;
|
| 18 |
+
}
|
| 19 |
+
@keyframes pulse {
|
| 20 |
+
0% { transform: scale(1); }
|
| 21 |
+
50% { transform: scale(1.05); }
|
| 22 |
+
100% { transform: scale(1); }
|
| 23 |
+
}
|
| 24 |
+
.vr-headset {
|
| 25 |
+
transform-style: preserve-3d;
|
| 26 |
+
transform: perspective(1000px) rotateY(-15deg);
|
| 27 |
+
transition: all 0.3s ease;
|
| 28 |
+
}
|
| 29 |
+
.vr-headset:hover {
|
| 30 |
+
transform: perspective(1000px) rotateY(0deg);
|
| 31 |
+
}
|
| 32 |
+
.glow-text {
|
| 33 |
+
text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
|
| 34 |
+
}
|
| 35 |
+
</style>
|
| 36 |
+
</head>
|
| 37 |
+
<body class="bg-black text-white font-['Montserrat']">
|
| 38 |
+
<!-- Vanta.js Background -->
|
| 39 |
+
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
|
| 40 |
+
|
| 41 |
+
<!-- Navigation -->
|
| 42 |
+
<nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
|
| 43 |
+
<div class="container mx-auto px-6 py-4">
|
| 44 |
+
<div class="flex justify-between items-center">
|
| 45 |
+
<div class="flex items-center space-x-2">
|
| 46 |
+
<i data-feather="zap" class="text-yellow-500"></i>
|
| 47 |
+
<span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
|
| 48 |
+
</div>
|
| 49 |
+
|
| 50 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 51 |
+
<a href="#" class="text-white hover:text-yellow-500 transition">Home</a>
|
| 52 |
+
<a href="#features" class="text-white hover:text-yellow-500 transition">Features</a>
|
| 53 |
+
<a href="#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
|
| 54 |
+
<a href="#about" class="text-white hover:text-yellow-500 transition">About</a>
|
| 55 |
+
</div>
|
| 56 |
+
|
| 57 |
+
<div class="flex items-center space-x-4">
|
| 58 |
+
<div class="relative group">
|
| 59 |
+
<button class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
|
| 60 |
+
<i data-feather="globe" class="text-yellow-500"></i>
|
| 61 |
+
<span class="text-white">EN</span>
|
| 62 |
+
</button>
|
| 63 |
+
<div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
|
| 64 |
+
<a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">English</a>
|
| 65 |
+
<a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Español</a>
|
| 66 |
+
<a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Français</a>
|
| 67 |
+
<a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Deutsch</a>
|
| 68 |
+
</div>
|
| 69 |
+
</div>
|
| 70 |
+
|
| 71 |
+
<button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
|
| 72 |
+
<i data-feather="user" class="mr-2"></i> Login
|
| 73 |
+
</button>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</nav>
|
| 78 |
+
|
| 79 |
+
<!-- Hero Section -->
|
| 80 |
+
<section class="relative z-10 hero-gradient min-h-screen flex items-center">
|
| 81 |
+
<div class="container mx-auto px-6 py-20 md:py-32">
|
| 82 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 83 |
+
<div class="md:w-1/2 mb-12 md:mb-0">
|
| 84 |
+
<h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
|
| 85 |
+
<span class="text-yellow-500 glow-text">AMPLIFY</span> YOUR MIND
|
| 86 |
+
</h1>
|
| 87 |
+
<p class="text-xl md:text-2xl mb-8 text-gray-300">
|
| 88 |
+
VR & AR mental training for athletes and performers.
|
| 89 |
+
<span class="text-yellow-500 font-bold">Conquer nerves.</span>
|
| 90 |
+
<span class="text-red-500 font-bold">Build confidence.</span>
|
| 91 |
+
<span class="text-yellow-500 font-bold">Own the moment.</span>
|
| 92 |
+
</p>
|
| 93 |
+
<div class="flex space-x-4">
|
| 94 |
+
<button class="bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-4 rounded-lg text-lg transition transform hover:scale-105">
|
| 95 |
+
Get Started
|
| 96 |
+
</button>
|
| 97 |
+
<button 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">
|
| 98 |
+
Watch Demo <i data-feather="play" class="inline ml-2"></i>
|
| 99 |
+
</button>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
<div class="md:w-1/2 flex justify-center">
|
| 103 |
+
<div class="vr-headset pulse-animation">
|
| 104 |
+
<img src="http://static.photos/technology/640x360/42" alt="VR Headset" class="rounded-lg shadow-2xl border-4 border-yellow-500">
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
|
| 111 |
+
<!-- Features Section -->
|
| 112 |
+
<section id="features" class="relative z-10 py-20 bg-black bg-opacity-90">
|
| 113 |
+
<div class="container mx-auto px-6">
|
| 114 |
+
<h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
|
| 115 |
+
<span class="text-yellow-500">TRAIN</span> <span class="text-red-500">YOUR</span> <span class="text-white">MIND</span>
|
| 116 |
+
</h2>
|
| 117 |
+
|
| 118 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
| 119 |
+
<!-- Feature 1 -->
|
| 120 |
+
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition">
|
| 121 |
+
<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 122 |
+
<i data-feather="eye" class="text-black text-2xl"></i>
|
| 123 |
+
</div>
|
| 124 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">VR Scenarios</h3>
|
| 125 |
+
<p class="text-gray-300 text-center">
|
| 126 |
+
Immersive virtual reality puts you in high-pressure situations before the big moment. Practice speeches, game-winning shots, or important interviews.
|
| 127 |
+
</p>
|
| 128 |
+
</div>
|
| 129 |
+
|
| 130 |
+
<!-- Feature 2 -->
|
| 131 |
+
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-red-500 transform hover:scale-105 transition">
|
| 132 |
+
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 133 |
+
<i data-feather="layers" class="text-black text-2xl"></i>
|
| 134 |
+
</div>
|
| 135 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-red-500">AR Training</h3>
|
| 136 |
+
<p class="text-gray-300 text-center">
|
| 137 |
+
Augmented reality overlays provide real-time feedback on posture, breathing, and movement during your practice sessions.
|
| 138 |
+
</p>
|
| 139 |
+
</div>
|
| 140 |
+
|
| 141 |
+
<!-- Feature 3 -->
|
| 142 |
+
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition">
|
| 143 |
+
<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 144 |
+
<i data-feather="activity" class="text-black text-2xl"></i>
|
| 145 |
+
</div>
|
| 146 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Biometrics</h3>
|
| 147 |
+
<p class="text-gray-300 text-center">
|
| 148 |
+
Track heart rate, breathing patterns, and stress levels to understand and control your physiological responses to pressure.
|
| 149 |
+
</p>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
|
| 153 |
+
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 154 |
+
<div class="bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800">
|
| 155 |
+
<h3 class="text-2xl font-bold mb-4 text-yellow-500">How It Works</h3>
|
| 156 |
+
<div class="space-y-4">
|
| 157 |
+
<div class="flex items-start">
|
| 158 |
+
<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">
|
| 159 |
+
<span class="font-bold">1</span>
|
| 160 |
+
</div>
|
| 161 |
+
<div>
|
| 162 |
+
<h4 class="font-bold text-white">Select Your Scenario</h4>
|
| 163 |
+
<p class="text-gray-400">Choose from our library of high-pressure situations or create a custom scenario.</p>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="flex items-start">
|
| 167 |
+
<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">
|
| 168 |
+
<span class="font-bold">2</span>
|
| 169 |
+
</div>
|
| 170 |
+
<div>
|
| 171 |
+
<h4 class="font-bold text-white">Practice in VR/AR</h4>
|
| 172 |
+
<p class="text-gray-400">Experience the situation in a safe, controlled environment with our technology.</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
<div class="flex items-start">
|
| 176 |
+
<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">
|
| 177 |
+
<span class="font-bold">3</span>
|
| 178 |
+
</div>
|
| 179 |
+
<div>
|
| 180 |
+
<h4 class="font-bold text-white">Analyze Performance</h4>
|
| 181 |
+
<p class="text-gray-400">Review biometric data and get personalized feedback on how to improve.</p>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
<div class="flex items-start">
|
| 185 |
+
<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">
|
| 186 |
+
<span class="font-bold">4</span>
|
| 187 |
+
</div>
|
| 188 |
+
<div>
|
| 189 |
+
<h4 class="font-bold text-white">Repeat & Improve</h4>
|
| 190 |
+
<p class="text-gray-400">Build confidence through repeated exposure and measurable progress.</p>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
|
| 196 |
+
<div class="bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800">
|
| 197 |
+
<h3 class="text-2xl font-bold mb-4 text-red-500">Testimonial</h3>
|
| 198 |
+
<div class="flex items-center mb-6">
|
| 199 |
+
<img src="http://static.photos/sport/200x200/5" alt="User" class="w-16 h-16 rounded-full border-2 border-yellow-500 mr-4">
|
| 200 |
+
<div>
|
| 201 |
+
<h4 class="font-bold text-white">Sarah Johnson</h4>
|
| 202 |
+
<p class="text-gray-400">Professional Tennis Player</p>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
<blockquote class="text-gray-300 italic mb-6">
|
| 206 |
+
"Using Amplify before the US Open changed everything for me. The VR pressure scenarios helped me stay calm during match point situations that I had already visualized and practiced dozens of times."
|
| 207 |
+
</blockquote>
|
| 208 |
+
<div class="flex space-x-1">
|
| 209 |
+
<i data-feather="star" class="text-yellow-500"></i>
|
| 210 |
+
<i data-feather="star" class="text-yellow-500"></i>
|
| 211 |
+
<i data-feather="star" class="text-yellow-500"></i>
|
| 212 |
+
<i data-feather="star" class="text-yellow-500"></i>
|
| 213 |
+
<i data-feather="star" class="text-yellow-500"></i>
|
| 214 |
+
</div>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</section>
|
| 219 |
+
|
| 220 |
+
<!-- Pricing Section -->
|
| 221 |
+
<section id="pricing" class="relative z-10 py-20 bg-gradient-to-b from-black to-gray-900">
|
| 222 |
+
<div class="container mx-auto px-6">
|
| 223 |
+
<h2 class="text-4xl font-bold text-center mb-6 font-['Bebas+Neue'] tracking-wider">
|
| 224 |
+
<span class="text-yellow-500">CHOOSE</span> <span class="text-white">YOUR</span> <span class="text-red-500">PLAN</span>
|
| 225 |
+
</h2>
|
| 226 |
+
<p class="text-xl text-center text-gray-400 mb-16 max-w-2xl mx-auto">
|
| 227 |
+
Select the level of access that fits your mental training needs. All plans include our VR and AR technology.
|
| 228 |
+
</p>
|
| 229 |
+
|
| 230 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 231 |
+
<!-- Free Tier -->
|
| 232 |
+
<div class="bg-gradient-to-b from-gray-900 to-black p-8 rounded-xl border border-gray-700 transform hover:scale-105 transition">
|
| 233 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-white">Starter</h3>
|
| 234 |
+
<div class="text-center mb-6">
|
| 235 |
+
<span class="text-4xl font-bold text-yellow-500">$0</span>
|
| 236 |
+
<span class="text-gray-400">/month</span>
|
| 237 |
+
</div>
|
| 238 |
+
<ul class="space-y-3 mb-8">
|
| 239 |
+
<li class="flex items-center">
|
| 240 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 241 |
+
<span>3 VR/AR scenarios per month</span>
|
| 242 |
+
</li>
|
| 243 |
+
<li class="flex items-center">
|
| 244 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 245 |
+
<span>Basic biometric tracking</span>
|
| 246 |
+
</li>
|
| 247 |
+
<li class="flex items-center">
|
| 248 |
+
<i data-feather="x" class="text-gray-500 mr-2"></i>
|
| 249 |
+
<span class="text-gray-500">No professional support</span>
|
| 250 |
+
</li>
|
| 251 |
+
<li class="flex items-center">
|
| 252 |
+
<i data-feather="x" class="text-gray-500 mr-2"></i>
|
| 253 |
+
<span class="text-gray-500">Limited scenario library</span>
|
| 254 |
+
</li>
|
| 255 |
+
</ul>
|
| 256 |
+
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg transition">
|
| 257 |
+
Get Started
|
| 258 |
+
</button>
|
| 259 |
+
</div>
|
| 260 |
+
|
| 261 |
+
<!-- Basic Tier -->
|
| 262 |
+
<div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-xl border-2 border-yellow-500 transform hover:scale-105 transition relative">
|
| 263 |
+
<div class="absolute top-0 right-0 bg-yellow-500 text-black px-4 py-1 rounded-bl-lg font-bold">
|
| 264 |
+
POPULAR
|
| 265 |
+
</div>
|
| 266 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Pro</h3>
|
| 267 |
+
<div class="text-center mb-6">
|
| 268 |
+
<span class="text-4xl font-bold text-yellow-500">$29</span>
|
| 269 |
+
<span class="text-gray-400">/month</span>
|
| 270 |
+
</div>
|
| 271 |
+
<ul class="space-y-3 mb-8">
|
| 272 |
+
<li class="flex items-center">
|
| 273 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 274 |
+
<span>5 VR/AR scenarios per month</span>
|
| 275 |
+
</li>
|
| 276 |
+
<li class="flex items-center">
|
| 277 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 278 |
+
<span>Advanced biometric tracking</span>
|
| 279 |
+
</li>
|
| 280 |
+
<li class="flex items-center">
|
| 281 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 282 |
+
<span>Email support</span>
|
| 283 |
+
</li>
|
| 284 |
+
<li class="flex items-center">
|
| 285 |
+
<i data-feather="x" class="text-gray-500 mr-2"></i>
|
| 286 |
+
<span class="text-gray-500">Limited professional access</span>
|
| 287 |
+
</li>
|
| 288 |
+
</ul>
|
| 289 |
+
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition">
|
| 290 |
+
Get Started
|
| 291 |
+
</button>
|
| 292 |
+
</div>
|
| 293 |
+
|
| 294 |
+
<!-- Premium Tier -->
|
| 295 |
+
<div class="bg-gradient-to-b from-gray-900 to-black p-8 rounded-xl border border-red-500 transform hover:scale-105 transition">
|
| 296 |
+
<h3 class="text-2xl font-bold text-center mb-4 text-red-500">Elite</h3>
|
| 297 |
+
<div class="text-center mb-6">
|
| 298 |
+
<span class="text-4xl font-bold text-red-500">$99</span>
|
| 299 |
+
<span class="text-gray-400">/month</span>
|
| 300 |
+
</div>
|
| 301 |
+
<ul class="space-y-3 mb-8">
|
| 302 |
+
<li class="flex items-center">
|
| 303 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 304 |
+
<span>Unlimited VR/AR scenarios</span>
|
| 305 |
+
</li>
|
| 306 |
+
<li class="flex items-center">
|
| 307 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 308 |
+
<span>Full biometric suite with AI analysis</span>
|
| 309 |
+
</li>
|
| 310 |
+
<li class="flex items-center">
|
| 311 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 312 |
+
<span>24/7 professional support</span>
|
| 313 |
+
</li>
|
| 314 |
+
<li class="flex items-center">
|
| 315 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 316 |
+
<span>Full scenario library + custom builds</span>
|
| 317 |
+
</li>
|
| 318 |
+
</ul>
|
| 319 |
+
<button class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-lg transition">
|
| 320 |
+
Get Started
|
| 321 |
+
</button>
|
| 322 |
+
</div>
|
| 323 |
+
</div>
|
| 324 |
+
</div>
|
| 325 |
+
</section>
|
| 326 |
+
|
| 327 |
+
<!-- About Section -->
|
| 328 |
+
<section id="about" class="relative z-10 py-20 bg-black bg-opacity-90">
|
| 329 |
+
<div class="container mx-auto px-6">
|
| 330 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 331 |
+
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
|
| 332 |
+
<h2 class="text-4xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider">
|
| 333 |
+
<span class="text-yellow-500">ABOUT</span> <span class="text-white">AMPLIFY</span>
|
| 334 |
+
</h2>
|
| 335 |
+
<p class="text-lg mb-6 text-gray-300">
|
| 336 |
+
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.
|
| 337 |
+
</p>
|
| 338 |
+
<p class="text-lg mb-6 text-gray-300">
|
| 339 |
+
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, and VR and AR experiences, we give our users the tools they need to strengthen focus, build confidence, and master the art of mental preparation.
|
| 340 |
+
</p>
|
| 341 |
+
<p class="text-lg mb-8 text-gray-300">
|
| 342 |
+
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.
|
| 343 |
+
</p>
|
| 344 |
+
<div class="flex space-x-4">
|
| 345 |
+
<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">
|
| 346 |
+
<i data-feather="users" class="mr-2"></i> Meet the Team
|
| 347 |
+
</button>
|
| 348 |
+
<button class="border-2 border-red-500 hover:bg-red-500 hover:text-white text-white font-bold px-6 py-3 rounded-lg transition flex items-center">
|
| 349 |
+
<i data-feather="book" class="mr-2"></i> Our Story
|
| 350 |
+
</button>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
<div class="md:w-1/2">
|
| 354 |
+
<div class="grid grid-cols-2 gap-4">
|
| 355 |
+
<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">
|
| 356 |
+
<i data-feather="target" class="text-yellow-500 text-4xl mb-4"></i>
|
| 357 |
+
<h3 class="text-xl font-bold text-center text-white">Our Mission</h3>
|
| 358 |
+
</div>
|
| 359 |
+
<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">
|
| 360 |
+
<i data-feather="eye" class="text-red-500 text-4xl mb-4"></i>
|
| 361 |
+
<h3 class="text-xl font-bold text-center text-white">Our Vision</h3>
|
| 362 |
+
</div>
|
| 363 |
+
<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">
|
| 364 |
+
<i data-feather="award" class="text-yellow-500 text-4xl mb-4"></i>
|
| 365 |
+
<h3 class="text-xl font-bold text-center text-white">Our Values</h3>
|
| 366 |
+
</div>
|
| 367 |
+
<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">
|
| 368 |
+
<i data-feather="trending-up" class="text-red-500 text-4xl mb-4"></i>
|
| 369 |
+
<h3 class="text-xl font-bold text-center text-white">Our Growth</h3>
|
| 370 |
+
</div>
|
| 371 |
+
</div>
|
| 372 |
+
</div>
|
| 373 |
+
</div>
|
| 374 |
+
</div>
|
| 375 |
+
</section>
|
| 376 |
+
|
| 377 |
+
<!-- CTA Section -->
|
| 378 |
+
<section class="relative z-10 py-20 bg-gradient-to-r from-black via-gray-900 to-black">
|
| 379 |
+
<div class="container mx-auto px-6 text-center">
|
| 380 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider">
|
| 381 |
+
<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>
|
| 382 |
+
</h2>
|
| 383 |
+
<p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
|
| 384 |
+
Join thousands of athletes, performers, and professionals who are mastering their minds with our technology.
|
| 385 |
+
</p>
|
| 386 |
+
<button class="bg-gradient-to-r from-yellow-500 to-red-500 hover:from-yellow-600 hover:to-red-600 text-black font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg">
|
| 387 |
+
Start Your Free Trial
|
| 388 |
+
</button>
|
| 389 |
+
</div>
|
| 390 |
+
</section>
|
| 391 |
+
|
| 392 |
+
<!-- Footer -->
|
| 393 |
+
<footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
|
| 394 |
+
<div class="container mx-auto px-6">
|
| 395 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 396 |
+
<div>
|
| 397 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 398 |
+
<i data-feather="zap" class="text-yellow-500"></i>
|
| 399 |
+
<span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
|
| 400 |
+
</div>
|
| 401 |
+
<p class="text-gray-400 mb-4">
|
| 402 |
+
Mental performance technology for champions in sports, business, and life.
|
| 403 |
+
</p>
|
| 404 |
+
<div class="flex space-x-4">
|
| 405 |
+
<a href="#" class="text-gray-400 hover:text-yellow-500 transition">
|
| 406 |
+
<i data-feather="facebook"></i>
|
| 407 |
+
</a>
|
| 408 |
+
<a href="#" class="text-gray-400 hover:text-yellow-500 transition">
|
| 409 |
+
<i data-feather="twitter"></i>
|
| 410 |
+
</a>
|
| 411 |
+
<a href="#" class="text-gray-400 hover:text-yellow-500 transition">
|
| 412 |
+
<i data-feather="instagram"></i>
|
| 413 |
+
</a>
|
| 414 |
+
<a href="#" class="text-gray-400 hover:text-yellow-500 transition">
|
| 415 |
+
<i data-feather="linkedin"></i>
|
| 416 |
+
</a>
|
| 417 |
+
</div>
|
| 418 |
+
</div>
|
| 419 |
+
|
| 420 |
+
<div>
|
| 421 |
+
<h3 class="text-lg font-bold text-white mb-4">Products</h3>
|
| 422 |
+
<ul class="space-y-2">
|
| 423 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
|
| 424 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
|
| 425 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
|
| 426 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
|
| 427 |
+
</ul>
|
| 428 |
+
</div>
|
| 429 |
+
|
| 430 |
+
<div>
|
| 431 |
+
<h3 class="text-lg font-bold text-white mb-4">Company</h3>
|
| 432 |
+
<ul class="space-y-2">
|
| 433 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
|
| 434 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
|
| 435 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
|
| 436 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
|
| 437 |
+
</ul>
|
| 438 |
+
</div>
|
| 439 |
+
|
| 440 |
+
<div>
|
| 441 |
+
<h3 class="text-lg font-bold text-white mb-4">Resources</h3>
|
| 442 |
+
<ul class="space-y-2">
|
| 443 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
|
| 444 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li>
|
| 445 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
|
| 446 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Community</a></li>
|
| 447 |
+
</ul>
|
| 448 |
+
</div>
|
| 449 |
+
</div>
|
| 450 |
+
|
| 451 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 452 |
+
<p class="text-gray-500 mb-4 md:mb-0">
|
| 453 |
+
© 2023 Amplify Technologies. All rights reserved.
|
| 454 |
+
</p>
|
| 455 |
+
<div class="flex space-x-6">
|
| 456 |
+
<a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
|
| 457 |
+
<a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
|
| 458 |
+
<a href="#" class="text-gray-500 hover:text-yellow-500 transition">Cookies</a>
|
| 459 |
+
</div>
|
| 460 |
+
</div>
|
| 461 |
+
</div>
|
| 462 |
+
</footer>
|
| 463 |
+
|
| 464 |
+
<script>
|
| 465 |
+
// Initialize Vanta.js background
|
| 466 |
+
VANTA.GLOBE({
|
| 467 |
+
el: "#vanta-bg",
|
| 468 |
+
mouseControls: true,
|
| 469 |
+
touchControls: true,
|
| 470 |
+
gyroControls: false,
|
| 471 |
+
minHeight: 200.00,
|
| 472 |
+
minWidth: 200.00,
|
| 473 |
+
scale: 1.00,
|
| 474 |
+
scaleMobile: 1.00,
|
| 475 |
+
color: 0xb8860b,
|
| 476 |
+
backgroundColor: 0x0,
|
| 477 |
+
size: 0.8
|
| 478 |
+
});
|
| 479 |
+
|
| 480 |
+
// Feather icons
|
| 481 |
+
feather.replace();
|
| 482 |
+
</script>
|
| 483 |
+
</body>
|
| 484 |
</html>
|