Download index.html from Vadeam/youstat: direct link, hf CLI and curl.
- Browser
- Download file 69.1 kB
-
https://huggingface.co/spaces/Vadeam/youstat/resolve/main/index.html
- Command line
-
hf download hf://spaces/Vadeam/youstat/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Vadeam/youstat/resolve/main/index.html
69.1 kB
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouStat - Аналитика и обучение для продавцов маркетплейсов</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Font Awesome for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Animate.css for animations --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 1s ease-in-out', | |
| 'slide-up': 'slideUp 0.5s ease-out', | |
| 'pulse-slow': 'pulse 3s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| .section { | |
| transition: all 0.5s ease; | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #4F46E5; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .countdown { | |
| font-family: monospace; | |
| } | |
| .timeline-item:before { | |
| content: ''; | |
| position: absolute; | |
| left: -20px; | |
| top: 0; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #4F46E5; | |
| } | |
| .timeline:before { | |
| content: ''; | |
| position: absolute; | |
| left: -15px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: #E5E7EB; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-dark"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50 animate__animated animate__fadeInDown"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#hero" class="flex-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xl">YS</div> | |
| <span class="ml-3 text-xl font-bold text-primary">YouStat</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#hero" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Главная</a> | |
| <a href="#tariffs" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Тарифы</a> | |
| <a href="#roadmap" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Дорожная карта</a> | |
| <a href="#services" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Услуги</a> | |
| <a href="#partners" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Партнерам</a> | |
| <button class="ml-4 bg-primary hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 transform hover:scale-105"> | |
| Войти | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#hero" class="block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium text-primary bg-primary-50">Главная</a> | |
| <a href="#tariffs" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300">Тарифы</a> | |
| <a href="#roadmap" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300">Дорожная карта</a> | |
| <a href="#services" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300">Услуги</a> | |
| <a href="#partners" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300">Партнерам</a> | |
| <div class="mt-4 pt-2 border-t border-gray-200"> | |
| <button class="block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-primary hover:text-primary-600">Войти</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="hero" class="py-20 bg-gradient-to-r from-primary to-indigo-600 text-white animate__animated animate__fadeIn"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate__animated animate__fadeInLeft"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Управляйте продажами на маркетплейсах эффективно</h1> | |
| <p class="text-xl md:text-2xl opacity-90 mb-8">Комплексная аналитика и обучение для продавцов на Wildberries и Ozon в одном сервисе</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#try" class="bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-opacity-90 transition transform hover:scale-105 animate__animated animate__pulse animate__infinite"> | |
| Попробовать | |
| </a> | |
| <a href="#services" class="border border-white text-white px-8 py-3 rounded-md font-semibold hover:bg-white hover:bg-opacity-10 transition transform hover:scale-105"> | |
| Узнать больше | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative animate__animated animate__fadeInRight"> | |
| <div class="relative"> | |
| <div class="w-full h-80 bg-indigo-500 rounded-xl shadow-2xl overflow-hidden"> | |
| <!-- Dashboard mockup --> | |
| <div class="absolute inset-0 bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"></div> | |
| <div class="absolute top-4 left-4 right-4 h-8 bg-white bg-opacity-20 rounded"></div> | |
| <div class="absolute top-16 left-4 right-4 bottom-4 flex"> | |
| <div class="w-1/4 bg-white bg-opacity-10 rounded-l-lg"></div> | |
| <div class="w-3/4 bg-white bg-opacity-5 rounded-r-lg p-4"> | |
| <div class="h-4 w-3/4 bg-white bg-opacity-20 rounded mb-3"></div> | |
| <div class="h-4 w-1/2 bg-white bg-opacity-20 rounded"></div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <div class="h-24 bg-white bg-opacity-10 rounded-lg"></div> | |
| <div class="h-24 bg-white bg-opacity-10 rounded-lg"></div> | |
| <div class="h-24 bg-white bg-opacity-10 rounded-lg"></div> | |
| <div class="h-24 bg-white bg-opacity-10 rounded-lg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-secondary rounded-full opacity-10 animate-pulse"></div> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-500 rounded-full opacity-10 animate-pulse animation-delay-1000"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-white animate__animated animate__fadeIn"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Почему выбирают YouStat?</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Универсальное решение для управления продажами на маркетплейсах с аналитикой и обучением</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.1s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Комплексная аналитика</h3> | |
| <p class="text-gray-600">Автоматическая аналитика продаж, расчета прибыли и окупаемости рекламы с понятными отчетами и выводами</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.2s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-cog text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Управление из одной панели</h3> | |
| <p class="text-gray-600">Изменение цен, управление стоком и настройка рекламы сразу на нескольких маркетплейсах без переключения между вкладками</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.3s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-graduation-cap text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Обучение для селлеров</h3> | |
| <p class="text-gray-600">Курсы от экспертов отрасли для новичков и опытных продавцов с практическими заданиями и разбором кейсов</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Try Section --> | |
| <section id="try" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Начните использовать уже сегодня</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Выберите подходящий тариф и начните увеличивать продажи уже сейчас</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Free Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.1s"> | |
| <div class="px-6 py-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Бесплатный</h3> | |
| <span class="px-3 py-1 bg-secondary bg-opacity-10 text-secondary text-xs font-semibold rounded-full">Популярный</span> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">0 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Базовые возможности для тестирования сервиса</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Аналитика по 1 маркетплейсу</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Базовые отчеты по продажам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>До 10 товаров</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Управление ценами и стоком</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Доступ к обучающим курсам</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded transition duration-300"> | |
| Начать использование | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Startup Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden relative transition-all duration-300 transform hover:scale-105 animate__animated animate__fadeInUp" data-wow-delay="0.2s"> | |
| <div class="bg-primary text-white text-center py-2 text-sm font-semibold"> | |
| <div class="countdown" data-end-date="2023-12-31T23:59:59"> | |
| До конца акции: <span id="days">15</span> дней <span id="hours">23</span> часа <span id="minutes">59</span> минут | |
| </div> | |
| </div> | |
| <div class="px-6 py-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Стартап</h3> | |
| <span class="px-3 py-1 bg-primary bg-opacity-10 text-primary text-xs font-semibold rounded-full">Рекомендуем</span> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900 line-through mr-2 text-gray-400">4 900 ₽</span> | |
| <span class="text-4xl font-bold text-gray-900">2 900 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Для начинающих и небольших продавцов</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Аналитика по 2 маркетплейсам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Расширенные отчеты</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>До 100 товаров</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Автоматическое управление ценами</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Один обучающий курс на выбор</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-primary hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded transition duration-300 transform hover:scale-105"> | |
| Попробовать 7 дней бесплатно | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden relative transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.3s"> | |
| <div class="bg-primary text-white text-center py-2 text-sm font-semibold"> | |
| <div class="countdown" data-end-date="2023-12-31T23:59:59"> | |
| До конца акции: <span id="days2">15</span> дней <span id="hours2">23</span> часа <span id="minutes2">59</span> минут | |
| </div> | |
| </div> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Продвинутый</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900 line-through mr-2 text-gray-400">9 900 ₽</span> | |
| <span class="text-4xl font-bold text-gray-900">6 900 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Для крупных продавцов и агентств</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Неограниченное количество маркетплейсов</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Полный набор отчетов и аналитики</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Неограниченное количество товаров</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Автоматическое управление ценами и стоком</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Доступ ко всем обучающим курсам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Персональный менеджер</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-300"> | |
| Попробовать 7 дней бесплатно | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tariffs Section --> | |
| <section id="tariffs" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Тарифные планы</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Выберите подходящий тариф для вашего бизнеса</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Same tariff cards as in the try section --> | |
| <!-- Free Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.1s"> | |
| <div class="px-6 py-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Бесплатный</h3> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">0 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Базовые возможности для тестирования сервиса</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Аналитика по 1 маркетплейсу</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Базовые отчеты по продажам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>До 10 товаров</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Управление ценами и стоком</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded transition duration-300"> | |
| Выбрать тариф | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Startup Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden relative transition-all duration-300 transform hover:scale-105 animate__animated animate__fadeInUp" data-wow-delay="0.2s"> | |
| <div class="bg-primary text-white text-center py-2 text-sm font-semibold"> | |
| <div class="countdown" data-end-date="2023-12-31T23:59:59"> | |
| До конца акции: <span id="days3">15</span> дней <span id="hours3">23</span> часа <span id="minutes3">59</span> минут | |
| </div> | |
| </div> | |
| <div class="px-6 py-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Стартап</h3> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900 line-through mr-2 text-gray-400">4 900 ₽</span> | |
| <span class="text-4xl font-bold text-gray-900">2 900 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Для начинающих и небольших продавцов</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Аналитика по 2 маркетплейсам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Расширенные отчеты</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>До 100 товаров</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Автоматическое управление ценами</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Один обучающий курс на выбор</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-primary hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded transition duration-300 transform hover:scale-105"> | |
| Выбрать тариф | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden relative transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.3s"> | |
| <div class="bg-primary text-white text-center py-2 text-sm font-semibold"> | |
| <div class="countdown" data-end-date="2023-12-31T23:59:59"> | |
| До конца акции: <span id="days4">15</span> дней <span id="hours4">23</span> часа <span id="minutes4">59</span> минут | |
| </div> | |
| </div> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Продвинутый</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900 line-through mr-2 text-gray-400">9 900 ₽</span> | |
| <span class="text-4xl font-bold text-gray-900">6 900 ₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Для крупных продавцов и агентств</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Неограниченное количество маркетплейсов</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Полный набор отчетов и аналитики</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Неограниченное количество товаров</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Автоматическое управление ценами и стоком</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Доступ ко всем обучающим курсам</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-2"></i> | |
| <span>Персональный менеджер</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-300"> | |
| Выбрать тариф | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap Section --> | |
| <section id="roadmap" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Дорожная карта развития</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Посмотрите, какие возможности мы добавим в ближайшее время</p> | |
| </div> | |
| <div class="relative pl-8 timeline animate__animated animate__fadeIn"> | |
| <!-- 2023 Q4 --> | |
| <div class="mb-12 timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">IV квартал 2023</h3> | |
| <span class="text-sm bg-primary text-white px-3 py-1 rounded-full">В разработке</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> | |
| <span>Интеграция с маркетплейсом KazanExpress</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> | |
| <span>API для разработчиков</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> | |
| <span>Мобильное приложение для iOS</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 2024 Q1 --> | |
| <div class="mb-12 timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">I квартал 2024</h3> | |
| <span class="text-sm bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Запланировано</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Функция автоматического ценообразования</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Планировщик рекламных кампаний</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Анализ конкурентов по товарным карточкам</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 2024 Q2 --> | |
| <div class="mb-12 timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">II квартал 2024</h3> | |
| <span class="text-sm bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Запланировано</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Система оценки качества товарных карточек</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Прогнозирование продаж на основе AI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Интеграция с CRM системами</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 2024 Q3 --> | |
| <div class="mb-12 timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">III квартал 2024</h3> | |
| <span class="text-sm bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Запланировано</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Кастомные дашборды для агентств</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>API для бухгалтерских систем</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Мультиязычная поддержка</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 2024 Q4 --> | |
| <div class="mb-12 timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">IV квартал 2024</h3> | |
| <span class="text-sm bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Запланировано</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Интеграция с Китайскими маркетплейсами</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Система сквозной аналитики</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 2025 --> | |
| <div class="timeline-item"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 card-hover"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-bold">2025-2026 год</h3> | |
| <span class="text-sm bg-gray-100 text-gray-800 px-3 py-1 rounded-full">В планах</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Расширение функционала AI-ассистента</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Выход на международные рынки</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-gray-300 mr-2 mt-1 text-xs"></i> | |
| <span>Интеграция с дополнительными сервисами для бизнеса</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Наши услуги</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Дополнительные возможности для роста вашего бизнеса</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.1s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-laptop-code text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Индивидуальная доработка платформы</h3> | |
| <p class="text-gray-600 mb-6">Адаптируем сервис под ваши бизнес-процессы с уникальными отчетами и функциями</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.2s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-user-tie text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Консультации экспертов</h3> | |
| <p class="text-gray-600 mb-6">Персональные консультации с категорийными менеджерами, маркетологами и CEO компании</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.3s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Разработка бизнес-плана</h3> | |
| <p class="text-gray-600 mb-6">Создадим пошаговый план для успешного выхода на маркетплейсы с учетом ваших ресурсов</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.4s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-boxes text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Ассортиментная матрица</h3> | |
| <p class="text-gray-600 mb-6">Проанализируем рынок и поможем составить оптимальный ассортимент для вашего бизнеса</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.5s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-ad text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Настройка рекламных кампаний</h3> | |
| <p class="text-gray-600 mb-6">Профессиональная настройка и оптимизация рекламы на маркетплейсах для максимальной окупаемости</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.6s"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-graduation-cap text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Корпоративное обучение</h3> | |
| <p class="text-gray-600 mb-6">Обучение для ваших сотрудников с адаптацией под специфику работы вашей компании</p> | |
| <div class="flex items-center text-primary font-medium"> | |
| <span>Узнать больше</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section id="partners" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Для партнеров</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Специальные условия для агентств, консультантов и центров поддержки бизнеса</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 animate__animated animate__fadeInUp"> | |
| <!-- Partner Benefit 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-percentage text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Выгодные условия</h3> | |
| <p class="text-gray-600">Специальные партнерские тарифы с дополнительной скидкой и увеличенными лимитами</p> | |
| </div> | |
| <!-- Partner Benefit 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-user-plus text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Реферальная программа</h3> | |
| <p class="text-gray-600">Зарабатывайте на привлечении клиентов, получая процент от их платежей в течение года</p> | |
| </div> | |
| <!-- Partner Benefit 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-certificate text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Партнерский статус</h3> | |
| <p class="text-gray-600">Получите доступ к эксклюзивным материалам и привилегиям партнерской программы</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-white rounded-xl shadow-sm overflow-hidden animate__animated animate__fadeIn"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12 bg-primary text-white"> | |
| <h3 class="text-2xl font-bold mb-4">Станьте партнером YouStat</h3> | |
| <p class="mb-6 opacity-90">Используйте наш сервис для своих клиентов, расширяя линейку профессиональных услуг</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-3 opacity-90"></i> | |
| <span>Кастомный брендинг панели управления</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-3 opacity-90"></i> | |
| <span>Техническая и маркетинговая поддержка</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-3 opacity-90"></i> | |
| <span>Доступ к закрытому партнерскому разделу</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <h4 class="text-xl font-bold mb-6">Оставьте заявку</h4> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Ваше имя</label> | |
| <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="company" class="block text-gray-700 text-sm font-medium mb-2">Компания</label> | |
| <input type="text" id="company" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Электронная почта</label> | |
| <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded transition duration-300 transform hover:scale-105"> | |
| Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 animate__animated animate__fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Отзывы наших клиентов</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Узнайте, что говорят о нас пользователи сервиса</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.1s"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary font-bold text-lg mr-4">АС</div> | |
| <div> | |
| <h4 class="font-bold">Александр Смирнов</h4> | |
| <p class="text-gray-500 text-sm">Одежда и аксессуары на WB</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Сервис помог сократить время на анализ продаж в 5 раз. Теперь у меня больше времени на развитие бизнеса, а не на рутинную работу с таблицами."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.2s"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary font-bold text-lg mr-4">ЕК</div> | |
| <div> | |
| <h4 class="font-bold">Екатерина Козлова</h4> | |
| <p class="text-gray-500 text-sm">Детские товары на Ozon</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Благодаря курсам YouStat смогла систематизировать знания и выйти на продажи 1.5 млн в месяц. Особенно ценны рекомендации по наполнению карточек товаров."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover animate__animated animate__fadeInUp" data-wow-delay="0.3s"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary font-bold text-lg mr-4">ДИ</div> | |
| <div> | |
| <h4 class="font-bold">Дмитрий Иванов</h4> | |
| <p class="text-gray-500 text-sm">Агентство по сопровождению</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Как агентству для нас важна возможность давать доступ клиентам к их данным. YouStat предоставляет удобные инструменты для работы с клиентскими аккаунтами."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-primary to-indigo-600 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 animate__animated animate__fadeIn">Готовы увеличить продажи на маркетплейсах?</h2> | |
| <p class="text-xl md:text-2xl opacity-90 mb-8 max-w-3xl mx-auto animate__animated animate__fadeIn">Начните использовать YouStat уже сегодня и получите 7 дней бесплатного доступа</p> | |
| <div class="flex flex-wrap justify-center gap-4 animate__animated animate__fadeIn"> | |
| <a href="#try" class="bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-opacity-90 transition transform hover:scale-105"> | |
| Попробовать бесплатно | |
| </a> | |
| <a href="#services" class="border border-white text-white px-8 py-3 rounded-md font-semibold hover:bg-white hover:bg-opacity-10 transition transform hover:scale-105"> | |
| Заказать консультацию | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xl">YS</div> | |
| <span class="ml-3 text-xl font-bold">YouStat</span> | |
| </div> | |
| <p class="text-gray-400 mb-6">Комплексная платформа для управления продажами и обучения для селлеров маркетплейсов</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-vk text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Продукт</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#hero" class="text-gray-400 hover:text-white transition">Возможности</a></li> | |
| <li><a href="#tariffs" class="text-gray-400 hover:text-white transition">Тарифы</a></li> | |
| <li><a href="#roadmap" class="text-gray-400 hover:text-white transition">Дорожная карта</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Ресурсы</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Блог</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Документация</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Помощь</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Компания</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">О нас</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Контакты</a></li> | |
| <li><a href="#partners" class="text-gray-400 hover:text-white transition">Партнерам</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Вакансии</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 YouStat. Все права защищены.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Политика конфиденциальности</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Условия использования</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| menu.classList.toggle('animate__fadeIn'); | |
| }); | |
| // Countdown timer | |
| function updateCountdown() { | |
| const endDate = new Date('2023-12-31T23:59:59').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = endDate - now; | |
| if (distance < 0) { | |
| document.querySelectorAll('.countdown').forEach(el => { | |
| el.textContent = 'Акция завершена'; | |
| }); | |
| return; | |
| } | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| document.querySelectorAll('.countdown span[id^="days"]').forEach(el => el.textContent = days); | |
| document.querySelectorAll('.countdown span[id^="hours"]').forEach(el => el.textContent = hours); | |
| document.querySelectorAll('.countdown span[id^="minutes"]').forEach(el => el.textContent = minutes); | |
| } | |
| updateCountdown(); | |
| setInterval(updateCountdown, 60000); | |
| // Smooth scroll for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Hide mobile menu after click | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.animate__animated'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| const animationClass = element.classList[1]; | |
| element.classList.add(animationClass); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Vadeam/youstat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |