|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Конвертирующие креативы для женской аудитории</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.creative-card { |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
.creative-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #555; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.accordion-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans text-gray-800"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<section class="mb-12 text-center"> |
|
|
<div class="bg-pink-50 border-l-4 border-pink-500 p-4 mb-6"> |
|
|
<p class="text-pink-700"><i class="fas fa-bullseye mr-2"></i>Цель: Создавать конвертирующие креативы под серые вертикали (гемблинг, беттинг, дейтинг, нутра), заточенные под женскую аудиторию</p> |
|
|
</div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-pink-600"><i class="fas fa-ad mr-2"></i>Креативы для женской аудитории</h1> |
|
|
<p class="text-lg text-gray-600 mb-6">Полное руководство по созданию высококонвертирующих креативов для серых вертикалей</p> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-8"> |
|
|
<div class="bg-pink-100 text-pink-800 px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-female mr-2"></i> Женская ЦА |
|
|
</div> |
|
|
<div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-chart-line mr-2"></i> Конверсии |
|
|
</div> |
|
|
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-paint-brush mr-2"></i> Figma шаблоны |
|
|
</div> |
|
|
<div class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Триггеры |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-pink-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-sitemap text-pink-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Как должен быть построен креатив</h2> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-700 mb-6">Креатив — это не просто красивая картинка или видео. Это структурированное сообщение, цель которого:</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-eye text-pink-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Захватить внимание</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Первые 0.5-1 секунды должны цеплять</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-heart-crack text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Выявить боль</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Показать проблему, с которой сталкивается героиня</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Дать решение</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Как героиня решила свою проблему</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-hand-point-up text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Побудить к действию</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Четкий призыв к действию (CTA)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-fire mr-2 text-pink-500"></i>Рабочая формула: Удар → Конфликт → Решение</h3> |
|
|
|
|
|
<div class="bg-pink-50 border-l-4 border-pink-400 p-4 rounded-md"> |
|
|
<div class="flex items-start mb-2"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-heart-crack text-pink-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-pink-800">Удар (проблема)</h4> |
|
|
<p class="text-pink-700">«Ушла от мужа с двумя детьми...»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-2"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-bolt text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-purple-800">Конфликт (эмоция)</h4> |
|
|
<p class="text-purple-700">«Через неделю зарабатывала больше него.»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check-circle text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-blue-800">Решение (выход)</h4> |
|
|
<p class="text-blue-700">«Не магия. Просто гемблинг. Просто мозги.»</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fab fa-figma text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Шаблоны Figma для быстрой сборки</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fab fa-figma text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Креативы под серое</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Женские образы, сильные заголовки для гемблинга, дейтинга, крипты, нутры</p> |
|
|
<a href="https://www.figma.com/design/A1aJh2SLOynWYGIZNKBZmu/%D0%9A%D1%80%D0%B5%D0%B0%D1%82%D0%B8%D0%B2%D1%8B-%D0%BF%D0%BE%D0%B4-%D1%81%D0%B5%D1%80%D0%BE%D0%B5?node-id=0-1&p=f&t=ff6bLqIPjR7JN8ly-0" target="_blank" class="text-blue-600 hover:underline flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-1"></i> Открыть шаблон |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fab fa-figma text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Шаблоны форматов</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Универсальные основы под PNG, Reels, TikTok, Shorts</p> |
|
|
<a href="https://www.figma.com/design/Tx9OkYJrf2j34mJm1iCbdA/%D0%A8%D0%90%D0%91%D0%9B%D0%9E%D0%9D%D0%AB-%D0%9A%D0%A0%D0%95%D0%90%D0%A2%D0%98%D0%92%D0%9E%D0%92?node-id=0-1&p=f&t=ubc4TD5A6SyrAWFf-0" target="_blank" class="text-purple-600 hover:underline flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-1"></i> Открыть шаблон |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-question-circle mr-2 text-blue-500"></i>Как использовать шаблоны</h3> |
|
|
<ol class="list-decimal pl-5 space-y-2 text-gray-700"> |
|
|
<li>Делаешь <strong>Duplicate</strong> в свой workspace</li> |
|
|
<li>Заменяешь текст и фото, оставляя композицию</li> |
|
|
<li>Цвет фона — белый, CTA — контрастный (жёлтый, красный, чёрный)</li> |
|
|
<li>Слой CTA всегда вверху, текст — читаемый и короткий</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 border-l-4 border-blue-400 p-4"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2"><i class="fas fa-lightbulb mr-2"></i>Рекомендации по оформлению</h4> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-blue-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-blue-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-blue-700 border-b">Как оформлять</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Заголовок</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">1 строка, жирно, желательно с цифрой или фактом</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Фон</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Белый или очень светлый, без узоров</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой (девушка)</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Реальная эмоция, не сток, желательно с лицом</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Текст</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">До 15 слов в одном экране</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Анимация (если видео)</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Начинается в первые 0.5–1 сек</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-tools text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Инструменты для создания креативов</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-image mr-2 text-green-500"></i>Статика (баннеры, истории, карточки)</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fab fa-figma text-blue-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Figma</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Для базовой сборки, текстовки, отрисовки по шаблону</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-palette text-purple-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Canva</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Быстрое оформление под TikTok / Instagram / PNG</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-crop-alt text-pink-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Photoshop</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Ручная ретушь или кастом под образы</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-4"> |
|
|
<h4 class="font-semibold text-green-800 mb-2"><i class="fas fa-project-diagram mr-2"></i>Мини-флоу для статики</h4> |
|
|
<ol class="list-decimal pl-5 space-y-1 text-green-700"> |
|
|
<li>Дублируешь шаблон в Figma</li> |
|
|
<li>Меняешь фон, фото, текст</li> |
|
|
<li>Экспорт → загрузка в Canva → финишная обработка (анимация/CTA)</li> |
|
|
<li>Сохраняешь в формате 1080x1080 или 1080x1920</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-video mr-2 text-green-500"></i>Видео (Shorts, Reels, TikTok)</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-cut text-red-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">CapCut</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Текст, звук, маски, шаблоны (десктоп / мобилка)</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-robot text-yellow-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Runway ML</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">AI-эффекты, динамика, удаление фона</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-film text-blue-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">VN Video Editor</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Альтернатива CapCut</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-microphone text-purple-600"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">ElevenLabs</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Реалистичная женская озвучка</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 border-l-4 border-green-400 p-4"> |
|
|
<h4 class="font-semibold text-green-800 mb-2"><i class="fas fa-project-diagram mr-2"></i>Мини-флоу для видео</h4> |
|
|
<ol class="list-decimal pl-5 space-y-1 text-green-700"> |
|
|
<li>Загружаешь шаблон/героя в CapCut</li> |
|
|
<li>Добавляешь титры, эмоцию, короткие фразы</li> |
|
|
<li>Накладываешь звуковой трек или AI-озвучку</li> |
|
|
<li>Экспортируешь в 1080x1920</li> |
|
|
</ol> |
|
|
<p class="text-green-700 mt-2"><i class="fas fa-exclamation-triangle mr-1"></i> <strong>Важно:</strong> первые 0.5–1.5 секунды — это крючок. Если нет удара — скролл дальше.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-pink-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-brain text-pink-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Эмоциональные триггеры для женской аудитории</h2> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-700 mb-6">Женская аудитория — эмоциональна, сочувственна, чувствительна к несправедливости и истории. Мы используем это, чтобы сделать креатив "про неё".</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-heart-crack text-red-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Стресс и одиночество</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Развелась и осталась с долгами, детьми и без поддержки...»</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-baby text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Материнство</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Сыну было нечего надеть в школу. И она не выдержала...»</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-ghost text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Месть мужчине</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Он ушёл к другой. А она начала зарабатывать в 3 раза больше»</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-crown text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Независимость</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Сама себе босс. Никаких "муж сказал" и "разрешил"»</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-bed text-yellow-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Нежелание работать</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Больше никаких начальников. Только ноутбук и телефон»</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-hand-holding-heart text-pink-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">"Как ты тоже можешь"</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">«Она просто повторила шаги. И заработала с первого дня»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-pink-50 border-l-4 border-pink-400 p-4"> |
|
|
<h4 class="font-semibold text-pink-800 mb-2"><i class="fas fa-eye mr-2"></i>Визуальное оформление</h4> |
|
|
<p class="text-pink-700">Используйте лицо женщины (реальная эмоция), простой фон, и текст, который бьёт в ситуацию, а не в логику.</p> |
|
|
|
|
|
<div class="mt-3 p-3 bg-white rounded border border-pink-200"> |
|
|
<p class="text-pink-600 mb-1"><i class="fas fa-comment-dots mr-1"></i> <strong>Пример креатива:</strong></p> |
|
|
<p class="text-gray-700 mb-1">😢 "После развода она осталась без работы и без копейки..."</p> |
|
|
<p class="text-gray-700 mb-1">🧠 "Сестра скинула ей сайт — теперь у неё $300 в день."</p> |
|
|
<p class="text-gray-700">👉 "Проверить, как она это сделала →"</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-random text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Адаптация креатива под вертикаль</h2> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-700 mb-6">Шаблонная структура: <strong>Герой → Ситуация → Действие → Результат → CTA</strong></p> |
|
|
|
|
|
|
|
|
<div class="flex border-b border-gray-200 mb-6"> |
|
|
<button class="tab-btn px-4 py-2 font-medium border-b-2 border-purple-600 text-purple-600" data-tab="gambling">Гемблинг</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-600" data-tab="betting">Беттинг</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-600" data-tab="dating">Дейтинг</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-600" data-tab="crypto">Крипта</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-600" data-tab="nutra">Нутра</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="gambling" class="tab-content active"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-purple-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-purple-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-purple-700 border-b">Пример</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Девушка с проблемами — долги, ребёнок, развод</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Ситуация</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Видит рекламу, «решает попробовать»</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Действие</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Играет, «случайно» выигрывает</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Результат</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">$2700 за утро, эмоции, новая жизнь</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Проверить способ», «Я тоже хочу!»</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-purple-50 border-l-4 border-purple-400 p-4 mt-4"> |
|
|
<p class="text-purple-700"><strong>Триггер:</strong> «У неё не было даже на хлеб. А теперь она заказывает на Lamoda, не глядя на цены.»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="betting" class="tab-content"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-blue-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-blue-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-blue-700 border-b">Пример</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Она всегда считала, что ставки — это не для неё»</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Ситуация</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Подруга рассказала про прогнозы на 1 матч в день</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Действие</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Зарегистрировалась, попробовала</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Результат</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">С первой ставки — $180</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Поставить, как она», «Узнать прогноз»</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mt-4"> |
|
|
<p class="text-blue-700"><strong>Триггер:</strong> «Женщина в декрете выиграла больше мужа за вечер. Ставка — 200₸. Выигрыш — 85,000₸.»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="dating" class="tab-content"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-pink-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-pink-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-pink-700 border-b">Пример</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Одинокая девушка, с плохим опытом</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Ситуация</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Находит «нормальное» приложение</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Действие</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Общение, подарок, реальные деньги от парня</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Результат</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Он перевёл ей $150 просто за общение»</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Проверить чат», «Познакомиться»</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-pink-50 border-l-4 border-pink-400 p-4 mt-4"> |
|
|
<p class="text-pink-700"><strong>Триггер:</strong> «Она нашла не любовь. Она нашла спонсора.»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="crypto" class="tab-content"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-yellow-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-yellow-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-yellow-700 border-b">Пример</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Безработная девушка в поиске дохода</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Ситуация</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Наткнулась на видео о том, как инвестируют новички</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Действие</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Купила на $50 — просто по шагам</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Результат</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Через неделю — $650</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Инструкция для новичков», «Как она это сделала?»</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-4"> |
|
|
<p class="text-yellow-700"><strong>Триггер:</strong> «Она даже не знала, что такое крипта. А теперь у неё больше, чем у её начальника.»</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="nutra" class="tab-content"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-green-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-green-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-green-700 border-b">Пример</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Герой</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Девушка с лишним весом и комплексами</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Ситуация</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Подруга скинула капли / чай / крем</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Действие</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Использует 10 дней</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Результат</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">–11 кг, без тренажёра и диет</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Секрет из Азии», «Попробовать курс»</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-green-50 border-l-4 border-green-400 p-4 mt-4"> |
|
|
<p class="text-green-700"><strong>Триггер:</strong> «Она не похудела. Она изменилась. А он вернулся просить прощения.»</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-book text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Готовая библиотека фраз и шаблонов</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<h3 class="font-medium text-gray-800 mb-3"><i class="fas fa-heading mr-2 text-indigo-500"></i>Заголовки (Hook)</h3> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
|
|
<li>«Ей сказали: "Ты не справишься!"»</li> |
|
|
<li>«Она была без денег. Теперь у неё Bentley.»</li> |
|
|
<li>«Они смеялись. А теперь она — топ клиент в банке.»</li> |
|
|
<li>«Вы бы поверили? А это реальность.»</li> |
|
|
<li>«Женская схема. Мужчины не поймут.»</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<h3 class="font-medium text-gray-800 mb-3"><i class="fas fa-align-left mr-2 text-indigo-500"></i>Подводки (История)</h3> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
|
|
<li>«До недавнего времени она работала уборщицей...»</li> |
|
|
<li>«Когда он ушёл, она осталась одна — и нашла выход.»</li> |
|
|
<li>«Больше никаких заказов на Wildberries. Теперь — свои деньги.»</li> |
|
|
<li>«Это не реклама. Это факт.»</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded border border-gray-200 creative-card"> |
|
|
<h3 class="font-medium text-gray-800 mb-3"><i class="fas fa-hand-pointer mr-2 text-indigo-500"></i>CTA (Призыв)</h3> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
|
|
<li>«Проверить способ»</li> |
|
|
<li>«Узнать, как она сделала это»</li> |
|
|
<li>«Я тоже так хочу»</li> |
|
|
<li>«Получить инструкцию»</li> |
|
|
<li>«Хочу такие же деньги»</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mt-6"> |
|
|
<p class="text-indigo-700"><strong>Все фразы протестированы</strong> и построены на эмоциях + триггерах, не в лоб и не «по-мужски».</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-red-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-times-circle text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Ошибки, которые сливают бюджет</h2> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-700 mb-6">Самые частые фейлы, из-за которых креатив не работает вообще:</p> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-red-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-red-700 border-b">Ошибка</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-red-700 border-b">Почему не работает</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Стоковые фото</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Никто не верит людям с идеальной улыбкой из фотобанка</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Сухие фразы без боли</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">"Инвестируй" / "Попробуй" — ни о чём. Нужен контекст боли</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Много текста на экране</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Пользователь просто скроллит мимо</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Нереалистичные цифры</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">"+1000$ в день" = бан + недоверие</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Нет героя или эмоции</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Кто сделал? Почему? Где лицо, которому верят?</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Пустая анимация без смысла</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">Анимашки ради движухи = минус вовлечённость</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Сложный CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">"Зарегистрируйся на платформе, подтвердив почту..."</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4 mt-4"> |
|
|
<p class="text-red-700"><strong>Важно:</strong> Женская ЦА эмпатична, но критична. Всё должно быть в рамках «реального кейса», эмоция — правдоподобная, визуал — «как у неё может быть».</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12 bg-white rounded-lg shadow-sm border border-gray-100 p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold">Чеклист для каждого креатива</h2> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-700 mb-6">Хочешь минимум тестов — используй максимум подготовки. Вот список, который должен быть закрыт в каждом креативе (и в видео, и в статике):</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-list-check mr-2 text-green-500"></i>Базовая структура</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Лицо героя:</strong> не сток, есть эмоция, понятно — это "она"</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Проблема/триггер:</strong> сразу понятно, что у неё было не всё гладко</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Простое решение:</strong> либо визуально, либо текстом — "что она сделала"</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Простой CTA:</strong> "Проверить", "Забрать", "Хочу так же" (не усложняй)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Формат под мобилу:</strong> вертикаль 1080×1920 или 1:1</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check text-green-600 text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-700"><strong>Тестируемость:</strong> разные варианты: образ + текст + цвет</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-vial mr-2 text-green-500"></i>A/B по минимуму</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border border-gray-200"> |
|
|
<thead class="bg-green-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-green-700 border-b">Элемент</th> |
|
|
<th class="px-4 py-2 text-left text-sm font-medium text-green-700 border-b">Вариации</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Образ</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">блондинка / брюнетка / возраст</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Проблема</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">деньги / одиночество / дети</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Заголовок</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">с цифрой / с эмоцией / с вопросом</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-50"> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">CTA</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">«Узнать как» / «Хочу так же»</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-700">Цвет кнопки</td> |
|
|
<td class="px-4 py-2 text-sm text-gray-700">жёлтая / красная / чёрная</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 text-center"> |
|
|
<h2 class="text-2xl font-bold mb-4">Готов создавать конвертирующие креативы?</h2> |
|
|
<p class="text-gray-700 mb-6">Используй эти знания для создания высокоэффективных креативов под женскую аудиторию</p> |
|
|
<button class="bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-8 rounded-md transition duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-magic mr-2"></i>Начать создавать |
|
|
</button> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(b => { |
|
|
b.classList.remove('border-purple-600', 'text-purple-600'); |
|
|
b.classList.add('text-gray-600'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
btn.classList.add('border-purple-600', 'text-purple-600'); |
|
|
btn.classList.remove('text-gray-600'); |
|
|
|
|
|
const tabId = btn.getAttribute('data-tab'); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.accordion-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const content = btn.nextElementSibling; |
|
|
const icon = btn.querySelector('i'); |
|
|
|
|
|
if(content.style.maxHeight) { |
|
|
content.style.maxHeight = null; |
|
|
icon.classList.remove('fa-minus'); |
|
|
icon.classList.add('fa-plus'); |
|
|
} else { |
|
|
content.style.maxHeight = content.scrollHeight + 'px'; |
|
|
icon.classList.remove('fa-plus'); |
|
|
icon.classList.add('fa-minus'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/uroki2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
