Spaces:

timoon811
/

landgame

Running

App Files Files Community

landgame / index.html

timoon811

Add 3 files

23f64ce verified over 1 year ago

Raw

History Blame Contribute Delete

51 kB

	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Квест арбитражника: от новичка до профи</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=Press+Start+2P&family=Roboto:wght@400;500;700&display=swap');

	body {
	font-family: 'Roboto', sans-serif;
	background-color: #0a0a0a;
	color: #e2e2e2;
	scroll-behavior: smooth;
	}

	.pixel-font {
	font-family: 'Press Start 2P', cursive;
	}

	.hero-card {
	transition: all 0.3s ease;
	border: 2px solid transparent;
	}

	.hero-card:hover {
	transform: translateY(-5px);
	border-color: #f59e0b;
	box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
	}

	.checkpoint {
	position: relative;
	transition: all 0.3s ease;
	}

	.checkpoint::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #1e293b;
	border: 3px solid #334155;
	z-index: 2;
	}

	.checkpoint.active::before {
	background-color: #10b981;
	border-color: #047857;
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
	}

	.checkpoint.completed::before {
	background-color: #3b82f6;
	border-color: #1d4ed8;
	}

	.checkpoint::after {
	content: '';
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 80px;
	background-color: #334155;
	z-index: 1;
	}

	.checkpoint:last-child::after {
	display: none;
	}

	.checkpoint.active::after {
	background: linear-gradient(to bottom, #10b981, #334155);
	}

	.checkpoint.completed::after {
	background: linear-gradient(to bottom, #3b82f6, #334155);
	}

	.artifact-card {
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border: 1px solid #334155;
	}

	.artifact-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
	border-color: #10b981;
	}

	.skill-node {
	position: relative;
	transition: all 0.3s ease;
	}

	.skill-node::before {
	content: '';
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 15px;
	background-color: #334155;
	}

	.skill-node.locked {
	filter: grayscale(100%);
	opacity: 0.6;
	}

	.testimonial-card {
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border: 1px solid #334155;
	}

	.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
	border-color: #3b82f6;
	}

	.progress-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #1e293b;
	z-index: 100;
	}

	.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #10b981, #3b82f6);
	width: 0%;
	transition: width 0.3s ease;
	}

	.scroll-indicator {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	animation: bounce 2s infinite;
	}

	@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	transform: translateY(0) translateX(-50%);
	}
	40% {
	transform: translateY(-20px) translateX(-50%);
	}
	60% {
	transform: translateY(-10px) translateX(-50%);
	}
	}

	.glow-text {
	text-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
	}

	.glow-box {
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
	}

	.section {
	min-height: 100vh;
	padding-top: 80px;
	padding-bottom: 80px;
	}

	@media (max-width: 768px) {
	.checkpoint::after {
	height: 100px;
	}

	.pixel-font {
	font-size: 1.2rem;
	}
	}
	</style>
	</head>
	<body>
	<!-- Прогресс бар -->
	<div class="progress-container">
	<div class="progress-bar" id="progressBar"></div>
	</div>

	<!-- Герой -->
	<section id="hero" class="section flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-800 relative overflow-hidden">
	<div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');"></div>

	<div class="container mx-auto px-4 text-center">
	<h1 class="text-4xl md:text-6xl font-bold mb-8 pixel-font glow-text text-green-400">
	<span class="text-yellow-400">КВЕСТ</span> АРБИТРАЖНИКА
	</h1>
	<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
	Пройди путь от новичка до профитного медиабайера и получи все инструменты для заработка
	</p>

	<div class="max-w-4xl mx-auto">
	<h2 class="text-2xl md:text-3xl mb-8 pixel-font text-yellow-400">
	Кто ты сейчас?
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<!-- Новичок -->
	<div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('novice')">
	<div class="text-5xl mb-4">🧑</div>
	<h3 class="text-xl font-bold mb-2">Новичок</h3>
	<p class="text-gray-400">Ничего не знаешь, но хочешь зарабатывать</p>
	<div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
	Выбрать путь
	</div>
	</div>

	<!-- Таргетолог -->
	<div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('targeter')">
	<div class="text-5xl mb-4">🧠</div>
	<h3 class="text-xl font-bold mb-2">Таргетолог</h3>
	<p class="text-gray-400">Запускал рекламу, но не системно</p>
	<div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
	Выбрать путь
	</div>
	</div>

	<!-- Фрилансер -->
	<div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('freelancer')">
	<div class="text-5xl mb-4">🧟</div>
	<h3 class="text-xl font-bold mb-2">Фрилансер</h3>
	<p class="text-gray-400">Есть опыт, но доход нестабильный</p>
	<div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
	Выбрать путь
	</div>
	</div>
	</div>
	</div>

	<div class="scroll-indicator text-gray-400 text-xl animate-bounce hidden md:block">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	</section>

	<!-- Карта пути -->
	<section id="journey" class="section bg-gray-900 py-16">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
	Твой путь к профиту
	</h2>

	<div class="max-w-4xl mx-auto">
	<!-- Прогресс -->
	<div class="flex justify-between items-center mb-12 px-4">
	<div class="text-sm text-gray-400">0%</div>
	<div class="flex-1 mx-4">
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="bg-gradient-to-r from-green-400 to-blue-500 h-2.5 rounded-full" id="journeyProgress" style="width: 0%"></div>
	</div>
	</div>
	<div class="text-sm text-gray-400">100%</div>
	</div>

	<!-- Чекпоинты -->
	<div class="space-y-16">
	<!-- Старт -->
	<div class="checkpoint" id="checkpoint1">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="w-full md:w-1/2 order-2 md:order-1">
	<h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Старт</h3>
	<h4 class="text-xl font-semibold mb-3">Создание аккаунта</h4>
	<p class="text-gray-400 mb-4">
	Регистрируешься в рекламных кабинетах, настраиваешь платежные системы и готовишься к первым запускам.
	</p>
	<div class="flex items-center text-green-400 mb-2">
	<i class="fas fa-check-circle mr-2"></i>
	<span>Навык разблокирован: "Основы арбитража"</span>
	</div>
	<div class="flex items-center text-blue-400">
	<i class="fas fa-tools mr-2"></i>
	<span>Инструмент открыт: "Google Ads"</span>
	</div>
	</div>
	<div class="w-full md:w-1/2 order-1 md:order-2">
	<div class="bg-gray-800 rounded-lg p-4 glow-box">
	<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Создание аккаунта" class="rounded-lg w-full h-auto">
	</div>
	</div>
	</div>
	</div>

	<!-- Первый оффер -->
	<div class="checkpoint" id="checkpoint2">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="w-full md:w-1/2">
	<div class="bg-gray-800 rounded-lg p-4 glow-box">
	<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Первый оффер" class="rounded-lg w-full h-auto">
	</div>
	</div>
	<div class="w-full md:w-1/2">
	<h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 2</h3>
	<h4 class="text-xl font-semibold mb-3">Первый оффер</h4>
	<p class="text-gray-400 mb-4">
	Выбираешь первое предложение, анализируешь конкурентов и определяешь целевую аудиторию.
	</p>
	<div class="flex items-center text-green-400 mb-2">
	<i class="fas fa-check-circle mr-2"></i>
	<span>Навык разблокирован: "Анализ офферов"</span>
	</div>
	<div class="flex items-center text-blue-400">
	<i class="fas fa-tools mr-2"></i>
	<span>Инструмент открыт: "Spy-сервисы"</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Прокладка + креатив -->
	<div class="checkpoint" id="checkpoint3">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="w-full md:w-1/2 order-2 md:order-1">
	<h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 3</h3>
	<h4 class="text-xl font-semibold mb-3">Прокладка + креатив</h4>
	<p class="text-gray-400 mb-4">
	Создаешь цепочку взаимодействия с клиентом от рекламы до продажи, разрабатываешь креативы с высокой конверсией.
	</p>
	<div class="flex items-center text-green-400 mb-2">
	<i class="fas fa-check-circle mr-2"></i>
	<span>Навык разблокирован: "Создание креативов"</span>
	</div>
	<div class="flex items-center text-blue-400">
	<i class="fas fa-tools mr-2"></i>
	<span>Инструмент открыт: "Keitaro"</span>
	</div>
	</div>
	<div class="w-full md:w-1/2 order-1 md:order-2">
	<div class="bg-gray-800 rounded-lg p-4 glow-box">
	<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Прокладка + креатив" class="rounded-lg w-full h-auto">
	</div>
	</div>
	</div>
	</div>

	<!-- Запуск → минус -->
	<div class="checkpoint" id="checkpoint4">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="w-full md:w-1/2">
	<div class="bg-gray-800 rounded-lg p-4 glow-box">
	<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Запуск → минус" class="rounded-lg w-full h-auto">
	</div>
	</div>
	<div class="w-full md:w-1/2">
	<h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 4</h3>
	<h4 class="text-xl font-semibold mb-3">Запуск → минус</h4>
	<p class="text-gray-400 mb-4">
	Первые запуски, первые ошибки и первые потери. Учишься анализировать данные и быстро адаптироваться.
	</p>
	<div class="flex items-center text-green-400 mb-2">
	<i class="fas fa-check-circle mr-2"></i>
	<span>Навык разблокирован: "Анализ статистики"</span>
	</div>
	<div class="flex items-center text-blue-400">
	<i class="fas fa-tools mr-2"></i>
	<span>Инструмент открыт: "Google Analytics"</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Переделка → Профит + ROI -->
	<div class="checkpoint" id="checkpoint5">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="w-full md:w-1/2 order-2 md:order-1">
	<h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Финальный уровень</h3>
	<h4 class="text-xl font-semibold mb-3">Переделка → Профит + ROI</h4>
	<p class="text-gray-400 mb-4">
	Оптимизируешь кампании, находишь рабочие связки и выходишь на стабильный профит с высоким ROI.
	</p>
	<div class="flex items-center text-green-400 mb-2">
	<i class="fas fa-check-circle mr-2"></i>
	<span>Навык разблокирован: "Оптимизация кампаний"</span>
	</div>
	<div class="flex items-center text-blue-400">
	<i class="fas fa-tools mr-2"></i>
	<span>Инструмент открыт: "Библиотека шаблонов"</span>
	</div>
	</div>
	<div class="w-full md:w-1/2 order-1 md:order-2">
	<div class="bg-gray-800 rounded-lg p-4 glow-box">
	<img src="https://images.unsplash.com/photo-1534957753291-64d667ce2927?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Переделка → Профит + ROI" class="rounded-lg w-full h-auto">
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Артефакты -->
	<section id="artifacts" class="section bg-gray-800 py-16">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
	Полученные артефакты
	</h2>
	<p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
	Инструменты и знания, которые ты получишь на этом пути
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Артефакт 1 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-yellow-400">🧩</div>
	<h3 class="text-xl font-bold mb-3">Связка "IN + Gambling + Telegram"</h3>
	<p class="text-gray-400 mb-4">
	Готовая рабочая связка для индийского трафика с конверсией до 8% и чеком $50+
	</p>
	<div class="flex items-center text-sm text-blue-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Эпический</span>
	</div>
	</div>

	<!-- Артефакт 2 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-green-400">💬</div>
	<h3 class="text-xl font-bold mb-3">Скрипт общения с лидами</h3>
	<p class="text-gray-400 mb-4">
	Пошаговый скрипт для работы с возражениями, увеличивающий конверсию в продажу на 35%
	</p>
	<div class="flex items-center text-sm text-purple-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Редкий</span>
	</div>
	</div>

	<!-- Артефакт 3 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-red-400">🎯</div>
	<h3 class="text-xl font-bold mb-3">Пример крео с CTR 17%</h3>
	<p class="text-gray-400 mb-4">
	Набор проверенных креативов с высокой кликабельностью для разных вертикалей
	</p>
	<div class="flex items-center text-sm text-yellow-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Легендарный</span>
	</div>
	</div>

	<!-- Артефакт 4 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-blue-400">📊</div>
	<h3 class="text-xl font-bold mb-3">Чек-лист аудита кампании</h3>
	<p class="text-gray-400 mb-4">
	27 пунктов для проверки и оптимизации рекламной кампании перед масштабированием
	</p>
	<div class="flex items-center text-sm text-green-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Обычный</span>
	</div>
	</div>

	<!-- Артефакт 5 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-purple-400">🔍</div>
	<h3 class="text-xl font-bold mb-3">База источников трафика</h3>
	<p class="text-gray-400 mb-4">
	120+ проверенных источников трафика с реальными цифрами ROI по каждой вертикали
	</p>
	<div class="flex items-center text-sm text-red-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Эпический</span>
	</div>
	</div>

	<!-- Артефакт 6 -->
	<div class="artifact-card rounded-lg overflow-hidden p-6">
	<div class="text-4xl mb-4 text-yellow-400">💰</div>
	<h3 class="text-xl font-bold mb-3">Схема вывода денег</h3>
	<p class="text-gray-400 mb-4">
	Проверенные схемы вывода средств с минимальными комиссиями и без блокировок
	</p>
	<div class="flex items-center text-sm text-purple-400">
	<i class="fas fa-trophy mr-2"></i>
	<span>Редкость: Легендарный</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Дерево навыков -->
	<section id="skills" class="section bg-gray-900 py-16">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
	Дерево навыков
	</h2>
	<p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
	Полная программа обучения, которая превратит тебя в профессионального арбитражника
	</p>

	<div class="max-w-5xl mx-auto">
	<!-- Основы -->
	<div class="text-center mb-12">
	<div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-green-400">
	<div class="text-3xl">📚</div>
	<h3 class="font-bold mt-2">Основы</h3>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
	<div class="skill-node bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🔍</div>
	<h4 class="font-bold mb-2">Терминология</h4>
	<p class="text-sm text-gray-400">CPA, ROI, CR, CTR и другие ключевые метрики</p>
	</div>
	<div class="skill-node bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🌍</div>
	<h4 class="font-bold mb-2">GEO-анализ</h4>
	<p class="text-sm text-gray-400">Выбор лучших стран для запуска</p>
	</div>
	<div class="skill-node bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">📊</div>
	<h4 class="font-bold mb-2">Аналитика</h4>
	<p class="text-sm text-gray-400">Настройка отслеживания и метрик</p>
	</div>
	</div>
	</div>

	<!-- Источники -->
	<div class="text-center mb-12">
	<div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-blue-400">
	<div class="text-3xl">🚀</div>
	<h3 class="font-bold mt-2">Источники</h3>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
	<div class="skill-node bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🔎</div>
	<h4 class="font-bold mb-2">Таргетированная</h4>
	<p class="text-sm text-gray-400">Facebook, Google, TikTok Ads</p>
	</div>
	<div class="skill-node bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">📱</div>
	<h4 class="font-bold mb-2">Push & Pop</h4>
	<p class="text-sm text-gray-400">Работа с рекламными сетями</p>
	</div>
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🤖</div>
	<h4 class="font-bold mb-2">Telegram</h4>
	<p class="text-sm text-gray-400">Методы привлечения трафика</p>
	</div>
	</div>
	</div>

	<!-- Креативы -->
	<div class="text-center mb-12">
	<div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-purple-400">
	<div class="text-3xl">🎨</div>
	<h3 class="font-bold mt-2">Креативы</h3>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🖼️</div>
	<h4 class="font-bold mb-2">Статика</h4>
	<p class="text-sm text-gray-400">Баннеры и изображения</p>
	</div>
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🎥</div>
	<h4 class="font-bold mb-2">Видео</h4>
	<p class="text-sm text-gray-400">Создание видео-креативов</p>
	</div>
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">✏️</div>
	<h4 class="font-bold mb-2">Тексты</h4>
	<p class="text-sm text-gray-400">Цепляющие заголовки</p>
	</div>
	</div>
	</div>

	<!-- Скейл -->
	<div class="text-center">
	<div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-yellow-400">
	<div class="text-3xl">📈</div>
	<h3 class="font-bold mt-2">Скейл</h3>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🔄</div>
	<h4 class="font-bold mb-2">Оптимизация</h4>
	<p class="text-sm text-gray-400">Увеличение ROI</p>
	</div>
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">🧩</div>
	<h4 class="font-bold mb-2">Автоматизация</h4>
	<p class="text-sm text-gray-400">Скрипты и инструменты</p>
	</div>
	<div class="skill-node locked bg-gray-800 rounded-lg p-6">
	<div class="text-2xl mb-2">💼</div>
	<h4 class="font-bold mb-2">Команда</h4>
	<p class="text-sm text-gray-400">Масштабирование бизнеса</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Отзывы -->
	<section id="testimonials" class="section bg-gray-800 py-16">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
	Герои квеста
	</h2>
	<p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
	Реальные люди, которые уже прошли этот путь и получили результаты
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Отзыв 1 -->
	<div class="testimonial-card rounded-lg overflow-hidden p-6">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-2xl font-bold mr-4">А</div>
	<div>
	<h3 class="font-bold">Александр</h3>
	<div class="text-sm text-yellow-400">GEO: IN, BR</div>
	</div>
	</div>
	<div class="mb-4">
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-green-400 mr-2">Gambling</span>
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-blue-400">Dating</span>
	</div>
	<div class="bg-gray-700 rounded-lg p-4 mb-4">
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">Лут:</span>
	<span class="font-bold text-yellow-400">$1,240 за 5 дней</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">ROI:</span>
	<span class="font-bold text-green-400">182%</span>
	</div>
	</div>
	<p class="text-gray-400 mb-4 text-sm">
	"Сначала были только минуса, но после оптимизации связки вышел на стабильный профит. Теперь масштабируюсь на новые GEO."
	</p>
	<button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
	Посмотреть путь
	</button>
	</div>

	<!-- Отзыв 2 -->
	<div class="testimonial-card rounded-lg overflow-hidden p-6">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-2xl font-bold mr-4">Д</div>
	<div>
	<h3 class="font-bold">Дмитрий</h3>
	<div class="text-sm text-yellow-400">GEO: TH, ID</div>
	</div>
	</div>
	<div class="mb-4">
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-red-400 mr-2">Crypto</span>
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-purple-400">Nutra</span>
	</div>
	<div class="bg-gray-700 rounded-lg p-4 mb-4">
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">Лут:</span>
	<span class="font-bold text-yellow-400">14 FTD за неделю</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">ROI:</span>
	<span class="font-bold text-green-400">215%</span>
	</div>
	</div>
	<p class="text-gray-400 mb-4 text-sm">
	"Благодаря курсу нашел нишевые офферы с минимальной конкуренцией. Теперь запускаю только их и получаю стабильный доход."
	</p>
	<button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
	Посмотреть путь
	</button>
	</div>

	<!-- Отзыв 3 -->
	<div class="testimonial-card rounded-lg overflow-hidden p-6">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center text-2xl font-bold mr-4">Е</div>
	<div>
	<h3 class="font-bold">Екатерина</h3>
	<div class="text-sm text-yellow-400">GEO: MX, CO</div>
	</div>
	</div>
	<div class="mb-4">
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-pink-400 mr-2">Dating</span>
	<span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-green-400">Gambling</span>
	</div>
	<div class="bg-gray-700 rounded-lg p-4 mb-4">
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">Лут:</span>
	<span class="font-bold text-yellow-400">$3,700 за месяц</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-sm text-gray-400">ROI:</span>
	<span class="font-bold text-green-400">167%</span>
	</div>
	</div>
	<p class="text-gray-400 mb-4 text-sm">
	"Сначала не верила, что можно зарабатывать на арбитраже. Теперь имею стабильный доход и планирую уйти с основной работы."
	</p>
	<button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
	Посмотреть путь
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Финал -->
	<section id="final" class="section flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-800 relative overflow-hidden">
	<div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');"></div>

	<div class="container mx-auto px-4 text-center">
	<h1 class="text-4xl md:text-6xl font-bold mb-8 pixel-font glow-text text-green-400">
	Ты прошёл путь. <span class="text-yellow-400">Ты в игре.</span>
	</h1>
	<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
	Теперь у тебя есть все инструменты и знания, чтобы начать зарабатывать на арбитраже трафика. Что дальше?
	</p>

	<div class="max-w-2xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
	<button class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition-all transform hover:scale-105">
	🔓 Войти в курс
	</button>

	<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition-all transform hover:scale-105" onclick="showForm()">
	📝 Получить доступ бесплатно
	</button>
	</div>

	<!-- Форма (скрыта по умолчанию) -->
	<div id="accessForm" class="hidden max-w-md mx-auto mt-12 bg-gray-800 rounded-lg p-8">
	<h3 class="text-2xl font-bold mb-6 text-yellow-400">Получить бесплатный доступ</h3>
	<form>
	<div class="mb-4">
	<input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
	</div>
	<div class="mb-4">
	<input type="email" placeholder="Email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
	</div>
	<div class="mb-4">
	<input type="tel" placeholder="Телефон" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
	</div>
	<div class="mb-6">
	<select class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
	<option>Выберите ваш текущий уровень</option>
	<option>Новичок</option>
	<option>Таргетолог</option>
	<option>Фрилансер</option>
	</select>
	</div>
	<button type="submit" class="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
	Отправить заявку
	</button>
	</form>
	</div>
	</div>
	</section>

	<script>
	// Выбор героя
	function selectHero(heroType) {
	// Здесь можно добавить логику для разных путей в зависимости от выбора
	alert(`Вы выбрали путь: ${heroType === 'novice' ? 'Новичок' : heroType === 'targeter' ? 'Таргетолог' : 'Фрилансер'}`);

	// Прокрутка к следующему разделу
	document.getElementById('journey').scrollIntoView({ behavior: 'smooth' });
	}

	// Показать форму
	function showForm() {
	document.getElementById('accessForm').classList.remove('hidden');
	document.getElementById('accessForm').scrollIntoView({ behavior: 'smooth', block: 'center' });
	}

	// Отслеживание прогресса прокрутки
	window.addEventListener('scroll', function() {
	const heroSection = document.getElementById('hero');
	const journeySection = document.getElementById('journey');
	const artifactsSection = document.getElementById('artifacts');
	const skillsSection = document.getElementById('skills');
	const testimonialsSection = document.getElementById('testimonials');
	const finalSection = document.getElementById('final');

	const scrollPosition = window.scrollY;
	const windowHeight = window.innerHeight;
	const documentHeight = document.documentElement.scrollHeight;

	// Общий прогресс страницы
	const progress = (scrollPosition / (documentHeight - windowHeight)) * 100;
	document.getElementById('progressBar').style.width = progress + '%';

	// Прогресс по разделам для прогрессбара в journey
	const journeyProgress = calculateSectionProgress(journeySection);
	document.getElementById('journeyProgress').style.width = journeyProgress + '%';

	// Активация чекпоинтов
	activateCheckpoints();

	// Активация секций
	activateSection(heroSection, scrollPosition);
	activateSection(journeySection, scrollPosition);
	activateSection(artifactsSection, scrollPosition);
	activateSection(skillsSection, scrollPosition);
	activateSection(testimonialsSection, scrollPosition);
	activateSection(finalSection, scrollPosition);
	});

	function calculateSectionProgress(section) {
	const rect = section.getBoundingClientRect();
	const windowHeight = window.innerHeight;
	const sectionHeight = section.offsetHeight;

	// Как далеко верх секции от верха окна
	const sectionTop = rect.top;

	// Если секция выше окна (уже прокручена)
	if (sectionTop < 0) {
	// Сколько прокручено внутри секции
	const scrolled = Math.abs(sectionTop);

	// Не больше чем высота секции
	const progress = Math.min(scrolled, sectionHeight);

	// Процент прокрутки секции
	return (progress / sectionHeight) * 100;
	}

	return 0;
	}

	function activateCheckpoints() {
	const checkpoints = [
	{ id: 'checkpoint1', offset: 500 },
	{ id: 'checkpoint2', offset: 1100 },
	{ id: 'checkpoint3', offset: 1700 },
	{ id: 'checkpoint4', offset: 2300 },
	{ id: 'checkpoint5', offset: 2900 }
	];

	const scrollPosition = window.scrollY;
	const windowHeight = window.innerHeight;

	checkpoints.forEach((checkpoint, index) => {
	const element = document.getElementById(checkpoint.id);
	const elementOffset = checkpoint.offset;

	// Очищаем все классы
	element.classList.remove('active', 'completed');

	// Если текущая позиция прокрутки достигла этого чекпоинта
	if (scrollPosition >= elementOffset - windowHeight / 2) {
	// Помечаем все предыдущие чекпоинты как completed
	for (let i = 0; i < index; i++) {
	document.getElementById(checkpoints[i].id).classList.add('completed');
	}

	// Текущий чекпоинт active
	element.classList.add('active');
	}
	});
	}

	function activateSection(section, scrollPosition) {
	const rect = section.getBoundingClientRect();
	const sectionTop = rect.top;
	const sectionHeight = section.offsetHeight;
	const windowHeight = window.innerHeight;

	// Если секция видна на экране (верх в пределах окна или выше, а низ еще не прокручен)
	if (sectionTop < windowHeight && sectionTop + sectionHeight > 0) {
	section.classList.add('active');
	} else {
	section.classList.remove('active');
	}
	}

	// Инициализация при загрузке
	document.addEventListener('DOMContentLoaded', function() {
	// Активируем первый чекпоинт
	document.getElementById('checkpoint1').classList.add('active');

	// Активируем первую секцию
	document.getElementById('hero').classList.add('active');
	});
	</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/landgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>