не работает регистрация и вход переделай и пересмотри свой главный экран - Initial Deployment
36ff679 verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Как продать Telegram-канал до монетизации</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4f0ff 100%); | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="message-square" class="text-blue-500 mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-900">TG Channel Pro</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-blue-600 transition">О курсе</a> | |
| <a href="#modules" class="text-gray-700 hover:text-blue-600 transition">Модули</a> | |
| <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Возможности</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Стоимость</a> | |
| <a href="/login.html" class="text-gray-700 hover:text-blue-600 transition">Войти</a> | |
| <a href="/register.html" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105"> | |
| Начать обучение | |
| </a> | |
| </div> | |
| <button class="md:hidden text-gray-500 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6"> | |
| Как продать Telegram-канал <span class="text-blue-600">до монетизации</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-8"> | |
| Научитесь создавать ценный Telegram-канал с нуля и продавать его дорого, даже без монетизации. | |
| Практический курс с пошаговой системой. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Начать курс сейчас | |
| </button> | |
| <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition"> | |
| <i data-feather="play" class="inline mr-2"></i> Смотреть видео | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2" data-aos="fade-left"> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-100 flex items-center justify-center"> | |
| <i data-feather="play-circle" class="w-16 h-16 text-blue-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-semibold text-lg mb-2">Приветствие от автора</h3> | |
| <p class="text-gray-600 mb-4">Посмотрите вводное видео, чтобы понять, подходит ли вам этот курс</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span class="mr-4">2:15 мин</span> | |
| <i data-feather="user" class="mr-1 w-4 h-4"></i> | |
| <span>Александр Петров</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Knowledge Check --> | |
| <section class="py-16 bg-white" id="about"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6" data-aos="fade-up">Пройдите тест и узнайте свой уровень</h2> | |
| <p class="text-xl text-gray-600 mb-10" data-aos="fade-up" data-aos-delay="100"> | |
| Ответьте на 5 вопросов, и мы подберем оптимальную программу обучения для вас | |
| </p> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-inner" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Вопрос 1 из 5</span> | |
| <span class="text-sm font-medium text-blue-600">25%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-6">Какова текущая численность вашего Telegram-канала?</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full text-left p-4 border border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition"> | |
| У меня пока нет канала | |
| </button> | |
| <button class="w-full text-left p-4 border border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition"> | |
| Менее 1 000 подписчиков | |
| </button> | |
| <button class="w-full text-left p-4 border border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition"> | |
| От 1 000 до 10 000 подписчиков | |
| </button> | |
| <button class="w-full text-left p-4 border border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition"> | |
| Более 10 000 подписчиков | |
| </button> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button class="px-6 py-2 text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-100 transition" disabled> | |
| Назад | |
| </button> | |
| <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| Далее <i data-feather="arrow-right" class="inline ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Course Results --> | |
| <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 font-bold text-gray-900 mb-4" data-aos="fade-up">Что вы получите после курса</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Конкретные навыки, которые помогут вам создать ценный Telegram-канал и продать его дорого | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Анализ аудитории</h3> | |
| <p class="text-gray-600"> | |
| Научитесь определять целевую аудиторию, ее потребности и создавать контент, который будет цениться. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="trending-up" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Рост подписчиков</h3> | |
| <p class="text-gray-600"> | |
| Освоите органические и платные методы привлечения подписчиков, которые действительно заинтересованы в вашем контенте. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Продажа канала</h3> | |
| <p class="text-gray-600"> | |
| Узнаете, как оценить стоимость канала, найти покупателей и провести сделку на выгодных для вас условиях. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Course Modules --> | |
| <section class="py-16 bg-white" id="modules"> | |
| <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 font-bold text-gray-900 mb-4" data-aos="fade-up">Программа курса</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| 5 модулей с практическими заданиями, которые приведут вас к результату | |
| </p> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Module 1 --> | |
| <div class="module-card bg-white border border-gray-200 rounded-xl overflow-hidden transition duration-300" data-aos="fade-up"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-gray-50 p-8 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4"> | |
| <span class="text-2xl font-bold text-blue-600">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Основы Telegram-каналов</h3> | |
| <div class="flex items-center justify-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>2 часа</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h4 class="font-medium text-gray-500 mb-4">Чему вы научитесь:</h4> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Различать типы каналов и их особенности</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Анализировать ключевые метрики канала</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Оценивать потенциал своего канала</span> | |
| </li> | |
| </ul> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="book-open" class="mr-2 w-4 h-4"></i> | |
| <span class="mr-4">3 урока</span> | |
| <i data-feather="file-text" class="mr-2 w-4 h-4"></i> | |
| <span>1 практическое задание</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="module-card bg-white border border-gray-200 rounded-xl overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-gray-50 p-8 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4"> | |
| <span class="text-2xl font-bold text-green-600">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Контент-стратегия</h3> | |
| <div class="flex items-center justify-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-1 w-4 h-4"></i> | |
| <span>3 часа</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h4 class="font-medium text-gray-500 mb-4">Чему вы научитесь:</h4> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Создавать контент-план на месяц вперед</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Генерировать идеи для постов</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Повышать вовлеченность аудитории</span> | |
| </li> | |
| </ul> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="book-open" class="mr-2 w-4 h-4"></i> | |
| <span class="mr-4">4 урока</span> | |
| <i data-feather="file-text" class="mr-2 w-4 h-4"></i> | |
| <span>2 практических задания</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modules 3-5 would follow the same pattern --> | |
| <div class="text-center mt-10" data-aos="fade-up"> | |
| <button class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"> | |
| <i data-feather="list" class="mr-2 w-5 h-5"></i> | |
| Показать все модули программы | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platform Features --> | |
| <section class="py-16 bg-gray-50" id="features"> | |
| <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 font-bold text-gray-900 mb-4" data-aos="fade-up">Возможности платформы</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Все инструменты для эффективного обучения в одном месте | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm" data-aos="fade-up"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="user" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Личный кабинет</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Отслеживайте прогресс обучения, сохраняйте выполненные задания и получайте персональные рекомендации. | |
| </p> | |
| <div class="flex items-center text-sm text-blue-600"> | |
| <span>Подробнее</span> | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="message-square" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Сообщество</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Общайтесь с другими участниками курса, делитесь опытом и получайте обратную связь от экспертов. | |
| </p> | |
| <div class="flex items-center text-sm text-blue-600"> | |
| <span>Подробнее</span> | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="download" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Ресурсы</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Доступ к библиотеке шаблонов, чек-листов и полезных материалов, которые ускорят ваше продвижение. | |
| </p> | |
| <div class="flex items-center text-sm text-blue-600"> | |
| <span>Подробнее</span> | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <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 font-bold text-gray-900 mb-4" data-aos="fade-up">Стоимость обучения</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Выберите подходящий вариант доступа к курсу | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="border border-gray-200 rounded-xl p-8 hover:border-blue-400 transition" data-aos="fade-up"> | |
| <h3 class="text-xl font-semibold mb-4">Базовый</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">9 900 ₽</span> | |
| <span class="text-gray-500">/ единоразово</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ ко всем урокам</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Практические задания</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i data-feather="x" class="mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ к сообществу</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i data-feather="x" class="mr-2 mt-1 w-4 h-4"></i> | |
| <span>Проверка заданий экспертом</span> | |
| </li> | |
| </ul> | |
| <a href="/register.html?plan=basic" class="w-full py-3 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition flex items-center justify-center"> | |
| Выбрать тариф | |
| </a> | |
| </div> | |
| <div class="border-2 border-blue-500 rounded-xl p-8 bg-blue-50 transform scale-105" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-bl-lg rounded-tr-lg"> | |
| Популярный | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Стандарт</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">14 900 ₽</span> | |
| <span class="text-gray-500">/ единоразово</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ ко всем урокам</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Практические задания</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ к сообществу</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Проверка 3 заданий экспертом</span> | |
| </li> | |
| </ul> | |
| <a href="/register.html?plan=standard" class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| Выбрать тариф | |
| </a> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-8 hover:border-blue-400 transition" data-aos="fade-up" data-aos-delay="200"> | |
| <h3 class="text-xl font-semibold mb-4">Премиум</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">24 900 ₽</span> | |
| <span class="text-gray-500">/ единоразово</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ ко всем урокам</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Практические задания</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Доступ к сообществу</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i> | |
| <span>Персональная поддержка эксперта</span> | |
| </li> | |
| </ul> | |
| <a href="/register.html?plan=premium" class="w-full py-3 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition flex items-center justify-center"> | |
| Выбрать тариф | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-blue-50 rounded-xl p-8 max-w-4xl mx-auto" data-aos="fade-up"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 text-center"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full"> | |
| <i data-feather="award" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="text-xl font-semibold mb-2">Сертификат об окончании</h3> | |
| <p class="text-gray-600"> | |
| После успешного завершения курса вы получите именной сертификат с QR-кодом для подтверждения ваших навыков. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Готовы создать ценный Telegram-канал?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Начните обучение сегодня и получите первые результаты уже через неделю | |
| </p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium text-lg transition transform hover:scale-105" data-aos="fade-up" data-aos-delay="200"> | |
| Начать курс сейчас | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-300 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="message-square" class="text-blue-400 mr-2"></i> | |
| <span class="text-xl font-semibold text-white">TG Channel Pro</span> | |
| </div> | |
| <p class="max-w-xs"> | |
| Образовательный курс по созданию и продаже Telegram-каналов | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Курс</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Программа</a></li> | |
| <li><a href="#" class="hover:text-white transition">Автор</a></li> | |
| <li><a href="#" class="hover:text-white transition">Отзывы</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Поддержка</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="hover:text-white transition">Контакты</a></li> | |
| <li><a href="#" class="hover:text-white transition">Условия</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Контакты</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="mr-2 w-4 h-4"></i> | |
| <span>hello@tgchannel.pro</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="mr-2 w-4 h-4"></i> | |
| <span>+7 (123) 456-78-90</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm"> | |
| © 2023 TG Channel Pro. Все права защищены. | |
| </p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="youtube" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Simple progress animation for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const moduleCards = document.querySelectorAll('.module-card'); | |
| moduleCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| }); | |
| }); | |
| // Knowledge check navigation | |
| const knowledgeCheckButtons = document.querySelectorAll('#about button'); | |
| knowledgeCheckButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const progressBar = document.querySelector('#about .bg-blue-600'); | |
| if (progressBar.style.width === '25%') { | |
| progressBar.style.width = '50%'; | |
| document.querySelector('#about span.text-blue-600').textContent = '50%'; | |
| document.querySelector('#about span:first-child').textContent = 'Вопрос 2 из 5'; | |
| // Update question text and answers in real implementation | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |