Spaces:
Running
Running
<html lang="ru"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Traffic Master: Стань Мастером Таргетированной Рекламы</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> | |
.gradient-bg { | |
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
} | |
.hover-scale { | |
transition: transform 0.3s ease; | |
} | |
.hover-scale:hover { | |
transform: scale(1.03); | |
} | |
.card-shadow { | |
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2); | |
} | |
.pulse-animation { | |
animation: pulse 2s infinite; | |
} | |
@keyframes pulse { | |
0% { transform: scale(1); } | |
50% { transform: scale(1.05); } | |
100% { transform: scale(1); } | |
} | |
.scroll-smooth { | |
scroll-behavior: smooth; | |
} | |
</style> | |
</head> | |
<body class="font-sans scroll-smooth"> | |
<!-- Navigation --> | |
<nav class="bg-white shadow-lg fixed w-full z-50"> | |
<div class="max-w-7xl mx-auto px-4"> | |
<div class="flex justify-between items-center py-4"> | |
<div class="flex items-center"> | |
<span class="text-2xl font-bold text-indigo-600">Traffic Master</span> | |
</div> | |
<div class="hidden md:flex space-x-8"> | |
<a href="#about" class="text-gray-700 hover:text-indigo-600">О курсе</a> | |
<a href="#program" class="text-gray-700 hover:text-indigo-600">Программа</a> | |
<a href="#results" class="text-gray-700 hover:text-indigo-600">Результаты</a> | |
<a href="#reviews" class="text-gray-700 hover:text-indigo-600">Отзывы</a> | |
<a href="#pricing" class="text-gray-700 hover:text-indigo-600">Тарифы</a> | |
</div> | |
<div class="md:hidden"> | |
<button class="mobile-menu-button p-2 focus:outline-none"> | |
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
</svg> | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Mobile menu --> | |
<div class="mobile-menu hidden md:hidden bg-white shadow-lg"> | |
<div class="px-2 pt-2 pb-4 space-y-1"> | |
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">О курсе</a> | |
<a href="#program" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Программа</a> | |
<a href="#results" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Результаты</a> | |
<a href="#reviews" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Отзывы</a> | |
<a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Тарифы</a> | |
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Контакты</a> | |
</div> | |
</div> | |
</nav> | |
<!-- Hero Section --> | |
<section class="gradient-bg text-white pt-32 pb-20 md:pt-40 md:pb-28"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="md:flex items-center justify-between"> | |
<div class="md:w-1/2 mb-10 md:mb-0"> | |
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Стань Мастером Таргетированной Рекламы</h1> | |
<p class="text-xl md:text-2xl mb-8">Комплексное обучение от А до Я для быстрого старта и стабильного дохода.</p> | |
<div class="mb-8"> | |
<p class="flex items-center mb-2"><i class="fas fa-check-circle mr-3 text-green-300"></i> Получите практические навыки настройки рекламы</p> | |
<p class="flex items-center mb-2"><i class="fas fa-check-circle mr-3 text-green-300"></i> Научитесь привлекать клиентов и увеличивать прибыль</p> | |
<p class="flex items-center"><i class="fas fa-check-circle mr-3 text-green-300"></i> Освойте востребованную профессию с нуля</p> | |
</div> | |
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
<a href="#pricing" class="bg-white text-indigo-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-lg transition duration-300 pulse-animation">Записаться на курс</a> | |
<a href="#program" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-600 font-bold py-4 px-8 rounded-lg text-lg transition duration-300">Узнать подробнее</a> | |
</div> | |
</div> | |
<div class="md:w-1/2 flex justify-center"> | |
<div class="relative w-full max-w-md"> | |
<div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
<div class="relative"> | |
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Курс по таргетированной рекламе" class="rounded-lg shadow-2xl"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Problems Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Вы сталкиваетесь с этими проблемами?</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Большинство новичек в таргетированной рекламе совершают одни и те же ошибки</p> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-question-circle text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Не знаете, как начать зарабатывать онлайн?</h3> | |
<p class="text-gray-600">Много информации, но нет четкого плана действий и понимания, с чего начать.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-brain text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Таргет кажется сложным и непонятным?</h3> | |
<p class="text-gray-600">Множество настроек, аудиторий и стратегий вызывают путаницу и непонимание.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-money-bill-wave text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Сливаете бюджет без видимых результатов?</h3> | |
<p class="text-gray-600">Реклама не окупается, а деньги уходят впустую из-за неправильных настроек.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-briefcase text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Хотите востребованную профессию с гибким графиком?</h3> | |
<p class="text-gray-600">Мечтаете о работе из любой точки мира, но не знаете, как получить нужные навыки.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-hands-helping text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Нуждаетесь в поддержке и проверенных методиках?</h3> | |
<p class="text-gray-600">Онлайн-курсов много, но нет уверенности, что они дадут реальные практические навыки.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-chart-line text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Хотите масштабировать бизнес с помощью рекламы?</h3> | |
<p class="text-gray-600">Есть бизнес, но не получается привлекать достаточно клиентов через интернет.</p> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Solution Section --> | |
<section class="py-16 bg-white" id="about"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="lg:flex items-center"> | |
<div class="lg:w-1/2 mb-12 lg:mb-0"> | |
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt="Решение проблем с таргетированной рекламой" class="rounded-lg shadow-xl"> | |
</div> | |
<div class="lg:w-1/2 lg:pl-12"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Решение — курс Traffic Master</h2> | |
<p class="text-xl text-gray-600 mb-8">Ваш пошаговый путь к освоению таргетированной рекламы с нуля до профессионала.</p> | |
<div class="space-y-6"> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
<i class="fas fa-graduation-cap"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-lg font-medium text-gray-800">Практический подход</h3> | |
<p class="mt-2 text-gray-600">Учим не только теории, но и реальным инструментам, которые работают прямо сейчас.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
<i class="fas fa-sitemap"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-lg font-medium text-gray-800">Система обучения</h3> | |
<p class="mt-2 text-gray-600">От основ до продвинутых стратегий — структурированная программа без "воды".</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
<i class="fas fa-shield-alt"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-lg font-medium text-gray-800">Избавьтесь от страха и ошибок</h3> | |
<p class="mt-2 text-gray-600">Получите проверенные методики, которые уже принесли результат сотням студентов.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
<i class="fas fa-wallet"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-lg font-medium text-gray-800">Начните зарабатывать</h3> | |
<p class="mt-2 text-gray-600">Привлекайте клиентов себе и другим бизнесам, создавая эффективные рекламные кампании.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- For Whom Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Для кого этот курс?</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Traffic Master подойдет вам, если вы относитесь к одной из этих категорий</p> | |
</div> | |
<div class="grid md:grid-cols-2 gap-8"> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-user-graduate text-2xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-xl font-bold text-gray-800">Новички</h3> | |
<p class="text-gray-600">Которые хотят освоить новую профессию с нуля</p> | |
</div> | |
</div> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Получите структурированные знания по всем аспектам таргета</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Научитесь настраивать рекламу с нуля без опыта</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Освоите востребованную профессию за несколько недель</span> | |
</li> | |
</ul> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-user-tie text-2xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-xl font-bold text-gray-800">Предприниматели</h3> | |
<p class="text-gray-600">Желающие самостоятельно запускать рекламу</p> | |
</div> | |
</div> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Научитесь привлекать клиентов в свой бизнес</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Сократите расходы на маркетинг, делая рекламу сами</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Увеличите продажи с помощью правильно настроенных кампаний</span> | |
</li> | |
</ul> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-chart-pie text-2xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-xl font-bold text-gray-800">Маркетологи</h3> | |
<p class="text-gray-600">Которые хотят расширить свои компетенции</p> | |
</div> | |
</div> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Углубите знания в таргетированной рекламе</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Освоите новые инструменты и стратегии</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Увеличите свою ценность как специалиста</span> | |
</li> | |
</ul> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-laptop-code text-2xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h3 class="text-xl font-bold text-gray-800">Фрилансеры</h3> | |
<p class="text-gray-600">Ищущие дополнительные источники дохода</p> | |
</div> | |
</div> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Получите новую востребованную услугу для предложения клиентам</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Увеличите свой доход, помогая бизнесу с рекламой</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
<span>Сможете работать удаленно из любой точки мира</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Benefits Section --> | |
<section class="py-16 bg-white" id="results"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Преимущества и результаты</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Что вы получите после прохождения курса Traffic Master</p> | |
</div> | |
<div class="grid md:grid-cols-2 gap-12"> | |
<div> | |
<h3 class="text-2xl font-bold text-gray-800 mb-6">Преимущества курса</h3> | |
<div class="space-y-6"> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-bolt"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Актуальная программа</h4> | |
<p class="mt-2 text-gray-600">Обучение основано на реальном опыте и самых современных инструментах таргетированной рекламы.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-headset"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Поддержка экспертов</h4> | |
<p class="mt-2 text-gray-600">Во время обучения вы получите ответы на все вопросы и помощь в сложных ситуациях.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-users"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Закрытое сообщество</h4> | |
<p class="mt-2 text-gray-600">Доступ к чату выпускников, где можно обмениваться опытом и находить партнеров для проектов.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-laptop"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Удобный формат</h4> | |
<p class="mt-2 text-gray-600">Онлайн-обучение в удобное время с доступом к материалам 24/7 с любого устройства.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
<i class="fas fa-sync-alt"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Постоянные обновления</h4> | |
<p class="mt-2 text-gray-600">Материалы курса регулярно обновляются в соответствии с изменениями в рекламных кабинетах.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<h3 class="text-2xl font-bold text-gray-800 mb-6">Ваши результаты</h3> | |
<div class="space-y-6"> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
<i class="fas fa-ad"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Умение запускать прибыльные кампании</h4> | |
<p class="mt-2 text-gray-600">Вы сможете создавать рекламу, которая действительно приносит клиентов и прибыль.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
<i class="fas fa-briefcase"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Вострбованная профессия</h4> | |
<p class="mt-2 text-gray-600">Получите удаленную специальность с высоким доходом и возможностью работать из любой точки мира.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
<i class="fas fa-money-bill-wave"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Рост дохода</h4> | |
<p class="mt-2 text-gray-600">Увеличите свой заработок, оказывая услуги бизнесу или продвигая собственные проекты.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
<i class="fas fa-project-diagram"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Интересные проекты</h4> | |
<p class="mt-2 text-gray-600">Получите возможность работать с разными нишами и бизнесами, постоянно развиваясь.</p> | |
</div> | |
</div> | |
<div class="flex"> | |
<div class="flex-shrink-0"> | |
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
<i class="fas fa-user-shield"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<h4 class="text-lg font-medium text-gray-800">Уверенность в себе</h4> | |
<p class="mt-2 text-gray-600">Перестанете бояться рекламных кабинетов и будете точно знать, как добиваться результатов.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Program Section --> | |
<section class="py-16 bg-gray-50" id="program"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Программа курса</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">7 модулей, которые превратят вас из новичка в специалиста по таргетированной рекламе</p> | |
</div> | |
<div class="max-w-3xl mx-auto"> | |
<div class="space-y-8"> | |
<!-- Module 1 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-indigo-600 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">01</div> | |
<h3 class="text-xl font-bold">Введение в таргетированную рекламу</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i> | |
<span>Основные понятия и принципы работы</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i> | |
<span>Обзор рекламных площадок: Facebook, Instagram, VK</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i> | |
<span>Как работает алгоритм показа рекламы</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i> | |
<span>Виды рекламных кампаний и их цели</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 2 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-indigo-700 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">02</div> | |
<h3 class="text-xl font-bold">Анализ целевой аудитории</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-600 mt-1 mr-3"></i> | |
<span>Методы исследования целевой аудитории</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-600 mt-1 mr-3"></i> | |
<span>Создание аватара клиента</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-600 mt-1 mr-3"></i> | |
<span>Сегментация аудитории для точного таргетинга</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-600 mt-1 mr-3"></i> | |
<span>Инструменты для анализа поведения аудитории</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 3 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-indigo-800 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">03</div> | |
<h3 class="text-xl font-bold">Создание эффективных объявлений</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-700 mt-1 mr-3"></i> | |
<span>Принципы составления продающих текстов</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-700 mt-1 mr-3"></i> | |
<span>Дизайн креативов: что работает в 2023 году</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-700 mt-1 mr-3"></i> | |
<span>Форматы объявлений и их особенности</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-700 mt-1 mr-3"></i> | |
<span>A/B тестирование: как найти лучший вариант</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 4 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-indigo-900 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">04</div> | |
<h3 class="text-xl font-bold">Работа с рекламными кабинетами</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-800 mt-1 mr-3"></i> | |
<span>Настройка бизнес-менеджера и рекламного кабинета</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-800 mt-1 mr-3"></i> | |
<span>Создание и структурирование рекламных кампаний</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-800 mt-1 mr-3"></i> | |
<span>Настройка пикселя и конверсий</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-indigo-800 mt-1 mr-3"></i> | |
<span>Работа с каталогами товаров (для e-commerce)</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 5 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-purple-800 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">05</div> | |
<h3 class="text-xl font-bold">Запуск и оптимизация кампаний</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-700 mt-1 mr-3"></i> | |
<span>Стратегии запуска: тестовый и основной этапы</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-700 mt-1 mr-3"></i> | |
<span>Бюджетирование: как распределять бюджет</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-700 mt-1 mr-3"></i> | |
<span>Методы оптимизации работающих кампаний</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-700 mt-1 mr-3"></i> | |
<span>Когда и как масштабировать успешные кампании</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 6 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-purple-700 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">06</div> | |
<h3 class="text-xl font-bold">Аналитика и отчетность</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i> | |
<span>Ключевые метрики и их интерпретация</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i> | |
<span>Инструменты для анализа эффективности</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i> | |
<span>Как считать ROI и другие финансовые показатели</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i> | |
<span>Подготовка отчетов для клиентов</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<!-- Module 7 --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale"> | |
<div class="md:flex"> | |
<div class="md:w-1/3 bg-purple-600 p-6 flex items-center justify-center"> | |
<div class="text-center text-white"> | |
<div class="text-4xl font-bold mb-2">07</div> | |
<h3 class="text-xl font-bold">Продвинутые стратегии</h3> | |
</div> | |
</div> | |
<div class="md:w-2/3 p-6"> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i> | |
<span>Ретаргетинг и работа с теплой аудиторией</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i> | |
<span>Lookalike аудитории: как находить новых клиентов</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i> | |
<span>Автоматизация рекламных процессов</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i> | |
<span>Сложные случаи и нестандартные решения</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="mt-12 text-center"> | |
<h3 class="text-2xl font-bold text-gray-800 mb-4">Бонусные модули</h3> | |
<div class="grid md:grid-cols-2 gap-6"> | |
<div class="bg-white p-6 rounded-lg shadow-md"> | |
<div class="flex items-center justify-center w-16 h-16 bg-yellow-100 rounded-full mx-auto mb-4"> | |
<i class="fas fa-gift text-yellow-500 text-2xl"></i> | |
</div> | |
<h4 class="text-lg font-bold text-gray-800 mb-2">Работа с нишами</h4> | |
<p class="text-gray-600">Особенности настройки рекламы для e-commerce, услуг, инфобизнеса и других направлений.</p> | |
</div> | |
<div class="bg-white p-6 rounded-lg shadow-md"> | |
<div class="flex items-center justify-center w-16 h-16 bg-yellow-100 rounded-full mx-auto mb-4"> | |
<i class="fas fa-gift text-yellow-500 text-2xl"></i> | |
</div> | |
<h4 class="text-lg font-bold text-gray-800 mb-2">Копирайтинг для рекламы</h4> | |
<p class="text-gray-600">Как писать тексты, которые продают и увеличивают конверсию объявлений.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Author Section --> | |
<section class="py-16 bg-white"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="lg:flex items-center"> | |
<div class="lg:w-1/3 mb-10 lg:mb-0 flex justify-center"> | |
<div class="relative"> | |
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-indigo-500 shadow-lg"> | |
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Автор курса" class="w-full h-full object-cover"> | |
</div> | |
<div class="absolute -bottom-3 -right-3 bg-white p-2 rounded-full shadow-md"> | |
<div class="bg-indigo-600 w-12 h-12 rounded-full flex items-center justify-center"> | |
<i class="fas fa-award text-white text-xl"></i> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="lg:w-2/3 lg:pl-12"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Автор курса</h2> | |
<h3 class="text-2xl text-indigo-600 font-bold mb-4">Александр Петров</h3> | |
<p class="text-xl text-gray-600 mb-8">Эксперт по таргетированной рекламе с 8-летним опытом</p> | |
<div class="mb-8"> | |
<p class="text-gray-700 mb-4">За свою карьеру запустил более 500 успешных рекламных кампаний для бизнесов в разных нишах: от локальных услуг до международных e-commerce проектов.</p> | |
<p class="text-gray-700">Обучил более 2000 студентов, многие из которых теперь успешно работают в digital-маркетинге или развивают собственные бизнесы с помощью таргетированной рекламы.</p> | |
</div> | |
<div class="space-y-4"> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0 bg-indigo-100 rounded-full p-3"> | |
<i class="fas fa-medal text-indigo-600"></i> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-800 font-medium">Сертифицированный специалист Facebook Blueprint</p> | |
</div> | |
</div> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0 bg-indigo-100 rounded-full p-3"> | |
<i class="fas fa-chart-line text-indigo-600"></i> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-800 font-medium">Средний ROI кампаний клиентов — 350%</p> | |
</div> | |
</div> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0 bg-indigo-100 rounded-full p-3"> | |
<i class="fas fa-users text-indigo-600"></i> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-800 font-medium">Основатель агентства таргетированной рекламы с оборотом 15 млн руб./мес</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Learning Format Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Форматы обучения</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Удобные и эффективные способы освоить материал</p> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-video text-indigo-600 text-3xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Видеоуроки</h3> | |
<p class="text-gray-600">Доступ к записям в любое время с возможностью пересматривать сложные моменты.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-tasks text-indigo-600 text-3xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Практические задания</h3> | |
<p class="text-gray-600">Пошаговые упражнения для закрепления материала и отработки навыков.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-chalkboard-teacher text-indigo-600 text-3xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Вебинары с экспертами</h3> | |
<p class="text-gray-600">Живые сессии с разбором кейсов и ответами на вопросы студентов.</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-comments text-indigo-600 text-3xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Поддержка в чате</h3> | |
<p class="text-gray-600">Закрытый чат с кураторами для быстрого решения возникающих вопросов.</p> | |
</div> | |
</div> | |
<div class="mt-12 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto"> | |
<div class="md:flex items-center"> | |
<div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> | |
<div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-md"> | |
<i class="fas fa-certificate text-indigo-600 text-4xl"></i> | |
</div> | |
</div> | |
<div class="md:w-2/3 md:pl-8 text-center md:text-left"> | |
<h3 class="text-2xl font-bold text-indigo-800 mb-2">Сертификат о прохождении</h3> | |
<p class="text-gray-700">После успешного завершения курса вы получите именной сертификат, подтверждающий ваши навыки в таргетированной рекламе.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Reviews Section --> | |
<section class="py-16 bg-white" id="reviews"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Отзывы выпускников</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Что говорят наши студенты после прохождения курса</p> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<!-- Review 1 --> | |
<div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
<div class="flex items-center mb-6"> | |
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Екатерина Смирнова" class="w-full h-full object-cover"> | |
</div> | |
<div> | |
<h4 class="font-bold text-gray-800">Екатерина Смирнова</h4> | |
<p class="text-indigo-600">Выпускница 2022</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<div class="flex text-yellow-400"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
</div> | |
</div> | |
<p class="text-gray-700 italic">"После курса смогла устроиться в маркетинговое агентство на позицию таргетолога. Уже через 3 месяца мой доход вырос в 2 раза по сравнению с предыдущей работой. Материал подается очень структурированно, с большим количеством примеров из практики."</p> | |
</div> | |
<!-- Review 2 --> | |
<div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
<div class="flex items-center mb-6"> | |
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Дмитрий Иванов" class="w-full h-full object-cover"> | |
</div> | |
<div> | |
<h4 class="font-bold text-gray-800">Дмитрий Иванов</h4> | |
<p class="text-indigo-600">Выпускник 2021</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<div class="flex text-yellow-400"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
</div> | |
</div> | |
<p class="text-gray-700 italic">"Благодаря курсу смог вывести свой интернет-магазин на новый уровень. Конверсия рекламы увеличилась в 3 раза, а стоимость лида снизилась на 40%. Особенно ценными были модули по аналитике и оптимизации кампаний."</p> | |
</div> | |
<!-- Review 3 --> | |
<div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
<div class="flex items-center mb-6"> | |
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="Анна Козлова" class="w-full h-full object-cover"> | |
</div> | |
<div> | |
<h4 class="font-bold text-gray-800">Анна Козлова</h4> | |
<p class="text-indigo-600">Выпускница 2023</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<div class="flex text-yellow-400"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star-half-alt"></i> | |
</div> | |
</div> | |
<p class="text-gray-700 italic">"Прошла курс, будучи в декрете, чтобы освоить новую профессию. Уже через 2 месяца после начала обучения взяла первых платящих клиентов. Сейчас мой доход составляет 70+ тыс. руб. в месяц при работе 3-4 часа в день. Очень благодарна за поддержку кураторов!"</p> | |
</div> | |
</div> | |
<!-- Video Reviews --> | |
<div class="mt-16 grid md:grid-cols-2 gap-8"> | |
<div class="bg-gray-900 rounded-xl overflow-hidden"> | |
<div class="aspect-w-16 aspect-h-9"> | |
<iframe class="w-full h-96" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-white mb-2">Отзыв Михаила о курсе Traffic Master</h3> | |
<p class="text-gray-400">Увеличил доход в 5 раз за 4 месяца работы таргетологом</p> | |
</div> | |
</div> | |
<div class="bg-gray-900 rounded-xl overflow-hidden"> | |
<div class="aspect-w-16 aspect-h-9"> | |
<iframe class="w-full h-96" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-white mb-2">Отзыв Ольги о курсе Traffic Master</h3> | |
<p class="text-gray-400">С нуля освоила профессию и нашла первых клиентов</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Success Cases Section --> | |
<section class="py-16 bg-indigo-50"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Кейсы успеха</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Реальные результаты наших студентов</p> | |
</div> | |
<div class="grid md:grid-cols-3 gap-8"> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="text-5xl font-bold text-indigo-600 mb-4">+300%</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Рост конверсии</h3> | |
<p class="text-gray-600">Увеличение конверсии рекламных кампаний для интернет-магазина детских товаров</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="text-5xl font-bold text-indigo-600 mb-4">-60%</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Снижение стоимости лида</h3> | |
<p class="text-gray-600">Оптимизация кампаний для стоматологической клиники после прохождения курса</p> | |
</div> | |
<div class="bg-white p-8 rounded-xl text-center hover-scale card-shadow"> | |
<div class="text-5xl font-bold text-indigo-600 mb-4">120 000 ₽</div> | |
<h3 class="text-xl font-bold text-gray-800 mb-3">Средний доход</h3> | |
<p class="text-gray-600">Средний доход выпускников через 6 месяцев после завершения обучения</p> | |
</div> | |
</div> | |
<div class="mt-12 grid md:grid-cols-2 gap-8"> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="w-20 h-20 rounded-full overflow-hidden mr-6"> | |
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Артем Васильев" class="w-full h-full object-cover"> | |
</div> | |
<div> | |
<h4 class="font-bold text-gray-800 text-xl">Артем Васильев</h4> | |
<p class="text-indigo-600">Владелец бизнеса</p> | |
</div> | |
</div> | |
<p class="text-gray-700 mb-6">"До курса тратил на рекламу 50 000 руб. в месяц с минимальной отдачей. После обучения смог сократить бюджет до 30 000 руб., увеличив количество заявок в 2 раза. Теперь реклама действительно окупается и приносит прибыль!"</p> | |
<div class="flex justify-between items-center"> | |
<div> | |
<div class="text-sm text-gray-500">Бизнес:</div> | |
<div class="font-bold">Строительные материалы</div> | |
</div> | |
<div> | |
<div class="text-sm text-gray-500">Результат:</div> | |
<div class="font-bold">+150% заявок, -40% бюджета</div> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-8 rounded-xl hover-scale card-shadow"> | |
<div class="flex items-center mb-6"> | |
<div class="w-20 h-20 rounded-full overflow-hidden mr-6"> | |
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Ирина Соколова" class="w-full h-full object-cover"> | |
</div> | |
<div> | |
<h4 class="font-bold text-gray-800 text-xl">Ирина Соколова</h4> | |
<p class="text-indigo-600">Фрилансер</p> | |
</div> | |
</div> | |
<p class="text-gray-700 mb-6">"Прошла курс без опыта в маркетинге. Через 3 месяца после начала обучения уже работала с 5 постоянными клиентами. Сейчас мой доход составляет около 90 000 руб. в месяц при работе 20 часов в неделю. Лучшее вложение в себя за последние годы!"</p> | |
<div class="flex justify-between items-center"> | |
<div> | |
<div class="text-sm text-gray-500">Направление:</div> | |
<div class="font-bold">Услуги для малого бизнеса</div> | |
</div> | |
<div> | |
<div class="text-sm text-gray-500">Результат:</div> | |
<div class="font-bold">5 клиентов, 90 000 ₽/мес</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Pricing Section --> | |
<section class="py-16 bg-white" id="pricing"> | |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Тарифы и цены</h2> | |
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Выберите подходящий вариант обучения</p> | |
</div> | |
<div class="grid md:grid-cols-3 gap-8"> | |
<!-- Basic Tariff --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg border-2 border-gray-200 hover:border-indigo-500 transition duration-300 hover-scale"> | |
<div class="px-8 py-6"> | |
<h3 class="text-2xl font-bold text-gray-800 mb-2">Базовый</h3> | |
<p class="text-gray-600 mb-6">Для самостоятельного изучения основ таргетированной рекламы</p> | |
<div class="mb-6"> | |
<span class="text-4xl font-bold text-gray-800">14 900 ₽</span> | |
<span class="text-gray-500 line-through ml-2">19 900 ₽</span> | |
</div> | |
<ul class="space-y-3 mb-8"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Доступ ко всем видеоурокам</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Практические задания</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Шаблоны и чек-листы</span> | |
</li> | |
<li class="flex items-start text-gray-400"> | |
<i class="fas fa-times mt-1 mr-3"></i> | |
<span>Проверка домашних заданий</span> | |
</li> | |
<li class="flex items-start text-gray-400"> | |
<i class="fas fa-times mt-1 mr-3"></i> | |
<span>Доступ к закрытому чату</span> | |
</li> | |
<li class="flex items-start text-gray-400"> | |
<i class="fas fa-times mt-1 mr-3"></i> | |
<span>Участие в вебинарах</span> | |
</li> | |
</ul> | |
</div> | |
<div class="px-8 py-4 bg-gray-50"> | |
<a href="#contact" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg text-center transition duration-300">Выбрать тариф</a> | |
</div> | |
</div> | |
<!-- Optimal Tariff --> | |
<div class="bg-white rounded-xl overflow-hidden shadow-lg border-2 border-indigo-500 transform scale-105 hover-scale z-10"> | |
<div class="px-8 py-6"> | |
<div class="flex justify-between items-start mb-2"> | |
<h3 class="text-2xl font-bold text-gray-800">Оптимальный</h3> | |
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Популярный</span> | |
</div> | |
<p class="text-gray-600 mb-6">Полный комплект для эффективного обучения с поддержкой</p> | |
<div class="mb-6"> | |
<span class="text-4xl font-bold text-gray-800">24 900 ₽</span> | |
<span class="text-gray-500 line-through ml-2">34 900 ₽</span> | |
</div> | |
<ul class="space-y-3 mb-8"> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Доступ ко всем видеоурокам</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Практические задания</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
<span>Шаблоны и чек-листы</span> | |
</li> | |
<li class="flex items-start"> | |
</html> |