Spaces:

timoon811
/

arbpro

Running

App Files Files Community

timoon811 commited on Apr 27, 2025

Commit

08e38cd

verified ·

1 Parent(s): 189a192

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +884 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Arbpro
-emoji: 🚀
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: arbpro
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,884 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&family=Montserrat:wght@400;600&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #d1ff71;
+            --secondary: #111;
+            --dark: #000;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: var(--dark);
+            color: white;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+        }
+        h1, h2, h3, h4 {
+            font-family: 'Poppins', sans-serif;
+            letter-spacing: 0.05em;
+        }
+        .handwritten {
+            font-family: 'Dancing Script', cursive;
+        }
+        .bg-grid {
+            background-image:
+                linear-gradient(rgba(17, 17, 17, 0.9), rgba(0, 0, 0, 0.95)),
+                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d1ff71' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(209, 255, 113, 0.7);
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            color: var(--dark);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(209, 255, 113, 0.4);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px) scale(1.03);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .feature-card {
+            border: 1px solid rgba(209, 255, 113, 0.2);
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            border-color: var(--primary);
+            background-color: rgba(17, 17, 17, 0.7);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(209, 255, 113, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(209, 255, 113, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(209, 255, 113, 0);
+            }
+        }
+        .fade-in {
+            animation: fadeIn 1s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .slide-up {
+            animation: slideUp 0.8s ease-out;
+        }
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .rotate-in {
+            animation: rotateIn 1s ease-out;
+        }
+        @keyframes rotateIn {
+            from {
+                opacity: 0;
+                transform: rotateY(90deg);
+            }
+            to {
+                opacity: 1;
+                transform: rotateY(0);
+            }
+        }
+        .sticky-header {
+            transition: all 0.3s ease;
+        }
+        .sticky-header.scrolled {
+            background-color: rgba(0, 0, 0, 0.9);
+            padding: 10px 0;
+        }
+        .blurred {
+            filter: blur(5px);
+            transition: all 0.5s ease;
+        }
+        .blurred:hover {
+            filter: blur(0);
+        }
+        .count-up {
+            transition: all 1s ease-out;
+        }
+        .signature {
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60" viewBox="0 0 200 60"><path fill="none" stroke="%23d1ff71" stroke-width="2" d="M10,30 Q30,10 50,30 T90,30" /></svg>') no-repeat;
+            background-size: 0% 100%;
+            transition: background-size 1.5s ease-in-out;
+        }
+        .signature.animate {
+            background-size: 100% 100%;
+        }
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        .particle {
+            position: absolute;
+            background-color: rgba(209, 255, 113, 0.5);
+            border-radius: 50%;
+            animation: float linear infinite;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(0) translateX(0);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(20px);
+                opacity: 0;
+            }
+        }
+    </style>
+</head>
+<body class="relative">
+    <!-- Particles Background -->
+    <div class="particles" id="particles"></div>
+    <!-- Sticky Header -->
+    <header class="sticky-header fixed top-0 left-0 w-full z-50 bg-black py-4">
+        <div class="container mx-auto px-6 flex justify-between items-center">
+            <div class="text-2xl font-bold text-primary">
+                <span class="text-white">ARB</span><span class="text-primary">PRO</span>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#about" class="text-white hover:text-primary transition">О курсе</a>
+                <a href="#features" class="text-white hover:text-primary transition">Преимущества</a>
+                <a href="#program" class="text-white hover:text-primary transition">Программа</a>
+                <a href="#reviews" class="text-white hover:text-primary transition">Отзывы</a>
+                <a href="#founder" class="text-white hover:text-primary transition">Основатель</a>
+            </nav>
+            <button class="btn-primary px-6 py-2 rounded-full font-bold text-sm md:text-base">
+                Получить доступ
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center bg-grid relative overflow-hidden">
+        <div class="container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 slide-up">
+                <span class="text-white">Искусство</span> <span class="text-primary glow">зарабатывать</span>
+                <br><span class="text-white">на трафике</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto slide-up" style="animation-delay: 0.3s;">
+                Премиальный курс по арбитражу трафика с нуля до профессионального уровня
+            </p>
+            <button class="btn-primary px-8 py-4 rounded-full font-bold text-lg pulse slide-up" style="animation-delay: 0.6s;">
+                Стать участником
+            </button>
+            <div class="mt-16 slide-up" style="animation-delay: 0.9s;">
+                <div class="inline-flex items-center space-x-4">
+                    <div class="flex -space-x-2">
+                        <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-primary">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-primary">
+                        <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-primary">
+                    </div>
+                    <div class="text-left">
+                        <p class="text-sm text-gray-400">Уже прошли курс:</p>
+                        <p class="font-bold text-primary">1,500+ учеников</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0 fade-in">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-8">
+                        <span class="text-primary">Деньги</span> следуют за трафиком.<br>
+                        Научись <span class="text-primary">управлять</span> ими.
+                    </h2>
+                    <p class="text-gray-300 mb-6 text-lg">
+                        Наш курс — это не просто теория, а проверенная система заработка на арбитраже трафика, которая приносит реальные деньги.
+                    </p>
+                    <p class="text-gray-300 mb-8 text-lg">
+                        За 8 недель интенсивного обучения ты освоишь все инструменты профессионального арбитражника и начнёшь зарабатывать от $500 в месяц.
+                    </p>
+                    <button class="btn-primary px-8 py-3 rounded-full font-bold">
+                        Подробнее о курсе
+                    </button>
+                </div>
+                <div class="md:w-1/2 md:pl-12 rotate-in" style="animation-delay: 0.3s;">
+                    <div class="bg-gray-800 rounded-xl p-1 relative">
+                        <div class="absolute inset-0 rounded-xl bg-primary opacity-20 blur-xl"></div>
+                        <div class="bg-gray-900 rounded-lg overflow-hidden relative p-6">
+                            <div class="flex space-x-2 mb-4">
+                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                            </div>
+                            <div class="bg-black p-4 rounded-lg mb-4">
+                                <div class="flex items-center space-x-2 mb-3">
+                                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                                        <span class="text-black font-bold">$</span>
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-white">Доход за неделю</p>
+                                        <p class="text-sm text-gray-400">12-18 ноября 2023</p>
+                                    </div>
+                                </div>
+                                <div class="flex justify-between items-end">
+                                    <p class="text-3xl font-bold text-primary">$2,847</p>
+                                    <p class="text-green-500 text-sm bg-green-900 bg-opacity-50 px-2 py-1 rounded">+47%</p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 mb-4">
+                                <div class="bg-gray-800 p-2 rounded text-center">
+                                    <p class="text-xs text-gray-400">Трафика</p>
+                                    <p class="font-bold text-primary">14,758</p>
+                                </div>
+                                <div class="bg-gray-800 p-2 rounded text-center">
+                                    <p class="text-xs text-gray-400">CR</p>
+                                    <p class="font-bold text-primary">3.8%</p>
+                                </div>
+                                <div class="bg-gray-800 p-2 rounded text-center">
+                                    <p class="text-xs text-gray-400">EPC</p>
+                                    <p class="font-bold text-primary">$0.19</p>
+                                </div>
+                            </div>
+                            <div class="h-40 bg-gray-800 rounded-lg flex items-center justify-center">
+                                <p class="text-gray-500">График доходности</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Почему выбирают <span class="text-primary">наш курс</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Мы создали систему, которая действительно работает в 2023 году</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="feature-card rounded-xl p-8 fade-in" style="animation-delay: 0.2s;">
+                    <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Скорость</h3>
+                    <p class="text-gray-400">Первые результаты уже через 2 недели после старта обучения</p>
+                </div>
+                <div class="feature-card rounded-xl p-8 fade-in" style="animation-delay: 0.4s;">
+                    <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Доход</h3>
+                    <p class="text-gray-400">Средний доход студентов через 2 месяца — $500-1000/мес</p>
+                </div>
+                <div class="feature-card rounded-xl p-8 fade-in" style="animation-delay: 0.6s;">
+                    <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Гарантия</h3>
+                    <p class="text-gray-400">Возврат денег, если не выйдешь на доход $300+ за первые 3 месяца</p>
+                </div>
+                <div class="feature-card rounded-xl p-8 fade-in" style="animation-delay: 0.8s;">
+                    <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Поддержка</h3>
+                    <p class="text-gray-400">Закрытый чат с кураторами и разбором ваших связок</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- For Whom Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Для кого этот <span class="text-primary">курс</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Неважно, новичок ты или уже работаешь с трафиком — программа подойдёт всем</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.2s;">
+                    <div class="text-5xl font-bold text-primary mb-4">01</div>
+                    <h3 class="text-xl font-bold mb-3">Новички</h3>
+                    <p class="text-gray-400">Кто хочет с нуля освоить прибыльную профессию и выйти на доход от $500/мес</p>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.4s;">
+                    <div class="text-5xl font-bold text-primary mb-4">02</div>
+                    <h3 class="text-xl font-bold mb-3">Фрилансеры</h3>
+                    <p class="text-gray-400">Кто хочет масштабировать доход и выйти на стабильные $2000+ в месяц</p>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.6s;">
+                    <div class="text-5xl font-bold text-primary mb-4">03</div>
+                    <h3 class="text-xl font-bold mb-3">Маркетологи</h3>
+                    <p class="text-gray-400">Кто хочет освоить новые каналы трафика и увеличить прибыль бизнеса</p>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.8s;">
+                    <div class="text-5xl font-bold text-primary mb-4">04</div>
+                    <h3 class="text-xl font-bold mb-3">Предприниматели</h3>
+                    <p class="text-gray-400">Кто хочет научиться привлекать дешёвый трафик для своего бизнеса</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Program Section -->
+    <section id="program" class="py-20 bg-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Программа <span class="text-primary">курса</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">8 недель интенсивного обучения с практикой на реальных проектах</p>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-8 fade-in">
+                    <div class="p-6 md:p-8 border-b border-gray-800">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl md:text-2xl font-bold">Модуль 1. Основы арбитража трафика</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="p-6 md:p-8 pt-0">
+                        <ul class="space-y-4 text-gray-300">
+                            <li class="flex items-start">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Что такое арбитраж трафика и как на нём зарабатывают</span>
+                            </li>
+                            <li class="flex items-start">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Выбор ниши и анализ конкурентов</span>
+                            </li>
+                            <li class="flex items-start">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Регистрация и настройка аккаунтов в рекламных сетях</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-8 blurred hover:filter-none fade-in" style="animation-delay: 0.2s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl md:text-2xl font-bold">Модуль 2. Настройка рекламных кампаний</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-8 blurred hover:filter-none fade-in" style="animation-delay: 0.4s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl md:text-2xl font-bold">Модуль 3. Оптимизация и масштабирование</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden blurred hover:filter-none fade-in" style="animation-delay: 0.6s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl md:text-2xl font-bold">Модуль 4. Автоматизация и создание команды</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-12 text-center fade-in" style="animation-delay: 0.8s;">
+                    <button class="btn-primary px-8 py-4 rounded-full font-bold text-lg mr-4">
+                        Получить пробный урок
+                    </button>
+                    <button class="px-8 py-4 rounded-full font-bold text-lg border border-primary text-primary hover:bg-primary hover:bg-opacity-10 transition">
+                        Полная программа
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Bonuses Section -->
+    <section class="py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Бонусы <span class="text-primary">курса</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Дополнительные материалы, которые ускорят ваш результат</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 card-hover fade-in" style="animation-delay: 0.2s;">
+                    <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Чек-листы</h3>
+                    <p class="text-gray-400 mb-4">Готовые чек-листы по настройке рекламных кампаний и анализу эффективности</p>
+                    <div class="text-primary font-bold">+$200 ценности</div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 border border-primary border-opacity-30 card-hover fade-in" style="animation-delay: 0.4s;">
+                    <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Скрипты</h3>
+                    <p class="text-gray-400 mb-4">Готовые скрипты для переговоров с рекламодателями и арбитражниками</p>
+                    <div class="text-primary font-bold">+$300 ценности</div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 card-hover fade-in" style="animation-delay: 0.6s;">
+                    <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Базы данных</h3>
+                    <p class="text-gray-400 mb-4">Базы проверенных офферов, вебмастеров и рекламных сетей с контактами</p>
+                    <div class="text-primary font-bold">+$500 ценности</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing Section -->
+    <section class="py-20 bg-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Выберите свой <span class="text-primary">тариф</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Инвестиция, которая окупится уже в первый месяц</p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 fade-in" style="animation-delay: 0.2s;">
+                    <h3 class="text-2xl font-bold mb-4">Самостоятельный</h3>
+                    <p class="text-gray-400 mb-6">Для тех, кто хочет освоить арбитраж трафика в своем темпе</p>
+                    <div class="text-4xl font-bold mb-6">$497</div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Доступ к урокам на 6 месяцев</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Закрытый чат с участниками</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Домашние задания без проверки</span>
+                        </li>
+                    </ul>
+                    <button class="w-full bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-bold transition">
+                        Узнать подробности
+                    </button>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 border-2 border-primary relative fade-in" style="animation-delay: 0.4s;">
+                    <div class="absolute top-0 right-0 bg-primary text-black px-4 py-1 text-sm font-bold rounded-bl-lg rounded-tr-lg">
+                        Популярный
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">В команде</h3>
+                    <p class="text-gray-400 mb-6">Полное сопровождение до первых результатов</p>
+                    <div class="text-4xl font-bold mb-6">$997</div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Доступ к урокам на 12 месяцев</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Персональный куратор</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Проверка домашних заданий</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Разбор ваших связок</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Гарантия дохода $300+</span>
+                        </li>
+                    </ul>
+                    <button class="w-full btn-primary px-6 py-3 rounded-lg font-bold">
+                        Стать участником
+                    </button>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 fade-in" style="animation-delay: 0.6s;">
+                    <h3 class="text-2xl font-bold mb-4">VIP</h3>
+                    <p class="text-gray-400 mb-6">Индивидуальное обучение с основателем курса</p>
+                    <div class="text-4xl font-bold mb-6">$2997</div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Пожизненный доступ к материалам</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Личные консультации с Тимуром</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Разбор всех ваших кампаний</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Доступ к закрытым офферам</span>
+                        </li>
+                        <li class="flex items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Гарантия дохода $1000+</span>
+                        </li>
+                    </ul>
+                    <button class="w-full bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-bold transition">
+                        Забронировать место
+                    </button>
+                </div>
+            </div>
+            <div class="mt-12 bg-primary bg-opacity-10 border border-primary border-opacity-30 rounded-lg p-6 max-w-2xl mx-auto text-center fade-in" style="animation-delay: 0.8s;">
+                <p class="text-lg font-bold mb-2">Количество мест ограничено — <span class="text-primary">осталось 3</span></p>
+                <div class="w-full bg-gray-800 rounded-full h-2.5 mt-4">
+                    <div class="bg-primary h-2.5 rounded-full" style="width: 25%"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Reviews Section -->
+    <section id="reviews" class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Отзывы <span class="text-primary">учеников</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Реальные результаты наших студентов</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.2s;">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Александр К.</h4>
+                            <p class="text-sm text-gray-400">Выпускник курса, июнь 2023</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">"После курса вышел на стабильные $800-1200 в месяц. Особенно полезными были модули по оптимизации кампаний и работе с креативами."</p>
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <p class="text-sm text-gray-400 mb-2">Скриншот статистики:</p>
+                        <div class="h-40 bg-gray-700 rounded flex items-center justify-center">
+                            <p class="text-gray-500">$847 за неделю</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.4s;">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Екатерина М.</h4>
+                            <p class="text-sm text-gray-400">Выпускник курса, август 2023</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">"Благодаря курсу смогла уйти с офисной работы. Сейчас зарабатываю в 3 раза больше, чем раньше, при этом работаю из любой точки мира."</p>
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <p class="text-sm text-gray-400 mb-2">Скриншот переписки:</p>
+                        <div class="h-40 bg-gray-700 rounded flex items-center justify-center">
+                            <p class="text-gray-500">Чат с рекламодателем</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.6s;">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Дмитрий С.</h4>
+                            <p class="text-sm text-gray-400">Выпускник курса, май 2023</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">"За 2 месяца вышел на $1500 прибыли. Кураторы реально помогают — без них не добился бы таких результатов так быстро."</p>
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <p class="text-sm text-gray-400 mb-2">Скриншот статистики:</p>
+                        <div class="h-40 bg-gray-700 rounded flex items-center justify-center">
+                            <p class="text-gray-500">$1524 за неделю</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 card-hover fade-in" style="animation-delay: 0.8s;">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Анна Л.</h4>
+                            <p class="text-sm text-gray-400">Выпускник курса, июль 2023</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">"После 3 месяцев обучения масштабировалась до $3000 в месяц. Теперь обучаю свою команду по материалам этого курса."</p>
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <p class="text-sm text-gray-400 mb-2">Скриншот переписки:</p>
+                        <div class="h-40 bg-gray-700 rounded flex items-center justify-center">
+                            <p class="text-gray-500">Чат с вебмастером</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-12 text-center fade-in" style="animation-delay: 1s;">
+                <button class="px-8 py-4 rounded-full font-bold text-lg border border-primary text-primary hover:bg-primary hover:bg-opacity-10 transition">
+                    Смотреть все отзывы
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Founder Section -->
+    <section id="founder" class="py-20 bg-black relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/3 mb-12 md:mb-0 fade-in">
+                    <div class="relative">
+                        <div class="absolute inset-0 bg-primary opacity-20 rounded-xl blur-xl"></div>
+                        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="relative z-10 w-full max-w-md rounded-xl shadow-2xl">
+                    </div>
+                </div>
+                <div class="md:w-2/3 md:pl-16 fade-in" style="animation-delay: 0.3s;">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+                        Основатель курса — <span class="text-primary">Тимур В.</span>
+                    </h2>
+                    <div class="mb-8">
+                        <div class="signature mb-2" id="signature">
+                            <p class="handwritten text-2xl text-primary">Тимур В.</p>
+                        </div>
+                        <p class="text-gray-400">Профессиональный арбитражник с 2016 года</p>
+                    </div>
+                    <div class="space-y-6 text-gray-300 mb-8">
+                        <p>Более 7 лет в арбитраже трафика. Обучил более 1500 студент��в, многие из которых вышли на доход $1000+ в месяц.</p>
+                        <p>Специализация: масштабирование прибыльных кампаний, автоматизация процессов, построение команды.</p>
+                        <p>Личный рекорд: $24,000 прибыли с одной кампании за месяц.</p>
+                    </div>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gray-800 transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-primary">
+                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gray-800 transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-primary">
+                                <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gray-800 transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-primary">
+                                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section class="py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Частые <span class="text-primary">вопросы</span></h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">Ответы на самые популярные вопросы о курсе</p>
+            </div>
+            <div class="max-w-3xl mx-auto">
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-4 fade-in">
+                    <div class="p-6 md:p-8 border-b border-gray-800 cursor-pointer">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl font-bold">Сколько времени нужно уделять курсу?</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="p-6 md:p-8 pt-0 hidden">
+                        <p class="text-gray-300">Рекомендуем уделять курсу 8-10 часов в неделю. Этого достаточно, чтобы за 2 месяца пройти программу и выйти на первые результаты. При этом вы можете двигаться в своем темпе — доступ к материалам остается на 6-12 месяцев в зависимости от тарифа.</p>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-4 fade-in" style="animation-delay: 0.2s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800 cursor-pointer">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl font-bold">Нужен ли начальный бюджет на рекламу?</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="p-6 md:p-8 pt-0 hidden">
+                        <p class="text-gray-300">Да, минимальный бюджет для тестов — $100-200. Этого достаточно, чтобы запустить первые кампании и понять принципы работы. В курсе мы учим, как минимизировать риски и тестировать офферы с минимальными вложениями.</p>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-4 fade-in" style="animation-delay: 0.4s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800 cursor-pointer">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl font-bold">Как быстро можно выйти на доход?</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="p-6 md:p-8 pt-0 hidden">
+                        <p class="text-gray-300">Первые результаты студенты получают через 2-4 недели после старта. Выход на доход $300+ обычно занимает 2-3 месяца. На тарифе с куратором результаты достигаются быстрее за счет индивидуальных разборов и корректировок стратегии.</p>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-xl overflow-hidden mb-4 fade-in" style="animation-delay: 0.6s;">
+                    <div class="p-6 md:p-8 border-b border-gray-800 cursor-pointer">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-xl font-bold">Есть ли гарантия результата?</h3>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ 📄 Премиальное Техническое задание: Сайт курса “Арбитраж Трафика” с иммерсивной анимацией и глубоким визуалом ⸻ 1. Концепция проекта • Идея: Погружение в мир арбитража — как в новую реальность. • Эффект на пользователя: ощущение, что сайт живёт и втягивает в процесс, через плавный скроллинг и анимацию “внутрь”. • Настроение: Свобода, энергия, технологии, деньги, драйв. • Фокус: Эмоции + Премиум + Четкость. ⸻ 2. Визуальная концепция Фон: • Глубокий черный (#000) с переливами тёмно-серого (#111) и мягкими динамическими дымками/градиентами. • Можно использовать эффект движущейся цифровой сетки в фоне (как будто ты движешься сквозь цифры/данные). • Легкие анимированные частицы (очень мелкие, невесомые) — эффект космоса, движения. Цветовые акценты: • Основной акцент: Неоновый лайм (#d1ff71) или кислотный голубой. • Дополнительные акценты: белый, светло-серый для текста. • Кнопки — контрастные: яркий цвет на черном фоне. Шрифты: • Заголовки — жирный Poppins или Neue Montreal, большие буквы, межбуквенное расстояние. • Обычный текст — Montserrat или Inter. • Подпись основателя — имитация рукописного шрифта (Dancing Script, Pacifico). ⸻ 3. Анимация и поведение элементов Общий скроллинг: • Использовать Locomotive Scroll или GSAP ScrollTrigger: • Плавное замедление скролла. • Легкий параллакс на фоне. • При прокрутке блоки словно “раздвигаются” и “затягивают” пользователя вглубь. • Минимум дерганий, максимум текучести. Появление блоков: • Фад-ин + движение снизу вверх или из центра при попадании блока в зону видимости. • Элементы появляются послойно: • Сначала фон, потом текст, потом кнопки и детали. Кнопки: • При наведении: лёгкая вибрация + свечение + микросдвиг вверх на 2-3px. Цифры (например, достижения курса): • Анимация “накрутки” цифр от 0 до значения при попадании в видимую зону. Переходы: • Межблоковые переходы должны быть плавными, как скольжение между слоями. • Нет резких разрывов или “белых дыр” между секциями. ⸻ 4. Структура сайта с описанием анимации и элементов ⸻ 4.1. Header (Фиксированная шапка) • Логотип слева. • Навигация по якорям по центру. • Кнопка “Получить доступ” справа. • При скролле: шапка сужается на 10%, появляется легкая прозрачность фона. ⸻ 4.2. Hero Section (Первый экран) • Эффект: • При заходе: темный фон оживает — всплывающая сетка/дымка двигается назад (эффект туннеля). • Заголовок и подзаголовок всплывают крупными буквами сверху вниз, с небольшой задержкой между строками. • Кнопка “Получить доступ” появляется с пульсацией. • Визуал: • На фоне: полупрозрачные геометрические фигуры (круги, сетка, линии), создающие ощущение глубины. ⸻ 4.3. Блок “О курсе” • Текст появляется как слои, наслаиваясь друг на друга. • Вместо статичной картинки — фон-иллюстрация (например, человек в цифровой среде / деньги, летящие в воздухе). • На фоне: медленное вращение крупн��х еле заметных цифр. ⸻ 4.4. Блок “Почему выбирают нас” (Преимущества) • 4 карточки: • При скролле — карточки “вылетают” с лёгким отскоком. • При наведении — карточка слегка масштабируется (zoom-in 1.05x). • Иконки анимированные: например, ракета загорается, линии роста поднимаются вверх. ⸻ 4.5. Блок “Для кого курс” • 4 карточки в ряд. • При скролле — карточки “раскрываются”, как двери (анимация flip). ⸻ 4.6. Блок “Программа курса” • Первый модуль открыт. • Остальная программа заблюрена с лёгкой пульсацией эффекта “замочной скважины”. • При клике на “Получить пробный урок” — выезжает попап-заявка. ⸻ 4.7. Блок “Бонусы курса” • Бонусы появляются один за другим, как карточки в руке. • При наведении — карточка “вспыхивает” световым эффектом по контуру. ⸻ 4.8. Блок “Тарифы” • Три карточки тарифов: • Центрированное расположение. • Второй тариф (“В команде”) — больше, подсвечен, вокруг слабое свечение. • Кнопки “Узнать цену” с hover-анимацией. • Снизу эффект FOMO: • Текст: “Количество мест ограничено — осталось X” (с мигающим индикатором). • Можно добавить тонкую горизонтальную анимацию заполнения слота (бар-прогресс). ⸻ 4.9. Блок “Отзывы” • Карусель отзывов: • Автоматическая смена отзывов каждые 5 сек. • Отзывы в формате скриншотов, переписок. • Легкий параллакс при листании. ⸻ 4.10. Блок “Основатель курса” • Фото Тимура В. всплывает с fade-in + лёгкая тень на фоне. • Подпись “Тимур В.” — рукописный шрифт с эффектом появления “написания”. • Кнопки на Instagram и YouTube появляются слева направо. ⸻ 4.11. Блок “FAQ” • Аккордеон вопросов: • Плавное раскрытие вниз. • При клике на новый вопрос — плавное закрытие остальных. ⸻ 4.12. Финальный CTA • Блок резко контрастный (например, чёрный фон + яркая анимированная сетка). • Заголовок набирается по буквам. • Кнопка “Стать участником” светится и вибрирует еле заметно. ⸻ 5. Дополнительно • Минимизация CLS (layout shift). • Проверка через Lighthouse: скорость >90%. • SEO-блоки для ключевых запросов (title, description, OpenGraph). ⸻ 📍 Вывод Этот сайт должен: • Погружать пользователя сразу. • Работать как продающая история (story-telling + эмоция). • Подавать курс как премиум-продукт нового поколения. Отлично. Переходим к профессиональному созданию Storyboard для вашего сайта курса по арбитражу трафика. Что будет в этом Сториборде: • Каждый экран сайта — это отдельный кадр. • Для каждого кадра: • Краткое описание, • Как появляется блок (анимация), • Какие элементы участвуют, • Как пользователь взаимодействует со страницей. • Логика перехода между экранами. ⸻ 🎬 Storyboard: Сайт курса “Арбитраж Трафика” ⸻ 🎞️ Кадр 1: Первый экран (Hero Section) Визуал: • Темный фон (живой, чуть движущийся). • Тонкая цифровая сетка уходит вглубь. • Заголовок: “Искусство зарабатывать на трафике” (белый/лаймовый цвет). Анимация: • Фон слегка движется назад. • Заголо��ок появляется сверху вниз построчно (через 0.3 сек задержку). • Подзаголовок всплывает с лёгким fade-in. • Кнопка “Стать участником” пульсирует (плавная анимация масштаба 1x ➔ 1.05x). Переход: • Скроллинг вниз как “проваливание” в следующую секцию. ⸻ 🎞️ Кадр 2: О курсе Визуал: • Темный фон + абстрактная текстура, напоминающая денежные потоки. • Краткий яркий текст: “Деньги следуют за трафиком. Научись управлять ими.” Анимация: • Фон медленно “дышит” (пульсация света). • Текст собирается по словам. • Кнопка “Подробнее” появляется лёгким сдвигом снизу. Переход: • Скроллинг вниз — лёгкое растворение текущего блока в следующем. ⸻ 🎞️ Кадр 3: Почему выбирают нас (Преимущества) Визуал: • 4 карточки преимуществ в 2 ряда. Анимация: • Каждая карточка “выезжает” из центра. • При наведении карточка увеличивается на 5% и подсвечивается контурами. Переход: • Скроллинг вызывает “раздвижение” карточек в стороны и мягкий уход вниз. ⸻ 🎞️ Кадр 4: Для кого курс Визуал: • 4 карточки целевых аудиторий. Анимация: • Карточки вращаются как листки бумаги в разные стороны. • При наведении — карточка поднимается выше других. Переход: • Блок “рассыпается” назад в затемнение, переходя к следующему. ⸻ 🎞️ Кадр 5: Программа курса Визуал: • Список модулей: открытый модуль + замыленная полная программа. • Фон: легкий эффект стеклянной поверхности. Анимация: • Первый модуль “выпадает” на экран. • Замыленная часть пульсирует лёгким светом. • Кнопки “Получить пробный урок” и “Получить полную программу” постепенно проявляются. Переход: • Скроллинг двигает весь блок вверх, оставляя за собой шлейф света. ⸻ 🎞️ Кадр 6: Бонусы курса Визуал: • Бонусы в виде карточек (чек-листы, скрипты, базы). Анимация: • Каждая карточка появляется с лёгким прыжком снизу. • При наведении — светящийся контур вокруг карточки. Переход: • Карточки складываются вместе, образуя портал в следующий блок. ⸻ 🎞️ Кадр 7: Тарифы Визуал: • 3 карточки тарифов на фоне динамической сетки. Анимация: • Карточки проявляются одна за одной. • Второй тариф (“В команде”) подсвечивается ярким свечением. • Кнопки “Узнать цену” с анимацией увеличения при наведении. • FOMO-блок снизу мигает (“Осталось 3 места”). Переход: • Скроллинг затягивает карточки внутрь экрана. ⸻ 🎞️ Кадр 8: Отзывы Визуал: • Карусель скриншотов и коротких отзывов. Анимация: • Лёгкий автоматический скроллинг отзывов вбок. • Отзывы появляются с плавной прозрачностью. • Скриншоты “вытягиваются” из боков. Переход: • Погружение в черный фон перед блоком “Основатель”. ⸻ 🎞️ Кадр 9: Основатель курса Визуал: • Фото Тимура В. • Подпись рукописным шрифтом. • Краткий текст о 1500 учениках. Анимация: • Фото появляется с лёгкой тенью. • Подпись пишется анимированно, будто “рисуется” прямо на глазах. • Кнопки Instagram и YouTube плавно всплывают. Переход: • Фон затемняется, появляется следующий блок. ⸻ 🎞️ Кадр 10: FAQ Визуал: • Список вопросов в виде аккордеона. Анимация: • Вопросы появляются друг за другом при скролле. • При клике — плавное раскрытие/закрытие ответов. ⸻ 🎞️ Кадр 11: Финальный CTA Визуал: • Темный фон с неоновой сеткой. • Заголовок “Ты готов стать мастером трафика?”. • Кнопка “Стать участником курса”. Анимация: • Заголовок проявляется по буквам (эффект набора). • Кнопка увеличивается при наведении, слегка вибрирует. ⸻ 🎞️ Кадр 12: Футер Визуал: • Логотип, меню, соцсети. • Ненавязчивая статичная секция без анимаций. ⸻