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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cosmic: { | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| nebula: { | |
| 100: '#f0f9ff', | |
| 200: '#e0f2fe', | |
| 300: '#bae6fd', | |
| 400: '#7dd3fc', | |
| 500: '#38bdf8', | |
| 600: '#0ea5e9', | |
| 700: '#0284c7', | |
| 800: '#0369a1', | |
| 900: '#075985', | |
| }, | |
| quantum: { | |
| 100: '#f5f3ff', | |
| 200: '#ede9fe', | |
| 300: '#ddd6fe', | |
| 400: '#c4b5fd', | |
| 500: '#a78bfa', | |
| 600: '#8b5cf6', | |
| 700: '#7c3aed', | |
| 800: '#6d28d9', | |
| 900: '#5b21b6', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --primary-glow: conic-gradient( | |
| from 180deg at 50% 50%, | |
| #0ea5e9 0deg, | |
| #7c3aed 55deg, | |
| #0ea5e9 120deg, | |
| #7c3aed 160deg, | |
| transparent 360deg | |
| ); | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| color: #fff; | |
| min-height: 100vh; | |
| background-color: #0a0a1a; | |
| overflow-x: hidden; | |
| } | |
| .futuristic-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: radial-gradient(ellipse at bottom, #0a0a1a 0%, #000000 100%); | |
| overflow: hidden; | |
| } | |
| .quantum-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| opacity: 0.4; | |
| } | |
| .circuit-pattern { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230ea5e9' fill-opacity='0.08' d='M20,20 L180,20 L180,180 L20,180 Z M40,40 L160,40 L160,160 L40,160 Z' /%3E%3C/svg%3E"); | |
| background-size: 80px 80px; | |
| } | |
| .floating-elements { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .floating-element { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(14, 165, 233, 0.15); | |
| filter: blur(60px); | |
| animation: float 25s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } | |
| 50% { opacity: 0.5; } | |
| 100% { transform: translate(100vw, -100vh) rotate(360deg); opacity: 0; } | |
| } | |
| .quantum-glow { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, rgba(124, 58, 237, 0.15) 0%, transparent 70%); | |
| animation: pulse 12s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.05; transform: scale(0.8); } | |
| 100% { opacity: 0.2; transform: scale(1.2); } | |
| } | |
| .holographic-text { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #7c3aed 50%, #0ea5e9 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| background-size: 200% 200%; | |
| animation: holographic 6s ease infinite; | |
| } | |
| @keyframes holographic { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .quantum-card { | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| backdrop-filter: blur(12px); | |
| background: rgba(16, 24, 39, 0.6); | |
| border: 1px solid rgba(14, 165, 233, 0.1); | |
| } | |
| .quantum-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 30px rgba(14, 165, 233, 0.2); | |
| border-color: rgba(14, 165, 233, 0.3); | |
| } | |
| .quantum-glow-hover { | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .quantum-glow-hover:hover { | |
| box-shadow: 0 0 25px rgba(14, 165, 233, 0.6); | |
| } | |
| .quantum-btn { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #7c3aed 100%); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(14, 165, 233, 0.4); | |
| } | |
| .quantum-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: all 0.5s ease; | |
| } | |
| .quantum-btn:hover::after { | |
| left: 100%; | |
| } | |
| .quantum-border { | |
| position: relative; | |
| background: rgba(16, 24, 39, 0.6); | |
| border: 1px solid transparent; | |
| } | |
| .quantum-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, #0ea5e9, #7c3aed); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .section { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .title-decoration { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .title-decoration::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #0ea5e9, #7c3aed); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .title-decoration:hover::after { | |
| transform: scaleX(1); | |
| } | |
| .futuristic-font { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .input-field { | |
| background: rgba(16, 24, 39, 0.6); | |
| border: 1px solid rgba(14, 165, 233, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: #0ea5e9; | |
| box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); | |
| } | |
| .tech-badge { | |
| background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(124, 58, 237, 0.2)); | |
| border: 1px solid rgba(14, 165, 233, 0.3); | |
| } | |
| .pricing-card { | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.2), 0 10px 10px -5px rgba(14, 165, 233, 0.1); | |
| } | |
| .feature-icon { | |
| background: linear-gradient(135deg, #0ea5e9, #7c3aed); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-20px);} | |
| 60% {transform: translateY(-10px);} | |
| } | |
| .tech-stack-item { | |
| transition: all 0.3s ease; | |
| } | |
| .tech-stack-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Квантовый фон будущего --> | |
| <div class="futuristic-bg"> | |
| <div class="quantum-grid"></div> | |
| <div class="circuit-pattern"></div> | |
| <div class="quantum-glow"></div> | |
| <div class="floating-elements" id="floatingElements"></div> | |
| </div> | |
| <!-- Главный экран с эффектом голограммы --> | |
| <header class="relative overflow-hidden py-24 px-4 text-center section"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-nebula-900/20 via-quantum-900/20 to-black/60"></div> | |
| <div class="relative z-10 max-w-5xl mx-auto"> | |
| <div class="mb-8"> | |
| <span class="inline-block px-5 py-2 tech-badge rounded-full text-sm font-semibold text-white mb-6 quantum-glow-hover"> | |
| <i class="fas fa-atom mr-2"></i> Нейротехнологии нового поколения | |
| </span> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="holographic-text futuristic-font">Трансформируем</span> | |
| <span class="block text-3xl md:text-4xl font-medium text-nebula-300 mt-4">ваш бизнес с помощью <span class="holographic-text">искусственного интеллекта</span></span> | |
| </h1> | |
| <p class="text-xl text-nebula-300 max-w-3xl mx-auto mb-10"> | |
| Создаём квантовые решения на стыке нейросетей и автоматизации, которые выводят ваш бизнес на орбиту прибыли | |
| </p> | |
| <div class="mt-12 flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact" class="quantum-btn text-white font-bold py-4 px-10 rounded-full inline-flex items-center text-lg"> | |
| <i class="fas fa-rocket mr-3"></i> Запустить проект | |
| </a> | |
| <a href="#solutions" class="quantum-border text-nebula-300 font-bold py-4 px-10 rounded-full inline-flex items-center text-lg hover:text-white"> | |
| <i class="fas fa-stars mr-3"></i> Наши решения | |
| </a> | |
| </div> | |
| <div class="mt-20 scroll-indicator"> | |
| <a href="#about" class="inline-block text-nebula-400 hover:text-white"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- О компании с анимацией --> | |
| <section id="about" class="py-20 px-4 max-w-6xl mx-auto section"> | |
| <div class="text-center mb-20"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-semibold inline-block mb-4"> | |
| <i class="fas fa-shield-alt mr-2"></i> Надёжный технологический партнёр | |
| </span> | |
| <h2 class="text-4xl font-bold mb-6 mt-4"> | |
| <span class="holographic-text title-decoration futuristic-font">AI-STUDIO</span> | |
| </h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-nebula-500 to-quantum-500 mx-auto mb-8 rounded-full"></div> | |
| <p class="text-xl text-nebula-300 max-w-4xl mx-auto leading-relaxed"> | |
| Мы — <span class="font-semibold text-white">квантовая студия нейрорешений</span>, объединяющая передовые технологии искусственного интеллекта, автоматизацию процессов и цифровой маркетинг для создания прорывных бизнес-решений | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="text-5xl mb-6 feature-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">Нейро-ядро</h3> | |
| <p class="text-nebula-300"> | |
| Используем GPT-4, Gemini и собственные нейросетевые модели для создания интеллектуальных систем, способных обучаться и адаптироваться под ваш бизнес | |
| </p> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="text-5xl mb-6 feature-icon"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">Квантовая команда</h3> | |
| <p class="text-nebula-300"> | |
| Наши специалисты — это синтез технических гениев и бизнес-стратегов. Каждый проект ведёт команда из 5+ экспертов разных направлений | |
| </p> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="text-5xl mb-6 feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">Результат-ориентированность</h3> | |
| <p class="text-nebula-300"> | |
| Мы не просто создаём технологии — мы проектируем системы, которые увеличивают вашу прибыль. Средний ROI наших решений — 300% за 3 месяца | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Технологический стек --> | |
| <section class="py-16 px-4 bg-gradient-to-b from-nebula-900/30 to-black/50 section"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4"> | |
| <span class="holographic-text title-decoration futuristic-font">Наш технологический арсенал</span> | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-nebula-500 to-quantum-500 mx-auto mb-6 rounded-full"></div> | |
| <p class="text-nebula-300 max-w-3xl mx-auto"> | |
| Мы используем только самые передовые технологии, чтобы обеспечить ваше конкурентное преимущество | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6"> | |
| <div class="tech-stack-item bg-nebula-900/50 rounded-xl p-6 text-center quantum-glow-hover"> | |
| <div class="text-4xl mb-3 text-nebula-400"> | |
| <i class="fab fa-python"></i> | |
| </div> | |
| <h4 class="font-semibold">Python AI</h4> | |
| </div> | |
| <div class="tech-stack-item bg-nebula-900/50 rounded-xl p-6 text-center quantum-glow-hover"> | |
| <div class="text-4xl mb-3 text-nebula-400"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h4 class="font-semibold">GPT-4/Gemini</h4> | |
| </div> | |
| <div class="tech-stack-item bg-nebula-900/50 rounded-xl p-6 text-center quantum-glow-hover"> | |
| <div class="text-4xl mb-3 text-nebula-400"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h4 class="font-semibold">Vector DB</h4> | |
| </div> | |
| <div class="tech-stack-item bg-nebula-900/50 rounded-xl p-6 text-center quantum-glow-hover"> | |
| <div class="text-4xl mb-3 text-nebula-400"> | |
| <i class="fab fa-js"></i> | |
| </div> | |
| <h4 class="font-semibold">Node.js</h4> | |
| </div> | |
| <div class="tech-stack-item bg-nebula-900/50 rounded-xl p-6 text-center quantum-glow-hover"> | |
| <div class="text-4xl mb-3 text-nebula-400"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h4 class="font-semibold">Cloud AI</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Решения с анимацией --> | |
| <section id="solutions" class="py-20 px-4 max-w-6xl mx-auto section"> | |
| <div class="text-center mb-20"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-semibold inline-block mb-4"> | |
| <i class="fas fa-cogs mr-2"></i> Интегральные решения | |
| </span> | |
| <h2 class="text-4xl font-bold mb-6"> | |
| <span class="holographic-text title-decoration futuristic-font">Наши продукты</span> | |
| </h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-nebula-500 to-quantum-500 mx-auto mb-8 rounded-full"></div> | |
| <p class="text-xl text-nebula-300 max-w-4xl mx-auto"> | |
| Каждое решение — это синтез передовых технологий и глубокого понимания бизнес-процессов | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="quantum-card rounded-2xl p-8 pricing-card"> | |
| <div class="text-4xl mb-4 feature-icon"> | |
| <i class="fas fa-comments-dollar"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-white">Нейро-боты</h3> | |
| <p class="text-nebula-300 mb-6 text-sm"> | |
| Умные ассистенты с искусственным интеллектом для автоматизации продаж и поддержки | |
| </p> | |
| <div class="text-nebula-500 font-bold text-lg mb-4">от 45 000 ₽</div> | |
| <ul class="space-y-2 mb-6 text-nebula-300 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Интеграция с CRM | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Обучение на ваших данных | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Мультиязычность | |
| </li> | |
| </ul> | |
| <a href="#contact" class="quantum-btn text-white font-bold py-3 px-6 rounded-lg w-full text-center block"> | |
| Заказать | |
| </a> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8 pricing-card"> | |
| <div class="text-4xl mb-4 feature-icon"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-white">Цифровые аватары</h3> | |
| <p class="text-nebula-300 mb-6 text-sm"> | |
| Виртуальные представители вашего бренда с реалистичной мимикой и голосом | |
| </p> | |
| <div class="text-nebula-500 font-bold text-lg mb-4">от 35 000 ₽</div> | |
| <ul class="space-y-2 mb-6 text-nebula-300 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Лицо и голос бренда | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Генерация любого контента | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Интеграция с сайтами | |
| </li> | |
| </ul> | |
| <a href="#contact" class="quantum-btn text-white font-bold py-3 px-6 rounded-lg w-full text-center block"> | |
| Заказать | |
| </a> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8 pricing-card"> | |
| <div class="text-4xl mb-4 feature-icon"> | |
| <i class="fas fa-funnel-dollar"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-white">Автоворонки</h3> | |
| <p class="text-nebula-300 mb-6 text-sm"> | |
| Умные маркетинговые последовательности с персонализацией в реальном времени | |
| </p> | |
| <div class="text-nebula-500 font-bold text-lg mb-4">от 55 000 ₽</div> | |
| <ul class="space-y-2 mb-6 text-nebula-300 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Анализ поведения | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Динамический контент | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Сквозная аналитика | |
| </li> | |
| </ul> | |
| <a href="#contact" class="quantum-btn text-white font-bold py-3 px-6 rounded-lg w-full text-center block"> | |
| Заказать | |
| </a> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8 pricing-card"> | |
| <div class="text-4xl mb-4 feature-icon"> | |
| <i class="fas fa-chess-queen"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-white">AI-Стратегия</h3> | |
| <p class="text-nebula-300 mb-6 text-sm"> | |
| Комплексная интеграция ИИ в ваш бизнес с дорожной картой внедрения | |
| </p> | |
| <div class="text-nebula-500 font-bold text-lg mb-4">от 90 000 ₽</div> | |
| <ul class="space-y-2 mb-6 text-nebula-300 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> Аудит процессов | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> План автоматизации | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-500 mr-2"></i> ROI-прогнозирование | |
| </li> | |
| </ul> | |
| <a href="#contact" class="quantum-btn text-white font-bold py-3 px-6 rounded-lg w-full text-center block"> | |
| Заказать | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Процесс работы --> | |
| <section class="py-20 px-4 bg-gradient-to-b from-quantum-900/20 to-black/50 section"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-20"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-semibold inline-block mb-4"> | |
| <i class="fas fa-sitemap mr-2"></i> Чёткий алгоритм | |
| </span> | |
| <h2 class="text-4xl font-bold mb-6"> | |
| <span class="holographic-text title-decoration futuristic-font">Как мы работаем</span> | |
| </h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-nebula-500 to-quantum-500 mx-auto mb-8 rounded-full"></div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-nebula-500 to-quantum-500 hidden md:block"></div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div></div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="text-3xl mb-4 feature-icon"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">1. Глубинный анализ</h3> | |
| <p class="text-nebula-300"> | |
| Проводим аудит бизнес-процессов, выявляем точки роста и составляем карту автоматизации | |
| </p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div class="quantum-card rounded-2xl p-8 md:order-first"> | |
| <div class="text-3xl mb-4 feature-icon"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">2. Стратегия</h3> | |
| <p class="text-nebula-300"> | |
| Разрабатываем индивидуальное решение, подбираем технологии и составляем дорожную карту | |
| </p> | |
| </div> | |
| <div></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div></div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="text-3xl mb-4 feature-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">3. Реализация</h3> | |
| <p class="text-nebula-300"> | |
| Воплощаем решение в жизнь с использованием передовых технологий и методологий | |
| </p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="quantum-card rounded-2xl p-8 md:order-first"> | |
| <div class="text-3xl mb-4 feature-icon"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-white">4. Запуск и поддержка</h3> | |
| <p class="text-nebula-300"> | |
| Внедряем решение, обучаем команду и сопровождаем проект на всех этапах | |
| </p> | |
| </div> | |
| <div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Отзывы --> | |
| <section class="py-20 px-4 max-w-6xl mx-auto section"> | |
| <div class="text-center mb-20"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-semibold inline-block mb-4"> | |
| <i class="fas fa-star mr-2"></i> Результаты | |
| </span> | |
| <h2 class="text-4xl font-bold mb-6"> | |
| <span class="holographic-text title-decoration futuristic-font">Кейсы и отзывы</span> | |
| </h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-nebula-500 to-quantum-500 mx-auto mb-8 rounded-full"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-2"> | |
| <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-nebula-300 mb-6 italic"> | |
| "Внедрение нейро-бота увеличило конверсию в заявки на 70%, а нагрузка на менеджеров снизилась в 3 раза. ROI за 2 месяца — 400%" | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="bg-nebula-500 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <span class="font-bold">ИП</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Иван Петров</h4> | |
| <p class="text-nebula-400 text-sm">Розничная сеть</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-2"> | |
| <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-nebula-300 mb-6 italic"> | |
| "Цифровой аватар стал лицом нашего бренда. Экономия на производстве контента — 120 тыс. руб. ежемесячно" | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="bg-quantum-500 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <span class="font-bold">ЕС</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Елена Смирнова</h4> | |
| <p class="text-nebula-400 text-sm">Образовательный проект</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quantum-card rounded-2xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-2"> | |
| <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-nebula-300 mb-6 italic"> | |
| "AI-стратегия позволила систематизировать все процессы. За 4 месяца прибыль выросла на 250% при тех же затратах" | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-500 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <span class="font-bold">АК</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Алексей Козлов</h4> | |
| <p class="text-nebula-400 text-sm">IT-стартап</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA с формой --> | |
| <section id="contact" class="py-24 px-4 text-center bg-gradient-to-br from-nebula-900/50 via-quantum-900/50 to-black/60 section"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| <span class="holographic-text futuristic-font">Готовы к квантовому скачку?</span> | |
| </h2> | |
| <p class="text-xl text-nebula-300 mb-10 max-w-2xl mx-auto"> | |
| Оставьте заявку и получите бесплатный аудит вашего бизнеса с roadmap внедрения ИИ | |
| </p> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="quantum-card rounded-2xl p-8 text-left"> | |
| <form> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-nebula-300 mb-2">Ваше имя</label> | |
| <input type="text" class="input-field w-full px-5 py-3 rounded-lg text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-nebula-300 mb-2">Контакт (email/телефон)</label> | |
| <input type="text" class="input-field w-full px-5 py-3 rounded-lg text-white"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-nebula-300 mb-2">Опишите ваш бизнес</label> | |
| <textarea class="input-field w-full px-5 py-3 rounded-lg text-white" rows="4"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-nebula-500 rounded focus:ring-nebula-500 border-nebula-500 bg-nebula-900"> | |
| <span class="ml-2 text-nebula-300 text-sm">Согласен на обработку персональных данных</span> | |
| </label> | |
| </div> | |
| <button type="submit" class="quantum-btn w-full text-white font-bold py-4 px-6 rounded-lg text-lg"> | |
| <i class="fas fa-paper-plane mr-3"></i> Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| <div class="mt-10 flex flex-wrap justify-center gap-4 text-nebula-300 text-sm"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> +7 (999) 123-45-67 | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> contact@ai-studio.ru | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fab fa-telegram mr-2"></i> @ai_studio_support | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Футер --> | |
| <footer class="py-12 px-4 bg-black/70 section"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2"> | |
| <span class="holographic-text futuristic-font">AI-STUDIO</span> | |
| </h3> | |
| <p class="text-nebula-400">Квантовая студия нейрорешений</p> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-nebula-400 hover:text-nebula-300 text-xl"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-nebula-400 hover:text-nebula-300 text-xl"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <a href="#" class="text-nebula-400 hover:text-nebula-300 text-xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-nebula-400 hover:text-nebula-300 text-xl"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| </div> | |
| <div class="text-nebula-500 text-sm"> | |
| <p>© 2023 AI-STUDIO. Все права защищены</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Создаем плавающие элементы для фона | |
| const floatingElements = document.getElementById('floatingElements'); | |
| const elementCount = 12; | |
| for (let i = 0; i < elementCount; i++) { | |
| const element = document.createElement('div'); | |
| element.classList.add('floating-element'); | |
| // Случайный размер | |
| const size = 100 + Math.random() * 200; | |
| element.style.width = `${size}px`; | |
| element.style.height = `${size}px`; | |
| // Случайная позиция | |
| element.style.left = `${Math.random() * 100}%`; | |
| element.style.top = `${Math.random() * 100}%`; | |
| // Случайная задержка анимации | |
| element.style.animationDelay = `${Math.random() * 20}s`; | |
| element.style.animationDuration = `${30 + Math.random() * 40}s`; | |
| floatingElements.appendChild(element); | |
| } | |
| // Плавная прокрутка к якорям | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| window.scrollTo({ | |
| top: target.offsetTop - 20, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Анимация при скролле | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.quantum-card, .tech-stack-item'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Инициализация анимации | |
| window.addEventListener('load', () => { | |
| const cards = document.querySelectorAll('.quantum-card'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = `all 0.5s ease ${index * 0.1}s`; | |
| }); | |
| const techItems = document.querySelectorAll('.tech-stack-item'); | |
| techItems.forEach((item, index) => { | |
| item.style.opacity = '0'; | |
| item.style.transform = 'translateY(20px)'; | |
| item.style.transition = `all 0.5s ease ${index * 0.05}s`; | |
| }); | |
| setTimeout(animateOnScroll, 300); | |
| }); | |
| window.addEventListener('scroll', animateOnScroll); | |
| </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-studio-vik" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |