Hugging Face's logo

Spaces:
devmgllc
/
quantumvault-encryptor
Running

App Files Community
devmgllc commited on
Commit
cf71cf8
·
verified ·
1 Parent(s): 65abd06

is it possible to combine the idividual pages into one single landing page with clickable elements

Browse files
Files changed (1) hide show
  1. index.html +152 -22
index.html CHANGED
@@ -47,23 +47,23 @@
47
  <body class="bg-black text-white font-mono" id="vanta-bg">
48
  <div class="container mx-auto px-4">
49
  <!-- Navigation -->
50
- <nav class="flex justify-between items-center py-6">
51
  <div class="text-3xl font-bold glow-text">
52
  <span class="qv-brand">QuantumVault</span> <span class="text-purple-400">⚡</span>
53
  </div>
54
  <div class="hidden md:flex space-x-8">
55
- <a href="protocol.html" class="qv-nav-link">Protocol</a>
56
- <a href="about.html" class="qv-nav-link">Vision</a>
57
- <a href="research.html" class="qv-nav-link">Research</a>
58
- <a href="team.html" class="qv-nav-link">Team</a>
59
  </div>
60
  <button class="qv-mobile-menu md:hidden">
61
  <i data-feather="menu"></i>
62
  </button>
63
  </nav>
64
- <!-- Hero Section -->
65
- <section class="min-h-screen flex items-center justify-center">
66
- <div class="text-center max-w-4xl">
67
  <h1 class="text-5xl md:text-7xl font-extrabold mb-6 glow-text">
68
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
69
  Quantum Entangled Encryption
@@ -74,19 +74,52 @@
74
  The world's first zero-trust system immune to modern threats.
75
  </p>
76
  <div class="flex flex-col sm:flex-row justify-center gap-4">
77
- <button class="gradient-border px-8 py-4 text-lg font-bold pulse hover:scale-105 transition">
78
  Explore Protocol
79
- </button>
80
- <button class="border-2 border-purple-600 px-8 py-4 text-lg font-bold hover:bg-purple-900/30 hover:scale-105 transition">
81
  Join Research
82
- </button>
83
  </div>
84
- </div>
85
  </section>
86
-
87
  <!-- Features Grid -->
88
- <section class="py-20">
89
- <h2 class="text-4xl font-bold text-center mb-16 glow-text">Core Innovations</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  <div class="grid md:grid-cols-3 gap-8">
91
  <!-- Card 1 -->
92
  <div class="gradient-border p-6 rounded-xl hover:scale-105 transition">
@@ -120,10 +153,30 @@
120
  </div>
121
  </div>
122
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
 
124
- <!-- Tech Demo -->
125
- <section class="py-20">
126
- <div class="flex flex-col md:flex-row items-center gap-12">
127
  <div class="md:w-1/2">
128
  <h2 class="text-4xl font-bold mb-6 glow-text">Quantum Entanglement in Action</h2>
129
  <p class="text-xl mb-8 text-gray-300">
@@ -160,10 +213,71 @@
160
  </div>
161
  </div>
162
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
 
164
- <!-- CTA -->
165
  <section class="py-20 text-center">
166
- <div class="max-w-3xl mx-auto">
167
  <h2 class="text-4xl font-bold mb-6 glow-text">Join the Encryption Revolution</h2>
168
  <p class="text-xl mb-10 text-gray-300">
169
  Contribute to our open-source quantum encryption protocol or implement it in your organization.
@@ -178,10 +292,26 @@
178
  </div>
179
  </div>
180
  </section>
181
-
182
  <!-- Footer -->
183
  <footer class="py-12 border-t border-gray-800">
184
  <div class="grid md:grid-cols-4 gap-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  <div>
186
  <h3 class="text-xl font-bold mb-4">QuantumVault</h3>
187
  <p class="text-gray-400">
 
47
  <body class="bg-black text-white font-mono" id="vanta-bg">
48
  <div class="container mx-auto px-4">
49
  <!-- Navigation -->
50
+ <nav class="flex justify-between items-center py-6 sticky top-0 z-50 bg-black/80 backdrop-blur-sm">
51
  <div class="text-3xl font-bold glow-text">
52
  <span class="qv-brand">QuantumVault</span> <span class="text-purple-400">⚡</span>
53
  </div>
54
  <div class="hidden md:flex space-x-8">
55
+ <a href="#protocol" class="qv-nav-link hover:text-purple-400 transition">Protocol</a>
56
+ <a href="#vision" class="qv-nav-link hover:text-purple-400 transition">Vision</a>
57
+ <a href="#research" class="qv-nav-link hover:text-purple-400 transition">Research</a>
58
+ <a href="#team" class="qv-nav-link hover:text-purple-400 transition">Team</a>
59
  </div>
60
  <button class="qv-mobile-menu md:hidden">
61
  <i data-feather="menu"></i>
62
  </button>
63
  </nav>
64
+ <!-- Hero Section -->
65
+ <section class="min-h-screen flex items-center justify-center" id="home">
66
+ <div class="text-center max-w-4xl">
67
  <h1 class="text-5xl md:text-7xl font-extrabold mb-6 glow-text">
68
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
69
  Quantum Entangled Encryption
 
74
  The world's first zero-trust system immune to modern threats.
75
  </p>
76
  <div class="flex flex-col sm:flex-row justify-center gap-4">
77
+ <a href="#protocol" class="gradient-border px-8 py-4 text-lg font-bold pulse hover:scale-105 transition">
78
  Explore Protocol
79
+ </a>
80
+ <a href="#research" class="border-2 border-purple-600 px-8 py-4 text-lg font-bold hover:bg-purple-900/30 hover:scale-105 transition">
81
  Join Research
82
+ </a>
83
  </div>
84
+ </div>
85
  </section>
 
86
  <!-- Features Grid -->
87
+ <section class="py-20" id="protocol">
88
+ <div class="text-center mb-16">
89
+ <h2 class="text-4xl font-bold glow-text">QuantumVault Protocol</h2>
90
+ <p class="text-xl mt-4 text-gray-300">The world's first biometric-tied quantum encryption system</p>
91
+ </div>
92
+
93
+ <!-- Protocol Diagram -->
94
+ <div class="bg-black/50 rounded-xl p-8 border border-gray-700 mb-16">
95
+ <div class="grid md:grid-cols-3 gap-8 items-center">
96
+ <div class="text-center">
97
+ <div class="inline-block p-6 rounded-full bg-purple-900/30 mb-4">
98
+ <i data-feather="fingerprint" class="w-12 h-12 text-purple-400"></i>
99
+ </div>
100
+ <h3 class="text-xl font-bold mb-2">Biometric Input</h3>
101
+ <p class="text-gray-400">User provides unique biological markers</p>
102
+ </div>
103
+ <div class="text-center">
104
+ <div class="relative flex justify-center">
105
+ <div class="absolute h-1 w-full bg-gradient-to-r from-purple-600 to-blue-500 top-1/2 transform -translate-y-1/2"></div>
106
+ <div class="relative p-6 rounded-full bg-blue-900/30">
107
+ <i data-feather="cpu" class="w-12 h-12 text-blue-400 animate-spin"></i>
108
+ </div>
109
+ </div>
110
+ <h3 class="text-xl font-bold mb-2 mt-4">Quantum Processor</h3>
111
+ <p class="text-gray-400">Creates entangled particle pairs</p>
112
+ </div>
113
+ <div class="text-center">
114
+ <div class="inline-block p-6 rounded-full bg-green-900/30 mb-4">
115
+ <i data-feather="lock" class="w-12 h-12 text-green-400"></i>
116
+ </div>
117
+ <h3 class="text-xl font-bold mb-2">Quantum Hash</h3>
118
+ <p class="text-gray-400">Unique encrypted output</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <h2 class="text-4xl font-bold text-center mb-16 glow-text">Core Innovations</h2>
123
  <div class="grid md:grid-cols-3 gap-8">
124
  <!-- Card 1 -->
125
  <div class="gradient-border p-6 rounded-xl hover:scale-105 transition">
 
153
  </div>
154
  </div>
155
  </section>
156
+ <!-- Vision Section -->
157
+ <section class="py-20" id="vision">
158
+ <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
159
+ <div>
160
+ <h2 class="text-4xl font-bold mb-6 glow-text">The Universal Trust Layer</h2>
161
+ <p class="text-lg mb-6 text-gray-300">
162
+ QuantumVault provides the missing infrastructure layer that makes digital threats fundamentally impossible.
163
+ </p>
164
+ <div class="gradient-border p-1 rounded-lg inline-block">
165
+ <div class="bg-black p-6 rounded-lg">
166
+ <p class="text-purple-400 italic">"Security shouldn't be a feature - it should be the foundation"</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <div class="relative">
171
+ <img src="http://static.photos/technology/640x360/1" alt="Quantum Network" class="rounded-xl shadow-2xl">
172
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-600 rounded-full mix-blend-screen opacity-20 blur-xl"></div>
173
+ </div>
174
+ </div>
175
+ </section>
176
 
177
+ <!-- Research Section -->
178
+ <section class="py-20" id="research">
179
+ <div class="flex flex-col md:flex-row items-center gap-12">
180
  <div class="md:w-1/2">
181
  <h2 class="text-4xl font-bold mb-6 glow-text">Quantum Entanglement in Action</h2>
182
  <p class="text-xl mb-8 text-gray-300">
 
213
  </div>
214
  </div>
215
  </section>
216
+ <div class="qv-card-grid">
217
+ <div class="qv-card">
218
+ <div class="qv-card-icon">
219
+ <i data-feather="book"></i>
220
+ </div>
221
+ <h3 class="qv-card-title">Published Papers</h3>
222
+ <p class="qv-card-text">
223
+ Access our latest research papers on quantum entanglement and biometric security.
224
+ </p>
225
+ </div>
226
+
227
+ <div class="qv-card">
228
+ <div class="qv-card-icon">
229
+ <i data-feather="cpu"></i>
230
+ </div>
231
+ <h3 class="qv-card-title">Experiments</h3>
232
+ <p class="qv-card-text">
233
+ Explore our quantum computing experiments and real-world implementations.
234
+ </p>
235
+ </div>
236
+
237
+ <div class="qv-card">
238
+ <div class="qv-card-icon">
239
+ <i data-feather="users"></i>
240
+ </div>
241
+ <h3 class="qv-card-title">Collaborations</h3>
242
+ <p class="qv-card-text">
243
+ Join our research network and collaborate on cutting-edge quantum security projects.
244
+ </p>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Team Section -->
250
+ <section class="py-20" id="team">
251
+ <div class="qv-team-grid">
252
+ <div class="qv-team-card">
253
+ <img src="http://static.photos/people/200x200/1" alt="Dr. Alice Zhang" class="qv-team-img">
254
+ <h3 class="qv-team-name">Dr. Alice Zhang</h3>
255
+ <p class="qv-team-title">Chief Quantum Scientist</p>
256
+ </div>
257
+
258
+ <div class="qv-team-card">
259
+ <img src="http://static.photos/people/200x200/2" alt="Dr. Marcus Chen" class="qv-team-img">
260
+ <h3 class="qv-team-name">Dr. Marcus Chen</h3>
261
+ <p class="qv-team-title">Biometrics Lead</p>
262
+ </div>
263
+
264
+ <div class="qv-team-card">
265
+ <img src="http://static.photos/people/200x200/3" alt="Sophia Kurosawa" class="qv-team-img">
266
+ <h3 class="qv-team-name">Sophia Kurosawa</h3>
267
+ <p class="qv-team-title">Security Architect</p>
268
+ </div>
269
+
270
+ <div class="qv-team-card">
271
+ <img src="http://static.photos/people/200x200/4" alt="Raj Patel" class="qv-team-img">
272
+ <h3 class="qv-team-name">Raj Patel</h3>
273
+ <p class="qv-team-title">Quantum Engineer</p>
274
+ </div>
275
+ </div>
276
+ </section>
277
 
278
+ <!-- Final CTA -->
279
  <section class="py-20 text-center">
280
+ <div class="max-w-3xl mx-auto">
281
  <h2 class="text-4xl font-bold mb-6 glow-text">Join the Encryption Revolution</h2>
282
  <p class="text-xl mb-10 text-gray-300">
283
  Contribute to our open-source quantum encryption protocol or implement it in your organization.
 
292
  </div>
293
  </div>
294
  </section>
 
295
  <!-- Footer -->
296
  <footer class="py-12 border-t border-gray-800">
297
  <div class="grid md:grid-cols-4 gap-8">
298
+ <div>
299
+ <h3 class="text-xl font-bold mb-4">QuantumVault</h3>
300
+ <p class="text-gray-400">
301
+ The future of unbreakable encryption powered by quantum entanglement and biometrics.
302
+ </p>
303
+ </div>
304
+ <div>
305
+ <h4 class="font-bold mb-4">Navigation</h4>
306
+ <ul class="space-y-2">
307
+ <li><a href="#home" class="text-gray-400 hover:text-purple-400">Home</a></li>
308
+ <li><a href="#protocol" class="text-gray-400 hover:text-purple-400">Protocol</a></li>
309
+ <li><a href="#vision" class="text-gray-400 hover:text-purple-400">Vision</a></li>
310
+ <li><a href="#research" class="text-gray-400 hover:text-purple-400">Research</a></li>
311
+ <li><a href="#team" class="text-gray-400 hover:text-purple-400">Team</a></li>
312
+ </ul>
313
+ </div>
314
+ <div class="grid md:grid-cols-4 gap-8">
315
  <div>
316
  <h3 class="text-xl font-bold mb-4">QuantumVault</h3>
317
  <p class="text-gray-400">