youstat / index.html
Vadeam's picture
undefined - Initial Deployment
2e92a56 verified
Raw History Blame Contribute Delete
69.1 kB
<!DOCTYPE html>
<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>