Hugging Face's logo

Spaces:
timoon811
/
webinar2-0
Running

App Files Community
timoon811 commited on
Commit
06c399c
·
verified ·
1 Parent(s): ed918cc

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +199 -113
  2. prompts.txt +2 -1
index.html CHANGED
@@ -135,21 +135,52 @@
135
  object-fit: cover;
136
  z-index: 1;
137
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </style>
139
  </head>
140
  <body class="min-h-screen">
141
  <!-- Header -->
142
- <header class="py-6 px-4 sm:px-6 lg:px-8">
143
  <div class="container mx-auto flex justify-between items-center">
144
  <div class="logo text-2xl">
145
  <span class="logo-traffic">TRAFFIC</span> <span class="logo-master">MASTER</span>
146
  </div>
147
- <nav class="hidden md:flex space-x-8">
148
  <a href="#about" class="text-white hover:text-traffic transition">О ВЕБИНАРЕ</a>
149
  <a href="#benefits" class="text-white hover:text-traffic transition">ЧТО ВЫ ПОЛУЧИТЕ</a>
150
  <a href="#speaker" class="text-white hover:text-traffic transition">АВТОР</a>
151
  <a href="#testimonials" class="text-white hover:text-traffic transition">ОТЗЫВЫ</a>
152
- <a href="#registration" class="text-white hover:text-traffic transition">РЕГИСТРАЦИЯ</a>
153
  </nav>
154
  <button class="md:hidden text-white">
155
  <i class="fas fa-bars text-2xl"></i>
@@ -158,26 +189,37 @@
158
  </header>
159
 
160
  <!-- Hero Section -->
161
- <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
162
  <div class="container mx-auto text-center">
163
  <div class="mb-6">
164
  <span class="bg-traffic text-black font-bold px-4 py-1 rounded-full text-sm">ЭКСКЛЮЗИВНЫЙ ВЕБИНАР</span>
165
  </div>
166
- <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
167
  <span class="text-traffic">ЭКСКЛЮЗИВНЫЙ</span> ВЕБИНАР ПО ТРАФИКУ
168
  </h1>
169
- <p class="text-xl md:text-2xl text-master mb-10">Бесплатно. Проверенные стратегии. Реальные кейсы.</p>
170
- <div class="flex flex-col sm:flex-row justify-center gap-4">
171
- <a href="#video-preview" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">СМОТРЕТЬ ПРОМО</a>
172
- <div class="flex items-center justify-center">
173
- <div class="w-12 h-12 rounded-full bg-traffic flex items-center justify-center text-black mr-3">
174
- <i class="fas fa-play"></i>
175
- </div>
176
- <span class="text-master">9 МАЯ В 20:00 (АЛМАТЫ)</span>
 
 
 
 
 
 
 
177
  </div>
178
  </div>
179
- <div class="mt-16">
180
- <p class="text-master mb-2">МЕСТА ОГРАНИЧЕНЫ</p>
 
 
 
 
181
  <div class="w-full bg-gray-800 rounded-full h-2.5">
182
  <div class="bg-traffic h-2.5 rounded-full" style="width: 75%"></div>
183
  </div>
@@ -186,179 +228,181 @@
186
  </section>
187
 
188
  <!-- Video Preview Section -->
189
- <section id="video-preview" class="py-20 px-4 sm:px-6 lg:px-8 bg-black">
190
  <div class="container mx-auto max-w-4xl">
191
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">ПРОМО ВЕБИНАРА</h2>
 
192
 
193
- <div class="video-container mb-10">
194
  <div class="play-button" onclick="loadVideo()">
195
  <i class="fas fa-play"></i>
196
  </div>
197
- <img src="https://img.youtube.com/vi/XdFXlnzF7QQ/maxresdefault.jpg" alt="Превью вебинара" class="video-thumbnail">
198
  <iframe id="youtube-video" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display: none;"></iframe>
199
  </div>
200
 
201
- <div class="text-center">
202
- <a href="#registration" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
 
203
  </div>
204
  </div>
205
  </section>
206
 
207
  <!-- About Section -->
208
- <section id="about" class="py-20 px-4 sm:px-6 lg:px-8">
209
  <div class="container mx-auto">
210
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">О ЧЁМ ЭТОТ ВЕБИНАР?</h2>
211
 
212
- <div class="grid md:grid-cols-3 gap-10 mb-16">
213
  <div class="text-center">
214
- <div class="w-20 h-20 bg-traffic rounded-full flex items-center justify-center text-black text-3xl mx-auto mb-6">
215
  <i class="fas fa-chart-line"></i>
216
  </div>
217
- <h3 class="text-xl font-bold mb-3">КОНКРЕТНЫЕ КЕЙСЫ</h3>
218
  <p class="text-master">Разбор реальных кейсов с цифрами и скриншотами. Только проверенные методы.</p>
219
  </div>
220
 
221
  <div class="text-center">
222
- <div class="w-20 h-20 bg-traffic rounded-full flex items-center justify-center text-black text-3xl mx-auto mb-6">
223
  <i class="fas fa-tools"></i>
224
  </div>
225
- <h3 class="text-xl font-bold mb-3">РАБОТАЮЩИЕ ИНСТРУМЕНТЫ</h3>
226
  <p class="text-master">Готовые связки и инструменты, которые можно внедрить сразу после вебинара.</p>
227
  </div>
228
 
229
  <div class="text-center">
230
- <div class="w-20 h-20 bg-traffic rounded-full flex items-center justify-center text-black text-3xl mx-auto mb-6">
231
  <i class="fas fa-lightbulb"></i>
232
  </div>
233
- <h3 class="text-xl font-bold mb-3">ЭКСКЛЮЗИВНЫЕ ФИШКИ</h3>
234
  <p class="text-master">То, что не расскажут на других курсах. Наши закрытые наработки.</p>
235
  </div>
236
  </div>
237
 
238
  <div class="text-center">
239
- <a href="#registration" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
240
  </div>
241
  </div>
242
  </section>
243
 
244
  <!-- Benefits Section -->
245
- <section id="benefits" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
246
  <div class="container mx-auto">
247
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">ЧТО ВЫ ПОЛУЧИТЕ</h2>
248
 
249
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
250
  <div class="flex items-start">
251
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
252
  <i class="fas fa-bolt"></i>
253
  </div>
254
  <div>
255
- <h3 class="text-xl font-bold mb-2">5+ ИСТОЧНИКОВ ТРАФИКА</h3>
256
  <p class="text-master">Разные каналы привлечения клиентов с детальным разбором каждого.</p>
257
  </div>
258
  </div>
259
 
260
  <div class="flex items-start">
261
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
262
  <i class="fas fa-money-bill-wave"></i>
263
  </div>
264
  <div>
265
- <h3 class="text-xl font-bold mb-2">УВЕЛИЧЕНИЕ ПРИБЫЛИ</h3>
266
  <p class="text-master">Как масштабировать прибыль с минимальными вложениями.</p>
267
  </div>
268
  </div>
269
 
270
  <div class="flex items-start">
271
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
272
  <i class="fas fa-rocket"></i>
273
  </div>
274
  <div>
275
- <h3 class="text-xl font-bold mb-2">БЫСТРЫЙ РЕЗУЛЬТАТ</h3>
276
  <p class="text-master">Первые результаты уже через 3 дня после внедрения стратегий.</p>
277
  </div>
278
  </div>
279
 
280
  <div class="flex items-start">
281
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
282
  <i class="fas fa-box-open"></i>
283
  </div>
284
  <div>
285
- <h3 class="text-xl font-bold mb-2">ГОТОВЫЕ ИНСТРУМЕНТЫ</h3>
286
  <p class="text-master">Шаблон��, скрипты, чек-листы — всё для быстрого старта.</p>
287
  </div>
288
  </div>
289
 
290
  <div class="flex items-start">
291
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
292
  <i class="fas fa-search-dollar"></i>
293
  </div>
294
  <div>
295
- <h3 class="text-xl font-bold mb-2">АНАЛИЗ И ОПТИМИЗАЦИЯ</h3>
296
  <p class="text-master">Как анализировать данные и увеличивать эффективность в 2-3 раза.</p>
297
  </div>
298
  </div>
299
 
300
  <div class="flex items-start">
301
- <div class="w-12 h-12 bg-traffic rounded-full flex items-center justify-center text-black text-xl mr-4 mt-1">
302
  <i class="fas fa-gift"></i>
303
  </div>
304
  <div>
305
- <h3 class="text-xl font-bold mb-2">БОНУСЫ ДЛЯ УЧАСТНИКОВ</h3>
306
  <p class="text-master">Доступ в закрытый чат + индивидуальный разбор вашего проекта.</p>
307
  </div>
308
  </div>
309
  </div>
310
 
311
  <div class="text-center">
312
- <a href="#registration" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">ХОЧУ НА ВЕБИНАР</a>
313
  </div>
314
  </div>
315
  </section>
316
 
317
  <!-- Speaker Section -->
318
- <section id="speaker" class="py-20 px-4 sm:px-6 lg:px-8">
319
  <div class="container mx-auto">
320
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">КТО ВЕДЕТ ВЕБИНАР</h2>
321
 
322
- <div class="flex flex-col lg:flex-row items-center gap-12">
323
  <div class="lg:w-1/3 flex justify-center">
324
  <div class="relative">
325
- <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-traffic">
326
  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Тимур В." class="w-full h-full object-cover">
327
  </div>
328
- <div class="absolute -bottom-4 -right-4 bg-traffic text-black font-bold px-4 py-2 rounded-full">
329
- <i class="fas fa-check mr-2"></i>ЭКСПЕРТ
330
  </div>
331
  </div>
332
  </div>
333
 
334
  <div class="lg:w-2/3">
335
- <h3 class="text-2xl md:text-3xl font-bold mb-2">ТИМУР В.</h3>
336
- <p class="text-xl text-traffic mb-6">Эксперт в арбитраже трафика с 2021 года!</p>
337
 
338
- <div class="mb-8">
339
- <div class="flex items-center mb-4">
340
- <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-4">
341
  <i class="fas fa-chart-pie"></i>
342
  </div>
343
  <p class="font-bold">ОБОРОТ ПРОЕКТОВ: <span class="text-traffic">$1.2M+</span></p>
344
  </div>
345
 
346
- <div class="flex items-center mb-4">
347
- <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-4">
348
  <i class="fas fa-users"></i>
349
  </div>
350
  <p class="font-bold">ОБУЧЕНО УЧЕНИКОВ: <span class="text-traffic">850+</span></p>
351
  </div>
352
 
353
  <div class="flex items-center">
354
- <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-4">
355
  <i class="fas fa-project-diagram"></i>
356
  </div>
357
  <p class="font-bold">ЗАПУЩЕНО КАМПАНИЙ: <span class="text-traffic">1200+</span></p>
358
  </div>
359
  </div>
360
 
361
- <div class="bg-gray-900 p-6 rounded-xl border-l-4 border-traffic">
362
  <p class="italic text-master mb-2">"Арбитраж не для всех. Но если ты вошел — ты в игре. На вебинаре я покажу, как сделать первые $1000 уже через неделю."</p>
363
  <p class="font-bold text-traffic">— Тимур В.</p>
364
  </div>
@@ -368,14 +412,14 @@
368
  </section>
369
 
370
  <!-- Testimonials Section -->
371
- <section id="testimonials" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
372
  <div class="container mx-auto">
373
- <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">ОТЗЫВЫ УЧАСТНИКОВ</h2>
374
 
375
- <div class="grid md:grid-cols-3 gap-8 mb-12">
376
- <div class="testimonial-card p-6 rounded-xl">
377
- <div class="flex items-center mb-4">
378
- <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
379
  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Алия К." class="w-full h-full object-cover">
380
  </div>
381
  <div>
@@ -383,7 +427,7 @@
383
  <p class="text-xs text-master">15 МАРТА 2024</p>
384
  </div>
385
  </div>
386
- <p class="text-master mb-4">"После вебинара запустила первую кампанию. Через 3 дня получила первых клиентов. Сейчас стабильно зарабатываю $200-300 в день."</p>
387
  <div class="flex">
388
  <i class="fas fa-star text-traffic"></i>
389
  <i class="fas fa-star text-traffic"></i>
@@ -393,9 +437,9 @@
393
  </div>
394
  </div>
395
 
396
- <div class="testimonial-card p-6 rounded-xl">
397
- <div class="flex items-center mb-4">
398
- <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
399
  <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Арман Ж." class="w-full h-full object-cover">
400
  </div>
401
  <div>
@@ -403,7 +447,7 @@
403
  <p class="text-xs text-master">2 ФЕВРАЛЯ 2024</p>
404
  </div>
405
  </div>
406
- <p class="text-master mb-4">"Информация подана четко, без воды. Особенно полезны были кейсы с разбором ошибок. Уже масштабировал проект в 3 раза."</p>
407
  <div class="flex">
408
  <i class="fas fa-star text-traffic"></i>
409
  <i class="fas fa-star text-traffic"></i>
@@ -413,9 +457,9 @@
413
  </div>
414
  </div>
415
 
416
- <div class="testimonial-card p-6 rounded-xl">
417
- <div class="flex items-center mb-4">
418
- <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
419
  <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Диана С." class="w-full h-full object-cover">
420
  </div>
421
  <div>
@@ -423,7 +467,7 @@
423
  <p class="text-xs text-master">10 ЯНВАРЯ 2024</p>
424
  </div>
425
  </div>
426
- <p class="text-master mb-4">"Благодаря бонусным материалам смогла оптимизировать бюджет на 40%. Теперь трачу меньше, а получаю больше."</p>
427
  <div class="flex">
428
  <i class="fas fa-star text-traffic"></i>
429
  <i class="fas fa-star text-traffic"></i>
@@ -435,54 +479,54 @@
435
  </div>
436
 
437
  <div class="text-center">
438
- <button class="border border-master text-master px-6 py-3 rounded-full font-bold hover:bg-gray-800 transition">
439
- СМОТРЕТЬ ВСЕ ОТЗЫВЫ <i class="fas fa-chevron-down ml-2"></i>
440
  </button>
441
  </div>
442
  </div>
443
  </section>
444
 
445
  <!-- FAQ Section -->
446
- <section class="py-20 px-4 sm:px-6 lg:px-8">
447
  <div class="container mx-auto max-w-4xl">
448
- <div class="text-center mb-16">
449
- <h3 class="text-2xl md:text-3xl font-bold mb-4">ОСТАЛИСЬ ВОПРОСЫ?</h3>
450
- <p class="text-xl text-master mb-6">Напишите нам в любое время — мы ответим!</p>
451
- <a href="https://t.me/trafficmaster" target="_blank" class="btn-primary px-8 py-4 rounded-full text-lg font-bold inline-block">
452
- НАПИСАТЬ В TELEGRAM <i class="fas fa-paper-plane ml-2"></i>
453
  </a>
454
  </div>
455
  </div>
456
  </section>
457
 
458
  <!-- Registration Section -->
459
- <section id="registration" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
460
  <div class="container mx-auto max-w-4xl">
461
- <h2 class="text-3xl md:text-4xl font-bold mb-6 text-center section-title">РЕГИСТРАЦИЯ НА ВЕБИНАР</h2>
462
- <p class="text-xl text-master mb-10 text-center">9 МАЯ В 20:00 (АЛМАТЫ) | ОНЛАЙН | БЕСПЛАТНО</p>
463
 
464
- <div class="bg-gray-900 p-8 md:p-10 rounded-xl">
465
- <form id="webinar-form" class="space-y-6">
466
  <div>
467
- <label for="name" class="block font-bold mb-2">ВАШЕ ИМЯ</label>
468
  <input type="text" id="name" name="name" required
469
- class="form-input w-full px-4 py-3 rounded-lg">
470
  </div>
471
 
472
  <div>
473
- <label for="email" class="block font-bold mb-2">EMAIL</label>
474
  <input type="email" id="email" name="email" required
475
- class="form-input w-full px-4 py-3 rounded-lg">
476
  </div>
477
 
478
  <div>
479
- <label for="phone" class="block font-bold mb-2">ТЕЛЕФОН (НЕОБЯЗАТЕЛЬНО)</label>
480
  <input type="tel" id="phone" name="phone"
481
- class="form-input w-full px-4 py-3 rounded-lg">
482
  </div>
483
 
484
- <div class="pt-4">
485
- <button type="submit" class="btn-primary w-full px-8 py-4 rounded-full text-lg font-bold">
486
  ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
487
  </button>
488
  </div>
@@ -493,51 +537,50 @@
493
  </form>
494
  </div>
495
 
496
- <div class="mt-12 text-center">
497
- <div class="inline-flex items-center bg-traffic text-black px-4 py-2 rounded-full font-bold">
498
- <i class="fas fa-gift mr-2"></i> БОНУС ДЛЯ УЧАСТНИКОВ: ЧЕК-ЛИСТ + ДОСТУП В ЗАКРЫТЫЙ ЧАТ
499
  </div>
500
  </div>
501
  </div>
502
  </section>
503
 
504
  <!-- Footer -->
505
- <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
506
  <div class="container mx-auto">
507
- <div class="flex flex-col md:flex-row justify-between items-center mb-8">
508
- <div class="logo text-2xl mb-6 md:mb-0">
509
  <span class="logo-traffic">TRAFFIC</span> <span class="logo-master">MASTER</span>
510
  </div>
511
 
512
  <div class="text-center md:text-right">
513
- <p class="text-master mb-2">ОБУЧАЕМ АРБИТРАЖУ С 2021 ГОДА</p>
514
  <p class="font-bold">ОБУЧЕНО УЧЕНИКОВ: <span class="text-traffic">850+</span></p>
515
  </div>
516
  </div>
517
 
518
- <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-800">
519
- <nav class="flex flex-wrap justify-center gap-4 md:gap-8 mb-6 md:mb-0">
520
  <a href="#about" class="text-master hover:text-traffic transition">О В��БИНАРЕ</a>
521
  <a href="#benefits" class="text-master hover:text-traffic transition">ЧТО ВЫ ПОЛУЧИТЕ</a>
522
  <a href="#speaker" class="text-master hover:text-traffic transition">АВТОР</a>
523
  <a href="#testimonials" class="text-master hover:text-traffic transition">ОТЗЫВЫ</a>
524
- <a href="#registration" class="text-master hover:text-traffic transition">РЕГИСТРАЦИЯ</a>
525
  </nav>
526
 
527
- <div class="flex space-x-4">
528
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
529
  <i class="fab fa-telegram"></i>
530
  </a>
531
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
532
  <i class="fab fa-instagram"></i>
533
  </a>
534
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
535
  <i class="fab fa-youtube"></i>
536
  </a>
537
  </div>
538
  </div>
539
 
540
- <div class="mt-8 text-center text-sm text-master">
541
  <p>© 2025 TRAFFIC MASTER. ВСЕ ПРАВА ЗАЩИЩЕНЫ.</p>
542
  </div>
543
  </div>
@@ -583,6 +626,49 @@
583
  playButton.style.display = 'none';
584
  thumbnail.style.display = 'none';
585
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
586
  </script>
587
  <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/webinar2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
588
  </html>
 
135
  object-fit: cover;
136
  z-index: 1;
137
  }
138
+ .countdown-item {
139
+ display: flex;
140
+ flex-direction: column;
141
+ align-items: center;
142
+ justify-content: center;
143
+ background: rgba(255, 255, 255, 0.05);
144
+ border-radius: 12px;
145
+ padding: 15px 10px;
146
+ min-width: 80px;
147
+ }
148
+ .countdown-number {
149
+ font-size: 2rem;
150
+ font-weight: bold;
151
+ color: #f6fc79;
152
+ }
153
+ .countdown-label {
154
+ font-size: 0.8rem;
155
+ color: #E1E1E1;
156
+ text-transform: uppercase;
157
+ }
158
+ @media (max-width: 640px) {
159
+ .section-title:after {
160
+ width: 30%;
161
+ }
162
+ .countdown-item {
163
+ min-width: 70px;
164
+ padding: 10px 5px;
165
+ }
166
+ .countdown-number {
167
+ font-size: 1.5rem;
168
+ }
169
+ }
170
  </style>
171
  </head>
172
  <body class="min-h-screen">
173
  <!-- Header -->
174
+ <header class="py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
175
  <div class="container mx-auto flex justify-between items-center">
176
  <div class="logo text-2xl">
177
  <span class="logo-traffic">TRAFFIC</span> <span class="logo-master">MASTER</span>
178
  </div>
179
+ <nav class="hidden md:flex space-x-6">
180
  <a href="#about" class="text-white hover:text-traffic transition">О ВЕБИНАРЕ</a>
181
  <a href="#benefits" class="text-white hover:text-traffic transition">ЧТО ВЫ ПОЛУЧИТЕ</a>
182
  <a href="#speaker" class="text-white hover:text-traffic transition">АВТОР</a>
183
  <a href="#testimonials" class="text-white hover:text-traffic transition">ОТЗЫВЫ</a>
 
184
  </nav>
185
  <button class="md:hidden text-white">
186
  <i class="fas fa-bars text-2xl"></i>
 
189
  </header>
190
 
191
  <!-- Hero Section -->
192
+ <section class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
193
  <div class="container mx-auto text-center">
194
  <div class="mb-6">
195
  <span class="bg-traffic text-black font-bold px-4 py-1 rounded-full text-sm">ЭКСКЛЮЗИВНЫЙ ВЕБИНАР</span>
196
  </div>
197
+ <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 leading-tight">
198
  <span class="text-traffic">ЭКСКЛЮЗИВНЫЙ</span> ВЕБИНАР ПО ТРАФИКУ
199
  </h1>
200
+ <p class="text-lg sm:text-xl text-master mb-8">Бесплатно. Проверенные стратегии. Реальные кейсы.</p>
201
+
202
+ <!-- Countdown Timer -->
203
+ <div class="flex justify-center space-x-4 mb-8">
204
+ <div class="countdown-item">
205
+ <div class="countdown-number" id="countdown-days">00</div>
206
+ <div class="countdown-label">Дней</div>
207
+ </div>
208
+ <div class="countdown-item">
209
+ <div class="countdown-number" id="countdown-hours">00</div>
210
+ <div class="countdown-label">Часов</div>
211
+ </div>
212
+ <div class="countdown-item">
213
+ <div class="countdown-number" id="countdown-minutes">00</div>
214
+ <div class="countdown-label">Минут</div>
215
  </div>
216
  </div>
217
+
218
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
219
+ <a href="#registration" class="btn-primary px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
220
+ </div>
221
+ <div class="mt-8">
222
+ <p class="text-master mb-2">МЕСТА ОГРАНИЧЕНЫ - ЗАНЯТО <span id="places-taken">75</span>%</p>
223
  <div class="w-full bg-gray-800 rounded-full h-2.5">
224
  <div class="bg-traffic h-2.5 rounded-full" style="width: 75%"></div>
225
  </div>
 
228
  </section>
229
 
230
  <!-- Video Preview Section -->
231
+ <section id="video-preview" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-black">
232
  <div class="container mx-auto max-w-4xl">
233
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-12 text-center section-title">ИНТЕРВЬЮ С ОСНОВАТЕЛЕМ</h2>
234
+ <p class="text-lg text-master mb-8 text-center">Пока ждете вебинар - познакомьтесь с автором</p>
235
 
236
+ <div class="video-container mb-8 sm:mb-10">
237
  <div class="play-button" onclick="loadVideo()">
238
  <i class="fas fa-play"></i>
239
  </div>
240
+ <img src="https://img.youtube.com/vi/XdFXlnzF7QQ/maxresdefault.jpg" alt="Интервью с основателем" class="video-thumbnail">
241
  <iframe id="youtube-video" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display: none;"></iframe>
242
  </div>
243
 
244
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
245
+ <a href="#registration" class="btn-primary px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
246
+ <a href="#speaker" class="border border-master text-white px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold hover:bg-gray-800 transition">ОБ АВТОРЕ</a>
247
  </div>
248
  </div>
249
  </section>
250
 
251
  <!-- About Section -->
252
+ <section id="about" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8">
253
  <div class="container mx-auto">
254
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-12 text-center section-title">О ЧЁМ ЭТОТ ВЕБИНАР?</h2>
255
 
256
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
257
  <div class="text-center">
258
+ <div class="w-16 h-16 sm:w-20 sm:h-20 bg-traffic rounded-full flex items-center justify-center text-black text-2xl sm:text-3xl mx-auto mb-4 sm:mb-6">
259
  <i class="fas fa-chart-line"></i>
260
  </div>
261
+ <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">КОНКРЕТНЫЕ КЕЙСЫ</h3>
262
  <p class="text-master">Разбор реальных кейсов с цифрами и скриншотами. Только проверенные методы.</p>
263
  </div>
264
 
265
  <div class="text-center">
266
+ <div class="w-16 h-16 sm:w-20 sm:h-20 bg-traffic rounded-full flex items-center justify-center text-black text-2xl sm:text-3xl mx-auto mb-4 sm:mb-6">
267
  <i class="fas fa-tools"></i>
268
  </div>
269
+ <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">РАБОТАЮЩИЕ ИНСТРУМЕНТЫ</h3>
270
  <p class="text-master">Готовые связки и инструменты, которые можно внедрить сразу после вебинара.</p>
271
  </div>
272
 
273
  <div class="text-center">
274
+ <div class="w-16 h-16 sm:w-20 sm:h-20 bg-traffic rounded-full flex items-center justify-center text-black text-2xl sm:text-3xl mx-auto mb-4 sm:mb-6">
275
  <i class="fas fa-lightbulb"></i>
276
  </div>
277
+ <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">ЭКСКЛЮЗИВНЫЕ ФИШКИ</h3>
278
  <p class="text-master">То, что не расскажут на других курсах. Наши закрытые наработки.</p>
279
  </div>
280
  </div>
281
 
282
  <div class="text-center">
283
+ <a href="#registration" class="btn-primary px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
284
  </div>
285
  </div>
286
  </section>
287
 
288
  <!-- Benefits Section -->
289
+ <section id="benefits" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
290
  <div class="container mx-auto">
291
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-12 text-center section-title">ЧТО ВЫ ПОЛУЧИТЕ</h2>
292
 
293
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
294
  <div class="flex items-start">
295
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
296
  <i class="fas fa-bolt"></i>
297
  </div>
298
  <div>
299
+ <h3 class="text-lg sm:text-xl font-bold mb-2">5+ ИСТОЧНИКОВ ТРАФИКА</h3>
300
  <p class="text-master">Разные каналы привлечения клиентов с детальным разбором каждого.</p>
301
  </div>
302
  </div>
303
 
304
  <div class="flex items-start">
305
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
306
  <i class="fas fa-money-bill-wave"></i>
307
  </div>
308
  <div>
309
+ <h3 class="text-lg sm:text-xl font-bold mb-2">УВЕЛИЧЕНИЕ ПРИБЫЛИ</h3>
310
  <p class="text-master">Как масштабировать прибыль с минимальными вложениями.</p>
311
  </div>
312
  </div>
313
 
314
  <div class="flex items-start">
315
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
316
  <i class="fas fa-rocket"></i>
317
  </div>
318
  <div>
319
+ <h3 class="text-lg sm:text-xl font-bold mb-2">БЫСТРЫЙ РЕЗУЛЬТАТ</h3>
320
  <p class="text-master">Первые результаты уже через 3 дня после внедрения стратегий.</p>
321
  </div>
322
  </div>
323
 
324
  <div class="flex items-start">
325
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
326
  <i class="fas fa-box-open"></i>
327
  </div>
328
  <div>
329
+ <h3 class="text-lg sm:text-xl font-bold mb-2">ГОТОВЫЕ ИНСТРУМЕНТЫ</h3>
330
  <p class="text-master">Шаблон��, скрипты, чек-листы — всё для быстрого старта.</p>
331
  </div>
332
  </div>
333
 
334
  <div class="flex items-start">
335
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
336
  <i class="fas fa-search-dollar"></i>
337
  </div>
338
  <div>
339
+ <h3 class="text-lg sm:text-xl font-bold mb-2">АНАЛИЗ И ОПТИМИЗАЦИЯ</h3>
340
  <p class="text-master">Как анализировать данные и увеличивать эффективность в 2-3 раза.</p>
341
  </div>
342
  </div>
343
 
344
  <div class="flex items-start">
345
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-traffic rounded-full flex items-center justify-center text-black text-lg sm:text-xl mr-3 sm:mr-4 mt-1">
346
  <i class="fas fa-gift"></i>
347
  </div>
348
  <div>
349
+ <h3 class="text-lg sm:text-xl font-bold mb-2">БОНУСЫ ДЛЯ УЧАСТНИКОВ</h3>
350
  <p class="text-master">Доступ в закрытый чат + индивидуальный разбор вашего проекта.</p>
351
  </div>
352
  </div>
353
  </div>
354
 
355
  <div class="text-center">
356
+ <a href="#registration" class="btn-primary px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold">ХОЧУ НА ВЕБИНАР</a>
357
  </div>
358
  </div>
359
  </section>
360
 
361
  <!-- Speaker Section -->
362
+ <section id="speaker" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8">
363
  <div class="container mx-auto">
364
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-12 text-center section-title">КТО ВЕДЕТ ВЕБИНАР</h2>
365
 
366
+ <div class="flex flex-col lg:flex-row items-center gap-8 sm:gap-12">
367
  <div class="lg:w-1/3 flex justify-center">
368
  <div class="relative">
369
+ <div class="w-56 h-56 sm:w-64 sm:h-64 rounded-full overflow-hidden border-4 border-traffic">
370
  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Тимур В." class="w-full h-full object-cover">
371
  </div>
372
+ <div class="absolute -bottom-3 -right-3 bg-traffic text-black font-bold px-3 py-1 sm:px-4 sm:py-2 rounded-full text-sm sm:text-base">
373
+ <i class="fas fa-check mr-1"></i>ЭКСПЕРТ
374
  </div>
375
  </div>
376
  </div>
377
 
378
  <div class="lg:w-2/3">
379
+ <h3 class="text-xl sm:text-2xl md:text-3xl font-bold mb-2">ТИМУР В.</h3>
380
+ <p class="text-lg sm:text-xl text-traffic mb-4 sm:mb-6">Эксперт в арбитраже трафика с 2021 года!</p>
381
 
382
+ <div class="mb-6 sm:mb-8">
383
+ <div class="flex items-center mb-3 sm:mb-4">
384
+ <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-3 sm:mr-4">
385
  <i class="fas fa-chart-pie"></i>
386
  </div>
387
  <p class="font-bold">ОБОРОТ ПРОЕКТОВ: <span class="text-traffic">$1.2M+</span></p>
388
  </div>
389
 
390
+ <div class="flex items-center mb-3 sm:mb-4">
391
+ <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-3 sm:mr-4">
392
  <i class="fas fa-users"></i>
393
  </div>
394
  <p class="font-bold">ОБУЧЕНО УЧЕНИКОВ: <span class="text-traffic">850+</span></p>
395
  </div>
396
 
397
  <div class="flex items-center">
398
+ <div class="w-8 h-8 bg-traffic rounded-full flex items-center justify-center text-black mr-3 sm:mr-4">
399
  <i class="fas fa-project-diagram"></i>
400
  </div>
401
  <p class="font-bold">ЗАПУЩЕНО КАМПАНИЙ: <span class="text-traffic">1200+</span></p>
402
  </div>
403
  </div>
404
 
405
+ <div class="bg-gray-900 p-4 sm:p-6 rounded-xl border-l-4 border-traffic">
406
  <p class="italic text-master mb-2">"Арбитраж не для всех. Но если ты вошел — ты в игре. На вебинаре я покажу, как сделать первые $1000 уже через неделю."</p>
407
  <p class="font-bold text-traffic">— Тимур В.</p>
408
  </div>
 
412
  </section>
413
 
414
  <!-- Testimonials Section -->
415
+ <section id="testimonials" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
416
  <div class="container mx-auto">
417
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-12 text-center section-title">ОТЗЫВЫ УЧАСТНИКОВ</h2>
418
 
419
+ <div class="grid md:grid-cols-3 gap-6 mb-10">
420
+ <div class="testimonial-card p-4 sm:p-6 rounded-xl">
421
+ <div class="flex items-center mb-3 sm:mb-4">
422
+ <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden mr-3 sm:mr-4">
423
  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Алия К." class="w-full h-full object-cover">
424
  </div>
425
  <div>
 
427
  <p class="text-xs text-master">15 МАРТА 2024</p>
428
  </div>
429
  </div>
430
+ <p class="text-master mb-3 sm:mb-4">"После вебинара запустила первую кампанию. Через 3 дня получила первых клиентов. Сейчас стабильно зарабатываю $200-300 в день."</p>
431
  <div class="flex">
432
  <i class="fas fa-star text-traffic"></i>
433
  <i class="fas fa-star text-traffic"></i>
 
437
  </div>
438
  </div>
439
 
440
+ <div class="testimonial-card p-4 sm:p-6 rounded-xl">
441
+ <div class="flex items-center mb-3 sm:mb-4">
442
+ <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden mr-3 sm:mr-4">
443
  <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Арман Ж." class="w-full h-full object-cover">
444
  </div>
445
  <div>
 
447
  <p class="text-xs text-master">2 ФЕВРАЛЯ 2024</p>
448
  </div>
449
  </div>
450
+ <p class="text-master mb-3 sm:mb-4">"Информация подана четко, без воды. Особенно полезны были кейсы с разбором ошибок. Уже масштабировал проект в 3 раза."</p>
451
  <div class="flex">
452
  <i class="fas fa-star text-traffic"></i>
453
  <i class="fas fa-star text-traffic"></i>
 
457
  </div>
458
  </div>
459
 
460
+ <div class="testimonial-card p-4 sm:p-6 rounded-xl">
461
+ <div class="flex items-center mb-3 sm:mb-4">
462
+ <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden mr-3 sm:mr-4">
463
  <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Диана С." class="w-full h-full object-cover">
464
  </div>
465
  <div>
 
467
  <p class="text-xs text-master">10 ЯНВАРЯ 2024</p>
468
  </div>
469
  </div>
470
+ <p class="text-master mb-3 sm:mb-4">"Благодаря бонусным материалам смогла оптимизировать бюджет на 40%. Теперь трачу меньше, а получаю больше."</p>
471
  <div class="flex">
472
  <i class="fas fa-star text-traffic"></i>
473
  <i class="fas fa-star text-traffic"></i>
 
479
  </div>
480
 
481
  <div class="text-center">
482
+ <button class="border border-master text-master px-4 py-2 sm:px-6 sm:py-3 rounded-full font-bold hover:bg-gray-800 transition">
483
+ СМОТРЕТЬ ВСЕ ОТЗЫВЫ <i class="fas fa-chevron-down ml-1 sm:ml-2"></i>
484
  </button>
485
  </div>
486
  </div>
487
  </section>
488
 
489
  <!-- FAQ Section -->
490
+ <section class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8">
491
  <div class="container mx-auto max-w-4xl">
492
+ <div class="text-center mb-12">
493
+ <h3 class="text-xl sm:text-2xl md:text-3xl font-bold mb-3 sm:mb-4">ОСТАЛИСЬ ВОПРОСЫ?</h3>
494
+ <p class="text-lg sm:text-xl text-master mb-6">Напишите нам в любое время — мы ответим!</p>
495
+ <a href="https://t.me/trafficmaster" target="_blank" class="btn-primary px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold inline-block">
496
+ НАПИСАТЬ В TELEGRAM <i class="fas fa-paper-plane ml-1 sm:ml-2"></i>
497
  </a>
498
  </div>
499
  </div>
500
  </section>
501
 
502
  <!-- Registration Section -->
503
+ <section id="registration" class="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
504
  <div class="container mx-auto max-w-4xl">
505
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 text-center section-title">РЕГИСТРАЦИЯ НА ВЕБИНАР</h2>
506
+ <p class="text-lg sm:text-xl text-master mb-8 sm:mb-10 text-center">9 МАЯ В 20:00 (АЛМАТЫ) | ОНЛАЙН | БЕСПЛАТНО</p>
507
 
508
+ <div class="bg-gray-900 p-6 sm:p-8 md:p-10 rounded-xl">
509
+ <form id="webinar-form" class="space-y-4 sm:space-y-6">
510
  <div>
511
+ <label for="name" class="block font-bold mb-1 sm:mb-2">ВАШЕ ИМЯ</label>
512
  <input type="text" id="name" name="name" required
513
+ class="form-input w-full px-3 py-2 sm:px-4 sm:py-3 rounded-lg">
514
  </div>
515
 
516
  <div>
517
+ <label for="email" class="block font-bold mb-1 sm:mb-2">EMAIL</label>
518
  <input type="email" id="email" name="email" required
519
+ class="form-input w-full px-3 py-2 sm:px-4 sm:py-3 rounded-lg">
520
  </div>
521
 
522
  <div>
523
+ <label for="phone" class="block font-bold mb-1 sm:mb-2">ТЕЛЕФОН (НЕОБЯЗАТЕЛЬНО)</label>
524
  <input type="tel" id="phone" name="phone"
525
+ class="form-input w-full px-3 py-2 sm:px-4 sm:py-3 rounded-lg">
526
  </div>
527
 
528
+ <div class="pt-2 sm:pt-4">
529
+ <button type="submit" class="btn-primary w-full px-6 py-3 sm:px-8 sm:py-4 rounded-full text-lg font-bold">
530
  ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
531
  </button>
532
  </div>
 
537
  </form>
538
  </div>
539
 
540
+ <div class="mt-8 sm:mt-12 text-center">
541
+ <div class="inline-flex items-center bg-traffic text-black px-3 py-1 sm:px-4 sm:py-2 rounded-full font-bold text-sm sm:text-base">
542
+ <i class="fas fa-gift mr-1 sm:mr-2"></i> БОНУС ДЛЯ УЧАСТНИКОВ: ЧЕК-ЛИСТ + ДОСТУП В ЗАКРЫТЫЙ ЧАТ
543
  </div>
544
  </div>
545
  </div>
546
  </section>
547
 
548
  <!-- Footer -->
549
+ <footer class="py-8 sm:py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
550
  <div class="container mx-auto">
551
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6 sm:mb-8">
552
+ <div class="logo text-xl sm:text-2xl mb-4 md:mb-0">
553
  <span class="logo-traffic">TRAFFIC</span> <span class="logo-master">MASTER</span>
554
  </div>
555
 
556
  <div class="text-center md:text-right">
557
+ <p class="text-master mb-1 sm:mb-2">ОБУЧАЕМ АРБИТРАЖУ С 2021 ГОДА</p>
558
  <p class="font-bold">ОБУЧЕНО УЧЕНИКОВ: <span class="text-traffic">850+</span></p>
559
  </div>
560
  </div>
561
 
562
+ <div class="flex flex-col md:flex-row justify-between items-center pt-6 sm:pt-8 border-t border-gray-800">
563
+ <nav class="flex flex-wrap justify-center gap-3 sm:gap-6 mb-4 md:mb-0">
564
  <a href="#about" class="text-master hover:text-traffic transition">О В��БИНАРЕ</a>
565
  <a href="#benefits" class="text-master hover:text-traffic transition">ЧТО ВЫ ПОЛУЧИТЕ</a>
566
  <a href="#speaker" class="text-master hover:text-traffic transition">АВТОР</a>
567
  <a href="#testimonials" class="text-master hover:text-traffic transition">ОТЗЫВЫ</a>
 
568
  </nav>
569
 
570
+ <div class="flex space-x-3 sm:space-x-4">
571
+ <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
572
  <i class="fab fa-telegram"></i>
573
  </a>
574
+ <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
575
  <i class="fab fa-instagram"></i>
576
  </a>
577
+ <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-800 flex items-center justify-center text-traffic hover:bg-traffic hover:text-black transition">
578
  <i class="fab fa-youtube"></i>
579
  </a>
580
  </div>
581
  </div>
582
 
583
+ <div class="mt-6 sm:mt-8 text-center text-xs sm:text-sm text-master">
584
  <p>© 2025 TRAFFIC MASTER. ВСЕ ПРАВА ЗАЩИЩЕНЫ.</p>
585
  </div>
586
  </div>
 
626
  playButton.style.display = 'none';
627
  thumbnail.style.display = 'none';
628
  }
629
+
630
+ // Countdown Timer
631
+ function updateCountdown() {
632
+ // Set the date we're counting down to (May 9, 2024 20:00 Almaty time)
633
+ const countDownDate = new Date("May 9, 2024 20:00:00").getTime();
634
+
635
+ // Update the count down every 1 second
636
+ const x = setInterval(function() {
637
+ // Get today's date and time
638
+ const now = new Date().getTime();
639
+
640
+ // Find the distance between now and the count down date
641
+ const distance = countDownDate - now;
642
+
643
+ // Time calculations for days, hours, minutes and seconds
644
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
645
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
646
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
647
+
648
+ // Display the result
649
+ document.getElementById("countdown-days").innerHTML = days.toString().padStart(2, '0');
650
+ document.getElementById("countdown-hours").innerHTML = hours.toString().padStart(2, '0');
651
+ document.getElementById("countdown-minutes").innerHTML = minutes.toString().padStart(2, '0');
652
+
653
+ // If the count down is finished, clear interval
654
+ if (distance < 0) {
655
+ clearInterval(x);
656
+ document.getElementById("countdown-days").innerHTML = "00";
657
+ document.getElementById("countdown-hours").innerHTML = "00";
658
+ document.getElementById("countdown-minutes").innerHTML = "00";
659
+ }
660
+ }, 1000);
661
+ }
662
+
663
+ // Initialize countdown when page loads
664
+ window.onload = function() {
665
+ updateCountdown();
666
+
667
+ // Random places taken percentage between 70% and 85%
668
+ const placesTaken = Math.floor(Math.random() * 16) + 70;
669
+ document.getElementById("places-taken").textContent = placesTaken;
670
+ document.querySelector(".bg-traffic.h-2.5").style.width = placesTaken + "%";
671
+ };
672
  </script>
673
  <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/webinar2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
674
  </html>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  Техническое задание на лендинг “Вебинар по трафику” - вебинар состоится 9 мая в 20:00 по времени Алматы 1. Структура страницы Блок 1: Промо-заголовок + кнопка CTA • Большой броский заголовок (“Эксклюзивный вебинар по трафику”) • Подзаголовок (“Бесплатно. Проверенные стратегии. Реальные кейсы.”) • Кнопка: “Смотреть промо” (якорная ссылка на следующий блок) ⸻ Блок 2: О чём вебинар • Заголовок: “О чём этот вебинар?” • 3 подпункта с иконками: • Конкретные кейсы • Работающие инструменты • Эксклюзивные фишки • Кнопка: “Забронировать место” ⸻ Блок 3: Что вы получите на вебинаре • Заголовок: “Что вы получите” • Список преимуществ (иконка + заголовок + короткий текст): • 5+ источников трафика • Увеличение прибыли • Быстрый результат • Готовые инструменты • Анализ и оптимизация • Бонусы для участников • Кнопка: “Хочу на вебинар” ⸻ Блок 4: Спикер • Заголовок: “Кто ведет вебинар” • Фото спикера • Имя и описание: • Имя: Тимур В. • Позиция: Эксперт в арбитраже трафика с 2021 года! • Описание достижений: опыт, обороты, количество обученных. • Цитата от спикера ⸻ Блок 5: Отзывы участников • Заголовок: “Отзывы участников” • 3 карточки отзывов: • Фото пользователя • Имя • Текст отзыва • Дата вебинара • Кнопка: “Смотреть все отзывы” (переход или разворот) ⸻ Блок 6: Остались вопросы • Краткий текст: “Напишите нам в любое время — мы ответим!” • Кнопка: “Написать в Telegram” (ссылка на чат) ⸻ Блок 7: Регистрация на вебинар • Заголовок: “Регистрация на вебинар” • Форма: • Имя • Email • Телефон (опционально) • Кнопка “Зарегистрироваться бесплатно” • Подпись о согласии с политикой конфиденциальности ⸻ Футер • Логотип TRAFFIC MASTER • Описание компании (год основания, сколько обучено) • Навигация по якорям: • О вебинаре • Что вы получите • Автор • Отзывы • Регистрация • Копирайт © 2025 Traffic Master 3. Требования к контенту • Все тексты короткие, без воды • Акцент на результатах и выгодах для пользователя • Фотографии спикера и реальные скриншоты кейсов • Отзывы с реальными датами и цифрами • Минимальное количество кликов до регистрации ⸻ 4. Функционал • Адаптивность под все устройства • Якорная навигация по странице • Интеграция формы с email-рассылкой • Быстрая загрузка • Кнопки CTA дублируются в каждом основном блоке ⸻ 5. Особенности • Легкий акцент на срочность (места ограничены) • Подчеркнуть эксклюзивность знаний и практическую ценность • Бонусы для зарегистрированных пользователей (чек-листы, доступ в закрытый чат) Дизайн делай исходя из брендбука - представленного ниже! BRANDBOOK: TRAFFIC MASTER --- ### 1. ОСНОВА БРЕНДА Название: Traffic Master Суть бренда: Система обучения арбитражников, которая транслирует свободу, кайф, силу, деньги, рост и драйв. Кор-месседж: Арбитраж не для всех. Но если ты вошел — ты в игре. --- ### 2. ЛОГОТИП #### Основн��я версия: - TRAFFIC — цвет: #f6fc79 (ярко-лимонный), гладкая текстура - MASTER — цвет: #E1E1E1 (30% серее белого) - Шрифт: Bold Sans-Serif - Версал, без курсивов #### Стилистика: - Минимализм - Объем на слове "TRAFFIC" - Горизонтальное расположение --- ### 3. ПРИМЕНЕНИЕ ЛОГОТИПА #### Черный фон (основной): - Используется стандартный логотип (цвета: #f6fc79 и `#E1E1E1`) - Не допускается добавление теней или фонов #### Белый фон: - "TRAFFIC" — #bcc20e (неоново-оливковый) - "MASTER" — #1A1A1A (почти-черный) #### Серый фон (середина UI): - Слово TRAFFIC становится #f7ff9f - MASTER остается белым (`#FFFFFF`) #### Стикеры и картинки: - Используйте лого без фона (.png) - Отступ от края не менее 20px --- ### 4. ЦВЕТОВАЯ ПАЛИТРА - #f6fc79 — главный акцент (на TRAFFIC) - #E1E1E1 — нейтральный серый (на MASTER) - #000000 — фон - #FFFFFF — дополнительный цвет для текстов и фонов --- ### 5. ТИПОГРАФИЯ - Шрифт: Inter, Montserrat, Suisse Int'l (Bold / Regular) - Только в верхнем регистре - Растояние между буквами: 2–3% ---
2
- Добавь блок с превью - https://www.youtube.com/watch?v=XdFXlnzF7QQ&ab_channel=%D0%94%D0%95%D0%9D%D0%98%D0%A1%D0%9B%D0%90%D0%93%D0%A3%D0%A2%D0%95%D0%9D%D0%9A%D0%9E
 
 
1
  Техническое задание на лендинг “Вебинар по трафику” - вебинар состоится 9 мая в 20:00 по времени Алматы 1. Структура страницы Блок 1: Промо-заголовок + кнопка CTA • Большой броский заголовок (“Эксклюзивный вебинар по трафику”) • Подзаголовок (“Бесплатно. Проверенные стратегии. Реальные кейсы.”) • Кнопка: “Смотреть промо” (якорная ссылка на следующий блок) ⸻ Блок 2: О чём вебинар • Заголовок: “О чём этот вебинар?” • 3 подпункта с иконками: • Конкретные кейсы • Работающие инструменты • Эксклюзивные фишки • Кнопка: “Забронировать место” ⸻ Блок 3: Что вы получите на вебинаре • Заголовок: “Что вы получите” • Список преимуществ (иконка + заголовок + короткий текст): • 5+ источников трафика • Увеличение прибыли • Быстрый результат • Готовые инструменты • Анализ и оптимизация • Бонусы для участников • Кнопка: “Хочу на вебинар” ⸻ Блок 4: Спикер • Заголовок: “Кто ведет вебинар” • Фото спикера • Имя и описание: • Имя: Тимур В. • Позиция: Эксперт в арбитраже трафика с 2021 года! • Описание достижений: опыт, обороты, количество обученных. • Цитата от спикера ⸻ Блок 5: Отзывы участников • Заголовок: “Отзывы участников” • 3 карточки отзывов: • Фото пользователя • Имя • Текст отзыва • Дата вебинара • Кнопка: “Смотреть все отзывы” (переход или разворот) ⸻ Блок 6: Остались вопросы • Краткий текст: “Напишите нам в любое время — мы ответим!” • Кнопка: “Написать в Telegram” (ссылка на чат) ⸻ Блок 7: Регистрация на вебинар • Заголовок: “Регистрация на вебинар” • Форма: • Имя • Email • Телефон (опционально) • Кнопка “Зарегистрироваться бесплатно” • Подпись о согласии с политикой конфиденциальности ⸻ Футер • Логотип TRAFFIC MASTER • Описание компании (год основания, сколько обучено) • Навигация по якорям: • О вебинаре • Что вы получите • Автор • Отзывы • Регистрация • Копирайт © 2025 Traffic Master 3. Требования к контенту • Все тексты короткие, без воды • Акцент на результатах и выгодах для пользователя • Фотографии спикера и реальные скриншоты кейсов • Отзывы с реальными датами и цифрами • Минимальное количество кликов до регистрации ⸻ 4. Функционал • Адаптивность под все устройства • Якорная навигация по странице • Интеграция формы с email-рассылкой • Быстрая загрузка • Кнопки CTA дублируются в каждом основном блоке ⸻ 5. Особенности • Легкий акцент на срочность (места ограничены) • Подчеркнуть эксклюзивность знаний и практическую ценность • Бонусы для зарегистрированных пользователей (чек-листы, доступ в закрытый чат) Дизайн делай исходя из брендбука - представленного ниже! BRANDBOOK: TRAFFIC MASTER --- ### 1. ОСНОВА БРЕНДА Название: Traffic Master Суть бренда: Система обучения арбитражников, которая транслирует свободу, кайф, силу, деньги, рост и драйв. Кор-месседж: Арбитраж не для всех. Но если ты вошел — ты в игре. --- ### 2. ЛОГОТИП #### Основн��я версия: - TRAFFIC — цвет: #f6fc79 (ярко-лимонный), гладкая текстура - MASTER — цвет: #E1E1E1 (30% серее белого) - Шрифт: Bold Sans-Serif - Версал, без курсивов #### Стилистика: - Минимализм - Объем на слове "TRAFFIC" - Горизонтальное расположение --- ### 3. ПРИМЕНЕНИЕ ЛОГОТИПА #### Черный фон (основной): - Используется стандартный логотип (цвета: #f6fc79 и `#E1E1E1`) - Не допускается добавление теней или фонов #### Белый фон: - "TRAFFIC" — #bcc20e (неоново-оливковый) - "MASTER" — #1A1A1A (почти-черный) #### Серый фон (середина UI): - Слово TRAFFIC становится #f7ff9f - MASTER остается белым (`#FFFFFF`) #### Стикеры и картинки: - Используйте лого без фона (.png) - Отступ от края не менее 20px --- ### 4. ЦВЕТОВАЯ ПАЛИТРА - #f6fc79 — главный акцент (на TRAFFIC) - #E1E1E1 — нейтральный серый (на MASTER) - #000000 — фон - #FFFFFF — дополнительный цвет для текстов и фонов --- ### 5. ТИПОГРАФИЯ - Шрифт: Inter, Montserrat, Suisse Int'l (Bold / Regular) - Только в верхнем регистре - Растояние между буквами: 2–3% ---
2
+ Добавь блок с превью - https://www.youtube.com/watch?v=XdFXlnzF7QQ&ab_channel=%D0%94%D0%95%D0%9D%D0%98%D0%A1%D0%9B%D0%90%D0%93%D0%A3%D0%A2%D0%95%D0%9D%D0%9A%D0%9E
3
+ Счетчик добавить нужно - осталось до вебинара дней часов минут! Добавить % там где места ограничены! Вместо промо вебинара - написать Интервью с основателем типа пока ждете вебинар познакомьтесь! Убери лид форму - нужно оставить только кнопки - далее я сам поставлю нужные ссылки в кнопки! И между блоками проверь расстояния на мобильной версии - они как-будто большие!