Spaces:
Running
Running
Let make the website more proprofessional let every buttbutton lead some wheere and create more page html page and let every look good and and add api to website that will handlhandle as well the bot that will be at the right side blow the website and when click on the website the api will be the website
92d9d0d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Services - NMDX Digital Growth Accelerator</title> | |
| <meta name="description" content="Explore our comprehensive digital marketing services: Telegram promotion, token marketing, app development, SEO, and more."> | |
| <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-slate-900 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"> | |
| Our Services | |
| </h1> | |
| <p class="text-2xl md:text-4xl mb-4 text-gray-300">Comprehensive Digital Solutions</p> | |
| <p class="text-lg md:text-xl mb-8 text-gray-400 max-w-3xl mx-auto"> | |
| From crypto promotion to app development, we offer end-to-end solutions to accelerate your digital growth and maximize your online presence. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Services Categories --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <!-- 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 Services</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 & Blockchain</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">Digital 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> | |
| <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="content">Content & Media</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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Targeted member acquisition</li> | |
| <li>• Community engagement campaigns</li> | |
| <li>• Influencer partnerships</li> | |
| </ul> | |
| <a href="telegram-promotion.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• ICO/IDO/IEO marketing</li> | |
| <li>• Exchange listing support</li> | |
| <li>• Investor community building</li> | |
| </ul> | |
| <a href="token-promotion.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Premium ad placements</li> | |
| <li>• A/B testing campaigns</li> | |
| <li>• Performance analytics</li> | |
| </ul> | |
| <a href="telegram-ads.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• 24/7 community moderation</li> | |
| <li>• Engagement strategies</li> | |
| <li>• Crisis management</li> | |
| </ul> | |
| <a href="community-management.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• ASO optimization</li> | |
| <li>• User acquisition campaigns</li> | |
| <li>• Retention strategies</li> | |
| </ul> | |
| <a href="app-promotion.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• iOS & Android development</li> | |
| <li>• Web applications</li> | |
| <li>• Blockchain integration</li> | |
| </ul> | |
| <a href="app-development.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="content"> | |
| <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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Playlist placement</li> | |
| <li>• Social media campaigns</li> | |
| <li>• Influencer collaborations</li> | |
| </ul> | |
| <a href="music-promotion.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="content"> | |
| <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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Media outreach</li> | |
| <li>• PR strategy development</li> | |
| <li>• Brand positioning</li> | |
| </ul> | |
| <a href="press-releases.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="content"> | |
| <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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Blog posts & articles</li> | |
| <li>• Website copywriting</li> | |
| <li>• SEO-optimized content</li> | |
| </ul> | |
| <a href="content-writing.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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Technical SEO audit</li> | |
| <li>• Local SEO optimization</li> | |
| <li>• Performance tracking</li> | |
| </ul> | |
| <a href="seo-geo.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="content"> | |
| <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> | |
| <ul class="text-gray-400 text-sm mb-4 space-y-2"> | |
| <li>• Video optimization</li> | |
| <li>• Channel growth strategies</li> | |
| <li>• Monetization assistance</li> | |
| </ul> | |
| <a href="youtube-promotion.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> | |
| <!-- Pricing Section --> | |
| <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"> | |
| Flexible Pricing Plans | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-8 border border-slate-700 hover:border-emerald-500/50 transition-all"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-400">Starter</h3> | |
| <div class="text-4xl font-bold mb-4">$999<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Basic promotion services</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Monthly reports</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Email support</li> | |
| </ul> | |
| <a href="contact.html" class="w-full py-3 border border-cyan-500 rounded-lg text-center block hover:bg-cyan-500/20 transition-all"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/50 hover:border-emerald-500/70 transition-all transform scale-105"> | |
| <div class="bg-gradient-to-r from-emerald-400 to-cyan-400 text-white text-sm px-3 py-1 rounded-full inline-block mb-4"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-emerald-400">Professional</h3> | |
| <div class="text-4xl font-bold mb-4">$2,999<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Advanced promotion strategies</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Weekly reports & analytics</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Priority support</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Custom strategies</li> | |
| </ul> | |
| <a href="contact.html" class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 rounded-lg text-center block hover:from-emerald-700 hover:to-cyan-700 transition-all"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-8 border border-slate-700 hover:border-cyan-500/50 transition-all"> | |
| <h3 class="text-2xl font-bold mb-4 text-emerald-400">Enterprise</h3> | |
| <div class="text-4xl font-bold mb-4">Custom</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Full-service solutions</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Real-time analytics</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Dedicated account manager</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> Custom integrations</li> | |
| </ul> | |
| <a href="contact.html" class="w-full py-3 border border-emerald-500 rounded-lg text-center block hover:bg-emerald-500/20 transition-all"> | |
| Contact Sales | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |