Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NMDX - Digital Growth Accelerator</title> | |
| <meta name="description" content="Expert digital marketing and crypto promotion services. Telegram promotion, token marketing, app growth, and more."> | |
| <meta property="og:title" content="NMDX - Digital Growth Accelerator"> | |
| <meta property="og:description" content="Expert digital marketing and crypto promotion services"> | |
| <meta property="og:image" content="http://static.photos/technology/1200x630/1"> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>"> | |
| <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 src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/chat-widget.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-950 text-white overflow-x-hidden"> | |
| <!-- Animated Background --> | |
| <div class="fixed inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-emerald-900/20 via-slate-900 to-cyan-900/20"></div> | |
| <canvas id="shockwaveCanvas" class="absolute inset-0"></canvas> | |
| <div class="absolute inset-0 bg-black/50"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Main Content --> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500 bg-clip-text text-transparent animate-pulse"> | |
| NMDX | |
| </h1> | |
| <p class="text-2xl md:text-4xl mb-4 text-gray-300">Digital Growth Accelerator</p> | |
| <p class="text-lg md:text-xl mb-8 text-gray-400 max-w-3xl mx-auto"> | |
| Transform your digital presence with cutting-edge promotion strategies. From crypto tokens to apps, we amplify your reach and drive explosive growth. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="services.html" class="px-8 py-4 bg-gradient-to-r from-emerald-600 to-cyan-600 rounded-full font-semibold text-lg hover:scale-105 transition-transform"> | |
| Explore Services | |
| </a> | |
| <a href="contact.html" class="px-8 py-4 border-2 border-emerald-500 rounded-full font-semibold text-lg hover:bg-emerald-500/20 transition-all"> | |
| Hire Me Now | |
| </a> | |
| </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"></i> | |
| </div> | |
| </section> | |
| <!-- Services Grid Section --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Our Services | |
| </h2> | |
| <!-- Filter Tags --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-12"> | |
| <button class="filter-tag px-6 py-2 rounded-full bg-emerald-600/20 border border-emerald-500 hover:bg-emerald-600/40 transition-all" data-filter="all">All</button> | |
| <button class="filter-tag px-6 py-2 rounded-full bg-emerald-600/20 border border-emerald-500 hover:bg-emerald-600/40 transition-all" data-filter="crypto">Crypto</button> | |
| <button class="filter-tag px-6 py-2 rounded-full bg-emerald-600/20 border border-emerald-500 hover:bg-emerald-600/40 transition-all" data-filter="marketing">Marketing</button> | |
| <button class="filter-tag px-6 py-2 rounded-full bg-emerald-600/20 border border-emerald-500 hover:bg-emerald-600/40 transition-all" data-filter="development">Development</button> | |
| </div> | |
| <!-- Services Grid --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="crypto"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="trending-up" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Telegram Promotion</h3> | |
| <p class="text-gray-400 mb-4">Boost your Telegram channel with targeted promotion strategies and organic growth tactics.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="crypto"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="coin" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Token Promotion</h3> | |
| <p class="text-gray-400 mb-4">Strategic token promotion campaigns to increase visibility and investor engagement.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="message-circle" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Telegram Ads</h3> | |
| <p class="text-gray-400 mb-4">Professional Telegram advertising campaigns with precise targeting and high ROI.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="users" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Community Management</h3> | |
| <p class="text-gray-400 mb-4">Build and manage thriving online communities around your brand or project.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="development"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="smartphone" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">App Promotion</h3> | |
| <p class="text-gray-400 mb-4">Comprehensive app marketing strategies to boost downloads and user engagement.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="development"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="code" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">App Development</h3> | |
| <p class="text-gray-400 mb-4">Custom app development with cutting-edge technologies and innovative features.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="music" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Music Promotion</h3> | |
| <p class="text-gray-400 mb-4">Amplify your music reach across platforms and grow your fan base organically.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="file-text" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Press Releases</h3> | |
| <p class="text-gray-400 mb-4">Professional press release creation and distribution to maximize media coverage.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="edit-3" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Content Writing</h3> | |
| <p class="text-gray-400 mb-4">Engaging content creation that resonates with your audience and drives conversions.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="search" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">SEO / GEO</h3> | |
| <p class="text-gray-400 mb-4">Advanced SEO and GEO strategies to dominate search rankings and local markets.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="service-card bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 hover:border-emerald-500/60 transition-all hover:scale-105" data-category="marketing"> | |
| <div class="text-emerald-400 mb-4"> | |
| <i data-feather="youtube" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">YouTube Promotion</h3> | |
| <p class="text-gray-400 mb-4">Grow your YouTube channel with targeted promotion and content optimization.</p> | |
| <a href="services.html" class="inline-flex items-center text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Timeline --> | |
| <section class="py-20 bg-black/30"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Our Process | |
| </h2> | |
| <div class="relative"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-emerald-500 to-cyan-500"></div> | |
| <div class="space-y-12"> | |
| <div class="flex items-center justify-end md:justify-center"> | |
| <div class="timeline-item bg-gradient-to-r from-emerald-900/50 to-transparent p-8 rounded-lg max-w-md ml-auto md:ml-0 md:text-right"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-emerald-500 rounded-full border-4 border-gray-950"></div> | |
| <h3 class="text-2xl font-bold mb-2">Discovery & Strategy</h3> | |
| <p class="text-gray-400">We analyze your goals, target audience, and competitive landscape to create a customized growth strategy.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-start md:justify-center"> | |
| <div class="timeline-item bg-gradient-to-l from-cyan-900/50 to-transparent p-8 rounded-lg max-w-md mr-auto md:mr-0 md:text-left"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-cyan-500 rounded-full border-4 border-gray-950"></div> | |
| <h3 class="text-2xl font-bold mb-2">Campaign Development</h3> | |
| <p class="text-gray-400">Our team crafts compelling campaigns tailored to your brand voice and objectives.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-end md:justify-center"> | |
| <div class="timeline-item bg-gradient-to-r from-emerald-900/50 to-transparent p-8 rounded-lg max-w-md ml-auto md:ml-0 md:text-right"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-emerald-500 rounded-full border-4 border-gray-950"></div> | |
| <h3 class="text-2xl font-bold mb-2">Execution & Launch</h3> | |
| <p class="text-gray-400">We implement and launch your campaigns across multiple channels with precision timing.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-start md:justify-center"> | |
| <div class="timeline-item bg-gradient-to-l from-cyan-900/50 to-transparent p-8 rounded-lg max-w-md mr-auto md:mr-0 md:text-left"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-cyan-500 rounded-full border-4 border-gray-950"></div> | |
| <h3 class="text-2xl font-bold mb-2">Optimization & Growth</h3> | |
| <p class="text-gray-400">Continuous monitoring and optimization to ensure maximum ROI and sustainable growth.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills & Tools --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Expertise & Tools | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-emerald-400">Core Skills</h3> | |
| <div class="space-y-4"> | |
| <div class="skill-bar"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Digital Marketing</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-3"> | |
| <div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Crypto Promotion</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-3"> | |
| <div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="flex justify-between mb-2"> | |
| <span>App Development</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-3"> | |
| <div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Community Building</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-3"> | |
| <div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-cyan-400">Tools & Platforms</h3> | |
| <div class="grid grid-cols-4 gap-6"> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="trending-up" class="w-8 h-8 mx-auto mb-2 text-emerald-400"></i> | |
| <p class="text-sm">Analytics</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="message-circle" class="w-8 h-8 mx-auto mb-2 text-cyan-400"></i> | |
| <p class="text-sm">Social Media</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="code" class="w-8 h-8 mx-auto mb-2 text-green-400"></i> | |
| <p class="text-sm">Development</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="bar-chart-2" class="w-8 h-8 mx-auto mb-2 text-yellow-400"></i> | |
| <p class="text-sm">SEO Tools</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="mail" class="w-8 h-8 mx-auto mb-2 text-red-400"></i> | |
| <p class="text-sm">Email Marketing</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="video" class="w-8 h-8 mx-auto mb-2 text-pink-400"></i> | |
| <p class="text-sm">Video Tools</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="pen-tool" class="w-8 h-8 mx-auto mb-2 text-indigo-400"></i> | |
| <p class="text-sm">Design</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 p-4 rounded-lg hover:bg-emerald-900/30 transition-all"> | |
| <i data-feather="database" class="w-8 h-8 mx-auto mb-2 text-cyan-400"></i> | |
| <p class="text-sm">Data Analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-black/30"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Client Success Stories | |
| </h2> | |
| <div class="testimonials-slider relative overflow-hidden"> | |
| <div class="flex transition-transform duration-500" id="testimonialsContainer"> | |
| <div class="testimonial-item min-w-full px-4"> | |
| <div class="max-w-3xl mx-auto bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/100x100/1" alt="Client" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-lg">Sarah Chen</h4> | |
| <p class="text-gray-400">CEO, CryptoStart</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-gray-300 text-lg italic">"NMDX transformed our token launch. We achieved 500% growth in community engagement and successfully raised $2M in funding."</p> | |
| </div> | |
| </div> | |
| <div class="testimonial-item min-w-full px-4"> | |
| <div class="max-w-3xl mx-auto bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/100x100/2" alt="Client" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-lg">Mike Rodriguez</h4> | |
| <p class="text-gray-400">Founder, AppFlow</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-gray-300 text-lg italic">"Our app downloads increased by 300% in just 3 months. Their Telegram promotion strategy was game-changing for our growth."</p> | |
| </div> | |
| </div> | |
| <div class="testimonial-item min-w-full px-4"> | |
| <div class="max-w-3xl mx-auto bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/100x100/3" alt="Client" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-lg">Emily Zhang</h4> | |
| <p class="text-gray-400">Marketing Director, MusicHub</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-gray-300 text-lg italic">"The YouTube promotion campaign exceeded our expectations. 1M+ views and our subscriber count grew 10x. Absolutely incredible service!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-6 gap-2"> | |
| <button class="w-3 h-3 rounded-full bg-emerald-500" onclick="goToSlide(0)"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-600" onclick="goToSlide(1)"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-600" onclick="goToSlide(2)"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Let's Work Together | |
| </h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Name</label> | |
| <input type="text" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="Your Name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="your@email.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Service Interest</label> | |
| <select class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors"> | |
| <option>Select a Service</option> | |
| <option>Telegram Promotion</option> | |
| <option>Token Promotion</option> | |
| <option>Telegram Ads</option> | |
| <option>Community Management</option> | |
| <option>App Promotion</option> | |
| <option>App Development</option> | |
| <option>Music Promotion</option> | |
| <option>Press Releases</option> | |
| <option>Content Writing</option> | |
| <option>SEO / GEO</option> | |
| <option>YouTube Promotion</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Message</label> | |
| <textarea rows="5" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="Tell us about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-gradient-to-r from-emerald-600 to-cyan-600 rounded-lg font-semibold text-lg hover:from-emerald-700 hover:to-cyan-700 transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <!-- Case Study Modal --> | |
| <div id="caseStudyModal" class="fixed inset-0 z-50 hidden bg-black/80 flex items-center justify-center p-6"> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-950 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-purple-500/30"> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-3xl font-bold" id="modalTitle">Case Study</h3> | |
| <button onclick="closeCaseStudy()" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div id="modalContent" class="space-y-6"> | |
| <!-- Content will be dynamically inserted --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Message --> | |
| <div id="successMessage" class="fixed top-20 right-6 z-50 bg-green-600 text-white px-6 py-4 rounded-lg shadow-lg transform translate-x-full transition-transform"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Message sent successfully!</span> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |