Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aljabri+ | Advanced Mining Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></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://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%); | |
| } | |
| .mining-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .vanta-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .content-overlay { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="activity" class="h-8 w-8 text-indigo-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">Aljabri<span class="text-indigo-600">+</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#services" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Services</a> | |
| <a href="#technology" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Technology</a> | |
| <a href="#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#contact" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Vanta.js Background --> | |
| <section id="home" class="hero-bg text-white relative overflow-hidden min-h-screen flex items-center"> | |
| <div class="vanta-container" id="vanta-bg"></div> | |
| <div class="content-overlay max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32"> | |
| <div class="text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Revolutionizing <span class="text-yellow-300">Mining</span> Technology</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Aljabri+ delivers cutting-edge mining solutions with unmatched efficiency and sustainability.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Explore Solutions | |
| </button> | |
| <button class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Our <span class="text-indigo-600">Mining</span> Services</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Comprehensive solutions tailored to your mining needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="compass" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Exploration Services</h3> | |
| <p class="text-gray-500">Advanced geological surveys and mineral exploration using cutting-edge technology to identify valuable deposits.</p> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="hard-drive" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Automated Mining</h3> | |
| <p class="text-gray-500">State-of-the-art autonomous mining equipment that increases productivity while reducing operational costs.</p> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="cpu" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">AI Optimization</h3> | |
| <p class="text-gray-500">Artificial intelligence systems that analyze data in real-time to optimize extraction processes and resource allocation.</p> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="shield" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Safety Solutions</h3> | |
| <p class="text-gray-500">Comprehensive safety protocols and monitoring systems to protect workers and equipment in hazardous environments.</p> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="refresh-cw" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Sustainable Practices</h3> | |
| <p class="text-gray-500">Environmentally responsible mining techniques that minimize ecological impact while maximizing resource recovery.</p> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="mining-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="trending-up" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Data Analytics</h3> | |
| <p class="text-gray-500">Advanced analytics platforms that provide actionable insights to improve operational efficiency and profitability.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="technology" class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center"> | |
| <div class="lg:col-span-6 mb-8 lg:mb-0" data-aos="fade-right"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Mining Technology" class="rounded-xl shadow-xl w-full"> | |
| </div> | |
| <div class="lg:col-span-6" data-aos="fade-left"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Our <span class="text-indigo-600">Innovative</span> Technology</h2> | |
| <p class="text-lg text-gray-600 mb-6">Aljabri+ combines the latest advancements in mining technology with decades of industry expertise to deliver unparalleled results.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i data-feather="zap"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">High-Efficiency Extraction</h3> | |
| <p class="text-gray-600 mt-1">Our proprietary extraction methods yield 30% more material with 20% less energy consumption.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i data-feather="eye"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Real-Time Monitoring</h3> | |
| <p class="text-gray-600 mt-1">Comprehensive sensor networks provide live data on all aspects of the mining operation.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i data-feather="cloud"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Cloud Integration</h3> | |
| <p class="text-gray-600 mt-1">Seamless cloud connectivity ensures you have access to your operation's data from anywhere in the world.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 bg-indigo-700 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> | |
| <div data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-5xl font-bold mb-2">98%</div> | |
| <div class="text-xl">Operational Efficiency</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-5xl font-bold mb-2">24/7</div> | |
| <div class="text-xl">Uptime Guarantee</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-5xl font-bold mb-2">150+</div> | |
| <div class="text-xl">Satisfied Clients</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center"> | |
| <div class="lg:col-span-6 order-2 lg:order-1 mt-8 lg:mt-0" data-aos="fade-right"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">About <span class="text-indigo-600">Aljabri+</span></h2> | |
| <p class="text-lg text-gray-600 mb-6">Founded in 2015, Aljabri+ has rapidly become a leader in innovative mining solutions. Our team of engineers, geologists, and technology experts are dedicated to pushing the boundaries of what's possible in mineral extraction.</p> | |
| <p class="text-lg text-gray-600 mb-6">We believe that responsible mining and technological advancement can coexist, creating value for our clients while minimizing environmental impact.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">Innovation</div> | |
| <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">Sustainability</div> | |
| <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">Efficiency</div> | |
| <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">Safety</div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-6 order-1 lg:order-2" data-aos="fade-left"> | |
| <img src="http://static.photos/industry/1024x576/15" alt="Aljabri+ Team" class="rounded-xl shadow-xl w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Our <span class="text-indigo-600">Clients</span> Say</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Trusted by mining companies worldwide</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Michael Johnson</h4> | |
| <p class="text-indigo-600">CEO, MineralTech</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Aljabri+ transformed our mining operations with their AI optimization platform. We've seen a 40% increase in productivity while reducing costs."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Sarah Williams</h4> | |
| <p class="text-indigo-600">Operations Director, GeoMine</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The safety solutions from Aljabri+ have significantly reduced incidents at our sites. Their technology is truly groundbreaking."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">David Chen</h4> | |
| <p class="text-indigo-600">CTO, Pacific Minerals</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Their sustainable mining practices have helped us meet environmental regulations while maintaining profitability. A true partner in innovation."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-indigo-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold mb-6">Ready to Transform Your <span class="text-yellow-300">Mining Operations</span>?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Contact us today to learn how Aljabri+ can revolutionize your mining processes with our cutting-edge technology and expertise.</p> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-4 px-12 rounded-lg text-lg transition duration-300 transform hover:scale-105"> | |
| Get Started Now | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16"> | |
| <div class="mb-12 lg:mb-0" data-aos="fade-right"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Contact <span class="text-indigo-600">Us</span></h2> | |
| <p class="text-lg text-gray-600 mb-8">Have questions about our mining solutions? Our team is ready to help you with any inquiries.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600"> | |
| <i data-feather="map-pin"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Headquarters</h3> | |
| <p class="text-gray-600 mt-1">123 Mining Avenue, Suite 500<br>Denver, CO 80202</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600"> | |
| <i data-feather="phone"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Phone</h3> | |
| <p class="text-gray-600 mt-1">+1 (303) 555-0199</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email</h3> | |
| <p class="text-gray-600 mt-1">info@aljabriplus.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> | |
| <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> | |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-gray-700">Company</label> | |
| <input type="text" id="company" name="company" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> | |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Aljabri<span class="text-indigo-400">+</span></h3> | |
| <p class="text-gray-400">Innovative mining solutions for the modern era.</p> | |
| <div class="flex mt-6 space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Solutions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Exploration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Extraction</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Processing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">News</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Whitepapers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Aljabri+. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe effect | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3a82f6, | |
| backgroundColor: 0x0, | |
| size: 1.00 | |
| }); | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |