Create a modern, high-end UX/UI designer portfolio website with the following features and requirements:

Design & Content

Hero section: fullscreen, dramatic presentation of best work (large headline, subhead, CTA "Hire me", and a looping muted video or animated 3D scene background).

Projects grid: responsive masonry/grid of projects with filter tags (e.g., Branding, Web, Mobile, UX Research). Clicking a tile opens a detailed case study modal or page.

Case studies: full pages for each project with before/after images, walkthroughs of research → ideation → prototyping → testing, annotated images, and downloadable PDFs.

Design process timeline component: animated horizontal timeline showing stages and deliverables.

Skills & tools section: skill bars or radial charts for proficiency and tool icons (Figma, Sketch, Adobe, Zeplin, Framer, etc.).

Testimonials: carousel with client logos, quotes, and star ratings.

Contact/Hire me: form + CTA button in hero and persistent footer.

Accessibility: keyboard focus states, semantic markup, ARIA where needed, colour contrast checked.

Interaction & Visuals

Full-site high-quality background animation: GPU-accelerated, subtle, high-poly 3D visuals (WebGL/three.js) combined with CSS 3D effects and particle animation for depth. Allow video fallback for low-power devices.

Let JavaScript handle animation orchestration (scroll-triggered transitions, hover micro-interactions). Let CSS handle styling, shaders-like visual polish, and 3D transforms where appropriate.

Include a background video option and ability to fade to static 3D animation for performance.

Smooth micro-interactions (hover, focus, animated filter transitions), lazy loading for images/videos.

Bot & Backend Integration

Persistent left-side chat widget visible on every page. The widget supports:

Rule-based answers and a FAQ fallback.

Live notification functionality: when a website visitor submits a “Request Service” or “Hire me” request, the backend sends an email to the portfolio owner and stores the request.

Optional: connect the chat bot to an AI service (e.g., ChatGPT) for natural replies.

Chat backend: Node.js (Express) + WebSocket (Socket.io) for real-time chat.

Email integration: use Nodemailer (SMTP) or an email provider (SendGrid / Mailgun) for reliable delivery.

Server endpoints:

POST /api/request-service — receives client request data, validates, stores (e.g., MongoDB or simple JSON store), and sends owner email.

Socket.io real-time channels for chat messages.

GET /api/projects — serves project metadata for the grid and filters.

Security: rate limiting, input validation, CORS, and server-side sanitization.

Tech stack

Backend: Node.js (LTS), Express, Socket.io, Nodemailer/SendGrid, MongoDB (or file/SQLite) for requests & messages.

Frontend: HTML5 + CSS3 (modern layout, Tailwind optional), vanilla JS or React (optional) — use Three.js for WebGL 3D background, GSAP for complex animation sequencing.

Build: Webpack/Vite, ESLint, Prettier.

Hosting: static on Netlify/Vercel for front-end, Render/Heroku/Render for Node backend (or a single VPS).

Performance & progressive enhancement

Detect low-power/low-bandwidth and serve static image/video fallback.

Use lazy loading, code-splitting, and compression.

Provide meta tags for SEO and social preview images.

Deliverables

Production-ready repo with clear README, environment variables documented, example .env.example for email creds, example project JSON.

Working demo with sample projects, functioning chat widget, and email integration (can be wired to a test SMTP).

Tests for the backend endpoints (basic).

Quick technical spec + implementation plan (concise)

Frontend pages/components:

index.html / App (Hero, Projects Grid, Timeline, Skills, Testimonials, Footer)

project.html or modal component (case study)

chat-widget (left fixed, minimized → expand)

video/3d-background container with three.js scene and video fallback

Backend endpoints (Express):

POST /api/request-service — body: {name,email,service,message,projectId} → validate, save, send email.

GET /api/projects — returns projects array with tags.

Socket.io /chat namespace — handle client messages and server/bot replies.

Email flow:

On POST /api/request-service:

Save request to DB (or JSON)

Send email to owner with request details

Optionally send confirmation email to client

Chat bot:

Frontend sends messages to Socket.io

Server replies using a rule engine or calls an AI API

When user requests "hire me" or "request service" through chat, bot triggers the same /api/request-service flow and informs the client

Tech choices: Node.js + Express, Socket.io, Nodemailer/SendGrid, three.js, GSAP, Vite (or Webpack), MongoDB (or simple file store)

Create a UX/UI designer portfolio with hero section showcasing best work, projects grid with filter tags, detailed case studies with before/after, design process timeline, skills and tools, testimonials, and hire me button.


The website name is NMDX


service are

telegram promotion
token promotion
Telegran ads
Telegram community management
App promotion
Vibe coding/ App developer
Music Promotion
Press releases
Content writeing
SEO / GEO
Youtube Promotion

README.md

@@ -1,10 +1,13 @@
 ---
-title: Nmdx Portfolio
-emoji: 🏃
-colorFrom: purple
-colorTo: yellow
+title: NMDX Portfolio 🚀
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chat-widget.js

@@ -0,0 +1,402 @@
+class CustomChatWidget 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, #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;
+                    position: relative;
+                }
+                
+                .chat-bubble:hover {
+                    transform: scale(1.1);
+                    box-shadow: 0 6px 30px rgba(147, 51, 234, 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;
+                }
+                
+                .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);
+                    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, #9333ea, #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: #111827;
+                }
+                
+                .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, #9333ea, #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;
+                }
+                
+                .message.bot .message-content {
+                    background: #374151;
+                    color: white;
+                    border-bottom-left-radius: 4px;
+                }
+                
+                .message.user .message-content {
+                    background: #9333ea;
+                    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: #1a1a2e;
+                    border-top: 1px solid rgba(147, 51, 234, 0.2);
+                }
+                
+                .chat-input-container {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+                
+                .chat-input input {
+                    flex: 1;
+                    padding: 0.75rem;
+                    background: #374151;
+                    border: 1px solid rgba(147, 51, 234, 0.3);
+                    border-radius: 8px;
+                    color: white;
+                    font-size: 0.875rem;
+                    outline: none;
+                    transition: all 0.3s ease;
+                }
+                
+                .chat-input input:focus {
+                    border-color: #9333ea;
+                    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.1);
+                }
+                
+                .chat-input button {
+                    padding: 0.75rem 1rem;
+                    background: linear-gradient(135deg, #9333ea, #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(147, 51, 234, 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="toggleChat()">
+                    <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">1</span>
+                </div>
+                
+                <div class="chat-window" id="chatWindow">
+                    <div class="chat-header">
+                        <h3>NMDX Assistant</h3>
+                        <div class="status">
+                            <span class="status-dot"></span>
+                            <span>Online</span>
+                        </div>
+                    </div>
+                    
+                    <div class="chat-messages" id="chatMessages">
+                        <div class="message bot">
+                            <div class="message-avatar">🤖</div>
+                            <div class="message-content">
+                                Hi! Welcome to NMDX! 👋 I'm here to help you find the perfect service for your needs. What can I assist you with today?
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="typing-indicator" id="typingIndicator">
+                        <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="chatInput" placeholder="Type your message..." onkeypress="handleChatKeyPress(event)">
+                            <button onclick="sendMessage()" id="sendBtn">
+                                <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 chat functions
+window.toggleChat = function() {
+    const chatWindow = document.querySelector('custom-chat-widget').shadowRoot.getElementById('chatWindow');
+    chatWindow.classList.toggle('open');
+    
+    // Remove notification when opened
+    if (chatWindow.classList.contains('open')) {
+        const notification = document.querySelector('custom-chat-widget').shadowRoot.querySelector('.notification');
+        notification.style.display = 'none';
+    }
+};
+
+window.sendMessage = function() {
+    const chatInput = document.querySelector('custom-chat-widget').shadowRoot.getElementById('chatInput');
+    const message = chatInput.value.trim();
+    
+    if (!message) return;
+    
+    const chatMessages = document.querySelector('custom-chat-widget').shadowRoot.getElementById('chatMessages');
+    const typingIndicator = document.querySelector('custom-chat-widget').shadowRoot.getElementById('typingIndicator');
+    
+    // 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');
+    
+    // Simulate bot response
+    setTimeout(() => {
+        typingIndicator.classList.remove('active');
+        
+        const botResponse = getBotResponse(message);
+        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);
+        
+        // Scroll to bottom
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }, 1500);
+    
+    // Scroll to bottom
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+};
+
+window.handleChatKeyPress = function(event) {
+    if (event.key === 'Enter') {
+        sendMessage();
+    }
+};
+
+function getBotResponse(message) {
+    const lowerMessage = message.toLowerCase();
+    
+    if (lowerMessage.includes('telegram')) {
+        return "Our Telegram promotion services are top-notch! We can help you grow your channel with targeted campaigns, influencer partnerships, and community engagement strategies. Would you like to know more about our Telegram Ads or Community Management services?";
+    } else if (lowerMessage.includes('token') || lowerMessage.includes('crypto')) {
+        return "Great choice for token promotion! We offer comprehensive crypto marketing solutions including token launches, community building, and strategic partnerships. Our team has helped raise millions for various projects. What type of token are you promoting?";
+    } else if (lowerMessage.includes('app')) {
+        return "For app promotion and development, we've got you covered! From ASO optimization to viral marketing campaigns, we'll help your app reach millions of users. Are you looking to promote an existing app or develop a new one?";
+    } else if (lowerMessage.includes('youtube') || lowerMessage.includes('video')) {
+        return "YouTube promotion is our specialty! We can help you grow your channel, increase views, and build a loyal subscriber base through organic and paid strategies. What type of content do you create?";
+    } else if (lowerMessage.includes('price') || lowerMessage.includes('cost')) {
+        return "Our pricing varies based on your specific needs and goals. We offer customized packages for every budget. Would you like to schedule a free consultation to discuss your requirements and get a personalized quote?";
+    } else if (lowerMessage.includes('contact') || lowerMessage.includes('talk')) {
+        return "I'd be happy to connect you with our team! You can fill out the contact form below, or I can collect some basic information here to get started. Which service interests you most?";
+    } else {
+        return "I'd be happy to help you with our digital marketing services! We specialize in Telegram promotion, token marketing, app development, and much more. What specific service are you interested in learning about?";
+    }
+}
+
+customElements.define('custom-chat-widget', CustomChatWidget);

components/footer.js

@@ -0,0 +1,323 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: linear-gradient(to top, rgba(17, 24, 39, 0.95), transparent);
+                    backdrop-filter: blur(10px);
+                    border-top: 1px solid rgba(147, 51, 234, 0.2);
+                    padding: 3rem 0 2rem;
+                    margin-top: 4rem;
+                }
+                
+                .footer-container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 0 1.5rem;
+                }
+                
+                .footer-content {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    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;
+                }
+                
+                .footer-links {
+                    list-style: none;
+                    padding: 0;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.5rem;
+                }
+                
+                .footer-links a {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    transition: all 0.3s ease;
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .footer-links a:hover {
+                    color: #9333ea;
+                    transform: translateX(5px);
+                }
+                
+                .social-links {
+                    display: flex;
+                    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;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 1rem;
+                }
+                
+                .footer-bottom p {
+                    margin: 0;
+                }
+                
+                .footer-bottom-links {
+                    display: flex;
+                    gap: 2rem;
+                    flex-wrap: wrap;
+                }
+                
+                .footer-bottom-links a {
+                    color: #9ca3af;
+                    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;
+                }
+                
+                .cta-section h3 {
+                    font-size: 1.5rem;
+                    margin-bottom: 1rem;
+                    color: white;
+                }
+                
+                .cta-section p {
+                    color: #9ca3af;
+                    margin-bottom: 1.5rem;
+                    max-width: 600px;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+                
+                .cta-buttons {
+                    display: flex;
+                    gap: 1rem;
+                    justify-content: center;
+                    flex-wrap: wrap;
+                }
+                
+                .cta-btn {
+                    padding: 0.75rem 2rem;
+                    border-radius: 2rem;
+                    text-decoration: none;
+                    font-weight: 600;
+                    transition: all 0.3s ease;
+                    display: inline-flex;
+                    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;
+                    }
+                    
+                    .footer-bottom {
+                        flex-direction: column;
+                        text-align: center;
+                    }
+                    
+                    .footer-bottom-links {
+                        justify-content: center;
+                    }
+                    
+                    .cta-buttons {
+                        flex-direction: column;
+                        align-items: center;
+                    }
+                    
+                    .cta-btn {
+                        width: 100%;
+                        max-width: 300px;
+                        justify-content: center;
+                    }
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-container">
+                    <div class="cta-section">
+                        <h3>Ready to Accelerate Your Growth?</h3>
+                        <p>Let's discuss how our expert services can help you achieve your digital marketing goals. Schedule a free consultation today!</p>
+                        <div class="cta-buttons">
+                            <a href="#contact" class="cta-btn cta-btn-primary">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+                                Start Conversation
+                            </a>
+                            <a href="#" class="cta-btn cta-btn-secondary">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="16 18 22 12 16 6"></polyline>
+                                    <polyline points="8 6 2 12 8 18"></polyline>
+                                </svg>
+                                View Case Studies
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-content">
+                        <div class="footer-section">
+                            <h3>NMDX</h3>
+                            <p>Your trusted partner for digital growth acceleration. We specialize in cutting-edge marketing strategies that deliver real results.</p>
+                            <div class="social-links">
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                                        <circle cx="4" cy="4" r="2"></circle>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                                        <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"></path>
+                                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.4 19.54C5.12 20 12 20 12 20s6.88 0 8.6-.46a2.78 2.78 0 001.94-2A29 29 0 0023 12a29 29 0 00-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"></path>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Services</h3>
+                            <ul class="footer-links">
+                                <li><a href="#services"><i data-feather="chevron-right" class="w-4 h-4"></i>Telegram Promotion</a></li>
+                                <li><a href="#services"><i data-feather="chevron-right" class="w-4 h-4"></i>Token Promotion</a></li>
+                                <li><a href="#services"><i data-feather="chevron-right" class="w-4 h-4"></i>App Development</a></li>
+                                <li><a href="#services"><i data-feather="chevron-right" class="w-4 h-4"></i>YouTube Promotion</a></li>
+                                <li><a href="#services"><i data-feather="chevron-right" class="w-4 h-4"></i>Community Management</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Company</h3>
+                            <ul class="footer-links">
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>About Us</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Case Studies</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Blog</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Careers</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Contact</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Support</h3>
+                            <ul class="footer-links">
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Help Center</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Privacy Policy</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>Terms of Service</a></li>
+                                <li><a href="#contact"><i data-feather="chevron-right" class="w-4 h-4"></i>Contact Support</a></li>
+                                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i>FAQ</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p>&copy; 2024 NMDX. All rights reserved.</p>
+                        <div class="footer-bottom-links">
+                            <a href="#">Privacy</a>
+                            <a href="#">Terms</a>
+                            <a href="#">Sitemap</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
+            icons.forEach(icon => {
+                feather.replace(icon);
+            });
+        }, 100);
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,210 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    position: fixed;
+                    top: 0;
+                    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 {
+                    background: rgba(17, 24, 39, 0.95);
+                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+                }
+                
+                .nav-container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .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;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-link:hover {
+                    color: #9333ea;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -5px;
+                    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;
+                    color: white;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                    
+                    .mobile-menu {
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        width: 80%;
+                        height: 100vh;
+                        background: rgba(17, 24, 39, 0.98);
+                        backdrop-filter: blur(10px);
+                        display: flex;
+                        flex-direction: column;
+                        padding: 5rem 2rem;
+                        gap: 2rem;
+                        transform: translateX(-100%);
+                        transition: transform 0.3s ease;
+                        z-index: 1001;
+                    }
+                    
+                    .mobile-menu.open {
+                        transform: translateX(0);
+                    }
+                    
+                    .mobile-menu .nav-link {
+                        font-size: 1.25rem;
+                    }
+                    
+                    .mobile-menu .hire-btn {
+                        width: 100%;
+                        text-align: center;
+                    }
+                    
+                    .mobile-menu-close {
+                        position: absolute;
+                        top: 1.5rem;
+                        right: 1.5rem;
+                        background: none;
+                        border: none;
+                        color: white;
+                        cursor: pointer;
+                    }
+                }
+            </style>
+            
+            <nav id="navbar">
+                <div class="nav-container">
+                    <a href="#" class="logo">
+                        <span>🚀</span>
+                        <span>NMDX</span>
+                    </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">
+                            <line x1="3" y1="12" x2="21" y2="12"></line>
+                            <line x1="3" y1="6" x2="21" y2="6"></line>
+                            <line x1="3" y1="18" x2="21" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+            </nav>
+            
+            <div class="mobile-menu" id="mobileMenu">
+                <button class="mobile-menu-close" 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="18" y1="6" x2="6" y2="18"></line>
+                        <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
+        const navbar = this.shadowRoot.getElementById('navbar');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
+    }
+}
+
+// Global function for mobile menu toggle
+window.toggleMobileMenu = function() {
+    const mobileMenu = document.querySelector('custom-navbar').shadowRoot.getElementById('mobileMenu');
+    mobileMenu.classList.toggle('open');
+};
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,497 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NMDX - Digital Growth Accelerator</title>
+    <meta name="description" content="Expert digital marketing and crypto promotion services. Telegram promotion, token marketing, app growth, and more.">
+    <meta property="og:title" content="NMDX - Digital Growth Accelerator">
+    <meta property="og:description" content="Expert digital marketing and crypto promotion services">
+    <meta property="og:image" content="http://static.photos/technology/1200x630/1">
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    
+    <link rel="stylesheet" href="style.css">
+    <script src="components/navbar.js"></script>
+    <script src="components/chat-widget.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-950 text-white overflow-x-hidden">
+    <!-- Animated Background -->
+    <div class="fixed inset-0 z-0">
+        <div class="absolute inset-0 bg-gradient-to-br from-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 -->
+    <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-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>
+            </div>
+        </section>
+
+        <!-- Services Grid Section -->
+        <section id="services" class="py-20">
+            <div class="container mx-auto px-6">
+                <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-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>
+
+        <!-- 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>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Skills & Tools -->
+        <section class="py-20">
+            <div class="container mx-auto px-6">
+                <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-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">
+                                    <span>Crypto Promotion</span>
+                                    <span>90%</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-3">
+                                    <div class="bg-gradient-to-r from-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">
+                                    <span>App Development</span>
+                                    <span>85%</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-3">
+                                    <div class="bg-gradient-to-r from-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">
+                                    <span>Community Building</span>
+                                    <span>92%</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-3">
+                                    <div class="bg-gradient-to-r from-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>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials -->
+        <section class="py-20 bg-black/30">
+            <div class="container mx-auto px-6">
+                <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-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>
+                                        <p class="text-gray-400">CEO, CryptoStart</p>
+                                    </div>
+                                </div>
+                                <div class="flex mb-4">
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                </div>
+                                <p class="text-gray-300 text-lg italic">"NMDX transformed our token launch. We achieved 500% growth in community engagement and successfully raised $2M in funding."</p>
+                            </div>
+                        </div>
+
+                        <div class="testimonial-item min-w-full px-4">
+                            <div class="max-w-3xl mx-auto bg-gradient-to-br from-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>
+                                        <p class="text-gray-400">Founder, AppFlow</p>
+                                    </div>
+                                </div>
+                                <div class="flex mb-4">
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                </div>
+                                <p class="text-gray-300 text-lg italic">"Our app downloads increased by 300% in just 3 months. Their Telegram promotion strategy was game-changing for our growth."</p>
+                            </div>
+                        </div>
+
+                        <div class="testimonial-item min-w-full px-4">
+                            <div class="max-w-3xl mx-auto bg-gradient-to-br from-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>
+                                        <p class="text-gray-400">Marketing Director, MusicHub</p>
+                                    </div>
+                                </div>
+                                <div class="flex mb-4">
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                    <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
+                                </div>
+                                <p class="text-gray-300 text-lg italic">"The YouTube promotion campaign exceeded our expectations. 1M+ views and our subscriber count grew 10x. Absolutely incredible service!"</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex justify-center mt-6 gap-2">
+                        <button class="w-3 h-3 rounded-full bg-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>
+                                    <option>Community Management</option>
+                                    <option>App Promotion</option>
+                                    <option>App Development</option>
+                                    <option>Music Promotion</option>
+                                    <option>Press Releases</option>
+                                    <option>Content Writing</option>
+                                    <option>SEO / GEO</option>
+                                    <option>YouTube Promotion</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Message</label>
+                                <textarea rows="5" required class="w-full px-4 py-3 bg-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>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+
+    <!-- Case Study Modal -->
+    <div id="caseStudyModal" class="fixed inset-0 z-50 hidden bg-black/80 flex items-center justify-center p-6">
+        <div class="bg-gradient-to-br from-gray-900 to-gray-950 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-purple-500/30">
+            <div class="p-8">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-3xl font-bold" id="modalTitle">Case Study</h3>
+                    <button onclick="closeCaseStudy()" class="text-gray-400 hover:text-white">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                <div id="modalContent" class="space-y-6">
+                    <!-- Content will be dynamically inserted -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Success Message -->
+    <div id="successMessage" class="fixed top-20 right-6 z-50 bg-green-600 text-white px-6 py-4 rounded-lg shadow-lg transform translate-x-full transition-transform">
+        <div class="flex items-center">
+            <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
+            <span>Message sent successfully!</span>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,345 @@
+// 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', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
+
+// 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-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';
+                setTimeout(() => card.classList.add('visible'), 100);
+            } else {
+                card.style.display = 'none';
+                card.classList.remove('visible');
+            }
+        });
+    });
+});
+
+// Timeline animation on scroll
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -100px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+        }
+    });
+}, observerOptions);
+
+// Observe elements for animation
+document.querySelectorAll('.timeline-item, .service-card, .skill-bar').forEach(el => {
+    observer.observe(el);
+});
+
+// Testimonial slider
+let currentSlide = 0;
+const testimonialsContainer = document.getElementById('testimonialsContainer');
+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
+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();
+    
+    const formData = new FormData(e.target);
+    const data = Object.fromEntries(formData);
+    
+    // Show loading state
+    const submitBtn = e.target.querySelector('button[type="submit"]');
+    const originalText = submitBtn.textContent;
+    submitBtn.innerHTML = '<span class="loading"></span> Sending...';
+    submitBtn.disabled = true;
+    
+    try {
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // Show success message
+        const successMsg = document.getElementById('successMessage');
+        successMsg.style.transform = 'translateX(0)';
+        
+        // Reset form
+        e.target.reset();
+        
+        // Hide success message after 3 seconds
+        setTimeout(() => {
+            successMsg.style.transform = 'translateX(100%)';
+        }, 3000);
+        
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error sending message. Please try again.');
+    } finally {
+        // Reset button
+        submitBtn.textContent = originalText;
+        submitBtn.disabled = false;
+    }
+});
+
+// Smooth scroll for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+
+// Parallax scrolling effect
+window.addEventListener('scroll', () => {
+    const scrolled = window.pageYOffset;
+    const parallaxElements = document.querySelectorAll('.parallax');
+    
+    parallaxElements.forEach(el => {
+        const speed = el.dataset.speed || 0.5;
+        el.style.transform = `translateY(${scrolled * speed}px)`;
+    });
+});
+
+// Add reveal animation to elements on scroll
+const revealElements = document.querySelectorAll('.service-card, .timeline-item');
+const revealOnScroll = () => {
+    revealElements.forEach(element => {
+        const elementTop = element.getBoundingClientRect().top;
+        const elementBottom = element.getBoundingClientRect().bottom;
+        
+        if (elementTop < window.innerHeight && elementBottom > 0) {
+            element.classList.add('visible');
+        }
+    });
+};
+
+window.addEventListener('scroll', revealOnScroll);
+revealOnScroll(); // Initial check
+
+// Dynamic skill bar animation
+const skillBars = document.querySelectorAll('.skill-bar');
+const animateSkillBars = () => {
+    skillBars.forEach(bar => {
+        const rect = bar.getBoundingClientRect();
+        if (rect.top < window.innerHeight && rect.bottom > 0) {
+            const progressBar = bar.querySelector('.bg-gradient-to-r');
+            const width = progressBar.style.width || '0%';
+            if (width === '0%') {
+                progressBar.style.width = progressBar.parentElement.previousElementSibling.querySelector('span:last-child').textContent;
+            }
+        }
+    });
+};
+
+window.addEventListener('scroll', animateSkillBars);
+animateSkillBars();
+
+// Keyboard navigation support
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeCaseStudy();
+    }
+});
+
+// Performance optimization - Debounce scroll events
+let scrollTimeout;
+window.addEventListener('scroll', () => {
+    if (scrollTimeout) {
+        window.cancelAnimationFrame(scrollTimeout);
+    }
+    scrollTimeout = window.requestAnimationFrame(() => {
+        // Scroll-based animations here
+        revealOnScroll();
+        animateSkillBars();
+    });
+});

style.css

@@ -1,28 +1,245 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations and styles */
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@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); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-float {
+    animation: float 6s ease-in-out infinite;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.animate-pulse-glow {
+    animation: pulse-glow 2s ease-in-out infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-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 */
+.timeline-item {
+    position: relative;
+    opacity: 0;
+    transform: translateY(50px);
+    transition: all 0.6s ease;
+}
+
+.timeline-item.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Service card hover effects */
+.service-card {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.6s ease;
+}
+
+.service-card.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.service-card:hover {
+    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.3);
+}
+
+/* Skill bar animation */
+.skill-bar .bg-gradient-to-r {
+    width: 0;
+    transition: width 2s ease;
+}
+
+.skill-bar.visible .bg-gradient-to-r {
+    width: var(--skill-width);
+}
+
+/* Particle canvas */
+#particleCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Text gradient animation */
+@keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-shift 3s ease infinite;
+}
+
+/* Loading animation */
+.loading {
+    display: inline-block;
+    width: 20px;
+    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;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Focus states for accessibility */
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+    outline: 2px solid #9333ea;
+    outline-offset: 2px;
+}
+
+/* Mobile menu animation */
+.mobile-menu {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+}
+
+.mobile-menu.open {
+    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 */
+input[type="checkbox"],
+input[type="radio"] {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #9333ea;
+    border-radius: 4px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+    background: #9333ea;
+}
+
+input[type="checkbox"]:checked::after,
+input[type="radio"]:checked::after {
+    content: '✓';
+    position: absolute;
+    color: white;
+    font-size: 14px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .chat-window {
+        width: 100%;
+        right: -10px;
+        left: -10px;
+    }
+    
+    .timeline-item {
+        margin-left: 20px;
+    }
+    
+    .service-card {
+        margin-bottom: 20px;
+    }
+}
+
+/* Parallax effect */
+.parallax {
+    will-change: transform;
+}
+
+/* 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);
+}