| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Phantom Digital | Enterprise-Grade Secure Automations</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| phantom: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-12"> |
| |
| <section class="flex flex-col md:flex-row items-center justify-between gap-12 mb-24"> |
| <div class="md:w-1/2 space-y-6"> |
| <h1 class="text-5xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500"> |
| Enterprise-Grade <br> <span class="text-white">Secure Automations</span> |
| </h1> |
| <p class="text-xl text-gray-300"> |
| We build bulletproof automation solutions that scale with your enterprise needs. |
| </p> |
| <div class="flex gap-4"> |
| <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium hover:opacity-90 transition"> |
| Get Started |
| </a> |
| <a href="#work" class="px-8 py-3 border border-gray-700 rounded-full font-medium hover:bg-gray-800 transition"> |
| Our Work |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="relative"> |
| <div class="absolute -inset-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl blur opacity-75"></div> |
| <div class="relative rounded-xl w-full h-auto bg-black overflow-hidden"> |
| <canvas id="matrixCanvas" class="w-full h-full"></canvas> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center p-8 backdrop-blur-sm bg-black/30 rounded-lg"> |
| <div class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500"> |
| PHANTOM DIGITAL |
| </div> |
| <div class="text-xl text-cyan-300">SECURE AUTOMATION SOLUTIONS</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="services" class="mb-24"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Our Digital Services</h2> |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| Comprehensive solutions tailored to your digital needs |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group"> |
| <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="code" class="text-white w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Web Development</h3> |
| <p class="text-gray-400"> |
| Custom websites and web applications built with modern technologies for optimal performance. |
| </p> |
| </div> |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group"> |
| <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="smartphone" class="text-white w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Mobile Apps</h3> |
| <p class="text-gray-400"> |
| Engaging mobile experiences for iOS and Android that delight users and drive engagement. |
| </p> |
| </div> |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group"> |
| <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="bar-chart-2" class="text-white w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Digital Strategy</h3> |
| <p class="text-gray-400"> |
| Data-driven strategies to maximize your digital presence and achieve business objectives. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="work" class="mb-24"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Featured Work</h2> |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| A glimpse of our recent digital projects |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="group relative overflow-hidden rounded-xl"> |
| <img src="http://static.photos/workspace/1200x630/5" alt="Project 1" class="w-full h-80 object-cover group-hover:scale-105 transition duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-8"> |
| <h3 class="text-2xl font-bold text-white mb-2">Corporate Portal</h3> |
| <p class="text-gray-300">Enterprise web application</p> |
| </div> |
| </div> |
| <div class="group relative overflow-hidden rounded-xl"> |
| <img src="http://static.photos/technology/1200x630/7" alt="Project 2" class="w-full h-80 object-cover group-hover:scale-105 transition duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-8"> |
| <h3 class="text-2xl font-bold text-white mb-2">E-commerce Platform</h3> |
| <p class="text-gray-300">Next-gen shopping experience</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-24"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Client Testimonials</h2> |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| What our clients say about working with us |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-800 p-8 rounded-xl"> |
| <div class="flex items-center gap-4 mb-6"> |
| <img src="http://static.photos/people/200x200/1" alt="Client" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-bold">Sarah Johnson</h4> |
| <p class="text-sm text-gray-400">CEO, TechCorp</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "Phantom Digital transformed our online presence with their innovative approach and technical expertise." |
| </p> |
| </div> |
| <div class="bg-gray-800 p-8 rounded-xl"> |
| <div class="flex items-center gap-4 mb-6"> |
| <img src="http://static.photos/people/200x200/2" alt="Client" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-bold">Michael Chen</h4> |
| <p class="text-sm text-gray-400">CMO, RetailX</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "The mobile app they developed exceeded our expectations and drove a 40% increase in engagement." |
| </p> |
| </div> |
| <div class="bg-gray-800 p-8 rounded-xl"> |
| <div class="flex items-center gap-4 mb-6"> |
| <img src="http://static.photos/people/200x200/3" alt="Client" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-bold">Emma Rodriguez</h4> |
| <p class="text-sm text-gray-400">Director, FinTech</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "Their strategic guidance helped us navigate digital transformation successfully." |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="mb-24"> |
| <div class="bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl p-8 md:p-12"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl font-bold mb-4">Ready to elevate your digital presence?</h2> |
| <p class="text-gray-400 mb-8"> |
| Let's discuss how we can help you achieve your digital goals. Get in touch with our team today. |
| </p> |
| <div class="space-y-4"> |
| <div class="flex items-center gap-4"> |
| <div class="w-10 h-10 bg-cyan-500/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="mail" class="text-cyan-400"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Email us at</p> |
| <p class="font-medium">hello@phantom-digital.com</p> |
| </div> |
| </div> |
| <div class="flex items-center gap-4"> |
| <div class="w-10 h-10 bg-cyan-500/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="phone" class="text-cyan-400"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Call us at</p> |
| <p class="font-medium">+1 (555) 123-4567</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> |
| <input type="text" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> |
| <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> |
| <textarea id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
