Hugging Face's logo

Spaces:
Xavernox
/
website
Running

App Files Community
Xavernox commited on
Commit
a8b33de
·
verified ·
1 Parent(s): 3af3636

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +592 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: website
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,592 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Orionix Labs | AI & Software Engineering</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/spline-runtime@1.0.10/dist/runtime.js"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #00f7ff;
14
+ --neon-pink: #ff00e6;
15
+ --neon-purple: #9d00ff;
16
+ --dark-bg: #0a0a1a;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Rajdhani', sans-serif;
21
+ background-color: var(--dark-bg);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ h1, h2, h3, .font-orbitron {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .neon-text {
31
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
32
+ }
33
+
34
+ .neon-box {
35
+ box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-purple);
36
+ }
37
+
38
+ .neon-border {
39
+ border: 1px solid rgba(0, 247, 255, 0.3);
40
+ box-shadow: inset 0 0 10px var(--neon-blue), 0 0 10px var(--neon-blue);
41
+ }
42
+
43
+ .glow-on-hover:hover {
44
+ box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-purple);
45
+ }
46
+
47
+ .typing-animation {
48
+ border-right: 2px solid var(--neon-blue);
49
+ white-space: nowrap;
50
+ overflow: hidden;
51
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
52
+ }
53
+
54
+ @keyframes typing {
55
+ from { width: 0 }
56
+ to { width: 100% }
57
+ }
58
+
59
+ @keyframes blink-caret {
60
+ from, to { border-color: transparent }
61
+ 50% { border-color: var(--neon-blue) }
62
+ }
63
+
64
+ .fade-in {
65
+ animation: fadeIn 2s ease-in;
66
+ }
67
+
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; }
70
+ to { opacity: 1; }
71
+ }
72
+
73
+ #spline-container {
74
+ position: absolute;
75
+ top: 0;
76
+ left: 0;
77
+ width: 100%;
78
+ height: 100%;
79
+ z-index: 0;
80
+ }
81
+
82
+ .content-overlay {
83
+ position: relative;
84
+ z-index: 10;
85
+ }
86
+
87
+ .gradient-bg {
88
+ background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a2a 100%);
89
+ }
90
+
91
+ .section-divider {
92
+ height: 100px;
93
+ background: linear-gradient(180deg, rgba(10,10,26,0) 0%, rgba(157,0,255,0.2) 50%, rgba(10,10,26,0) 100%);
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="gradient-bg">
98
+ <!-- Spline 3D Scene -->
99
+ <div id="spline-container"></div>
100
+
101
+ <!-- Header/Navigation -->
102
+ <header class="content-overlay fixed w-full z-50">
103
+ <nav class="container mx-auto px-6 py-4">
104
+ <div class="flex justify-between items-center">
105
+ <div class="flex items-center space-x-2">
106
+ <div class="w-10 h-10 rounded-full neon-box bg-black flex items-center justify-center">
107
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-[#00f7ff]">
108
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
109
+ </svg>
110
+ </div>
111
+ <span class="text-xl font-orbitron font-bold neon-text">ORIONIX LABS</span>
112
+ </div>
113
+
114
+ <div class="hidden md:flex space-x-8">
115
+ <a href="#home" class="text-white hover:text-[#00f7ff] transition duration-300">Home</a>
116
+ <a href="#about" class="text-white hover:text-[#00f7ff] transition duration-300">About</a>
117
+ <a href="#services" class="text-white hover:text-[#00f7ff] transition duration-300">Services</a>
118
+ <a href="#portfolio" class="text-white hover:text-[#00f7ff] transition duration-300">Portfolio</a>
119
+ <a href="#contact" class="text-white hover:text-[#00f7ff] transition duration-300">Contact</a>
120
+ </div>
121
+
122
+ <button class="md:hidden text-white focus:outline-none">
123
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
124
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
125
+ </svg>
126
+ </button>
127
+ </div>
128
+ </nav>
129
+ </header>
130
+
131
+ <!-- Hero Section -->
132
+ <section id="home" class="content-overlay min-h-screen flex items-center justify-center relative overflow-hidden">
133
+ <div class="container mx-auto px-6 py-20 text-center">
134
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 neon-text typing-animation">
135
+ ORIONIX LABS
136
+ </h1>
137
+ <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto fade-in">
138
+ "Build systems that think, adapt, and protect. The future isn't coded... it's engineered."
139
+ </p>
140
+ <div class="flex flex-col md:flex-row justify-center gap-4">
141
+ <a href="#contact" class="px-8 py-3 bg-transparent neon-border rounded-full text-white hover:bg-[#9d00ff] hover:bg-opacity-20 transition duration-500 glow-on-hover">
142
+ Get Started
143
+ </a>
144
+ <a href="#portfolio" class="px-8 py-3 bg-[#9d00ff] bg-opacity-20 rounded-full text-white hover:bg-opacity-30 transition duration-500 glow-on-hover">
145
+ View Portfolio
146
+ </a>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <div class="section-divider"></div>
152
+
153
+ <!-- About Section -->
154
+ <section id="about" class="content-overlay py-20 relative">
155
+ <div class="container mx-auto px-6">
156
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">ABOUT US</h2>
157
+
158
+ <div class="flex flex-col lg:flex-row items-center gap-12">
159
+ <div class="lg:w-1/2">
160
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-40 backdrop-blur-sm">
161
+ <h3 class="text-2xl font-bold mb-4 font-orbitron">Engineering the Future</h3>
162
+ <p class="mb-4">
163
+ Orionix Labs is at the forefront of AI and software engineering, creating intelligent systems that redefine what's possible.
164
+ We combine cutting-edge technology with visionary thinking to build solutions that adapt, learn, and protect.
165
+ </p>
166
+ <p>
167
+ Founded by a team of engineers and AI researchers, we specialize in creating bespoke software solutions that leverage
168
+ artificial intelligence, automation, and predictive analytics to solve complex challenges.
169
+ </p>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="lg:w-1/2">
174
+ <div class="grid grid-cols-2 gap-4">
175
+ <div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
176
+ <div class="text-[#00f7ff] text-4xl mb-3">10+</div>
177
+ <div class="font-bold">Years Experience</div>
178
+ </div>
179
+ <div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
180
+ <div class="text-[#ff00e6] text-4xl mb-3">50+</div>
181
+ <div class="font-bold">Projects Delivered</div>
182
+ </div>
183
+ <div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
184
+ <div class="text-[#9d00ff] text-4xl mb-3">100%</div>
185
+ <div class="font-bold">Client Satisfaction</div>
186
+ </div>
187
+ <div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
188
+ <div class="text-[#00f7ff] text-4xl mb-3">24/7</div>
189
+ <div class="font-bold">Support</div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </section>
196
+
197
+ <div class="section-divider"></div>
198
+
199
+ <!-- Services Section -->
200
+ <section id="services" class="content-overlay py-20 relative">
201
+ <div class="container mx-auto px-6">
202
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR SERVICES</h2>
203
+
204
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
205
+ <!-- Service 1 -->
206
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
207
+ <div class="text-[#00f7ff] text-4xl mb-4">
208
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
209
+ <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
210
+ <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
211
+ </svg>
212
+ </div>
213
+ <h3 class="text-xl font-bold mb-3 font-orbitron">AI Tools Development</h3>
214
+ <p>
215
+ Custom AI solutions tailored to your business needs, from predictive analytics to natural language processing.
216
+ </p>
217
+ </div>
218
+
219
+ <!-- Service 2 -->
220
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
221
+ <div class="text-[#ff00e6] text-4xl mb-4">
222
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
223
+ <circle cx="12" cy="12" r="10"></circle>
224
+ <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
225
+ <line x1="12" y1="17" x2="12.01" y2="17"></line>
226
+ </svg>
227
+ </div>
228
+ <h3 class="text-xl font-bold mb-3 font-orbitron">Automation Solutions</h3>
229
+ <p>
230
+ Streamline your operations with intelligent automation that learns and adapts to your workflows.
231
+ </p>
232
+ </div>
233
+
234
+ <!-- Service 3 -->
235
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
236
+ <div class="text-[#9d00ff] text-4xl mb-4">
237
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
238
+ <polyline points="16 18 22 12 16 6"></polyline>
239
+ <polyline points="8 6 2 12 8 18"></polyline>
240
+ </svg>
241
+ </div>
242
+ <h3 class="text-xl font-bold mb-3 font-orbitron">Software Development</h3>
243
+ <p>
244
+ Bespoke software engineered for performance, scalability, and security across all platforms.
245
+ </p>
246
+ </div>
247
+
248
+ <!-- Service 4 -->
249
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
250
+ <div class="text-[#00f7ff] text-4xl mb-4">
251
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
252
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
253
+ </svg>
254
+ </div>
255
+ <h3 class="text-xl font-bold mb-3 font-orbitron">Predictive Maintenance</h3>
256
+ <p>
257
+ AI-powered systems that predict equipment failures before they happen, saving time and resources.
258
+ </p>
259
+ </div>
260
+
261
+ <!-- Service 5 -->
262
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
263
+ <div class="text-[#ff00e6] text-4xl mb-4">
264
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
265
+ <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
266
+ <line x1="8" y1="21" x2="16" y2="21"></line>
267
+ <line x1="12" y1="17" x2="12" y2="21"></line>
268
+ </svg>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-3 font-orbitron">Smart Surveillance</h3>
271
+ <p>
272
+ Intelligent monitoring systems that detect anomalies and threats in real-time with AI analysis.
273
+ </p>
274
+ </div>
275
+
276
+ <!-- Service 6 -->
277
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm hover:bg-opacity-40 transition duration-500 glow-on-hover">
278
+ <div class="text-[#9d00ff] text-4xl mb-4">
279
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
280
+ <path d="M12 20h9"></path>
281
+ <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
282
+ </svg>
283
+ </div>
284
+ <h3 class="text-xl font-bold mb-3 font-orbitron">Self-Hosting SaaS</h3>
285
+ <p>
286
+ Enterprise-grade software alternatives that you can host and control on your own infrastructure.
287
+ </p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <div class="section-divider"></div>
294
+
295
+ <!-- Tech Stack Section -->
296
+ <section class="content-overlay py-16 relative">
297
+ <div class="container mx-auto px-6">
298
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR TECH STACK</h2>
299
+
300
+ <div class="flex flex-wrap justify-center gap-4 md:gap-8">
301
+ <div class="tech-badge">React</div>
302
+ <div class="tech-badge">Next.js</div>
303
+ <div class="tech-badge">Node.js</div>
304
+ <div class="tech-badge">Python</div>
305
+ <div class="tech-badge">Docker</div>
306
+ <div class="tech-badge">AI/ML</div>
307
+ <div class="tech-badge">IoT</div>
308
+ <div class="tech-badge">Robotics</div>
309
+ <div class="tech-badge">Supabase</div>
310
+ <div class="tech-badge">Contabo</div>
311
+ <div class="tech-badge">Spline 3D</div>
312
+ </div>
313
+ </div>
314
+ </section>
315
+
316
+ <div class="section-divider"></div>
317
+
318
+ <!-- Portfolio Section -->
319
+ <section id="portfolio" class="content-overlay py-20 relative">
320
+ <div class="container mx-auto px-6">
321
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR PORTFOLIO</h2>
322
+
323
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
324
+ <!-- Portfolio Item 1 -->
325
+ <div class="portfolio-item">
326
+ <div class="portfolio-image">
327
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="AI Dashboard" class="w-full h-48 object-cover rounded-t-xl">
328
+ </div>
329
+ <div class="portfolio-content">
330
+ <h3 class="text-xl font-bold mb-2 font-orbitron">Neural Analytics Platform</h3>
331
+ <p class="text-sm mb-4">AI-powered business intelligence dashboard with predictive capabilities</p>
332
+ <a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Portfolio Item 2 -->
337
+ <div class="portfolio-item">
338
+ <div class="portfolio-image">
339
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Automation System" class="w-full h-48 object-cover rounded-t-xl">
340
+ </div>
341
+ <div class="portfolio-content">
342
+ <h3 class="text-xl font-bold mb-2 font-orbitron">Industrial Automation Suite</h3>
343
+ <p class="text-sm mb-4">Smart factory automation with IoT integration and real-time monitoring</p>
344
+ <a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Portfolio Item 3 -->
349
+ <div class="portfolio-item">
350
+ <div class="portfolio-image">
351
+ <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Security System" class="w-full h-48 object-cover rounded-t-xl">
352
+ </div>
353
+ <div class="portfolio-content">
354
+ <h3 class="text-xl font-bold mb-2 font-orbitron">Sentinel Security System</h3>
355
+ <p class="text-sm mb-4">AI-driven surveillance platform with anomaly detection and threat assessment</p>
356
+ <a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="text-center mt-12">
362
+ <a href="https://rabeel.world" class="px-8 py-3 bg-transparent neon-border rounded-full text-white hover:bg-[#9d00ff] hover:bg-opacity-20 transition duration-500 glow-on-hover">
363
+ View All Projects
364
+ </a>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <div class="section-divider"></div>
370
+
371
+ <!-- Contact Section -->
372
+ <section id="contact" class="content-overlay py-20 relative">
373
+ <div class="container mx-auto px-6">
374
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">GET IN TOUCH</h2>
375
+
376
+ <div class="flex flex-col lg:flex-row gap-12">
377
+ <div class="lg:w-1/2">
378
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm">
379
+ <h3 class="text-2xl font-bold mb-6 font-orbitron">Contact Information</h3>
380
+
381
+ <div class="space-y-6">
382
+ <div class="flex items-start gap-4">
383
+ <div class="text-[#00f7ff] mt-1">
384
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
385
+ <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
386
+ </svg>
387
+ </div>
388
+ <div>
389
+ <h4 class="font-bold">Phone</h4>
390
+ <p>+1 (555) 123-4567</p>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="flex items-start gap-4">
395
+ <div class="text-[#ff00e6] mt-1">
396
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
397
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
398
+ <polyline points="22,6 12,13 2,6"></polyline>
399
+ </svg>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-bold">Email</h4>
403
+ <p>contact@orionixlabs.com</p>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="flex items-start gap-4">
408
+ <div class="text-[#9d00ff] mt-1">
409
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
410
+ <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
411
+ <circle cx="12" cy="10" r="3"></circle>
412
+ </svg>
413
+ </div>
414
+ <div>
415
+ <h4 class="font-bold">Location</h4>
416
+ <p>San Francisco, CA</p>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="mt-8">
422
+ <h4 class="font-bold mb-4 font-orbitron">Follow Us</h4>
423
+ <div class="flex space-x-4">
424
+ <a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
425
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
426
+ <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
427
+ </svg>
428
+ </a>
429
+ <a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
430
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
431
+ <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
432
+ <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
433
+ <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
434
+ </svg>
435
+ </a>
436
+ <a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
437
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
438
+ <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
439
+ </svg>
440
+ </a>
441
+ <a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
442
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
443
+ <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
444
+ <rect x="2" y="9" width="4" height="12"></rect>
445
+ <circle cx="4" cy="4" r="2"></circle>
446
+ </svg>
447
+ </a>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="lg:w-1/2">
454
+ <div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm">
455
+ <h3 class="text-2xl font-bold mb-6 font-orbitron">Send Us a Message</h3>
456
+
457
+ <form class="space-y-6">
458
+ <div>
459
+ <label for="name" class="block mb-2 font-medium">Your Name</label>
460
+ <input type="text" id="name" class="w-full px-4 py-3 bg-black bg-opacity-30 border border-[#00f7ff] border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00f7ff] focus:border-transparent" placeholder="John Doe">
461
+ </div>
462
+
463
+ <div>
464
+ <label for="email" class="block mb-2 font-medium">Your Email</label>
465
+ <input type="email" id="email" class="w-full px-4 py-3 bg-black bg-opacity-30 border border-[#00f7ff] border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00f7ff] focus:border-transparent" placeholder="john@example.com">
466
+ </div>
467
+
468
+ <div>
469
+ <label for="subject" class="block mb-2 font-medium">Subject</label>
470
+ <input type="text" id="subject" class="w-full px-4 py-3 bg-black bg-opacity-30 border border-[#00f7ff] border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00f7ff] focus:border-transparent" placeholder="How can we help?">
471
+ </div>
472
+
473
+ <div>
474
+ <label for="message" class="block mb-2 font-medium">Your Message</label>
475
+ <textarea id="message" rows="5" class="w-full px-4 py-3 bg-black bg-opacity-30 border border-[#00f7ff] border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00f7ff] focus:border-transparent" placeholder="Tell us about your project..."></textarea>
476
+ </div>
477
+
478
+ <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-[#00f7ff] to-[#9d00ff] text-black font-bold rounded-lg hover:opacity-90 transition duration-300 glow-on-hover">
479
+ Send Message
480
+ </button>
481
+ </form>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Footer -->
489
+ <footer class="content-overlay py-12 relative border-t border-[#00f7ff] border-opacity-20">
490
+ <div class="container mx-auto px-6">
491
+ <div class="flex flex-col md:flex-row justify-between items-center">
492
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
493
+ <div class="w-8 h-8 rounded-full neon-box bg-black flex items-center justify-center">
494
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-[#00f7ff]">
495
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
496
+ </svg>
497
+ </div>
498
+ <span class="text-lg font-orbitron font-bold neon-text">ORIONIX LABS</span>
499
+ </div>
500
+
501
+ <div class="text-center md:text-right">
502
+ <p class="text-sm mb-2">© 2023 Orionix Labs. All rights reserved.</p>
503
+ <p class="text-xs text-gray-400">"Build systems that think, adapt, and protect."</p>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </footer>
508
+
509
+ <script>
510
+ // Load Spline scene
511
+ document.addEventListener('DOMContentLoaded', function() {
512
+ // This would normally be loaded from a local .splinecode file
513
+ // For demo purposes, we'll simulate the effect with a placeholder
514
+ const splineContainer = document.getElementById('spline-container');
515
+
516
+ // Create a placeholder for the 3D scene
517
+ const placeholder = document.createElement('div');
518
+ placeholder.style.width = '100%';
519
+ placeholder.style.height = '100%';
520
+ placeholder.style.background = 'linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a2a 100%)';
521
+ placeholder.style.opacity = '0.5';
522
+ splineContainer.appendChild(placeholder);
523
+
524
+ // In a real implementation, you would use:
525
+ // const app = new Application(canvas);
526
+ // app.load('public/scene/your-scene.splinecode');
527
+
528
+ // Parallax effect
529
+ window.addEventListener('mousemove', function(e) {
530
+ const x = e.clientX / window.innerWidth;
531
+ const y = e.clientY / window.innerHeight;
532
+
533
+ // This would normally affect the 3D camera
534
+ // For demo, we'll just move the placeholder slightly
535
+ placeholder.style.transform = `translate(${x * 10}px, ${y * 10}px)`;
536
+ });
537
+
538
+ // Mobile menu toggle
539
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
540
+ const mobileMenu = document.querySelector('.hidden.md\\:flex');
541
+
542
+ mobileMenuButton.addEventListener('click', function() {
543
+ mobileMenu.classList.toggle('hidden');
544
+ mobileMenu.classList.toggle('flex');
545
+ mobileMenu.classList.toggle('flex-col');
546
+ mobileMenu.classList.toggle('absolute');
547
+ mobileMenu.classList.toggle('top-16');
548
+ mobileMenu.classList.toggle('left-0');
549
+ mobileMenu.classList.toggle('w-full');
550
+ mobileMenu.classList.toggle('bg-black');
551
+ mobileMenu.classList.toggle('bg-opacity-90');
552
+ mobileMenu.classList.toggle('p-4');
553
+ mobileMenu.classList.toggle('space-y-4');
554
+ mobileMenu.classList.toggle('space-x-0');
555
+ });
556
+
557
+ // Smooth scrolling for anchor links
558
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
559
+ anchor.addEventListener('click', function (e) {
560
+ e.preventDefault();
561
+
562
+ const targetId = this.getAttribute('href');
563
+ const targetElement = document.querySelector(targetId);
564
+
565
+ if (targetElement) {
566
+ window.scrollTo({
567
+ top: targetElement.offsetTop - 80,
568
+ behavior: 'smooth'
569
+ });
570
+
571
+ // Close mobile menu if open
572
+ if (!mobileMenu.classList.contains('hidden')) {
573
+ mobileMenuButton.click();
574
+ }
575
+ }
576
+ });
577
+ });
578
+ });
579
+
580
+ // Tech badges styling
581
+ tailwind.config = {
582
+ theme: {
583
+ extend: {
584
+ animation: {
585
+ 'pulse-slow': 'pulse 6s infinite',
586
+ }
587
+ }
588
+ }
589
+ }
590
+ </script>
591
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xavernox/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
592
+ </html>