diff --git a/package-lock.json b/package-lock.json index c90c2db..6c5422a 100644 --- 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", diff --git a/package.json b/package.json index 7a83352..c0c66fe 100644 --- 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" } } diff --git a/src/html/index.pug b/src/html/index.pug index 679b494..9cf18ba 100644 --- 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 diff --git a/src/scripts/main.ts b/src/scripts/main.ts new file mode 100644 index 0000000..f33d314 --- /dev/null +++ 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, +}; + diff --git a/src/styles/landing.scss b/src/styles/landing.scss index 009bf06..2081cca 100644 --- 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; + } + } +} +