Hugging Face's logo

Spaces:
timoon811
/
block3tmt
Running

App Files Community
block3tmt / index.html
timoon811's picture
timoon811
Add 3 files
03c3d6f verified
raw
history blame contribute delete
23.9 kB
<!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">
</head>
<body>
 <section class="relative py-16 md:py-24 overflow-hidden" id="what-you-get">
 <!-- Background particles -->
 <div class="particles absolute inset-0 w-full h-full"></div>
<!-- Grid overlay effect -->
 <div class="absolute inset-0 w-full h-full opacity-10 pointer-events-none" style="background-image: radial-gradient(#f6fc79 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="container mx-auto px-4 md:px-6 relative z-10">
 <!-- Header section -->
 <div class="mb-12 md:mb-16 text-center">
 <h2 class="text-3xl md:text-5xl font-bold uppercase mb-4 glow-text text-[#f6fc79] animate-fade-in">
 <span class="pulse inline-block mr-2"><i class="fas fa-book-open"></i></span> Что вы получите
 </h2>
 <p class="text-lg md:text-xl text-[#E1E1E1] opacity-90 font-medium max-w-2xl mx-auto">
 Практические знания и инструменты для быстрого старта и масштабирования
 </p>
 </div>
<!-- Cards grid -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 <!-- Card 1 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-ad"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Настройка рекламы в Facebook</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Работа с рекламными кабинетами любой сложности</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Пошаговые инструкции по запуску связок под разные вертикали</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Обход модерации, настройка белых и серых схем</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 2 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.1s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-handshake"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Работа с CPA-сетями и выбор прибыльных офферов</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Научишься выбирать только те офферы, которые дают результат</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Получишь контакты надёжных менеджеров</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Освоишь модель выплаты RevShare, CPL, CPA, гибрид</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 3 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.2s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-chart-line"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Аналитика, масштаб и связки</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Установишь трекеры (Keitaro, RedTrack, Binom)</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Научишься отслеживать ROI, LTV, EPC и другие метрики</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Освоишь масштабирование связок до оборота $1,000+ в день</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 4 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.3s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-paint-brush"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Креативы, лендинги и воронки</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Получишь шаблоны баннеров и видео для Facebook и TikTok</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Создашь свои посадочные страницы с высокой конверсией</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Настроишь автоворонки под трафик и ботов</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 5 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.4s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-user-tie"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Упаковка себя как специалиста</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Составишь сильное позиционирование: кто ты и почему с тобой хотят работать</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Подготовишь своё портфолио с кейсами и цифрами</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Сделаешь профили в Telegram, LinkedIn, T.Me, Upwork, Kwork, Behance и начнёшь привлекать клиентов</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 6 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.5s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-rocket"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Стратегия выхода на профит</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Пошаговый план: от первого запуска до $2,000 в месяц</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Как избежать слива бюджета и "минуса" на старте</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Финансовая модель: сколько нужно вложить и как быстро это вернётся</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 7 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.6s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-users"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Поддержка и рост</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Доступ в закрытое комьюнити</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Обратная связь от куратора и Тимура</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Совместные Zoom-созвоны, мозговые штурмы, партнёрства</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Card 8 -->
 <div class="bg-[#121212] rounded-2xl p-6 border border-transparent transition-all duration-300 hover:border-glow hover:-translate-y-1 transform hover:shadow-lg hover:shadow-[#f6fc7933] animate-slide-up" style="animation-delay: 0.7s;">
 <div class="flex flex-col h-full">
 <div class="flex items-center mb-4">
 <div class="text-3xl text-[#f6fc79] mr-3 icon-float">
 <i class="fas fa-laptop-code"></i>
 </div>
 <h3 class="text-xl font-bold text-white">Техническая база и автоматизация работы</h3>
 </div>
 <ul class="text-[#E1E1E1] opacity-80 space-y-2 flex-grow">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Освоишь антидетект-браузеры (Dolphin, AdsPower, Incognition)</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Научишься работать с прокси, фармом аккаунтов и безопасным входом</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-xs text-[#f6fc79] mt-1 mr-2"></i>
 <span>Настроишь автоподмену ссылок, креативов и запуск A/B тестов</span>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<!-- Divider line -->
 <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#f6fc79] to-transparent opacity-30"></div>
 </section>
<style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #0a0a0a;
 color: #E1E1E1;
 overflow-x: hidden;
 }
.glow-text {
 text-shadow: 0 0 10px rgba(246, 252, 121, 0.7);
 }
.glow-box {
 box-shadow: 0 0 15px rgba(246, 252, 121, 0.5);
 }
.glow-box:hover {
 box-shadow: 0 0 25px rgba(246, 252, 121, 0.8);
 }
.border-glow {
 border-color: #f6fc79;
 box-shadow: 0 0 10px rgba(246, 252, 121, 0.3);
 }
.border-glow:hover {
 box-shadow: 0 0 20px rgba(246, 252, 121, 0.5);
 }
/* New icon animations */
 .icon-float {
 position: relative;
 transition: all 0.3s ease;
 }
.icon-float i {
 display: inline-block;
 position: relative;
 }
.icon-float:hover i {
 animation: float 3s ease-in-out infinite;
 }
.icon-float::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 background: rgba(246, 252, 121, 0.1);
 border-radius: 50%;
 transform: translate(-50%, -50%) scale(0);
 transition: all 0.3s ease;
 z-index: -1;
 }
.icon-float:hover::before {
 transform: translate(-50%, -50%) scale(1.5);
 opacity: 0;
 }
/* Animations */
 @keyframes pulse {
 0% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.05); opacity: 0.8; }
 100% { transform: scale(1); opacity: 1; }
 }
@keyframes float {
 0% { transform: translateY(0) rotate(0deg); }
 50% { transform: translateY(-5px) rotate(2deg); }
 100% { transform: translateY(0) rotate(0deg); }
 }
@keyframes glow {
 0% { text-shadow: 0 0 5px rgba(246, 252, 121, 0.5); }
 50% { text-shadow: 0 0 15px rgba(246, 252, 121, 0.9); }
 100% { text-shadow: 0 0 5px rgba(246, 252, 121, 0.5); }
 }
@keyframes fade-in {
 from { opacity: 0; transform: scale(0.95); }
 to { opacity: 1; transform: scale(1); }
 }
@keyframes slide-up {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
.pulse {
 animation: pulse 2s infinite;
 }
.animate-fade-in {
 animation: fade-in 0.8s ease-out forwards;
 }
.animate-slide-up {
 animation: slide-up 0.6s ease-out forwards;
 opacity: 0;
 }
/* Particles effect */
 .particles {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 0;
 }
.particle {
 position: absolute;
 background-color: rgba(246, 252, 121, 0.6);
 border-radius: 50%;
 pointer-events: none;
 }
/* Responsive adjustments */
 @media (max-width: 1200px) {
 .lg\:grid-cols-4 {
 grid-template-columns: repeat(3, 1fr);
 }
 }
@media (max-width: 1024px) {
 .lg\:grid-cols-4 {
 grid-template-columns: repeat(2, 1fr);
 }
 }
@media (max-width: 768px) {
 .md\:grid-cols-2 {
 grid-template-columns: 1fr;
 }
.animate-slide-up {
 animation: fade-in 0.6s ease-out forwards;
 transform: none !important;
 }
 }
 </style>
<script>
 // Create particles
 document.addEventListener('DOMContentLoaded', function() {
 const particlesContainer = document.querySelector('.particles');
 const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
 const particle = document.createElement('div');
 particle.classList.add('particle');
// Random size between 1px and 3px
 const size = Math.random() * 2 + 1;
 particle.style.width = `${size}px`;
 particle.style.height = `${size}px`;
// Random position
 particle.style.left = `${Math.random() * 100}%`;
 particle.style.top = `${Math.random() * 100}%`;
// Random opacity
 particle.style.opacity = Math.random() * 0.5 + 0.1;
// Animation
 const duration = Math.random() * 20 + 10;
 particle.style.transition = `all ${duration}s linear`;
particlesContainer.appendChild(particle);
// Animate particles
 animateParticle(particle);
 }
function animateParticle(particle) {
 const newX = Math.random() * 100;
 const newY = Math.random() * 100;
particle.style.left = `${newX}%`;
 particle.style.top = `${newY}%`;
setTimeout(() => {
 animateParticle(particle);
 }, Math.random() * 10000 + 5000);
 }
 });
 </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/block3tmt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>