Hugging Face's logo

Spaces:
Xavernox
/
website
Running

App Files Community
website / index.html
Xavernox's picture
Xavernox
undefined - Initial Deployment
a8b33de verified
raw
history blame contribute delete
34.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orionix Labs | AI & Software Engineering</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/spline-runtime@1.0.10/dist/runtime.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');
:root {
--neon-blue: #00f7ff;
--neon-pink: #ff00e6;
--neon-purple: #9d00ff;
--dark-bg: #0a0a1a;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: var(--dark-bg);
color: white;
overflow-x: hidden;
}
h1, h2, h3, .font-orbitron {
font-family: 'Orbitron', sans-serif;
}
.neon-text {
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
}
.neon-box {
box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-purple);
}
.neon-border {
border: 1px solid rgba(0, 247, 255, 0.3);
box-shadow: inset 0 0 10px var(--neon-blue), 0 0 10px var(--neon-blue);
}
.glow-on-hover:hover {
box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-purple);
}
.typing-animation {
border-right: 2px solid var(--neon-blue);
white-space: nowrap;
overflow: hidden;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--neon-blue) }
}
.fade-in {
animation: fadeIn 2s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#spline-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.content-overlay {
position: relative;
z-index: 10;
}
.gradient-bg {
background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a2a 100%);
}
.section-divider {
height: 100px;
background: linear-gradient(180deg, rgba(10,10,26,0) 0%, rgba(157,0,255,0.2) 50%, rgba(10,10,26,0) 100%);
}
</style>
</head>
<body class="gradient-bg">
<!-- Spline 3D Scene -->
<div id="spline-container"></div>
<!-- Header/Navigation -->
<header class="content-overlay fixed w-full z-50">
<nav class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full neon-box bg-black flex items-center justify-center">
<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]">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
</div>
<span class="text-xl font-orbitron font-bold neon-text">ORIONIX LABS</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-white hover:text-[#00f7ff] transition duration-300">Home</a>
<a href="#about" class="text-white hover:text-[#00f7ff] transition duration-300">About</a>
<a href="#services" class="text-white hover:text-[#00f7ff] transition duration-300">Services</a>
<a href="#portfolio" class="text-white hover:text-[#00f7ff] transition duration-300">Portfolio</a>
<a href="#contact" class="text-white hover:text-[#00f7ff] transition duration-300">Contact</a>
</div>
<button class="md:hidden text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="content-overlay min-h-screen flex items-center justify-center relative overflow-hidden">
<div class="container mx-auto px-6 py-20 text-center">
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 neon-text typing-animation">
ORIONIX LABS
</h1>
<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto fade-in">
"Build systems that think, adapt, and protect. The future isn't coded... it's engineered."
</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<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">
Get Started
</a>
<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">
View Portfolio
</a>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- About Section -->
<section id="about" class="content-overlay py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">ABOUT US</h2>
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<div class="neon-border rounded-xl p-8 bg-black bg-opacity-40 backdrop-blur-sm">
<h3 class="text-2xl font-bold mb-4 font-orbitron">Engineering the Future</h3>
<p class="mb-4">
Orionix Labs is at the forefront of AI and software engineering, creating intelligent systems that redefine what's possible.
We combine cutting-edge technology with visionary thinking to build solutions that adapt, learn, and protect.
</p>
<p>
Founded by a team of engineers and AI researchers, we specialize in creating bespoke software solutions that leverage
artificial intelligence, automation, and predictive analytics to solve complex challenges.
</p>
</div>
</div>
<div class="lg:w-1/2">
<div class="grid grid-cols-2 gap-4">
<div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
<div class="text-[#00f7ff] text-4xl mb-3">10+</div>
<div class="font-bold">Years Experience</div>
</div>
<div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
<div class="text-[#ff00e6] text-4xl mb-3">50+</div>
<div class="font-bold">Projects Delivered</div>
</div>
<div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
<div class="text-[#9d00ff] text-4xl mb-3">100%</div>
<div class="font-bold">Client Satisfaction</div>
</div>
<div class="neon-border rounded-xl p-6 bg-black bg-opacity-20 backdrop-blur-sm">
<div class="text-[#00f7ff] text-4xl mb-3">24/7</div>
<div class="font-bold">Support</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Services Section -->
<section id="services" class="content-overlay py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR SERVICES</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<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">
<div class="text-[#00f7ff] text-4xl mb-4">
<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">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<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>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">AI Tools Development</h3>
<p>
Custom AI solutions tailored to your business needs, from predictive analytics to natural language processing.
</p>
</div>
<!-- Service 2 -->
<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">
<div class="text-[#ff00e6] text-4xl mb-4">
<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">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">Automation Solutions</h3>
<p>
Streamline your operations with intelligent automation that learns and adapts to your workflows.
</p>
</div>
<!-- Service 3 -->
<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">
<div class="text-[#9d00ff] text-4xl mb-4">
<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">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">Software Development</h3>
<p>
Bespoke software engineered for performance, scalability, and security across all platforms.
</p>
</div>
<!-- Service 4 -->
<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">
<div class="text-[#00f7ff] text-4xl mb-4">
<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">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">Predictive Maintenance</h3>
<p>
AI-powered systems that predict equipment failures before they happen, saving time and resources.
</p>
</div>
<!-- Service 5 -->
<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">
<div class="text-[#ff00e6] text-4xl mb-4">
<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">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">Smart Surveillance</h3>
<p>
Intelligent monitoring systems that detect anomalies and threats in real-time with AI analysis.
</p>
</div>
<!-- Service 6 -->
<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">
<div class="text-[#9d00ff] text-4xl mb-4">
<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">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 font-orbitron">Self-Hosting SaaS</h3>
<p>
Enterprise-grade software alternatives that you can host and control on your own infrastructure.
</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Tech Stack Section -->
<section class="content-overlay py-16 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR TECH STACK</h2>
<div class="flex flex-wrap justify-center gap-4 md:gap-8">
<div class="tech-badge">React</div>
<div class="tech-badge">Next.js</div>
<div class="tech-badge">Node.js</div>
<div class="tech-badge">Python</div>
<div class="tech-badge">Docker</div>
<div class="tech-badge">AI/ML</div>
<div class="tech-badge">IoT</div>
<div class="tech-badge">Robotics</div>
<div class="tech-badge">Supabase</div>
<div class="tech-badge">Contabo</div>
<div class="tech-badge">Spline 3D</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Portfolio Section -->
<section id="portfolio" class="content-overlay py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">OUR PORTFOLIO</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Portfolio Item 1 -->
<div class="portfolio-item">
<div class="portfolio-image">
<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">
</div>
<div class="portfolio-content">
<h3 class="text-xl font-bold mb-2 font-orbitron">Neural Analytics Platform</h3>
<p class="text-sm mb-4">AI-powered business intelligence dashboard with predictive capabilities</p>
<a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
</div>
</div>
<!-- Portfolio Item 2 -->
<div class="portfolio-item">
<div class="portfolio-image">
<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">
</div>
<div class="portfolio-content">
<h3 class="text-xl font-bold mb-2 font-orbitron">Industrial Automation Suite</h3>
<p class="text-sm mb-4">Smart factory automation with IoT integration and real-time monitoring</p>
<a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
</div>
</div>
<!-- Portfolio Item 3 -->
<div class="portfolio-item">
<div class="portfolio-image">
<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">
</div>
<div class="portfolio-content">
<h3 class="text-xl font-bold mb-2 font-orbitron">Sentinel Security System</h3>
<p class="text-sm mb-4">AI-driven surveillance platform with anomaly detection and threat assessment</p>
<a href="https://rabeel.world" class="text-[#00f7ff] hover:text-[#ff00e6] transition duration-300 text-sm font-bold">View Project →</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<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">
View All Projects
</a>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Contact Section -->
<section id="contact" class="content-overlay py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center neon-text">GET IN TOUCH</h2>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm">
<h3 class="text-2xl font-bold mb-6 font-orbitron">Contact Information</h3>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="text-[#00f7ff] mt-1">
<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">
<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>
</svg>
</div>
<div>
<h4 class="font-bold">Phone</h4>
<p>+1 (555) 123-4567</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="text-[#ff00e6] mt-1">
<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">
<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>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<div>
<h4 class="font-bold">Email</h4>
<p>contact@orionixlabs.com</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="text-[#9d00ff] mt-1">
<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">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<div>
<h4 class="font-bold">Location</h4>
<p>San Francisco, CA</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold mb-4 font-orbitron">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
<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">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
<a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
<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">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</a>
<a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
<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">
<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>
</svg>
</a>
<a href="#" class="text-white hover:text-[#00f7ff] transition duration-300">
<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">
<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>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="neon-border rounded-xl p-8 bg-black bg-opacity-20 backdrop-blur-sm">
<h3 class="text-2xl font-bold mb-6 font-orbitron">Send Us a Message</h3>
<form class="space-y-6">
<div>
<label for="name" class="block mb-2 font-medium">Your Name</label>
<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">
</div>
<div>
<label for="email" class="block mb-2 font-medium">Your Email</label>
<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">
</div>
<div>
<label for="subject" class="block mb-2 font-medium">Subject</label>
<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?">
</div>
<div>
<label for="message" class="block mb-2 font-medium">Your Message</label>
<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>
</div>
<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">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="content-overlay py-12 relative border-t border-[#00f7ff] border-opacity-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-6 md:mb-0">
<div class="w-8 h-8 rounded-full neon-box bg-black flex items-center justify-center">
<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]">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
</div>
<span class="text-lg font-orbitron font-bold neon-text">ORIONIX LABS</span>
</div>
<div class="text-center md:text-right">
<p class="text-sm mb-2">© 2023 Orionix Labs. All rights reserved.</p>
<p class="text-xs text-gray-400">"Build systems that think, adapt, and protect."</p>
</div>
</div>
</div>
</footer>
<script>
// Load Spline scene
document.addEventListener('DOMContentLoaded', function() {
// This would normally be loaded from a local .splinecode file
// For demo purposes, we'll simulate the effect with a placeholder
const splineContainer = document.getElementById('spline-container');
// Create a placeholder for the 3D scene
const placeholder = document.createElement('div');
placeholder.style.width = '100%';
placeholder.style.height = '100%';
placeholder.style.background = 'linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a2a 100%)';
placeholder.style.opacity = '0.5';
splineContainer.appendChild(placeholder);
// In a real implementation, you would use:
// const app = new Application(canvas);
// app.load('public/scene/your-scene.splinecode');
// Parallax effect
window.addEventListener('mousemove', function(e) {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
// This would normally affect the 3D camera
// For demo, we'll just move the placeholder slightly
placeholder.style.transform = `translate(${x * 10}px, ${y * 10}px)`;
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.md\\:hidden');
const mobileMenu = document.querySelector('.hidden.md\\:flex');
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
mobileMenu.classList.toggle('flex');
mobileMenu.classList.toggle('flex-col');
mobileMenu.classList.toggle('absolute');
mobileMenu.classList.toggle('top-16');
mobileMenu.classList.toggle('left-0');
mobileMenu.classList.toggle('w-full');
mobileMenu.classList.toggle('bg-black');
mobileMenu.classList.toggle('bg-opacity-90');
mobileMenu.classList.toggle('p-4');
mobileMenu.classList.toggle('space-y-4');
mobileMenu.classList.toggle('space-x-0');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenuButton.click();
}
}
});
});
});
// Tech badges styling
tailwind.config = {
theme: {
extend: {
animation: {
'pulse-slow': 'pulse 6s infinite',
}
}
}
}
</script>
<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>
</html>