Enhance landing page functionality by integrating Swiper for sliders and animations. Add new sections for agentic features and processes, along with corresponding styles and scripts. Update package dependencies to include Swiper and TypeScript for improved development experience.

2025-10-29 23:59:08 +03:00 · 2025-10-29 23:59:08 +03:00 · e7a15b528d
commit e7a15b528d
parent b3e1e2361d
5 changed files with 1308 additions and 7 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,10 +8,14 @@
            "name": "bro.landing",
            "version": "2.0.1",
            "license": "MIT",
+            "dependencies": {
+                "swiper": "^11.1.14"
+            },
            "devDependencies": {
                "pug": "^3.0.3",
                "rimraf": "^5.0.5",
                "sass": "^1.93.2",
+                "typescript": "^5.6.3",
                "vite": "^7.1.12"
            }
        },
@ -2521,6 +2525,25 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/swiper": {
+            "version": "11.2.10",
+            "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+            "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+            "funding": [
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/swiperjs"
+                },
+                {
+                    "type": "open_collective",
+                    "url": "http://opencollective.com/swiper"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.7.0"
+            }
+        },
        "node_modules/terser": {
            "version": "5.34.1",
            "resolved": "https://registry.npmjs.org/terser/-/terser-5.34.1.tgz",
@ -2633,6 +2656,20 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
        "node_modules/undici-types": {
            "version": "7.16.0",
            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
--- a/package.json
+++ b/package.json
@ -13,10 +13,14 @@
    "keywords": [],
    "author": "",
    "license": "MIT",
+    "dependencies": {
+        "swiper": "^11.1.14"
+    },
    "devDependencies": {
        "pug": "^3.0.3",
        "rimraf": "^5.0.5",
        "sass": "^1.93.2",
+        "typescript": "^5.6.3",
        "vite": "^7.1.12"
    }
 }
--- a/src/html/index.pug
+++ b/src/html/index.pug
@ -9,6 +9,7 @@ html(lang="ru")
    meta(name="yandex-verification" content="98f7e15d1ad66018")
    link(href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet")
    link(rel="stylesheet" href="/src/styles/landing.scss")
+    script(type="module" src="/src/scripts/main.ts")
  
  body
    //- Yandex.Metrika counter
@ -42,6 +43,86 @@ html(lang="ru")
      .scroll-indicator
        .mouse

+    //- Agentic Section (Что такое агентизация)
+    section.agentic-intro.animate-on-scroll
+      .container
+        h2.section-title Что такое агентизация процессов?
+        p.section-subtitle Новое поколение автоматизации с использованием искусственного интеллекта
+        
+        .swiper.agentic-slider
+          .swiper-wrapper
+            .swiper-slide
+              .agentic-card
+                .agentic-image.gradient-bg-1
+                  .agentic-icon 🤖
+                h3.agentic-title Интеллектуальные AI-агенты
+                p.agentic-description AI-агенты — это автономные программы, способные принимать решения, учиться на опыте и выполнять сложные задачи без постоянного контроля человека. Они анализируют данные, адаптируются к изменениям и оптимизируют процессы в режиме реального времени.
+                .agentic-features
+                  .feature-item
+                    span.feature-icon ✓
+                    span Автономное принятие решений
+                  .feature-item
+                    span.feature-icon ✓
+                    span Обучение на опыте
+                  .feature-item
+                    span.feature-icon ✓
+                    span Адаптация к изменениям
+            
+            .swiper-slide
+              .agentic-card
+                .agentic-image.gradient-bg-2
+                  .agentic-icon ⚡
+                h3.agentic-title Отличие от традиционной автоматизации
+                p.agentic-description Традиционная автоматизация следует жёстким алгоритмам и требует постоянного программирования новых сценариев. AI-агенты же способны самостоятельно анализировать ситуацию, принимать решения и адаптироваться к новым условиям без вмешательства разработчиков.
+                .agentic-features
+                  .feature-item
+                    span.feature-icon ✓
+                    span Гибкость и адаптивность
+                  .feature-item
+                    span.feature-icon ✓
+                    span Работа с неструктурированными данными
+                  .feature-item
+                    span.feature-icon ✓
+                    span Понимание контекста
+            
+            .swiper-slide
+              .agentic-card
+                .agentic-image.gradient-bg-3
+                  .agentic-icon 🎯
+                h3.agentic-title Работа в реальном времени
+                p.agentic-description AI-агенты мониторят процессы 24/7, мгновенно реагируют на изменения и принимают решения на основе актуальных данных. Они интегрируются с существующими системами и обеспечивают непрерывную оптимизацию бизнес-процессов.
+                .agentic-features
+                  .feature-item
+                    span.feature-icon ✓
+                    span Мониторинг 24/7
+                  .feature-item
+                    span.feature-icon ✓
+                    span Мгновенная реакция
+                  .feature-item
+                    span.feature-icon ✓
+                    span Непрерывная оптимизация
+            
+            .swiper-slide
+              .agentic-card
+                .agentic-image.gradient-bg-4
+                  .agentic-icon 🚀
+                h3.agentic-title Примеры применения
+                p.agentic-description От обработки клиентских запросов до финансового анализа — AI-агенты трансформируют все аспекты бизнеса. Они автоматизируют рутинные задачи, выявляют паттерны в данных и предоставляют инсайты для принятия стратегических решений.
+                .agentic-features
+                  .feature-item
+                    span.feature-icon ✓
+                    span Клиентский сервис
+                  .feature-item
+                    span.feature-icon ✓
+                    span Аналитика и прогнозирование
+                  .feature-item
+                    span.feature-icon ✓
+                    span Оптимизация операций
+          
+          .swiper-pagination
+          .swiper-button-prev
+          .swiper-button-next
+
    //- News Section
    section.news
      .container
@ -59,19 +140,134 @@ html(lang="ru")
    section.stats
      .container
        .stats-grid
-          .stat-card
+          .stat-card.animate-on-scroll
            .stat-value $236 млрд
            .stat-label Рынок к 2034
-          .stat-card
+          .stat-card.animate-on-scroll
            .stat-value 45.8%
            .stat-label CAGR
-          .stat-card
+          .stat-card.animate-on-scroll
            .stat-value 85-90%
            .stat-label Снижение затрат
-          .stat-card
+          .stat-card.animate-on-scroll
            .stat-value 74%
            .stat-label ROI за год

+    //- Processes Slider Section
+    section.processes-section.animate-on-scroll
+      .container
+        h2.section-title Какие процессы можно агентизировать?
+        p.section-subtitle Трансформируйте ключевые бизнес-процессы с помощью AI-агентов
+        
+        .swiper.processes-slider
+          .swiper-wrapper
+            .swiper-slide
+              .process-card
+                .process-header
+                  .process-icon 💬
+                  h3.process-title Клиентская поддержка
+                .process-image.gradient-bg-5
+                  .process-stats
+                    .stat-badge
+                      span.stat-number 80%
+                      span.stat-text автоматизация запросов
+                    .stat-badge
+                      span.stat-number -68%
+                      span.stat-text время ответа
+                .process-description
+                  p AI-агенты обрабатывают обращения клиентов 24/7, отвечают на вопросы, решают проблемы и эскалируют сложные случаи человеку. Персонализированный подход к каждому клиенту.
+                  ul.process-benefits
+                    li Мгновенные ответы на типовые вопросы
+                    li Многоязычная поддержка
+                    li Интеграция с CRM и базами знаний
+                    li Анализ тональности и эмоций
+            
+            .swiper-slide
+              .process-card
+                .process-header
+                  .process-icon 📊
+                  h3.process-title Продажи и маркетинг
+                .process-image.gradient-bg-6
+                  .process-stats
+                    .stat-badge
+                      span.stat-number +30%
+                      span.stat-text конверсия
+                    .stat-badge
+                      span.stat-number +15%
+                      span.stat-text выручка
+                .process-description
+                  p Автоматизация лидогенерации, персонализация коммуникаций, прогнозирование поведения клиентов и оптимизация маркетинговых кампаний в реальном времени.
+                  ul.process-benefits
+                    li Квалификация и скоринг лидов
+                    li Персональные рекомендации продуктов
+                    li A/B тестирование и оптимизация
+                    li Предсказательная аналитика
+            
+            .swiper-slide
+              .process-card
+                .process-header
+                  .process-icon 👥
+                  h3.process-title HR и рекрутинг
+                .process-image.gradient-bg-7
+                  .process-stats
+                    .stat-badge
+                      span.stat-number -60%
+                      span.stat-text время найма
+                    .stat-badge
+                      span.stat-number +45%
+                      span.stat-text качество кандидатов
+                .process-description
+                  p Автоматизация скрининга резюме, проведение первичных интервью, оценка навыков кандидатов и планирование онбординга новых сотрудников.
+                  ul.process-benefits
+                    li Интеллектуальный поиск кандидатов
+                    li Автоматизированные интервью
+                    li Оценка культурного соответствия
+                    li Персонализированный онбординг
+            
+            .swiper-slide
+              .process-card
+                .process-header
+                  .process-icon 📈
+                  h3.process-title Аналитика данных
+                .process-image.gradient-bg-8
+                  .process-stats
+                    .stat-badge
+                      span.stat-number -40%
+                      span.stat-text время на поиск
+                    .stat-badge
+                      span.stat-number +35%
+                      span.stat-text качество данных
+                .process-description
+                  p Сбор, обработка и анализ больших объёмов данных, выявление трендов, создание отчётов и предоставление рекомендаций для принятия решений.
+                  ul.process-benefits
+                    li Автоматические инсайты из данных
+                    li Прогнозирование трендов
+                    li Визуализация и дашборды
+                    li Обнаружение аномалий
+            
+            .swiper-slide
+              .process-card
+                .process-header
+                  .process-icon 💰
+                  h3.process-title Финансовые операции
+                .process-image.gradient-bg-9
+                  .process-stats
+                    .stat-badge
+                      span.stat-number -75%
+                      span.stat-text время обработки
+                    .stat-badge
+                      span.stat-number 99.9%
+                      span.stat-text точность
+                .process-description
+                  p Автоматизация бухгалтерии, управление платежами, мониторинг расходов, прогнозирование денежных потоков и выявление финансовых рисков.
+                  ul.process-benefits
+                    li Автоматическая обработка счетов
+                    li Детекция мошенничества
+                    li Финансовое планирование
+                    li Управление ликвидностью
+          
+          .swiper-pagination.processes-pagination
+
    //- Benefits Section
    section.benefits
      .container
@ -97,25 +293,147 @@ html(lang="ru")
        h2.section-title Преимущества по направлениям
        .solutions-tabs
          .tab-content
-            .solution-item
+            .solution-item.animate-on-scroll
              h3 Клиентский сервис
              ul
                li ✓ Автоматизация до 80% обращений
                li ✓ Сокращение времени ответа на 68%
                li ✓ Klarna обслуживает 85 млн пользователей
-            .solution-item
+            .solution-item.animate-on-scroll
              h3 Продажи и маркетинг
              ul
                li ✓ Увеличение конверсии на 15-30%
                li ✓ Повышение выручки на 3-15%
                li ✓ GitHub Copilot ускоряет разработку на 126%
-            .solution-item
+            .solution-item.animate-on-scroll
              h3 Бизнес-аналитика
              ul
                li ✓ Сокращение времени поиска на 40%
                li ✓ Улучшение качества данных на 35%
                li ✓ Детальные отчёты за минуты

+    //- Cases Gallery Section
+    section.cases-section.animate-on-scroll
+      .container
+        h2.section-title Истории успеха
+        p.section-subtitle Реальные кейсы внедрения AI-агентов в бизнес
+        
+        .swiper.cases-gallery
+          .swiper-wrapper
+            .swiper-slide
+              .case-card
+                .case-image.gradient-bg-10
+                  .case-company-icon 🏦
+                  .case-badge Финтех
+                h3.case-company Klarna
+                .case-metrics
+                  .metric-item
+                    .metric-value 85 млн
+                    .metric-label пользователей
+                  .metric-item
+                    .metric-value 2/3
+                    .metric-label запросов AI
+                  .metric-item
+                    .metric-value 24/7
+                    .metric-label поддержка
+                p.case-description Klarna внедрила AI-агента для обработки клиентских запросов, который теперь обслуживает миллионы пользователей. Агент обрабатывает две трети всех обращений, обеспечивая мгновенные ответы и персонализированную поддержку.
+                .case-results
+                  .result-tag ⚡ Мгновенные ответы
+                  .result-tag 🌍 25 языков
+                  .result-tag 📊 Повышение удовлетворенности
+            
+            .swiper-slide
+              .case-card
+                .case-image.gradient-bg-11
+                  .case-company-icon 💻
+                  .case-badge Разработка
+                h3.case-company GitHub Copilot
+                .case-metrics
+                  .metric-item
+                    .metric-value +126%
+                    .metric-label скорость кода
+                  .metric-item
+                    .metric-value 46%
+                    .metric-label кода от AI
+                  .metric-item
+                    .metric-value 55%
+                    .metric-label быстрее задачи
+                p.case-description GitHub Copilot революционизировал процесс разработки, помогая программистам писать код быстрее и эффективнее. AI-агент понимает контекст проекта и предлагает релевантные решения.
+                .case-results
+                  .result-tag 🚀 Ускорение в 2 раза
+                  .result-tag 🧠 Контекстные подсказки
+                  .result-tag ✨ Меньше ошибок
+            
+            .swiper-slide
+              .case-card
+                .case-image.gradient-bg-12
+                  .case-company-icon 🏢
+                  .case-badge Enterprise
+                h3.case-company Salesforce Einstein
+                .case-metrics
+                  .metric-item
+                    .metric-value +38%
+                    .metric-label продуктивность
+                  .metric-item
+                    .metric-value +28%
+                    .metric-label конверсия лидов
+                  .metric-item
+                    .metric-value -30%
+                    .metric-label время ответа
+                p.case-description Salesforce Einstein GPT помогает командам продаж автоматизировать рутинные задачи, персонализировать взаимодействие с клиентами и прогнозировать результаты сделок с высокой точностью.
+                .case-results
+                  .result-tag 📈 Рост продаж
+                  .result-tag 🎯 Точные прогнозы
+                  .result-tag 🤝 Персонализация
+            
+            .swiper-slide
+              .case-card
+                .case-image.gradient-bg-13
+                  .case-company-icon 📦
+                  .case-badge Логистика
+                h3.case-company Amazon
+                .case-metrics
+                  .metric-item
+                    .metric-value +25%
+                    .metric-value эффективность
+                  .metric-item
+                    .metric-value -35%
+                    .metric-label ошибки
+                  .metric-item
+                    .metric-value $1 млрд+
+                    .metric-label экономия
+                p.case-description Amazon использует AI-агентов для оптимизации логистики, управления складами и прогнозирования спроса. Система автоматически принимает миллионы решений ежедневно.
+                .case-results
+                  .result-tag 🤖 Автоматизация складов
+                  .result-tag 📊 Прогноз спроса
+                  .result-tag ⚡ Оптимизация доставки
+            
+            .swiper-slide
+              .case-card
+                .case-image.gradient-bg-14
+                  .case-company-icon 🏥
+                  .case-badge Здравоохранение
+                h3.case-company Mayo Clinic
+                .case-metrics
+                  .metric-item
+                    .metric-value +40%
+                    .metric-label точность диагностики
+                  .metric-item
+                    .metric-value -50%
+                    .metric-label время анализа
+                  .metric-item
+                    .metric-value 90%+
+                    .metric-label удовлетворенность
+                p.case-description Mayo Clinic внедрила AI-агентов для анализа медицинских данных, помощи в диагностике и персонализации лечения. Система обрабатывает тысячи пациентских записей.
+                .case-results
+                  .result-tag 🔬 Точная диагностика
+                  .result-tag 📋 Анализ данных
+                  .result-tag 💊 Персональное лечение
+          
+          .swiper-pagination.cases-pagination
+          .swiper-button-prev.cases-button-prev
+          .swiper-button-next.cases-button-next
+
    //- Education Section
    section.education
      .container
--- a/src/scripts/main.ts
+++ b/src/scripts/main.ts
@ -0,0 +1,304 @@
+import Swiper from 'swiper';
+import { Navigation, Pagination, Autoplay, EffectCoverflow, EffectCards } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/effect-cards';
+
+// Типы
+interface ScrollAnimationOptions {
+  threshold?: number;
+  rootMargin?: string;
+}
+
+// Инициализация слайдера "Что такое агентизация"
+function initAgenticSlider(): void {
+  const agenticSlider = document.querySelector('.agentic-slider') as HTMLElement;
+  
+  if (agenticSlider) {
+    new Swiper('.agentic-slider', {
+      modules: [Navigation, Pagination, Autoplay],
+      slidesPerView: 1,
+      spaceBetween: 30,
+      loop: true,
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        dynamicBullets: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      breakpoints: {
+        768: {
+          slidesPerView: 1,
+        },
+      },
+    });
+  }
+}
+
+// Инициализация слайдера процессов
+function initProcessesSlider(): void {
+  const processesSlider = document.querySelector('.processes-slider') as HTMLElement;
+  
+  if (processesSlider) {
+    new Swiper('.processes-slider', {
+      modules: [Navigation, Pagination, EffectCards],
+      effect: 'cards',
+      grabCursor: true,
+      cardsEffect: {
+        perSlideOffset: 8,
+        perSlideRotate: 2,
+        rotate: true,
+        slideShadows: true,
+      },
+      pagination: {
+        el: '.processes-pagination',
+        clickable: true,
+      },
+    });
+  }
+}
+
+// Инициализация галереи кейсов
+function initCasesGallery(): void {
+  const casesGallery = document.querySelector('.cases-gallery') as HTMLElement;
+  
+  if (casesGallery) {
+    new Swiper('.cases-gallery', {
+      modules: [Navigation, Pagination, EffectCoverflow],
+      effect: 'coverflow',
+      grabCursor: true,
+      centeredSlides: true,
+      slidesPerView: 'auto',
+      loop: true,
+      coverflowEffect: {
+        rotate: 50,
+        stretch: 0,
+        depth: 100,
+        modifier: 1,
+        slideShadows: true,
+      },
+      pagination: {
+        el: '.cases-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.cases-button-next',
+        prevEl: '.cases-button-prev',
+      },
+      breakpoints: {
+        320: {
+          slidesPerView: 1,
+        },
+        768: {
+          slidesPerView: 2,
+        },
+        1024: {
+          slidesPerView: 3,
+        },
+      },
+    });
+  }
+}
+
+// Анимации при скролле с Intersection Observer
+function initScrollAnimations(options: ScrollAnimationOptions = {}): void {
+  const { threshold = 0.1, rootMargin = '0px 0px -100px 0px' } = options;
+  
+  const observerOptions = {
+    threshold,
+    rootMargin,
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('animate-in');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  // Наблюдаем за всеми элементами с классом animate-on-scroll
+  const animatedElements = document.querySelectorAll('.animate-on-scroll');
+  animatedElements.forEach((el) => observer.observe(el));
+
+  // Наблюдаем за карточками
+  const cards = document.querySelectorAll('.benefit-card, .stat-card, .why-us-card, .solution-item');
+  cards.forEach((card) => observer.observe(card));
+}
+
+// Параллакс-эффект для hero секции
+function initParallax(): void {
+  const hero = document.querySelector('.hero') as HTMLElement;
+  const heroBackground = document.querySelector('.hero-background') as HTMLElement;
+  
+  if (hero && heroBackground) {
+    window.addEventListener('scroll', () => {
+      const scrolled = window.scrollY;
+      const heroHeight = hero.offsetHeight;
+      
+      if (scrolled < heroHeight) {
+        const parallaxSpeed = 0.5;
+        heroBackground.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;
+        
+        // Добавляем fade out эффект
+        const opacity = 1 - (scrolled / heroHeight) * 0.8;
+        heroBackground.style.opacity = `${opacity}`;
+      }
+    });
+  }
+}
+
+// Плавное появление элементов при загрузке
+function initLoadAnimations(): void {
+  // Добавляем класс loaded к body после загрузки страницы
+  window.addEventListener('load', () => {
+    document.body.classList.add('loaded');
+  });
+}
+
+// Интерактивные кнопки с ripple эффектом
+function initButtonEffects(): void {
+  const buttons = document.querySelectorAll('.btn-primary, .btn-secondary');
+  
+  buttons.forEach((button) => {
+    button.addEventListener('click', function(e) {
+      const rect = (this as HTMLElement).getBoundingClientRect();
+      const x = (e as MouseEvent).clientX - rect.left;
+      const y = (e as MouseEvent).clientY - rect.top;
+      
+      const ripple = document.createElement('span');
+      ripple.className = 'ripple';
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      
+      this.appendChild(ripple);
+      
+      setTimeout(() => {
+        ripple.remove();
+      }, 600);
+    });
+  });
+}
+
+// Плавный скролл к секциям
+function initSmoothScroll(): void {
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      e.preventDefault();
+      const href = this.getAttribute('href');
+      
+      if (href && href !== '#') {
+        const target = document.querySelector(href);
+        
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
+        }
+      }
+    });
+  });
+}
+
+// Счетчик для статистики
+function initCounterAnimations(): void {
+  const stats = document.querySelectorAll('.stat-value');
+  const observerOptions = {
+    threshold: 0.5,
+  };
+
+  const counterObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const target = entry.target as HTMLElement;
+        const text = target.textContent || '';
+        
+        // Проверяем наличие процента
+        const hasPercent = text.includes('%');
+        const hasDollar = text.includes('$');
+        
+        // Извлекаем числовое значение
+        const numMatch = text.match(/[\d.,]+/);
+        
+        if (numMatch) {
+          const finalValue = parseFloat(numMatch[0].replace(',', '.'));
+          let currentValue = 0;
+          const increment = finalValue / 50;
+          const duration = 2000;
+          const stepTime = duration / 50;
+          
+          const counter = setInterval(() => {
+            currentValue += increment;
+            
+            if (currentValue >= finalValue) {
+              currentValue = finalValue;
+              clearInterval(counter);
+            }
+            
+            let displayValue = currentValue.toFixed(hasPercent ? 1 : 0);
+            
+            if (hasDollar) {
+              target.textContent = `$${displayValue} млрд`;
+            } else if (hasPercent) {
+              target.textContent = `${displayValue}%`;
+            } else {
+              target.textContent = displayValue;
+            }
+          }, stepTime);
+        }
+        
+        counterObserver.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  stats.forEach((stat) => counterObserver.observe(stat));
+}
+
+// Основная функция инициализации
+function init(): void {
+  console.log('🚀 Initializing Tatar Punk landing...');
+  
+  // Инициализация всех слайдеров
+  initAgenticSlider();
+  initProcessesSlider();
+  initCasesGallery();
+  
+  // Инициализация анимаций
+  initScrollAnimations();
+  initParallax();
+  initLoadAnimations();
+  initButtonEffects();
+  initSmoothScroll();
+  initCounterAnimations();
+  
+  console.log('✅ Landing initialized successfully!');
+}
+
+// Запуск после загрузки DOM
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+
+// Экспорт для возможного использования в других модулях
+export {
+  initAgenticSlider,
+  initProcessesSlider,
+  initCasesGallery,
+  initScrollAnimations,
+  initParallax,
+};
+
--- a/src/styles/landing.scss
+++ b/src/styles/landing.scss
@ -36,6 +36,28 @@ $gradient-accent: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  50% { transform: scale(1.05); }
 }

+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 // Reset
 * {
  margin: 0;
@ -583,3 +605,619 @@ body {
  border-top: 1px solid rgba(124, 58, 237, 0.2);
 }

+// Scroll Animations
+.animate-on-scroll {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  
+  &.animate-in {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Gradient Backgrounds for Images
+.gradient-bg-1 {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.gradient-bg-2 {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.gradient-bg-3 {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.gradient-bg-4 {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.gradient-bg-5 {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+
+.gradient-bg-6 {
+  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+}
+
+.gradient-bg-7 {
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+
+.gradient-bg-8 {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+}
+
+.gradient-bg-9 {
+  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+}
+
+.gradient-bg-10 {
+  background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%);
+}
+
+.gradient-bg-11 {
+  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
+}
+
+.gradient-bg-12 {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.gradient-bg-13 {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.gradient-bg-14 {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+// Ripple Effect for Buttons
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
+  margin-top: -50px;
+  animation: ripple-animation 0.6s ease-out;
+  pointer-events: none;
+}
+
+@keyframes ripple-animation {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.btn-primary, .btn-secondary {
+  position: relative;
+  overflow: hidden;
+}
+
+// Agentic Intro Section
+.agentic-intro {
+  padding: 100px 0;
+  background: $dark-bg;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, $accent-primary, transparent);
+  }
+}
+
+.agentic-slider {
+  margin-top: 3rem;
+  padding-bottom: 60px;
+  
+  .swiper-slide {
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+  }
+}
+
+.agentic-card {
+  background: $dark-card;
+  border-radius: 24px;
+  padding: 2.5rem;
+  border: 1px solid rgba(124, 58, 237, 0.3);
+  max-width: 900px;
+  width: 100%;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(124, 58, 237, 0.1);
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2), 0 8px 20px rgba(124, 58, 237, 0.15);
+    border-color: $accent-primary;
+  }
+}
+
+.agentic-image {
+  width: 100%;
+  height: 200px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.agentic-icon {
+  font-size: 5rem;
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+}
+
+.agentic-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: $gradient-accent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.agentic-description {
+  color: $text-secondary;
+  line-height: 1.8;
+  margin-bottom: 2rem;
+  font-size: 1.05rem;
+}
+
+.agentic-features {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(0, 212, 255, 0.05);
+  border-radius: 8px;
+  border-left: 3px solid $accent-primary;
+  
+  .feature-icon {
+    color: $accent-primary;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+  
+  span:not(.feature-icon) {
+    color: $text-primary;
+    font-size: 0.95rem;
+  }
+}
+
+// Swiper Navigation Customization
+.swiper-button-next,
+.swiper-button-prev {
+  color: $accent-primary;
+  
+  &::after {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  &:hover {
+    color: lighten($accent-primary, 10%);
+  }
+}
+
+.swiper-pagination {
+  bottom: 10px !important;
+  
+  .swiper-pagination-bullet {
+    background: $accent-primary;
+    opacity: 0.5;
+    width: 12px;
+    height: 12px;
+    transition: all 0.3s ease;
+    
+    &-active {
+      opacity: 1;
+      width: 30px;
+      border-radius: 6px;
+    }
+  }
+}
+
+// Processes Section
+.processes-section {
+  padding: 100px 0;
+  background: $dark-surface;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+}
+
+.processes-slider {
+  margin-top: 3rem;
+  padding: 40px 20px 80px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  
+  .swiper-slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.process-card {
+  background: $dark-card;
+  border-radius: 24px;
+  border: 2px solid rgba(124, 58, 237, 0.3);
+  width: 100%;
+  max-width: 500px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(124, 58, 237, 0.1);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    border-color: $accent-primary;
+    box-shadow: 0 20px 48px rgba(0, 212, 255, 0.25), 0 8px 24px rgba(124, 58, 237, 0.15);
+    transform: translateY(-5px);
+  }
+}
+
+.process-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem 2rem 1rem;
+}
+
+.process-icon {
+  font-size: 3rem;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+}
+
+.process-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: $text-primary;
+}
+
+.process-image {
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 22px 22px 0 0;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.process-stats {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.stat-badge {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 900;
+  background: $gradient-accent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: block;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+
+.stat-text {
+  color: $text-secondary;
+  font-size: 0.85rem;
+  display: block;
+}
+
+.process-description {
+  padding: 2rem;
+  
+  p {
+    color: $text-secondary;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.process-benefits {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  
+  li {
+    color: $text-primary;
+    padding: 0.75rem;
+    background: rgba(0, 212, 255, 0.05);
+    border-radius: 8px;
+    border-left: 3px solid $accent-primary;
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      background: rgba(0, 212, 255, 0.1);
+      transform: translateX(5px);
+    }
+  }
+}
+
+.processes-pagination {
+  bottom: 20px !important;
+}
+
+// Cases Gallery Section
+.cases-section {
+  padding: 100px 0;
+  background: $dark-bg;
+}
+
+.cases-gallery {
+  margin-top: 3rem;
+  padding-bottom: 80px;
+  
+  .swiper-slide {
+    width: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    
+    @media (max-width: 768px) {
+      width: 320px;
+    }
+  }
+}
+
+.case-card {
+  background: $dark-card;
+  border-radius: 24px;
+  border: 2px solid rgba(124, 58, 237, 0.3);
+  transition: all 0.4s ease;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(124, 58, 237, 0.1);
+  
+  &:hover {
+    border-color: $accent-primary;
+    box-shadow: 0 24px 56px rgba(0, 212, 255, 0.25), 0 12px 28px rgba(124, 58, 237, 0.15);
+    transform: translateY(-10px);
+  }
+}
+
+.case-image {
+  height: 200px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  border-radius: 22px 22px 0 0;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.case-company-icon {
+  font-size: 4rem;
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
+  margin-bottom: 1rem;
+}
+
+.case-badge {
+  position: relative;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1.5rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: $accent-primary;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.case-company {
+  font-size: 1.8rem;
+  font-weight: 700;
+  padding: 1.5rem 2rem 1rem;
+  color: $text-primary;
+}
+
+.case-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  padding: 0 2rem 1.5rem;
+  border-bottom: 1px solid rgba(124, 58, 237, 0.2);
+}
+
+.metric-item {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-value {
+  font-size: 1.5rem;
+  font-weight: 900;
+  background: $gradient-accent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+.metric-label {
+  color: $text-secondary;
+  font-size: 0.75rem;
+  line-height: 1.2;
+}
+
+.case-description {
+  padding: 1.5rem 2rem;
+  color: $text-secondary;
+  line-height: 1.7;
+  font-size: 0.95rem;
+  flex-grow: 1;
+}
+
+.case-results {
+  padding: 1rem 2rem 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.result-tag {
+  background: rgba(0, 212, 255, 0.1);
+  color: $accent-primary;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(0, 212, 255, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+.cases-pagination {
+  bottom: 20px !important;
+}
+
+.cases-button-next,
+.cases-button-prev {
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: -40px;
+  color: $accent-primary;
+  
+  &::after {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  &:hover {
+    color: lighten($accent-primary, 10%);
+    transform: translateY(-50%) scale(1.1);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .agentic-card {
+    padding: 1.5rem;
+  }
+  
+  .agentic-title {
+    font-size: 1.5rem;
+  }
+  
+  .agentic-image {
+    height: 150px;
+  }
+  
+  .agentic-icon {
+    font-size: 3.5rem;
+  }
+  
+  .process-card {
+    max-width: 100%;
+  }
+  
+  .process-title {
+    font-size: 1.4rem;
+  }
+  
+  .case-metrics {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+  
+  .swiper-button-next,
+  .swiper-button-prev {
+    &::after {
+      font-size: 20px;
+    }
+  }
+}
+