Hugging Face's logo

Spaces:
Fazbeeer
/
mindmaster-vr-arena-clone
Running

App Files Community
Fazbeeer commited on
Commit
4a06cb2
·
verified ·
1 Parent(s): 105b700

for about copy this code

Browse files

<!DOCTYPE html>
<html lang="en">
<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Amplify</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%);
}
.glow-text {
text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}
.value-card {
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-5px);
}
</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>

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

<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="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
<a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</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">
<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>
</div>
</div>
</div>
</nav>

<!-- About Hero Section -->
<section class="relative z-10 hero-gradient py-32">
<div class="container mx-auto px-6 text-center">
<h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-8 tracking-wider">
<span class="text-yellow-500 glow-text">OUR STORY</span>
</h1>
<p class="text-xl md:text-2xl max-w-4xl mx-auto text-gray-300">
Empowering minds through innovative technology and performance psychology
</p>
</div>
</section>

<!-- About Content -->
<section 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 mb-20">
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
<img src="http://static.photos/education/640x360/42" alt="Amplify Team" class="rounded-lg border-2 border-yellow-500 shadow-xl">
</div>
<div class="md:w-1/2">
<h2 class="text-4xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
<span class="text-yellow-500">WHO</span> <span class="text-white">WE ARE</span>
</h2>
<p class="text-lg mb-6 text-gray-300">
Amplify is a platform for mental fitness that allows users to train their minds in the same way as they train their bodies. Our goal is to support users in maintaining resilience, focus, and confidence during stressful situations, such as a big presentation, a job interview, or the first day of a new position.
</p>
<p class="text-lg mb-6 text-gray-300">
Through immersive VR and AR experiences, Amplify places users in realistic situations to practice performance under pressure. While optional one-on-one sessions with trained coaches offer additional, individualized assistance, the integrated AI Coach offers immediate feedback and encouragement.
</p>
<p class="text-lg text-gray-300">
Amplify makes mental training available to everyone by fusing human interaction with modern technology. We think that confidence is something you can develop rather than something you are born with. Amplify gives you the ability to provide your best effort whenever and wherever you choose.
</p>
</div>
</div>

<!-- Core Values -->
<div class="py-16">
<h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
<span class="text-yellow-500">OUR</span> <span class="text-white">CORE</span> <span class="text-red-500">VALUES</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Value 1 -->
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 value-card 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="target" class="text-black text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Excellence</h3>
<p class="text-gray-300 text-center flex-grow">
We strive for excellence in everything we do, from our technology to our customer support.
</p>
</div>

<!-- Value 2 -->
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-red-500 value-card 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="heart" class="text-black text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4 text-red-500">Empathy</h3>
<p class="text-gray-300 text-center flex-grow">
We understand our users' challenges and design solutions that truly meet their needs.
</p>
</div>

<!-- Value 3 -->
<div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 value-card 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="zap" class="text-black text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Innovation</h3>
<p class="text-gray-300 text-center">
We constantly push boundaries to create cutting-edge mental performance solutions.
</p>
</div>
</div>
</div>

<!-- Meet the Team -->
<div class="py-16">
<h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
<span class="text-yellow-500">MEET</span> <span class="text-white">THE</span> <span class="text-red-500">TEAM</span>
</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Team Member 1 -->
<div class="group">
<div class="relative overflow-hidden rounded-lg border-2 border-yellow-500 mb-4 h-64">
<img src="http://static.photos/education/640x360/124" alt="Alex Johnson" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div class="absolute bottom-0 left-0 p-4">
<h3 class="text-xl font-bold text-white">Alex Johnson</h3>
<p class="text-yellow-500">CEO & Founder</p>
</div>
</div>
<p class="text-gray-300">
Former sports psychologist turned tech entrepreneur, Alex founded Amplify to bridge the gap between mental training and technology.
</p>
</div>

<!-- Team Member 2 -->
<div class="group">
<div class="relative overflow-hidden rounded-lg border-2 border-red-500 mb-4 h-64">
<img src="http://static.photos/education/640x360/125" alt="Sarah Chen" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div clas

Files changed (4) hide show
  1. about.html +372 -0
  2. currency.html +126 -629
  3. index.html +9 -148
  4. results.html +151 -406
about.html ADDED
@@ -0,0 +1,372 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Us - Amplify</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://www.360cities.net/lib/embed.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%);
16
+ }
17
+ .glow-text {
18
+ text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
19
+ }
20
+ .value-card {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .value-card:hover {
24
+ transform: translateY(-5px);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-black text-white font-['Montserrat']">
29
+ <!-- Vanta.js Background -->
30
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
31
+
32
+ <!-- Navigation -->
33
+ <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
34
+ <div class="container mx-auto px-6 py-4">
35
+ <div class="flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="zap" class="text-yellow-500"></i>
38
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
39
+ </div>
40
+
41
+ <div class="hidden md:flex items-center space-x-8">
42
+ <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
43
+ <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
44
+ <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
45
+ <a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</a>
46
+ <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
47
+ <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
48
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
49
+ </div>
50
+ <div class="flex items-center space-x-4">
51
+ <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">
52
+ <i data-feather="user" class="mr-2"></i> Login
53
+ </a>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- About Hero Section -->
60
+ <section class="relative z-10 hero-gradient py-32">
61
+ <div class="container mx-auto px-6 text-center">
62
+ <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-8 tracking-wider">
63
+ <span class="text-yellow-500 glow-text">OUR STORY</span>
64
+ </h1>
65
+ <p class="text-xl md:text-2xl max-w-4xl mx-auto text-gray-300">
66
+ Empowering minds through innovative technology and performance psychology
67
+ </p>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- About Content -->
72
+ <section class="relative z-10 py-20 bg-black bg-opacity-90">
73
+ <div class="container mx-auto px-6">
74
+ <div class="flex flex-col md:flex-row items-center mb-20">
75
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
76
+ <img src="http://static.photos/education/640x360/42" alt="Amplify Team" class="rounded-lg border-2 border-yellow-500 shadow-xl">
77
+ </div>
78
+ <div class="md:w-1/2">
79
+ <h2 class="text-4xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
80
+ <span class="text-yellow-500">WHO</span> <span class="text-white">WE ARE</span>
81
+ </h2>
82
+ <p class="text-lg mb-6 text-gray-300">
83
+ Amplify is a platform for mental fitness that allows users to train their minds in the same way as they train their bodies. Our goal is to support users in maintaining resilience, focus, and confidence during stressful situations, such as a big presentation, a job interview, or the first day of a new position.
84
+ </p>
85
+ <p class="text-lg mb-6 text-gray-300">
86
+ Through immersive VR and AR experiences, Amplify places users in realistic situations to practice performance under pressure. While optional one-on-one sessions with trained coaches offer additional, individualized assistance, the integrated AI Coach offers immediate feedback and encouragement.
87
+ </p>
88
+ <p class="text-lg text-gray-300">
89
+ Amplify makes mental training available to everyone by fusing human interaction with modern technology. We think that confidence is something you can develop rather than something you are born with. Amplify gives you the ability to provide your best effort whenever and wherever you choose.
90
+ </p>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Core Values -->
95
+ <div class="py-16">
96
+ <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
97
+ <span class="text-yellow-500">OUR</span> <span class="text-white">CORE</span> <span class="text-red-500">VALUES</span>
98
+ </h2>
99
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
100
+ <!-- Value 1 -->
101
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 value-card h-full flex flex-col">
102
+ <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto">
103
+ <i data-feather="target" class="text-black text-2xl"></i>
104
+ </div>
105
+ <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Excellence</h3>
106
+ <p class="text-gray-300 text-center flex-grow">
107
+ We strive for excellence in everything we do, from our technology to our customer support.
108
+ </p>
109
+ </div>
110
+
111
+ <!-- Value 2 -->
112
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-red-500 value-card h-full flex flex-col">
113
+ <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-6 mx-auto">
114
+ <i data-feather="heart" class="text-black text-2xl"></i>
115
+ </div>
116
+ <h3 class="text-2xl font-bold text-center mb-4 text-red-500">Empathy</h3>
117
+ <p class="text-gray-300 text-center flex-grow">
118
+ We understand our users' challenges and design solutions that truly meet their needs.
119
+ </p>
120
+ </div>
121
+
122
+ <!-- Value 3 -->
123
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 value-card h-full flex flex-col">
124
+ <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto">
125
+ <i data-feather="zap" class="text-black text-2xl"></i>
126
+ </div>
127
+ <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Innovation</h3>
128
+ <p class="text-gray-300 text-center">
129
+ We constantly push boundaries to create cutting-edge mental performance solutions.
130
+ </p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Meet the Team -->
136
+ <div class="py-16">
137
+ <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
138
+ <span class="text-yellow-500">MEET</span> <span class="text-white">THE</span> <span class="text-red-500">TEAM</span>
139
+ </h2>
140
+
141
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
142
+ <!-- Team Member 1 -->
143
+ <div class="group">
144
+ <div class="relative overflow-hidden rounded-lg border-2 border-yellow-500 mb-4 h-64">
145
+ <img src="http://static.photos/education/640x360/124" alt="Alex Johnson" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
146
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
147
+ <div class="absolute bottom-0 left-0 p-4">
148
+ <h3 class="text-xl font-bold text-white">Alex Johnson</h3>
149
+ <p class="text-yellow-500">CEO & Founder</p>
150
+ </div>
151
+ </div>
152
+ <p class="text-gray-300">
153
+ Former sports psychologist turned tech entrepreneur, Alex founded Amplify to bridge the gap between mental training and technology.
154
+ </p>
155
+ </div>
156
+
157
+ <!-- Team Member 2 -->
158
+ <div class="group">
159
+ <div class="relative overflow-hidden rounded-lg border-2 border-red-500 mb-4 h-64">
160
+ <img src="http://static.photos/education/640x360/125" alt="Sarah Chen" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
161
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
162
+ <div class="absolute bottom-0 left-0 p-4">
163
+ <h3 class="text-xl font-bold text-white">Sarah Chen</h3>
164
+ <p class="text-red-500">CTO</p>
165
+ </div>
166
+ </div>
167
+ <p class="text-gray-300">
168
+ VR/AR expert with a passion for human-computer interaction, Sarah leads our technical innovation efforts.
169
+ </p>
170
+ </div>
171
+
172
+ <!-- Team Member 3 -->
173
+ <div class="group">
174
+ <div class="relative overflow-hidden rounded-lg border-2 border-yellow-500 mb-4 h-64">
175
+ <img src="http://static.photos/education/640x360/126" alt="Marcus Wright" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
176
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
177
+ <div class="absolute bottom-0 left-0 p-4">
178
+ <h3 class="text-xl font-bold text-white">Marcus Wright</h3>
179
+ <p class="text-yellow-500">Head of Coaching</p>
180
+ </div>
181
+ </div>
182
+ <p class="text-gray-300">
183
+ Former professional athlete who brings real-world performance experience to our training programs.
184
+ </p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Pricing Section -->
192
+ <section id="pricing" class="relative z-10 py-20 bg-gradient-to-b from-black to-gray-900">
193
+ <div class="container mx-auto px-6">
194
+ <h2 class="text-4xl font-bold text-center mb-6 font-['Bebas+Neue'] tracking-wider">
195
+ <span class="text-yellow-500">CHOOSE</span> <span class="text-white">YOUR</span> <span class="text-red-500">PLAN</span>
196
+ </h2>
197
+ <p class="text-xl text-center text-gray-400 mb-16 max-w-2xl mx-auto">
198
+ Select the level of access that fits your mental training needs. All plans include our VR and AR technology.
199
+ </p>
200
+ <div class="flex justify-center">
201
+ <div class="grid grid-cols-1 gap-8 max-w-4xl">
202
+ <!-- Free Trial -->
203
+ <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">
204
+ <h3 class="text-2xl font-bold text-center mb-4 text-green-500">7-Day Free Trial</h3>
205
+ <div class="text-center mb-6 hovered-element">
206
+ <span class="text-4xl font-bold text-green-500">$0</span>
207
+ <span class="text-gray-400">for 7 days</span>
208
+ </div>
209
+ <ul class="space-y-3 mb-8">
210
+ <li class="flex items-center">
211
+ <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>
212
+ <span>Full access to all features</span>
213
+ </li>
214
+ <li class="flex items-center">
215
+ <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>
216
+ <span>Unlimited VR/AR scenarios</span>
217
+ </li>
218
+ <li class="flex items-center">
219
+ <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>
220
+ <span>Basic biometric analysis</span>
221
+ </li>
222
+ <li class="flex items-center">
223
+ <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>
224
+ <span class="text-gray-400">No custom scenarios</span>
225
+ </li>
226
+ <li class="flex items-center">
227
+ <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>
228
+ <span class="text-gray-400">No coaching sessions</span>
229
+ </li>
230
+ </ul>
231
+ <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">
232
+ <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
233
+ </a>
234
+ </div>
235
+ <!-- Core Plan -->
236
+ <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">
237
+ <h3 class="text-2xl font-bold text-center mb-4 text-yellow-500">Amplify Core</h3>
238
+ <div class="text-center mb-6">
239
+ <span class="text-4xl font-bold text-yellow-500">$60</span>
240
+ <span class="text-gray-400">/month</span>
241
+ <div class="mt-2 text-yellow-400">
242
+ <span class="font-bold">$700/year</span> - Save $80 with annual billing
243
+ </div>
244
+ </div>
245
+ <ul class="space-y-3 mb-8">
246
+ <li class="flex items-center">
247
+ <i data-feather="check" class="text-green-500 mr-2"></i>
248
+ <span>Immersive VR/AR training environments</span>
249
+ </li>
250
+ <li class="flex items-center">
251
+ <i data-feather="check" class="text-green-500 mr-2"></i>
252
+ <span>Personalized AI feedback</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i data-feather="check" class="text-green-500 mr-2"></i>
256
+ <span>Progress tracking</span>
257
+ </li>
258
+ </ul>
259
+ <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">
260
+ <i data-feather="zap" class="mr-2"></i> Buy Now
261
+ </a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Join Us CTA -->
268
+ <section class="relative z-10 py-20 bg-gradient-to-r from-black via-gray-900 to-black">
269
+ <div class="container mx-auto px-6 text-center">
270
+ <h2 class="text-4xl md:text-5xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider">
271
+ <span class="text-yellow-500">JOIN</span> <span class="text-white">OUR</span> <span class="text-red-500">MISSION</span>
272
+ </h2>
273
+ <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
274
+ We're always looking for passionate individuals to join our team and help transform mental performance.
275
+ </p>
276
+ <button class="bg-gradient-to-r from-yellow-500 to-[#9b0000] hover:from-yellow-600 hover:to-[#7a0000] text-black font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg mb-4">
277
+ View Open Positions
278
+ </button>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Footer -->
283
+ <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
284
+ <div class="container mx-auto px-6">
285
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
286
+ <div>
287
+ <div class="flex items-center space-x-2 mb-4">
288
+ <i data-feather="zap" class="text-yellow-500"></i>
289
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
290
+ </div>
291
+ <p class="text-gray-400 mb-4">
292
+ Mental performance technology for champions in sports, business, and life.
293
+ </p>
294
+ <div class="flex space-x-4">
295
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
296
+ <i data-feather="facebook"></i>
297
+ </a>
298
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
299
+ <i data-feather="twitter"></i>
300
+ </a>
301
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
302
+ <i data-feather="instagram"></i>
303
+ </a>
304
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
305
+ <i data-feather="linkedin"></i>
306
+ </a>
307
+ </div>
308
+ </div>
309
+
310
+ <div>
311
+ <h3 class="text-lg font-bold text-white mb-4">Products</h3>
312
+ <ul class="space-y-2">
313
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
314
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
315
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
316
+ </ul>
317
+ </div>
318
+
319
+ <div>
320
+ <h3 class="text-lg font-bold text-white mb-4">Company</h3>
321
+ <ul class="space-y-2">
322
+ <li><a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About Us</a></li>
323
+ <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency Converter</a></li>
324
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
325
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
326
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
327
+ </ul>
328
+ </div>
329
+
330
+ <div>
331
+ <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
332
+ <ul class="space-y-2">
333
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
334
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li>
335
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
336
+ </ul>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
341
+ <p class="text-gray-500 mb-4 md:mb-0">
342
+ © 2025 Amplify Technologies. All rights reserved.
343
+ </p>
344
+ <div class="flex space-x-6">
345
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
346
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </footer>
351
+
352
+ <script>
353
+ // Initialize Vanta.js background
354
+ VANTA.GLOBE({
355
+ el: "#vanta-bg",
356
+ mouseControls: true,
357
+ touchControls: true,
358
+ gyroControls: false,
359
+ minHeight: 200.00,
360
+ minWidth: 200.00,
361
+ scale: 1.00,
362
+ scaleMobile: 1.00,
363
+ color: 0xb8860b,
364
+ backgroundColor: 0x0,
365
+ size: 0.8
366
+ });
367
+
368
+ // Feather icons
369
+ feather.replace();
370
+ </script>
371
+ </body>
372
+ </html>
currency.html CHANGED
@@ -1,14 +1,13 @@
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 - Currency Exchange</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
- <link rel="stylesheet" href="style.css">
12
  <style>
13
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
14
  .hero-gradient {
@@ -17,26 +16,11 @@
17
  .glow-text {
18
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
19
  }
20
- .currency-card {
21
- transition: all 0.3s ease;
22
- }
23
- .currency-card:hover {
24
- transform: translateY(-5px);
25
- box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
26
- }
27
- .refresh-animation {
28
- animation: spin 1s linear infinite;
29
- }
30
- @keyframes spin {
31
- 0% { transform: rotate(0deg); }
32
- 100% { transform: rotate(360deg); }
33
- }
34
  </style>
35
  </head>
36
  <body class="bg-black text-white font-['Montserrat']">
37
- <!-- Enhanced Vanta.js Background -->
38
- <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
39
- <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
40
 
41
  <!-- Navigation -->
42
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
@@ -46,441 +30,92 @@
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
- <!-- Mobile menu button -->
50
- <div class="md:hidden">
51
- <button id="mobile-menu-button" class="text-white focus:outline-none">
52
- <i data-feather="menu"></i>
53
- </button>
54
- </div>
55
- <!-- Desktop Navigation -->
56
  <div class="hidden md:flex items-center space-x-8">
57
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
58
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
59
- <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
60
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
 
61
  <a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency</a>
62
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
63
- <a href="results.html" class="text-white hover:text-yellow-500 transition">Stress Reliever</a>
64
  </div>
65
  <div class="flex items-center space-x-4">
66
- <div class="relative">
67
- <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">
68
- <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>
69
- <span id="current-language">EN</span>
70
- </button>
71
- <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">
72
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
73
- <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>
74
- <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>
75
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
76
- </div>
77
- </div>
78
  <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">
79
  <i data-feather="user" class="mr-2"></i> Login
80
  </a>
81
- </div>
82
  </div>
83
  </div>
84
  </nav>
85
 
86
  <!-- Currency Converter Section -->
87
- <section class="relative z-10 hero-gradient py-20">
88
  <div class="container mx-auto px-6">
89
- <div class="text-center mb-16">
90
- <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
91
- <span class="text-yellow-500 glow-text">CURRENCY</span> EXCHANGE
92
- </h1>
93
- <p class="text-xl text-gray-300 max-w-2xl mx-auto">
94
- Real-time currency exchange rates for Europe and Asia. Updated every minute.
95
- </p>
96
- </div>
97
-
98
- <!-- Currency Converter Tool -->
99
- <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-8 mb-16">
100
- <div class="flex flex-col md:flex-row items-center justify-between mb-8">
101
- <h2 class="text-3xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500 mb-4 md:mb-0">
102
- LIVE CONVERTER
103
- </h2>
104
- <div class="flex items-center text-gray-300">
105
- <i data-feather="clock" class="mr-2"></i>
106
- <span id="last-updated">Last updated: Just now</span>
107
- <button id="refresh-rates" class="ml-4 text-yellow-500 hover:text-yellow-400 transition">
108
- <i data-feather="refresh-cw" class="mr-1"></i> Refresh
109
- </button>
110
- </div>
111
- </div>
112
-
113
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
114
- <div class="col-span-1">
115
- <label for="amount" class="block text-gray-300 mb-2">Amount</label>
116
- <input type="number" id="amount" value="1" min="0"
117
- class="w-full bg-gray-900 border border-yellow-500 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
118
  </div>
119
- <div class="col-span-1">
120
- <label for="from-currency" class="block text-gray-300 mb-2">From</label>
121
- <select id="from-currency"
122
- class="w-full bg-gray-900 border border-yellow-500 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
123
- <option value="USD">US Dollar (USD)</option>
124
- <option value="EUR">Euro (EUR)</option>
125
- <option value="GBP">British Pound (GBP)</option>
126
- <option value="JPY">Japanese Yen (JPY)</option>
127
- <option value="CNY">Chinese Yuan (CNY)</option>
128
- <option value="INR">Indian Rupee (INR)</option>
129
- <option value="KRW">South Korean Won (KRW)</option>
130
- <option value="SGD">Singapore Dollar (SGD)</option>
131
- <option value="THB">Thai Baht (THB)</option>
132
- <option value="VND">Vietnamese Dong (VND)</option>
133
- <option value="MYR">Malaysian Ringgit (MYR)</option>
134
- <option value="IDR">Indonesian Rupiah (IDR)</option>
135
- <option value="PHP">Philippine Peso (PHP)</option>
136
- <option value="RUB">Russian Ruble (RUB)</option>
137
- <option value="AED">UAE Dirham (AED)</option>
138
- <option value="SAR">Saudi Riyal (SAR)</option>
139
- <option value="CHF">Swiss Franc (CHF)</option>
140
- <option value="SEK">Swedish Krona (SEK)</option>
141
- <option value="NOK">Norwegian Krone (NOK)</option>
142
- <option value="DKK">Danish Krone (DKK)</option>
143
- <option value="AUD">Australian Dollar (AUD)</option>
144
- <option value="CAD">Canadian Dollar (CAD)</option>
145
- <option value="NZD">New Zealand Dollar (NZD)</option>
146
- <option value="BRL">Brazilian Real (BRL)</option>
147
- <option value="MXN">Mexican Peso (MXN)</option>
148
- <option value="ZAR">South African Rand (ZAR)</option>
149
- <option value="TRY">Turkish Lira (TRY)</option>
150
  </select>
151
- </div>
152
- <div class="col-span-1 flex items-end">
153
- <button id="swap-currencies" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-3 rounded-lg transition">
154
- <i data-feather="repeat" class="w-5 h-5"></i>
155
- </button>
156
  </div>
157
- </div>
158
-
159
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
160
- <div class="col-span-1 md:col-span-2">
161
- <label for="to-currency" class="block text-gray-300 mb-2">To</label>
162
- <select id="to-currency"
163
- class="w-full bg-gray-900 border border-yellow-500 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
164
- <option value="EUR">Euro (EUR)</option>
165
- <option value="GBP">British Pound (GBP)</option>
166
- <option value="JPY">Japanese Yen (JPY)</option>
167
- <option value="CNY">Chinese Yuan (CNY)</option>
168
- <option value="INR">Indian Rupee (INR)</option>
169
- <option value="KRW">South Korean Won (KRW)</option>
170
- <option value="SGD">Singapore Dollar (SGD)</option>
171
- <option value="THB">Thai Baht (THB)</option>
172
- <option value="VND">Vietnamese Dong (VND)</option>
173
- <option value="MYR">Malaysian Ringgit (MYR)</option>
174
- <option value="IDR">Indonesian Rupiah (IDR)</option>
175
- <option value="PHP">Philippine Peso (PHP)</option>
176
- <option value="RUB">Russian Ruble (RUB)</option>
177
- <option value="AED">UAE Dirham (AED)</option>
178
- <option value="SAR">Saudi Riyal (SAR)</option>
179
  </select>
180
  </div>
181
- <div class="col-span-1">
182
- <label for="result" class="block text-gray-300 mb-2">Result</label>
183
- <div id="result" class="w-full bg-gray-900 border border-yellow-500 rounded-lg px-4 py-3 text-white">
184
- 0.00
185
- </div>
186
- </div>
187
  </div>
188
- </div>
189
-
190
- <!-- Currency Rates Grid -->
191
- <div class="mb-12">
192
- <h2 class="text-3xl font-bold font-['Bebas+Neue'] tracking-wider text-center mb-8">
193
- <span class="text-yellow-500">EUROPE</span> <span class="text-white">&</span> <span class="text-red-500">ASIA</span> <span class="text-white">EXCHANGE RATES</span>
194
- </h2>
195
-
196
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
197
- <!-- Europe Currencies -->
198
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
199
- <div class="flex justify-between items-center mb-4">
200
- <div class="flex items-center">
201
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
202
- <i data-feather="euro" class="text-black"></i>
203
- </div>
204
- <h3 class="text-xl font-bold">Euro (EUR)</h3>
205
- </div>
206
- <span class="text-yellow-500 font-bold text-xl">1.00</span>
207
- </div>
208
- <div class="space-y-3">
209
- <div class="flex justify-between">
210
- <span>GBP</span>
211
- <span id="EUR-GBP" class="font-mono">0.85</span>
212
- </div>
213
- <div class="flex justify-between">
214
- <span>CHF</span>
215
- <span id="EUR-CHF" class="font-mono">0.95</span>
216
- </div>
217
- <div class="flex justify-between">
218
- <span>SEK</span>
219
- <span id="EUR-SEK" class="font-mono">10.32</span>
220
- </div>
221
- <div class="flex justify-between">
222
- <span>NOK</span>
223
- <span id="EUR-NOK" class="font-mono">10.78</span>
224
- </div>
225
- <div class="flex justify-between">
226
- <span>DKK</span>
227
- <span id="EUR-DKK" class="font-mono">7.44</span>
228
- </div>
229
- </div>
230
- </div>
231
-
232
- <!-- UK Pound -->
233
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
234
- <div class="flex justify-between items-center mb-4">
235
- <div class="flex items-center">
236
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
237
- <i data-feather="dollar-sign" class="text-black"></i>
238
- </div>
239
- <h3 class="text-xl font-bold">Pound (GBP)</h3>
240
- </div>
241
- <span class="text-yellow-500 font-bold text-xl">1.00</span>
242
- </div>
243
- <div class="space-y-3">
244
- <div class="flex justify-between">
245
- <span>EUR</span>
246
- <span id="GBP-EUR" class="font-mono">1.18</span>
247
- </div>
248
- <div class="flex justify-between">
249
- <span>USD</span>
250
- <span id="GBP-USD" class="font-mono">1.25</span>
251
- </div>
252
- <div class="flex justify-between">
253
- <span>JPY</span>
254
- <span id="GBP-JPY" class="font-mono">175.42</span>
255
- </div>
256
- <div class="flex justify-between">
257
- <span>AUD</span>
258
- <span id="GBP-AUD" class="font-mono">1.88</span>
259
- </div>
260
- <div class="flex justify-between">
261
- <span>CAD</span>
262
- <span id="GBP-CAD" class="font-mono">1.70</span>
263
- </div>
264
- </div>
265
- </div>
266
-
267
- <!-- Japanese Yen -->
268
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-red-500 p-6 currency-card">
269
- <div class="flex justify-between items-center mb-4">
270
- <div class="flex items-center">
271
- <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center mr-3">
272
- <i data-feather="dollar-sign" class="text-black"></i>
273
- </div>
274
- <h3 class="text-xl font-bold">Yen (JPY)</h3>
275
- </div>
276
- <span class="text-red-500 font-bold text-xl">100.00</span>
277
- </div>
278
- <div class="space-y-3">
279
- <div class="flex justify-between">
280
- <span>USD</span>
281
- <span id="JPY-USD" class="font-mono">0.71</span>
282
- </div>
283
- <div class="flex justify-between">
284
- <span>EUR</span>
285
- <span id="JPY-EUR" class="font-mono">0.67</span>
286
- </div>
287
- <div class="flex justify-between">
288
- <span>CNY</span>
289
- <span id="JPY-CNY" class="font-mono">5.14</span>
290
- </div>
291
- <div class="flex justify-between">
292
- <span>KRW</span>
293
- <span id="JPY-KRW" class="font-mono">952.71</span>
294
- </div>
295
- <div class="flex justify-between">
296
- <span>SGD</span>
297
- <span id="JPY-SGD" class="font-mono">0.96</span>
298
- </div>
299
- </div>
300
- </div>
301
-
302
- <!-- Chinese Yuan -->
303
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-red-500 p-6 currency-card">
304
- <div class="flex justify-between items-center mb-4">
305
- <div class="flex items-center">
306
- <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center mr-3">
307
- <i data-feather="dollar-sign" class="text-black"></i>
308
- </div>
309
- <h3 class="text-xl font-bold">Yuan (CNY)</h3>
310
- </div>
311
- <span class="text-red-500 font-bold text-xl">1.00</span>
312
- </div>
313
- <div class="space-y-3">
314
- <div class="flex justify-between">
315
- <span>USD</span>
316
- <span id="CNY-USD" class="font-mono">0.14</span>
317
- </div>
318
- <div class="flex justify-between">
319
- <span>EUR</span>
320
- <span id="CNY-EUR" class="font-mono">0.13</span>
321
- </div>
322
- <div class="flex justify-between">
323
- <span>JPY</span>
324
- <span id="CNY-JPY" class="font-mono">19.45</span>
325
- </div>
326
- <div class="flex justify-between">
327
- <span>KRW</span>
328
- <span id="CNY-KRW" class="font-mono">185.24</span>
329
- </div>
330
- <div class="flex justify-between">
331
- <span>THB</span>
332
- <span id="CNY-THB" class="font-mono">4.92</span>
333
- </div>
334
- </div>
335
- </div>
336
  </div>
337
- </div>
338
-
339
- <!-- Additional Asian Currencies -->
340
- <div class="mb-16">
341
- <h3 class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-center mb-8">
342
- ADDITIONAL <span class="text-yellow-500">ASIAN</span> CURRENCIES
343
- </h3>
344
-
345
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
346
- <!-- Indian Rupee -->
347
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
348
- <div class="flex justify-between items-center mb-4">
349
- <div class="flex items-center">
350
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
351
- <i data-feather="dollar-sign" class="text-black"></i>
352
- </div>
353
- <h3 class="text-xl font-bold">Rupee (INR)</h3>
354
- </div>
355
- <span class="text-yellow-500 font-bold text-xl">100.00</span>
356
- </div>
357
- <div class="space-y-3">
358
- <div class="flex justify-between">
359
- <span>USD</span>
360
- <span id="INR-USD" class="font-mono">1.20</span>
361
- </div>
362
- <div class="flex justify-between">
363
- <span>EUR</span>
364
- <span id="INR-EUR" class="font-mono">1.12</span>
365
- </div>
366
- <div class="flex justify-between">
367
- <span>GBP</span>
368
- <span id="INR-GBP" class="font-mono">0.95</span>
369
- </div>
370
- <div class="flex justify-between">
371
- <span>JPY</span>
372
- <span id="INR-JPY" class="font-mono">171.24</span>
373
- </div>
374
- <div class="flex justify-between">
375
- <span>AED</span>
376
- <span id="INR-AED" class="font-mono">4.40</span>
377
- </div>
378
- </div>
379
- </div>
380
-
381
- <!-- South Korean Won -->
382
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
383
- <div class="flex justify-between items-center mb-4">
384
- <div class="flex items-center">
385
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
386
- <i data-feather="dollar-sign" class="text-black"></i>
387
- </div>
388
- <h3 class="text-xl font-bold">Won (KRW)</h3>
389
- </div>
390
- <span class="text-yellow-500 font-bold text-xl">1000.00</span>
391
- </div>
392
- <div class="space-y-3">
393
- <div class="flex justify-between">
394
- <span>USD</span>
395
- <span id="KRW-USD" class="font-mono">0.75</span>
396
- </div>
397
- <div class="flex justify-between">
398
- <span>EUR</span>
399
- <span id="KRW-EUR" class="font-mono">0.70</span>
400
- </div>
401
- <div class="flex justify-between">
402
- <span>JPY</span>
403
- <span id="KRW-JPY" class="font-mono">105.02</span>
404
- </div>
405
- <div class="flex justify-between">
406
- <span>CNY</span>
407
- <span id="KRW-CNY" class="font-mono">5.40</span>
408
- </div>
409
- <div class="flex justify-between">
410
- <span>SGD</span>
411
- <span id="KRW-SGD" class="font-mono">1.01</span>
412
- </div>
413
- </div>
414
- </div>
415
-
416
- <!-- Singapore Dollar -->
417
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
418
- <div class="flex justify-between items-center mb-4">
419
- <div class="flex items-center">
420
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
421
- <i data-feather="dollar-sign" class="text-black"></i>
422
- </div>
423
- <h3 class="text-xl font-bold">Dollar (SGD)</h3>
424
- </div>
425
- <span class="text-yellow-500 font-bold text-xl">1.00</span>
426
- </div>
427
- <div class="space-y-3">
428
- <div class="flex justify-between">
429
- <span>USD</span>
430
- <span id="SGD-USD" class="font-mono">0.74</span>
431
- </div>
432
- <div class="flex justify-between">
433
- <span>EUR</span>
434
- <span id="SGD-EUR" class="font-mono">0.69</span>
435
- </div>
436
- <div class="flex justify-between">
437
- <span>JPY</span>
438
- <span id="SGD-JPY" class="font-mono">104.02</span>
439
- </div>
440
- <div class="flex justify-between">
441
- <span>MYR</span>
442
- <span id="SGD-MYR" class="font-mono">3.47</span>
443
- </div>
444
- <div class="flex justify-between">
445
- <span>THB</span>
446
- <span id="SGD-THB" class="font-mono">27.15</span>
447
- </div>
448
- </div>
449
- </div>
450
-
451
- <!-- Russian Ruble -->
452
- <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl border border-yellow-500 p-6 currency-card">
453
- <div class="flex justify-between items-center mb-4">
454
- <div class="flex items-center">
455
- <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
456
- <i data-feather="dollar-sign" class="text-black"></i>
457
- </div>
458
- <h3 class="text-xl font-bold">Ruble (RUB)</h3>
459
- </div>
460
- <span class="text-yellow-500 font-bold text-xl">100.00</span>
461
- </div>
462
- <div class="space-y-3">
463
- <div class="flex justify-between">
464
- <span>USD</span>
465
- <span id="RUB-USD" class="font-mono">1.40</span>
466
- </div>
467
- <div class="flex justify-between">
468
- <span>EUR</span>
469
- <span id="RUB-EUR" class="font-mono">1.30</span>
470
- </div>
471
- <div class="flex justify-between">
472
- <span>CNY</span>
473
- <span id="RUB-CNY" class="font-mono">9.89</span>
474
- </div>
475
- <div class="flex justify-between">
476
- <span>TRY</span>
477
- <span id="RUB-TRY" class="font-mono">40.67</span>
478
- </div>
479
- <div class="flex justify-between">
480
- <span>INR</span>
481
- <span id="RUB-INR" class="font-mono">116.66</span>
482
- </div>
483
- </div>
484
  </div>
485
  </div>
486
  </div>
@@ -512,26 +147,15 @@
512
  <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
513
  <i data-feather="linkedin"></i>
514
  </a>
515
- <a href="https://www.tiktok.com/@amplify.ve?is_from_webapp=1&sender_device=pc" target="_blank" class="text-gray-400 hover:text-yellow-500 transition">
516
- <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-tiktok">
517
- <path d="M21 8a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V8z"></path>
518
- <path d="M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0z"></path>
519
- <path d="M17 6v4"></path>
520
- <path d="M13 6v4"></path>
521
- <path d="M17 14v4"></path>
522
- <path d="M13 14v4"></path>
523
- </svg>
524
- </a>
525
  </div>
526
  </div>
527
 
528
  <div>
529
  <h3 class="text-lg font-bold text-white mb-4">Products</h3>
530
  <ul class="space-y-2">
531
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
532
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
533
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
534
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
535
  </ul>
536
  </div>
537
 
@@ -539,7 +163,6 @@
539
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
540
  <ul class="space-y-2">
541
  <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
542
- <li><a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency Converter</a></li>
543
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
544
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
545
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
@@ -549,10 +172,9 @@
549
  <div>
550
  <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
551
  <ul class="space-y-2">
 
552
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
553
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li>
554
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
555
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Community</a></li>
556
  </ul>
557
  </div>
558
  </div>
@@ -564,28 +186,11 @@
564
  <div class="flex space-x-6">
565
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
566
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
567
- <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Cookies</a>
568
  </div>
569
  </div>
570
  </div>
571
  </footer>
572
 
573
- <!-- Mobile Menu -->
574
- <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center">
575
- <button id="mobile-menu-close" class="absolute top-4 right-4 text-white text-2xl">
576
- <i data-feather="x"></i>
577
- </button>
578
- <div class="flex flex-col space-y-6 text-center">
579
- <a href="index.html" class="text-2xl text-white hover:text-yellow-500 transition">Home</a>
580
- <a href="index.html#features" class="text-2xl text-white hover:text-yellow-500 transition">Features</a>
581
- <a href="index.html#pricing" class="text-2xl text-white hover:text-yellow-500 transition">Pricing</a>
582
- <a href="about.html" class="text-2xl text-white hover:text-yellow-500 transition">About</a>
583
- <a href="currency.html" class="text-2xl text-yellow-500 hover:text-yellow-400 transition">Currency</a>
584
- <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
585
- <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
586
- </div>
587
- </div>
588
-
589
  <script>
590
  // Initialize Vanta.js background
591
  VANTA.GLOBE({
@@ -595,179 +200,71 @@
595
  gyroControls: false,
596
  minHeight: 200.00,
597
  minWidth: 200.00,
598
- scale: 1.20,
599
- scaleMobile: 1.20,
600
- color: 0xe3b341,
601
- color2: 0x9b0000,
602
- backgroundColor: 0x111111,
603
- size: 1.00,
604
- spacing: 20.00,
605
- showLines: false,
606
- points: 10.00,
607
- maxDistance: 25.00
608
  });
609
 
610
- // Fetch exchange rates from ExchangeRate-API
611
- let exchangeRates = {};
612
- const API_KEY = 'YOUR_EXCHANGERATE_API_KEY'; // Replace with your API key
613
- const BASE_URL = `https://v6.exchangerate-api.com/v6/${API_KEY}/latest/USD`;
614
-
615
- async function fetchExchangeRates() {
616
- try {
617
- document.getElementById('refresh-rates').innerHTML = '<i data-feather="refresh-cw" class="refresh-animation mr-1"></i> Refreshing';
618
- feather.replace();
619
-
620
- const response = await fetch(BASE_URL);
621
- const data = await response.json();
622
-
623
- if (data.result === 'success') {
624
- exchangeRates = data.conversion_rates;
625
- updateAllRates();
626
- updateLastUpdated();
627
  }
628
- } catch (error) {
629
- console.error('Error fetching exchange rates:', error);
630
- // Fallback rates if API fails
631
- exchangeRates = {
632
- USD: 1,
633
- EUR: 0.93,
634
- GBP: 0.79,
635
- JPY: 155.42,
636
- CNY: 7.24,
637
- INR: 83.37,
638
- KRW: 1342.55,
639
- SGD: 1.35,
640
- RUB: 91.47,
641
- THB: 36.62,
642
- MYR: 4.74,
643
- IDR: 15850.50,
644
- PHP: 56.85,
645
- AED: 3.67,
646
- SAR: 3.75
647
- };
648
- updateAllRates();
649
- } finally {
650
- document.getElementById('refresh-rates').innerHTML = '<i data-feather="refresh-cw" class="mr-1"></i> Refresh';
651
- feather.replace();
652
  }
653
- }
654
-
655
- function updateAllRates() {
656
- // Convert from USD to other currencies
657
- if (exchangeRates.EUR) {
658
- document.getElementById('EUR-GBP').textContent = (exchangeRates.GBP / exchangeRates.EUR).toFixed(2);
659
- document.getElementById('EUR-CHF').textContent = (exchangeRates.CHF / exchangeRates.EUR).toFixed(2);
660
- document.getElementById('EUR-SEK').textContent = (exchangeRates.SEK / exchangeRates.EUR).toFixed(2);
661
- document.getElementById('EUR-NOK').textContent = (exchangeRates.NOK / exchangeRates.EUR).toFixed(2);
662
- document.getElementById('EUR-DKK').textContent = (exchangeRates.DKK / exchangeRates.EUR).toFixed(2);
663
-
664
- document.getElementById('GBP-EUR').textContent = (exchangeRates.EUR / exchangeRates.GBP).toFixed(2);
665
- document.getElementById('GBP-USD').textContent = (1 / exchangeRates.GBP).toFixed(2);
666
- document.getElementById('GBP-JPY').textContent = (exchangeRates.JPY / exchangeRates.GBP).toFixed(2);
667
- document.getElementById('GBP-AUD').textContent = (exchangeRates.AUD / exchangeRates.GBP).toFixed(2);
668
- document.getElementById('GBP-CAD').textContent = (exchangeRates.CAD / exchangeRates.GBP).toFixed(2);
669
-
670
- document.getElementById('JPY-USD').textContent = (1 / exchangeRates.JPY).toFixed(4);
671
- document.getElementById('JPY-EUR').textContent = (exchangeRates.EUR / exchangeRates.JPY).toFixed(4);
672
- document.getElementById('JPY-CNY').textContent = (exchangeRates.CNY / exchangeRates.JPY).toFixed(4);
673
- document.getElementById('JPY-KRW').textContent = (exchangeRates.KRW / exchangeRates.JPY).toFixed(2);
674
- document.getElementById('JPY-SGD').textContent = (exchangeRates.SGD / exchangeRates.JPY).toFixed(4);
675
-
676
- document.getElementById('CNY-USD').textContent = (1 / exchangeRates.CNY).toFixed(4);
677
- document.getElementById('CNY-EUR').textContent = (exchangeRates.EUR / exchangeRates.CNY).toFixed(4);
678
- document.getElementById('CNY-JPY').textContent = (exchangeRates.JPY / exchangeRates.CNY).toFixed(2);
679
- document.getElementById('CNY-KRW').textContent = (exchangeRates.KRW / exchangeRates.CNY).toFixed(2);
680
- document.getElementById('CNY-THB').textContent = (exchangeRates.THB / exchangeRates.CNY).toFixed(2);
681
-
682
- document.getElementById('INR-USD').textContent = (1 / exchangeRates.INR * 100).toFixed(2);
683
- document.getElementById('INR-EUR').textContent = (exchangeRates.EUR / exchangeRates.INR * 100).toFixed(2);
684
- document.getElementById('INR-GBP').textContent = (exchangeRates.GBP / exchangeRates.INR * 100).toFixed(2);
685
- document.getElementById('INR-JPY').textContent = (exchangeRates.JPY / exchangeRates.INR * 100).toFixed(2);
686
- document.getElementById('INR-AED').textContent = (exchangeRates.AED / exchangeRates.INR * 100).toFixed(2);
687
-
688
- document.getElementById('KRW-USD').textContent = (1 / exchangeRates.KRW * 1000).toFixed(4);
689
- document.getElementById('KRW-EUR').textContent = (exchangeRates.EUR / exchangeRates.KRW * 1000).toFixed(4);
690
- document.getElementById('KRW-JPY').textContent = (exchangeRates.JPY / exchangeRates.KRW * 1000).toFixed(2);
691
- document.getElementById('KRW-CNY').textContent = (exchangeRates.CNY / exchangeRates.KRW * 1000).toFixed(4);
692
- document.getElementById('KRW-SGD').textContent = (exchangeRates.SGD / exchangeRates.KRW * 1000).toFixed(4);
693
 
694
- document.getElementById('SGD-USD').textContent = (1 / exchangeRates.SGD).toFixed(4);
695
- document.getElementById('SGD-EUR').textContent = (exchangeRates.EUR / exchangeRates.SGD).toFixed(4);
696
- document.getElementById('SGD-JPY').textContent = (exchangeRates.JPY / exchangeRates.SGD).toFixed(2);
697
- document.getElementById('SGD-MYR').textContent = (exchangeRates.MYR / exchangeRates.SGD).toFixed(2);
698
- document.getElementById('SGD-THB').textContent = (exchangeRates.THB / exchangeRates.SGD).toFixed(2);
699
 
700
- document.getElementById('RUB-USD').textContent = (1 / exchangeRates.RUB * 100).toFixed(2);
701
- document.getElementById('RUB-EUR').textContent = (exchangeRates.EUR / exchangeRates.RUB * 100).toFixed(2);
702
- document.getElementById('RUB-CNY').textContent = (exchangeRates.CNY / exchangeRates.RUB * 100).toFixed(2);
703
- document.getElementById('RUB-TRY').textContent = (exchangeRates.TRY / exchangeRates.RUB * 100).toFixed(2);
704
- document.getElementById('RUB-INR').textContent = (exchangeRates.INR / exchangeRates.RUB * 100).toFixed(2);
 
 
 
 
 
705
  }
706
 
707
- // Update converter result
708
- updateConverterResult();
709
- }
710
-
711
- function updateLastUpdated() {
712
- const now = new Date();
713
- const options = {
714
- year: 'numeric',
715
- month: 'long',
716
- day: 'numeric',
717
- hour: '2-digit',
718
- minute: '2-digit',
719
- second: '2-digit'
720
- };
721
- document.getElementById('last-updated').textContent = `Last updated: ${now.toLocaleDateString('en-US', options)}`;
722
- }
723
-
724
- function updateConverterResult() {
725
- const amount = parseFloat(document.getElementById('amount').value) || 0;
726
- const fromCurrency = document.getElementById('from-currency').value;
727
- const toCurrency = document.getElementById('to-currency').value;
728
-
729
- if (exchangeRates[fromCurrency] && exchangeRates[toCurrency]) {
730
- const result = (amount * exchangeRates[toCurrency] / exchangeRates[fromCurrency]).toFixed(2);
731
- document.getElementById('result').textContent = result;
732
- }
733
- }
734
-
735
- // Event listeners
736
- document.getElementById('amount').addEventListener('input', updateConverterResult);
737
- document.getElementById('from-currency').addEventListener('change', updateConverterResult);
738
- document.getElementById('to-currency').addEventListener('change', updateConverterResult);
739
- document.getElementById('refresh-rates').addEventListener('click', fetchExchangeRates);
740
-
741
- document.getElementById('swap-currencies').addEventListener('click', () => {
742
- const fromCurrency = document.getElementById('from-currency');
743
- const toCurrency = document.getElementById('to-currency');
744
- const temp = fromCurrency.value;
745
- fromCurrency.value = toCurrency.value;
746
- toCurrency.value = temp;
747
- updateConverterResult();
748
- });
749
-
750
- // Initialize mobile menu
751
- const mobileMenuButton = document.getElementById('mobile-menu-button');
752
- const mobileMenu = document.getElementById('mobile-menu');
753
- const mobileMenuClose = document.getElementById('mobile-menu-close');
754
-
755
- mobileMenuButton.addEventListener('click', () => {
756
- mobileMenu.classList.remove('hidden');
757
- feather.replace();
758
- });
759
-
760
- mobileMenuClose.addEventListener('click', () => {
761
- mobileMenu.classList.add('hidden');
762
- });
763
-
764
- // Initialize and fetch rates on load
765
- document.addEventListener('DOMContentLoaded', () => {
766
- feather.replace();
767
- fetchExchangeRates();
768
 
769
- // Update rates every 5 minutes
770
- setInterval(fetchExchangeRates, 5 * 60 * 1000);
771
  });
772
  </script>
773
  </body>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Currency Converter - Amplify</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 {
 
16
  .glow-text {
17
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
18
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
  </head>
21
  <body class="bg-black text-white font-['Montserrat']">
22
+ <!-- Vanta.js Background -->
23
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
24
 
25
  <!-- Navigation -->
26
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
 
30
  <i data-feather="zap" class="text-yellow-500"></i>
31
  <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
32
  </div>
33
+
 
 
 
 
 
 
34
  <div class="hidden md:flex items-center space-x-8">
35
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
36
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
 
37
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
38
+ <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
39
  <a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency</a>
40
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
41
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
42
  </div>
43
  <div class="flex items-center space-x-4">
 
 
 
 
 
 
 
 
 
 
 
 
44
  <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">
45
  <i data-feather="user" class="mr-2"></i> Login
46
  </a>
47
+ </div>
48
  </div>
49
  </div>
50
  </nav>
51
 
52
  <!-- Currency Converter Section -->
53
+ <section class="relative z-10 py-20 hero-gradient">
54
  <div class="container mx-auto px-6">
55
+ <h1 class="text-4xl md:text-6xl font-bold text-center mb-12 font-['Bebas+Neue'] tracking-wider">
56
+ <span class="text-yellow-500 glow-text">CURRENCY</span> <span class="text-white">CONVERTER</span>
57
+ </h1>
58
+
59
+ <div class="max-w-2xl mx-auto bg-black bg-opacity-70 rounded-xl p-8 border border-yellow-500">
60
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
61
+ <div>
62
+ <label class="block text-gray-300 mb-2">Amount</label>
63
+ <input type="number" id="amount" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" value="1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  </div>
65
+ <div>
66
+ <label class="block text-gray-300 mb-2">From</label>
67
+ <select id="from-currency" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500">
68
+ <option value="USD">USD - US Dollar</option>
69
+ <option value="EUR">EUR - Euro</option>
70
+ <option value="GBP">GBP - British Pound</option>
71
+ <option value="JPY">JPY - Japanese Yen</option>
72
+ <option value="CAD">CAD - Canadian Dollar</option>
73
+ <option value="AUD">AUD - Australian Dollar</option>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </select>
 
 
 
 
 
75
  </div>
76
+ <div>
77
+ <label class="block text-gray-300 mb-2">To</label>
78
+ <select id="to-currency" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500">
79
+ <option value="EUR">EUR - Euro</option>
80
+ <option value="USD">USD - US Dollar</option>
81
+ <option value="GBP">GBP - British Pound</option>
82
+ <option value="JPY">JPY - Japanese Yen</option>
83
+ <option value="CAD">CAD - Canadian Dollar</option>
84
+ <option value="AUD">AUD - Australian Dollar</option>
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  </select>
86
  </div>
 
 
 
 
 
 
87
  </div>
88
+
89
+ <button id="convert-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition mb-6 flex items-center justify-center">
90
+ <i data-feather="refresh-cw" class="mr-2"></i> Convert
91
+ </button>
92
+
93
+ <div id="result" class="text-center py-6 px-4 bg-gray-900 rounded-lg border border-yellow-500 hidden">
94
+ <div class="text-4xl font-bold text-yellow-500 mb-2" id="converted-amount">0</div>
95
+ <div class="text-gray-300" id="conversion-text">1 USD = 0 EUR</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
+
98
+ <div class="mt-8">
99
+ <h3 class="text-xl font-bold mb-4 text-yellow-500">Popular Conversions</h3>
100
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
101
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="EUR">
102
+ USD → EUR
103
+ </button>
104
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="EUR" data-to="USD">
105
+ EUR → USD
106
+ </button>
107
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="GBP">
108
+ USD → GBP
109
+ </button>
110
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="GBP" data-to="USD">
111
+ GBP → USD
112
+ </button>
113
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="JPY">
114
+ USD → JPY
115
+ </button>
116
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="JPY" data-to="USD">
117
+ JPY → USD
118
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
  </div>
121
  </div>
 
147
  <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
148
  <i data-feather="linkedin"></i>
149
  </a>
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
  </div>
152
 
153
  <div>
154
  <h3 class="text-lg font-bold text-white mb-4">Products</h3>
155
  <ul class="space-y-2">
156
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
157
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
158
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
 
159
  </ul>
160
  </div>
161
 
 
163
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
164
  <ul class="space-y-2">
165
  <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
 
166
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
167
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
168
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
 
172
  <div>
173
  <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
174
  <ul class="space-y-2">
175
+ <li><a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency Converter</a></li>
176
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
 
177
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
 
178
  </ul>
179
  </div>
180
  </div>
 
186
  <div class="flex space-x-6">
187
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
188
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
 
189
  </div>
190
  </div>
191
  </div>
192
  </footer>
193
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  <script>
195
  // Initialize Vanta.js background
196
  VANTA.GLOBE({
 
200
  gyroControls: false,
201
  minHeight: 200.00,
202
  minWidth: 200.00,
203
+ scale: 1.00,
204
+ scaleMobile: 1.00,
205
+ color: 0xb8860b,
206
+ backgroundColor: 0x0,
207
+ size: 0.8
 
 
 
 
 
208
  });
209
 
210
+ // Currency Converter
211
+ document.addEventListener('DOMContentLoaded', function() {
212
+ feather.replace();
213
+
214
+ const convertBtn = document.getElementById('convert-btn');
215
+ const resultDiv = document.getElementById('result');
216
+ const quickConvertBtns = document.querySelectorAll('.quick-convert');
217
+
218
+ // Fetch exchange rates from API
219
+ async function fetchExchangeRate(from, to) {
220
+ try {
221
+ const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`);
222
+ const data = await response.json();
223
+ return data.rates[to];
224
+ } catch (error) {
225
+ console.error('Error fetching exchange rate:', error);
226
+ return null;
227
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  }
229
+
230
+ // Perform conversion
231
+ async function convertCurrency() {
232
+ const amount = parseFloat(document.getElementById('amount').value);
233
+ const fromCurrency = document.getElementById('from-currency').value;
234
+ const toCurrency = document.getElementById('to-currency').value;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
 
236
+ if (isNaN(amount) || amount <= 0) {
237
+ alert('Please enter a valid amount');
238
+ return;
239
+ }
 
240
 
241
+ const rate = await fetchExchangeRate(fromCurrency, toCurrency);
242
+ if (rate) {
243
+ const convertedAmount = (amount * rate).toFixed(2);
244
+ document.getElementById('converted-amount').textContent = convertedAmount;
245
+ document.getElementById('conversion-text').textContent =
246
+ `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
247
+ resultDiv.classList.remove('hidden');
248
+ } else {
249
+ alert('Unable to get exchange rate. Please try again later.');
250
+ }
251
  }
252
 
253
+ // Handle quick convert buttons
254
+ quickConvertBtns.forEach(btn => {
255
+ btn.addEventListener('click', function() {
256
+ const from = this.getAttribute('data-from');
257
+ const to = this.getAttribute('data-to');
258
+
259
+ document.getElementById('from-currency').value = from;
260
+ document.getElementById('to-currency').value = to;
261
+
262
+ convertCurrency();
263
+ });
264
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
 
266
+ // Event listeners
267
+ convertBtn.addEventListener('click', convertCurrency);
268
  });
269
  </script>
270
  </body>
index.html CHANGED
@@ -40,20 +40,7 @@
40
  <!-- Enhanced Vanta.js Background -->
41
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
42
  <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
43
- <!-- Cart Dropdown (moved before navigation) -->
44
- <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">
45
- <div class="px-4 py-2 text-white border-b border-gray-700">Your Cart</div>
46
- <div id="cart-items" class="max-h-60 overflow-y-auto">
47
- <div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>
48
- </div>
49
- <div class="px-4 py-2 border-t border-gray-700">
50
- <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>
51
- Checkout
52
- </button>
53
- </div>
54
- </div>
55
-
56
- <!-- Navigation -->
57
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
58
  <div class="container mx-auto px-6 py-4">
59
  <div class="flex justify-between items-center">
@@ -71,12 +58,12 @@
71
  <div class="hidden md:flex items-center space-x-8">
72
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
73
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
74
- <a href="index.html#about" class="text-white hover:text-yellow-500 transition">About</a>
75
- <a href="pricing.html" class="text-white hover:text-yellow-500 transition">Pricing</a>
76
- <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
77
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
78
- <a href="results.html" class="text-white hover:text-yellow-500 transition">Stress Reliever</a>
79
- </div>
80
  <div class="flex items-center space-x-4">
81
  <div class="relative">
82
  <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">
@@ -90,134 +77,11 @@
90
  <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
91
  </div>
92
  </div>
93
- <div class="relative">
94
- <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">
95
- <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i>
96
- <span id="cart-count" class="text-white">0</span>
97
- </button>
98
- </div>
99
- <div class="relative">
100
- <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">
101
- <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>
102
- <span id="current-language">EN</span>
103
- </button>
104
- <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">
105
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
106
- <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>
107
- <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>
108
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
109
- </div>
110
- </div>
111
- <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">
112
  <i data-feather="user" class="mr-2"></i> Login
113
  </a>
114
  <script>
115
- // Cart functionality
116
- let cart = [];
117
- const cartButton = document.getElementById('cart-button');
118
- const cartDropdown = document.getElementById('cart-dropdown');
119
- const cartCount = document.getElementById('cart-count');
120
- const cartItems = document.getElementById('cart-items');
121
- const checkoutBtn = document.getElementById('checkout-btn');
122
-
123
- function updateCart() {
124
- cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
125
-
126
- if(cart.length === 0) {
127
- cartItems.innerHTML = '<div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>';
128
- checkoutBtn.disabled = true;
129
- } else {
130
- cartItems.innerHTML = cart.map(item => `
131
- <div class="px-4 py-3 border-b border-gray-700 flex justify-between items-center">
132
- <div>
133
- <div class="font-medium">${item.name}</div>
134
- <div class="text-sm text-gray-400">${item.price}/mo</div>
135
- </div>
136
- <div class="flex items-center">
137
- <button class="decrease-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}">
138
- <i data-feather="minus" class="w-4 h-4"></i>
139
- </button>
140
- <span class="mx-2">${item.quantity}</span>
141
- <button class="increase-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}">
142
- <i data-feather="plus" class="w-4 h-4"></i>
143
- </button>
144
- <button class="remove-item text-gray-400 hover:text-red-500 ml-2 p-1" data-id="${item.id}">
145
- <i data-feather="trash-2" class="w-4 h-4"></i>
146
- </button>
147
- </div>
148
- </div>
149
- `).join('');
150
-
151
- // Calculate total
152
- const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
153
- cartItems.innerHTML += `
154
- <div class="px-4 py-3 bg-gray-900 flex justify-between font-bold">
155
- <span>Total:</span>
156
- <span>${total.toFixed(2)}/mo</span>
157
- </div>
158
- `;
159
-
160
- checkoutBtn.disabled = false;
161
-
162
- // Re-render feather icons
163
- feather.replace();
164
-
165
- // Add event listeners to new buttons
166
- document.querySelectorAll('.increase-item').forEach(btn => {
167
- btn.addEventListener('click', (e) => {
168
- const id = e.target.closest('button').dataset.id;
169
- const item = cart.find(i => i.id === id);
170
- if(item) {
171
- item.quantity++;
172
- updateCart();
173
- }
174
- });
175
- });
176
-
177
- document.querySelectorAll('.decrease-item').forEach(btn => {
178
- btn.addEventListener('click', (e) => {
179
- const id = e.target.closest('button').dataset.id;
180
- const item = cart.find(i => i.id === id);
181
- if(item && item.quantity > 1) {
182
- item.quantity--;
183
- updateCart();
184
- }
185
- });
186
- });
187
-
188
- document.querySelectorAll('.remove-item').forEach(btn => {
189
- btn.addEventListener('click', (e) => {
190
- const id = e.target.closest('button').dataset.id;
191
- cart = cart.filter(i => i.id !== id);
192
- updateCart();
193
- });
194
- });
195
- }
196
- }
197
-
198
- cartButton.addEventListener('click', () => {
199
- cartDropdown.classList.toggle('hidden');
200
- });
201
-
202
- // Close cart when clicking outside
203
- document.addEventListener('click', (e) => {
204
- if(!cartButton.contains(e.target) && !cartDropdown.contains(e.target)) {
205
- cartDropdown.classList.add('hidden');
206
- }
207
- });
208
-
209
- // Add to cart functionality
210
- function addToCart(item) {
211
- const existingItem = cart.find(i => i.id === item.id);
212
- if(existingItem) {
213
- existingItem.quantity++;
214
- } else {
215
- cart.push({...item, quantity: 1});
216
- }
217
- updateCart();
218
- cartDropdown.classList.remove('hidden');
219
- }
220
- </script>
221
  </div>
222
  </div>
223
  </div>
@@ -458,13 +322,10 @@ Get Started
458
  </div>
459
  </div>
460
  </section>
 
461
  <!-- About Section -->
462
  <section id="about" class="relative z-10 py-20 bg-black bg-opacity-90">
463
  <div class="container mx-auto px-6">
464
- <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
465
- <span class="text-yellow-500">ABOUT</span> <span class="text-white">AMPLIFY</span>
466
- </h2>
467
- <div class="container mx-auto px-6">
468
  <div class="flex flex-col md:flex-row items-center">
469
  <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
470
  <div class="relative mb-8">
 
40
  <!-- Enhanced Vanta.js Background -->
41
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
42
  <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
43
+ <!-- Navigation -->
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
45
  <div class="container mx-auto px-6 py-4">
46
  <div class="flex justify-between items-center">
 
58
  <div class="hidden md:flex items-center space-x-8">
59
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
60
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
61
+ <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
62
+ <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
63
+ <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
64
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
65
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
66
+ </div>
67
  <div class="flex items-center space-x-4">
68
  <div class="relative">
69
  <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">
 
77
  <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
78
  </div>
79
  </div>
80
+ <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">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  <i data-feather="user" class="mr-2"></i> Login
82
  </a>
83
  <script>
84
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  </div>
86
  </div>
87
  </div>
 
322
  </div>
323
  </div>
324
  </section>
325
+
326
  <!-- About Section -->
327
  <section id="about" class="relative z-10 py-20 bg-black bg-opacity-90">
328
  <div class="container mx-auto px-6">
 
 
 
 
329
  <div class="flex flex-col md:flex-row items-center">
330
  <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
331
  <div class="relative mb-8">
results.html CHANGED
@@ -1,14 +1,13 @@
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 - Stress Reliever Corner</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
- <link rel="stylesheet" href="style.css">
12
  <style>
13
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
14
  .hero-gradient {
@@ -17,45 +16,17 @@
17
  .glow-text {
18
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
19
  }
20
- .leaderboard-card {
21
  transition: all 0.3s ease;
22
  }
23
- .leaderboard-card:hover {
24
  transform: translateY(-5px);
25
- box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
26
- }
27
- .reaction-game {
28
- background: rgba(0, 0, 0, 0.7);
29
- border: 2px solid #e3b341;
30
- border-radius: 10px;
31
- }
32
- .game-button {
33
- transition: all 0.1s ease;
34
- }
35
- .game-button:active {
36
- transform: scale(0.95);
37
- }
38
- .podium {
39
- height: 300px;
40
- }
41
- .podium-1 {
42
- height: 250px;
43
- background: linear-gradient(to bottom, #e3b341, #c89c00);
44
- }
45
- .podium-2 {
46
- height: 200px;
47
- background: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
48
- }
49
- .podium-3 {
50
- height: 150px;
51
- background: linear-gradient(to bottom, #cd7f32, #a66928);
52
  }
53
  </style>
54
  </head>
55
  <body class="bg-black text-white font-['Montserrat']">
56
- <!-- Enhanced Vanta.js Background -->
57
- <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
58
- <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
59
 
60
  <!-- Navigation -->
61
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
@@ -65,35 +36,17 @@
65
  <i data-feather="zap" class="text-yellow-500"></i>
66
  <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
67
  </div>
68
- <!-- Mobile menu button -->
69
- <div class="md:hidden">
70
- <button id="mobile-menu-button" class="text-white focus:outline-none">
71
- <i data-feather="menu"></i>
72
- </button>
73
- </div>
74
- <!-- Desktop Navigation -->
75
  <div class="hidden md:flex items-center space-x-8">
76
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
77
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
78
- <a href="index.html#about" class="text-white hover:text-yellow-500 transition">About</a>
79
- <a href="pricing.html" class="text-white hover:text-yellow-500 transition">Pricing</a>
80
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
81
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
82
- <a href="results.html" class="text-yellow-500 hover:text-yellow-400 transition">Stress Reliever</a>
83
- </div>
84
  <div class="flex items-center space-x-4">
85
- <div class="relative">
86
- <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">
87
- <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>
88
- <span id="current-language">EN</span>
89
- </button>
90
- <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">
91
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
92
- <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>
93
- <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>
94
- <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
95
- </div>
96
- </div>
97
  <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">
98
  <i data-feather="user" class="mr-2"></i> Login
99
  </a>
@@ -101,132 +54,158 @@
101
  </div>
102
  </div>
103
  </nav>
 
 
 
 
 
 
 
 
 
 
 
104
 
105
- <!-- Leaderboard Section -->
106
- <section class="relative z-10 hero-gradient py-20">
107
  <div class="container mx-auto px-6">
108
- <div class="text-center mb-16">
109
- <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
110
- <span class="text-yellow-500 glow-text">STRESS</span> RELIEVER <span class="text-red-500">CORNER</span>
111
- </h1>
112
- <p class="text-xl text-gray-300 max-w-2xl mx-auto">
113
- Take a break and destress with our interactive relaxation tools and games
 
 
 
 
 
 
114
  </p>
115
- </div>
 
 
 
 
 
 
 
116
 
117
- <!-- Interactive Games Section -->
118
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
119
- <!-- Reaction Time Game -->
120
- <div class="reaction-game p-8 rounded-xl">
121
- <h3 class="text-2xl font-bold mb-4 text-yellow-500">Reaction Time Challenge</h3>
 
 
 
 
122
  <p class="text-gray-300 mb-6">
123
- Test your reflexes! Click the button as soon as it turns green. Your best time will be recorded.
124
  </p>
125
- <div class="flex flex-col items-center">
126
- <div id="reaction-display" class="w-full h-16 bg-gray-900 rounded-lg flex items-center justify-center mb-4">
127
- <p id="reaction-message" class="text-xl">Click to start</p>
128
- </div>
129
- <button id="reaction-button" class="w-full h-32 bg-red-500 rounded-lg flex items-center justify-center text-2xl font-bold game-button">
130
- WAIT
131
- </button>
132
- <div class="mt-4 text-center">
133
- <p class="text-gray-300">Best Time: <span id="best-time" class="text-yellow-500">0.00</span>s</p>
134
- <p class="text-gray-300">Your Time: <span id="current-time" class="text-yellow-500">-</span></p>
135
- </div>
136
  </div>
137
  </div>
138
 
139
- <!-- Memory Game -->
140
- <div class="reaction-game p-8 rounded-xl">
141
- <h3 class="text-2xl font-bold mb-4 text-yellow-500">Memory Challenge</h3>
 
 
 
 
 
 
142
  <p class="text-gray-300 mb-6">
143
- Remember the sequence of lights and repeat it correctly. How far can you go?
144
  </p>
145
- <div class="flex flex-col items-center">
146
- <div class="grid grid-cols-2 gap-4 mb-4">
147
- <div data-tile="1" class="w-16 h-16 bg-red-500 rounded-lg game-button opacity-70"></div>
148
- <div data-tile="2" class="w-16 h-16 bg-blue-500 rounded-lg game-button opacity-70"></div>
149
- <div data-tile="3" class="w-16 h-16 bg-green-500 rounded-lg game-button opacity-70"></div>
150
- <div data-tile="4" class="w-16 h-16 bg-yellow-500 rounded-lg game-button opacity-70"></div>
151
- </div>
152
- <button id="memory-start" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-6 py-2 rounded-lg transition">
153
- Start Game
154
- </button>
155
- <div class="mt-4 text-center">
156
- <p class="text-gray-300">Level: <span id="memory-level" class="text-yellow-500">0</span></p>
157
- <p class="text-gray-300">Best: <span id="memory-best" class="text-yellow-500">0</span></p>
158
- </div>
159
  </div>
160
  </div>
161
  </div>
162
 
163
- <!-- Podium -->
164
- <div class="mb-16">
165
- <h2 class="text-3xl font-bold font-['Bebas+Neue'] tracking-wider text-center mb-8">
166
- TOP <span class="text-yellow-500">3</span> RELAXATION TECHNIQUES
167
- </h2>
168
- <div class="flex justify-center items-end space-x-8 md:space-x-16 podium">
169
- <div class="flex flex-col items-center">
170
- <div class="podium-2 w-24 md:w-32 rounded-t-lg flex items-end justify-center pb-4">
171
- <span class="text-3xl font-bold">2</span>
172
- </div>
173
- <div class="text-center mt-4">
174
- <p class="font-bold">Sarah K.</p>
175
- <p class="text-yellow-500">Reaction: 0.19s</p>
176
- <p class="text-gray-400">Memory: 12</p>
177
- </div>
178
- </div>
179
- <div class="flex flex-col items-center">
180
- <div class="podium-1 w-24 md:w-32 rounded-t-lg flex items-end justify-center pb-4">
181
- <span class="text-3xl font-bold">1</span>
182
  </div>
183
- <div class="text-center mt-4">
184
- <p class="font-bold">Alex M.</p>
185
- <p class="text-yellow-500">Reaction: 0.15s</p>
186
- <p class="text-gray-400">Memory: 15</p>
187
  </div>
188
  </div>
189
- <div class="flex flex-col items-center">
190
- <div class="podium-3 w-24 md:w-32 rounded-t-lg flex items-end justify-center pb-4">
191
- <span class="text-3xl font-bold">3</span>
 
 
 
 
192
  </div>
193
- <div class="text-center mt-4">
194
- <p class="font-bold">Jamie L.</p>
195
- <p class="text-yellow-500">Reaction: 0.21s</p>
196
- <p class="text-gray-400">Memory: 10</p>
197
  </div>
198
  </div>
199
  </div>
200
  </div>
201
 
202
- <!-- Full Leaderboard -->
203
- <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 overflow-hidden">
204
- <div class="p-6 border-b border-yellow-500">
205
- <h2 class="text-3xl font-bold font-['Bebas+Neue'] tracking-wider">
206
- RELAXATION <span class="text-yellow-500">ACTIVITIES</span>
207
- </h2>
208
- </div>
209
- <div class="overflow-x-auto">
210
- <table class="w-full">
211
- <thead>
212
- <tr class="border-b border-gray-700">
213
- <th class="px-6 py-4 text-left">Activity</th>
214
- <th class="px-6 py-4 text-left">Description</th>
215
- <th class="px-6 py-4 text-center">Duration</th>
216
- <th class="px-6 py-4 text-center">Effectiveness</th>
217
- <th class="px-6 py-4 text-center">Rating</th>
218
- </tr>
219
- </thead>
220
- <tbody id="leaderboard-body">
221
- <!-- Leaderboard data will be populated by JavaScript -->
222
- </tbody>
223
- </table>
224
  </div>
225
  </div>
226
  </div>
227
  </section>
228
 
229
- <!-- Footer -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
231
  <div class="container mx-auto px-6">
232
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
@@ -251,46 +230,31 @@
251
  <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
252
  <i data-feather="linkedin"></i>
253
  </a>
254
- <a href="https://www.tiktok.com/@amplify.ve?is_from_webapp=1&sender_device=pc" target="_blank" class="text-gray-400 hover:text-yellow-500 transition">
255
- <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-tiktok">
256
- <path d="M21 8a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V8z"></path>
257
- <path d="M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0z"></path>
258
- <path d="M17 6v4"></path>
259
- <path d="M13 6v4"></path>
260
- <path d="M17 14v4"></path>
261
- <path d="M13 14v4"></path>
262
- </svg>
263
- </a>
264
  </div>
265
  </div>
266
-
267
  <div>
268
- <h3 class="text-lg font-bold text-white mb-4">Products</h3>
269
  <ul class="space-y-2">
270
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
271
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
272
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
273
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
274
  </ul>
275
  </div>
276
-
277
- <div>
278
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
279
  <ul class="space-y-2">
280
- <li><a href="index.html#about" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
281
- <li><a href="pricing.html" class="text-gray-400 hover:text-yellow-500 transition">Pricing</a></li>
282
  <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency</a></li>
283
- <li><a href="results.html" class="text-yellow-500 hover:text-yellow-400 transition">Leaderboard</a></li>
284
  </ul>
285
  </div>
286
 
287
  <div>
288
  <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
289
  <ul class="space-y-2">
290
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
291
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li>
292
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
293
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Community</a></li>
294
  </ul>
295
  </div>
296
  </div>
@@ -302,28 +266,11 @@
302
  <div class="flex space-x-6">
303
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
304
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
305
- <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Cookies</a>
306
  </div>
307
  </div>
308
  </div>
309
  </footer>
310
 
311
- <!-- Mobile Menu -->
312
- <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center">
313
- <button id="mobile-menu-close" class="absolute top-4 right-4 text-white text-2xl">
314
- <i data-feather="x"></i>
315
- </button>
316
- <div class="flex flex-col space-y-6 text-center">
317
- <a href="index.html" class="text-2xl text-white hover:text-yellow-500 transition">Home</a>
318
- <a href="index.html#features" class="text-2xl text-white hover:text-yellow-500 transition">Features</a>
319
- <a href="index.html#about" class="text-2xl text-white hover:text-yellow-500 transition">About</a>
320
- <a href="pricing.html" class="text-2xl text-white hover:text-yellow-500 transition">Pricing</a>
321
- <a href="currency.html" class="text-2xl text-white hover:text-yellow-500 transition">Currency</a>
322
- <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
323
- <a href="results.html" class="text-2xl text-yellow-500 hover:text-yellow-400 transition">Stress Reliever</a>
324
- </div>
325
- </div>
326
-
327
  <script>
328
  // Initialize Vanta.js background
329
  VANTA.GLOBE({
@@ -333,217 +280,15 @@
333
  gyroControls: false,
334
  minHeight: 200.00,
335
  minWidth: 200.00,
336
- scale: 1.20,
337
- scaleMobile: 1.20,
338
- color: 0xe3b341,
339
- color2: 0x9b0000,
340
- backgroundColor: 0x111111,
341
- size: 1.00,
342
- spacing: 20.00,
343
- showLines: false,
344
- points: 10.00,
345
- maxDistance: 25.00
346
  });
347
 
348
- // Sample leaderboard data
349
- const leaderboardData = [
350
- { rank: 1, name: "Alex M.", reaction: 0.15, memory: 15, score: 95 },
351
- { rank: 2, name: "Sarah K.", reaction: 0.19, memory: 12, score: 88 },
352
- { rank: 3, name: "Jamie L.", reaction: 0.21, memory: 10, score: 82 },
353
- { rank: 4, name: "Mike T.", reaction: 0.23, memory: 9, score: 78 },
354
- { rank: 5, name: "Emma S.", reaction: 0.24, memory: 8, score: 75 },
355
- { rank: 6, name: "David R.", reaction: 0.25, memory: 7, score: 72 },
356
- { rank: 7, name: "Olivia W.", reaction: 0.26, memory: 7, score: 70 },
357
- { rank: 8, name: "Lucas G.", reaction: 0.27, memory: 6, score: 67 },
358
- { rank: 9, name: "Sophia B.", reaction: 0.28, memory: 6, score: 65 },
359
- { rank: 10, name: "Noah H.", reaction: 0.29, memory: 5, score: 62 }
360
- ];
361
-
362
- // Populate leaderboard
363
- function populateLeaderboard() {
364
- const tbody = document.getElementById('leaderboard-body');
365
- tbody.innerHTML = '';
366
-
367
- leaderboardData.forEach(player => {
368
- const row = document.createElement('tr');
369
- row.className = 'border-b border-gray-700 hover:bg-gray-900';
370
- row.innerHTML = `
371
- <td class="px-6 py-4 font-bold ${player.rank <= 3 ? 'text-yellow-500' : ''}">${player.rank}</td>
372
- <td class="px-6 py-4">${player.name}</td>
373
- <td class="px-6 py-4 text-center">${player.reaction}s</td>
374
- <td class="px-6 py-4 text-center">${player.memory}</td>
375
- <td class="px-6 py-4 text-center font-bold">${player.score}</td>
376
- `;
377
- tbody.appendChild(row);
378
- });
379
- }
380
-
381
- // Reaction Time Game
382
- let reactionStartTime;
383
- let bestReactionTime = localStorage.getItem('bestReactionTime') || 0;
384
- document.getElementById('best-time').textContent = bestReactionTime;
385
-
386
- document.getElementById('reaction-button').addEventListener('click', function() {
387
- const button = this;
388
- const display = document.getElementById('reaction-display');
389
- const message = document.getElementById('reaction-message');
390
-
391
- if (button.textContent === 'WAIT') {
392
- // Start the game
393
- button.textContent = 'WAIT';
394
- button.style.backgroundColor = '#ef4444';
395
- message.textContent = 'Wait for green...';
396
-
397
- // Random delay between 1-3 seconds
398
- const delay = Math.random() * 2000 + 1000;
399
-
400
- setTimeout(() => {
401
- button.textContent = 'CLICK NOW!';
402
- button.style.backgroundColor = '#10B981';
403
- reactionStartTime = new Date().getTime();
404
- message.textContent = 'Click now!';
405
- }, delay);
406
- } else if (button.textContent === 'CLICK NOW!') {
407
- // User reacted
408
- const reactionTime = (new Date().getTime() - reactionStartTime) / 1000;
409
- document.getElementById('current-time').textContent = reactionTime.toFixed(2);
410
-
411
- // Update best time if better
412
- if (reactionTime < bestReactionTime || bestReactionTime === 0) {
413
- bestReactionTime = reactionTime.toFixed(2);
414
- document.getElementById('best-time').textContent = bestReactionTime;
415
- localStorage.setItem('bestReactionTime', bestReactionTime);
416
- }
417
-
418
- // Reset
419
- button.textContent = 'WAIT';
420
- button.style.backgroundColor = '#ef4444';
421
- message.textContent = 'Click to try again';
422
- }
423
- });
424
-
425
- // Memory Game
426
- let memorySequence = [];
427
- let playerSequence = [];
428
- let memoryLevel = 0;
429
- let bestMemoryLevel = localStorage.getItem('bestMemoryLevel') || 0;
430
- document.getElementById('memory-best').textContent = bestMemoryLevel;
431
-
432
- const tiles = document.querySelectorAll('[data-tile]');
433
- const memoryStartBtn = document.getElementById('memory-start');
434
-
435
- memoryStartBtn.addEventListener('click', startMemoryGame);
436
-
437
- function startMemoryGame() {
438
- memorySequence = [];
439
- playerSequence = [];
440
- memoryLevel = 0;
441
- updateMemoryDisplay();
442
- nextLevel();
443
- }
444
-
445
- function nextLevel() {
446
- memoryLevel++;
447
- updateMemoryDisplay();
448
- playerSequence = [];
449
-
450
- // Add random tile to sequence
451
- memorySequence.push(Math.floor(Math.random() * 4) + 1);
452
-
453
- // Show sequence
454
- showSequence();
455
- }
456
-
457
- function showSequence() {
458
- let i = 0;
459
- const interval = setInterval(() => {
460
- highlightTile(memorySequence[i]);
461
- i++;
462
- if (i >= memorySequence.length) {
463
- clearInterval(interval);
464
- }
465
- }, 800);
466
- }
467
-
468
- function highlightTile(tileNum) {
469
- const tile = document.querySelector(`[data-tile="${tileNum}"]`);
470
- tile.style.opacity = '1';
471
- setTimeout(() => {
472
- tile.style.opacity = '0.7';
473
- }, 500);
474
- }
475
-
476
- tiles.forEach(tile => {
477
- tile.addEventListener('click', () => {
478
- if (memoryLevel === 0) return;
479
-
480
- const tileNum = parseInt(tile.getAttribute('data-tile'));
481
- highlightTile(tileNum);
482
- playerSequence.push(tileNum);
483
-
484
- // Check if sequence is correct
485
- for (let i = 0; i < playerSequence.length; i++) {
486
- if (playerSequence[i] !== memorySequence[i]) {
487
- gameOver();
488
- return;
489
- }
490
- }
491
-
492
- // If full sequence is correct, go to next level
493
- if (playerSequence.length === memorySequence.length) {
494
- setTimeout(nextLevel, 1000);
495
- }
496
- });
497
- });
498
-
499
- function gameOver() {
500
- alert(`Game Over! You reached level ${memoryLevel}`);
501
-
502
- // Update best level
503
- if (memoryLevel > bestMemoryLevel) {
504
- bestMemoryLevel = memoryLevel;
505
- document.getElementById('memory-best').textContent = bestMemoryLevel;
506
- localStorage.setItem('bestMemoryLevel', bestMemoryLevel);
507
- }
508
-
509
- memoryLevel = 0;
510
- updateMemoryDisplay();
511
- }
512
-
513
- function updateMemoryDisplay() {
514
- document.getElementById('memory-level').textContent = memoryLevel;
515
- }
516
-
517
- // Initialize
518
- document.addEventListener('DOMContentLoaded', function() {
519
- feather.replace();
520
- populateLeaderboard();
521
-
522
- // Update leaderboard every 30 seconds (simulated)
523
- setInterval(() => {
524
- // In a real app, you would fetch new data from a server
525
- // This just shuffles the existing data for demonstration
526
- leaderboardData.sort(() => Math.random() - 0.5);
527
- leaderboardData.forEach((player, index) => {
528
- player.rank = index + 1;
529
- });
530
- populateLeaderboard();
531
- }, 30000);
532
- });
533
-
534
- // Initialize mobile menu
535
- const mobileMenuButton = document.getElementById('mobile-menu-button');
536
- const mobileMenu = document.getElementById('mobile-menu');
537
- const mobileMenuClose = document.getElementById('mobile-menu-close');
538
-
539
- mobileMenuButton.addEventListener('click', () => {
540
- mobileMenu.classList.remove('hidden');
541
- feather.replace();
542
- });
543
-
544
- mobileMenuClose.addEventListener('click', () => {
545
- mobileMenu.classList.add('hidden');
546
- });
547
  </script>
548
  </body>
549
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Competition Results - Amplify</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 {
 
16
  .glow-text {
17
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
18
  }
19
+ .podium-item {
20
  transition: all 0.3s ease;
21
  }
22
+ .podium-item:hover {
23
  transform: translateY(-5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
  </style>
26
  </head>
27
  <body class="bg-black text-white font-['Montserrat']">
28
+ <!-- Vanta.js Background -->
29
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
30
 
31
  <!-- Navigation -->
32
  <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
 
36
  <i data-feather="zap" class="text-yellow-500"></i>
37
  <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
38
  </div>
39
+
 
 
 
 
 
 
40
  <div class="hidden md:flex items-center space-x-8">
41
  <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
42
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
43
+ <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
44
+ <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
45
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
46
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
47
+ <a href="results.html" class="text-yellow-500 hover:text-yellow-400 transition">Results</a>
48
+ </div>
49
  <div class="flex items-center space-x-4">
 
 
 
 
 
 
 
 
 
 
 
 
50
  <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">
51
  <i data-feather="user" class="mr-2"></i> Login
52
  </a>
 
54
  </div>
55
  </div>
56
  </nav>
57
+ <!-- Testimonials Hero Section -->
58
+ <section class="relative z-10 hero-gradient py-32">
59
+ <div class="container mx-auto px-6 text-center">
60
+ <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-8 tracking-wider">
61
+ <span class="text-yellow-500 glow-text">SUCCESS</span> <span class="text-white">STORIES</span>
62
+ </h1>
63
+ <p class="text-xl md:text-2xl max-w-4xl mx-auto text-gray-300">
64
+ Hear from athletes and professionals who transformed their performance with Amplify
65
+ </p>
66
+ </div>
67
+ </section>
68
 
69
+ <!-- Testimonials Section -->
70
+ <section class="relative z-10 py-20 bg-black bg-opacity-90">
71
  <div class="container mx-auto px-6">
72
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
73
+ <!-- Testimonial 1 -->
74
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition">
75
+ <div class="flex items-center mb-6">
76
+ <img src="http://static.photos/sport/200x200/1" alt="Alex Johnson" class="w-16 h-16 rounded-full border-2 border-yellow-500 mr-4">
77
+ <div>
78
+ <h3 class="text-xl font-bold">Alex Johnson</h3>
79
+ <p class="text-yellow-500">Professional Athlete</p>
80
+ </div>
81
+ </div>
82
+ <p class="text-gray-300 mb-6">
83
+ "Amplify's VR training helped me overcome performance anxiety. I went from choking under pressure to winning my first championship!"
84
  </p>
85
+ <div class="flex">
86
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
87
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
88
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
89
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
90
+ <i data-feather="star" class="text-yellow-500"></i>
91
+ </div>
92
+ </div>
93
 
94
+ <!-- Testimonial 2 -->
95
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition">
96
+ <div class="flex items-center mb-6">
97
+ <img src="http://static.photos/office/200x200/2" alt="Sarah Chen" class="w-16 h-16 rounded-full border-2 border-yellow-500 mr-4">
98
+ <div>
99
+ <h3 class="text-xl font-bold">Sarah Chen</h3>
100
+ <p class="text-yellow-500">Executive</p>
101
+ </div>
102
+ </div>
103
  <p class="text-gray-300 mb-6">
104
+ "The AR coaching completely transformed my public speaking. I went from dreading presentations to being invited to keynote at major conferences."
105
  </p>
106
+ <div class="flex">
107
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
108
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
109
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
110
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
111
+ <i data-feather="star" class="text-yellow-500"></i>
 
 
 
 
 
112
  </div>
113
  </div>
114
 
115
+ <!-- Testimonial 3 -->
116
+ <div class="bg-gradient-to-br from-black to-gray-900 p-8 rounded-xl border border-yellow-500 transform hover:scale-105 transition">
117
+ <div class="flex items-center mb-6">
118
+ <img src="http://static.photos/people/200x200/3" alt="Marcus Wright" class="w-16 h-16 rounded-full border-2 border-yellow-500 mr-4">
119
+ <div>
120
+ <h3 class="text-xl font-bold">Marcus Wright</h3>
121
+ <p class="text-yellow-500">Surgeon</p>
122
+ </div>
123
+ </div>
124
  <p class="text-gray-300 mb-6">
125
+ "The biofeedback training helped me maintain focus during long surgeries. My precision and stamina have improved dramatically."
126
  </p>
127
+ <div class="flex">
128
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
129
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
130
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
131
+ <i data-feather="star" class="text-yellow-500 mr-1"></i>
132
+ <i data-feather="star" class="text-yellow-500"></i>
 
 
 
 
 
 
 
 
133
  </div>
134
  </div>
135
  </div>
136
 
137
+ <!-- Video Testimonials -->
138
+ <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-6 mb-12">
139
+ <h2 class="text-3xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
140
+ <span class="text-yellow-500">IN</span> <span class="text-white">THEIR</span> <span class="text-red-500">WORDS</span>
141
+ </h2>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
144
+ <div class="relative overflow-hidden rounded-lg border-2 border-yellow-500">
145
+ <img src="http://static.photos/people/640x360/4" alt="Testimonial thumbnail" class="w-full h-full object-cover">
146
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
147
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black rounded-full p-4">
148
+ <i data-feather="play" class="w-8 h-8"></i>
149
+ </button>
 
 
 
 
 
 
150
  </div>
151
+ <div class="absolute bottom-0 left-0 p-4">
152
+ <h3 class="font-bold text-white">Alex's Championship Journey</h3>
 
 
153
  </div>
154
  </div>
155
+
156
+ <div class="relative overflow-hidden rounded-lg border-2 border-yellow-500">
157
+ <img src="http://static.photos/office/640x360/5" alt="Testimonial thumbnail" class="w-full h-full object-cover">
158
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
159
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black rounded-full p-4">
160
+ <i data-feather="play" class="w-8 h-8"></i>
161
+ </button>
162
  </div>
163
+ <div class="absolute bottom-0 left-0 p-4">
164
+ <h3 class="font-bold text-white">Sarah's Public Speaking Breakthrough</h3>
 
 
165
  </div>
166
  </div>
167
  </div>
168
  </div>
169
 
170
+ <!-- Results Stats -->
171
+ <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-6">
172
+ <h2 class="text-3xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
173
+ <span class="text-yellow-500">PROVEN</span> <span class="text-white">RESULTS</span>
174
+ </h2>
175
+
176
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
177
+ <div class="text-center">
178
+ <div class="text-5xl font-bold text-yellow-500 mb-2">92%</div>
179
+ <div class="text-gray-300">Reported performance improvement</div>
180
+ </div>
181
+ <div class="text-center">
182
+ <div class="text-5xl font-bold text-yellow-500 mb-2">4.9/5</div>
183
+ <div class="text-gray-300">Average user rating</div>
184
+ </div>
185
+ <div class="text-center">
186
+ <div class="text-5xl font-bold text-yellow-500 mb-2">10K+</div>
187
+ <div class="text-gray-300">Lives transformed</div>
188
+ </div>
 
 
 
189
  </div>
190
  </div>
191
  </div>
192
  </section>
193
 
194
+ <!-- CTA Section -->
195
+ <section class="relative z-10 py-20 bg-gradient-to-r from-black via-gray-900 to-black">
196
+ <div class="container mx-auto px-6 text-center">
197
+ <h2 class="text-4xl md:text-5xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider">
198
+ <span class="text-yellow-500">READY</span> <span class="text-white">TO</span> <span class="text-red-500">TRANSFORM</span>
199
+ </h2>
200
+ <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
201
+ Join thousands who have elevated their performance with our mental training system
202
+ </p>
203
+ <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="bg-gradient-to-r from-yellow-500 to-[#9b0000] hover:from-yellow-600 hover:to-[#7a0000] text-black font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg inline-block">
204
+ Start Free Trial
205
+ </a>
206
+ </div>
207
+ </section>
208
+ <!-- Footer -->
209
  <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
210
  <div class="container mx-auto px-6">
211
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 
230
  <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
231
  <i data-feather="linkedin"></i>
232
  </a>
 
 
 
 
 
 
 
 
 
 
233
  </div>
234
  </div>
 
235
  <div>
236
+ <h3 class="text-lg font-bold text-white mb-4">Success Stories</h3>
237
  <ul class="space-y-2">
238
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Athletes</a></li>
239
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Professionals</a></li>
240
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Students</a></li>
 
241
  </ul>
242
  </div>
243
+ <div>
 
244
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
245
  <ul class="space-y-2">
246
+ <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
 
247
  <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency</a></li>
248
+ <li><a href="events.html" class="text-gray-400 hover:text-yellow-500 transition">Events</a></li>
249
  </ul>
250
  </div>
251
 
252
  <div>
253
  <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
254
  <ul class="space-y-2">
255
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Training Tips</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Performance Metrics</a></li>
257
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
 
258
  </ul>
259
  </div>
260
  </div>
 
266
  <div class="flex space-x-6">
267
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
268
  <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
 
269
  </div>
270
  </div>
271
  </div>
272
  </footer>
273
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  <script>
275
  // Initialize Vanta.js background
276
  VANTA.GLOBE({
 
280
  gyroControls: false,
281
  minHeight: 200.00,
282
  minWidth: 200.00,
283
+ scale: 1.00,
284
+ scaleMobile: 1.00,
285
+ color: 0xb8860b,
286
+ backgroundColor: 0x0,
287
+ size: 0.8
 
 
 
 
 
288
  });
289
 
290
+ // Feather icons
291
+ feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
292
  </script>
293
  </body>
294
  </html>