| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NeonNexus Agency - Digital Alchemists</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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f5f3ff', |
| 100: '#ede9fe', |
| 200: '#ddd6fe', |
| 300: '#c4b5fd', |
| 400: '#a78bfa', |
| 500: '#8b5cf6', |
| 600: '#7c3aed', |
| 700: '#6d28d9', |
| 800: '#5b21b6', |
| 900: '#4c1d95', |
| }, |
| secondary: { |
| 50: '#f0fdfa', |
| 100: '#ccfbf1', |
| 200: '#99f6e4', |
| 300: '#5eead4', |
| 400: '#2dd4bf', |
| 500: '#14b8a6', |
| 600: '#0d9488', |
| 700: '#0f766e', |
| 800: '#115e59', |
| 900: '#134e4a', |
| } |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'glow': 'glow 2s ease-in-out infinite alternate', |
| 'slide-up': 'slideUp 0.6s ease-out forwards', |
| 'slide-down': 'slideDown 0.6s ease-out forwards', |
| 'fade-in': 'fadeIn 0.8s ease-out forwards', |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-900 text-white transition-colors duration-300 dark-mode"> |
| |
| <div id="loading-screen" class="fixed inset-0 bg-gray-900 z-50 flex items-center justify-center transition-opacity duration-500"> |
| <div class="w-16 h-16 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div> |
| </div> |
|
|
| |
| <button id="theme-toggle" class="fixed top-4 right-4 z-40 p-3 bg-gray-800 rounded-full shadow-lg hover:bg-gray-700 transition-colors duration-300"> |
| <i data-feather="sun" class="w-5 h-5 text-yellow-400 dark-icon hidden"></i> |
| <i data-feather="moon" class="w-5 h-5 text-primary-400 light-icon"></i> |
| </button> |
|
|
| |
| <nav-bar></nav-bar> |
|
|
| |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden px-4 pt-20"> |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-900/20 via-transparent to-secondary-900/20"></div> |
| <div class="absolute top-20 left-10 w-72 h-72 bg-primary-500 rounded-full filter blur-3xl opacity-20 animate-float"></div> |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500 rounded-full filter blur-3xl opacity-20 animate-float" style="animation-delay: -3s;"></div> |
| |
| <div class="container mx-auto max-w-6xl relative z-10"> |
| <div class="text-center space-y-8"> |
| <h1 class="text-5xl md:text-7xl font-bold leading-tight"> |
| <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400 animate-glow"> |
| Digital Alchemists |
| </span> |
| <span class="block text-gray-300 mt-2">Crafting Tomorrow</span> |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto leading-relaxed"> |
| We transform pixels into experiences, code into art, and ideas into digital masterpieces that captivate and convert. |
| </p> |
| <div class="flex flex-wrap justify-center gap-4 pt-8"> |
| <a href="#portfolio" class="px-8 py-4 bg-primary-600 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-primary-500/25"> |
| View Our Work |
| </a> |
| <a href="#contact" class="px-8 py-4 border-2 border-primary-500 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1"> |
| Start Project |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
| <i data-feather="chevron-down" class="w-8 h-8 text-primary-400"></i> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 px-4"> |
| <div class="container mx-auto max-w-6xl"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400"> |
| Our Services |
| </span> |
| </h2> |
| <p class="text-gray-400 text-lg max-w-2xl mx-auto"> |
| Full-spectrum digital solutions tailored to elevate your brand |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <service-card |
| icon="code" |
| title="Web Development" |
| description="Custom-built, performant websites with cutting-edge technologies and pixel-perfect implementation." |
| ></service-card> |
| <service-card |
| icon="layout" |
| title="UI/UX Design" |
| description="Intuitive interfaces that delight users and drive engagement through thoughtful design systems." |
| ></service-card> |
| <service-card |
| icon="smartphone" |
| title="Mobile Apps" |
| description="Native and cross-platform mobile applications that deliver seamless user experiences." |
| ></service-card> |
| <service-card |
| icon="zap" |
| title="Brand Strategy" |
| description="Comprehensive brand identity development that resonates with your target audience." |
| ></service-card> |
| <service-card |
| icon="trending-up" |
| title="Digital Marketing" |
| description="Data-driven campaigns that amplify your reach and maximize ROI across all channels." |
| ></service-card> |
| <service-card |
| icon="shield" |
| title="Cybersecurity" |
| description="Enterprise-grade security solutions to protect your digital assets and user data." |
| ></service-card> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-20 px-4 bg-gray-800/50"> |
| <div class="container mx-auto max-w-6xl"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400"> |
| Featured Work |
| </span> |
| </h2> |
| <p class="text-gray-400 text-lg max-w-2xl mx-auto"> |
| A curated selection of our recent digital masterpieces |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400"> |
| Client Testimonials |
| </span> |
| </h2> |
| <p class="text-gray-400 text-lg"> |
| What our clients say about working with us |
| </p> |
| </div> |
|
|
| <div class="relative" id="testimonials-slider"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 px-4 bg-gray-800/50"> |
| <div class="container mx-auto max-w-4xl"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400"> |
| Let's Create Magic |
| </span> |
| </h2> |
| <p class="text-gray-400 text-lg"> |
| Ready to transform your vision into reality? Get in touch. |
| </p> |
| </div> |
|
|
| <form id="contact-form" class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <input type="text" placeholder="Your Name" required |
| class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300"> |
| </div> |
| <div> |
| <input type="email" placeholder="Your Email" required |
| class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300"> |
| </div> |
| </div> |
| <div> |
| <input type="text" placeholder="Project Type" |
| class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300"> |
| </div> |
| <div> |
| <textarea rows="6" placeholder="Tell us about your project" required |
| class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300 resize-none"></textarea> |
| </div> |
| <div class="text-center"> |
| <button type="submit" |
| class="px-12 py-4 bg-primary-600 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-primary-500/25"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <site-footer></site-footer> |
|
|
| |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/service-card.js"></script> |
| <script src="components/portfolio-item.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
