Spaces:

bitlo
/

content-machine-mavericks

Running

App Files Files Community

bitlo commited on Nov 11, 2025

Commit

a52f258

verified ·

1 Parent(s): 8d54e17

некоторые элементы съезжают , + нужно улучшить дизайн , примерно до такого https://www.sortlist.com/agency/grey-alchemy

Browse files

Files changed (4) hide show

components/navbar.js +54 -9
index.html +79 -79
script.js +58 -32
style.css +78 -23

components/navbar.js CHANGED Viewed

@@ -1,34 +1,79 @@
 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
-        .navbar {
           transition: all 0.3s ease;
         }
         .navbar.scrolled {
-          background-color: white;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
         .mobile-menu {
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease-out;
         }
         .mobile-menu.open {
           max-height: 500px;
         }
         @media (min-width: 768px) {
           .mobile-menu {
-            max-height: none !important;
           }
         }
       </style>
-      <nav class="navbar fixed w-full z-50 py-4 px-6 bg-white md:bg-transparent">
         <div class="container mx-auto flex justify-between items-center">
-          <a href="/" class="text-2xl font-bold text-primary flex items-center">
-            <img src="/static/favicon.ico" alt="Logo" class="w-6 h-6 mr-2">
             Toptera
           </a>
-<div class="hidden md:flex space-x-8">
-            <a href="#problem" class="text-zinc-700 hover:text-primary transition duration-300">

 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
+        :host {
+          display: block;
+          position: fixed;
+          width: 100%;
+          z-index: 50;
           transition: all 0.3s ease;
         }
+        .navbar {
+          @apply py-4 px-6;
+          background: rgba(255,255,255,0.95);
+          backdrop-filter: blur(8px);
+          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        }
         .navbar.scrolled {
+          background: rgba(255,255,255,0.98);
+          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        }
+        .nav-logo {
+          @apply text-2xl font-bold text-primary flex items-center;
         }
+        .nav-logo img {
+          @apply w-6 h-6 mr-2;
+        }
+        .nav-link {
+          @apply text-zinc-700 hover:text-primary transition-colors duration-300 font-medium;
+        }
         .mobile-menu {
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease-out;
+          @apply bg-white w-full absolute left-0 mt-2 shadow-lg;
         }
         .mobile-menu.open {
           max-height: 500px;
         }
         @media (min-width: 768px) {
+          .navbar {
+            @apply py-5 px-6;
+          }
           .mobile-menu {
+            @apply static bg-transparent shadow-none max-h-full flex space-x-8;
           }
         }
       </style>
+      <nav class="navbar">
         <div class="container mx-auto flex justify-between items-center">
+          <a href="/" class="nav-logo">
+            <img src="/static/favicon.ico" alt="Logo">
             Toptera
           </a>
+          <div class="hidden md:flex space-x-8">
+            <a href="#problem" class="nav-link">
+              Проблемы
+            </a>
+            <a href="#process" class="nav-link">
+              Процесс
+            </a>
+            <a href="#cases" class="nav-link">
+              Кейсы
+            </a>
+            <a href="#audit" class="nav-link">
+              Аудит
+            </a>
+          </div>

index.html CHANGED Viewed

@@ -24,71 +24,71 @@
 </head>
 <body class="bg-white text-zinc-900 font-sans">
     <custom-navbar></custom-navbar>
     <!-- Hero Section -->
-    <section class="relative py-20 md:py-32 bg-gradient-to-br from-zinc-50 to-zinc-100 overflow-hidden">
-        <div class="container mx-auto px-6">
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-12 md:mb-0">
-                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
-                        <span class="text-primary">Контент-машины</span> для роста трафика
-                    </h1>
-                    <p class="text-xl md:text-2xl text-secondary mb-8">
-                        Растим сайты в нишах с потенциалом, продвигаем в Google, масштабируем результат
-                    </p>
-                    <div class="flex flex-col sm:flex-row gap-4">
-                        <a href="#audit" class="bg-primary hover:bg-red-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 text-center">
-                            Бесплатный аудит
-                        </a>
-                        <a href="#cases" class="border-2 border-primary text-primary hover:bg-red-50 font-bold py-4 px-8 rounded-lg transition duration-300 text-center">
-                            Наши кейсы
-                        </a>
-                    </div>
-                </div>
-                <div class="md:w-1/2">
-                    <img src="http://static.photos/technology/1200x630/42" alt="Content machine" class="rounded-xl shadow-2xl transform hover:scale-105 transition duration-500">
-                </div>
             </div>
         </div>
     </section>
     <!-- Problem Section -->
-    <section id="problem" class="py-20 bg-white">
-        <div class="container mx-auto px-6">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">Эти проблемы вам знакомы?</h2>
-                <div class="w-24 h-1 bg-primary mx-auto"></div>
             </div>
-            <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-zinc-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
-                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="trending-down" class="text-primary"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Трафик не растёт</h3>
-                    <p class="text-secondary">Несмотря на вложения в контент и SEO, посещаемость стоит на месте</p>
-                </div>
-                <div class="bg-zinc-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
-                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="clock" class="text-primary"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Результаты долго ждать</h3>
-                    <p class="text-secondary">Месяцы ожидания первых результатов от SEO-специалистов</p>
-                </div>
-                <div class="bg-zinc-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
-                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="dollar-sign" class="text-primary"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Неясная окупаемость</h3>
-                    <p class="text-secondary">Сложно предсказать, когда вложения начнут приносить прибыль</p>
-                </div>
             </div>
         </div>
     </section>
-    <!-- Process Section -->
     <section id="process" class="py-20 bg-zinc-50">
         <div class="container mx-auto px-6">
             <div class="text-center mb-16">
@@ -210,33 +210,33 @@
             </div>
         </div>
     </section>
     <!-- CTA Section -->
-    <section id="audit" class="py-20 bg-gradient-to-br from-zinc-800 to-zinc-900 text-white">
-        <div class="container mx-auto px-6">
-            <div class="max-w-4xl mx-auto text-center">
-                <h2 class="text-3xl md:text-4xl font-bold mb-6">Готовы превратить ваш сайт в контент-машину?</h2>
-                <p class="text-xl text-zinc-300 mb-8">Получите бесплатный аудит вашего проекта с рекомендациями по росту трафика</p>
-                <form class="max-w-md mx-auto">
-                    <div class="mb-4">
-                        <input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 rounded-lg bg-zinc-700 border border-zinc-600 focus:outline-none focus:ring-2 focus:ring-primary">
-                    </div>
-                    <div class="mb-4">
-                        <input type="email" placeholder="Email" class="w-full px-4 py-3 rounded-lg bg-zinc-700 border border-zinc-600 focus:outline-none focus:ring-2 focus:ring-primary">
-                    </div>
-                    <div class="mb-4">
-                        <input type="url" placeholder="Ссылка на сайт" class="w-full px-4 py-3 rounded-lg bg-zinc-700 border border-zinc-600 focus:outline-none focus:ring-2 focus:ring-primary">
-                    </div>
-                    <button type="submit" class="w-full bg-primary hover:bg-red-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300">
-                        Получить аудит
-                    </button>
-                </form>
             </div>
         </div>
     </section>
-    <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>

 </head>
 <body class="bg-white text-zinc-900 font-sans">
     <custom-navbar></custom-navbar>
     <!-- Hero Section -->
+    <section class="hero relative overflow-hidden">
+      <div class="container">
+        <div class="flex flex-col md:flex-row items-center gap-12">
+          <div class="md:w-1/2">
+            <h1 class="mb-6">
+              <span class="text-primary">Контент-машины</span> для роста трафика
+            </h1>
+            <p class="text-xl text-secondary mb-8 max-w-lg">
+              Растим сайты в нишах с потенциалом, продвигаем в Google, масштабируем результат
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4">
+              <a href="#audit" class="btn btn-primary">
+                Бесплатный аудит
+              </a>
+              <a href="#cases" class="btn btn-outline">
+                Наши кейсы
+              </a>
             </div>
+          </div>
+          <div class="md:w-1/2">
+            <img src="http://static.photos/technology/1200x630/42" alt="Content machine"
+                 class="rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500">
+          </div>
         </div>
+      </div>
     </section>
     <!-- Problem Section -->
+    <section id="problem" class="bg-white">
+      <div class="container">
+        <div class="text-center mb-16">
+          <h2 class="mb-4">Эти проблемы вам знакомы?</h2>
+          <p class="text-xl text-secondary max-w-2xl mx-auto">
+            Мы помогаем бизнесам преодолеть типичные сложности в привлечении трафика
+          </p>
+        </div>
+        <div class="grid md:grid-cols-3 gap-6">
+          <div class="card animate-on-scroll">
+            <div class="w-14 h-14 bg-primary-light rounded-full flex items-center justify-center mb-4">
+              <i data-feather="trending-down" class="text-primary w-6 h-6"></i>
             </div>
+            <h3 class="mb-3">Трафик не растёт</h3>
+            <p class="text-secondary">Несмотря на вложения в контент и SEO, посещаемость стоит на месте</p>
+          </div>
+          <div class="card animate-on-scroll">
+            <div class="w-14 h-14 bg-primary-light rounded-full flex items-center justify-center mb-4">
+              <i data-feather="clock" class="text-primary w-6 h-6"></i>
+            </div>
+            <h3 class="mb-3">Результаты долго ждать</h3>
+            <p class="text-secondary">Месяцы ожидания первых результатов от SEO-специалистов</p>
+          </div>
+          <div class="card animate-on-scroll">
+            <div class="w-14 h-14 bg-primary-light rounded-full flex items-center justify-center mb-4">
+              <i data-feather="dollar-sign" class="text-primary w-6 h-6"></i>
             </div>
+            <h3 class="mb-3">Неясная окупаемость</h3>
+            <p class="text-secondary">Сложно предсказать, когда вложения начнут приносить прибыль</p>
+          </div>
         </div>
+      </div>
     </section>
+<!-- Process Section -->
     <section id="process" class="py-20 bg-zinc-50">
         <div class="container mx-auto px-6">
             <div class="text-center mb-16">
             </div>
         </div>
     </section>
     <!-- CTA Section -->
+    <section id="audit" class="bg-gradient-to-r from-zinc-900 to-zinc-800 text-white">
+      <div class="container">
+        <div class="max-w-3xl mx-auto text-center">
+          <h2 class="mb-6">Готовы превратить ваш сайт в контент-машину?</h2>
+          <p class="text-xl text-zinc-300 mb-8">
+            Получите бесплатный аудит вашего проекта с рекомендациями по росту трафика
+          </p>
+          <form class="max-w-md mx-auto">
+            <div class="mb-4">
+              <input type="text" placeholder="Ваше имя" class="input bg-zinc-800 border-zinc-700">
             </div>
+            <div class="mb-4">
+              <input type="email" placeholder="Email" class="input bg-zinc-800 border-zinc-700">
+            </div>
+            <div class="mb-4">
+              <input type="url" placeholder="Ссылка на сайт" class="input bg-zinc-800 border-zinc-700">
+            </div>
+            <button type="submit" class="btn btn-primary w-full">
+              Получить аудит
+            </button>
+          </form>
         </div>
+      </div>
     </section>
+<custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>

script.js CHANGED Viewed

@@ -1,34 +1,60 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Animate elements on scroll
-    const animateOnScroll = function() {
-        const elements = document.querySelectorAll('.animate-on-scroll');
-        elements.forEach(element => {
-            const elementPosition = element.getBoundingClientRect().top;
-            const screenPosition = window.innerHeight / 1.3;
-            if (elementPosition < screenPosition) {
-                element.classList.add('animate-fade-in');
-            }
-        });
-    };
-    // Run once on load
-    animateOnScroll();
-    // Run on scroll
-    window.addEventListener('scroll', animateOnScroll);
-    // Mobile menu toggle (handled in navbar component)
-    // Form submission
-    const form = document.querySelector('form');
-    if (form) {
-        form.addEventListener('submit', function(e) {
-            e.preventDefault();
-            // Here you would typically send the form data to your server
-            alert('Спасибо! Мы свяжемся с вами в ближайшее время.');
-            form.reset();
-        });
     }
-});

 document.addEventListener('DOMContentLoaded', function() {
+  // Navbar scroll effect
+  const navbar = document.querySelector('custom-navbar').shadowRoot.querySelector('.navbar');
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      navbar.classList.add('scrolled');
+    } else {
+      navbar.classList.remove('scrolled');
     }
+  });
+  // Animate elements on scroll
+  const animateOnScroll = () => {
+    const elements = document.querySelectorAll('.animate-on-scroll');
+    elements.forEach(element => {
+      const elementPosition = element.getBoundingClientRect().top;
+      const screenPosition = window.innerHeight / 1.3;
+      if (elementPosition < screenPosition) {
+        element.classList.add('animate-fade-in');
+      }
+    });
+  };
+  // Initialize animations
+  animateOnScroll();
+  window.addEventListener('scroll', animateOnScroll);
+  // Mobile menu toggle
+  const menuToggle = document.querySelector('custom-navbar').shadowRoot.querySelector('.menu-toggle');
+  if (menuToggle) {
+    menuToggle.addEventListener('click', () => {
+      const mobileMenu = document.querySelector('custom-navbar').shadowRoot.querySelector('.mobile-menu');
+      mobileMenu.classList.toggle('open');
+    });
+  }
+  // Form handling
+  const forms = document.querySelectorAll('form');
+  forms.forEach(form => {
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      // Form submission logic
+      this.querySelector('button[type="submit"]').innerHTML = 'Отправка...';
+      setTimeout(() => {
+        alert('Спасибо! Мы свяжемся с вами в ближайшее время.');
+        form.reset();
+        this.querySelector('button[type="submit"]').innerHTML = 'Получить аудит';
+      }, 1000);
+    });
+  });
+  // Feather icons
+  if (window.feather) {
+    feather.replace();
+  }
+});

style.css CHANGED Viewed

@@ -1,39 +1,94 @@
-/* Custom animations */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
 }
 .animate-fade-in {
-    animation: fadeIn 0.8s ease-out forwards;
 }
-/* Custom scroll behavior */
-html {
-    scroll-behavior: smooth;
 }
-/* Custom hover effects */
-.hover-scale {
-    transition: transform 0.3s ease;
 }
-.hover-scale:hover {
-    transform: scale(1.03);
 }
-/* Section spacing */
-section {
-    scroll-margin-top: 100px;
 }
-/* Form input styling */
-input::placeholder {
-    color: #a1a1aa;
-    opacity: 1;
 }
-/* Custom shadow for cards */
-.custom-shadow {
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}

+:root {
+  --primary: #ef4444;
+  --primary-light: #fee2e2;
+  --primary-dark: #dc2626;
+  --secondary: #71717a;
+  --dark: #18181b;
+  --light: #fafafa;
+  --border: #e5e7eb;
+  --radius: 12px;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+/* Base styles */
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 100px;
+}
+body {
+  @apply bg-light text-dark;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  line-height: 1.6;
+}
+/* Typography */
+h1, h2, h3, h4 {
+  @apply font-bold leading-tight;
+  letter-spacing: -0.025em;
+}
+h1 { @apply text-4xl md:text-5xl lg:text-6xl; }
+h2 { @apply text-3xl md:text-4xl; }
+h3 { @apply text-xl md:text-2xl; }
+/* Layout */
+.container {
+  @apply mx-auto px-6 max-w-7xl;
+}
+section {
+  @apply py-20 md:py-24;
+  scroll-margin-top: 100px;
+}
+/* Animations */
 @keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 .animate-fade-in {
+  animation: fadeIn 0.8s ease-out forwards;
 }
+/* Cards */
+.card {
+  @apply bg-white rounded-xl p-8 transition-all duration-300;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
 }
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
 }
+/* Buttons */
+.btn {
+  @apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-medium transition-all duration-300;
 }
+.btn-primary {
+  @apply bg-primary text-white hover:bg-primary-dark;
 }
+.btn-outline {
+  @apply border-2 border-primary text-primary hover:bg-primary-light;
 }
+/* Form elements */
+.input {
+  @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
+}
+.input::placeholder {
+  @apply text-gray-400;
+}
+/* Hero section */
+.hero {
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}