Spaces:

imbytegroup
/

nromal

Running

App Files Files Community

imbytegroup commited on Apr 1, 2025

Commit

81a5272

verified ·

1 Parent(s): 13744d1

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +987 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nromal
-emoji: 🏆
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nromal
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,987 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Solutions Ecosystem</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0A0A0A;
+            color: white;
+            margin: 0;
+            overflow-x: hidden;
+        }
+        .code-font {
+            font-family: 'Roboto Mono', monospace;
+        }
+        .neon-teal {
+            color: #00FEFE;
+            text-shadow: 0 0 8px rgba(0, 254, 254, 0.6);
+        }
+        .neon-pink {
+            color: #FF00FF;
+            text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
+        }
+        .border-neon-teal {
+            border-color: #00FEFE;
+            box-shadow: 0 0 12px rgba(0, 254, 254, 0.4);
+        }
+        .border-neon-pink {
+            border-color: #FF00FF;
+            box-shadow: 0 0 12px rgba(255, 0, 255, 0.4);
+        }
+        .bg-dark {
+            background-color: #0A0A0A;
+        }
+        .bg-darker {
+            background-color: #050505;
+        }
+        #canvas-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 2s;
+        }
+        .letter-animation {
+            display: inline-block;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        .service-planet {
+            transition: all 0.5s ease;
+            filter: drop-shadow(0 0 5px transparent);
+        }
+        .service-planet:hover {
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 15px rgba(0, 254, 254, 0.7));
+        }
+        .progress-bar {
+            height: 4px;
+            background: linear-gradient(90deg, #00FEFE, #FF00FF);
+            width: 0%;
+            transition: width 1s;
+        }
+        .typing-cursor {
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            background: #00FEFE;
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-15px); }
+        }
+    </style>
+</head>
+<body class="bg-dark text-white">
+    <!-- 3D Canvas Container -->
+    <div id="canvas-container"></div>
+    <!-- Welcome Overlay (disappears after loading) -->
+    <div id="welcome-overlay" class="fixed inset-0 bg-black flex items-center justify-center z-50 transition-opacity duration-1000">
+        <div class="text-center">
+            <h1 class="text-5xl font-bold mb-6 neon-teal">DIGITAL SOLUTIONS ECOSYSTEM</h1>
+            <div class="animate-pulse">Loading interactive 3D environment...</div>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex flex-col justify-center px-6 md:px-12 lg:px-24 relative overflow-hidden">
+        <div id="hero-content" class="opacity-0 transform -translate-y-10 transition-all duration-1000">
+            <h1 id="hero-title" class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 max-w-4xl">
+                <!-- Letters will be injected by JS -->
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-12 neon-pink">«От чат-бота до Web3 — реализуем под ключ за 14 дней»</p>
+            <button id="cta-button" class="px-8 py-4 rounded-lg bg-gradient-to-r from-teal-400 to-purple-500 hover:from-teal-500 hover:to-purple-600 text-lg font-bold transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-teal-500/30 border-2 border-white/10 animate-pulse">
+                Начать проект
+            </button>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <div class="animate-bounce w-8 h-8 border-b-2 border-white rounded-full"></div>
+        </div>
+        <!-- 3D Objects Stats -->
+        <div class="hidden md:flex space-x-8 absolute bottom-10 right-10">
+            <div class="bg-black/50 backdrop-blur-sm p-4 rounded-lg border-neon-teal">
+                <p class="text-xs text-gray-400">Телеграм боты</p>
+                <p class="text-xl neon-teal">+300% к конверсии</p>
+            </div>
+            <div class="bg-black/50 backdrop-blur-sm p-4 rounded-lg border-neon-pink">
+                <p class="text-xs text-gray-400">Mini-Apps</p>
+                <p class="text-xl neon-pink">+45% удержание</p>
+            </div>
+        </div>
+    </section>
+    <!-- Services 3D Gallery -->
+    <section class="min-h-screen py-20 px-6 md:px-12 lg:px-24">
+        <h2 class="text-3xl md:text-5xl font-bold mb-20 text-center neon-teal">Наши решения</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <!-- Chat Bots -->
+            <div class="service-planet group relative">
+                <div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-teal-500 to-teal-900 flex items-center justify-center border-2 border-teal-400 hover:border-teal-200 transition-all">
+                    <div class="text-center p-6 transform group-hover:scale-110 transition-all">
+                        <h3 class="text-2xl font-bold mb-2">Чат-боты</h3>
+                        <p class="text-sm opacity-70 group-hover:opacity-100">Автоматизация с ИИ</p>
+                    </div>
+                </div>
+                <button class="absolute top-0 right-0 -mt-3 -mr-3 bg-teal-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-teal-300 transform hover:scale-110 transition-all">+</button>
+            </div>
+            <!-- Mini-Apps -->
+            <div class="service-planet group relative">
+                <div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-purple-500 to-purple-900 flex items-center justify-center border-2 border-purple-400 hover:border-purple-200 transition-all">
+                    <div class="text-center p-6 transform group-hover:scale-110 transition-all">
+                        <h3 class="text-2xl font-bold mb-2">Mini-Apps</h3>
+                        <p class="text-sm opacity-70 group-hover:opacity-100">Игровые экономики</p>
+                    </div>
+                </div>
+                <button class="absolute top-0 right-0 -mt-3 -mr-3 bg-purple-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-purple-300 transform hover:scale-110 transition-all">+</button>
+            </div>
+            <!-- Web3 -->
+            <div class="service-planet group relative">
+                <div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-blue-500 to-blue-900 flex items-center justify-center border-2 border-blue-400 hover:border-blue-200 transition-all">
+                    <div class="text-center p-6 transform group-hover:scale-110 transition-all">
+                        <h3 class="text-2xl font-bold mb-2">Web3</h3>
+                        <p class="text-sm opacity-70 group-hover:opacity-100">Блокчейн интеграции</p>
+                    </div>
+                </div>
+                <button class="absolute top-0 right-0 -mt-3 -mr-3 bg-blue-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-blue-300 transform hover:scale-110 transition-all">+</button>
+            </div>
+            <!-- AI -->
+            <div class="service-planet group relative">
+                <div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-pink-500 to-pink-900 flex items-center justify-center border-2 border-pink-400 hover:border-pink-200 transition-all">
+                    <div class="text-center p-6 transform group-hover:scale-110 transition-all">
+                        <h3 class="text-2xl font-bold mb-2">AI</h3>
+                        <p class="text-sm opacity-70 group-hover:opacity-100">Генеративный интеллект</p>
+                    </div>
+                </div>
+                <button class="absolute top-0 right-0 -mt-3 -mr-3 bg-pink-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-pink-300 transform hover:scale-110 transition-all">+</button>
+            </div>
+        </div>
+        <div id="service-details" class="mt-20 bg-black/50 backdrop-blur-sm p-8 rounded-xl border-neon-teal hidden">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 id="detail-title" class="text-2xl font-bold mb-2 neon-pink">Чат-боты</h3>
+                    <p id="detail-description" class="mb-4">Гибкие решения для автоматизации бизнес-процессов с помощью Telegram, WhatsApp и других мессенджеров.</p>
+                    <ul id="detail-features" class="list-disc pl-5 space-y-2 text-sm">
+                        <li>Интеграция с CRM и платежными системами</li>
+                        <li>AI-ассистенты с NLP</li>
+                        <li>Мультиязычная поддержка</li>
+                    </ul>
+                </div>
+                <button id="close-details" class="text-gray-400 hover:text-white">&times;</button>
+            </div>
+            <div class="mt-6">
+                <div class="mb-4">
+                    <p class="text-sm text-gray-400">Пример из практики:</p>
+                    <p id="detail-case" class="font-bold">Бот для @crypto_storage: +$50K/month</p>
+                </div>
+                <button class="px-6 py-2 bg-teal-500 rounded-lg hover:bg-teal-600 font-medium">Заказать подобное решение</button>
+            </div>
+        </div>
+    </section>
+    <!-- AI Guide -->
+    <section class="min-h-screen py-20 px-6 md:px-12 lg:px-24 relative" id="ai-guide-section">
+        <div id="ai-guide" class="bg-black/50 backdrop-blur-sm p-8 rounded-xl border-neon-pink max-w-3xl mx-auto hidden transform transition-all duration-500 opacity-0 translate-y-10">
+            <div class="flex items-start space-x-4">
+                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold">AI</div>
+                <div class="flex-1">
+                    <div id="ai-message" class="mb-4">
+                        <p class="typing-text">Привет! Я помогу подобрать решение под ваш бюджет. Ответьте на 3 вопроса и получите примерную стоимость.</p>
+                        <span class="typing-cursor"></span>
+                    </div>
+                    <div id="ai-questions" class="space-y-4 hidden">
+                        <div>
+                            <p class="text-sm text-gray-400 mb-1">1/3 Какой тип решения вам нужен?</p>
+                            <div class="flex flex-wrap gap-2">
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Чат-бот</button>
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Mini-App</button>
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Web3 интеграция</button>
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">AI решение</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ai-result" class="hidden">
+                        <p class="font-bold neon-teal mb-2">Примерная стоимость: ~$5,000 - $15,000</p>
+                        <p class="text-sm mb-4">На основе выбранных параметров и нашего опыта</p>
+                        <button class="px-6 py-2 bg-gradient-to-r from-teal-400 to-purple-500 rounded-lg hover:from-teal-500 hover:to-purple-600 font-medium">
+                            Обсудить проект детально
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="guide-trigger" class="fixed bottom-8 right-8 w-16 h-16 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold cursor-pointer transform hover:scale-110 transition-all shadow-lg shadow-pink-500/30">
+            AI
+        </div>
+    </section>
+    <!-- Dynamic Form -->
+    <section class="py-20 px-6 md:px-12 lg:px-24 bg-darker">
+        <div class="max-w-3xl mx-auto">
+            <h2 class="text-3xl md:text-5xl font-bold mb-12 text-center neon-teal">Начните свой проект</h2>
+            <form id="project-form" class="space-y-6">
+                <div id="form-steps" class="flex justify-between mb-8">
+                    <div class="step flex-1 flex flex-col items-center">
+                        <div class="w-10 h-10 rounded-full border-2 border-teal-500 bg-black flex items-center justify-center mb-2">1</div>
+                        <p class="text-xs text-center">Информация</p>
+                    </div>
+                    <div class="h-1 bg-gray-800 flex-1 mx-2 mt-5"></div>
+                    <div class="step flex-1 flex flex-col items-center">
+                        <div class="w-10 h-10 rounded-full border-2 border-gray-600 bg-black flex items-center justify-center mb-2">2</div>
+                        <p class="text-xs text-center text-gray-500">Детали</p>
+                    </div>
+                    <div class="h-1 bg-gray-800 flex-1 mx-2 mt-5"></div>
+                    <div class="step flex-1 flex flex-col items-center">
+                        <div class="w-10 h-10 rounded-full border-2 border-gray-600 bg-black flex items-center justify-center mb-2">3</div>
+                        <p class="text-xs text-center text-gray-500">Подтверждение</p>
+                    </div>
+                </div>
+                <div id="step-1" class="space-y-6">
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-teal">Ваше имя</label>
+                        <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-pink">Email или Telegram</label>
+                        <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-teal">Тип проекта</label>
+                        <select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500">
+                            <option>Чат-бот</option>
+                            <option>Mini-App</option>
+                            <option>Web3 решение</option>
+                            <option>AI интеграция</option>
+                            <option>Комплексное решение</option>
+                        </select>
+                    </div>
+                    <button type="button" onclick="nextStep(2)" class="w-full bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
+                        Продолжить
+                    </button>
+                </div>
+                <div id="step-2" class="space-y-6 hidden" data-depends="step-1">
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-pink">Коротко опишите ваш проект</label>
+                        <textarea class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500 h-32"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-teal">Бюджет проекта</label>
+                        <select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500">
+                            <option>Менее $5,000</option>
+                            <option>$5,000 - $10,000</option>
+                            <option>$10,000 - $25,000</option>
+                            <option>$25,000+</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1 neon-pink">Желаемые сроки</label>
+                        <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500" placeholder="Пример: 2-3 недели">
+                    </div>
+                    <div class="flex space-x-4">
+                        <button type="button" onclick="prevStep(1)" class="flex-1 bg-gray-800 py-3 rounded-lg font-bold hover:bg-gray-700 transition">
+                            Назад
+                        </button>
+                        <button type="button" onclick="nextStep(3)" class="flex-1 bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
+                            Продолжить
+                        </button>
+                    </div>
+                </div>
+                <div id="step-3" class="space-y-6 hidden" data-depends="step-2">
+                    <div class="bg-black/30 p-6 rounded-xl border border-gray-800">
+                        <h4 class="font-bold mb-3 neon-teal">Подтвердите информацию:</h4>
+                        <p id="review-name" class="mb-1"><span class="text-gray-500">Имя:</span> <span class="font-medium">-</span></p>
+                        <p id="review-contact" class="mb-1"><span class="text-gray-500">Контакт:</span> <span class="font-medium">-</span></p>
+                        <p id="review-type" class="mb-1"><span class="text-gray-500">Тип:</span> <span class="font-medium">-</span></p>
+                        <p id="review-budget" class="mb-1"><span class="text-gray-500">Бюджет:</span> <span class="font-medium">-</span></p>
+                    </div>
+                    <div class="bg-black/30 p-6 rounded-xl border border-gray-800">
+                        <p class="font-bold mb-3 neon-pink">Дополнительные услуги:</p>
+                        <div class="space-y-3">
+                            <label class="flex items-center space-x-3">
+                                <input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span>Маркетинговая стратегия (+$2,000)</span>
+                            </label>
+                            <label class="flex items-center space-x-3">
+                                <input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span>Долгосрочная поддержка (+$500/мес)</span>
+                            </label>
+                            <label class="flex items-center space-x-3">
+                                <input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span>Персонализированный NFT (+$1,000)</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                        <textarea class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500 h-16" placeholder="Дополнительные комментарии..."></textarea>
+                    </div>
+                    <div class="flex space-x-4">
+                        <button type="button" onclick="prevStep(2)" class="flex-1 bg-gray-800 py-3 rounded-lg font-bold hover:bg-gray-700 transition">
+                            Назад
+                        </button>
+                        <button type="submit" class="flex-1 bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
+                            Отправить заявку
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </section>
+    <!-- Cases Section -->
+    <section class="py-20 px-6 md:px-12 lg:px-24">
+        <h2 class="text-3xl md:text-5xl font-bold mb-20 text-center neon-pink">Наши кейсы</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <!-- Case 1 -->
+            <div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-teal overflow-hidden transition-transform hover:scale-105">
+                <div class="h-48 bg-gradient-to-br from-teal-500 to-teal-900 flex items-center justify-center">
+                    <div class="text-center p-4">
+                        <h3 class="text-xl font-bold mb-2">Crypto Storage Bot</h3>
+                        <p class="text-sm opacity-80">Telegram бот для криптосервиса</p>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-3">
+                        <p class="text-xs text-gray-400">Результат:</p>
+                        <p class="font-bold neon-teal">+$50K/мес</p>
+                    </div>
+                    <p class="text-sm mb-4">Автоматизированный сервис хранения криптовалют с опциями стекинга и защищёнными транзакциями.</p>
+                    <button class="w-full px-4 py-2 bg-teal-500/10 border border-teal-500 rounded-lg hover:bg-teal-500/20 text-sm">
+                        Смотреть демо
+                    </button>
+                </div>
+            </div>
+            <!-- Case 2 -->
+            <div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-pink overflow-hidden transition-transform hover:scale-105">
+                <div class="h-48 bg-gradient-to-br from-purple-500 to-purple-900 flex items-center justify-center">
+                    <div class="text-center p-4">
+                        <h3 class="text-xl font-bold mb-2">NFT Game Mini-App</h3>
+                        <p class="text-sm opacity-80">P2E игра в Telegram</p>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-3">
+                        <p class="text-xs text-gray-400">Результат:</p>
+                        <p class="font-bold neon-pink">+132K users</p>
+                    </div>
+                    <p class="text-sm mb-4">Игровая экономика с NFT персонажами и токенизированными наградами, интегрированная с TON.</p>
+                    <button class="w-full px-4 py-2 bg-purple-500/10 border border-purple-500 rounded-lg hover:bg-purple-500/20 text-sm">
+                        Смотреть демо
+                    </button>
+                </div>
+            </div>
+            <!-- Case 3 -->
+            <div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-teal overflow-hidden transition-transform hover:scale-105">
+                <div class="h-48 bg-gradient-to-br from-blue-500 to-blue-900 flex items-center justify-center">
+                    <div class="text-center p-4">
+                        <h3 class="text-xl font-bold mb-2">AI News Aggregator</h3>
+                        <p class="text-sm opacity-80">Персонализированная лента</p>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-3">
+                        <p class="text-xs text-gray-400">Результат:</p>
+                        <p class="font-bold neon-teal">+75% retention</p>
+                    </div>
+                    <p class="text-sm mb-4">Нейросеть анализирует предпочтения и составляет персонализированную ленту новостей и аналитики.</p>
+                    <button class="w-full px-4 py-2 bg-blue-500/10 border border-blue-500 rounded-lg hover:bg-blue-500/20 text-sm">
+                        Смотреть демо
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="text-center mt-16">
+            <button class="px-8 py-3 rounded-lg bg-gradient-to-r from-teal-400 to-purple-500 hover:from-teal-500 hover:to-purple-600 text-lg font-bold transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-teal-500/30 border-2 border-white/10">
+                Все кейсы (12+ успешных проектов)
+            </button>
+        </div>
+    </section>
+    <!-- Success Modal -->
+    <div id="success-modal" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 hidden">
+        <div class="bg-black/60 backdrop-blur-sm rounded-xl border-2 border-teal-500 p-8 max-w-md w-full mx-4 relative">
+            <button id="close-success" class="absolute top-4 right-4 text-gray-400 hover:text-white">&times;</button>
+            <div class="text-center">
+                <div class="w-20 h-20 rounded-full bg-teal-500/20 flex items-center justify-center mx-auto mb-6">
+                    <svg class="w-10 h-10 text-teal-500" 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="M5 13l4 4L19 7"></path>
+                    </svg>
+                </div>
+                <h3 class="text-2xl font-bold mb-2 neon-teal">Спасибо!</h3>
+                <p class="mb-6">Мы уже начали работу над вашим проектом</p>
+                <div class="mb-8">
+                    <div class="progress-bar"></div>
+                </div>
+                <p class="text-sm text-gray-400">Наш бот уже отправил вам сообщение в Telegram с деталями. Проверьте чат!</p>
+            </div>
+        </div>
+    </div>
+    <!-- Console Command Easter Egg -->
+    <div id="console-egg" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50 backdrop-blur-sm">
+        <div class="bg-black/80 border border-teal-500 rounded-lg p-8 max-w-md w-full">
+            <div class="flex justify-between items-start mb-6">
+                <h3 class="text-xl font-bold neon-teal">Secret Command Activated</h3>
+                <button onclick="closeEasterEgg()" class="text-gray-400 hover:text-white">&times;</button>
+            </div>
+            <div class="bg-gray-900 p-4 rounded-lg font-mono text-sm mb-6 overflow-auto" style="max-height: 200px;">
+                <p class="text-green-400">> start bot --demo</p>
+                <p class="text-white">Initializing demo environment...</p>
+                <p class="text-white">Loading AI assistant...</p>
+                <p class="text-white">Connecting to Telegram API...</p>
+                <p class="text-green-400">> <span class="typing-text">Demo bot ready! You can now interact with a simplified version of our AI-powered Telegram bot directly in this window.</span></p>
+                <span class="typing-cursor"></span>
+            </div>
+            <div class="bg-gray-900/50 p-4 rounded-lg">
+                <p class="text-sm mb-3 neon-pink">Try these commands:</p>
+                <div class="grid grid-cols-2 gap-2">
+                    <button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/start</button>
+                    <button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/pricing</button>
+                    <button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/features</button>
+                    <button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/demo</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Hide welcome overlay after load
+            setTimeout(() => {
+                document.getElementById('welcome-overlay').style.opacity = '0';
+                setTimeout(() => {
+                    document.getElementById('welcome-overlay').style.display = 'none';
+                    // Show canvas
+                    document.getElementById('canvas-container').style.opacity = '1';
+                    initThreeJS();
+                }, 1000);
+            }, 1500);
+            // Animate hero title
+            const heroTitle = "Создаём цифровые решения, которые приносят прибыль";
+            const heroTitleElement = document.getElementById('hero-title');
+            heroTitle.split('').forEach((char, i) => {
+                const span = document.createElement('span');
+                span.className = 'letter-animation';
+                span.textContent = char === ' ' ? ' ' : char;
+                span.style.transitionDelay = `${i * 0.05}s`;
+                heroTitleElement.appendChild(span);
+            });
+            setTimeout(() => {
+                document.querySelectorAll('.letter-animation').forEach(el => {
+                    el.style.opacity = '1';
+                    el.style.transform = 'translateY(0)';
+                });
+                document.getElementById('hero-content').style.opacity = '1';
+                document.getElementById('hero-content').style.transform = 'translateY(0)';
+            }, 500);
+            // Show AI guide after 15 seconds
+            setTimeout(() => {
+                document.getElementById('ai-guide').classList.remove('hidden');
+                setTimeout(() => {
+                    document.getElementById('ai-guide').style.opacity = '1';
+                    document.getElementById('ai-guide').style.transform = 'translateY(0)';
+                    // Type AI message
+                    typeText("Привет! Я помогу подобрать решение под ваш бюджет. Ответьте на 3 вопроса и получите примерную стоимость.",
+                            document.querySelector('.typing-text'), () => {
+                        setTimeout(() => {
+                            document.getElementById('ai-questions').classList.remove('hidden');
+                        }, 500);
+                    });
+                }, 100);
+            }, 15000);
+            // Service planets interaction
+            document.querySelectorAll('.service-planet button').forEach(btn => {
+                btn.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    const parent = this.parentElement;
+                    const title = parent.querySelector('h3').textContent;
+                    // Set details based on selection
+                    setServiceDetails(title);
+                    document.getElementById('service-details').classList.remove('hidden');
+                });
+            });
+            // Close service details
+            document.getElementById('close-details').addEventListener('click', function() {
+                document.getElementById('service-details').classList.add('hidden');
+            });
+            // AI Guide trigger
+            document.getElementById('guide-trigger').addEventListener('click', function() {
+                const guide = document.getElementById('ai-guide');
+                if (guide.classList.contains('hidden')) {
+                    guide.classList.remove('hidden');
+                    setTimeout(() => {
+                        guide.style.opacity = '1';
+                        guide.style.transform = 'translateY(0)';
+                    }, 10);
+                } else {
+                    guide.style.opacity = '0';
+                    guide.style.transform = 'translateY(10px)';
+                    setTimeout(() => {
+                        guide.classList.add('hidden');
+                    }, 500);
+                }
+            });
+            // AI questions
+            document.querySelectorAll('.ai-answer-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    // Simple simulation of AI process
+                    const questions = document.getElementById('ai-questions');
+                    questions.innerHTML = `
+                        <div>
+                            <p class="text-sm text-gray-400 mb-1">2/3 Какой у вас бюджет?</p>
+                            <div class="flex flex-wrap gap-2">
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">До $5K</button>
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">$5K-$15K</button>
+                                <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">$15K+</button>
+                            </div>
+                        </div>
+                    `;
+                    // Rebind events
+                    document.querySelectorAll('.ai-answer-btn').forEach(newBtn => {
+                        newBtn.addEventListener('click', function() {
+                            questions.innerHTML = `
+                                <div>
+                                    <p class="text-sm text-gray-400 mb-1">3/3 Когда нужно запустить?</p>
+                                    <div class="flex flex-wrap gap-2">
+                                        <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Срочно (до 2 недель)</button>
+                                        <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">1-2 месяца</button>
+                                        <button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Пока в планах</button>
+                                    </div>
+                                </div>
+                            `;
+                            // Final answer
+                            document.querySelectorAll('.ai-answer-btn').forEach(finalBtn => {
+                                finalBtn.addEventListener('click', function() {
+                                    document.getElementById('ai-questions').classList.add('hidden');
+                                    document.getElementById('ai-result').classList.remove('hidden');
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+            // Form submission
+            document.getElementById('project-form').addEventListener('submit', function(e) {
+                e.preventDefault();
+                // Update review section
+                const inputs = this.querySelectorAll('input[type="text"], input[type="email"], select');
+                inputs.forEach(input => {
+                    if (input.type !== 'checkbox') {
+                        const reviewElement = document.getElementById('review-' + input.name);
+                        if (reviewElement) {
+                            reviewElement.innerHTML = reviewElement.innerHTML.split(':')[0] + ': <span class="font-medium">' + input.value + '</span>';
+                        }
+                    }
+                });
+                // Show success modal
+                document.getElementById('success-modal').classList.remove('hidden');
+                // Animate progress bar
+                setTimeout(() => {
+                    document.querySelector('.progress-bar').style.width = '100%';
+                }, 100);
+            });
+            // Close success modal
+            document.getElementById('close-success').addEventListener('click', function() {
+                document.getElementById('success-modal').classList.add('hidden');
+            });
+            // CTA button click
+            document.getElementById('cta-button').addEventListener('click', function() {
+                document.getElementById('project-form').scrollIntoView({ behavior: 'smooth' });
+            });
+            // Easter egg for console
+            console.log('%cДобро пожаловать в нашу цифровую экосистему!', 'color: #00FEFE; font-size: 14px;');
+            console.log('%cВведите "start bot" для доступа к демо-версии', 'color: #FF00FF; font-size: 12px;');
+        });
+        // Three.js initialization
+        function initThreeJS() {
+            const container = document.getElementById('canvas-container');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            // Scene
+            const scene = new THREE.Scene();
+            // Camera
+            const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+            camera.position.z = 30;
+            // Renderer
+            const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+            renderer.setSize(width, height);
+            container.appendChild(renderer.domElement);
+            // Lights
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0x00FEFE, 0.8);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+            const directionalLight2 = new THREE.DirectionalLight(0xFF00FF, 0.8);
+            directionalLight2.position.set(-1, -1, -1);
+            scene.add(directionalLight2);
+            // Floating objects
+            const objects = [];
+            const geometry = new THREE.SphereGeometry(1, 16, 16);
+            // Create Telegram bot model (simplified with spheres)
+            const botMaterial = new THREE.MeshPhongMaterial({
+                color: 0x0088cc,
+                emissive: 0x006699,
+                specular: 0x00FEFE,
+                shininess: 30
+            });
+            const botCore = new THREE.Mesh(geometry, botMaterial);
+            scene.add(botCore);
+            objects.push(botCore);
+            // Create surrounding objects
+            for (let i = 0; i < 20; i++) {
+                const material = new THREE.MeshPhongMaterial({
+                    color: Math.random() * 0xffffff,
+                    emissive: 0x0,
+                    specular: i % 2 === 0 ? 0x00FEFE : 0xFF00FF,
+                    shininess: 10,
+                    transparent: true,
+                    opacity: 0.8
+                });
+                const obj = new THREE.Mesh(
+                    geometry,
+                    material
+                );
+                obj.position.x = Math.random() * 30 - 15;
+                obj.position.y = Math.random() * 30 - 15;
+                obj.position.z = Math.random() * 30 - 15;
+                obj.userData = {
+                    speed: Math.random() * 0.02 + 0.01,
+                    direction: new THREE.Vector3(
+                        Math.random() * 0.2 - 0.1,
+                        Math.random() * 0.2 - 0.1,
+                        Math.random() * 0.2 - 0.1
+                    ).normalize()
+                };
+                scene.add(obj);
+                objects.push(obj);
+            }
+            // Handle window resize
+            window.addEventListener('resize', () => {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            });
+            // Animation loop
+            function animate() {
+                requestAnimationFrame(animate);
+                // Rotate bot core
+                botCore.rotation.x += 0.005;
+                botCore.rotation.y += 0.01;
+                // Move surrounding objects
+                objects.forEach(obj => {
+                    if (obj !== botCore) {
+                        // Move in direction
+                        obj.position.x += obj.userData.direction.x * obj.userData.speed;
+                        obj.position.y += obj.userData.direction.y * obj.userData.speed;
+                        obj.position.z += obj.userData.direction.z * obj.userData.speed;
+                        // Bounce off invisible walls
+                        if (Math.abs(obj.position.x) > 20) obj.userData.direction.x *= -1;
+                        if (Math.abs(obj.position.y) > 20) obj.userData.direction.y *= -1;
+                        if (Math.abs(obj.position.z) > 20) obj.userData.direction.z *= -1;
+                        // Rotate
+                        obj.rotation.x += 0.01;
+                        obj.rotation.y += 0.01;
+                    }
+                });
+                renderer.render(scene, camera);
+            }
+            animate();
+        }
+        // Form steps navigation
+        function nextStep(step) {
+            document.getElementById(`step-${step-1}`).classList.add('hidden');
+            document.getElementById(`step-${step}`).classList.remove('hidden');
+            // Update steps UI
+            document.querySelectorAll('.step').forEach((el, i) => {
+                if (i < step) {
+                    el.querySelector('div').classList.remove('border-gray-600');
+                    el.querySelector('div').classList.add('border-teal-500');
+                    el.querySelector('p').classList.remove('text-gray-500');
+                } else {
+                    el.querySelector('div').classList.add('border-gray-600');
+                    el.querySelector('div').classList.remove('border-teal-500');
+                    el.querySelector('p').classList.add('text-gray-500');
+                }
+            });
+        }
+        function prevStep(step) {
+            document.getElementById(`step-${step+1}`).classList.add('hidden');
+            document.getElementById(`step-${step}`).classList.remove('hidden');
+            // Update steps UI
+            document.querySelectorAll('.step').forEach((el, i) => {
+                if (i < step) {
+                    el.querySelector('div').classList.remove('border-gray-600');
+                    el.querySelector('div').classList.add('border-teal-500');
+                    el.querySelector('p').classList.remove('text-gray-500');
+                } else {
+                    el.querySelector('div').classList.add('border-gray-600');
+                    el.querySelector('div').classList.remove('border-teal-500');
+                    el.querySelector('p').classList.add('text-gray-500');
+                }
+            });
+        }
+        // Type text animation
+        function typeText(text, element, callback) {
+            let i = 0;
+            element.textContent = '';
+            const cursor = element.nextElementSibling;
+            cursor.style.display = 'inline-block';
+            const typing = setInterval(() => {
+                if (i < text.length) {
+                    element.textContent += text.charAt(i);
+                    i++;
+                } else {
+                    clearInterval(typing);
+                    cursor.style.display = 'none';
+                    if (callback) callback();
+                }
+            }, 30);
+        }
+        // Set service details based on selection
+        function setServiceDetails(service) {
+            const details = {
+                "Чат-боты": {
+                    title: "Чат-боты",
+                    description: "Гибкие решения для автоматизации бизнес-процессов с помощью Telegram, WhatsApp и других мессенджеров.",
+                    features: [
+                        "Интеграция с CRM и платежными системами",
+                        "AI-ассистенты с NLP",
+                        "Мультиязычная поддержка",
+                        "Гибкие сценарии диалогов"
+                    ],
+                    case: "Бот для @crypto_storage: +$50K/month"
+                },
+                "Mini-Apps": {
+                    title: "Mini-Apps",
+                    description: "Полноценные приложения внутри Telegram с игровыми механиками и интеграцией крипто-экономик.",
+                    features: [
+                        "WebView и JS-приложения",
+                        "Игровые движки",
+                        "Встроенные кошельки",
+                        "P2E механики"
+                    ],
+                    case: "NFT Game Mini-App: +75% retention"
+                },
+                "Web3": {
+                    title: "Web3 решения",
+                    description: "Интеграция блокчейн технологий в ваши приложения и бизнес-процессы.",
+                    features: [
+                        "Смарт-контракты",
+                        "NFT коллекции",
+                        "Крипто-платежи",
+                        "Децентрализованные приложения"
+                    ],
+                    case: "TON Wallet Integration: 30K+ tx/month"
+                },
+                "AI": {
+                    title: "AI интеграции",
+                    description: "Искусственный интеллект для обработки данных, генерации контента и автоматизации решений.",
+                    features: [
+                        "NLP для чат-ботов",
+                        "Генерация изображений",
+                        "Анализ данных",
+                        "Персонализированные рекомендации"
+                    ],
+                    case: "AI News Aggregator: +75% retention"
+                }
+            };
+            if (details[service]) {
+                document.getElementById('detail-title').textContent = details[service].title;
+                document.getElementById('detail-description').textContent = details[service].description;
+                const featuresList = document.getElementById('detail-features');
+                featuresList.innerHTML = '';
+                details[service].features.forEach(feature => {
+                    const li = document.createElement('li');
+                    li.textContent = feature;
+                    featuresList.appendChild(li);
+                });
+                document.getElementById('detail-case').textContent = details[service].case;
+                // Update the order button color based on service
+                const button = document.querySelector('#service-details button');
+                button.className = 'px-6 py-2 rounded-lg font-medium';
+                if (service === "Чат-боты") button.classList.add('bg-teal-500', 'hover:bg-teal-600');
+                else if (service === "Mini-Apps") button.classList.add('bg-purple-500', 'hover:bg-purple-600');
+                else if (service === "Web3") button.classList.add('bg-blue-500', 'hover:bg-blue-600');
+                else if (service === "AI") button.classList.add('bg-pink-500', 'hover:bg-pink-600');
+            }
+        }
+        // Easter egg for console command
+        window.addEventListener('keydown', function(e) {
+            // Check for Ctrl+Shift+I (dev tools)
+            if (e.ctrlKey && e.shiftKey && e.key === 'I') {
+                console.log('%cВведите "start bot" для доступа к демо-версии', 'color: #FF00FF; font-size: 14px;');
+            }
+        });
+        // Listen for console commands
+        const originalConsoleLog = console.log;
+        console.log = function(message) {
+            originalConsoleLog.apply(console, arguments);
+            if (typeof message === 'string' && message.toLowerCase().includes('start bot')) {
+                // Show the easter egg
+                document.getElementById('console-egg').classList.remove('hidden');
+            }
+        };
+        function closeEasterEgg() {
+            document.getElementById('console-egg').classList.add('hidden');
+        }
+        // Handle demo console commands
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelectorAll('.console-cmd').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const consoleOutput = document.querySelector('#console-egg .bg-gray-900');
+                    const currentText = consoleOutput.innerHTML;
+                    let response = "";
+                    switch(this.textContent) {
+                        case '/start':
+                            response = "🤖 Добро пожаловать в демо нашего Telegram бота!\n\nЭто упрощенная версия реального бота, который мы создаем для клиентов. Вы можете попробовать команды:\n\n/pricing - стоимость услуг\n/features - возможности\n/demo - демо-сценарий";
+                            break;
+                        case '/pricing':
+                            response = "💰 Наши базовые цены:\n\nЧат-бот: от $3,000\nMini-App: от $8,000\nWeb3 решение: от $12,000\nПолный цикл: от $20,000\n\nЦены зависят от сложности и сроков.";
+                            break;
+                        case '/features':
+                            response = "✨ Основные возможности:\n\n• AI-ассистенты\n• Интеграция платежей\n• Мультиязычность\n• Web3 кошельки\n• P2E механики\n• Автоматизированные процессы";
+                            break;
+                        case '/demo':
+                            response = "🚀 Запускаем демо-сценарий...\n\n1. Клиент пишет '/start'\n2. Бот задает уточняющие вопросы\n3. Формируется предложение\n4. Подписывается контракт\n5. Реализация за 14 дней!";
+                            break;
+                        default:
+                            response = "Неизвестная команда. Введите /start для списка команд.";
+                    }
+                    consoleOutput.innerHTML = currentText +
+                        `\n<p class="text-green-400">> ${this.textContent}</p>` +
+                        `\n<p class="text-white">${response.replace(/\n/g, '<br>')}</p>` +
+                        `<p class="text-green-400">> <span class="typing-text"></span></p><span class="typing-cursor"></span>`;
+                    // Scroll to bottom
+                    consoleOutput.scrollTop = consoleOutput.scrollHeight;
+                    // Type the response
+                    const typingText = consoleOutput.querySelector('.typing-text');
+                    const typingCursor = consoleOutput.querySelector('.typing-cursor');
+                    typingCursor.style.display = 'inline-block';
+                    let i = 0;
+                    const typingInterval = setInterval(() => {
+                        if (i < response.length) {
+                            typingText.textContent += response.charAt(i);
+                            i++;
+                        } else {
+                            clearInterval(typingInterval);
+                            typingCursor.style.display = 'none';
+                        }
+                        consoleOutput.scrollTop = consoleOutput.scrollHeight;
+                    }, 30);
+                });
+            });
+        });
+    </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=imbytegroup/nromal" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>