now fix the full website and make it look nice, follow the rules

components/navbar.js

@@ -1,29 +1,42 @@
+
 class CustomHeader extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
+    
+    const isMobile = () => window.innerWidth <= 768;
+
     this.shadowRoot.innerHTML = `
       <style>
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+        
+        * {
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
+        }
+
         :host {
           display: block;
           width: 100%;
-          background-color: rgba(255, 255, 255, 0.8);
-          backdrop-filter: blur(12px);
-          -webkit-backdrop-filter: blur(12px);
-          border-bottom: 1px solid rgba(0,0,0,0.05);
+          background-color: rgba(255, 255, 255, 0.85);
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          border-bottom: 1px solid rgba(0,0,0,0.06);
           position: fixed;
           top: 0;
-          z-index: 50;
+          z-index: 1000;
           transition: all 0.3s ease;
+          font-family: 'Plus Jakarta Sans', sans-serif;
         }
         
         nav {
-          max-width: 1280px;
+          max-width: 1400px;
           margin: 0 auto;
           padding: 1rem 1.5rem;
           display: flex;
           align-items: center;
           justify-content: space-between;
-          height: 80px;
+          height: 72px;
         }
 
         .nav-group {
@@ -38,8 +51,15 @@ class CustomHeader extends HTMLElement {
           font-size: 1.5rem;
           color: #171717;
           text-decoration: none;
-          letter-spacing: -0.05em;
+          letter-spacing: -0.03em;
           margin-right: 2rem;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        
+        .logo span {
+          color: #D58A60;
         }
 
         /* Nav Items - Expanding Animation */
@@ -47,15 +67,15 @@ class CustomHeader extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: center;
-          height: 44px;
+          height: 40px;
           border-radius: 9999px;
           text-decoration: none;
-          color: #404040;
+          color: #525252;
           font-weight: 500;
-          font-size: 0.95rem;
-          width: 44px; /* Initial width icon only */
+          font-size: 0.9rem;
+          width: 40px; 
           overflow: hidden;
-          transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s;
+          transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, color 0.2s;
           white-space: nowrap;
         }
 
@@ -65,39 +85,41 @@ class CustomHeader extends HTMLElement {
         }
 
         .nav-icon {
-            min-width: 44px;
+            min-width: 40px;
             display: flex;
             justify-content: center;
             align-items: center;
-            color: inherit;
+            color: currentColor;
         }
 
         .nav-label {
             opacity: 0;
             transition: opacity 0.2s ease-in;
+            padding-right: 16px;
         }
 
         /* On hover expand */
-        .nav-item:hover {
-            width: 130px;
-        }
-
-        .nav-item:hover .nav-label {
-            opacity: 1;
-            transition-delay: 0.05s;
+        @media (hover: hover) {
+          .nav-item:hover {
+              width: 140px;
+          }
+          .nav-item:hover .nav-label {
+              opacity: 1;
+              transition-delay: 0.05s;
+          }
         }
 
         /* Account Button */
         .account-btn {
             background-color: #171717;
             color: white;
-            padding: 0 1.5rem;
-            height: 44px;
+            padding: 0 1.25rem;
+            height: 40px;
             border-radius: 9999px;
             text-decoration: none;
             font-weight: 500;
             font-size: 0.9rem;
-            transition: transform 0.2s, background-color 0.2s;
+            transition: all 0.2s ease;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -105,7 +127,8 @@ class CustomHeader extends HTMLElement {
 
         .account-btn:hover {
             background-color: #262626;
-            transform: scale(1.02);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
         }
 
         /* Mobile Menu */
@@ -114,10 +137,63 @@ class CustomHeader extends HTMLElement {
             background: none;
             border: none;
             cursor: pointer;
-            padding: 0.5rem;
+            padding: 8px;
+            color: #171717;
+            z-index: 1002;
+        }
+        
+        .mobile-menu-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100vh;
+            background: rgba(255, 255, 255, 0.98);
+            z-index: 1001;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 2rem;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        
+        .mobile-menu-overlay.open {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        
+        .mobile-nav-item {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #171717;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        
+        .mobile-nav-item:hover {
+            color: #D58A60;
+        }
+        
+        .close-icon {
+            display: none;
+        }
+        
+        .menu-icon {
+            display: block;
+        }
+        
+        .mobile-menu-btn.open .menu-icon {
+            display: none;
+        }
+        
+        .mobile-menu-btn.open .close-icon {
+            display: block;
         }
 
-        @media (max-width: 768px) {
+        @media (max-width: 1024px) {
           .nav-group.desktop {
             display: none;
           }
@@ -129,7 +205,7 @@ class CustomHeader extends HTMLElement {
       
       <nav>
         <div class="nav-group">
-          <a href="/" class="logo">Nexus</a>
+          <a href="/" class="logo">Nexus<span>.</span></a>
         </div>
         
         <div class="nav-group desktop">
@@ -152,11 +228,42 @@ class CustomHeader extends HTMLElement {
         </div>
         
         <div class="nav-group">
-          <a href="https://app.nexus.ai" class="account-btn">Войти</a>
+            <button class="mobile-menu-btn" id="menu-toggle">
+                <svg class="menu-icon" 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>
+                <svg class="close-icon" 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="https://app.nexus.ai" class="account-btn desktop-only">Войти</a>
         </div>
       </nav>
+      
+      <div class="mobile-menu-overlay" id="mobile-menu">
+        <a href="#home" class="mobile-nav-item">Главная</a>
+        <a href="#about" class="mobile-nav-item">О нас</a>
+        <a href="#plans" class="mobile-nav-item">Тарифы</a>
+        <a href="#meet-us" class="mobile-nav-item">Команда</a>
+        <a href="https://app.nexus.ai" class="mobile-nav-item" style="color: #D58A60;">Войти в аккаунт</a>
+      </div>
     `;
+    
+    // Mobile Menu Logic
+    const menuToggle = this.shadowRoot.getElementById('menu-toggle');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+    const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-nav-item');
+    
+    menuToggle.addEventListener('click', () => {
+      menuToggle.classList.toggle('open');
+      mobileMenu.classList.toggle('open');
+      document.body.style.overflow = mobileMenu.classList.contains('open') ? 'hidden' : '';
+    });
+    
+    mobileLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        menuToggle.classList.remove('open');
+        mobileMenu.classList.remove('open');
+        document.body.style.overflow = '';
+      });
+    });
   }
 }
 
-customElements.define('custom-header', CustomHeader);
+customElements.define('custom-header', CustomHeader);

index.html

@@ -61,21 +61,27 @@
     <!-- Main Content -->
     <main>
         <!-- Hero Section -->
-        <section id="home" class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
-            <!-- 3D Background Canvas -->
+        <section id="home" class="relative min-h-screen flex items-center justify-center pt-24 pb-12 lg:pt-32 overflow-hidden">
+<!-- 3D Background Canvas -->
             <div id="canvas-container" class="absolute inset-0 z-0"></div>
             
             <div class="container mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-12 items-center">
                 <!-- Text Content -->
-                <div class="text-center lg:text-left space-y-6 animate-fade-in-up">
-                    <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 leading-[1.1]">
-                        Продавай, пока ты <span class="text-primary">спишь.</span>
+                <div class="text-center lg:text-left space-y-8 animate-fade-in-up">
+                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-semibold mb-4">
+                        <span class="relative flex h-2 w-2">
+                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                          <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                        </span>
+                        Официальная интеграция API Avito
+                    </div>
+                    <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-neutral-900 leading-[1.05]">
+                        Продавай, пока ты <br class="hidden lg:block"/><span class="text-primary">спишь.</span>
                     </h1>
-                    <p class="text-xl text-neutral-600 max-w-lg mx-auto lg:mx-0 font-light">
-                        Твой AI-менеджер на Авито. Работает 24/7 без зарплаты и выходных.
+                    <p class="text-xl md:text-2xl text-neutral-500 max-w-xl mx-auto lg:mx-0 leading-relaxed font-normal">
+                        Твой AI-менеджер на Авито. Работает 24/7, отвечает мгновенно и закрывает сделки.
                     </p>
-                    
-                    <div class="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start pt-4">
+<div class="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start pt-4">
                         <a href="https://app.nexus.ai" class="bg-neutral-900 text-white px-8 py-4 rounded-full font-medium hover:bg-neutral-800 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl w-full sm:w-auto text-center">
                             Подключить Nexus
                         </a>
@@ -83,44 +89,40 @@
                             Как это работает
                         </a>
                     </div>
-
-                    <div class="pt-8 flex flex-wrap items-center justify-center lg:justify-start gap-6 text-sm text-neutral-500 font-medium">
-                        <div class="flex items-center gap-2">
-                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
-                            <span>Официальная интеграция API</span>
-                        </div>
+                    <div class="pt-8 flex items-center justify-center lg:justify-start gap-8 text-sm text-neutral-400 font-medium border-t border-neutral-100/50">
                         <div class="flex items-center gap-2">
-                            <div class="w-2 h-2 rounded-full bg-primary"></div>
-                            <span>0% галлюцинаций</span>
+                            <i data-feather="check-circle" class="text-green-500 w-4 h-4"></i>
+                            <span>Установлен за 5 мин</span>
                         </div>
                         <div class="flex items-center gap-2">
-                            <div class="w-2 h-2 rounded-full bg-blue-500"></div>
-                            <span>Безопасность данных</span>
+                            <i data-feather="shield" class="text-primary w-4 h-4"></i>
+                            <span>Безопасные данные</span>
                         </div>
                     </div>
-                </div>
+</div>
 
                 <!-- MacOS Window Visualization -->
                 <div class="relative hidden lg:block perspective-container">
-                    <div class="mac-window tilt-effect bg-white/90 backdrop-blur-xl border border-neutral-200 shadow-2xl rounded-xl overflow-hidden w-full max-w-md mx-auto transform transition-transform duration-100 ease-out">
+                    <div class="mac-window tilt-effect bg-white/80 backdrop-blur-2xl border border-white/50 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)] rounded-2xl overflow-hidden w-full max-w-md mx-auto transform transition-transform duration-150 ease-out">
                         <!-- Window Controls -->
-                        <div class="h-10 bg-neutral-100 border-b border-neutral-200 flex items-center px-4 gap-2">
-                            <div class="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
-                            <div class="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
-                            <div class="w-3 h-3 rounded-full bg-[#28C840]"></div>
-                            <div class="ml-4 text-xs text-neutral-400 font-mono">Nexus Chat Agent</div>
+                        <div class="h-12 bg-white/50 border-b border-neutral-200/50 flex items-center justify-between px-4 backdrop-blur-md">
+                            <div class="flex gap-2">
+                                <div class="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
+                                <div class="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
+                                <div class="w-3 h-3 rounded-full bg-[#28C840]"></div>
+                            </div>
+                            <div class="text-xs text-neutral-400 font-medium tracking-wide">Nexus AI Agent</div>
+                            <div class="w-4"></div>
                         </div>
-                        
                         <!-- Chat Area -->
-                        <div class="p-6 space-y-4 h-[400px] overflow-y-auto chat-container" id="chat-display">
-                            <!-- Chat messages will be injected here via JS -->
+                        <div class="p-6 space-y-4 h-[420px] overflow-y-auto chat-container scroll-smooth" id="chat-display">
+<!-- Chat messages will be injected here via JS -->
                         </div>
                     </div>
-                    
                     <!-- Decorative elements behind window -->
-                    <div class="absolute -top-10 -right-10 w-20 h-20 bg-primary/10 rounded-full blur-2xl"></div>
-                    <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-blue-100 rounded-full blur-2xl"></div>
-                </div>
+                    <div class="absolute -top-10 -right-10 w-32 h-32 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
+                    <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-blue-500/10 rounded-full blur-3xl"></div>
+</div>
             </div>
         </section>
 

script.js

@@ -150,35 +150,47 @@ document.addEventListener('DOMContentLoaded', () => {
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
     });
-
-
     // --- 3. MacOS Window Tilt Interaction ---
     const windowEl = document.querySelector('.mac-window');
     const container = document.querySelector('.perspective-container');
 
     if(container && windowEl) {
+        // Use requestAnimationFrame for smoother performance
+        let currentX = -8;
+        let currentY = 4;
+        let targetX = -8;
+        let targetY = 4;
+        
+        const animateTilt = () => {
+            // Lerp (Linear Interpolation) for smooth movement
+            currentX += (targetX - currentX) * 0.1;
+            currentY += (targetY - currentY) * 0.1;
+            
+            windowEl.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`;
+            requestAnimationFrame(animateTilt);
+        };
+        
+        animateTilt();
+
         container.addEventListener('mousemove', (e) => {
             const rect = container.getBoundingClientRect();
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
             
-            // Calculate rotation based on cursor position relative to center
             const centerX = rect.width / 2;
             const centerY = rect.height / 2;
             
-            const rotateY = ((x - centerX) / centerX) * -5; // Max 5 deg
-            const rotateX = ((y - centerY) / centerY) * 5; // Max 5 deg
-
-            windowEl.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+            // Reduced intensity for a more premium feel
+            targetX = ((x - centerX) / centerX) * -4; 
+            targetY = ((y - centerY) / centerY) * 4;
         });
 
         container.addEventListener('mouseleave', () => {
-            // Reset to default tilt
-            windowEl.style.transform = `rotateY(-10deg) rotateX(5deg)`;
+            targetX = -8;
+            targetY = 4;
         });
     }
-
-    // --- 4. FAQ Accordion Logic ---
+// --- 4. FAQ Accordion Logic ---
     const faqData = [
         {
             q: "Зачем мне это нужно?",

style.css

@@ -28,71 +28,90 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #D4D4D4;
 }
-
 /* MacOS Window 3D Effect */
 .perspective-container {
-    perspective: 1200px;
+    perspective: 1500px;
 }
 
 .mac-window {
-    transform: rotateY(-10deg) rotateX(5deg);
-    transition: transform 0.1s ease-out; /* Fast response for mouse move */
-    box-shadow: 20px 20px 60px rgba(0,0,0,0.1), -5px -5px 20px rgba(255,255,255,0.8);
+    transform: rotateY(-8deg) rotateX(4deg);
+    transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 
+                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+    background: rgba(255, 255, 255, 0.7);
 }
 
 .mac-window:hover {
-    /* Subtle pop on hover */
-    transform: rotateY(-5deg) rotateX(2deg) scale(1.02);
+    transform: rotateY(-4deg) rotateX(2deg) scale(1.01);
 }
-
 /* Chat Styles */
+.chat-container {
+    scrollbar-width: thin;
+    scrollbar-color: #E5E5E5 transparent;
+}
+
+.chat-container::-webkit-scrollbar {
+    width: 4px;
+}
+
+.chat-container::-webkit-scrollbar-thumb {
+    background-color: #E5E5E5;
+    border-radius: 4px;
+}
+
 .chat-bubble {
     max-width: 85%;
-    padding: 12px 16px;
-    border-radius: 18px;
+    padding: 14px 18px;
+    border-radius: 20px;
     font-size: 0.95rem;
     line-height: 1.5;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     opacity: 0;
-    transform: translateY(10px);
-    animation: slideUp 0.3s forwards;
+    transform: translateY(15px);
+    animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
 }
 
 .chat-bubble.bot {
-    background-color: #F3F4F6;
-    color: #171717;
-    border-bottom-left-radius: 4px;
+    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
+    color: #1F2937;
+    border-bottom-left-radius: 6px;
+    border: 1px solid rgba(0,0,0,0.04);
 }
 
 .chat-bubble.customer {
-    background-color: #171717;
+    background: linear-gradient(135deg, #171717 0%, #262626 100%);
     color: #FFFFFF;
     margin-left: auto;
-    border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
-
 @keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(15px) scale(0.98);
+    }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translateY(0) scale(1);
     }
 }
-
 /* Typing Indicator */
 .typing-indicator {
     display: flex;
-    gap: 4px;
-    padding: 12px 16px;
-    background-color: #F3F4F6;
-    border-radius: 18px;
-    border-bottom-left-radius: 4px;
+    gap: 5px;
+    padding: 14px 18px;
+    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
+    border-radius: 20px;
+    border-bottom-left-radius: 6px;
     width: fit-content;
+    border: 1px solid rgba(0,0,0,0.04);
 }
 
 .dot {
     width: 6px;
     height: 6px;
-    background: #A3A3A3;
+    background: #9CA3AF;
     border-radius: 50%;
     animation: bounce 1.4s infinite ease-in-out both;
 }
@@ -101,10 +120,15 @@ body {
 .dot:nth-child(2) { animation-delay: -0.16s; }
 
 @keyframes bounce {
-    0%, 80%, 100% { transform: scale(0); }
-    40% { transform: scale(1); }
+    0%, 80%, 100% { 
+        transform: scale(0);
+        opacity: 0.5;
+    }
+    40% { 
+        transform: scale(1);
+        opacity: 1;
+    }
 }
-
 /* Header Nav Expansion Animation (Fallback if CSS preferred) */
 .nav-link {
     display: flex;