Spaces:

dodey917
/

nmdx-portfolio

Running

App Files Files Community

dodey917 commited on Dec 3, 2025

Commit

92d9d0d

verified ·

1 Parent(s): ca5829a

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

Browse files

Files changed (9) hide show

about.html +188 -0
components/ai-chat-widget.js +440 -0
components/footer.js +23 -32
components/navbar.js +27 -28
contact.html +265 -0
index.html +165 -161
script.js +73 -144
services.html +301 -0
style.css +39 -53

about.html ADDED Viewed

	@@ -0,0 +1,188 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About NMDX - Digital Growth Accelerator</title>
+    <meta name="description" content="Learn about NMDX - Your trusted partner for digital marketing, crypto promotion, and app development services.">
+    <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">
+                    About NMDX
+                </h1>
+                <p class="text-2xl md:text-4xl mb-4 text-gray-300">Pioneers in Digital Growth</p>
+                <p class="text-lg md:text-xl mb-8 text-gray-400 max-w-3xl mx-auto">
+                    With over a decade of experience in digital marketing and technology, we've helped thousands of businesses achieve exponential growth through innovative strategies and cutting-edge solutions.
+                </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">
+                        Our 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">
+                        Get in Touch
+                    </a>
+                </div>
+            </div>
+        </section>
+        <!-- Story Section -->
+        <section class="py-20">
+            <div class="container mx-auto px-6">
+                <div class="max-w-4xl mx-auto">
+                    <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 Story
+                    </h2>
+                    <div class="space-y-12">
+                        <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30">
+                            <h3 class="text-2xl font-bold mb-4 text-emerald-400">2014 - The Beginning</h3>
+                            <p class="text-gray-300 leading-relaxed">
+                                NMDX started as a small digital marketing agency with a big vision. We recognized the growing potential of social media and digital platforms in transforming businesses. Our first projects focused on helping local businesses establish their online presence.
+                            </p>
+                        </div>
+                        <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30">
+                            <h3 class="text-2xl font-bold mb-4 text-cyan-400">2017 - Crypto Revolution</h3>
+                            <p class="text-gray-300 leading-relaxed">
+                                As the cryptocurrency market exploded, we positioned ourselves at the forefront of crypto marketing. We developed specialized strategies for token launches, community building, and blockchain project promotion, becoming trusted partners for numerous successful ICOs and IDOs.
+                            </p>
+                        </div>
+                        <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30">
+                            <h3 class="text-2xl font-bold mb-4 text-emerald-400">2020 - Digital Transformation</h3>
+                            <p class="text-gray-300 leading-relaxed">
+                                The pandemic accelerated digital transformation globally. We expanded our services to include app development, comprehensive digital strategies, and AI-powered marketing solutions. Our team grew to include top talent from around the world.
+                            </p>
+                        </div>
+                        <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30">
+                            <h3 class="text-2xl font-bold mb-4 text-cyan-400">2024 - Innovation Leader</h3>
+                            <p class="text-gray-300 leading-relaxed">
+                                Today, NMDX stands as a leader in digital growth acceleration. We've helped raise over $500M for crypto projects, promoted apps with millions of downloads, and built thriving communities. Our commitment to innovation and results-driven approach continues to drive our success.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Team 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">
+                    Meet Our Team
+                </h2>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+                    <div class="text-center">
+                        <img src="http://static.photos/people/300x300/1" alt="Team Member" class="w-48 h-48 rounded-full mx-auto mb-4 border-4 border-emerald-500/50">
+                        <h3 class="text-xl font-bold mb-2">Alex Chen</h3>
+                        <p class="text-emerald-400 mb-2">CEO & Founder</p>
+                        <p class="text-gray-400 text-sm">12+ years in digital marketing and crypto promotion</p>
+                    </div>
+                    <div class="text-center">
+                        <img src="http://static.photos/people/300x300/2" alt="Team Member" class="w-48 h-48 rounded-full mx-auto mb-4 border-4 border-cyan-500/50">
+                        <h3 class="text-xl font-bold mb-2">Sarah Miller</h3>
+                        <p class="text-cyan-400 mb-2">CTO</p>
+                        <p class="text-gray-400 text-sm">Expert in blockchain technology and app development</p>
+                    </div>
+                    <div class="text-center">
+                        <img src="http://static.photos/people/300x300/3" alt="Team Member" class="w-48 h-48 rounded-full mx-auto mb-4 border-4 border-emerald-500/50">
+                        <h3 class="text-xl font-bold mb-2">Mike Johnson</h3>
+                        <p class="text-emerald-400 mb-2">Head of Marketing</p>
+                        <p class="text-gray-400 text-sm">Specialist in viral marketing and community growth</p>
+                    </div>
+                    <div class="text-center">
+                        <img src="http://static.photos/people/300x300/4" alt="Team Member" class="w-48 h-48 rounded-full mx-auto mb-4 border-4 border-cyan-500/50">
+                        <h3 class="text-xl font-bold mb-2">Emily Davis</h3>
+                        <p class="text-cyan-400 mb-2">Lead Developer</p>
+                        <p class="text-gray-400 text-sm">Full-stack developer with AI and ML expertise</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Values Section -->
+        <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">
+                    Our Values
+                </h2>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center">
+                        <div class="text-5xl mb-4">🎯</div>
+                        <h3 class="text-2xl font-bold mb-3 text-emerald-400">Results-Driven</h3>
+                        <p class="text-gray-400">We focus on measurable outcomes and ROI for every campaign we run.</p>
+                    </div>
+                    <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30 text-center">
+                        <div class="text-5xl mb-4">🚀</div>
+                        <h3 class="text-2xl font-bold mb-3 text-cyan-400">Innovation First</h3>
+                        <p class="text-gray-400">We stay ahead of trends and leverage cutting-edge technologies.</p>
+                    </div>
+                    <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center">
+                        <div class="text-5xl mb-4">🤝</div>
+                        <h3 class="text-2xl font-bold mb-3 text-emerald-400">Partnership Approach</h3>
+                        <p class="text-gray-400">We work as an extension of your team, committed to your success.</p>
+                    </div>
+                    <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30 text-center">
+                        <div class="text-5xl mb-4">💎</div>
+                        <h3 class="text-2xl font-bold mb-3 text-cyan-400">Quality Excellence</h3>
+                        <p class="text-gray-400">Every project delivers premium quality and exceptional attention to detail.</p>
+                    </div>
+                    <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center">
+                        <div class="text-5xl mb-4">🌍</div>
+                        <h3 class="text-2xl font-bold mb-3 text-emerald-400">Global Perspective</h3>
+                        <p class="text-gray-400">We understand diverse markets and cultural nuances worldwide.</p>
+                    </div>
+                    <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30 text-center">
+                        <div class="text-5xl mb-4">⚡</div>
+                        <h3 class="text-2xl font-bold mb-3 text-cyan-400">Agile Execution</h3>
+                        <p class="text-gray-400">We adapt quickly to market changes and optimize in real-time.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

components/ai-chat-widget.js ADDED Viewed

	@@ -0,0 +1,440 @@

+class CustomAIChatWidget extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .chat-widget {
+                    position: fixed;
+                    bottom: 20px;
+                    right: 20px;
+                    z-index: 999;
+                }
+                .chat-bubble {
+                    width: 60px;
+                    height: 60px;
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+                    transition: all 0.3s ease;
+                    position: relative;
+                    animation: pulse-glow 2s infinite;
+                }
+                @keyframes pulse-glow {
+                    0%, 100% {
+                        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+                        transform: scale(1);
+                    }
+                    50% {
+                        box-shadow: 0 6px 30px rgba(16, 185, 129, 0.8);
+                        transform: scale(1.05);
+                    }
+                }
+                .chat-bubble:hover {
+                    transform: scale(1.1);
+                    box-shadow: 0 6px 30px rgba(16, 185, 129, 0.6);
+                }
+                .chat-bubble .notification {
+                    position: absolute;
+                    top: -5px;
+                    right: -5px;
+                    background: #ef4444;
+                    color: white;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 12px;
+                    font-weight: bold;
+                    animation: bounce 1s infinite;
+                }
+                @keyframes bounce {
+                    0%, 100% { transform: translateY(0); }
+                    50% { transform: translateY(-5px); }
+                }
+                .chat-window {
+                    position: absolute;
+                    bottom: 80px;
+                    right: 0;
+                    width: 380px;
+                    height: 500px;
+                    background: linear-gradient(135deg, #1e293b, #0f172a);
+                    border-radius: 12px;
+                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+                    display: none;
+                    flex-direction: column;
+                    border: 1px solid rgba(16, 185, 129, 0.3);
+                    overflow: hidden;
+                }
+                .chat-window.open {
+                    display: flex;
+                    animation: slideUp 0.3s ease;
+                }
+                @keyframes slideUp {
+                    from {
+                        opacity: 0;
+                        transform: translateY(20px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+                .chat-header {
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
+                    padding: 1rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .chat-header h3 {
+                    color: white;
+                    font-size: 1.1rem;
+                    font-weight: 600;
+                }
+                .chat-header .status {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: white;
+                    font-size: 0.875rem;
+                }
+                .status-dot {
+                    width: 8px;
+                    height: 8px;
+                    background: #10b981;
+                    border-radius: 50%;
+                    animation: pulse 2s infinite;
+                }
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+                .chat-messages {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 1rem;
+                    background: #0f172a;
+                }
+                .message {
+                    margin-bottom: 1rem;
+                    display: flex;
+                    gap: 0.5rem;
+                }
+                .message.bot {
+                    flex-direction: row;
+                }
+                .message.user {
+                    flex-direction: row-reverse;
+                }
+                .message-avatar {
+                    width: 32px;
+                    height: 32px;
+                    border-radius: 50%;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+                .message.bot .message-avatar {
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
+                }
+                .message.user .message-avatar {
+                    background: #374151;
+                }
+                .message-content {
+                    max-width: 70%;
+                    padding: 0.75rem;
+                    border-radius: 12px;
+                    font-size: 0.875rem;
+                    line-height: 1.5;
+                    white-space: pre-wrap;
+                }
+                .message.bot .message-content {
+                    background: #1e293b;
+                    color: white;
+                    border-bottom-left-radius: 4px;
+                }
+                .message.user .message-content {
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
+                    color: white;
+                    border-bottom-right-radius: 4px;
+                }
+                .typing-indicator {
+                    display: none;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+                .typing-indicator.active {
+                    display: flex;
+                }
+                .typing-dot {
+                    width: 8px;
+                    height: 8px;
+                    background: #6b7280;
+                    border-radius: 50%;
+                    animation: typing 1.4s infinite;
+                }
+                .typing-dot:nth-child(2) {
+                    animation-delay: 0.2s;
+                }
+                .typing-dot:nth-child(3) {
+                    animation-delay: 0.4s;
+                }
+                @keyframes typing {
+                    0%, 60%, 100% {
+                        transform: translateY(0);
+                    }
+                    30% {
+                        transform: translateY(-10px);
+                    }
+                }
+                .chat-input {
+                    padding: 1rem;
+                    background: #1e293b;
+                    border-top: 1px solid rgba(16, 185, 129, 0.2);
+                }
+                .chat-input-container {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+                .chat-input input {
+                    flex: 1;
+                    padding: 0.75rem;
+                    background: #0f172a;
+                    border: 1px solid rgba(16, 185, 129, 0.3);
+                    border-radius: 8px;
+                    color: white;
+                    font-size: 0.875rem;
+                    outline: none;
+                    transition: all 0.3s ease;
+                }
+                .chat-input input:focus {
+                    border-color: #10b981;
+                    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+                }
+                .chat-input button {
+                    padding: 0.75rem 1rem;
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
+                    color: white;
+                    border: none;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                .chat-input button:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+                }
+                .chat-input button:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
+                @media (max-width: 640px) {
+                    .chat-window {
+                        width: calc(100vw - 40px);
+                        right: -10px;
+                        left: -10px;
+                    }
+                }
+            </style>
+            <div class="chat-widget">
+                <div class="chat-bubble" onclick="toggleAIChat()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                    </svg>
+                    <span class="notification">AI</span>
+                </div>
+                <div class="chat-window" id="aiChatWindow">
+                    <div class="chat-header">
+                        <h3>NMDX AI Assistant</h3>
+                        <div class="status">
+                            <span class="status-dot"></span>
+                            <span>Powered by GPT-4</span>
+                        </div>
+                    </div>
+                    <div class="chat-messages" id="aiChatMessages">
+                        <div class="message bot">
+                            <div class="message-avatar">🤖</div>
+                            <div class="message-content">
+                                Hello! I'm the NMDX AI Assistant, powered by GPT-4. I'm here to help you with information about our digital marketing services, crypto promotion strategies, and answer any questions you might have. How can I assist you today?
+                            </div>
+                        </div>
+                    </div>
+                    <div class="typing-indicator" id="aiTypingIndicator">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    <div class="chat-input">
+                        <div class="chat-input-container">
+                            <input type="text" id="aiChatInput" placeholder="Ask me anything..." onkeypress="handleAIChatKeyPress(event)">
+                            <button onclick="sendAIMessage()" id="aiSendBtn">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                                </svg>
+                                Send
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+// Global AI chat functions
+window.toggleAIChat = function() {
+    const chatWindow = document.querySelector('custom-ai-chat-widget').shadowRoot.getElementById('aiChatWindow');
+    chatWindow.classList.toggle('open');
+    // Remove notification when opened
+    if (chatWindow.classList.contains('open')) {
+        const notification = document.querySelector('custom-ai-chat-widget').shadowRoot.querySelector('.notification');
+        notification.style.display = 'none';
+    }
+};
+window.sendAIMessage = async function() {
+    const chatInput = document.querySelector('custom-ai-chat-widget').shadowRoot.getElementById('aiChatInput');
+    const message = chatInput.value.trim();
+    if (!message) return;
+    const chatMessages = document.querySelector('custom-ai-chat-widget').shadowRoot.getElementById('aiChatMessages');
+    const typingIndicator = document.querySelector('custom-ai-chat-widget').shadowRoot.getElementById('aiTypingIndicator');
+    // Add user message
+    const userMessage = document.createElement('div');
+    userMessage.className = 'message user';
+    userMessage.innerHTML = `
+        <div class="message-avatar">👤</div>
+        <div class="message-content">${message}</div>
+    `;
+    chatMessages.appendChild(userMessage);
+    // Clear input
+    chatInput.value = '';
+    // Show typing indicator
+    typingIndicator.classList.add('active');
+    try {
+        // Call OpenAI API
+        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer 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'
+            },
+            body: JSON.stringify({
+                model: 'gpt-4',
+                messages: [
+                    {
+                        role: 'system',
+                        content: 'You are a helpful AI assistant for NMDX, a digital marketing and crypto promotion agency. Provide professional, informative responses about digital marketing strategies, crypto promotion, Telegram marketing, app development, SEO, content creation, and related services. Be concise but thorough.'
+                    },
+                    {
+                        role: 'user',
+                        content: message
+                    }
+                ],
+                max_tokens: 500,
+                temperature: 0.7
+            })
+        });
+        const data = await response.json();
+        const botResponse = data.choices[0].message.content;
+        // Hide typing indicator
+        typingIndicator.classList.remove('active');
+        // Add bot response
+        const botMessage = document.createElement('div');
+        botMessage.className = 'message bot';
+        botMessage.innerHTML = `
+            <div class="message-avatar">🤖</div>
+            <div class="message-content">${botResponse}</div>
+        `;
+        chatMessages.appendChild(botMessage);
+    } catch (error) {
+        console.error('Error:', error);
+        // Hide typing indicator
+        typingIndicator.classList.remove('active');
+        // Add error message
+        const errorMessage = document.createElement('div');
+        errorMessage.className = 'message bot';
+        errorMessage.innerHTML = `
+            <div class="message-avatar">🤖</div>
+            <div class="message-content">I apologize, but I'm experiencing technical difficulties right now. Please try again later or contact our support team for immediate assistance.</div>
+        `;
+        chatMessages.appendChild(errorMessage);
+    }
+    // Scroll to bottom
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+};
+window.handleAIChatKeyPress = function(event) {
+    if (event.key === 'Enter') {
+        sendAIMessage();
+    }
+};
+customElements.define('custom-ai-chat-widget', CustomAIChatWidget);

components/footer.js CHANGED Viewed

@@ -23,17 +23,15 @@ class CustomFooter extends HTMLElement {
                     gap: 2rem;
                     margin-bottom: 2rem;
                 }
                 .footer-section h3 {
                     font-size: 1.25rem;
                     font-weight: 700;
                     margin-bottom: 1rem;
-                    background: linear-gradient(135deg, #9333ea, #3b82f6);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                 }
-                .footer-section p {
                     color: #9ca3af;
                     line-height: 1.6;
                     margin-bottom: 1rem;
@@ -56,10 +54,9 @@ class CustomFooter extends HTMLElement {
                     align-items: center;
                     gap: 0.5rem;
                 }
                 .footer-links a:hover {
-                    color: #9333ea;
-                    transform: translateX(5px);
                 }
                 .social-links {
@@ -67,32 +64,30 @@ class CustomFooter extends HTMLElement {
                     gap: 1rem;
                     margin-top: 1rem;
                 }
                 .social-link {
                     width: 40px;
                     height: 40px;
-                    background: rgba(147, 51, 234, 0.1);
-                    border: 1px solid rgba(147, 51, 234, 0.3);
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    color: #9333ea;
                     text-decoration: none;
                     transition: all 0.3s ease;
                 }
                 .social-link:hover {
-                    background: rgba(147, 51, 234, 0.2);
-                    border-color: #9333ea;
                     transform: translateY(-3px);
-                    box-shadow: 0 5px 15px rgba(147, 51, 234, 0.3);
                 }
                 .footer-bottom {
                     padding-top: 2rem;
-                    border-top: 1px solid rgba(147, 51, 234, 0.1);
-                    text-align: center;
                     color: #6b7280;
                     display: flex;
                     justify-content: space-between;
@@ -116,15 +111,13 @@ class CustomFooter extends HTMLElement {
                     text-decoration: none;
                     transition: color 0.3s ease;
                 }
                 .footer-bottom-links a:hover {
-                    color: #9333ea;
                 }
                 .cta-section {
-                    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(59, 130, 246, 0.1));
-                    border: 1px solid rgba(147, 51, 234, 0.2);
-                    border-radius: 12px;
                     padding: 2rem;
                     text-align: center;
                     margin-bottom: 2rem;
@@ -161,30 +154,28 @@ class CustomFooter extends HTMLElement {
                     align-items: center;
                     gap: 0.5rem;
                 }
                 .cta-btn-primary {
-                    background: linear-gradient(135deg, #9333ea, #3b82f6);
                     color: white;
-                    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
                 }
                 .cta-btn-primary:hover {
                     transform: translateY(-2px);
-                    box-shadow: 0 6px 25px rgba(147, 51, 234, 0.5);
                 }
                 .cta-btn-secondary {
                     background: transparent;
-                    color: #9333ea;
-                    border: 2px solid #9333ea;
                 }
                 .cta-btn-secondary:hover {
-                    background: rgba(147, 51, 234, 0.1);
                     transform: translateY(-2px);
                 }
-                @media (max-width: 768px) {
                     .footer-content {
                         grid-template-columns: 1fr;
                     }

                     gap: 2rem;
                     margin-bottom: 2rem;
                 }
                 .footer-section h3 {
                     font-size: 1.25rem;
                     font-weight: 700;
                     margin-bottom: 1rem;
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                 }
+.footer-section p {
                     color: #9ca3af;
                     line-height: 1.6;
                     margin-bottom: 1rem;
                     align-items: center;
                     gap: 0.5rem;
                 }
                 .footer-links a:hover {
+                    color: #10b981;
+transform: translateX(5px);
                 }
                 .social-links {
                     gap: 1rem;
                     margin-top: 1rem;
                 }
                 .social-link {
                     width: 40px;
                     height: 40px;
+                    background: rgba(16, 185, 129, 0.1);
+                    border: 1px solid rgba(16, 185, 129, 0.3);
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    color: #10b981;
                     text-decoration: none;
                     transition: all 0.3s ease;
                 }
                 .social-link:hover {
+                    background: rgba(16, 185, 129, 0.2);
+                    border-color: #10b981;
                     transform: translateY(-3px);
+                    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
                 }
                 .footer-bottom {
                     padding-top: 2rem;
+                    border-top: 1px solid rgba(16, 185, 129, 0.1);
+text-align: center;
                     color: #6b7280;
                     display: flex;
                     justify-content: space-between;
                     text-decoration: none;
                     transition: color 0.3s ease;
                 }
                 .footer-bottom-links a:hover {
+                    color: #10b981;
                 }
                 .cta-section {
+                    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
+                    border: 1px solid rgba(16, 185, 129, 0.2);
+border-radius: 12px;
                     padding: 2rem;
                     text-align: center;
                     margin-bottom: 2rem;
                     align-items: center;
                     gap: 0.5rem;
                 }
                 .cta-btn-primary {
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
                     color: white;
+                    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
                 }
                 .cta-btn-primary:hover {
                     transform: translateY(-2px);
+                    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
                 }
                 .cta-btn-secondary {
                     background: transparent;
+                    color: #10b981;
+                    border: 2px solid #10b981;
                 }
                 .cta-btn-secondary:hover {
+                    background: rgba(16, 185, 129, 0.1);
                     transform: translateY(-2px);
                 }
+@media (max-width: 768px) {
                     .footer-content {
                         grid-template-columns: 1fr;
                     }

components/navbar.js CHANGED Viewed

@@ -9,10 +9,10 @@ class CustomNavbar extends HTMLElement {
                     left: 0;
                     right: 0;
                     z-index: 1000;
-                    backdrop-filter: blur(10px);
-                    background: rgba(17, 24, 39, 0.8);
-                    border-bottom: 1px solid rgba(147, 51, 234, 0.2);
-                    transition: all 0.3s ease;
                 }
                 nav.scrolled {
@@ -32,10 +32,10 @@ class CustomNavbar extends HTMLElement {
                 .logo {
                     font-size: 1.5rem;
                     font-weight: bold;
-                    background: linear-gradient(135deg, #9333ea, #3b82f6);
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                    text-decoration: none;
                     display: flex;
                     align-items: center;
                     gap: 0.5rem;
@@ -54,9 +54,8 @@ class CustomNavbar extends HTMLElement {
                     transition: all 0.3s ease;
                     position: relative;
                 }
                 .nav-link:hover {
-                    color: #9333ea;
                 }
                 .nav-link::after {
@@ -66,31 +65,29 @@ class CustomNavbar extends HTMLElement {
                     left: 0;
                     width: 0;
                     height: 2px;
-                    background: linear-gradient(90deg, #9333ea, #3b82f6);
-                    transition: width 0.3s ease;
                 }
                 .nav-link:hover::after {
                     width: 100%;
                 }
                 .hire-btn {
-                    background: linear-gradient(135deg, #9333ea, #3b82f6);
                     color: white;
                     padding: 0.5rem 1.5rem;
                     border-radius: 2rem;
                     text-decoration: none;
                     font-weight: 600;
                     transition: all 0.3s ease;
-                    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
                 }
                 .hire-btn:hover {
                     transform: translateY(-2px);
-                    box-shadow: 0 6px 25px rgba(147, 51, 234, 0.5);
                 }
-                .mobile-menu-btn {
                     display: none;
                     background: none;
                     border: none;
@@ -157,12 +154,13 @@ class CustomNavbar extends HTMLElement {
                     </a>
                     <div class="nav-links">
-                        <a href="#services" class="nav-link">Services</a>
                         <a href="#process" class="nav-link">Process</a>
                         <a href="#testimonials" class="nav-link">Testimonials</a>
-                        <a href="#contact" class="nav-link">Contact</a>
-                        <a href="#contact" class="hire-btn">Hire Me</a>
-                    </div>
                     <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -181,12 +179,13 @@ class CustomNavbar extends HTMLElement {
                         <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
                 </button>
-                <a href="#services" class="nav-link" onclick="toggleMobileMenu()">Services</a>
-                <a href="#process" class="nav-link" onclick="toggleMobileMenu()">Process</a>
-                <a href="#testimonials" class="nav-link" onclick="toggleMobileMenu()">Testimonials</a>
-                <a href="#contact" class="nav-link" onclick="toggleMobileMenu()">Contact</a>
-                <a href="#contact" class="hire-btn" onclick="toggleMobileMenu()">Hire Me</a>
-            </div>
         `;
         // Add scroll effect

                     left: 0;
                     right: 0;
                     z-index: 1000;
+                backdrop-filter: blur(10px);
+                background: rgba(17, 24, 39, 0.8);
+                border-bottom: 1px solid rgba(16, 185, 129, 0.2);
+transition: all 0.3s ease;
                 }
                 nav.scrolled {
                 .logo {
                     font-size: 1.5rem;
                     font-weight: bold;
+                background: linear-gradient(135deg, #10b981, #3b82f6);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+text-decoration: none;
                     display: flex;
                     align-items: center;
                     gap: 0.5rem;
                     transition: all 0.3s ease;
                     position: relative;
                 }
                 .nav-link:hover {
+                    color: #10b981;
                 }
                 .nav-link::after {
                     left: 0;
                     width: 0;
                     height: 2px;
+                    background: linear-gradient(90deg, #10b981, #3b82f6);
+transition: width 0.3s ease;
                 }
                 .nav-link:hover::after {
                     width: 100%;
                 }
                 .hire-btn {
+                    background: linear-gradient(135deg, #10b981, #3b82f6);
                     color: white;
                     padding: 0.5rem 1.5rem;
                     border-radius: 2rem;
                     text-decoration: none;
                     font-weight: 600;
                     transition: all 0.3s ease;
+                    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
                 }
                 .hire-btn:hover {
                     transform: translateY(-2px);
+                    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
                 }
+.mobile-menu-btn {
                     display: none;
                     background: none;
                     border: none;
                     </a>
                     <div class="nav-links">
+                        <a href="services.html" class="nav-link">Services</a>
+                        <a href="about.html" class="nav-link">About</a>
                         <a href="#process" class="nav-link">Process</a>
                         <a href="#testimonials" class="nav-link">Testimonials</a>
+                        <a href="contact.html" class="nav-link">Contact</a>
+                        <a href="contact.html" class="hire-btn">Hire Me</a>
+</div>
                     <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
                 </button>
+                        <a href="services.html" class="nav-link" onclick="toggleMobileMenu()">Services</a>
+                        <a href="about.html" class="nav-link" onclick="toggleMobileMenu()">About</a>
+                        <a href="#process" class="nav-link" onclick="toggleMobileMenu()">Process</a>
+                        <a href="#testimonials" class="nav-link" onclick="toggleMobileMenu()">Testimonials</a>
+                        <a href="contact.html" class="nav-link" onclick="toggleMobileMenu()">Contact</a>
+                        <a href="contact.html" class="hire-btn" onclick="toggleMobileMenu()">Hire Me</a>
+</div>
         `;
         // Add scroll effect

contact.html ADDED Viewed

	@@ -0,0 +1,265 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact NMDX - Get Started Today</title>
+    <meta name="description" content="Contact NMDX for expert digital marketing and crypto promotion services. Schedule a free consultation and start your growth journey.">
+    <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">
+                    Let's Connect
+                </h1>
+                <p class="text-2xl md:text-4xl mb-4 text-gray-300">Start Your Growth Journey</p>
+                <p class="text-lg md:text-xl mb-8 text-gray-400 max-w-3xl mx-auto">
+                    Ready to accelerate your digital presence? Our team is here to create customized solutions that drive real results. Schedule your free consultation today.
+                </p>
+            </div>
+        </section>
+        <!-- Contact Methods -->
+        <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">
+                    Get in Touch
+                </h2>
+                <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
+                    <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center hover:border-emerald-500/60 transition-all">
+                        <div class="text-5xl mb-4 text-emerald-400">💬</div>
+                        <h3 class="text-xl font-bold mb-3">Live Chat</h3>
+                        <p class="text-gray-400 mb-4">Chat with our experts instantly</p>
+                        <button onclick="toggleChat()" class="text-emerald-400 hover:text-emerald-300 font-semibold">
+                            Start Chat →
+                        </button>
+                    </div>
+                    <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30 text-center hover:border-cyan-500/60 transition-all">
+                        <div class="text-5xl mb-4 text-cyan-400">📧</div>
+                        <h3 class="text-xl font-bold mb-3">Email Us</h3>
+                        <p class="text-gray-400 mb-4">Get a response within 24 hours</p>
+                        <a href="mailto:hello@nmdx.com" class="text-cyan-400 hover:text-cyan-300 font-semibold">
+                            hello@nmdx.com →
+                        </a>
+                    </div>
+                    <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center hover:border-emerald-500/60 transition-all">
+                        <div class="text-5xl mb-4 text-emerald-400">📅</div>
+                        <h3 class="text-xl font-bold mb-3">Schedule Call</h3>
+                        <p class="text-gray-400 mb-4">Book a 30-minute consultation</p>
+                        <a href="#booking" class="text-emerald-400 hover:text-emerald-300 font-semibold">
+                            Book Now →
+                        </a>
+                    </div>
+                </div>
+                <!-- Contact Form -->
+                <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">
+                        <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
+                        <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">First 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="John">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium mb-2">Last 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="Doe">
+                                </div>
+                            </div>
+                            <div class="grid md:grid-cols-2 gap-6">
+                                <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="john@example.com">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium mb-2">Phone</label>
+                                    <input type="tel" 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="+1 (555) 123-4567">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Company</label>
+                                <input type="text" 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 Company Name">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Service Interest *</label>
+                                <select 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">
+                                    <option value="">Select a Service</option>
+                                    <option value="telegram-promotion">Telegram Promotion</option>
+                                    <option value="token-promotion">Token Promotion</option>
+                                    <option value="telegram-ads">Telegram Ads</option>
+                                    <option value="community-management">Community Management</option>
+                                    <option value="app-promotion">App Promotion</option>
+                                    <option value="app-development">App Development</option>
+                                    <option value="music-promotion">Music Promotion</option>
+                                    <option value="press-releases">Press Releases</option>
+                                    <option value="content-writing">Content Writing</option>
+                                    <option value="seo-geo">SEO / GEO</option>
+                                    <option value="youtube-promotion">YouTube Promotion</option>
+                                    <option value="other">Other / Custom Solution</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Budget Range</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 value="">Select Budget Range</option>
+                                    <option value="under-1k">Under $1,000</option>
+                                    <option value="1k-5k">$1,000 - $5,000</option>
+                                    <option value="5k-10k">$5,000 - $10,000</option>
+                                    <option value="10k-25k">$10,000 - $25,000</option>
+                                    <option value="25k-50k">$25,000 - $50,000</option>
+                                    <option value="over-50k">Over $50,000</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Project Details *</label>
+                                <textarea rows="6" 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, goals, and timeline..."></textarea>
+                            </div>
+                            <div class="flex items-start">
+                                <input type="checkbox" id="newsletter" class="mt-1 mr-3">
+                                <label for="newsletter" class="text-sm text-gray-400">
+                                    I'd like to receive marketing tips and updates from NMDX (we respect your privacy)
+                                </label>
+                            </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>
+        <!-- Office Locations -->
+        <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 Offices
+                </h2>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div class="text-center">
+                        <div class="text-5xl mb-4">🇺🇸</div>
+                        <h3 class="text-xl font-bold mb-2">New York</h3>
+                        <p class="text-gray-400">123 Times Square<br>New York, NY 10036</p>
+                        <a href="tel:+12125551234" class="text-emerald-400 hover:text-emerald-300">+1 (212) 555-1234</a>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-5xl mb-4">🇬🇧</div>
+                        <h3 class="text-xl font-bold mb-2">London</h3>
+                        <p class="text-gray-400">456 Oxford Street<br>London, UK W1C 1AP</p>
+                        <a href="tel:+442071234567" class="text-emerald-400 hover:text-emerald-300">+44 20 7123 4567</a>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-5xl mb-4">🇸🇬</div>
+                        <h3 class="text-xl font-bold mb-2">Singapore</h3>
+                        <p class="text-gray-400">789 Orchard Road<br>Singapore 238826</p>
+                        <a href="tel:+6562345678" class="text-emerald-400 hover:text-emerald-300">+65 6234 5678</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- FAQ Section -->
+        <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">
+                    Frequently Asked Questions
+                </h2>
+                <div class="max-w-3xl mx-auto space-y-4">
+                    <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30">
+                        <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)">
+                            <span class="font-semibold">How quickly can we see results?</span>
+                            <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+                        </button>
+                        <div class="faq-content hidden px-6 pb-4 text-gray-400">
+                            Results vary by service, but most clients see initial improvements within 2-4 weeks. Full campaigns typically show significant results in 2-3 months.
+                        </div>
+                    </div>
+                    <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30">
+                        <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)">
+                            <span class="font-semibold">Do you work with startups?</span>
+                            <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+                        </button>
+                        <div class="faq-content hidden px-6 pb-4 text-gray-400">
+                            Absolutely! We love working with innovative startups and offer flexible pricing packages designed for early-stage companies.
+                        </div>
+                    </div>
+                    <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30">
+                        <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)">
+                            <span class="font-semibold">What makes your services different?</span>
+                            <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+                        </button>
+                        <div class="faq-content hidden px-6 pb-4 text-gray-400">
+                            We combine cutting-edge technology with proven marketing strategies, provide transparent reporting, and work as true partners invested in your success.
+                        </div>
+                    </div>
+                    <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30">
+                        <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)">
+                            <span class="font-semibold">Can you guarantee results?</span>
+                            <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+                        </button>
+                        <div class="faq-content hidden px-6 pb-4 text-gray-400">
+                            While we can't guarantee specific outcomes, we have a proven track record of success and offer performance-based pricing options for qualified clients.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+    <!-- 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>
+</body>
+</html>

index.html CHANGED Viewed

@@ -17,18 +17,17 @@
     <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-purple-900/20 via-gray-900 to-blue-900/20"></div>
-        <canvas id="particleCanvas" class="absolute inset-0"></canvas>
         <div class="absolute inset-0 bg-black/50"></div>
     </div>
-    <!-- Navigation -->
     <custom-navbar></custom-navbar>
     <!-- Main Content -->
@@ -36,21 +35,21 @@
         <!-- 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-purple-400 via-pink-500 to-blue-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" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full font-semibold text-lg hover:scale-105 transition-transform">
                         Explore Services
                     </a>
-                    <a href="#contact" class="px-8 py-4 border-2 border-purple-500 rounded-full font-semibold text-lg hover:bg-purple-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>
@@ -60,118 +59,129 @@
         <!-- 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-purple-400 to-blue-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-purple-600/20 border border-purple-500 hover:bg-purple-600/40 transition-all" data-filter="all">All</button>
-                    <button class="filter-tag px-6 py-2 rounded-full bg-purple-600/20 border border-purple-500 hover:bg-purple-600/40 transition-all" data-filter="crypto">Crypto</button>
-                    <button class="filter-tag px-6 py-2 rounded-full bg-purple-600/20 border border-purple-500 hover:bg-purple-600/40 transition-all" data-filter="marketing">Marketing</button>
-                    <button class="filter-tag px-6 py-2 rounded-full bg-purple-600/20 border border-purple-500 hover:bg-purple-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-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="crypto">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('telegram')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="crypto">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('token')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('ads')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('community')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="development">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('app')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="development">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('development')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('music')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('press')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('content')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('seo')">View Case Study →</button>
-                    </div>
-                    <div class="service-card bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-500/30 hover:border-purple-500/60 transition-all hover:scale-105" data-category="marketing">
-                        <div class="text-purple-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>
-                        <button class="text-purple-400 hover:text-purple-300 font-semibold" onclick="openCaseStudy('youtube')">View Case Study →</button>
-                    </div>
                 </div>
             </div>
         </section>
@@ -179,41 +189,40 @@
         <!-- 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-purple-400 to-blue-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-purple-500 to-blue-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-purple-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-purple-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-blue-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-blue-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-purple-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-purple-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-blue-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-blue-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>
@@ -225,22 +234,21 @@
         <!-- 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-purple-400 to-blue-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-purple-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-purple-500 to-blue-500 h-3 rounded-full" style="width: 95%"></div>
-                                </div>
                             </div>
                             <div class="skill-bar">
                                 <div class="flex justify-between mb-2">
@@ -248,8 +256,8 @@
                                     <span>90%</span>
                                 </div>
                                 <div class="w-full bg-gray-700 rounded-full h-3">
-                                    <div class="bg-gradient-to-r from-purple-500 to-blue-500 h-3 rounded-full" style="width: 90%"></div>
-                                </div>
                             </div>
                             <div class="skill-bar">
                                 <div class="flex justify-between mb-2">
@@ -257,8 +265,8 @@
                                     <span>85%</span>
                                 </div>
                                 <div class="w-full bg-gray-700 rounded-full h-3">
-                                    <div class="bg-gradient-to-r from-purple-500 to-blue-500 h-3 rounded-full" style="width: 85%"></div>
-                                </div>
                             </div>
                             <div class="skill-bar">
                                 <div class="flex justify-between mb-2">
@@ -266,61 +274,61 @@
                                     <span>92%</span>
                                 </div>
                                 <div class="w-full bg-gray-700 rounded-full h-3">
-                                    <div class="bg-gradient-to-r from-purple-500 to-blue-500 h-3 rounded-full" style="width: 92%"></div>
-                                </div>
                             </div>
                         </div>
                     </div>
                     <div>
-                        <h3 class="text-2xl font-bold mb-6 text-blue-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-purple-900/30 transition-all">
-                                    <i data-feather="trending-up" class="w-8 h-8 mx-auto mb-2 text-purple-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-purple-900/30 transition-all">
-                                    <i data-feather="message-circle" class="w-8 h-8 mx-auto mb-2 text-blue-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-purple-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-purple-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-purple-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-purple-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-purple-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-purple-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>
@@ -332,15 +340,14 @@
         <!-- 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-purple-400 to-blue-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-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-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>
@@ -359,8 +366,8 @@
                         </div>
                         <div class="testimonial-item min-w-full px-4">
-                            <div class="max-w-3xl mx-auto bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-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>
@@ -379,8 +386,8 @@
                         </div>
                         <div class="testimonial-item min-w-full px-4">
-                            <div class="max-w-3xl mx-auto bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-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>
@@ -398,41 +405,39 @@
                             </div>
                         </div>
                     </div>
                     <div class="flex justify-center mt-6 gap-2">
-                        <button class="w-3 h-3 rounded-full bg-purple-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-purple-400 to-blue-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-purple-900/30 to-blue-900/30 rounded-2xl p-8 border border-purple-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-gray-800/50 border border-gray-700 rounded-lg focus:border-purple-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-gray-800/50 border border-gray-700 rounded-lg focus:border-purple-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-gray-800/50 border border-gray-700 rounded-lg focus:border-purple-500 focus:outline-none transition-colors">
-                                    <option>Select a Service</option>
                                     <option>Telegram Promotion</option>
                                     <option>Token Promotion</option>
                                     <option>Telegram Ads</option>
@@ -449,11 +454,10 @@
                             <div>
                                 <label class="block text-sm font-medium mb-2">Message</label>
-                                <textarea rows="5" required class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg focus:border-purple-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-purple-600 to-blue-600 rounded-lg font-semibold text-lg hover:from-purple-700 hover:to-blue-700 transition-all">
-                                Send Message
                             </button>
                         </form>
                     </div>

     <link rel="stylesheet" href="style.css">
     <script src="components/navbar.js"></script>
+    <script src="components/ai-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 -->
         <!-- 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>
         <!-- 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>
         <!-- 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>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>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>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>
         <!-- 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>
                         </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>
                         </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>
                             </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>
                             <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>

script.js CHANGED Viewed

@@ -1,75 +1,75 @@
-// Particle animation
-const canvas = document.getElementById('particleCanvas');
 const ctx = canvas.getContext('2d');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
-const particles = [];
-const particleCount = 100;
-class Particle {
-    constructor() {
-        this.x = Math.random() * canvas.width;
-        this.y = Math.random() * canvas.height;
-        this.size = Math.random() * 3 + 1;
-        this.speedX = Math.random() * 2 - 1;
-        this.speedY = Math.random() * 2 - 1;
-        this.opacity = Math.random() * 0.5 + 0.2;
     }
     update() {
-        this.x += this.speedX;
-        this.y += this.speedY;
-        if (this.x > canvas.width) this.x = 0;
-        if (this.x < 0) this.x = canvas.width;
-        if (this.y > canvas.height) this.y = 0;
-        if (this.y < 0) this.y = canvas.height;
     }
     draw() {
-        ctx.fillStyle = `rgba(147, 51, 234, ${this.opacity})`;
         ctx.beginPath();
-        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-        ctx.fill();
     }
-}
-function initParticles() {
-    for (let i = 0; i < particleCount; i++) {
-        particles.push(new Particle());
     }
 }
-function animateParticles() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    particles.forEach(particle => {
-        particle.update();
-        particle.draw();
-    });
-    // Draw connections
-    particles.forEach((a, index) => {
-        particles.slice(index + 1).forEach(b => {
-            const distance = Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
-            if (distance < 100) {
-                ctx.strokeStyle = `rgba(147, 51, 234, ${0.1 * (1 - distance / 100)})`;
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                ctx.moveTo(a.x, a.y);
-                ctx.lineTo(b.x, b.y);
-                ctx.stroke();
-            }
-        });
-    });
-    requestAnimationFrame(animateParticles);
 }
-initParticles();
-animateParticles();
 // Resize canvas on window resize
 window.addEventListener('resize', () => {
@@ -77,6 +77,10 @@ window.addEventListener('resize', () => {
     canvas.height = window.innerHeight;
 });
 // Service filtering
 const filterTags = document.querySelectorAll('.filter-tag');
 const serviceCards = document.querySelectorAll('.service-card');
@@ -84,12 +88,10 @@ const serviceCards = document.querySelectorAll('.service-card');
 filterTags.forEach(tag => {
     tag.addEventListener('click', () => {
         const filter = tag.dataset.filter;
         // Update active state
-        filterTags.forEach(t => t.classList.remove('bg-purple-600', 'text-white'));
-        tag.classList.add('bg-purple-600', 'text-white');
-        // Filter cards
         serviceCards.forEach(card => {
             if (filter === 'all' || card.dataset.category === filter) {
                 card.style.display = 'block';
@@ -129,17 +131,16 @@ const totalSlides = 3;
 function goToSlide(slideIndex) {
     currentSlide = slideIndex;
     testimonialsContainer.style.transform = `translateX(-${slideIndex * 100}%)`;
-    // Update dots
-    document.querySelectorAll('.testimonials-slider button').forEach((dot, index) => {
-        if (index === slideIndex) {
-            dot.classList.remove('bg-gray-600');
-            dot.classList.add('bg-purple-500');
-        } else {
-            dot.classList.remove('bg-purple-500');
-            dot.classList.add('bg-gray-600');
-        }
-    });
 }
 // Auto-advance testimonials
@@ -147,85 +148,6 @@ setInterval(() => {
     currentSlide = (currentSlide + 1) % totalSlides;
     goToSlide(currentSlide);
 }, 5000);
-// Case study modal
-function openCaseStudy(type) {
-    const modal = document.getElementById('caseStudyModal');
-    const modalTitle = document.getElementById('modalTitle');
-    const modalContent = document.getElementById('modalContent');
-    const caseStudies = {
-        telegram: {
-            title: 'Telegram Promotion Success',
-            content: `
-                <div class="space-y-6">
-                    <img src="http://static.photos/technology/800x400/1" alt="Telegram Promotion" class="w-full rounded-lg">
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Challenge</h4>
-                        <p class="text-gray-300">A crypto startup needed to rapidly grow their Telegram community for their upcoming token launch.</p>
-                    </div>
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Solution</h4>
-                        <p class="text-gray-300">We implemented a multi-channel promotion strategy combining targeted ads, influencer partnerships, and community engagement campaigns.</p>
-                    </div>
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Results</h4>
-                        <ul class="text-gray-300 space-y-2">
-                            <li>• 50,000+ new members in 30 days</li>
-                            <li>• 300% increase in engagement rate</li>
-                            <li>• Successful $2M token raise</li>
-                        </ul>
-                    </div>
-                    <a href="#" class="inline-flex items-center px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors">
-                        <i data-feather="download" class="w-5 h-5 mr-2"></i>
-                        Download Full Case Study (PDF)
-                    </a>
-                </div>
-            `
-        },
-        token: {
-            title: 'Token Promotion Campaign',
-            content: `
-                <div class="space-y-6">
-                    <img src="http://static.photos/technology/800x400/2" alt="Token Promotion" class="w-full rounded-lg">
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Challenge</h4>
-                        <p class="text-gray-300">DeFi project needed to increase token visibility and attract investors during bear market conditions.</p>
-                    </div>
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Solution</h4>
-                        <p class="text-gray-300">Comprehensive promotion strategy including AMAs, strategic partnerships, and targeted social media campaigns.</p>
-                    </div>
-                    <div>
-                        <h4 class="text-xl font-bold mb-2">Results</h4>
-                        <ul class="text-gray-300 space-y-2">
-                            <li>• 200% increase in trading volume</li>
-                            <li>• Featured on major crypto news sites</li>
-                            <li>• 1500% ROI on promotion spend</li>
-                        </ul>
-                    </div>
-                    <a href="#" class="inline-flex items-center px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors">
-                        <i data-feather="download" class="w-5 h-5 mr-2"></i>
-                        Download Full Case Study (PDF)
-                    </a>
-                </div>
-            `
-        }
-    };
-    const caseStudy = caseStudies[type] || caseStudies.telegram;
-    modalTitle.textContent = caseStudy.title;
-    modalContent.innerHTML = caseStudy.content;
-    modal.classList.remove('hidden');
-    // Reinitialize feather icons in modal
-    feather.replace();
-}
-function closeCaseStudy() {
-    document.getElementById('caseStudyModal').classList.add('hidden');
-}
 // Contact form submission
 document.getElementById('contactForm').addEventListener('submit', async (e) => {
     e.preventDefault();
@@ -264,6 +186,14 @@ document.getElementById('contactForm').addEventListener('submit', async (e) => {
         submitBtn.disabled = false;
     }
 });
 // Smooth scroll for navigation links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@@ -278,7 +208,6 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         }
     });
 });
 // Parallax scrolling effect
 window.addEventListener('scroll', () => {
     const scrolled = window.pageYOffset;

+// Shockwave animation
+const canvas = document.getElementById('shockwaveCanvas');
 const ctx = canvas.getContext('2d');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
+const shockwaves = [];
+class Shockwave {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.radius = 0;
+        this.maxRadius = 300;
+        this.speed = 2;
+        this.opacity = 0.5;
+        this.color = `rgba(16, 185, 129, ${this.opacity})`;
     }
     update() {
+        this.radius += this.speed;
+        this.opacity = 0.5 * (1 - this.radius / this.maxRadius);
+        this.color = `rgba(16, 185, 129, ${this.opacity})`;
     }
     draw() {
+        ctx.strokeStyle = this.color;
+        ctx.lineWidth = 2;
         ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.stroke();
+        // Second ring
+        ctx.strokeStyle = `rgba(59, 130, 246, ${this.opacity * 0.5})`;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius * 0.8, 0, Math.PI * 2);
+        ctx.stroke();
     }
+    isDead() {
+        return this.radius > this.maxRadius;
     }
 }
+function animateShockwaves() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Create new shockwave randomly
+    if (Math.random() < 0.02) {
+        shockwaves.push(new Shockwave(
+            Math.random() * canvas.width,
+            Math.random() * canvas.height
+        ));
+    }
+    // Update and draw shockwaves
+    for (let i = shockwaves.length - 1; i >= 0; i--) {
+        const wave = shockwaves[i];
+        wave.update();
+        wave.draw();
+        if (wave.isDead()) {
+            shockwaves.splice(i, 1);
+        }
+    }
+    requestAnimationFrame(animateShockwaves);
 }
+animateShockwaves();
 // Resize canvas on window resize
 window.addEventListener('resize', () => {
     canvas.height = window.innerHeight;
 });
+// Add interactive shockwave on click
+document.addEventListener('click', (e) => {
+    shockwaves.push(new Shockwave(e.clientX, e.clientY));
+});
 // Service filtering
 const filterTags = document.querySelectorAll('.filter-tag');
 const serviceCards = document.querySelectorAll('.service-card');
 filterTags.forEach(tag => {
     tag.addEventListener('click', () => {
         const filter = tag.dataset.filter;
         // Update active state
+        filterTags.forEach(t => t.classList.remove('bg-emerald-600', 'text-white'));
+        tag.classList.add('bg-emerald-600', 'text-white');
+// Filter cards
         serviceCards.forEach(card => {
             if (filter === 'all' || card.dataset.category === filter) {
                 card.style.display = 'block';
 function goToSlide(slideIndex) {
     currentSlide = slideIndex;
     testimonialsContainer.style.transform = `translateX(-${slideIndex * 100}%)`;
+        // Update dots
+        document.querySelectorAll('.testimonials-slider button').forEach((dot, index) => {
+            if (index === slideIndex) {
+                dot.classList.remove('bg-gray-600');
+                dot.classList.add('bg-emerald-500');
+            } else {
+                dot.classList.remove('bg-emerald-500');
+                dot.classList.add('bg-gray-600');
+            }
+        });
 }
 // Auto-advance testimonials
     currentSlide = (currentSlide + 1) % totalSlides;
     goToSlide(currentSlide);
 }, 5000);
 // Contact form submission
 document.getElementById('contactForm').addEventListener('submit', async (e) => {
     e.preventDefault();
         submitBtn.disabled = false;
     }
 });
+// FAQ toggle function
+window.toggleFAQ = function(button) {
+    const content = button.nextElementSibling;
+    const icon = button.querySelector('i');
+    content.classList.toggle('hidden');
+    icon.style.transform = content.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
+};
 // Smooth scroll for navigation links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         }
     });
 });
 // Parallax scrolling effect
 window.addEventListener('scroll', () => {
     const scrolled = window.pageYOffset;

services.html ADDED Viewed

	@@ -0,0 +1,301 @@

+<!DOCTYPE html>
+<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>

style.css CHANGED Viewed

@@ -1,3 +1,4 @@
 /* Custom animations and styles */
 @keyframes float {
     0%, 100% { transform: translateY(0px); }
@@ -5,8 +6,8 @@
 }
 @keyframes pulse-glow {
-    0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.5); }
-    50% { box-shadow: 0 0 40px rgba(147, 51, 234, 0.8); }
 }
 .animate-float {
@@ -28,16 +29,16 @@ html {
 }
 ::-webkit-scrollbar-track {
-    background: #1a1a2e;
 }
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(to bottom, #9333ea, #3b82f6);
     border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(to bottom, #a855f7, #60a5fa);
 }
 /* Timeline animations */
@@ -66,7 +67,7 @@ html {
 }
 .service-card:hover {
-    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.3);
 }
 /* Skill bar animation */
@@ -79,8 +80,8 @@ html {
     width: var(--skill-width);
 }
-/* Particle canvas */
-#particleCanvas {
     position: absolute;
     top: 0;
     left: 0;
@@ -115,7 +116,7 @@ html {
     height: 20px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
-    border-top-color: #9333ea;
     animation: spin 1s ease-in-out infinite;
 }
@@ -128,7 +129,7 @@ button:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-    outline: 2px solid #9333ea;
     outline-offset: 2px;
 }
@@ -142,48 +143,17 @@ select:focus-visible {
     transform: translateX(0);
 }
-/* Chat widget styles */
-.chat-widget {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-}
-.chat-bubble {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #9333ea, #3b82f6);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4);
     transition: all 0.3s ease;
 }
-.chat-bubble:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 30px rgba(147, 51, 234, 0.6);
-}
-.chat-window {
-    position: absolute;
-    bottom: 80px;
-    right: 0;
-    width: 380px;
-    height: 500px;
-    background: #1a1a2e;
-    border-radius: 12px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-    display: none;
-    flex-direction: column;
-    border: 1px solid rgba(147, 51, 234, 0.3);
 }
-.chat-window.open {
-    display: flex;
 }
 /* Custom checkbox and radio buttons */
@@ -192,7 +162,7 @@ input[type="radio"] {
     appearance: none;
     width: 20px;
     height: 20px;
-    border: 2px solid #9333ea;
     border-radius: 4px;
     cursor: pointer;
     position: relative;
@@ -201,7 +171,7 @@ input[type="radio"] {
 input[type="checkbox"]:checked,
 input[type="radio"]:checked {
-    background: #9333ea;
 }
 input[type="checkbox"]:checked::after,
@@ -239,7 +209,23 @@ input[type="radio"]:checked::after {
 /* Neon glow effect */
 .neon-glow {
-    text-shadow: 0 0 10px rgba(147, 51, 234, 0.8),
-                 0 0 20px rgba(147, 51, 234, 0.6),
-                 0 0 30px rgba(147, 51, 234, 0.4);
-}

 /* Custom animations and styles */
 @keyframes float {
     0%, 100% { transform: translateY(0px); }
 }
 @keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }
+    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.8); }
 }
 .animate-float {
 }
 ::-webkit-scrollbar-track {
+    background: #0f172a;
 }
 ::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #10b981, #3b82f6);
     border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #34d399, #60a5fa);
 }
 /* Timeline animations */
 }
 .service-card:hover {
+    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3);
 }
 /* Skill bar animation */
     width: var(--skill-width);
 }
+/* Shockwave canvas */
+#shockwaveCanvas {
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
+    border-top-color: #10b981;
     animation: spin 1s ease-in-out infinite;
 }
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
+    outline: 2px solid #10b981;
     outline-offset: 2px;
 }
     transform: translateX(0);
 }
+/* FAQ animations */
+.faq-item {
     transition: all 0.3s ease;
 }
+.faq-item:hover {
+    background: rgba(16, 185, 129, 0.1);
 }
+.faq-content {
+    transition: all 0.3s ease;
 }
 /* Custom checkbox and radio buttons */
     appearance: none;
     width: 20px;
     height: 20px;
+    border: 2px solid #10b981;
     border-radius: 4px;
     cursor: pointer;
     position: relative;
 input[type="checkbox"]:checked,
 input[type="radio"]:checked {
+    background: #10b981;
 }
 input[type="checkbox"]:checked::after,
 /* Neon glow effect */
 .neon-glow {
+    text-shadow: 0 0 10px rgba(16, 185, 129, 0.8),
+                 0 0 20px rgba(16, 185, 129, 0.6),
+                 0 0 30px rgba(16, 185, 129, 0.4);
+}
+/* Success message animation */
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+.success-message {
+    animation: slideIn 0.3s ease-out;
+}