Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-STUDIO для Виктории</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| background-image: | |
| radial-gradient(at 40% 20%, hsla(218,81%,35%,0.4) 0px, transparent 50%), | |
| radial-gradient(at 80% 0%, hsla(189,100%,56%,0.1) 0px, transparent 50%), | |
| radial-gradient(at 0% 50%, hsla(355,100%,93%,0.1) 0px, transparent 50%), | |
| linear-gradient(to bottom right, #0f172a, #1e293b); | |
| min-height: 100vh; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.2); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| /* Tech pattern overlay */ | |
| .tech-pattern { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* Animated grid dots */ | |
| .grid-dots { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; | |
| z-index: -1; | |
| animation: gridMove 40s linear infinite; | |
| } | |
| @keyframes gridMove { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 100% 100%; } | |
| } | |
| /* Floating AI nodes */ | |
| .ai-node { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(40px); | |
| opacity: 0.3; | |
| z-index: -1; | |
| } | |
| .node-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: #38bdf8; | |
| top: 20%; | |
| left: 10%; | |
| animation: float 15s ease-in-out infinite; | |
| } | |
| .node-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: #818cf8; | |
| bottom: 10%; | |
| right: 10%; | |
| animation: float 18s ease-in-out infinite reverse; | |
| } | |
| .node-3 { | |
| width: 200px; | |
| height: 200px; | |
| background: #f472b6; | |
| top: 50%; | |
| right: 20%; | |
| animation: float 12s ease-in-out infinite 2s; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); } | |
| 50% { transform: translate(-20px, 20px); } | |
| 100% { transform: translate(0, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-10 text-gray-100"> | |
| <!-- Background elements --> | |
| <div class="tech-pattern"></div> | |
| <div class="grid-dots"></div> | |
| <div class="ai-node node-1"></div> | |
| <div class="ai-node node-2"></div> | |
| <div class="ai-node node-3"></div> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <!-- Header with floating animation --> | |
| <div class="text-center mb-12"> | |
| <div class="floating inline-block mb-6"> | |
| <div class="bg-gradient-to-r from-blue-400 to-indigo-500 p-3 rounded-full shadow-lg"> | |
| <i class="fas fa-robot text-white text-4xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-white mb-3">AI-STUDIO для <span class="gradient-text">Виктории</span></h1> | |
| <p class="text-xl text-blue-100">СММ-специалиста и маркетолога</p> | |
| </div> | |
| <!-- Personalized greeting --> | |
| <div class="card-hover rounded-xl p-6 mb-10"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-900 bg-opacity-50 p-3 rounded-full mr-4 border border-blue-400 border-opacity-30"> | |
| <i class="fas fa-hand-sparkles text-blue-300 text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-2xl font-semibold text-white mb-2">Виктория, привет!</h2> | |
| <p class="text-blue-100">С первых минут общения было ясно — вы умеете превращать визуал в влияние, а стратегию — в результат. А что если бы у вас появилась <span class="font-bold text-blue-300">ИИ-команда</span>, работающая 24/7?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features section --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-bold text-white mb-8 text-center">Что мы можем предложить</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-900 bg-opacity-50 p-3 rounded-full mr-4 border border-blue-400 border-opacity-30"> | |
| <i class="fas fa-paint-brush text-blue-300"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Нейро-контент</h3> | |
| </div> | |
| <ul class="space-y-2 text-blue-100"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>🎨 Нейро-фотосессии (аватары, стили)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>🎜️ Видео под Reels / TikTok</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>✍️ Посты, заголовки, прогревы и хештеги</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-900 bg-opacity-50 p-3 rounded-full mr-4 border border-indigo-400 border-opacity-30"> | |
| <i class="fas fa-robot text-indigo-300"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">ИИ-помощник в Telegram</h3> | |
| </div> | |
| <ul class="space-y-2 text-blue-100"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>💬 Общение с подписчиками по сценарию</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>📅 Квизы, заявки, автоответы</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>📄 PDF, ссылки, презентации</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-900 bg-opacity-50 p-3 rounded-full mr-4 border border-pink-400 border-opacity-30"> | |
| <i class="fas fa-palette text-pink-300"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Нейро-дизайн</h3> | |
| </div> | |
| <ul class="space-y-2 text-blue-100"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>🖼️ Визуалы для сторис и карточек товаров</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>✨ WOW-дизайн с минимальным брифом</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-amber-900 bg-opacity-50 p-3 rounded-full mr-4 border border-amber-400 border-opacity-30"> | |
| <i class="fas fa-graduation-cap text-amber-300"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Обучающая группа по ИИ</h3> | |
| </div> | |
| <ul class="space-y-2 text-blue-100"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>📚 Интенсивы по ИИ-креативу</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>🤖 Создание автоворонок и прогревов</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>👨💻 Поддержка и рост в комьюнити</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact section --> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg p-8 text-white mb-10 border border-blue-400 border-opacity-30"> | |
| <h2 class="text-2xl font-bold mb-6 text-center">Готовы прокачать ваш СММ с нейро-усилением?</h2> | |
| <p class="text-center mb-6 text-blue-200">Свяжитесь с нами:</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <a href="https://t.me/Denis_2024" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-4 flex items-center transition duration-300 border border-blue-400 border-opacity-20"> | |
| <i class="fab fa-telegram text-2xl mr-3 text-blue-300 social-icon"></i> | |
| <div> | |
| <p class="font-semibold">Личка</p> | |
| <p class="text-sm opacity-80">@Denis_2024</p> | |
| </div> | |
| </a> | |
| <a href="https://t.me/+conREyT4D5FjNDAy" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-4 flex items-center transition duration-300 border border-blue-400 border-opacity-20"> | |
| <i class="fas fa-bullhorn text-2xl mr-3 text-blue-300 social-icon"></i> | |
| <div> | |
| <p class="font-semibold">Канал</p> | |
| <p class="text-sm opacity-80">Neirosety in AI-STUDIO</p> | |
| </div> | |
| </a> | |
| <a href="https://ai-studio-pro.ru/" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-4 flex items-center transition duration-300 border border-blue-400 border-opacity-20"> | |
| <i class="fas fa-globe text-2xl mr-3 text-blue-300 social-icon"></i> | |
| <div> | |
| <p class="font-semibold">Сайт</p> | |
| <p class="text-sm opacity-80">ai-studio-pro.ru</p> | |
| </div> | |
| </a> | |
| <a href="https://vk.ru/id80681615" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-4 flex items-center transition duration-300 border border-blue-400 border-opacity-20"> | |
| <i class="fab fa-vk text-2xl mr-3 text-blue-300 social-icon"></i> | |
| <div> | |
| <p class="font-semibold">VK</p> | |
| <p class="text-sm opacity-80">vk.ru/id80681615</p> | |
| </div> | |
| </a> | |
| <a href="https://www.instagram.com/ai_studio_bogatov/" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-4 flex items-center transition duration-300 border border-blue-400 border-opacity-20"> | |
| <i class="fab fa-instagram text-2xl mr-3 text-blue-300 social-icon"></i> | |
| <div> | |
| <p class="font-semibold">Instagram</p> | |
| <p class="text-sm opacity-80">@ai_studio_bogatov</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- CTA with animation --> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-xl shadow-xl p-6 text-center transform transition hover:scale-105 duration-300 border border-blue-400 border-opacity-30"> | |
| <p class="text-xl font-bold mb-2">✨ Виктория, давайте делать маркетинг будущего вместе! ✨</p> | |
| <p class="text-blue-200">Нажмите на любую ссылку выше, чтобы начать</p> | |
| </div> | |
| <!-- Floating AI assistant button --> | |
| <div class="fixed bottom-6 right-6"> | |
| <button id="aiAssistant" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white w-16 h-16 rounded-full shadow-xl flex items-center justify-center hover:shadow-2xl transition duration-300 hover:scale-110"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple animation for the AI assistant button | |
| document.getElementById('aiAssistant').addEventListener('click', function() { | |
| alert('Привет, Виктория! Чем могу помочь? 😊'); | |
| }); | |
| // Add floating animation to cards on hover | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| }); | |
| }); | |
| </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=Denzel1989/ai-image-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |