Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Complex | Futuristic Digital Solutions</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 100: '#d1fae5', | |
| 500: '#10b981', | |
| 700: '#047857', | |
| }, | |
| secondary: { | |
| 100: '#e0e7ff', | |
| 500: '#6366f1', | |
| 700: '#4338ca', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/service-card.js"></script> | |
| <script src="components/cta-banner.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans antialiased"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gray-900 opacity-90"></div> | |
| <div class="absolute inset-0"> | |
| <img src="https://huggingface.co/spaces/Ghostgim/codecraft-complex-devs/resolve/main/images/Screenshot%202025-11-02%20064654.png" | |
| alt="CodeCraft Complex" | |
| class="w-full h-full object-cover opacity-20 animate-pulse-slow"> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-100 via-primary-500 to-secondary-500">Shaping The Digital Future</h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-white/90 relative z-10">Pioneering digital solutions powered by cutting-edge technology and visionary leadership.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#services" class="bg-white text-primary-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300"> | |
| Explore Services | |
| </a> | |
| <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-700 font-semibold py-3 px-8 rounded-lg transition duration-300"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-white/10 backdrop-blur-sm"></div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Comprehensive Services</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">From conception to execution and beyond, we cover every aspect of digital presence and functionality.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <service-card | |
| icon="globe" | |
| title="Web Design" | |
| description="Beautiful, intuitive interfaces that engage users and reflect your brand identity." | |
| ></service-card> | |
| <service-card | |
| icon="code" | |
| title="Web Development" | |
| description="Robust, scalable websites built with modern technologies and best practices." | |
| ></service-card> | |
| <service-card | |
| icon="cpu" | |
| title="Software Development" | |
| description="Custom software solutions designed to streamline your business operations." | |
| ></service-card> | |
| <service-card | |
| icon="joystick" | |
| title="Game Development" | |
| description="Immersive gaming experiences across multiple platforms and devices." | |
| ></service-card> | |
| <service-card | |
| icon="activity" | |
| title="AI Integration" | |
| description="Smart automation and intelligence infused into your digital products." | |
| ></service-card> | |
| <service-card | |
| icon="brain" | |
| title="AI Engineering" | |
| description="Custom AI models and machine learning solutions for your specific needs." | |
| ></service-card> | |
| <service-card | |
| icon="link" | |
| title="API Integration" | |
| description="Seamless connectivity between your systems and third-party services." | |
| ></service-card> | |
| <service-card | |
| icon="shield" | |
| title="Cybersecurity" | |
| description="Comprehensive protection for your digital assets and user data." | |
| ></service-card> | |
| <service-card | |
| icon="cloud" | |
| title="Cloud Services" | |
| description="Migration, setup, and management of cloud infrastructure." | |
| ></service-card> | |
| <service-card | |
| icon="zap" | |
| title="WebAssembly" | |
| description="High-performance web applications with near-native speed." | |
| ></service-card> | |
| <service-card | |
| icon="trending-up" | |
| title="Performance Optimization" | |
| description="Faster loading, better SEO, and improved user experience." | |
| ></service-card> | |
| <service-card | |
| icon="repeat" | |
| title="Business Automation" | |
| description="Streamline workflows with no-code/low-code solutions." | |
| ></service-card> | |
| <service-card | |
| icon="globe" | |
| title="Localization" | |
| description="Multi-language support for global audience reach." | |
| ></service-card> | |
| <service-card | |
| icon="tool" | |
| title="Maintenance Plans" | |
| description="Ongoing support to keep your digital products running smoothly." | |
| ></service-card> | |
| <service-card | |
| icon="smartphone" | |
| title="App Development" | |
| description="Cross-platform mobile applications for iOS and Android." | |
| ></service-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Proven Process</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">A structured approach to delivering exceptional results every time.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="search" class="text-primary-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Discovery</h3> | |
| <p class="text-gray-600">We analyze your needs and goals to create a tailored solution.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="layout" class="text-primary-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Planning</h3> | |
| <p class="text-gray-600">Structured roadmap with milestones and deliverables.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="code" class="text-primary-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Execution</h3> | |
| <p class="text-gray-600">Agile development with regular progress updates.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="check-circle" class="text-primary-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Delivery</h3> | |
| <p class="text-gray-600">Thorough testing and deployment with ongoing support.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leadership Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Visionary Leadership</h2> | |
| <p class="text-lg text-gray-400 max-w-3xl mx-auto">Driving innovation with a bold vision for the future</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-xl border border-gray-700 hover:border-primary-500 transition-all duration-300"> | |
| <div class="flex flex-col md:flex-row items-center gap-6"> | |
| <img src="https://static.photos/technology/200x200/1" alt="Joe Munene" class="w-32 h-32 rounded-full object-cover border-4 border-primary-500"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-1">Joe Munene</h3> | |
| <p class="text-primary-400 mb-3">CEO & Co-Founder</p> | |
| <p class="text-gray-300">Visionary leader with 15+ years experience in emerging technologies and digital transformation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-xl border border-gray-700 hover:border-secondary-500 transition-all duration-300"> | |
| <div class="flex flex-col md:flex-row items-center gap-6"> | |
| <img src="https://static.photos/technology/200x200/2" alt="Isaac" class="w-32 h-32 rounded-full object-cover border-4 border-secondary-500"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-1">Isaac</h3> | |
| <p class="text-secondary-400 mb-3">CTO & Co-Founder</p> | |
| <p class="text-gray-300">Technology pioneer specializing in AI, blockchain, and next-gen web architectures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-900 to-primary-700 text-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted By Industry Leaders</h2> | |
| <p class="text-lg text-primary-100 max-w-3xl mx-auto">Don't just take our word for it - hear what our clients have to say.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">AS</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Alex Smith</h4> | |
| <p class="text-primary-200 text-sm">CTO, TechNova</p> | |
| </div> | |
| </div> | |
| <p class="italic">"The AI integration completely transformed our customer service operations. The Complex Devs team delivered beyond our expectations."</p> | |
| </div> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">MJ</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Maria Johnson</h4> | |
| <p class="text-primary-200 text-sm">CEO, Global Retail</p> | |
| </div> | |
| </div> | |
| <p class="italic">"Their cloud migration expertise saved us thousands in infrastructure costs while improving performance dramatically."</p> | |
| </div> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">DR</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">David Rodriguez</h4> | |
| <p class="text-primary-200 text-sm">Founder, FinTech Startup</p> | |
| </div> | |
| </div> | |
| <p class="italic">"The security audit uncovered vulnerabilities we didn't even know existed. Their expertise is unparalleled."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <custom-cta-banner | |
| title="Ready to Transform Your Digital Presence?" | |
| button-text="Schedule Consultation" | |
| link="#contact" | |
| ></custom-cta-banner> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |