Hugging Face's logo

Spaces:
timoon811
/
coursesite
Running

App Files Community
timoon811 commited on
Commit
552dd86
·
verified ·
1 Parent(s): 5e4f1ec

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +404 -1145
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,1234 +3,493 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Traffic Master - Курс по арбитражу трафика</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
10
  <style>
11
- @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
12
-
13
- :root {
14
- --neon-green: #00ff9d;
15
- --neon-purple: #bd00ff;
16
- --neon-blue: #00b8ff;
17
- }
18
-
19
- body {
20
- font-family: 'Montserrat', sans-serif;
21
- background-color: #0a0a0a;
22
- color: white;
23
- scroll-behavior: smooth;
24
- }
25
-
26
- .neon-text {
27
- text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
28
- }
29
-
30
- .neon-border {
31
- box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
32
- }
33
-
34
- .gradient-text {
35
- background: linear-gradient(90deg, var(--neon-green), var(--neon-purple));
36
- -webkit-background-clip: text;
37
- background-clip: text;
38
- color: transparent;
39
  }
40
 
41
- .btn-neon {
42
- position: relative;
43
- overflow: hidden;
44
- transition: all 0.3s;
45
- }
46
-
47
- .btn-neon:hover {
48
- box-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green);
49
- transform: translateY(-2px);
50
- }
51
-
52
- .btn-neon::before {
53
- content: '';
54
  position: absolute;
55
- top: 0;
56
- left: -100%;
57
- width: 100%;
58
- height: 100%;
59
- background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.4), transparent);
60
- transition: all 0.5s;
61
  }
62
 
63
- .btn-neon:hover::before {
64
- left: 100%;
65
  }
66
 
67
- .notification {
68
- position: absolute;
69
- background: rgba(20, 20, 20, 0.9);
70
- border-left: 3px solid var(--neon-green);
71
- padding: 10px 15px;
72
- border-radius: 5px;
73
- animation: float 5s infinite ease-in-out;
74
- opacity: 0;
75
- transform: translateY(20px);
76
  }
77
 
78
- @keyframes float {
79
- 0%, 100% { transform: translateY(0); }
80
- 50% { transform: translateY(-10px); }
81
  }
82
 
83
- .planet {
84
- width: 300px;
85
- height: 300px;
86
- background: radial-gradient(circle at 30% 30%, var(--neon-purple), #0a0a0a 70%);
87
- border-radius: 50%;
88
- position: relative;
89
- box-shadow: 0 0 50px var(--neon-purple);
90
- animation: rotate 30s linear infinite;
91
  }
92
 
93
- @keyframes rotate {
94
- 0% { transform: rotate(0deg); }
95
- 100% { transform: rotate(360deg); }
96
  }
97
 
98
- .glow {
99
- position: absolute;
100
- width: 100%;
101
- height: 100%;
102
- border-radius: 50%;
103
- box-shadow: inset 0 0 50px #0a0a0a, inset 0 0 100px #0a0a0a, 0 0 50px var(--neon-purple);
104
  }
105
 
106
- .ring {
107
- position: absolute;
108
- width: 350px;
109
- height: 350px;
110
- border: 2px solid rgba(0, 255, 157, 0.2);
111
- border-radius: 50%;
112
- animation: pulse 4s infinite ease-in-out;
113
  }
114
 
115
- @keyframes pulse {
116
- 0%, 100% { transform: scale(1); opacity: 0.7; }
117
- 50% { transform: scale(1.05); opacity: 0.3; }
118
  }
119
 
120
- .card-hover {
121
- transition: all 0.3s;
 
 
122
  }
123
 
124
- .card-hover:hover {
125
- transform: translateY(-10px);
126
- box-shadow: 0 10px 20px rgba(0, 255, 157, 0.2);
 
 
 
 
 
 
 
127
  }
128
 
129
- .accordion-content {
130
- max-height: 0;
131
- overflow: hidden;
132
- transition: max-height 0.3s ease-out;
133
  }
134
 
135
- .testimonial-card {
136
- perspective: 1000px;
137
- transition: transform 0.5s;
138
- }
139
-
140
- .testimonial-card:hover {
141
- transform: rotateY(10deg);
142
- }
143
-
144
- .blur-card {
145
- filter: blur(3px);
146
- transition: filter 0.3s;
147
- }
148
-
149
- .blur-card:hover {
150
- filter: blur(0);
151
- }
152
-
153
- .fade-in {
154
- animation: fadeIn 1s ease-in forwards;
155
- }
156
-
157
- @keyframes fadeIn {
158
- from { opacity: 0; }
159
- to { opacity: 1; }
160
  }
161
  </style>
162
  </head>
163
- <body class="overflow-x-hidden">
164
- <!-- Header -->
165
- <header class="fixed top-0 left-0 right-0 bg-black bg-opacity-90 z-40 py-4 px-6 border-b border-gray-800">
166
- <div class="container mx-auto flex justify-between items-center">
167
- <div class="flex items-center">
168
- <span class="text-2xl font-bold gradient-text">TRAFFIC MASTER</span>
169
- </div>
170
-
171
- <nav class="hidden md:flex space-x-8">
172
- <a href="#about" class="text-white hover:text-neon-green transition">О нас</a>
173
- <a href="#program" class="text-white hover:text-neon-green transition">Программа</a>
174
- <a href="#results" class="text-white hover:text-neon-green transition">Результаты</a>
175
- <a href="#faq" class="text-white hover:text-neon-green transition">FAQ</a>
176
- <a href="#contacts" class="text-white hover:text-neon-green transition">Контакты</a>
177
- </nav>
178
-
179
- <button class="btn-neon border border-neon-green px-6 py-2 rounded-full text-neon-green font-medium">
180
- Получить доступ
181
- </button>
182
-
183
- <button id="mobile-menu-button" class="md:hidden text-white">
184
- <i class="fas fa-bars text-2xl"></i>
185
- </button>
186
- </div>
187
-
188
- <!-- Mobile Menu -->
189
- <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 right-0 bg-black py-4 px-6 border-t border-gray-800">
190
- <div class="flex flex-col space-y-4">
191
- <a href="#about" class="text-white hover:text-neon-green transition">О нас</a>
192
- <a href="#program" class="text-white hover:text-neon-green transition">Программа</a>
193
- <a href="#results" class="text-white hover:text-neon-green transition">Результаты</a>
194
- <a href="#faq" class="text-white hover:text-neon-green transition">FAQ</a>
195
- <a href="#contacts" class="text-white hover:text-neon-green transition">Контакты</a>
196
- <button class="btn-neon border border-neon-green px-6 py-2 rounded-full text-neon-green font-medium mt-4">
197
- Получить доступ
198
- </button>
199
- </div>
200
- </div>
201
- </header>
202
-
203
- <!-- Hero Section -->
204
- <section class="min-h-screen pt-32 pb-20 relative overflow-hidden">
205
- <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-0">
206
- <div class="planet">
207
- <div class="glow"></div>
208
- </div>
209
- <div class="ring"></div>
210
-
211
- <!-- Notifications -->
212
- <div class="notification" style="top: 20%; left: 10%; animation-delay: 1s;">+500 USDT на кошелек</div>
213
- <div class="notification" style="top: 30%; right: 15%; animation-delay: 2s;">ROI 184%</div>
214
- <div class="notification" style="bottom: 25%; left: 20%; animation-delay: 3s;">Запуск автоворонки</div>
215
- <div class="notification" style="bottom: 15%; right: 10%; animation-delay: 4s;">Новый GEO: США / Германия</div>
216
  </div>
217
 
218
- <div class="container mx-auto px-6 relative z-10">
219
- <div class="max-w-2xl">
220
- <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
221
- <span class="gradient-text">Зарабатывай на трафике</span>
222
- <br>пока другие скроллят ленту
223
- </h1>
224
- <p class="text-xl text-gray-300 mb-10">
225
- Практический курс по арбитражу трафика с фокусом на результат.
226
- Путь от 0 до $10K в месяц под руководством Тимура и команды TMT.
227
- </p>
228
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
229
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg flex-1 sm:flex-none">
230
- Начать обучение
231
- </button>
232
- <button class="btn-neon border border-neon-green text-neon-green px-8 py-4 rounded-full font-bold text-lg flex-1 sm:flex-none">
233
- Смотреть программу
234
- </button>
235
  </div>
 
 
236
  </div>
237
- </div>
238
- </section>
239
-
240
- <!-- About Section -->
241
- <section id="about" class="py-20 bg-gray-900">
242
- <div class="container mx-auto px-6">
243
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center gradient-text">О команде TMT</h2>
244
 
245
- <div class="flex flex-col lg:flex-row items-center gap-12">
246
- <div class="lg:w-1/2 relative">
247
- <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
248
- alt="Тимур - основатель Traffic Master"
249
- class="rounded-xl w-full max-w-md mx-auto border-2 border-neon-green shadow-lg shadow-neon-green/20">
250
-
251
- <div class="absolute -bottom-6 -right-6 bg-black border-2 border-neon-purple p-4 rounded-xl shadow-lg">
252
- <div class="text-center">
253
- <div class="text-3xl font-bold gradient-text">$5M+</div>
254
- <div class="text-sm text-gray-300">общий оборот</div>
255
- </div>
256
- </div>
257
- </div>
258
-
259
- <div class="lg:w-1/2">
260
- <h3 class="text-2xl md:text-3xl font-bold mb-6">Тимур и команда TMT</h3>
261
- <p class="text-gray-300 mb-6">
262
- За последние 3 года мы прошли путь от новичков до топовой команды в Казахстане
263
- с оборотом более $5,000,000. Наш опыт охватывает 5 вертикалей и более 100 успешных связок.
264
- </p>
265
-
266
- <div class="grid grid-cols-2 gap-4 mb-8">
267
- <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-neon-green">
268
- <div class="text-neon-green text-2xl font-bold">100+</div>
269
- <div class="text-gray-300">успешных связок</div>
270
- </div>
271
- <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-neon-purple">
272
- <div class="text-neon-purple text-2xl font-bold">20+</div>
273
- <div class="text-gray-300">специалистов в команде</div>
274
- </div>
275
- <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-neon-blue">
276
- <div class="text-neon-blue text-2xl font-bold">5</div>
277
- <div class="text-gray-300">вертикалей</div>
278
- </div>
279
- <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-neon-green">
280
- <div class="text-neon-green text-2xl font-bold">3</div>
281
- <div class="text-gray-300">года опыта</div>
282
- </div>
283
- </div>
284
-
285
- <div class="bg-black p-6 rounded-xl border border-gray-700">
286
- <div class="flex items-start">
287
- <div class="text-4xl mr-4 text-neon-purple">“</div>
288
- <div>
289
- <p class="italic mb-4">Мы не просто учим теории — мы показываем, как зарабатывать здесь и сейчас.
290
- Наш курс это 80% практики и только 20% теории.</p>
291
- <div class="font-bold gradient-text">Тимур, основатель Traffic Master</div>
292
- </div>
293
- </div>
294
- </div>
295
  </div>
 
 
296
  </div>
297
- </div>
298
- </section>
299
-
300
- <!-- For Whom Section -->
301
- <section class="py-20">
302
- <div class="container mx-auto px-6">
303
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Кому подойдёт курс?</h2>
304
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
305
- Независимо от вашего текущего уровня, курс даст вам все инструменты для старта и масштабирования
306
- </p>
307
 
308
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
309
- <!-- Card 1 -->
310
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
311
- <div class="w-16 h-16 bg-neon-green bg-opacity-10 rounded-full flex items-center justify-center mb-6">
312
- <i class="fas fa-user-graduate text-2xl text-neon-green"></i>
313
- </div>
314
- <h3 class="text-xl font-bold mb-3">Новичкам</h3>
315
- <p class="text-gray-300">
316
- Если вы только слышали об арбитраже и хотите начать с нуля с пошаговой инструкцией
317
- </p>
318
- </div>
319
-
320
- <!-- Card 2 -->
321
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
322
- <div class="w-16 h-16 bg-neon-purple bg-opacity-10 rounded-full flex items-center justify-center mb-6">
323
- <i class="fas fa-hashtag text-2xl text-neon-purple"></i>
324
- </div>
325
- <h3 class="text-xl font-bold mb-3">SMM-специалистам</h3>
326
- <p class="text-gray-300">
327
- Для тех, кто уже работает с трафиком, но хочет монетизировать его напрямую
328
- </p>
329
- </div>
330
-
331
- <!-- Card 3 -->
332
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
333
- <div class="w-16 h-16 bg-neon-blue bg-opacity-10 rounded-full flex items-center justify-center mb-6">
334
- <i class="fas fa-laptop-code text-2xl text-neon-blue"></i>
335
- </div>
336
- <h3 class="text-xl font-bold mb-3">Фрилансерам</h3>
337
- <p class="text-gray-300">
338
- Кто хочет перейти от разовых заказов к стабильному доходу от собственных проектов
339
- </p>
340
  </div>
341
-
342
- <!-- Card 4 -->
343
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
344
- <div class="w-16 h-16 bg-neon-green bg-opacity-10 rounded-full flex items-center justify-center mb-6">
345
- <i class="fas fa-exchange-alt text-2xl text-neon-green"></i>
346
- </div>
347
- <h3 class="text-xl font-bold mb-3">При смене профессии</h3>
348
- <p class="text-gray-300">
349
- Для тех, кто хочет освоить востребованную digital-специальность с нуля
350
- </p>
351
- </div>
352
-
353
- <!-- Card 5 -->
354
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
355
- <div class="w-16 h-16 bg-neon-purple bg-opacity-10 rounded-full flex items-center justify-center mb-6">
356
- <i class="fas fa-ad text-2xl text-neon-purple"></i>
357
- </div>
358
- <h3 class="text-xl font-bold mb-3">Медиабайерам</h3>
359
- <p class="text-gray-300">
360
- Кто хочет научиться работать с новыми вертикалями и увеличить ROI
361
- </p>
362
- </div>
363
-
364
- <!-- Card 6 -->
365
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
366
- <div class="w-16 h-16 bg-neon-blue bg-opacity-10 rounded-full flex items-center justify-center mb-6">
367
- <i class="fas fa-users text-2xl text-neon-blue"></i>
368
- </div>
369
- <h3 class="text-xl font-bold mb-3">Будущим тимлидам</h3>
370
- <p class="text-gray-300">
371
- Для тех, кто планирует масштабироваться и строить собственную команду
372
- </p>
373
- </div>
374
- </div>
375
-
376
- <div class="text-center mt-16">
377
- <h3 class="text-2xl font-bold mb-6">Ты нашёл себя? Пора начинать!</h3>
378
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg">
379
- Выбрать тариф
380
- </button>
381
  </div>
382
  </div>
383
- </section>
384
-
385
- <!-- Learning Process -->
386
- <section class="py-20 bg-gray-900">
387
- <div class="container mx-auto px-6">
388
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Как проходит обучение?</h2>
389
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
390
- Практическая система, которая действительно приводит к результату
391
- </p>
392
-
393
- <div class="flex flex-col lg:flex-row items-center gap-12 mb-16">
394
- <div class="lg:w-1/2">
395
- <div class="bg-black p-1 rounded-xl inline-block mb-6">
396
- <div class="bg-neon-green text-black px-4 py-1 rounded-lg font-bold inline-block">1</div>
397
- </div>
398
- <h3 class="text-2xl font-bold mb-4">Пошаговые видеоуроки</h3>
399
- <p class="text-gray-300 mb-6">
400
- Доступ к платформе 24/7 с более чем 40 видеоуроками, разбитыми на модули.
401
- Каждый урок — конкретный шаг к результату.
402
- </p>
403
- <ul class="space-y-3">
404
- <li class="flex items-start">
405
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
406
- <span>Доступ с любого устройства</span>
407
- </li>
408
- <li class="flex items-start">
409
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
410
- <span>Пожизненный доступ к обновлениям</span>
411
- </li>
412
- <li class="flex items-start">
413
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
414
- <span>Скорость обучения — под ваш ритм</span>
415
- </li>
416
- </ul>
417
- </div>
418
- <div class="lg:w-1/2">
419
- <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
420
- <div class="bg-gray-900 h-8 flex items-center px-3 border-b border-gray-700">
421
- <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
422
- <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
423
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
424
- </div>
425
- <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"
426
- alt="Платформа обучения"
427
- class="w-full h-auto">
428
- </div>
429
  </div>
 
 
430
  </div>
431
 
432
- <div class="flex flex-col lg:flex-row items-center gap-12 mb-16">
433
- <div class="lg:w-1/2 order-2 lg:order-1">
434
- <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
435
- <div class="bg-gray-900 h-8 flex items-center px-3 border-b border-gray-700">
436
- <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
437
- <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
438
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
439
- </div>
440
- <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
441
- alt="Практические задания"
442
- class="w-full h-auto">
443
- </div>
444
- </div>
445
- <div class="lg:w-1/2 order-1 lg:order-2">
446
- <div class="bg-black p-1 rounded-xl inline-block mb-6">
447
- <div class="bg-neon-purple text-black px-4 py-1 rounded-lg font-bold inline-block">2</div>
448
- </div>
449
- <h3 class="text-2xl font-bold mb-4">Практические задания</h3>
450
- <p class="text-gray-300 mb-6">
451
- После каждого урока — конкретное задание, которое приближает вас к первым деньгам.
452
- Проверка и обратная связь от кураторов.
453
- </p>
454
- <ul class="space-y-3">
455
- <li class="flex items-start">
456
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
457
- <span>Трекер прогресса</span>
458
- </li>
459
- <li class="flex items-start">
460
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
461
- <span>Чек-листы и шаблоны</span>
462
- </li>
463
- <li class="flex items-start">
464
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
465
- <span>Разбор ошибок</span>
466
- </li>
467
- </ul>
468
- </div>
469
  </div>
470
 
471
- <div class="flex flexocol lg:flex-row items-center gap-12">
472
- <div class="lg:w-1/2">
473
- <div class="bg-black p-1 rounded-xl inline-block mb-6">
474
- <div class="bg-neon-blue text-black px-4 py-1 rounded-lg font-bold inline-block">3</div>
475
- </div>
476
- <h3 class="text-2xl font-bold mb-4">Поддержка и комьюнити</h3>
477
- <p class="text-gray-300 mb-6">
478
- Закрытый чат с участниками курса, еженедельные Zoom-созвоны с разборами,
479
- ответы на вопросы в режиме 24/7.
480
- </p>
481
- <ul class="space-y-3">
482
- <li class="flex items-start">
483
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
484
- <span>Telegram-чат с участниками</span>
485
- </li>
486
- <li class="flex items-start">
487
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
488
- <span>Разборы кейсов</span>
489
- </li>
490
- <li class="flex items-start">
491
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
492
- <span>База знаний и обновлений</span>
493
- </li>
494
- </ul>
495
- </div>
496
- <div class="lg:w-1/2">
497
- <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
498
- <div class="bg-gray-900 h-8 flex items-center px-3 border-b border-gray-700">
499
- <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
500
- <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
501
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
502
  </div>
503
- <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
504
- alt="Комьюнити"
505
- class="w-full h-auto">
 
 
 
 
 
506
  </div>
507
  </div>
508
- </div>
509
-
510
- <div class="text-center mt-16">
511
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg">
512
- Начать обучение
513
  </button>
514
  </div>
515
  </div>
516
- </section>
517
-
518
- <!-- Course Format -->
519
- <section class="py-20">
520
- <div class="container mx-auto px-6">
521
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Формат курса</h2>
522
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
523
- Все, что нужно ��ля старта и первых результатов
524
- </p>
525
-
526
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
527
- <!-- Card 1 -->
528
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700 transition-all duration-300 h-full">
529
- <div class="w-20 h-20 bg-neon-green bg-opacity-10 rounded-full flex items-center justify-center mb-6 mx-auto">
530
- <i class="fas fa-play-circle text-4xl text-neon-green"></i>
531
- </div>
532
- <h3 class="text-2xl font-bold mb-4 text-center">Видеоуроки</h3>
533
- <p class="text-gray-300 mb-6 text-center">
534
- 40+ пошаговых уроков с практическими кейсами и разборами
535
- </p>
536
- <ul class="space-y-3 mb-8">
537
- <li class="flex items-start">
538
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
539
- <span>Доступ 24/7 с любого устройства</span>
540
- </li>
541
- <li class="flex items-start">
542
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
543
- <span>Пожизненные обновления</span>
544
- </li>
545
- <li class="flex items-start">
546
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
547
- <span>Скорость обучения под вас</span>
548
- </li>
549
- </ul>
550
- </div>
551
-
552
- <!-- Card 2 -->
553
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-neon-purple border-opacity-50 transition-all duration-300 h-full transform scale-105">
554
- <div class="w-20 h-20 bg-neon-purple bg-opacity-10 rounded-full flex items-center justify-center mb-6 mx-auto">
555
- <i class="fas fa-video text-4xl text-neon-purple"></i>
556
- </div>
557
- <h3 class="text-2xl font-bold mb-4 text-center">Вебинары и Zoom</h3>
558
- <p class="text-gray-300 mb-6 text-center">
559
- 12+ живых вебинаров и разборов с ответами на вопросы
560
- </p>
561
- <ul class="space-y-3 mb-8">
562
- <li class="flex items-start">
563
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
564
- <span>Разборы реальных кейсов</span>
565
- </li>
566
- <li class="flex items-start">
567
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
568
- <span>Ответы на вопросы в прямом эфире</span>
569
- </li>
570
- <li class="flex items-start">
571
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
572
- <span>Записи всех вебинаров</span>
573
- </li>
574
- </ul>
575
  </div>
576
-
577
- <!-- Card 3 -->
578
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700 transition-all duration-300 h-full">
579
- <div class="w-20 h-20 bg-neon-blue bg-opacity-10 rounded-full flex items-center justify-center mb-6 mx-auto">
580
- <i class="fas fa-tasks text-4xl text-neon-blue"></i>
581
- </div>
582
- <h3 class="text-2xl font-bold mb-4 text-center">Практика и тесты</h3>
583
- <p class="text-gray-300 mb-6 text-center">
584
- 30+ практических заданий и тестов для закрепления материала
585
- </p>
586
- <ul class="space-y-3 mb-8">
587
- <li class="flex items-start">
588
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
589
- <span>Проверка кураторами</span>
590
- </li>
591
- <li class="flex items-start">
592
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
593
- <span>Трекер прогресса</span>
594
- </li>
595
- <li class="flex items-start">
596
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
597
- <span>Чек-листы и шаблоны</span>
598
- </li>
599
- </ul>
600
  </div>
601
  </div>
602
- </div>
603
- </section>
604
-
605
- <!-- Program Section -->
606
- <section id="program" class="py-20 bg-gray-900">
607
- <div class="container mx-auto px-6">
608
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Программа курса</h2>
609
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
610
- 8 модулей, которые проведут вас от основ до первых тысяч долларов
611
- </p>
612
 
613
- <div class="max-w-3xl mx-auto">
614
- <!-- Module 1 -->
615
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden">
616
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
617
- <div class="flex items-center">
618
- <div class="w-10 h-10 rounded-full bg-neon-green bg-opacity-10 flex items-center justify-center mr-4">
619
- <span class="text-neon-green font-bold">1</span>
620
- </div>
621
- <h3 class="text-xl font-bold">Введение в арбитраж трафика</h3>
622
- </div>
623
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
624
- </button>
625
- <div class="accordion-content bg-gray-800">
626
- <div class="p-6 pt-0">
627
- <ul class="space-y-3">
628
- <li class="flex items-start">
629
- <i class="fas fa-play text-xs text-neon-green mt-1 mr-2"></i>
630
- <span>Основные понятия и терминология</span>
631
- </li>
632
- <li class="flex items-start">
633
- <i class="fas fa-play text-xs text-neon-green mt-1 mr-2"></i>
634
- <span>Как работает арбитраж трафика в 2024</span>
635
- </li>
636
- <li class="flex items-start">
637
- <i class="fas fa-play text-xs text-neon-green mt-1 mr-2"></i>
638
- <span>Разбор популярных вертикалей</span>
639
- </li>
640
- <li class="flex items-start">
641
- <i class="fas fa-play text-xs text-neon-green mt-1 mr-2"></i>
642
- <span>Инструменты арбитражника</span>
643
- </li>
644
- </ul>
645
- </div>
646
- </div>
647
- </div>
648
-
649
- <!-- Module 2 -->
650
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden">
651
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
652
- <div class="flex items-center">
653
- <div class="w-10 h-10 rounded-full bg-neon-purple bg-opacity-10 flex items-center justify-center mr-4">
654
- <span class="text-neon-purple font-bold">2</span>
655
- </div>
656
- <h3 class="text-xl font-bold">Выбор ниши и оффера</h3>
657
- </div>
658
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
659
- </button>
660
- <div class="accordion-content bg-gray-800">
661
- <div class="p-6 pt-0">
662
- <ul class="space-y-3">
663
- <li class="flex items-start">
664
- <i class="fas fa-play text-xs text-neon-purple mt-1 mr-2"></i>
665
- <span>Как выбрать прибыльную нишу</span>
666
- </li>
667
- <li class="flex items-start">
668
- <i class="fas fa-play text-xs text-neon-purple mt-1 mr-2"></i>
669
- <span>Анализ конкурентов</span>
670
- </li>
671
- <li class="flex items-start">
672
- <i class="fas fa-play text-xs text-neon-purple mt-1 mr-2"></i>
673
- <span>Работа с офферами</span>
674
- </li>
675
- <li class="flex items-start">
676
- <i class="fas fa-play text-xs text-neon-purple mt-1 mr-2"></i>
677
- <span>Тестирование гипотез</span>
678
- </li>
679
- </ul>
680
- </div>
681
- </div>
682
  </div>
683
-
684
- <!-- Module 3 (Blurred) -->
685
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
686
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
687
- <div class="flex items-center">
688
- <div class="w-10 h-10 rounded-full bg-neon-blue bg-opacity-10 flex items-center justify-center mr-4">
689
- <span class="text-neon-blue font-bold">3</span>
690
- </div>
691
- <h3 class="text-xl font-bold">Настройка связки</h3>
692
- </div>
693
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
694
- </button>
695
  </div>
696
-
697
- <!-- Module 4 (Blurred) -->
698
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
699
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
700
- <div class="flex items-center">
701
- <div class="w-10 h-10 rounded-full bg-neon-green bg-opacity-10 flex items-center justify-center mr-4">
702
- <span class="text-neon-green font-bold">4</span>
703
- </div>
704
- <h3 class="text-xl font-bold">Трафик: источники и масштабирование</h3>
705
- </div>
706
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
707
- </button>
708
- </div>
709
-
710
- <!-- Module 5 (Blurred) -->
711
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
712
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
713
- <div class="flex items-center">
714
- <div class="w-10 h-10 rounded-full bg-neon-purple bg-opacity-10 flex items-center justify-center mr-4">
715
- <span class="text-neon-purple font-bold">5</span>
716
- </div>
717
- <h3 class="text-xl font-bold">Оптимизация и ROI</h3>
718
- </div>
719
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
720
- </button>
721
- </div>
722
-
723
- <!-- Module 6 (Blurred) -->
724
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
725
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
726
- <div class="flex items-center">
727
- <div class="w-10 h-10 rounded-full bg-neon-blue bg-opacity-10 flex items-center justify-center mr-4">
728
- <span class="text-neon-blue font-bold">6</span>
729
- </div>
730
- <h3 class="text-xl font-bold">Автоматизация процессов</h3>
731
- </div>
732
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
733
- </button>
734
- </div>
735
-
736
- <!-- Module 7 (Blurred) -->
737
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
738
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
739
- <div class="flex items-center">
740
- <div class="w-10 h-10 rounded-full bg-neon-green bg-opacity-10 flex items-center justify-center mr-4">
741
- <span class="text-neon-green font-bold">7</span>
742
- </div>
743
- <h3 class="text-xl font-bold">Масштабирование и команда</h3>
744
- </div>
745
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
746
- </button>
747
- </div>
748
-
749
- <!-- Module 8 (Blurred) -->
750
- <div class="mb-6 border border-gray-700 rounded-xl overflow-hidden blur-card">
751
- <button class="accordion-btn w-full flex justify-between items-center p-6 bg-gray-800 hover:bg-gray-700 transition">
752
- <div class="flex items-center">
753
- <div class="w-10 h-10 rounded-full bg-neon-purple bg-opacity-10 flex items-center justify-center mr-4">
754
- <span class="text-neon-purple font-bold">8</span>
755
- </div>
756
- <h3 class="text-xl font-bold">Дополнительные инструменты и фишки</h3>
757
- </div>
758
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
759
- </button>
760
  </div>
761
  </div>
762
 
763
- <div class="text-center mt-12">
764
- <button class="btn-neon border border-neon-green text-neon-green px-8 py-4 rounded-full font-bold text-lg">
765
- Открыть всю программу
766
- </button>
767
  </div>
 
 
 
 
 
768
  </div>
769
- </section>
770
-
771
- <!-- Testimonials -->
772
- <section class="py-20">
773
- <div class="container mx-auto px-6">
774
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Отзывы учеников</h2>
775
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
776
- Реальные результаты наших студентов
 
 
777
  </p>
778
 
779
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
780
- <!-- Testimonial 1 -->
781
- <div class="testimonial-card bg-gray-900 rounded-xl p-8 border border-gray-700">
782
- <div class="flex items-center mb-6">
783
- <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
784
- alt="Анна"
785
- class="w-16 h-16 rounded-full object-cover mr-4 border-2 border-neon-green">
786
- <div>
787
- <h4 class="font-bold">Анна</h4>
788
- <div class="text-gray-400 text-sm">Алматы, Казахстан</div>
789
- </div>
790
- </div>
791
- <p class="text-gray-300 mb-6 italic">
792
- "После 2 недель обучения запустила первую связку. Через месяц вышла на стабильные $500 в неделю.
793
- Курс полностью изменил мой подход к заработку в интернете."
794
- </p>
795
- <div class="bg-black text-neon-green px-4 py-2 rounded-lg inline-block font-bold">
796
- +$2,100 за 1 месяц
797
  </div>
798
- </div>
799
-
800
- <!-- Testimonial 2 -->
801
- <div class="testimonial-card bg-gray-900 rounded-xl p-8 border border-gray-700">
802
- <div class="flex items-center mb-6">
803
- <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
804
- alt="Дмитрий"
805
- class="w-16 h-16 rounded-full object-cover mr-4 border-2 border-neon-purple">
806
- <div>
807
- <h4 class="font-bold">Дмитрий</h4>
808
- <div class="text-gray-400 text-sm">Москва, Россия</div>
809
- </div>
810
  </div>
811
- <p class="text-gray-300 mb-6 italic">
812
- "Пришел с нулевым опытом. Благодаря пошаговой системе уже на 3 неделе получил первые $300.
813
- Сейчас мой доход $3-5K в месяц, планирую масштабироваться дальше."
814
- </p>
815
- <div class="bg-black text-neon-purple px-4 py-2 rounded-lg inline-block font-bold">
816
- +$3,500 за 2 месяца
817
  </div>
818
  </div>
819
 
820
- <!-- Testimonial 3 -->
821
- <div class="testimonial-card bg-gray-900 rounded-xl p-8 border border-gray-700">
822
- <div class="flex items-center mb-6">
823
- <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
824
- alt="Елена"
825
- class="w-16 h-16 rounded-full object-cover mr-4 border-2 border-neon-blue">
826
- <div>
827
- <h4 class="font-bold">Елена</h4>
828
- <div class="text-gray-400 text-sm">Киев, Украина</div>
829
- </div>
830
- </div>
831
- <p class="text-gray-300 mb-6 italic">
832
- "Работала SMM-менеджером, хотела монетизировать трафик. После курса за первый месяц заработала $1,200,
833
- через 3 месяца ушла с основной работы. Лучшее решение в моей жизни!"
834
- </p>
835
- <div class="bg-black text-neon-blue px-4 py-2 rounded-lg inline-block font-bold">
836
- +$8,000 за 4 месяца
837
- </div>
838
- </div>
839
  </div>
840
 
841
- <div class="text-center mt-16">
842
- <h3 class="text-2xl font-bold mb-6">Стань следующим кейсом!</h3>
843
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg">
844
- Присоединиться
845
- </button>
846
  </div>
847
  </div>
848
- </section>
849
 
850
- <!-- Results Section -->
851
- <section id="results" class="py-20 bg-gray-900">
852
- <div class="container mx-auto px-6">
853
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Что вы получите после курса?</h2>
854
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
855
- Навыки, которые останутся с вами навсегда
856
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
857
 
858
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
859
- <!-- Card 1 -->
860
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
861
- <div class="w-16 h-16 bg-neon-green bg-opacity-10 rounded-full flex items-center justify-center mb-6">
862
- <i class="fas fa-rocket text-2xl text-neon-green"></i>
863
- </div>
864
- <h3 class="text-xl font-bold mb-3">Запуск первой связки</h3>
865
- <p class="text-gray-300">
866
- Полный алгоритм запуска прибыльной связки от А до Я, который вы сможете повторять снова и снова
867
- </p>
868
- </div>
869
-
870
- <!-- Card 2 -->
871
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
872
- <div class="w-16 h-16 bg-neon-purple bg-opacity-10 rounded-full flex items-center justify-center mb-6">
873
- <i class="fas fa-dollar-sign text-2xl text-neon-purple"></i>
874
- </div>
875
- <h3 class="text-xl font-bold mb-3">Первые деньги в процессе</h3>
876
- <p class="text-gray-300">
877
- Многие ученики начинают зарабатывать еще во время прохождения курса, выполняя практические задания
878
- </p>
879
- </div>
880
-
881
- <!-- Card 3 -->
882
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
883
- <div class="w-16 h-16 bg-neon-blue bg-opacity-10 rounded-full flex items-center justify-center mb-6">
884
- <i class="fas fa-tools text-2xl text-neon-blue"></i>
885
- </div>
886
- <h3 class="text-xl font-bold mb-3">Все необходимые инструменты</h3>
887
- <p class="text-gray-300">
888
- Доступ к проверенным инструментам, шаблонам и чек-листам, которые экономят часы работы
889
- </p>
890
- </div>
891
-
892
- <!-- Card 4 -->
893
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
894
- <div class="w-16 h-16 bg-neon-green bg-opacity-10 rounded-full flex items-center justify-center mb-6">
895
- <i class="fas fa-brain text-2xl text-neon-green"></i>
896
- </div>
897
- <h3 class="text-xl font-bold mb-3">Мышление арбитражника</h3>
898
- <p class="text-gray-300">
899
- Научитесь видеть возможности там, где другие видят только проблемы
900
- </p>
901
- </div>
902
-
903
- <!-- Card 5 -->
904
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
905
- <div class="w-16 h-16 bg-neon-purple bg-opacity-10 rounded-full flex items-center justify-center mb-6">
906
- <i class="fas fa-users text-2xl text-neon-purple"></i>
907
- </div>
908
- <h3 class="text-xl font-bold mb-3">Доступ к сообществу</h3>
909
- <p class="text-gray-300">
910
- Закрытый чат с единомышленниками, где делятся кейсами, связками и обновлениями
911
- </p>
912
- </div>
913
-
914
- <!-- Card 6 -->
915
- <div class="card-hover bg-black rounded-xl p-8 border border-gray-800">
916
- <div class="w-16 h-16 bg-neon-blue bg-opacity-10 rounded-full flex items-center justify-center mb-6">
917
- <i class="fas fa-briefcase text-2xl text-neon-blue"></i>
918
- </div>
919
- <h3 class="text-xl font-bold mb-3">Возможность трудоустройства</h3>
920
- <p class="text-gray-300">
921
- Лучшие ученики получают предложения о сотрудничестве от TMT и партнеров
922
- </p>
923
- </div>
924
- </div>
925
 
926
- <div class="text-center mt-16">
927
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg">
928
- Получить результат
929
- </button>
930
- </div>
931
- </div>
932
- </section>
933
-
934
- <!-- Team Results -->
935
- <section class="py-20">
936
- <div class="container mx-auto px-6">
937
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Результаты команды TMT</h2>
938
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
939
- Мы не учим — мы заливаем. Вот доказательства.
940
- </p>
 
 
 
 
 
 
 
 
 
 
941
 
942
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
943
- <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-transform hover:scale-105">
944
- <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"
945
- alt="Keitaro"
946
- class="w-full h-48 object-cover">
947
- <div class="p-4">
948
- <h3 class="font-bold mb-2">Keitaro</h3>
949
- <p class="text-gray-400 text-sm">ROI 217%</p>
950
- </div>
951
- </div>
952
-
953
- <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-transform hover:scale-105">
954
- <img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
955
- alt="FTD"
956
- class="w-full h-48 object-cover">
957
- <div class="p-4">
958
- <h3 class="font-bold mb-2">FTD</h3>
959
- <p class="text-gray-400 text-sm">Конверсия 3.8%</p>
960
- </div>
961
- </div>
962
-
963
- <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-transform hover:scale-105">
964
- <img src="https://images.unsplash.com/photo-1601597111158-2fceff292cdc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
965
- alt="ROI"
966
- class="w-full h-48 object-cover">
967
- <div class="p-4">
968
- <h3 class="font-bold mb-2">ROI</h3>
969
- <p class="text-gray-400 text-sm">184% за 30 дней</p>
970
- </div>
971
- </div>
972
-
973
- <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-transform hover:scale-105">
974
- <img src="https://images.unsplash.com/photo-1621761191319-c6fb62004040?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
975
- alt="Выплаты"
976
- class="w-full h-48 object-cover">
977
- <div class="p-4">
978
- <h3 class="font-bold mb-2">Выплаты</h3>
979
- <p class="text-gray-400 text-sm">$24,500 за месяц</p>
980
- </div>
981
- </div>
982
- </div>
983
 
984
- <div class="text-center">
985
- <h3 class="text-2xl font-bold mb-6">Хочешь так же? Присоединяйся!</h3>
986
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg">
987
- Начать обучение
988
- </button>
989
- </div>
990
- </div>
991
- </section>
992
-
993
- <!-- FAQ Section -->
994
- <section id="faq" class="py-20 bg-gray-900">
995
- <div class="container mx-auto px-6">
996
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Часто задаваемые вопросы</h2>
997
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
998
- Ответы на самые популярные вопросы о курсе
999
- </p>
1000
 
1001
- <div class="max-w-3xl mx-auto">
1002
- <!-- Question 1 -->
1003
- <div class="mb-4 border-b border-gray-700 pb-4">
1004
- <button class="accordion-btn w-full flex justify-between items-center text-left">
1005
- <h3 class="text-lg font-bold">Подойдет ли курс новичкам без опыта?</h3>
1006
- <i class="fas fa-plus ml-4 text-neon-green"></i>
1007
- </button>
1008
- <div class="accordion-content mt-2">
1009
- <p class="text-gray-300">
1010
- Да, курс разработан специально для новичков. Мы начинаем с самых основ и постепенно переходим
1011
- к сложным темам. Более 60% наших студентов пришли без какого-либо опыта в арбитраже.
1012
- </p>
1013
- </div>
1014
- </div>
1015
-
1016
- <!-- Question 2 -->
1017
- <div class="mb-4 border-b border-gray-700 pb-4">
1018
- <button class="accordion-btn w-full flex justify-between items-center text-left">
1019
- <h3 class="text-lg font-bold">Сколько времени занимает обучение?</h3>
1020
- <i class="fas fa-plus ml-4 text-neon-purple"></i>
1021
- </button>
1022
- <div class="accordion-content mt-2">
1023
- <p class="text-gray-300">
1024
- Основная программа рассчитана на 6-8 недель при темпе 4-5 часов в неделю.
1025
- Однако у вас будет пожизненный доступ, поэтому вы можете проходить курс в своем ритме.
1026
- </p>
1027
- </div>
1028
- </div>
1029
-
1030
- <!-- Question 3 -->
1031
- <div class="mb-4 border-b border-gray-700 pb-4">
1032
- <button class="accordion-btn w-full flex justify-between items-center text-left">
1033
- <h3 class="text-lg font-bold">Какие гарантии результата?</h3>
1034
- <i class="fas fa-plus ml-4 text-neon-blue"></i>
1035
- </button>
1036
- <div class="accordion-content mt-2">
1037
- <p class="text-gray-300">
1038
- Мы даем 14-дневную гарантию возврата денег, если курс вам не подойдет.
1039
- Однако результат на 90% зависит от вашей вовлеченности и выполнения заданий.
1040
- При должном подходе первые результаты у большинства студентов появляются в течение первого месяца.
1041
- </p>
1042
- </div>
1043
- </div>
1044
-
1045
- <!-- Question 4 -->
1046
- <div class="mb-4 border-b border-gray-700 pb-4">
1047
- <button class="accordion-btn w-full flex justify-between items-center text-left">
1048
- <h3 class="text-lg font-bold">Можно ли работать в TMT после курса?</h3>
1049
- <i class="fas fa-plus ml-4 text-neon-green"></i>
1050
- </button>
1051
- <div class="accordion-content mt-2">
1052
- <p class="text-gray-300">
1053
- Да, мы регулярно набираем в команду лучших выпускников курса. За последний год более 20 наших
1054
- студентов стали частью TMT и других партнерских команд.
1055
- </p>
1056
- </div>
1057
- </div>
1058
-
1059
- <!-- Question 5 -->
1060
- <div class="mb-4 border-b border-gray-700 pb-4">
1061
- <button class="accordion-btn w-full flex justify-between items-center text-left">
1062
- <h3 class="text-lg font-bold">Нужны ли дополнительные вложения?</h3>
1063
- <i class="fas fa-plus ml-4 text-neon-purple"></i>
1064
- </button>
1065
- <div class="accordion-content mt-2">
1066
- <p class="text-gray-300">
1067
- Для старта достаточно бюджета $200-300 на тестовые кампании. Мы научим вас минимизировать риски
1068
- и тестировать гипотезы с минимальными вложениями. Все необходимые инструменты предоставляются.
1069
- </p>
1070
- </div>
1071
- </div>
1072
- </div>
1073
 
1074
- <div class="text-center mt-12">
1075
- <h3 class="text-xl font-bold mb-4">Не нашли ответ? Напишите нам</h3>
1076
- <button class="btn-neon border border-neon-green text-neon-green px-8 py-3 rounded-full font-bold">
1077
- Задать вопрос
1078
- </button>
1079
- </div>
1080
- </div>
1081
- </section>
1082
-
1083
- <!-- Pricing Section -->
1084
- <section class="py-20">
1085
- <div class="container mx-auto px-6">
1086
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center gradient-text">Форматы участия</h2>
1087
- <p class="text-xl text-gray-300 mb-12 text-center max-w-2xl mx-auto">
1088
- Выберите подходящий вариант и начните зарабатывать уже сегодня
1089
- </p>
 
 
 
 
 
 
 
1090
 
1091
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
1092
- <!-- Basic -->
1093
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
1094
- <h3 class="text-2xl font-bold mb-2">Базовый</h3>
1095
- <div class="text-4xl font-bold mb-6 gradient-text">$299</div>
1096
-
1097
- <ul class="space-y-4 mb-8">
1098
- <li class="flex items-start">
1099
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
1100
- <span>Доступ к платформе (40+ уроков)</span>
1101
- </li>
1102
- <li class="flex items-start">
1103
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
1104
- <span>Практические задания</span>
1105
- </li>
1106
- <li class="flex items-start">
1107
- <i class="fas fa-check text-neon-green mt-1 mr-2"></i>
1108
- <span>Доступ в общий чат</span>
1109
- </li>
1110
- <li class="flex items-start text-gray-500">
1111
- <i class="fas fa-times mt-1 mr-2"></i>
1112
- <span>Zoom-разборы</span>
1113
- </li>
1114
- <li class="flex items-start text-gray-500">
1115
- <i class="fas fa-times mt-1 mr-2"></i>
1116
- <span>Персональный ментор</span>
1117
- </li>
1118
- </ul>
1119
-
1120
- <button class="btn-neon border border-neon-green text-neon-green w-full py-3 rounded-full font-bold">
1121
- Выбрать
1122
- </button>
1123
- </div>
1124
-
1125
- <!-- Extended (Popular) -->
1126
- <div class="card-hover bg-black rounded-xl p-8 border-2 border-neon-purple transform scale-105 relative">
1127
- <div class="absolute top-0 right-0 bg-neon-purple text-black px-4 py-1 rounded-bl-xl rounded-tr-xl font-bold text-sm">
1128
- ПОПУЛЯРНЫЙ
1129
- </div>
1130
- <h3 class="text-2xl font-bold mb-2">Расширенный</h3>
1131
- <div class="text-4xl font-bold mb-6 gradient-text">$599</div>
1132
-
1133
- <ul class="space-y-4 mb-8">
1134
- <li class="flex items-start">
1135
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
1136
- <span>Все из Базового</span>
1137
- </li>
1138
- <li class="flex items-start">
1139
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
1140
- <span>12 Zoom-разборов</span>
1141
- </li>
1142
- <li class="flex items-start">
1143
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
1144
- <span>База креативов</span>
1145
- </li>
1146
- <li class="flex items-start">
1147
- <i class="fas fa-check text-neon-purple mt-1 mr-2"></i>
1148
- <span>Приоритетная поддержка</span>
1149
- </li>
1150
- <li class="flex items-start text-gray-500">
1151
- <i class="fas fa-times mt-1 mr-2"></i>
1152
- <span>Персональный ментор</span>
1153
- </li>
1154
- </ul>
1155
-
1156
- <button class="btn-neon bg-neon-purple text-black w-full py-3 rounded-full font-bold">
1157
- Выбрать
1158
- </button>
1159
- </div>
1160
-
1161
- <!-- VIP -->
1162
- <div class="card-hover bg-gray-900 rounded-xl p-8 border border-gray-700">
1163
- <h3 class="text-2xl font-bold mb-2">ВИП</h3>
1164
- <div class="text-4xl font-bold mb-6 gradient-text">$1,299</div>
1165
-
1166
- <ul class="space-y-4 mb-8">
1167
- <li class="flex items-start">
1168
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
1169
- <span>Все из Расширенного</span>
1170
- </li>
1171
- <li class="flex items-start">
1172
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
1173
- <span>Персональный ментор</span>
1174
- </li>
1175
- <li class="flex items-start">
1176
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
1177
- <span>Разбор ваших связок</span>
1178
- </li>
1179
- <li class="flex items-start">
1180
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
1181
- <span>Доступ к закрытым вебинарам</span>
1182
- </li>
1183
- <li class="flex items-start">
1184
- <i class="fas fa-check text-neon-blue mt-1 mr-2"></i>
1185
- <span>Возможность трудоустройства</span>
1186
- </li>
1187
- </ul>
1188
-
1189
- <button class="btn-neon border border-neon-blue text-neon-blue w-full py-3 rounded-full font-bold">
1190
- Выбрать
1191
- </button>
1192
- </div>
1193
- </div>
1194
- </div>
1195
- </section>
1196
-
1197
- <!-- CTA Section -->
1198
- <section class="py-20 bg-gradient-to-br from-gray-900 to-black">
1199
- <div class="container mx-auto px-6">
1200
- <div class="max-w-4xl mx-auto bg-black rounded-xl p-12 text-center border border-gray-800">
1201
- <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">Готов начать зарабатывать?</h2>
1202
- <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
1203
- Присоединяйся к Traffic Master прямо сейчас и получи первые результаты уже через 2 недели
1204
- </p>
1205
- <button class="btn-neon bg-neon-green text-black px-8 py-4 rounded-full font-bold text-lg mx-auto">
1206
- Начать обучение
1207
- </button>
1208
- </div>
1209
- </div>
1210
- </section>
1211
-
1212
- <!-- Footer -->
1213
- <footer id="contacts" class="py-12 bg-black border-t border-gray-800">
1214
- <div class="container mx-auto px-6">
1215
- <div class="flex flex-col md:flex-row justify-between items-center">
1216
- <div class="mb-6 md:mb-0">
1217
- <span class="text-2xl font-bold gradient-text">TRAFFIC MASTER</span>
1218
- <p class="text-gray-400 mt-2">© 2024 Все права защищены</p>
1219
- </div>
1220
-
1221
- <div class="flex space-x-6 mb-6 md:mb-0">
1222
- <a href="#" class="text-gray-400 hover:text-neon-green transition">
1223
- <i class="fab fa-telegram text-2xl"></i>
1224
- </a>
1225
- <a href="#" class="text-gray-400 hover:text-neon-purple transition">
1226
- <i class="fab fa-instagram text-2xl"></i>
1227
- </a>
1228
- <a href="#" class="text-gray-400 hover:text-neon-blue transition">
1229
- <i class="fab fa-youtube text-2xl"></i>
1230
- </a>
1231
- </div>
1232
-
1233
- <div class="text-center md:text-right">
1234
- <a href="mailto:info@trafficmaster.pro" class="block text-gray-400 hover:text-neon-green transition mb-2">info@trafficmaster.pro</a>
1235
- <a href="tel:+77777777777" class="
1236
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ты выиграл эту жизнь!</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
9
  <style>
10
+ @keyframes fall {
11
+ 0% {
12
+ transform: translateY(-100px) rotate(0deg);
13
+ opacity: 0;
14
+ }
15
+ 10% {
16
+ opacity: 1;
17
+ }
18
+ 100% {
19
+ transform: translateY(calc(100vh + 100px)) rotate(360deg);
20
+ opacity: 0;
21
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
+ .money {
 
 
 
 
 
 
 
 
 
 
 
 
25
  position: absolute;
26
+ animation: fall linear forwards;
27
+ z-index: 10;
28
+ font-size: 24px;
29
+ color: #10b981;
30
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
 
31
  }
32
 
33
+ .stage {
34
+ transition: all 0.5s ease;
35
  }
36
 
37
+ .hidden {
38
+ display: none !important;
 
 
 
 
 
 
 
39
  }
40
 
41
+ .creative-card {
42
+ transition: all 0.3s ease;
43
+ transform-style: preserve-3d;
44
  }
45
 
46
+ .creative-card:hover {
47
+ transform: translateY(-5px) scale(1.03);
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
49
  }
50
 
51
+ .creative-card.selected {
52
+ transform: scale(1.05);
53
+ box-shadow: 0 0 0 3px #8b5cf6;
54
  }
55
 
56
+ .campaign-dropzone {
57
+ transition: all 0.3s ease;
 
 
 
 
58
  }
59
 
60
+ .campaign-dropzone.drag-over {
61
+ background-color: rgba(139, 92, 246, 0.2);
62
+ transform: scale(1.02);
 
 
 
 
63
  }
64
 
65
+ .counter {
66
+ font-family: 'Courier New', monospace;
67
+ text-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
68
  }
69
 
70
+ .final-screen {
71
+ background: linear-gradient(135deg, #6b21a8 0%, #3b82f6 50%, #10b981 100%);
72
+ background-size: 200% 200%;
73
+ animation: gradientBG 8s ease infinite;
74
  }
75
 
76
+ @keyframes gradientBG {
77
+ 0% {
78
+ background-position: 0% 50%;
79
+ }
80
+ 50% {
81
+ background-position: 100% 50%;
82
+ }
83
+ 100% {
84
+ background-position: 0% 50%;
85
+ }
86
  }
87
 
88
+ .pulse {
89
+ animation: pulse 2s infinite;
 
 
90
  }
91
 
92
+ @keyframes pulse {
93
+ 0% {
94
+ transform: scale(1);
95
+ }
96
+ 50% {
97
+ transform: scale(1.05);
98
+ }
99
+ 100% {
100
+ transform: scale(1);
101
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  }
103
  </style>
104
  </head>
105
+ <body class="bg-gray-900 text-white font-sans overflow-x-hidden">
106
+ <!-- Этап 1: Выбор креатива -->
107
+ <div id="stage1" class="stage min-h-screen flex flex-col items-center justify-center p-4">
108
+ <div class="text-center mb-8">
109
+ <h1 class="text-3xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">
110
+ Выбери креатив, который порвет ленту
111
+ </h1>
112
+ <p class="text-lg md:text-xl text-gray-300">От твоего выбора зависит успех кампании!</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  </div>
114
 
115
+ <div class="flex flex-wrap justify-center gap-6 max-w-4xl w-full">
116
+ <div class="creative-card w-full md:w-1/3 bg-gray-800 rounded-xl p-4 cursor-pointer" data-creative="1">
117
+ <div class="h-48 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg mb-4 flex items-center justify-center">
118
+ <i class="fas fa-ad text-6xl text-white opacity-80"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
+ <h3 class="text-xl font-bold mb-2">Креатив "Прорыв"</h3>
121
+ <p class="text-gray-400">CTR: 4.8% | Конверсия: 12%</p>
122
  </div>
 
 
 
 
 
 
 
123
 
124
+ <div class="creative-card w-full md:w-1/3 bg-gray-800 rounded-xl p-4 cursor-pointer" data-creative="2">
125
+ <div class="h-48 bg-gradient-to-br from-blue-500 to-green-500 rounded-lg mb-4 flex items-center justify-center">
126
+ <i class="fas fa-bolt text-6xl text-white opacity-80"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  </div>
128
+ <h3 class="text-xl font-bold mb-2">Креатив "Молния"</h3>
129
+ <p class="text-gray-400">CTR: 5.2% | Конверсия: 15%</p>
130
  </div>
 
 
 
 
 
 
 
 
 
 
131
 
132
+ <div class="creative-card w-full md:w-1/3 bg-gray-800 rounded-xl p-4 cursor-pointer" data-creative="3">
133
+ <div class="h-48 bg-gradient-to-br from-green-500 to-yellow-500 rounded-lg mb-4 flex items-center justify-center">
134
+ <i class="fas fa-fire text-6xl text-white opacity-80"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
+ <h3 class="text-xl font-bold mb-2">Креатив "Вулкан"</h3>
137
+ <p class="text-gray-400">CTR: 6.1% | Конверсия: 18%</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </div>
139
  </div>
140
+
141
+ <div class="mt-8 text-gray-400">
142
+ <p>Кликни на креатив, который хочешь запустить</p>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Этап 2: Запуск рекламы -->
147
+ <div id="stage2" class="stage min-h-screen flex flex-col items-center justify-center p-4 hidden">
148
+ <div class="text-center mb-8">
149
+ <h1 class="text-3xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-500">
150
+ Настройка рекламной кампании
151
+ </h1>
152
+ <p class="text-lg md:text-xl text-gray-300">Перетащи выбранный креатив в зону кампании</p>
153
+ </div>
154
+
155
+ <div class="flex flex-col md:flex-row gap-8 max-w-5xl w-full items-center justify-center">
156
+ <div id="selected-creative-container" class="w-full md:w-1/3 bg-gray-800 rounded-xl p-4 cursor-move">
157
+ <div class="h-48 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg mb-4 flex items-center justify-center">
158
+ <i id="creative-icon" class="fas fa-ad text-6xl text-white opacity-80"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </div>
160
+ <h3 id="creative-title" class="text-xl font-bold mb-2">Креатив</h3>
161
+ <p id="creative-stats" class="text-gray-400">CTR: 0% | Конверсия: 0%</p>
162
  </div>
163
 
164
+ <div class="flex flex-col items-center justify-center">
165
+ <i class="fas fa-arrow-right text-3xl text-gray-500 my-4 hidden md:block"></i>
166
+ <i class="fas fa-arrow-down text-3xl text-gray-500 my-4 md:hidden"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
 
169
+ <div id="campaign-dropzone" class="campaign-dropzone w-full md:w-2/3 bg-gray-800 rounded-xl p-6 border-2 border-dashed border-gray-600 flex flex-col items-center justify-center">
170
+ <i class="fas fa-cloud-upload-alt text-5xl text-gray-500 mb-4"></i>
171
+ <h3 class="text-xl font-bold mb-2">Зона кампании</h3>
172
+ <p class="text-gray-500 text-center">Перетащи сюда креатив или нажми кнопку ниже</p>
173
+
174
+ <div class="mt-8 w-full max-w-md bg-gray-700 rounded-lg p-4">
175
+ <div class="mb-4">
176
+ <label class="block text-gray-400 mb-2">Бюджет</label>
177
+ <div class="flex items-center">
178
+ <span class="bg-gray-600 px-3 py-2 rounded-l">$</span>
179
+ <input type="number" value="100" class="bg-gray-700 px-3 py-2 w-full rounded-r border-l-0 border-gray-600">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  </div>
181
+ </div>
182
+ <div class="mb-4">
183
+ <label class="block text-gray-400 mb-2">Аудитория</label>
184
+ <select class="bg-gray-700 px-3 py-2 w-full rounded border-gray-600">
185
+ <option>Широкая (18-65+)</option>
186
+ <option>Целевая (25-45)</option>
187
+ <option>Премиум (30-55)</option>
188
+ </select>
189
  </div>
190
  </div>
191
+
192
+ <button id="launch-btn" class="mt-6 px-8 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-full font-bold text-lg hover:from-blue-600 hover:to-green-600 transition-all transform hover:scale-105">
193
+ Запустить кампанию
 
 
194
  </button>
195
  </div>
196
  </div>
197
+ </div>
198
+
199
+ <!-- Этап 3: Деньги сыплются -->
200
+ <div id="stage3" class="stage min-h-screen flex flex-col items-center justify-center p-4 hidden relative overflow-hidden">
201
+ <div class="text-center mb-8 z-20">
202
+ <h1 class="text-3xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-yellow-500">
203
+ Трафик пошёл. Деньги льются!
204
+ </h1>
205
+ <p class="text-lg md:text-xl text-gray-300">Твоя кампания приносит прибыль</p>
206
+ </div>
207
+
208
+ <div class="z-20 bg-gray-900 bg-opacity-70 rounded-xl p-8 max-w-2xl w-full">
209
+ <div class="flex justify-between items-center mb-6">
210
+ <div>
211
+ <h2 id="creative-name" class="text-xl font-bold">Креатив</h2>
212
+ <p class="text-gray-400">Статистика в реальном времени</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </div>
214
+ <div class="text-right">
215
+ <div class="text-sm text-gray-400">Прибыль</div>
216
+ <div class="counter text-3xl font-bold text-green-400">$<span id="profit">0</span></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  </div>
218
  </div>
 
 
 
 
 
 
 
 
 
 
219
 
220
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
221
+ <div class="bg-gray-800 p-4 rounded-lg">
222
+ <div class="text-gray-400 text-sm">CTR</div>
223
+ <div class="text-xl font-bold"><span id="ctr">0</span>%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  </div>
225
+ <div class="bg-gray-800 p-4 rounded-lg">
226
+ <div class="text-gray-400 text-sm">Конверсия</div>
227
+ <div class="text-xl font-bold"><span id="conversion">0</span>%</div>
 
 
 
 
 
 
 
 
 
228
  </div>
229
+ <div class="bg-gray-800 p-4 rounded-lg">
230
+ <div class="text-gray-400 text-sm">Лидов</div>
231
+ <div class="text-xl font-bold"><span id="leads">0</span></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  </div>
233
  </div>
234
 
235
+ <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
236
+ <div id="progress-bar" class="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full" style="width: 0%"></div>
 
 
237
  </div>
238
+ <div class="text-right text-sm text-gray-400">Завершено: <span id="progress-percent">0</span>%</div>
239
+
240
+ <button id="finish-btn" class="mt-6 px-8 py-3 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full font-bold text-lg hover:from-purple-600 hover:to-blue-600 transition-all transform hover:scale-105 hidden">
241
+ Завершить
242
+ </button>
243
  </div>
244
+ </div>
245
+
246
+ <!-- Этап 4: Финал -->
247
+ <div id="stage4" class="stage min-h-screen flex flex-col items-center justify-center p-4 hidden final-screen">
248
+ <div class="text-center max-w-4xl mx-auto z-20">
249
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white">
250
+ Ты выиграл эту жизнь!
251
+ </h1>
252
+ <p class="text-xl md:text-2xl mb-8 text-gray-100">
253
+ Но это — только начало 👉 Приходи на вебинар — мы покажем, как выйти в плюс по-настоящему
254
  </p>
255
 
256
+ <div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-8 mb-8">
257
+ <div class="flex flex-wrap justify-center gap-6 mb-8">
258
+ <div class="flex items-center">
259
+ <i class="fas fa-money-bill-wave text-3xl text-green-400 mr-3"></i>
260
+ <span class="text-lg">Пассивный доход</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  </div>
262
+ <div class="flex items-center">
263
+ <i class="fas fa-plane text-3xl text-blue-400 mr-3"></i>
264
+ <span class="text-lg">Путешествия</span>
 
 
 
 
 
 
 
 
 
265
  </div>
266
+ <div class="flex items-center">
267
+ <i class="fas fa-home text-3xl text-purple-400 mr-3"></i>
268
+ <span class="text-lg">Недвижимость</span>
 
 
 
269
  </div>
270
  </div>
271
 
272
+ <a href="https://t.me/TrafficMastManager_bot" target="_blank" class="pulse inline-block px-10 py-4 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full font-bold text-xl text-gray-900 hover:from-yellow-500 hover:to-yellow-700 transition-all transform hover:scale-105 shadow-lg">
273
+ 🚀 Записаться на вебинар
274
+ </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
 
277
+ <div class="text-gray-200 text-sm mt-8">
278
+ <p>Ты сделал первый шаг. Теперь узнай, как превратить игру в реальность!</p>
 
 
 
279
  </div>
280
  </div>
281
+ </div>
282
 
283
+ <script>
284
+ // Данные креативов
285
+ const creatives = {
286
+ 1: {
287
+ title: "Креатив 'Прорыв'",
288
+ icon: "fa-ad",
289
+ ctr: 4.8,
290
+ conversion: 12,
291
+ colorFrom: "from-purple-500",
292
+ colorTo: "to-blue-500"
293
+ },
294
+ 2: {
295
+ title: "Креатив 'Молния'",
296
+ icon: "fa-bolt",
297
+ ctr: 5.2,
298
+ conversion: 15,
299
+ colorFrom: "from-blue-500",
300
+ colorTo: "to-green-500"
301
+ },
302
+ 3: {
303
+ title: "Креатив 'Вулкан'",
304
+ icon: "fa-fire",
305
+ ctr: 6.1,
306
+ conversion: 18,
307
+ colorFrom: "from-green-500",
308
+ colorTo: "to-yellow-500"
309
+ }
310
+ };
311
+
312
+ // Текущий выбранный креатив
313
+ let selectedCreative = null;
314
+
315
+ // Инициализация игры
316
+ document.addEventListener('DOMContentLoaded', function() {
317
+ // Этап 1: Выбор креатива
318
+ const creativeCards = document.querySelectorAll('.creative-card');
319
+ creativeCards.forEach(card => {
320
+ card.addEventListener('click', function() {
321
+ const creativeId = this.getAttribute('data-creative');
322
+ selectCreative(creativeId);
323
+ });
324
+ });
325
 
326
+ // Этап 2: Настройка кампании
327
+ const selectedCreativeContainer = document.getElementById('selected-creative-container');
328
+ const campaignDropzone = document.getElementById('campaign-dropzone');
329
+ const launchBtn = document.getElementById('launch-btn');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
 
331
+ // Drag and drop
332
+ if (selectedCreativeContainer) {
333
+ selectedCreativeContainer.setAttribute('draggable', 'true');
334
+
335
+ selectedCreativeContainer.addEventListener('dragstart', function(e) {
336
+ e.dataTransfer.setData('text/plain', 'creative');
337
+ });
338
+
339
+ campaignDropzone.addEventListener('dragover', function(e) {
340
+ e.preventDefault();
341
+ this.classList.add('drag-over');
342
+ });
343
+
344
+ campaignDropzone.addEventListener('dragleave', function() {
345
+ this.classList.remove('drag-over');
346
+ });
347
+
348
+ campaignDropzone.addEventListener('drop', function(e) {
349
+ e.preventDefault();
350
+ this.classList.remove('drag-over');
351
+ if (selectedCreative) {
352
+ launchCampaign();
353
+ }
354
+ });
355
+ }
356
 
357
+ launchBtn.addEventListener('click', launchCampaign);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
 
359
+ // Этап 3: Процесс заработка
360
+ const finishBtn = document.getElementById('finish-btn');
361
+ finishBtn.addEventListener('click', showFinal);
362
+ });
363
+
364
+ // Выбор креатива
365
+ function selectCreative(creativeId) {
366
+ selectedCreative = creatives[creativeId];
 
 
 
 
 
 
 
 
367
 
368
+ // Обновляем отображение выбранного креатива
369
+ const creativeCards = document.querySelectorAll('.creative-card');
370
+ creativeCards.forEach(card => {
371
+ card.classList.remove('selected');
372
+ if (card.getAttribute('data-creative') === creativeId) {
373
+ card.classList.add('selected');
374
+ }
375
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
 
377
+ // Переходим к следующему этапу
378
+ setTimeout(() => {
379
+ document.getElementById('stage1').classList.add('hidden');
380
+ document.getElementById('stage2').classList.remove('hidden');
381
+
382
+ // Обновляем информацию о выбранном креативе
383
+ const creativeIcon = document.getElementById('creative-icon');
384
+ const creativeTitle = document.getElementById('creative-title');
385
+ const creativeStats = document.getElementById('creative-stats');
386
+
387
+ creativeIcon.className = `fas ${selectedCreative.icon} text-6xl text-white opacity-80`;
388
+ creativeTitle.textContent = selectedCreative.title;
389
+ creativeStats.textContent = `CTR: ${selectedCreative.ctr}% | Конверсия: ${selectedCreative.conversion}%`;
390
+
391
+ // Обновляем фон креатива
392
+ const creativeContainer = document.getElementById('selected-creative-container');
393
+ creativeContainer.querySelector('div').className = `h-48 bg-gradient-to-br ${selectedCreative.colorFrom} ${selectedCreative.colorTo} rounded-lg mb-4 flex items-center justify-center`;
394
+ }, 300);
395
+ }
396
+
397
+ // Запуск кампании
398
+ function launchCampaign() {
399
+ if (!selectedCreative) return;
400
 
401
+ document.getElementById('stage2').classList.add('hidden');
402
+ document.getElementById('stage3').classList.remove('hidden');
403
+
404
+ // Обновляем информацию о креативе
405
+ document.getElementById('creative-name').textContent = selectedCreative.title;
406
+
407
+ // Запускаем анимацию денег
408
+ startMoneyRain();
409
+
410
+ // Запускаем симуляцию заработка
411
+ simulateEarnings();
412
+ }
413
+
414
+ // Анимация падающих денег
415
+ function startMoneyRain() {
416
+ const moneySymbols = ['💰', '💵', '💴', '💶', '💷', '💸', '🤑'];
417
+
418
+ setInterval(() => {
419
+ const money = document.createElement('div');
420
+ money.className = 'money';
421
+ money.textContent = moneySymbols[Math.floor(Math.random() * moneySymbols.length)];
422
+
423
+ // Случайная позиция по горизонта��и
424
+ const left = Math.random() * 100;
425
+ money.style.left = `${left}%`;
426
+
427
+ // Случайная скорость падения
428
+ const duration = 3 + Math.random() * 7;
429
+ money.style.animationDuration = `${duration}s`;
430
+
431
+ // Случайный размер
432
+ const size = 0.5 + Math.random();
433
+ money.style.fontSize = `${size}em`;
434
+
435
+ document.getElementById('stage3').appendChild(money);
436
+
437
+ // Удаляем элемент после завершения анимации
438
+ setTimeout(() => {
439
+ money.remove();
440
+ }, duration * 1000);
441
+ }, 100);
442
+ }
443
+
444
+ // Симуляция заработка
445
+ function simulateEarnings() {
446
+ let profit = 0;
447
+ let leads = 0;
448
+ let progress = 0;
449
+
450
+ const profitElement = document.getElementById('profit');
451
+ const ctrElement = document.getElementById('ctr');
452
+ const conversionElement = document.getElementById('conversion');
453
+ const leadsElement = document.getElementById('leads');
454
+ const progressBar = document.getElementById('progress-bar');
455
+ const progressPercent = document.getElementById('progress-percent');
456
+ const finishBtn = document.getElementById('finish-btn');
457
+
458
+ const ctr = selectedCreative.ctr;
459
+ const conversion = selectedCreative.conversion;
460
+
461
+ ctrElement.textContent = ctr.toFixed(1);
462
+ conversionElement.textContent = conversion.toFixed(1);
463
+
464
+ const interval = setInterval(() => {
465
+ // Увеличиваем прогресс
466
+ progress += 1;
467
+ progressBar.style.width = `${progress}%`;
468
+ progressPercent.textContent = progress;
469
+
470
+ // Генерируем случайные значения
471
+ const randomProfit = Math.floor(Math.random() * 50) + 10;
472
+ const randomLeads = Math.floor(Math.random() * 3) + 1;
473
+
474
+ profit += randomProfit;
475
+ leads += randomLeads;
476
+
477
+ profitElement.textContent = profit.toLocaleString();
478
+ leadsElement.textContent = leads.toLocaleString();
479
+
480
+ // Если прогресс достиг 100%, останавливаем интервал
481
+ if (progress >= 100) {
482
+ clearInterval(interval);
483
+ finishBtn.classList.remove('hidden');
484
+ }
485
+ }, 100);
486
+ }
487
+
488
+ // Показать финальный экран
489
+ function showFinal() {
490
+ document.getElementById('stage3').classList.add('hidden');
491
+ document.getElementById('stage4').classList.remove('hidden');
492
+ }
493
+ </script>
494
+ <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/coursesite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
495
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  Проверь весь скрипт сайт - не открывается основной лендинг - он просто завис на стартовой странице которая как превью!
2
  Давай сделаем тоже самое все - только уберем предстартовый экран
3
- Давай сделаем тоже самое все - только уберем предстартовый экран
 
 
1
  Проверь весь скрипт сайт - не открывается основной лендинг - он просто завис на стартовой странице которая как превью!
2
  Давай сделаем тоже самое все - только уберем предстартовый экран
3
+ Давай сделаем тоже самое все - только уберем предстартовый экран
4
+ 🔧 Техническое задание: Игровой мини-лендинг «Ты выиграл эту жизнь» 🎯 Цель: Создать мини-лендинг в формате интерактивной браузерной игры, где пользователь проходит упрощённый путь арбитражника: выбирает креатив, запускает рекламу и наблюдает, как льются деньги. В финале — эмоциональный триггер с призывом записаться на вебинар. ⸻ 🕹️ Игровой сценарий: Этап 1: Выбор креатива • На экране — три визуальные карточки с креативами • Пользователь выбирает один из них (по клику или перетаскиванию) • Заголовок: «Выбери креатив, который порвет ленту» Этап 2: Запуск рекламы • Отображается стилизованный интерфейс рекламного кабинета • Пользователь перетаскивает креатив в зону «Кампания» или нажимает «Запустить» • Надпись: «Настройка завершена — запускаем трафик!» Этап 3: Деньги сыплются • Анимация: с экрана начинают падать деньги • Визуализация успеха: растущие цифры, эффекты, фоновая музыка (опционально) • Текст: «Трафик пошёл. Деньги льются» Этап 4: Финал • Экран переходит к праздничной сцене: пачки денег, бизнес-класс, пальмы, бассейн • Надпись: «Ты выиграл эту жизнь!» Но это — только начало 👉 Приходи на вебинар — мы покажем, как выйти в плюс по-настоящему • Яркая кнопка: [🚀 Записаться на вебинар] ⸻ 🧩 Компоненты и блоки: Этап Компоненты Выбор 3 карточки с креативами, эффекты при наведении Кабинет Упрощённый рекламный интерфейс, кнопка «Запуск» Эффект денег Анимация падения купюр, визуал успеха Финал Сцена победы, фоновое изображение, призыв к действию ⸻ 🖌️ Визуальный стиль: • Интерфейс в стиле «игровой симуляции» • Цвета: фиолетовый, синий, лайм (в духе бренда Traffic Master) • Иллюстрации: реалистично-геймифицированные • Шрифт: крупный, жирный, вызывающий внимание ⸻ 📱 Формат: • Одностраничная структура • Полная адаптивность под мобильные и десктопные устройства • Время прохождения: около 30–45 секунд • Игра должна быть встроена в лендинг или доступна по прямой ссылке ⸻ 📈 Метрики вовлечения: • Прохождение до конца: >60% • Переход по кнопке вебинара: >30% • Среднее время взаимодействия: ~40 секунд ⸻ 🔗 Интеграции и действия после: • Кнопка записи на вебинар ведёт на целевую страницу или Telegram-бота @TrafficMastManager_bot • Можно добавить анимацию появления pop-up окна после победы с формой заявки