|
|
<!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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #ffffff; |
|
|
overflow-x: hidden; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 15px #a855f7; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, inset 0 0 5px #a855f7; |
|
|
} |
|
|
|
|
|
.neon-button { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7; |
|
|
} |
|
|
|
|
|
.neon-button:hover { |
|
|
box-shadow: 0 0 15px #a855f7, 0 0 30px #a855f7, inset 0 0 10px #a855f7; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.camera-flash { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: white; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 0.7; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.7)); |
|
|
} |
|
|
|
|
|
.phone-frame { |
|
|
position: relative; |
|
|
border-radius: 20px; |
|
|
border: 8px solid #111; |
|
|
background: #000; |
|
|
overflow: hidden; |
|
|
width: 280px; |
|
|
height: 500px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.phone-frame::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 100px; |
|
|
height: 20px; |
|
|
background: #111; |
|
|
border-radius: 0 0 10px 10px; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.phone-frame::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 120px; |
|
|
height: 5px; |
|
|
background: #222; |
|
|
border-radius: 5px; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.vertical-video-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.vertical-video-container iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.form-input { |
|
|
background-color: rgba(31, 41, 55, 0.7); |
|
|
border: 1px solid #4b5563; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-input:focus { |
|
|
border-color: #a855f7; |
|
|
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.5); |
|
|
background-color: rgba(31, 41, 55, 0.9); |
|
|
} |
|
|
|
|
|
.radio-option { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.radio-option + label { |
|
|
display: block; |
|
|
padding: 12px 16px; |
|
|
margin-bottom: 8px; |
|
|
background-color: rgba(31, 41, 55, 0.7); |
|
|
border: 1px solid #4b5563; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.radio-option:checked + label { |
|
|
background-color: rgba(168, 85, 247, 0.2); |
|
|
border-color: #a855f7; |
|
|
box-shadow: 0 0 0 1px #a855f7; |
|
|
} |
|
|
|
|
|
.radio-option:hover + label { |
|
|
border-color: #a855f7; |
|
|
} |
|
|
|
|
|
.faq-item { |
|
|
margin-bottom: 16px; |
|
|
border-bottom: 1px solid #374151; |
|
|
} |
|
|
|
|
|
.faq-question { |
|
|
padding: 16px 0; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.faq-question::after { |
|
|
content: '+'; |
|
|
position: absolute; |
|
|
right: 0; |
|
|
font-size: 20px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.faq-question.active::after { |
|
|
content: '-'; |
|
|
} |
|
|
|
|
|
.faq-answer { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
background: linear-gradient(145deg, rgba(31, 41, 55, 0.7), rgba(17, 24, 39, 0.7)); |
|
|
border: 1px solid #374151; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
border-color: #a855f7; |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.flash-animation { |
|
|
animation: flash 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes flash { |
|
|
0% { opacity: 0; } |
|
|
10% { opacity: 1; } |
|
|
100% { opacity: 0; } |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fadeIn { |
|
|
animation: fadeIn 1s ease forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative"> |
|
|
|
|
|
<div id="cameraFlash" class="camera-flash"></div> |
|
|
|
|
|
|
|
|
<header class="relative overflow-hidden"> |
|
|
|
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-32 h-32 rounded-full bg-purple-900 opacity-20 blur-3xl"></div> |
|
|
<div class="absolute bottom-0 right-0 w-64 h-64 rounded-full bg-teal-900 opacity-20 blur-3xl"></div> |
|
|
<div class="absolute top-1/4 right-1/4 w-16 h-16 rounded-full bg-purple-600 opacity-30 blur-xl animate-pulse"></div> |
|
|
<div class="absolute bottom-1/3 left-1/3 w-24 h-24 rounded-full bg-teal-600 opacity-30 blur-xl animate-pulse delay-1000"></div> |
|
|
</div> |
|
|
|
|
|
<div class="relative z-10 container mx-auto px-4 py-16 md:py-24"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="mb-6"> |
|
|
<span class="inline-block px-4 py-2 bg-purple-900/30 text-purple-400 rounded-full neon-border text-sm font-semibold mb-4"> |
|
|
НОВЫЙ НАБОР ОТКРЫТ |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 neon-text"> |
|
|
Реалити-шоу от <span class="text-purple-400">Traffic Master</span>:<br> |
|
|
Прокачай себя в арбитраже трафика за 30 дней |
|
|
</h1> |
|
|
|
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Подключайся к реалити, получи обучение, задания и шанс стать частью команды арбитражников. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#application" class="neon-button bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all duration-300 flex items-center justify-center"> |
|
|
Заполнить анкету <i class="fas fa-arrow-down ml-2"></i> |
|
|
</a> |
|
|
<button id="watchTeaser" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all duration-300 flex items-center justify-center border border-gray-700"> |
|
|
<i class="fas fa-play mr-2"></i> Смотреть курс |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900/50 border border-purple-700 flex items-center justify-center mr-3 glow"> |
|
|
<i class="fas fa-users text-purple-400"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">2 участника</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900/50 border border-purple-700 flex items-center justify-center mr-3 glow"> |
|
|
<i class="fas fa-calendar-alt text-purple-400"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">30 дней</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900/50 border border-purple-700 flex items-center justify-center mr-3 glow"> |
|
|
<i class="fas fa-trophy text-purple-400"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Призы и контракты</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 mt-12 lg:mt-0 flex justify-center"> |
|
|
<div class="phone-frame"> |
|
|
<div class="vertical-video-container"> |
|
|
<iframe id="teaserVideo" class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe> |
|
|
</div> |
|
|
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70 z-20" id="videoOverlay"> |
|
|
<button class="w-16 h-16 bg-purple-600 hover:bg-purple-700 rounded-full flex items-center justify-center neon-button"> |
|
|
<i class="fas fa-play text-white text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-gradient-to-b from-gray-900/50 to-gray-900/30 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDUwIDUwIj48cmVjdCB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiMxMTExMTEiLz48cGF0aCBkPSJNMjUgMTVMMTUgNDBMNDAgMjVMMTUgMTBaIiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==');"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text"> |
|
|
Что такое <span class="text-purple-400">Traffic Master Reality</span>? |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-500 mx-auto mb-6"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
2 участника. 30 дней. Полное обучение от профи. Камеры, задания, конкуренция и настоящие кейсы.<br> |
|
|
Это не курс — это прокачка в прямом эфире. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-900/20"> |
|
|
<div class="w-14 h-14 bg-purple-900/30 rounded-full flex items-center justify-center mb-4 neon-border"> |
|
|
<i class="fas fa-video text-purple-400 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Видео-отчёты каждый день</h3> |
|
|
<p class="text-gray-400">Фиксируем прогресс, разбираем ошибки, показываем реальные кейсы</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-900/20"> |
|
|
<div class="w-14 h-14 bg-purple-900/30 rounded-full flex items-center justify-center mb-4 neon-border"> |
|
|
<i class="fas fa-chart-line text-purple-400 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Настоящие кампании и бюджет</h3> |
|
|
<p class="text-gray-400">Работаем с реальными проектами и деньгами, а не на симуляторах</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-900/20"> |
|
|
<div class="w-14 h-14 bg-purple-900/30 rounded-full flex items-center justify-center mb-4 neon-border"> |
|
|
<i class="fas fa-handshake text-purple-400 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Шанс попасть в команду</h3> |
|
|
<p class="text-gray-400">Лучшие участники получат контракты с Traffic Master</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-900/20"> |
|
|
<div class="w-14 h-14 bg-purple-900/30 rounded-full flex items-center justify-center mb-4 neon-border"> |
|
|
<i class="fas fa-user-tie text-purple-400 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Наставники и обратная связь</h3> |
|
|
<p class="text-gray-400">Персональные разборы от экспертов с многолетним опытом</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-gray-900/20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text"> |
|
|
Что получат <span class="text-purple-400">участники</span>? |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-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-3 gap-8"> |
|
|
<div class="bg-gradient-to-br from-gray-900/50 to-gray-900/80 border border-gray-800 rounded-xl p-8 hover:shadow-lg hover:shadow-purple-900/20 transition-all duration-300"> |
|
|
<div class="w-20 h-20 bg-purple-900/30 rounded-full flex items-center justify-center mb-6 mx-auto neon-border"> |
|
|
<i class="fas fa-graduation-cap text-purple-400 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-center mb-4">Полный курс арбитража</h3> |
|
|
<ul class="space-y-3 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-3"></i> |
|
|
<span>От основ до продвинутых стратегий</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-3"></i> |
|
|
<span>Работа с разными вертикалями</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-3"></i> |
|
|
<span>Аналитика и оптимизация</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr-3"></i> |
|
|
<span>Скрипты и шаблоны документов</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-900/50 to-gray-900/80 border border-gray-800 rounded-xl p-8 hover:shadow-lg hover:shadow-purple-900/20 transition-all duration-300"> |
|
|
<div class="w-20 h-20 bg-purple-900/30 rounded-full flex items-center justify-center mb-6 mx-auto neon-border"> |
|
|
<i class="fas fa-chalkboard-teacher text-purple-400 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-center mb=4">Наставничество и разборы</h3> |
|
|
<ul class="space-y=3 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Персональные консультации</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Разбор ошибок в реальном времени</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Доступ к закрытому чату</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Ответы на любые вопросы</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-900/50 to-gray-900/80 border border-gray-800 rounded-xl p=8 hover:shadow-lg hover:shadow-purple-900/20 transition-all duration-300"> |
|
|
<div class="w-20 h-20 bg-purple-900/30 rounded-full flex items-center justify-center mb=6 mx-auto neon-border"> |
|
|
<i class="fas fa-bullhorn text-purple-400 text=3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-center mb=4">Прокачка личного бренда</h3> |
|
|
<ul class="space-y=3 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Контент для соцсетей</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Рекомендации по продвижению</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Возможность стать медиаперсоной</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt=1 mr=3"></i> |
|
|
<span>Подписчики и узнаваемость</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-gradient-to-b from-gray-900/30 to-gray-900/50 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text"> |
|
|
Кто может <span class="text-purple-400">участвовать</span>? |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-500 mb-8"></div> |
|
|
|
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Не важен возраст, опыт и даже наличие ноутбука — главное, чтобы был смартфон, интернет и мотивация. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-check text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Новички</h3> |
|
|
<p class="text-gray-400">Если ты только слышал об арбитраже, но не знаешь с чего начать</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-check text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Опытные</h3> |
|
|
<p class="text-gray-400">Если у тебя уже есть кейсы, но хочешь выйти на новый уровень</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-check text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Все желающие</h3> |
|
|
<p class="text-gray-400">Если ты готов учиться, работать и показывать результаты</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 mt-12 lg:mt-0"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-8 -left-8 w-32 h-32 bg-purple-900/30 rounded-full blur-xl"></div> |
|
|
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-teal-900/30 rounded-full blur-xl"></div> |
|
|
|
|
|
<div class="relative bg-gray-900/50 border border-gray-800 rounded-xl p-8 neon-border"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-center">Тебе подходит, если:</h3> |
|
|
|
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-mobile-alt text-purple-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Есть смартфон и стабильный интернет</span> |
|
|
</li> |
|
|
|
|
|
<li class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-clock text-purple-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Можешь выделять 30-60 минут в день</span> |
|
|
</li> |
|
|
|
|
|
<li class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-video text-purple-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Готов(-а) записывать видео или аудио отчеты</span> |
|
|
</li> |
|
|
|
|
|
<li class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-fire text-purple-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Хочешь реальных результатов, а не только теорию</span> |
|
|
</li> |
|
|
|
|
|
<li class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-purple-900/30 rounded-full flex items-center justify-center mr-4 neon-border flex-shrink-0"> |
|
|
<i class="fas fa-trophy text-purple-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Мечтаешь попасть в команду Traffic Master</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="application" class="py-16 md:py-24 bg-gray-900/30 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDU0IDU0Ij48cmVjdCB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIGZpbGw9IiMxMTExMTEiLz48cGF0aCBkPSJNMjcgMTVMMTcgNDBMNDIgMjVMMTcgMTBaIiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==');"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text"> |
|
|
Заполни <span class="text-purple-400">анкету</span> на участие |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-500 mx-auto mb-6"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Если ты пройдёшь отбор — мы свяжемся с тобой в Telegram в течение 3 дней |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-gray-900/50 border border-gray-800 rounded-xl p-8 neon-border"> |
|
|
<form id="applicationForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="fullName" class="block text-gray-300 mb-2">ФИО</label> |
|
|
<input type="text" id="fullName" name="fullName" required class="form-input w-full px-4 py-3 rounded-lg" placeholder="Чтобы мы знали, как к тебе обращаться"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="age" class="block text-gray-300 mb-2">Возраст</label> |
|
|
<input type="number" id="age" name="age" required class="form-input w-full px-4 py-3 rounded-lg" placeholder="Возраст не влияет на отбор, но помогает понять твою ситуацию"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-gray-300 mb-2">Контактный номер и Telegram</label> |
|
|
<input type="text" id="phone" name="phone" required class="form-input w-full px-4 py-3 rounded-lg" placeholder="Мы свяжемся с тобой, если ты пройдёшь отбор"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="instagram" class="block text-gray-300 mb-2">Ссылка на Instagram (если есть)</label> |
|
|
<input type="text" id="instagram" name="instagram" class="form-input w-full px-4 py-3 rounded-lg" placeholder="Для понимания, как ты общаешься с аудиторией"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="currentActivity" class="block text-gray-300 mb-2">Чем ты занимаешься сейчас? (работа/учёба/ничего)</label> |
|
|
<input type="text" id="currentActivity" name="currentActivity" required class="form-input w-full px-4 py-3 rounded-lg" placeholder="Чтобы понять твой ритм и мотивацию"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="experience" class="block text-gray-300 mb=2">Есть ли опыт в арбитраже или маркетинге?</label> |
|
|
<textarea id="experience" name="experience" rows="3" class="form-input w-full px-4 py-3 rounded-lg" placeholder="Если да — коротко расскажи. Если нет — пиши «нет»"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="motivation" class="block text-gray-300 mb=2">Почему ты хочешь участвовать?</label> |
|
|
<textarea id="motivation" name="motivation" rows="3" required class="form-input w-full px-4 py-3 rounded-lg" placeholder="Свободная форма — чем искреннее, тем лучше"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-300 mb=4">Как ты относишься к публичности?</label> |
|
|
<div class="space-y=3"> |
|
|
<input type="radio" id="publicity1" name="publicity" value="Готов(-а) показывать себя и записывать видео" class="radio-option"> |
|
|
<label for="publicity1" class="block">Готов(-а) показывать себя и записывать видео</label> |
|
|
|
|
|
<input type="radio" id="publicity2" name="publicity" value="Готов(-а) записывать голос и фото, но без лица" class="radio-option"> |
|
|
<label for="publicity2" class="block">Готов(-а) записывать голос и фото, но без лица</label> |
|
|
|
|
|
<input type="radio" id="publicity3" name="publicity" value="Не комфортно быть публично, но хочу участвовать" class="radio-option"> |
|
|
<label for="publicity3" class="block">Не комфортно быть публично, но хочу участвовать</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-300 mb=4">Есть ли у тебя смартфон и интернет?</label> |
|
|
<div class="flex flex-wrap gap=4"> |
|
|
<input type="radio" id="equipment1" name="equipment" value="Да, есть и смартфон, и интернет" class="radio-option"> |
|
|
<label for="equipment1" class="flex=1 min-w-[200px]">Да, есть и смартфон, и интернет</label> |
|
|
|
|
|
<input type="radio" id="equipment2" name="equipment" value="Есть только смартфон" class="radio-option"> |
|
|
<label for="equipment2" class="flex=1 min-w-[200px]">Есть только смартфон</label> |
|
|
|
|
|
<input type="radio" id="equipment3" name="equipment" value="Есть только интернет" class="radio-option"> |
|
|
<label for="equipment3" class="flex=1 min-w-[200px]">Есть только интернет</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-300 mb=4">Можешь ли выделять 30–60 мин в день?</label> |
|
|
<div class="flex flex-wrap gap=4"> |
|
|
<input type="radio" id="time1" name="time" value="Да, легко" class="radio-option"> |
|
|
<label for="time1" class="flex=1 min-w-[200px]">Да, легко</label> |
|
|
|
|
|
<input type="radio" id="time2" name="time" value="Да, но с трудом" class="radio-option"> |
|
|
<label for="time2" class="flex=1 min-w-[200px]">Да, но с трудом</label> |
|
|
|
|
|
<input type="radio" id="time3" name="time" value="Нет, не могу гарантировать" class="radio-option"> |
|
|
<label for="time3" class="flex=1 min-w-[200px]">Нет, не могу гарантировать</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="aboutYourself" class="block text-gray-300 mb=2">Расскажи о себе и почему именно ты должен попасть в реалити</label> |
|
|
<textarea id="aboutYourself" name="aboutYourself" rows="5" required class="form-input w-full px=4 py=3 rounded-lg" placeholder="Развернутый, искренний ответ. Ключевой пункт"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="limitations" class="block text-gray=300 mb=2">Есть ли ограничения, которые мы должны учитывать?</label> |
|
|
<textarea id="limitations" name="limitations" rows="3" class="form-input w-full px=4 py=3 rounded-lg" placeholder="Например: работа, семья, учёба и т.д."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="pt=4"> |
|
|
<button type="submit" class="neon-button w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py=4 px=8 rounded-lg text-lg transition-all duration=300"> |
|
|
Отправить анкету |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div id="successMessage" class="hidden text-center py=8"> |
|
|
<div class="w=20 h=20 bg-purple-900/30 rounded-full flex items-center justify-center mb=6 mx-auto neon-border"> |
|
|
<i class="fas fa-check text-purple-400 text=3xl"></i> |
|
|
</div> |
|
|
<h3 class="text=2xl font-bold mb=4">Спасибо за заявку!</h3> |
|
|
<p class="text-gray-300 max-w-lg mx-auto"> |
|
|
Если ты пройдёшь отбор — мы напишем тебе в Telegram в течение 3 дней.<br> |
|
|
Удачи! |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-gradient-to-b from-gray-900/50 to-gray-900/30 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text"> |
|
|
Отзывы <span class="text-purple-400">участников</span> |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-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="testimonial-card rounded-xl p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center mr-4 neon-border"> |
|
|
<i class="fas fa-user text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Александр, 24 года</h4> |
|
|
<p class="text-sm text-gray-400">Участник 3 потока</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
"Благодаря программе вышел на доход 70к в месяц с нуля. До этого пробовал разные курсы, но только здесь получил реальные навыки." |
|
|
</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
5.0 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card rounded-xl p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center mr-4 neon-border"> |
|
|
<i class="fas fa-user text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Екатерина, 29 лет</h4> |
|
|
<p class="text-sm text-gray-400">Участник 2 потока</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
"После реализации меня взяли в команду Traffic Master. Теперь работаю с крупными клиентами и получаю стабильный доход." |
|
|
</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
5.0 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card rounded-xl p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center mr-4 neon-border"> |
|
|
<i class="fas fa-user text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Дмитрий, 32 года</h4> |
|
|
<p class="text-sm text-gray-400">Участник 1 потока</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
"Реалити-формат — это мощно. Видишь ошибки других, разбираешь свои, получаешь фидбек от экспертов. За месяц прошел путь, на который самому потребовались бы годы." |
|
|
</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
5.0 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-gray-900/20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text"> |
|
|
Наши <span class="text-purple-400">кейсы</span> |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-teal-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-8"> |
|
|
<div class="bg-gradient-to-br from-gray-900/50 to-gray-900/80 border border-gray-800 rounded-xl overflow-hidden"> |
|
|
<div class="relative h-64 bg-gradient-to-r from-purple-900/50 to-teal-900/50 flex items-center justify-center"> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-30"></div> |
|
|
<div class="relative z-10 text-center p- |
|
|
</html> |
