You are representing Orionix Labs — a rare and unique software development, AI solutions, and automation company founded by Rabeel Ashraf (https://Rabeel.world). Orionix Labs builds cutting-edge, visually stunning, and fully functional digital systems with 3D elements, advanced animations, and full responsiveness across all devices, with a special focus on mobile optimization.
0bf162c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Orionix Labs | Engineering the Future</title> | |
| <meta name="description" content="Cutting-edge AI solutions, automation platforms, and safety systems engineered for tomorrow"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| orionix: { | |
| primary: '#6e45e2', | |
| secondary: '#88d3ce', | |
| dark: '#0f0e17', | |
| accent: '#ff8906', | |
| light: '#fffffe' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Rajdhani', 'sans-serif'], | |
| mono: ['Fira Code', 'monospace'] | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #0f0e17 0%, #6e45e2 50%, #88d3ce 100%); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(110, 69, 226, 0.7); | |
| } | |
| .cyber-border { | |
| position: relative; | |
| } | |
| .cyber-border::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #ff8906, transparent); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(110, 69, 226, 0.3); | |
| border-color: #6e45e2; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-orionix-dark text-orionix-light font-sans overflow-x-hidden"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-orionix-dark/80 backdrop-blur-md border-b border-orionix-primary/20 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-orionix-primary font-bold text-2xl">ORIONIX LABS</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-orionix-primary px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#solutions" class="text-orionix-light hover:text-orionix-primary px-3 py-2 rounded-md text-sm font-medium">Solutions</a> | |
| <a href="#projects" class="text-orionix-light hover:text-orionix-primary px-3 py-2 rounded-md text-sm font-medium">Projects</a> | |
| <a href="#about" class="text-orionix-light hover:text-orionix-primary px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| <a href="#contact" class="text-orionix-light hover:text-orionix-primary px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <a href="https://wa.me/971501359046" class="bg-orionix-primary hover:bg-orionix-accent text-orionix-dark font-bold py-2 px-4 rounded-md transition duration-300 flex items-center"> | |
| <i data-feather="message-circle" class="mr-2"></i> Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-orionix-light hover:text-orionix-primary focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="text-orionix-primary block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#solutions" class="text-orionix-light hover:text-orionix-primary block px-3 py-2 rounded-md text-base font-medium">Solutions</a> | |
| <a href="#projects" class="text-orionix-light hover:text-orionix-primary block px-3 py-2 rounded-md text-base font-medium">Projects</a> | |
| <a href="#about" class="text-orionix-light hover:text-orionix-primary block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#contact" class="text-orionix-light hover:text-orionix-primary block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| <a href="https://wa.me/971501359046" class="bg-orionix-primary hover:bg-orionix-accent text-orionix-dark font-bold py-2 px-4 rounded-md transition duration-300 flex items-center justify-center mt-2"> | |
| <i data-feather="message-circle" class="mr-2"></i> Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient min-h-screen flex items-center justify-center pt-16 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-20" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==')"></div> | |
| <div class="max-w-7xl mx-auto text-center z-10" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 glow-text"> | |
| <span class="text-orionix-primary">Engineering</span> the Future | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-orionix-light/90"> | |
| Build systems that <span class="text-orionix-secondary font-medium">think</span>, <span class="text-orionix-accent font-medium">adapt</span>, and <span class="text-orionix-primary font-medium">protect</span>. The future isn't coded... it's engineered. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#solutions" class="bg-orionix-primary hover:bg-orionix-accent text-orionix-dark font-bold py-3 px-8 rounded-md transition duration-300 text-lg flex items-center justify-center"> | |
| Explore Solutions | |
| </a> | |
| <a href="#contact" class="border border-orionix-primary text-orionix-primary hover:bg-orionix-primary/10 font-bold py-3 px-8 rounded-md transition duration-300 text-lg flex items-center justify-center"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#solutions" class="text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="chevron-down" class="w-8 h-8"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 px-4 sm:px-6 lg:px-8 bg-orionix-dark"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-border inline-block pb-2"> | |
| Our <span class="text-orionix-primary">Specializations</span> | |
| </h2> | |
| <p class="text-lg text-orionix-light/80 max-w-3xl mx-auto"> | |
| We engineer cutting-edge solutions that bridge the gap between today's needs and tomorrow's possibilities. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- AI Solutions Card --> | |
| <div class="bg-orionix-dark/50 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-orionix-primary mb-4"> | |
| <i data-feather="cpu" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-orionix-light">AI Tools & Solutions</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| AI-driven analytics, automation platforms, custom chatbots, predictive models, and AI safety systems. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Machine Learning</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">LLMs</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Predictive AI</span> | |
| </div> | |
| </div> | |
| <!-- Automation Card --> | |
| <div class="bg-orionix-dark/50 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-orionix-primary mb-4"> | |
| <i data-feather="zap" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-orionix-light">Automation Solutions</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| Workflow automation, self-hosted SaaS alternatives (SHaaS), and integration with Docker, Coolify, VPS hosting. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">SHaaS</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Docker</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">CI/CD</span> | |
| </div> | |
| </div> | |
| <!-- Software Dev Card --> | |
| <div class="bg-orionix-dark/50 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-orionix-primary mb-4"> | |
| <i data-feather="code" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-orionix-light">Software Development</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| Custom web apps, mobile apps, enterprise software, and IoT safety systems with cutting-edge tech stacks. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Web Apps</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Mobile</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">IoT</span> | |
| </div> | |
| </div> | |
| <!-- Safety Tech Card --> | |
| <div class="bg-orionix-dark/50 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-orionix-primary mb-4"> | |
| <i data-feather="shield" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-orionix-light">Safety & Surveillance</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| AI-powered hazard detection, smart surveillance drones, and predictive maintenance systems. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">AI Vision</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Drones</span> | |
| <span class="bg-orionix-dark text-orionix-secondary text-xs px-3 py-1 rounded-full">Predictive</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-orionix-dark to-orionix-dark/90"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-border inline-block pb-2"> | |
| Flagship <span class="text-orionix-primary">Projects</span> | |
| </h2> | |
| <p class="text-lg text-orionix-light/80 max-w-3xl mx-auto"> | |
| Our engineered solutions making an impact across industries. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- SHaaS Platform --> | |
| <div class="bg-orionix-dark/50 rounded-xl overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="h-48 bg-gradient-to-r from-orionix-primary to-orionix-secondary flex items-center justify-center"> | |
| <i data-feather="server" class="w-16 h-16 text-orionix-dark"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-orionix-light">SHaaS Platform</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| Self-Hosting-as-a-Service for UAE businesses to host their own tools like Zapier, Notion, and Calendly on private infrastructure. | |
| </p> | |
| <div class="flex items-center text-orionix-primary"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> | |
| <span class="text-sm">UAE Market Focus</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HadarBot --> | |
| <div class="bg-orionix-dark/50 rounded-xl overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="h-48 bg-gradient-to-r from-orionix-accent to-orionix-primary flex items-center justify-center"> | |
| <i data-feather="eye" class="w-16 h-16 text-orionix-dark"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-orionix-light">HadarBot</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| AI-powered smart surveillance assistant for police & civil defense with real-time threat detection and predictive analytics. | |
| </p> | |
| <div class="flex items-center text-orionix-primary"> | |
| <i data-feather="shield" class="w-4 h-4 mr-2"></i> | |
| <span class="text-sm">Public Safety</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Custom AI --> | |
| <div class="bg-orionix-dark/50 rounded-xl overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="h-48 bg-gradient-to-r from-orionix-secondary to-orionix-accent flex items-center justify-center"> | |
| <i data-feather="activity" class="w-16 h-16 text-orionix-dark"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-orionix-light">Custom AI Development</h3> | |
| <p class="text-orionix-light/80 mb-4"> | |
| Tailored AI solutions for enterprises, running on private infrastructure or client systems with full data sovereignty. | |
| </p> | |
| <div class="flex items-center text-orionix-primary"> | |
| <i data-feather="lock" class="w-4 h-4 mr-2"></i> | |
| <span class="text-sm">Private AI</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-orionix-dark"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-orionix-primary to-orionix-secondary rounded-xl opacity-20 blur"></div> | |
| <div class="relative bg-orionix-dark/50 rounded-xl overflow-hidden border border-orionix-primary/20"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Orionix Labs Technology" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 cyber-border inline-block pb-2"> | |
| About <span class="text-orionix-primary">Orionix Labs</span> | |
| </h2> | |
| <p class="text-lg text-orionix-light/80 mb-6"> | |
| Founded by <a href="https://rabeel.world" class="text-orionix-primary hover:underline">Rabeel Ashraf</a>, Orionix Labs is a rare fusion of cutting-edge engineering and visionary design. We operate at the intersection of AI, automation, and safety technology to build systems that redefine what's possible. | |
| </p> | |
| <p class="text-lg text-orionix-light/80 mb-8"> | |
| Our approach blends rigorous engineering with aesthetic precision — creating solutions that are as beautiful as they are functional, as intuitive as they are powerful. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="https://github.com/Rabeel-Ashraf" class="flex items-center text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="github" class="w-5 h-5 mr-2"></i> GitHub | |
| </a> | |
| <a href="https://linkedin.com/company/orionix-labs" class="flex items-center text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="linkedin" class="w-5 h-5 mr-2"></i> LinkedIn | |
| </a> | |
| <a href="https://orionixlabs.com" class="flex items-center text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="globe" class="w-5 h-5 mr-2"></i> Website | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-orionix-dark to-orionix-dark/90"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-border inline-block pb-2"> | |
| Ready to <span class="text-orionix-primary">Engineer</span> the Future? | |
| </h2> | |
| <p class="text-lg text-orionix-light/80 max-w-3xl mx-auto"> | |
| Let's build systems that think, adapt, and protect. Reach out to discuss your project. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div data-aos="fade-right"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-orionix-light mb-1">Name</label> | |
| <input type="text" id="name" name="name" class="w-full bg-orionix-dark/50 border border-orionix-primary/20 rounded-md px-4 py-3 text-orionix-light focus:outline-none focus:ring-2 focus:ring-orionix-primary"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-orionix-light mb-1">Email</label> | |
| <input type="email" id="email" name="email" class="w-full bg-orionix-dark/50 border border-orionix-primary/20 rounded-md px-4 py-3 text-orionix-light focus:outline-none focus:ring-2 focus:ring-orionix-primary"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-orionix-light mb-1">Message</label> | |
| <textarea id="message" name="message" rows="4" class="w-full bg-orionix-dark/50 border border-orionix-primary/20 rounded-md px-4 py-3 text-orionix-light focus:outline-none focus:ring-2 focus:ring-orionix-primary"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-orionix-primary hover:bg-orionix-accent text-orionix-dark font-bold py-3 px-6 rounded-md transition duration-300"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <div class="bg-orionix-dark/50 rounded-xl p-8 h-full"> | |
| <h3 class="text-xl font-bold mb-6 text-orionix-light">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-orionix-primary mr-4"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-orionix-light/70 mb-1">Email</h4> | |
| <a href="mailto:[email protected]" class="text-orionix-light hover:text-orionix-primary">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orionix-primary mr-4"> | |
| <i data-feather="phone" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-orionix-light/70 mb-1">WhatsApp</h4> | |
| <a href="https://wa.me/971501359046" class="text-orionix-light hover:text-orionix-primary">+971 50 135 9046</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orionix-primary mr-4"> | |
| <i data-feather="map-pin" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-orionix-light/70 mb-1">Based in</h4> | |
| <p class="text-orionix-light">United Arab Emirates</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 pt-6 border-t border-orionix-primary/20"> | |
| <h4 class="text-sm font-medium text-orionix-light/70 mb-4">Connect with us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-orionix-light hover:text-orionix-primary"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-orionix-dark border-t border-orionix-primary/10 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-orionix-primary font-bold text-2xl">ORIONIX LABS</span> | |
| <p class="text-sm text-orionix-light/60 mt-2">© 2023 Orionix Labs. All rights reserved.</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <p class="text-orionix-light/80 mb-4 text-center md:text-right"> | |
| "Build systems that think, adapt, and protect." | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-orionix-light/60 hover:text-orionix-primary"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-orionix-light/60 hover:text-orionix-primary"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-orionix-light/60 hover:text-orionix-primary"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6e45e2, | |
| backgroundColor: 0x0f0e17, | |
| size: 0.8 | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |