| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nomarddesk - Digital Growth Engine</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> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); |
| * { |
| font-family: 'Inter', sans-serif; |
| } |
| .glass-morphism { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .neon-glow { |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), |
| 0 0 20px rgba(0, 255, 255, 0.6), |
| 0 0 30px rgba(0, 255, 255, 0.4); |
| } |
| .neon-border { |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), |
| inset 0 0 20px rgba(0, 255, 255, 0.1); |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| } |
| @keyframes slide { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 0.3; } |
| 50% { opacity: 0.8; } |
| } |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| .animated-gradient { |
| background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #533483); |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
| .floating-shape { |
| position: absolute; |
| opacity: 0.1; |
| animation: float 6s ease-in-out infinite; |
| } |
| .review-scroll { |
| animation: slide 20s linear infinite; |
| } |
| .star-glow { |
| filter: drop-shadow(0 0 3px #ffd700); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white overflow-x-hidden"> |
| |
| <div class="fixed inset-0 animated-gradient -z-10"> |
| <div class="floating-shape w-64 h-64 bg-cyan-500 rounded-full blur-3xl top-10 left-10"></div> |
| <div class="floating-shape w-96 h-96 bg-purple-500 rounded-full blur-3xl bottom-10 right-10" style="animation-delay: 2s;"></div> |
| <div class="floating-shape w-48 h-48 bg-pink-500 rounded-full blur-3xl top-1/2 left-1/3" style="animation-delay: 4s;"></div> |
| <div class="floating-shape w-72 h-72 bg-blue-500 rounded-full blur-3xl bottom-1/3 right-1/4" style="animation-delay: 1s;"></div> |
| |
| |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="absolute h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent w-full opacity-30" style="top: 20%; animation: pulse 3s ease-in-out infinite;"></div> |
| <div class="absolute h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent w-full opacity-30" style="top: 50%; animation: pulse 3s ease-in-out infinite; animation-delay: 1s;"></div> |
| <div class="absolute h-px bg-gradient-to-r from-transparent via-pink-500 to-transparent w-full opacity-30" style="top: 80%; animation: pulse 3s ease-in-out infinite; animation-delay: 2s;"></div> |
| </div> |
| </div> |
|
|
| |
| <nav class="glass-morphism fixed w-full z-50 px-6 py-4"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="text-2xl font-bold neon-glow">Nomarddesk</div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="hover:text-cyan-400 transition">Home</a> |
| <a href="#services" class="hover:text-cyan-400 transition">Services</a> |
| <a href="#reviews" class="hover:text-cyan-400 transition">Reviews</a> |
| <a href="#contact" class="hover:text-cyan-400 transition">Contact</a> |
| </div> |
| <button class="md:hidden" id="mobileMenuBtn"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="min-h-screen flex items-center justify-center px-6 pt-20"> |
| <div class="max-w-4xl text-center"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-glow"> |
| Nomarddesk<br> |
| <span class="text-3xl md:text-5xl bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent"> |
| Digital Growth Engine |
| </span> |
| </h1> |
| <div class="text-lg md:text-xl mb-8 text-gray-300"> |
| Innovation | Promotion | Automation | Growth |
| </div> |
| <div class="h-12 mb-8"> |
| <div id="serviceText" class="text-2xl md:text-3xl font-semibold text-cyan-400 transition-all duration-500"> |
| Telegram Promotion |
| </div> |
| </div> |
| <div class="flex flex-col md:flex-row gap-4 justify-center"> |
| <button class="glass-morphism px-8 py-3 rounded-full hover:bg-cyan-500/20 transition neon-border"> |
| Get Started |
| </button> |
| <button class="glass-morphism px-8 py-3 rounded-full hover:bg-purple-500/20 transition"> |
| View Services |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 px-6"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-4xl font-bold text-center mb-16 neon-glow">Our Services</h2> |
| |
| <div class="space-y-8"> |
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-cyan-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="send" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">Telegram Promotion</h3> |
| <p class="text-gray-300">Boost your Telegram channel growth with our advanced promotion strategies and organic reach techniques.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700"></div> |
|
|
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-purple-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="target" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">Telegram Ads</h3> |
| <p class="text-gray-300">Reach millions of targeted users with our specialized Telegram advertising campaigns.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700"></div> |
|
|
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-pink-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="cpu" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">Telegram Bot Development</h3> |
| <p class="text-gray-300">Custom Telegram bots to automate your business processes and enhance user engagement.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700"></div> |
|
|
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-blue-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="smartphone" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">App Development</h3> |
| <p class="text-gray-300">Cutting-edge mobile applications tailored to your business needs and user requirements.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700"></div> |
|
|
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-green-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="music" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">Music Marketing</h3> |
| <p class="text-gray-300">Promote your music across platforms and grow your audience with our strategic marketing campaigns.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700"></div> |
|
|
| <div class="glass-morphism p-6 rounded-lg hover:scale-105 transition-transform duration-300 group"> |
| <div class="flex items-start gap-4"> |
| <div class="text-yellow-400 group-hover:scale-110 transition-transform"> |
| <i data-feather="trending-up" class="w-8 h-8"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-2xl font-semibold mb-2">Crypto Marketing</h3> |
| <p class="text-gray-300">Strategic marketing solutions for crypto projects to reach the right audience and drive adoption.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="reviews" class="relative py-20 px-6 overflow-hidden"> |
| <div class="absolute inset-0 opacity-20"> |
| <div class="review-scroll flex whitespace-nowrap"> |
| <div class="glass-morphism mx-4 p-4 rounded-lg min-w-[300px]"> |
| <div class="flex items-center gap-1 mb-2"> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| </div> |
| <p class="text-sm">"Outstanding service!"</p> |
| <p class="text-xs text-gray-400">- Alex Chen</p> |
| </div> |
| <div class="glass-morphism mx-4 p-4 rounded-lg min-w-[300px]"> |
| <div class="flex items-center gap-1 mb-2"> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| </div> |
| <p class="text-sm">"Exceeded all expectations!"</p> |
| <p class="text-xs text-gray-400">- Sarah Miller</p> |
| </div> |
| <div class="glass-morphism mx-4 p-4 rounded-lg min-w-[300px]"> |
| <div class="flex items-center gap-1 mb-2"> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 star-glow"></i> |
| </div> |
| <p class="text-sm">"Professional and reliable!"</p> |
| <p class="text-xs text-gray-400">- Mike Johnson</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative z-10 max-w-4xl mx-auto text-center"> |
| <h2 class="text-4xl font-bold mb-8 neon-glow">What Our Clients Are Saying</h2> |
| <div class="glass-morphism p-8 rounded-xl neon-border"> |
| <div class="text-6xl mb-4 text-cyan-400"> |
| <i data-feather="message-circle"></i> |
| </div> |
| <p class="text-xl text-gray-300 mb-6">Join thousands of satisfied clients who have transformed their business with Nomarddesk</p> |
| <div class="flex justify-center gap-2"> |
| <i data-feather="star" class="w-6 h-6 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-6 h-6 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-6 h-6 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-6 h-6 text-yellow-400 star-glow"></i> |
| <i data-feather="star" class="w-6 h-6 text-yellow-400 star-glow"></i> |
| <span class="ml-2 text-lg">4.9/5 Average Rating</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-6"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-4xl font-bold text-center mb-12 neon-glow">Share Your Experience</h2> |
| |
| <form id="reviewForm" class="glass-morphism p-8 rounded-xl neon-border space-y-6"> |
| <div> |
| <label class="block mb-2 text-gray-300">Select Service</label> |
| <select class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none"> |
| <option>Telegram Promotion</option> |
| <option>Telegram Ads</option> |
| <option>Telegram Bot Development</option> |
| <option>App Development</option> |
| <option>Music Marketing</option> |
| <option>Crypto Marketing</option> |
| </select> |
| </div> |
|
|
| <div class="space-y-4"> |
| <div class="flex items-center justify-between"> |
| <span class="text-gray-300">Our Community</span> |
| <div class="rating-stars flex gap-1" data-rating="community"> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <span class="text-gray-300">Customer Support</span> |
| <div class="rating-stars flex gap-1" data-rating="support"> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <span class="text-gray-300">Pricing Value</span> |
| <div class="rating-stars flex gap-1" data-rating="pricing"> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <span class="text-gray-300">Service Quality</span> |
| <div class="rating-stars flex gap-1" data-rating="quality"> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <span class="text-gray-300">Recommendation</span> |
| <div class="rating-stars flex gap-1" data-rating="recommendation"> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| <i data-feather="star" class="w-6 h-6 cursor-pointer hover:text-yellow-400 text-gray-600"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <button type="submit" class="w-full glass-morphism py-3 rounded-lg hover:bg-cyan-500/20 transition neon-border font-semibold"> |
| Submit Review |
| </button> |
| </form> |
|
|
| <div id="successMessage" class="hidden mt-6 glass-morphism p-6 rounded-xl border border-green-500 text-center"> |
| <i data-feather="check-circle" class="w-12 h-12 text-green-400 mx-auto mb-3"></i> |
| <p class="text-green-400 font-semibold">Thank you for your review!</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 px-6"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-4xl font-bold text-center mb-12 neon-glow">Get Started Today</h2> |
| |
| <form id="contactForm" class="glass-morphism p-8 rounded-xl neon-border space-y-6"> |
| <div> |
| <label class="block mb-2 text-gray-300">Name</label> |
| <input type="text" class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none" placeholder="John Doe"> |
| </div> |
|
|
| <div> |
| <label class="block mb-2 text-gray-300">Email</label> |
| <input type="email" class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none" placeholder="john@example.com"> |
| </div> |
|
|
| <div> |
| <label class="block mb-2 text-gray-300">Select Service</label> |
| <select class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none"> |
| <option>Choose a service...</option> |
| <option>Telegram Promotion</option> |
| <option>Telegram Ads</option> |
| <option>Telegram Bot Development</option> |
| <option>App Development</option> |
| <option>Music Marketing</option> |
| <option>Crypto Marketing</option> |
| </select> |
| </div> |
|
|
| <div> |
| <label class="block mb-2 text-gray-300">Message</label> |
| <textarea class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none h-32" placeholder="Tell us about your project..."></textarea> |
| </div> |
|
|
| <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-purple-500 py-3 rounded-lg hover:from-cyan-600 hover:to-purple-600 transition font-semibold"> |
| Send Message |
| </button> |
| </form> |
|
|
| <div id="contactSuccess" class="hidden mt-6 glass-morphism p-6 rounded-xl border border-green-500 text-center"> |
| <i data-feather="check-circle" class="w-12 h-12 text-green-400 mx-auto mb-3"></i> |
| <p class="text-green-400 font-semibold">Message sent successfully!</p> |
| <p class="text-gray-400 text-sm mt-2">We'll get back to you within 24 hours.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="glass-morphism py-12 px-6 mt-20"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <h3 class="text-2xl font-bold mb-4 neon-glow">Nomarddesk</h3> |
| <p class="text-gray-400">Your Digital Growth Partner</p> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-3">Services</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-cyan-400 transition">Telegram Promotion</a></li> |
| <li><a href="#" class="hover:text-cyan-400 transition">App Development</a></li> |
| <li><a href="#" class="hover:text-cyan-400 transition">Crypto Marketing</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-3">Company</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-cyan-400 transition">About Us</a></li> |
| <li><a href="#" class="hover:text-cyan-400 transition">Contact</a></li> |
| <li><a href="#" class="hover:text-cyan-400 transition">Blog</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-3">Newsletter</h4> |
| <div class="flex gap-2"> |
| <input type="email" placeholder="Your email" class="flex-1 p-2 rounded-lg bg-gray-800 border border-gray-700 focus:border-cyan-400 focus:outline-none"> |
| <button class="px-4 py-2 bg-cyan-500 rounded-lg hover:bg-cyan-600 transition"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| |
| <div class="flex gap-4 mt-6"> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="github"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="instagram"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 pt-8 text-center text-gray-400"> |
| <p>© 2024 Nomarddesk. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
