timoon811 commited on
Commit
c05095a
·
verified ·
1 Parent(s): 371f4a4

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +27 -36
  2. prompts.txt +1 -1
index.html CHANGED
@@ -77,6 +77,7 @@
77
  background-color: #000;
78
  color: #E1E1E1;
79
  scroll-behavior: smooth;
 
80
  }
81
  h1, h2, h3, h4, h5, h6 {
82
  font-family: 'Montserrat', sans-serif;
@@ -139,6 +140,8 @@
139
  font-size: 12px;
140
  font-weight: 700;
141
  transform: rotate(45deg);
 
 
142
  }
143
  .timeline-item::before {
144
  content: '';
@@ -239,6 +242,22 @@
239
  background-clip: text;
240
  color: transparent;
241
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  </style>
243
  </head>
244
  <body class="bg-black text-gray-100">
@@ -314,7 +333,7 @@
314
  <i class="fas fa-users text-black text-xl"></i>
315
  </div>
316
  <div>
317
- <div class="text-white font-bold text-xl"><span class="counter" data-target="1250">0</span>+</div>
318
  <div class="text-gray-400 text-sm">УЧЕНИКОВ</div>
319
  </div>
320
  </div>
@@ -323,7 +342,7 @@
323
  <i class="fas fa-dollar-sign text-black text-xl"></i>
324
  </div>
325
  <div>
326
- <div class="text-white font-bold text-xl">$<span class="counter" data-target="10000">0</span>+</div>
327
  <div class="text-gray-400 text-sm">СРЕДНИЙ ДОХОД</div>
328
  </div>
329
  </div>
@@ -332,7 +351,7 @@
332
  <i class="fas fa-globe text-black text-xl"></i>
333
  </div>
334
  <div>
335
- <div class="text-white font-bold text-xl"><span class="counter" data-target="35">0</span>+</div>
336
  <div class="text-gray-400 text-sm">СТРАН</div>
337
  </div>
338
  </div>
@@ -340,7 +359,7 @@
340
  </div>
341
  <div class="md:w-1/2 relative">
342
  <div class="floating">
343
- <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
344
  alt="Traffic Master" class="rounded-xl glow-border transform rotate-3">
345
  </div>
346
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-[#f6fc79] rounded-full opacity-20 blur-xl"></div>
@@ -369,7 +388,7 @@
369
  <span class="text-[#f6fc79] font-bold">TRAFFIC MASTER</span> — это не просто курс, а полноценная экосистема для тех, кто хочет освоить арбитраж трафика и выйти на стабильный доход от $10,000 в месяц.
370
  </p>
371
  <p class="text-gray-300 mb-6 text-lg">
372
- Мы не учим теории — только практика, проверенные методы и реальные кейсы. Наш подход доказал свою эффективность на более чем 1250 учениках из 35 стран.
373
  </p>
374
  <p class="text-gray-300 mb-8 text-lg">
375
  Арбитраж не для всех. Но если ты вошел — ты в игре. Наша миссия — дать тебе все инструменты для победы в этой игре.
@@ -427,7 +446,7 @@
427
  <i class="fab fa-facebook"></i>
428
  </div>
429
  </div>
430
- <h3 class="text-xl font-bold text-white mb-2">ПРАКТИКА С FB И TG</h3>
431
  <p class="text-gray-400">
432
  Глубокий разбор работы с Facebook Ads и Telegram. Научитесь запускать эффективные кампании.
433
  </p>
@@ -866,7 +885,7 @@
866
  <i class="fas fa-circle"></i>
867
  </div>
868
  <div>
869
- <h4 class="text-lg font-bold text-white mb-1">Тестирование новых рынков</h4>
870
  <p class="text-gray-400">Стратегии входа в новые ГЕО с минимальными рисками</p>
871
  </div>
872
  </div>
@@ -1215,33 +1234,5 @@
1215
  </div>
1216
  <div class="bg-gray-900 p-8 rounded-xl text-center hover-grow">
1217
  <div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-4 border-[#f6fc79]">
1218
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="PP Manager" class="w-full h-full object-cover">
1219
- </div>
1220
- <h3 class="text-xl font-bold text-white mb-2">ИВАН П.</h3>
1221
- <div class="text-[#f6fc79] font-bold mb-4">МЕНЕДЖЕР ПО ПП</div>
1222
- <p class="text-gray-400 mb-4">
1223
- Опыт работы с партнерскими программами 5 лет. Поможет найти лучшие условия и выстроить отношения с ПП.
1224
- </p>
1225
- <div class="flex justify-center space-x-4">
1226
- <a href="#" class="text-gray-400 hover:text-[#f6fc79]"><i class="fab fa-telegram"></i></a>
1227
- </div>
1228
- </div>
1229
- </div>
1230
- </div>
1231
- </section>
1232
-
1233
- <!-- FAQ Section -->
1234
- <section id="faq" class="py-20 bg-gray-900">
1235
- <div class="container mx-auto px-4">
1236
- <div class="text-center mb-16">
1237
- <h2 class="section-title text-3xl md:text-4xl font-bold text-white inline-block">
1238
- ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
1239
- </h2>
1240
- <p class="text-gray-400 mt-4 max-w-2xl mx-auto">
1241
- Ответы на самые популярные вопросы о курсе и арбитраже трафика
1242
- </p>
1243
- </div>
1244
- <div class="max-w-3xl mx-auto">
1245
- <div class="accordion-item mb-4 border-b border-gray-700 pb-4">
1246
- <button class="accordion-btn w-full flex justify-between items-center text-left
1247
  </html>
 
77
  background-color: #000;
78
  color: #E1E1E1;
79
  scroll-behavior: smooth;
80
+ overflow-x: hidden;
81
  }
82
  h1, h2, h3, h4, h5, h6 {
83
  font-family: 'Montserrat', sans-serif;
 
140
  font-size: 12px;
141
  font-weight: 700;
142
  transform: rotate(45deg);
143
+ width: 150px;
144
+ text-align: center;
145
  }
146
  .timeline-item::before {
147
  content: '';
 
242
  background-clip: text;
243
  color: transparent;
244
  }
245
+ .blur-text {
246
+ filter: blur(2px);
247
+ opacity: 0.7;
248
+ transition: all 0.3s ease;
249
+ }
250
+ .blur-text:hover {
251
+ filter: blur(0);
252
+ opacity: 1;
253
+ }
254
+ @media (max-width: 768px) {
255
+ .price-card.popular::before {
256
+ right: -25px;
257
+ width: 120px;
258
+ font-size: 10px;
259
+ }
260
+ }
261
  </style>
262
  </head>
263
  <body class="bg-black text-gray-100">
 
333
  <i class="fas fa-users text-black text-xl"></i>
334
  </div>
335
  <div>
336
+ <div class="text-white font-bold text-xl"><span class="counter" data-target="170">0</span>+</div>
337
  <div class="text-gray-400 text-sm">УЧЕНИКОВ</div>
338
  </div>
339
  </div>
 
342
  <i class="fas fa-dollar-sign text-black text-xl"></i>
343
  </div>
344
  <div>
345
+ <div class="text-white font-bold text-xl">$<span class="counter" data-target="8920">0</span>+</div>
346
  <div class="text-gray-400 text-sm">СРЕДНИЙ ДОХОД</div>
347
  </div>
348
  </div>
 
351
  <i class="fas fa-globe text-black text-xl"></i>
352
  </div>
353
  <div>
354
+ <div class="text-white font-bold text-xl"><span class="counter" data-target="40">0</span>+</div>
355
  <div class="text-gray-400 text-sm">СТРАН</div>
356
  </div>
357
  </div>
 
359
  </div>
360
  <div class="md:w-1/2 relative">
361
  <div class="floating">
362
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
363
  alt="Traffic Master" class="rounded-xl glow-border transform rotate-3">
364
  </div>
365
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-[#f6fc79] rounded-full opacity-20 blur-xl"></div>
 
388
  <span class="text-[#f6fc79] font-bold">TRAFFIC MASTER</span> — это не просто курс, а полноценная экосистема для тех, кто хочет освоить арбитраж трафика и выйти на стабильный доход от $10,000 в месяц.
389
  </p>
390
  <p class="text-gray-300 mb-6 text-lg">
391
+ Мы не учим теории — только практика, проверенные методы и реальные кейсы. Наш подход доказал свою эффективность на более чем 170 учениках из 40 стран.
392
  </p>
393
  <p class="text-gray-300 mb-8 text-lg">
394
  Арбитраж не для всех. Но если ты вошел — ты в игре. Наша миссия — дать тебе все инструменты для победы в этой игре.
 
446
  <i class="fab fa-facebook"></i>
447
  </div>
448
  </div>
449
+ <h3 class="text-xl font-bold text-white mb-2">ПРАКТИКА С FB И TG</H3>
450
  <p class="text-gray-400">
451
  Глубокий разбор работы с Facebook Ads и Telegram. Научитесь запускать эффективные кампании.
452
  </p>
 
885
  <i class="fas fa-circle"></i>
886
  </div>
887
  <div>
888
+ <h4 class="text-lg font-bold text-white mb-1">Тестирование новых рынок</h4>
889
  <p class="text-gray-400">Стратегии входа в новые ГЕО с минимальными рисками</p>
890
  </div>
891
  </div>
 
1234
  </div>
1235
  <div class="bg-gray-900 p-8 rounded-xl text-center hover-grow">
1236
  <div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-4 border-[#f6fc79]">
1237
+ <img src="https://randomuser.me/api/portraits/men/32.jpg
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1238
  </html>
prompts.txt CHANGED
@@ -1 +1 @@
1
- Создай сайт для тематики "Курс по арбитражу трафика" Я добавил основные блоки - улучшай их и добавляй блоки еще от себя! Чтобы было информативно и круто! Не стесняйся добавлять интерактива и анимации, чтобы итоговый лендинг был максимально крутой! Придерживайся только по стилю в брендбуке! Не стесняйся добавлять элементы, картинки и тд! Только в тему! Обязательно лендинг должен быть максимально интересным! И крутым, чтобы продавал сам за себя! ⸻ 1. Цель лендинга Создание одностраничного сайта, конвертирующего посетителей в участников онлайн-курса по арбитражу трафика, с акцентом на: • Обучение с нуля до уровня заработка $10,000 в месяц • Практическую направленность и поддержку комьюнити • Прозрачную структуру курса и тарифов ⸻ 2. Структура лендинга 2.1. Хедер (верхняя навигация) • Логотип проекта • Якорные ссылки: «О курсе», «Программа», «Тарифы», «FAQ», «Контакты» • Кнопка CTA: «Получить доступ» (ведет к форме заявки) 2.2. Первый экран • УТП: «Искусство зарабатывать на трафике с любой точки мира»Подзаголовок: «Путь от не знаю ничего до $10,000 за месяц» • Кнопка CTA: «Получить доступ» 2.3. Блок «Что вы получите» • Список преимуществ: • Полная экосистема арбитража трафика • Практические навыки работы с FB, Telegram, ППГотовые шаблоны, инструкции, чек-листы • Поддержка сильного комьюнити 2.4. Блок «Для кого курс» • Целевая аудитория: • Новички без опыта • Предприниматели, желающие освоить заработок на трафике • Люди, желающие уйти в онлайн-заработок и зарабатывать в $ • Junior-арбитражники, которые хотят систематизировать знания и вырастиТаргетологи, которые хотят зарабатывать больше и не искать клиентов 2.5. Блок «Чему вы научитесь» • Список навыков: • Настройка и запуск связок • Работа с ПП и рекламодателямиСоздание посадочных страниц, запуск ботов, сбор воронок • Масштабирование и работа в команде • Анализ аудитории и ГЕО 2.6. Блок «Программа курса» • Модули: • Введение: Что такое арбитраж, как правильно учиться, перспективы • База и подготовка: Инструменты, сервисы • Facebook: Глубокий разбор и запуск рекламыВертикали: Разбор популярных вертикалей ембла, нутра, бинарки и др.) • ГЕО и Аудитории: Подходы, выбор стран, психография • Креативы: Поиск, создание, анализ эффективностиПосадки и Трекеры: Кейтаро, ленды, прокладки • Telegram и CRM: Боты, каналы, обработка лидов • Работа с ПП: Как находить и выстраивать отношения • Масштабирование и карьера: Команды, делегирование, рост 2.7. Блок «Бонусы» • Чек-листы по каждому блоку • Шаблоны трекеров, брифов, посадочных Список ТОП-проверенных ППДоступ в закрытый чат • Обновления курса 2.8. Блок «Тарифы»Тарифы: • Start: Доступ ко всему обучающему контенту, участие в общем чате студентов • Pro Group: Полный доступ к курсу, участие в закрытой фокус-группе, чат с кураторами и поддержк�� по обучению, бонусыMentor Edition: Персональное сопровождение наставником по трафику, разбор кейсов, помощь на каждом этапе, все бонусы из Pro Group 2.9. Блок «О нас»Информация об основателе и команде TMT • История создания курса • Результаты и достижения 2.10. Блок «FAQ» • Часто задаваемые вопросы и ответы 2.11. Футер • Контактная информация • Ссылки на социальные сетиПолитика конфиденциальности • Пользовательское соглашение ⸻ 3. Функциональные требования • Адаптивная верстка для всех устройств Форма заявки с полями: имя, email, телефонИнтеграция с CRM для обработки заявок • Возможность подключения аналит Используй для дизайна - данный брендбук! 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% ---
 
1
+ 1. Фиксация на мобильной версии (ограничение прокрутки по горизонтали) Задача: Убрать возможность горизонтальной прокрутки, оставить только вертикальную. 2. Изображение в первом блоке Задача: Поменять картинку, чтобы она лучше подходила к контексту и вписывалась в общий дизайн. Решение: • Подберите картинку, соответствующую теме курса и вызывающую интерес, • Проверьте, чтобы изображение было качественным, оптимизированным для мобильных устройств и не нарушало структуру страницы. 3. Первый блок — текст с количеством учеников и доходом Задача: Добавить или исправить информацию в первом блоке. Решение:Убедитесь, что данные 170+ учеников, средний доход 8920$+, страны 40+ отображаются корректно и не перекрывают другие элементы.Используйте стиль, который делает текст читаемым и выделяет ключевую информацию. 4. Модули кнопки не работают Задача: Сделать кнопки в блоках с модулями кликабельными и добавление функционала для открытия других модулей. Решение:Для каждого модуля реализовать, чтобы при нажатии на кнопку отображался соответствующий модуль.Для всех модулей, кроме первого, сделать текстразмытным”, чтобы он не был полностью видим, но все равно давал понимание о содержимом - что оно там есть! 5. Тарифы — накладка “Популярный” Задача: Исправить накладку “Популярный” на втором тарифе, чтобы она была ровной и не съезжала. Решение:Проверьте стили для элемента “Популярный” корее всего, это позиционирование или отступы, которые не учитывают ширину текста).Убедитесь, что для всех экранов, включая мобильные, накладка выглядит красиво и правильно выровнена, с правильными отступами, чтобы текст был полностью читаем. Техническое задание для мобильной версии сайта: 1. Фиксация прокрутки:Убрать горизонтальную прокрутку.Оставить только вертикальную прокрутку страницы. • Добавить свойство CSS: overflow-x: hidden; для предотвращения горизонтальной прокрутки. 2. Изображение в первом блоке:Заменить текущее изображение на более подходящее по контексту. • Выбрать картинку, которая органично вписывается в дизайн и тему курса.Убедиться, что изображение оптимизировано для мобильных устройств. 3. Информация в первом блоке:Отобразить текст с информацией о количестве учеников, среднем доходе и странах: • “170+ учеников” • “Средний доход 8920$+” • “Страны 40+” • Убедиться, что текст читаем и гармонично вписывается в дизайн. 4. Модули — кликабельность кнопок: • Реализовать кликабельность кнопок в блоках с модулями.При нажатии на кнопку должен открываться соответствующий модуль. • Для всех блоков, кроме первого, добавить эффект размытия текста (или полупрозрачность), чтобы текст был видим, но не полностью чётким. 5. Тарифывыравнивание накладки “Популярный”: • Исправить накладку “Популярный на втором тарифе, чтобы она выравнивалась правильно и текст не съезжал.Проверить стили и отступы для корректного отображения.