Hugging Face's logo

Spaces:
timoon811
/
vebinar-sp
Running

App Files Community
vebinar-sp / index.html
timoon811's picture
timoon811
Add 3 files
b5bbcf7 verified
raw
history blame contribute delete
62.8 kB
 <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Master - Эксклюзивный вебинар по трафику</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: white;
}
.hero-gradient {
background: linear-gradient(45deg, #6e45e2 0%, #89d4cf 100%);
}
.btn-glow {
box-shadow: 0 0 15px rgba(110, 69, 226, 0.7);
transition: all 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 25px rgba(110, 69, 226, 1);
transform: translateY(-3px);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(110, 69, 226, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(110, 69, 226, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(110, 69, 226, 0);
}
}
.float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.countdown-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 10px;
}
.feature-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.1);
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.form-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.form-input:focus {
background: rgba(255, 255, 255, 0.2);
border-color: #6e45e2;
outline: none;
}
.scroll-indicator {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0;
z-index: 9999;
animation: confetti 5s ease-in-out;
}
@keyframes confetti {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(1000px) rotate(720deg);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- Animated Background -->
<div class="fixed top-0 left-0 w-full h-full -z-10">
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-blue-900/20"></div>
<div class="absolute inset-0 opacity-30">
<div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-purple-600 blur-3xl opacity-30 animate-pulse"></div>
<div class="absolute bottom-20 right-20 w-40 h-40 rounded-full bg-blue-600 blur-3xl opacity-30 animate-pulse delay-300"></div>
<div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-indigo-600 blur-3xl opacity-30 animate-pulse delay-700"></div>
</div>
</div>
<!-- Header -->
<header class="relative z-50 py-6 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3">
<i class="fas fa-bolt text-purple-600 text-xl"></i>
</div>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">TRAFFIC MASTER</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-white hover:text-purple-300 transition duration-300">О вебинаре</a>
<a href="#features" class="text-white hover:text-purple-300 transition duration-300">Что вы получите</a>
<a href="#author" class="text-white hover:text-purple-300 transition duration-300">Автор</a>
<a href="#reviews" class="text-white hover:text-purple-300 transition duration-300">Отзывы</a>
</div>
<div class="md:hidden">
<button id="menu-toggle" class="text-white focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden absolute top-20 left-0 w-full bg-gray-900 bg-opacity-95 backdrop-filter backdrop-blur-lg py-4 px-6 rounded-b-lg shadow-xl">
<div class="flex flex-col space-y-4">
<a href="#about" class="text-white hover:text-purple-300 transition duration-300">О вебинаре</a>
<a href="#features" class="text-white hover:text-purple-300 transition duration-300">Что вы получите</a>
<a href="#author" class="text-white hover:text-purple-300 transition duration-300">Автор</a>
<a href="#reviews" class="text-white hover:text-purple-300 transition duration-300">Отзывы</a>
<a href="#register" class="mt-4 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition duration-300">Зарегистрироваться</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative pt-20 pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10">
<div class="text-center">
<div class="inline-block px-4 py-2 mb-6 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm border border-white border-opacity-20">
<span class="text-sm font-semibold text-purple-300">ЭКСКЛЮЗИВНЫЙ ОНЛАЙН-ВЕБИНАР</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">Секреты взрывного трафика</span><br>
<span class="text-white">для вашего бизнеса</span>
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
Узнайте проверенные стратегии привлечения клиентов, которые работают в 2023 году и приносят от 500+ лидов в месяц
</p>
<!-- Countdown Timer -->
<div class="flex justify-center mb-10">
<div class="flex space-x-4">
<div class="countdown-item flex flex-col items-center justify-center w-20 h-20 sm:w-24 sm:h-24">
<span id="days" class="text-3xl sm:text-4xl font-bold text-purple-400">00</span>
<span class="text-sm text-gray-300">Дней</span>
</div>
<div class="countdown-item flex flex-col items-center justify-center w-20 h-20 sm:w-24 sm:h-24">
<span id="hours" class="text-3xl sm:text-4xl font-bold text-purple-400">00</span>
<span class="text-sm text-gray-300">Часов</span>
</div>
<div class="countdown-item flex flex-col items-center justify-center w-20 h-20 sm:w-24 sm:h-24">
<span id="minutes" class="text-3xl sm:text-4xl font-bold text-purple-400">00</span>
<span class="text-sm text-gray-300">Минут</span>
</div>
<div class="countdown-item flex flex-col items-center justify-center w-20 h-20 sm:w-24 sm:h-24">
<span id="seconds" class="text-3xl sm:text-4xl font-bold text-purple-400">00</span>
<span class="text-sm text-gray-300">Секунд</span>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
<button id="register-btn" class="btn-glow pulse px-8 py-4 rounded-full text-white font-bold bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 transition duration-300 transform hover:scale-105">
ЗАПИСАТЬСЯ НА ВЕБИНАР БЕСПЛАТНО
</button>
<a href="#video" class="flex items-center text-white hover:text-purple-300 transition duration-300">
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center mr-3">
<i class="fas fa-play text-purple-400"></i>
</div>
<span>Смотреть промо</span>
</a>
</div>
<div class="mt-16 scroll-indicator">
<a href="#about" class="block w-10 h-10 mx-auto rounded-full border-2 border-white border-opacity-30 flex items-center justify-center text-white hover:text-purple-300 hover:border-purple-300 transition duration-300">
<i class="fas fa-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Floating Elements -->
<div class="absolute top-20 left-10 w-16 h-16 rounded-full bg-purple-500 opacity-20 blur-xl float animation-delay-200"></div>
<div class="absolute top-1/3 right-20 w-24 h-24 rounded-full bg-blue-500 opacity-20 blur-xl float animation-delay-400"></div>
<div class="absolute bottom-20 left-1/4 w-20 h-20 rounded-full bg-indigo-500 opacity-20 blur-xl float animation-delay-600"></div>
</section>
<!-- About Section -->
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50 backdrop-filter backdrop-blur-lg">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">О чем этот вебинар?</h2>
<div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Это не просто теория — это проверенные на практике стратегии, которые уже принесли нашим клиентам тысячи лидов и миллионы рублей
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div class="video-container float">
<iframe id="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<div class="mb-8">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
<i class="fas fa-check text-white"></i>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Конкретные кейсы</h3>
<p class="text-gray-300">Разберем реальные примеры из нашей практики с цифрами и скриншотами</p>
</div>
</div>
<div class="flex items-start mb-6">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
<i class="fas fa-chart-line text-white"></i>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Работающие инструменты</h3>
<p class="text-gray-300">Получите готовые связки и шаблоны, которые можно внедрить сразу после вебинара</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
<i class="fas fa-gem text-white"></i>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-2">Эксклюзивные фишки</h3>
<p class="text-gray-300">Узнаете малоизвестные техники, которые используют топовые маркетологи</p>
</div>
</div>
</div>
<button class="btn-glow px-8 py-4 rounded-full text-white font-bold bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 transition duration-300 transform hover:scale-105 w-full md:w-auto">
<i class="fas fa-ticket-alt mr-2"></i> ЗАБРОНИРОВАТЬ МЕСТО
</button>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Что вы получите на вебинаре?</h2>
<div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Вот лишь часть того, что вы узнаете за эти 2 часа
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-funnel-dollar text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">5+ источников трафика</h3>
<p class="text-gray-300">Разберем не только популярные, но и малоизвестные каналы привлечения клиентов с высокой конверсией</p>
</div>
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-money-bill-wave text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">Увеличение прибыли</h3>
<p class="text-gray-300">Техники повышения среднего чека и частоты покупок, которые увеличат ваш доход на 30-200%</p>
</div>
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-bolt text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">Быстрый результат</h3>
<p class="text-gray-300">Стратегии, которые начинают приносить первых клиентов уже через 24-72 часа после внедрения</p>
</div>
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-tools text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">Готовые инструменты</h3>
<p class="text-gray-300">Шаблоны, чек-листы и инструкции — все для быстрого старта без технических сложностей</p>
</div>
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-chart-pie text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">Анализ и оптимизация</h3>
<p class="text-gray-300">Как правильно анализировать статистику и увеличивать эффективность рекламных кампаний</p>
</div>
<div class="feature-card p-8 rounded-xl border border-white border-opacity-10">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-6">
<i class="fas fa-gift text-2xl text-white"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">Бонусы для участников</h3>
<p class="text-gray-300">Все зарегистрированные получат набор полезных материалов и доступ к закрытому чату</p>
</div>
</div>
<div class="text-center mt-16">
<button class="btn-glow px-8 py-4 rounded-full text-white font-bold bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 transition duration-300 transform hover:scale-105">
<i class="fas fa-arrow-right mr-2"></i> ХОЧУ НА ВЕБИНАР!
</button>
</div>
</div>
</section>
<!-- Author Section -->
<section id="author" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50 backdrop-filter backdrop-blur-lg">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Кто ведет вебинар?</h2>
<div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Опытный практик с реальными кейсами и результатами
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="flex justify-center">
<div class="relative">
<div class="w-64 h-64 sm:w-80 sm:h-80 rounded-full overflow-hidden border-4 border-purple-500 shadow-xl">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Автор вебинара" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-6 -right-6 bg-gradient-to-r from-purple-600 to-blue-500 text-white px-6 py-3 rounded-full shadow-lg">
<div class="flex items-center">
<i class="fas fa-medal text-xl mr-2"></i>
<span class="font-bold">10+ лет опыта</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-2xl md:text-3xl font-bold text-white mb-4">Александр Иванов</h3>
<div class="text-purple-400 mb-6">
<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>
<span class="text-white ml-2">Эксперт по performance-маркетингу</span>
</div>
<div class="space-y-4 mb-8">
<div class="flex">
<div class="flex-shrink-0 text-purple-400 mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<p class="text-gray-300">Основатель агентства TraffMaster с оборотом 50+ млн руб/мес</p>
</div>
<div class="flex">
<div class="flex-shrink-0 text-purple-400 mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<p class="text-gray-300">Запустил 200+ рекламных кампаний с ROI от 300%</p>
</div>
<div class="flex">
<div class="flex-shrink-0 text-purple-400 mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<p class="text-gray-300">Обучил более 5000 предпринимателей и маркетологов</p>
</div>
<div class="flex">
<div class="flex-shrink-0 text-purple-400 mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<p class="text-gray-300">Спикер международных конференций по digital-маркетингу</p>
</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-gray-700">
<div class="flex items-start">
<div class="flex-shrink-0 text-yellow-400 text-2xl mr-3">
<i class="fas fa-quote-left"></i>
</div>
<div>
<p class="text-gray-300 italic mb-4">"Моя цель — дать вам только работающие инструменты, без воды и теории. На вебинаре я поделюсь стратегиями, которые приносят прибыль мне и моим клиентам прямо сейчас."</p>
<p class="text-white font-medium">— Александр Иванов</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews Section -->
<section id="reviews" class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Отзывы участников</h2>
<div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Вот что говорят те, кто уже применяет наши стратегии
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Отзыв 1" class="w-full h-full object-cover">
</div>
<div>
<h4 class="text-white font-bold">Екатерина Смирнова</h4>
<div class="text-yellow-400 text-sm">
<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>
<p class="text-gray-300 mb-4">"После вебинара внедрила одну из стратегий и получила 87 лидов за первую неделю! До этого тратила кучу денег на рекламу без результата."</p>
<div class="text-sm text-purple-400">
<i class="fas fa-calendar-alt mr-2"></i> Участница вебинара от 15.03.2023
</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Отзыв 2" class="w-full h-full object-cover">
</div>
<div>
<h4 class="text-white font-bold">Дмитрий Петров</h4>
<div class="text-yellow-400 text-sm">
<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>
<p class="text-gray-300 mb-4">"Благодаря техникам из вебинара увеличил конверсию сайта с 1.2% до 3.8%. Это принесло +400 000 руб дополнительной прибыли за месяц!"</p>
<div class="text-sm text-purple-400">
<i class="fas fa-calendar-alt mr-2"></i> Участник вебинара от 22.02.2023
</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Отзыв 3" class="w-full h-full object-cover">
</div>
<div>
<h4 class="text-white font-bold">Ольга Козлова</h4>
<div class="text-yellow-400 text-sm">
<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>
<p class="text-gray-300 mb-4">"Стратегия с тикток-рекламой просто взорвала мой бизнес! За 2 недели получила 214 заявок при бюджете всего 8500 руб."</p>
<div class="text-sm text-purple-400">
<i class="fas fa-calendar-alt mr-2"></i> Участница вебинара от 08.01.2023
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="px-6 py-3 rounded-full text-white font-medium bg-gray-800 hover:bg-gray-700 transition duration-300 border border-gray-700">
<i class="fas fa-comments mr-2"></i> Смотреть все отзывы (127+)
</button>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="register" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 to-blue-900">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Готовы увеличить поток клиентов?</h2>
<div class="w-20 h-1 bg-white bg-opacity-70 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Зарегистрируйтесь на бесплатный вебинар прямо сейчас и получите бонусные материалы сразу после регистрации
</p>
</div>
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 sm:p-10 border border-white border-opacity-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-bold text-white mb-6">Дата и время вебинара:</h3>
<div class="space-y-4 mb-8">
<div class="flex items-start">
<div class="flex-shrink-0 text-purple-400 mr-4 mt-1">
<i class="fas fa-calendar-day text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-white">25 октября 2023</h4>
<p class="text-gray-300">Среда</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-purple-400 mr-4 mt-1">
<i class="fas fa-clock text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-white">19:00 по МСК</h4>
<p class="text-gray-300">Продолжительность: 2 часа</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-purple-400 mr-4 mt-1">
<i class="fas fa-laptop text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-white">Онлайн-трансляция</h4>
<p class="text-gray-300">Доступ с любого устройства</p>
</div>
</div>
</div>
<div class="bg-purple-900 bg-opacity-50 rounded-lg p-4 border border-purple-700">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-400 mr-3">
<i class="fas fa-gift text-2xl"></i>
</div>
<div>
<h4 class="text-white font-bold mb-1">Бонус за раннюю регистрацию!</h4>
<p class="text-gray-300 text-sm">Первые 100 участников получат чек-лист "10 способов бесплатного трафика"</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-6">Заполните форму:</h3>
<form id="registration-form" class="space-y-4">
<div>
<input type="text" placeholder="Ваше имя" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<div>
<input type="email" placeholder="Ваш email" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<div>
<input type="tel" placeholder="Ваш телефон" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<div>
<input type="text" placeholder="Ваш бизнес/ниша" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<button type="submit" class="btn-glow w-full px-6 py-4 rounded-full text-white font-bold bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 transition duration-300">
ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
</button>
<p class="text-gray-300 text-sm text-center">
Нажимая на кнопку, вы соглашаетесь с <a href="#" class="text-purple-300 hover:underline">политикой конфиденциальности</a>
</p>
</form>
</div>
</div>
</div>
<div class="text-center mt-12">
<div class="inline-flex items-center px-4 py-2 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm border border-white border-opacity-20">
<i class="fas fa-lock text-purple-300 mr-2"></i>
<span class="text-sm font-medium text-white">Ваши данные защищены и не будут переданы третьим лицам</span>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50 backdrop-filter backdrop-blur-lg">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Частые вопросы</h2>
<div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Ответы на самые популярные вопросы о вебинаре
</p>
</div>
<div class="space-y-4">
<div class="faq-item bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700 overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-700 transition duration-300">
<span class="text-lg font-medium text-white">Сколько стоит участие в вебинаре?</span>
<i class="fas fa-chevron-down text-purple-400 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden px-6 pb-6">
<p class="text-gray-300">Участие в вебинаре абсолютно бесплатное. Мы проводим его с целью поделиться ценными знаниями и помочь бизнесу расти. На вебинаре также будет возможность приобрести расширенную версию обучения со скидкой.</p>
</div>
</div>
<div class="faq-item bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700 overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-700 transition duration-300">
<span class="text-lg font-medium text-white">Что если я не смогу присутствовать онлайн?</span>
<i class="fas fa-chevron-down text-purple-400 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden px-6 pb-6">
<p class="text-gray-300">Все зарегистрированные участники получат запись вебинара на email в течение 24 часов после трансляции. Вы сможете посмотреть ее в удобное время в течение 7 дней.</p>
</div>
</div>
<div class="faq-item bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700 overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-700 transition duration-300">
<span class="text-lg font-medium text-white">Нужны ли специальные знания для участия?</span>
<i class="fas fa-chevron-down text-purple-400 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden px-6 pb-6">
<p class="text-gray-300">Нет, вебинар рассчитан как на новичков, так и на опытных маркетологов. Мы разберем все с нуля, но при этом дадим много практических фишек, которые будут полезны даже профессионалам.</p>
</div>
</div>
<div class="faq-item bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700 overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-700 transition duration-300">
<span class="text-lg font-medium text-white">Какое оборудование нужно для участия?</span>
<i class="fas fa-chevron-down text-purple-400 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden px-6 pb-6">
<p class="text-gray-300">Достаточно любого устройства с доступом в интернет (компьютер, планшет или смартфон) и установленным браузером. Мы пришлем вам ссылку для входа за 1 час до начала трансляции.</p>
</div>
</div>
<div class="faq-item bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700 overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-700 transition duration-300">
<span class="text-lg font-medium text-white">Будут ли материалы после вебинара?</span>
<i class="fas fa-chevron-down text-purple-400 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden px-6 pb-6">
<p class="text-gray-300">Да, все участники получат PDF-презентацию с основными тезисами вебинара, шаблоны и чек-листы для внедрения. Дополнительные материалы будут доступны в личном кабинете.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 to-blue-900">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Остались вопросы?</h2>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Напишите нам в любое время — мы с радостью на них ответим!
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition duration-300">
<i class="fab fa-telegram mr-2"></i> Написать в Telegram
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-300">
<i class="fab fa-whatsapp mr-2"></i> Написать в WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3">
<i class="fas fa-bolt text-purple-600 text-xl"></i>
</div>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">TRAFFIC MASTER</span>
</div>
<p class="text-gray-400 text-sm">
Обучаем эффективному маркетингу с 2015 года. Провели 50+ вебинаров для 10 000+ участников.
</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Навигация</h3>
<ul class="space-y-2">
<li><a href="#about" class="text-gray-400 hover:text-purple-300 transition duration-300">О вебинаре</a></li>
<li><a href="#features" class="text-gray-400 hover:text-purple-300 transition duration-300">Что вы получите</a></li>
<li><a href="#author" class="text-gray-400 hover:text-purple-300 transition duration-300">Автор</a></li>
<li><a href="#reviews" class="text-gray-400 hover:text-purple-300 transition duration-300">Отзывы</a></li>
<li><a href="#register" class="text-gray-400 hover:text-purple-300 transition duration-300">Регистрация</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Контакты</h3>
<ul class="space-y-2">
<li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2 text-purple-400"></i> info@traff-master.com</li>
<li class="flex items-center text-gray-400"><i class="fas fa-phone-alt mr-2 text-purple-400"></i> +7 (999) 123-45-67</li>
<li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2 text-purple-400"></i> Москва, ул. Маркетинговая, 15</li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Соцсети</h3>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition duration-300">
<i class="fab fa-vk"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition duration-300">
<i class="fab fa-telegram"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition duration-300">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition duration-300">
<i class="fab fa-instagram"></i>
</a>
</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-500 text-sm mb-4 md:mb-0">
© 2023 Traffic Master. Все права защищены.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Политика конфиденциальности</a>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Условия использования</a>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Отказ от ответственности</a>
</div>
</div>
</div>
</footer>
<!-- Floating WhatsApp Button -->
<div class="fixed bottom-6 right-6 z-50">
<a href="#" class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-white shadow-xl hover:bg-green-600 transition duration-300 transform hover:scale-110">
<i class="fab fa-whatsapp text-2xl"></i>
</a>
</div>
<!-- Registration Modal -->
<div id="registration-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-900 bg-opacity-75 backdrop-filter backdrop-blur-sm"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="px-6 py-4 bg-gradient-to-r from-purple-900 to-blue-900">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold text-white">Регистрация на вебинар</h3>
<button id="close-modal" class="text-gray-300 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="px-6 py-6 bg-gray-800">
<p class="text-gray-300 mb-6">Заполните форму ниже, чтобы зарегистрироваться на бесплатный вебинар</p>
<form class="space-y-4">
<div>
<input type="text" placeholder="Ваше имя" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<div>
<input type="email" placeholder="Ваш email" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<div>
<input type="tel" placeholder="Ваш телефон" class="form-input w-full px-5 py-3 rounded-lg text-white placeholder-gray-400 focus:placeholder-gray-500">
</div>
<button type="submit" class="btn-glow w-full px-6 py-4 rounded-full text-white font-bold bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 transition duration-300">
ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
</button>
<p class="text-gray-400 text-xs text-center">
Нажимая на кнопку, вы соглашаетесь с <a href="#" class="text-purple-300 hover:underline">политикой конфиденциальности</a>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
// Countdown Timer
function updateCountdown() {
const now = new Date();
const targetDate = new Date('October 25, 2023 19:00:00 GMT+03:00');
const difference = targetDate - now;
if (difference <= 0) {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
return;
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
setInterval(updateCountdown, 1000);
updateCountdown();
// Mobile Menu Toggle
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// FAQ Accordion
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.parentElement.nextElementSibling;
const icon = question.querySelector('i');
answer.classList.toggle('hidden');
icon.classList.toggle('transform');
icon.classList.toggle('rotate-180');
});
});
// Registration Modal
const registerBtn = document.getElementById('register-btn');
const registrationModal = document.getElementById('registration-modal');
const closeModal = document.getElementById('close-modal');
registerBtn.addEventListener('click', () => {
registrationModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Create confetti effect
createConfetti();
});
closeModal.addEventListener('click', () => {
registrationModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
// Close modal when clicking outside
window.addEventListener('click', (e) => {
if (e.target === registrationModal) {
registrationModal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Form submission
const registrationForm = document.getElementById('registration-form');
if (registrationForm) {
registrationForm.addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to your server
// For demo purposes, we'll just show a success message
alert('Спасибо за регистрацию! Мы отправили вам письмо с подтверждением и деталями вебинара.');
// Close modal if open
registrationModal.classList.add('hidden');
document.body.style.overflow = 'auto';
// Reset form
this.reset();
});
}
// Create confetti effect
function createConfetti() {
const colors = ['#6e45e2', '#89d4cf', '#ff6b6b', '#feca57', '#5f27cd', '#1dd1a1'];
for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = Math.random() * 10 + 5 + 'px';
confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
confetti.style.animationDelay = Math.random() * 2 + 's';
document.body.appendChild(confetti);
// Remove confetti after animation
setTimeout(() => {
confetti.remove();
}, 5000);
}
}
// Animate elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.feature-card, .float, .faq-item');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// Set initial state for animated elements
document.querySelectorAll('.feature-card, .float, .faq-item').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
});
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=timoon811/vebinar-sp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>