Spaces:

DANILSESE
/

trendspotter

Running

Сайт который говорит тебе о новый трендах и то что еще может набрать много просмотров , а так же он рекомендует какие лучше снимать эффекты под это (тренд, музыку и так далее) СДЕЛАЙ ВСЕ ЯЗЫКИ И ЧТОЮ ПОЛЬЗОВАТЕЛЮ ВЫЛЕЗАЛО ОПОВЕЩЕНИЕ О ТОМ ЧТО 3 ДНЯ БЕСПЛАТНО ,А ПОТОМ 250 РУБЛЕЙ ЗА 30 ДНЕЙ И СДЕЛАЙ ТАК ЧТОБ ОНИ МОГЛИ РЕГИСТРИРОВАТЬСЯ НА САЙТЕ И БАЗУ ДАННЫХ ТОЖЕ СДЕЛАЙ И СДЕЛАЙ ЕЩЕ АКЦЕНТ НА ТИК ТОКЕ И ЮТУЮ ШОРТ.БЕРИ ОСНОВНЫЕ ТРЕНДЫ ОТ ЭТИХ ПЛАТФОРМ - Initial Deployment

28eecf3 verified 10 months ago

Raw

History Blame Contribute Delete

39.3 kB

	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TrendSpotter - Анализ трендов для TikTok и YouTube Shorts</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.trend-card: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);
	}
	.language-selector:hover .language-dropdown {
	display: block;
	}
	.notification-banner {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Notification Banner -->
	<div class="notification-banner bg-red-500 text-white text-center py-2 px-4">
	<p class="font-medium">🔥 3 дня бесплатного доступа! После этого всего 250 рублей за 30 дней. <a href="#pricing" class="underline font-bold">Узнать больше</a></p>
	</div>

	<!-- Navbar -->
	<nav class="bg-white shadow-lg">
	<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">
	<div class="flex-shrink-0 flex items-center">
	<i data-feather="trending-up" class="text-purple-600"></i>
	<span class="ml-2 text-xl font-bold text-gray-900">TrendSpotter</span>
	</div>
	</div>
	<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
	<a href="#trends" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Тренды</a>
	<a href="#features" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Возможности</a>
	<a href="#pricing" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Цены</a>
	<div class="relative language-selector">
	<button class="flex items-center text-gray-900 hover:text-purple-600">
	<i data-feather="globe" class="mr-1"></i>
	<span>Русский</span>
	<i data-feather="chevron-down" class="ml-1"></i>
	</button>
	<div class="language-dropdown hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
	<div class="py-1">
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">English</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Español</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Deutsch</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">中文</a>
	</div>
	</div>
	</div>
	<a href="/login" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Войти</a>
	<a href="/register" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700">Регистрация</a>
	</div>
	<div class="-mr-2 flex items-center md:hidden">
	<button type="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 focus:ring-2 focus:ring-inset focus:ring-purple-500">
	<i data-feather="menu"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<div id="vanta-bg" class="gradient-bg text-white py-20">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
	<div class="mb-12 lg:mb-0" data-aos="fade-right">
	<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">
	Раскройте потенциал вашего контента
	</h1>
	<p class="text-xl text-purple-100 mb-8">
	Получайте актуальные тренды TikTok и YouTube Shorts, рекомендации по музыке, эффектам и стратегиям для вирусного контента.
	</p>
	<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
	<a href="/register" class="bg-white text-purple-600 px-6 py-3 rounded-md text-lg font-medium hover:bg-gray-100 text-center">
	Начать бесплатно
	</a>
	<a href="#trends" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-medium hover:bg-white hover:text-purple-600 text-center">
	Посмотреть тренды
	</a>
	</div>
	</div>
	<div data-aos="fade-left">
	<img src="http://static.photos/technology/1024x576/1" alt="Trending content" class="rounded-lg shadow-2xl">
	</div>
	</div>
	</div>
	</div>

	<!-- Platforms Section -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
	Мы анализируем тренды с ведущих платформ
	</h2>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div class="bg-gray-50 p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
	<div class="flex items-center mb-4">
	<div class="bg-red-100 p-3 rounded-full mr-4">
	<i data-feather="video" class="text-red-500"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900">TikTok Trends</h3>
	</div>
	<p class="text-gray-600 mb-4">
	Самые популярные хэштеги, звуки и эффекты, которые набирают миллионы просмотров прямо сейчас.
	</p>
	<div class="flex flex-wrap gap-2">
	<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">#тренд2023</span>
	<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">#вирусныйконтент</span>
	<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">#лайфхаки</span>
	</div>
	</div>
	<div class="bg-gray-50 p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
	<div class="flex items-center mb-4">
	<div class="bg-blue-100 p-3 rounded-full mr-4">
	<i data-feather="youtube" class="text-blue-500"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900">YouTube Shorts</h3>
	</div>
	<p class="text-gray-600 mb-4">
	Топовые темы и форматы для YouTube Shorts, которые увеличивают охваты и вовлеченность.
	</p>
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">#shorts</span>
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">#моменты</span>
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">#быстрое</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Trends Section -->
	<div id="trends" class="py-12 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
	Актуальные тренды этой недели
	</h2>
	<p class="mt-3 max-w-2xl mx-auto text-gray-500 sm:mt-4" data-aos="fade-up" data-aos-delay="100">
	Обновляется каждые 24 часа на основе анализа миллионов видео
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Trend 1 -->
	<div class="bg-white rounded-lg overflow-hidden shadow-md trend-card transition duration-300" data-aos="fade-up" data-aos-delay="100">
	<img src="http://static.photos/people/640x360/1" alt="Trend example" class="w-full h-48 object-cover">
	<div class="p-6">
	<div class="flex items-center mb-2">
	<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">TikTok</span>
	<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">+124%</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-2">"Мгновенные переходы"</h3>
	<p class="text-gray-600 mb-4">Быстрые смены образов с использованием эффекта "Заморозка"</p>
	<div class="mb-4">
	<p class="text-sm font-medium text-gray-500">Рекомендуемая музыка:</p>
	<p class="text-purple-600">"Savage" - Megan Thee Stallion (ускоренная версия)</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Эффекты:</p>
	<p class="text-gray-700">Time Warp Scan, Green Screen, Zoom Transition</p>
	</div>
	</div>
	</div>

	<!-- Trend 2 -->
	<div class="bg-white rounded-lg overflow-hidden shadow-md trend-card transition duration-300" data-aos="fade-up" data-aos-delay="200">
	<img src="http://static.photos/food/640x360/1" alt="Trend example" class="w-full h-48 object-cover">
	<div class="p-6">
	<div class="flex items-center mb-2">
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">YouTube Shorts</span>
	<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">+89%</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-2">"Рецепты за 30 сек"</h3>
	<p class="text-gray-600 mb-4">Ультра-быстрые кулинарные видео с таймлапс съемкой</p>
	<div class="mb-4">
	<p class="text-sm font-medium text-gray-500">Рекомендуемая музыка:</p>
	<p class="text-purple-600">"Cupid" - Fifty Fifty (инструментальная версия)</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Эффекты:</p>
	<p class="text-gray-700">Speed Ramp, Text Overlay, Stop Motion</p>
	</div>
	</div>
	</div>

	<!-- Trend 3 -->
	<div class="bg-white rounded-lg overflow-hidden shadow-md trend-card transition duration-300" data-aos="fade-up" data-aos-delay="300">
	<img src="http://static.photos/travel/640x360/1" alt="Trend example" class="w-full h-48 object-cover">
	<div class="p-6">
	<div class="flex items-center mb-2">
	<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">TikTok</span>
	<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">+156%</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-2">"До/После путешествия"</h3>
	<p class="text-gray-600 mb-4">Контрастные сравнения до и после посещения мест</p>
	<div class="mb-4">
	<p class="text-sm font-medium text-gray-500">Рекомендуемая музыка:</p>
	<p class="text-purple-600">"I'm Good (Blue)" - David Guetta & Bebe Rexha</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Эффекты:</p>
	<p class="text-gray-700">Split Screen, Transition Effect, Color Grading</p>
	</div>
	</div>
	</div>
	</div>

	<div class="text-center mt-10" data-aos="fade-up">
	<a href="/trends" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700">
	Смотреть все тренды
	<i data-feather="arrow-right" class="ml-2"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Features Section -->
	<div id="features" class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
	Почему TrendSpotter?
	</h2>
	<p class="mt-3 max-w-2xl mx-auto text-gray-500 sm:mt-4" data-aos="fade-up" data-aos-delay="100">
	Все инструменты для создания вирусного контента в одном месте
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Feature 1 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="zap" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Мгновенные уведомления</h3>
	<p class="text-gray-600">
	Получайте оповещения о новых трендах сразу, как только они появляются в топах платформ.
	</p>
	</div>

	<!-- Feature 2 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="200">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="music" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Музыка и звуки</h3>
	<p class="text-gray-600">
	Прямые ссылки на популярные звуки с возможностью предпрослушивания и сохранения.
	</p>
	</div>

	<!-- Feature 3 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="300">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="sliders" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Готовые шаблоны</h3>
	<p class="text-gray-600">
	Коллекция шаблонов CapCut и Premiere Pro для быстрого создания контента.
	</p>
	</div>

	<!-- Feature 4 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="bar-chart-2" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Аналитика трендов</h3>
	<p class="text-gray-600">
	Графики роста и падения трендов с прогнозами на будущее.
	</p>
	</div>

	<!-- Feature 5 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="200">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="clock" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Лучшее время публикации</h3>
	<p class="text-gray-600">
	Рекомендации по оптимальному времени загрузки видео для максимального охвата.
	</p>
	</div>

	<!-- Feature 6 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="300">
	<div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
	<i data-feather="users" class="text-purple-600"></i>
	</div>
	<h3 class="text-lg font-bold text-gray-900 mb-2">Сообщество</h3>
	<p class="text-gray-600">
	Общайтесь с другими создателями, делитесь опытом и находите коллаборации.
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Pricing Section -->
	<div id="pricing" class="py-12 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
	Простые и прозрачные цены
	</h2>
	<p class="mt-3 max-w-2xl mx-auto text-gray-500 sm:mt-4" data-aos="fade-up" data-aos-delay="100">
	Попробуйте бесплатно в течение 3 дней без каких-либо обязательств
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
	<!-- Free Trial -->
	<div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
	<div class="px-6 py-8">
	<h3 class="text-2xl font-bold text-gray-900 mb-2">Бесплатный пробный период</h3>
	<p class="text-gray-600 mb-6">Полный доступ ко всем функциям на 3 дня</p>
	<div class="mb-6">
	<span class="text-4xl font-extrabold text-gray-900">0 ₽</span>
	<span class="text-gray-500">/ 3 дня</span>
	</div>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Доступ ко всем трендам</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Ограниченные уведомления</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Базовые шаблоны</span>
	</li>
	</ul>
	<a href="/register" class="block w-full bg-gray-100 text-gray-800 py-3 px-4 rounded-md text-center font-medium hover:bg-gray-200">
	Начать бесплатно
	</a>
	</div>
	</div>

	<!-- Premium -->
	<div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-purple-500 transform scale-105 z-10" data-aos="fade-up" data-aos-delay="200">
	<div class="bg-purple-500 text-white text-center py-2">
	<p class="text-sm font-medium">САМЫЙ ПОПУЛЯРНЫЙ</p>
	</div>
	<div class="px-6 py-8">
	<h3 class="text-2xl font-bold text-gray-900 mb-2">Премиум</h3>
	<p class="text-gray-600 mb-6">Полный доступ без ограничений</p>
	<div class="mb-6">
	<span class="text-4xl font-extrabold text-gray-900">250 ₽</span>
	<span class="text-gray-500">/ 30 дней</span>
	</div>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Все тренды в реальном времени</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Мгновенные уведомления</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Эксклюзивные шаблоны</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Расширенная аналитика</span>
	</li>
	<li class="flex items-center">
	<i data-feather="check" class="text-green-500 mr-2"></i>
	<span>Приоритетная поддержка</span>
	</li>
	</ul>
	<a href="/register" class="block w-full bg-purple-600 text-white py-3 px-4 rounded-md text-center font-medium hover:bg-purple-700">
	Подписаться
	</a>
	</div>
	</div>
	</div>

	<div class="text-center mt-8 text-gray-500 text-sm" data-aos="fade-up">
	<p>Отменить подписку можно в любой момент. Никаких скрытых платежей.</p>
	</div>
	</div>
	</div>

	<!-- Testimonials -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
	Что говорят наши пользователи
	</h2>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Testimonial 1 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100">
	<div class="flex items-center mb-4">
	<img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold text-gray-900">Анна К.</h4>
	<p class="text-purple-600">TikTok - 450K подписчиков</p>
	</div>
	</div>
	<p class="text-gray-600">
	"Благодаря TrendSpotter мой аккаунт вырос на 200% за месяц. Теперь я всегда в курсе самых горячих трендов."
	</p>
	<div class="flex mt-4">
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	</div>
	</div>

	<!-- Testimonial 2 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="200">
	<div class="flex items-center mb-4">
	<img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold text-gray-900">Максим П.</h4>
	<p class="text-blue-600">YouTube Shorts - 1.2M подписчиков</p>
	</div>
	</div>
	<p class="text-gray-600">
	"Рекомендации по музыке и эффектам просто на другом уровне. Мой последний Shorts набрал 5M просмотров!"
	</p>
	<div class="flex mt-4">
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	</div>
	</div>

	<!-- Testimonial 3 -->
	<div class="bg-gray-50 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="300">
	<div class="flex items-center mb-4">
	<img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold text-gray-900">Елена С.</h4>
	<p class="text-red-600">TikTok - 780K подписчиков</p>
	</div>
	</div>
	<p class="text-gray-600">
	"Сервис полностью окупил себя в первую неделю. Теперь я экономлю часы на поиске трендов и фокусируюсь на творчестве."
	</p>
	<div class="flex mt-4">
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	<i data-feather="star" class="text-yellow-400"></i>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- CTA Section -->
	<div class="gradient-bg text-white py-16">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
	<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl mb-6" data-aos="fade-up">
	Готовы вывести свой контент на новый уровень?
	</h2>
	<p class="text-xl text-purple-100 max-w-3xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">
	Начните бесплатно сегодня и получите доступ ко всем функциям на 3 дня без каких-либо обязательств.
	</p>
	<div data-aos="fade-up" data-aos-delay="200">
	<a href="/register" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-600 bg-white hover:bg-gray-100">
	Зарегистрироваться
	<i data-feather="arrow-right" class="ml-2"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<div class="flex items-center mb-4">
	<i data-feather="trending-up" class="text-purple-500"></i>
	<span class="ml-2 text-xl font-bold">TrendSpotter</span>
	</div>
	<p class="text-gray-400">
	Сервис для анализа трендов TikTok и YouTube Shorts. Помогаем создателям контента расти быстрее.
	</p>
	</div>

	<div>
	<h3 class="text-lg font-semibold mb-4">Навигация</h3>
	<ul class="space-y-2">
	<li><a href="#trends" class="text-gray-400 hover:text-white">Тренды</a></li>
	<li><a href="#features" class="text-gray-400 hover:text-white">Возможности</a></li>
	<li><a href="#pricing" class="text-gray-400 hover:text-white">Цены</a></li>
	<li><a href="/blog" class="text-gray-400 hover:text-white">Блог</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-semibold mb-4">Поддержка</h3>
	<ul class="space-y-2">
	<li><a href="/faq" class="text-gray-400 hover:text-white">FAQ</a></li>
	<li><a href="/contact" class="text-gray-400 hover:text-white">Контакты</a></li>
	<li><a href="/privacy" class="text-gray-400 hover:text-white">Политика конфиденциальности</a></li>
	<li><a href="/terms" class="text-gray-400 hover:text-white">Условия использования</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-semibold mb-4">Социальные сети</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="instagram"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="twitter"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="youtube"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="tiktok"></i>
	</a>
	</div>
	<div class="mt-6">
	<p class="text-gray-400 mb-2">Подписаться на рассылку</p>
	<form class="flex">
	<input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-md text-gray-900 w-full">
	<button type="submit" class="bg-purple-600 text-white px-4 py-2 rounded-r-md hover:bg-purple-700">
	<i data-feather="send"></i>
	</button>
	</form>
	</div>
	</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 text-sm">
	© 2023 TrendSpotter. Все права защищены.
	</p>
	<div class="flex space-x-6 mt-4 md:mt-0">
	<a href="#" class="text-gray-400 hover:text-white text-sm">Политика конфиденциальности</a>
	<a href="#" class="text-gray-400 hover:text-white text-sm">Условия использования</a>
	<a href="#" class="text-gray-400 hover:text-white text-sm">Настройки cookies</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Initialize Vanta.js
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x764ba2,
	backgroundColor: 0x667eea,
	size: 0.8
	});

	// Initialize AOS
	AOS.init({
	duration: 800,
	easing: 'ease-in-out',
	once: true
	});

	// Initialize Feather Icons
	feather.replace();

	// Show notification about free trial
	document.addEventListener('DOMContentLoaded', function() {
	setTimeout(function() {
	const notification = document.createElement('div');
	notification.className = 'fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 max-w-xs z-50 border-l-4 border-purple-500';
	notification.innerHTML = `
	<div class="flex items-start">
	<div class="flex-shrink-0 pt-0.5">
	<i data-feather="alert-circle" class="text-purple-500"></i>
	</div>
	<div class="ml-3">
	<h3 class="text-sm font-medium text-gray-900">Бесплатный доступ</h3>
	<p class="mt-1 text-sm text-gray-500">У вас есть 3 дня бесплатного доступа ко всем функциям TrendSpotter!</p>
	<div class="mt-2 flex space-x-3">
	<button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
	Начать
	</button>
	<button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
	Позже
	</button>
	</div>
	</div>
	<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8">
	<i data-feather="x"></i>
	</button>
	</div>
	`;
	document.body.appendChild(notification);
	feather.replace();

	// Close notification
	notification.querySelector('button[type="button"]').addEventListener('click', function() {
	notification.remove();
	});
	}, 5000);
	});
	</script>
	</body>
	</html>