Spaces:

Amg63
/

vitopro

Running

App Files Files Community

Amg63 commited on Apr 29, 2025

Commit

4a32e29

verified ·

1 Parent(s): 8f4e927

Add 2 files

Browse files

Files changed (2) hide show

index.html +496 -79
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -110,14 +110,95 @@
         .nav-link:hover::after {
             width: 100%;
         }
     </style>
 </head>
 <body class="gradient-bg">
     <!-- Header -->
-    <header class="py-6 px-4 sm:px-6 lg:px-8">
         <div class="container mx-auto flex justify-between items-center">
             <div class="flex items-center">
-                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3">
                     <i class="fas fa-robot text-white text-xl"></i>
                 </div>
                 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">
@@ -130,7 +211,7 @@
                 <a href="#about" class="nav-link text-gray-300 hover:text-white">О нас</a>
                 <a href="#contacts" class="nav-link text-gray-300 hover:text-white">Контакты</a>
             </nav>
-            <button onclick="openModal()" class="btn-primary px-6 py-2 rounded-full font-semibold text-white">
                 Заказать
             </button>
             <button class="md:hidden text-gray-300 hover:text-white">
@@ -140,8 +221,8 @@
     </header>
     <!-- Hero Section -->
-    <section class="py-20 px-4 sm:px-6 lg:px-8">
-        <div class="container mx-auto flex flex-col md:flex-row items-center">
             <div class="md:w-1/2 mb-12 md:mb-0">
                 <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                     <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">AI</span> творческая студия
@@ -150,10 +231,10 @@
                     Профессиональный монтаж фото, аудио и видео. Создание сайтов, чат-ботов и уникального контента с использованием искусственного интеллекта.
                 </p>
                 <div class="flex space-x-4">
-                    <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white">
                         Сделать заказ
                     </button>
-                    <a href="#portfolio" class="px-8 py-3 rounded-full font-semibold text-white border border-indigo-500 hover:bg-indigo-900/30 transition">
                         Портфолио
                     </a>
                 </div>
@@ -162,17 +243,17 @@
                 <div class="relative">
                     <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-600/20 blur-3xl"></div>
                     <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div>
-                    <img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
                          alt="AI Creative Studio"
-                         class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30">
                 </div>
             </div>
         </div>
     </section>
     <!-- Services Section -->
-    <section id="services" class="py-20 px-4 sm:px-6 lg:px-8">
-        <div class="container mx-auto">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -182,8 +263,8 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Service 1 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-camera-retro text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж фото</h3>
@@ -193,11 +274,14 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
                 <!-- Service 2 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-music text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж аудио</h3>
@@ -207,11 +291,14 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
                 <!-- Service 3 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-video text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж видео</h3>
@@ -221,11 +308,14 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
                 <!-- Service 4 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-globe text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Сайты и чат-боты</h3>
@@ -235,11 +325,14 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
                 <!-- Service 5 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-paint-brush text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Дизайн</h3>
@@ -249,11 +342,14 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
                 <!-- Service 6 -->
-                <div class="service-card rounded-2xl p-8">
-                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
                         <i class="fas fa-photo-film text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Создание контента</h3>
@@ -263,14 +359,17 @@
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
             </div>
         </div>
     </section>
     <!-- Portfolio Section -->
-    <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50">
-        <div class="container mx-auto">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Наше портфолио</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -278,86 +377,151 @@
                 </p>
             </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Portfolio Item 1 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
-                    <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                          alt="Фото монтаж"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">Фото монтаж</h3>
-                        <p class="text-gray-300 mb-4">Ретушь и цветокоррекция портретов</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
-                <!-- Portfolio Item 2 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
                          alt="Видео монтаж"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">Видео монтаж</h3>
-                        <p class="text-gray-300 mb-4">Клип с эффектами и цветокоррекцией</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
-                <!-- Portfolio Item 3 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
                          alt="Веб-сайт"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">Веб-сайт</h3>
-                        <p class="text-gray-300 mb-4">Корпоративный сайт для бизнеса</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
-                <!-- Portfolio Item 4 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80"
                          alt="Чат-бот"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">Чат-бот</h3>
-                        <p class="text-gray-300 mb-4">AI ассистент для поддержки клиентов</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
-                <!-- Portfolio Item 5 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
                          alt="Графический дизайн"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">Графический дизайн</h3>
-                        <p class="text-gray-300 mb-4">Фирменный стиль и логотип</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
-                <!-- Portfolio Item 6 -->
-                <div class="portfolio-item rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
                          alt="AI контент"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-semibold mb-2">AI контент</h3>
-                        <p class="text-gray-300 mb-4">Генерация изображений нейросетью</p>
-                        <button class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
@@ -365,7 +529,7 @@
             </div>
             <div class="text-center mt-12">
-                <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white">
                     Заказать проект
                 </button>
             </div>
@@ -373,8 +537,8 @@
     </section>
     <!-- About Section -->
-    <section id="about" class="py-20 px-4 sm:px-6 lg:px-8">
-        <div class="container mx-auto">
             <div class="flex flex-col lg:flex-row items-center">
                 <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
                     <h2 class="text-3xl md:text-4xl font-bold mb-6">О VitoPRO</h2>
@@ -402,7 +566,7 @@
                         <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div>
                         <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
                              alt="О VitoPRO"
-                             class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30">
                     </div>
                 </div>
             </div>
@@ -410,8 +574,8 @@
     </section>
     <!-- Contacts Section -->
-    <section id="contacts" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50">
-        <div class="container mx-auto">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Свяжитесь с нами</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -434,19 +598,19 @@
                             <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
                             <textarea id="message" rows="5" class="input-field w-full px-4 py-3 rounded-lg text-white"></textarea>
                         </div>
-                        <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white">
                             Отправить сообщение
                         </button>
                     </form>
                 </div>
                 <div class="lg:w-1/2">
-                    <div class="bg-slate-800/50 rounded-2xl p-8 h-full border border-indigo-500/30">
                         <h3 class="text-2xl font-semibold mb-6">Контактная информация</h3>
                         <div class="space-y-6">
                             <div class="flex items-start">
-                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1">
                                     <i class="fas fa-envelope"></i>
                                 </div>
                                 <div>
@@ -456,7 +620,7 @@
                             </div>
                             <div class="flex items-start">
-                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1">
                                     <i class="fab fa-telegram"></i>
                                 </div>
                                 <div>
@@ -466,7 +630,7 @@
                             </div>
                             <div class="flex items-start">
-                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1">
                                     <i class="fab fa-youtube"></i>
                                 </div>
                                 <div>
@@ -479,16 +643,16 @@
                         <div class="mt-10">
                             <h4 class="text-gray-300 font-medium mb-4">Мы в соцсетях</h4>
                             <div class="flex space-x-4">
-                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-indigo-600">
                                     <i class="fab fa-vk"></i>
                                 </a>
-                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-600">
                                     <i class="fab fa-facebook-f"></i>
                                 </a>
-                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-pink-600">
                                     <i class="fab fa-instagram"></i>
                                 </a>
-                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-400">
                                     <i class="fab fa-twitter"></i>
                                 </a>
                             </div>
@@ -500,11 +664,11 @@
     </section>
     <!-- Footer -->
-    <footer class="py-10 px-4 sm:px-6 lg:px-8 border-t border-slate-800/50">
         <div class="container mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center mb-6 md:mb-0">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3">
                         <i class="fas fa-robot text-white"></i>
                     </div>
                     <h2 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">
@@ -522,7 +686,7 @@
     <!-- Order Modal -->
     <div id="orderModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
-        <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30">
             <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
                 <i class="fas fa-times text-xl"></i>
             </button>
@@ -565,7 +729,7 @@
                     </select>
                 </div>
-                <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white">
                     Отправить заявку
                 </button>
             </form>
@@ -574,21 +738,148 @@
     <!-- Success Modal -->
     <div id="successModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
-        <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30 text-center">
-            <div class="w-20 h-20 rounded-full bg-green-900/30 flex items-center justify-center text-green-400 mx-auto mb-6">
                 <i class="fas fa-check text-3xl"></i>
             </div>
             <h2 class="text-2xl font-bold mb-4">Спасибо!</h2>
             <p class="text-gray-300 mb-6">Ваша заявка успешно отправлена. Мы свяжемся с вами в ближайшее время.</p>
-            <button onclick="closeSuccessModal()" class="btn-primary px-6 py-2 rounded-lg font-semibold text-white">
                 Закрыть
             </button>
         </div>
     </div>
     <script>
         // Modal functions
         function openModal() {
             document.getElementById('orderModal').classList.add('active');
@@ -611,6 +902,98 @@
             document.body.style.overflow = 'auto';
         }
         // Form submission
         document.getElementById('orderForm').addEventListener('submit', function(e) {
             e.preventDefault();
@@ -629,6 +1012,7 @@
             if (e.key === 'Escape') {
                 closeModal();
                 closeSuccessModal();
             }
         });
@@ -638,6 +1022,7 @@
                 if (e.target === this) {
                     if (this.id === 'orderModal') closeModal();
                     if (this.id === 'successModal') closeSuccessModal();
                 }
             });
         });
@@ -659,6 +1044,38 @@
                 }
             });
         });
     </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=Amg63/vitopro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         .nav-link:hover::after {
             width: 100%;
         }
+        /* Portfolio filter */
+        .filter-btn {
+            transition: all 0.3s ease;
+        }
+        .filter-btn.active {
+            background-color: #4f46e5;
+            color: white;
+        }
+        /* Portfolio modal */
+        .portfolio-modal-content {
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+        .portfolio-modal-img {
+            max-height: 60vh;
+            object-fit: contain;
+        }
+        /* Tech bubbles */
+        .tech-bubble {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(40px);
+            opacity: 0.15;
+            z-index: 0;
+        }
+        /* Glow effect */
+        .glow-effect {
+            position: relative;
+        }
+        .glow-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at center, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .glow-effect:hover::after {
+            opacity: 1;
+        }
+        /* Animated gradient border */
+        .gradient-border {
+            position: relative;
+            border-radius: 1rem;
+        }
+        .gradient-border::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #4f46e5, #7c3aed, #9333ea);
+            border-radius: 1rem;
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .gradient-border:hover::before {
+            opacity: 1;
+        }
     </style>
 </head>
 <body class="gradient-bg">
+    <!-- Tech bubbles background elements -->
+    <div class="tech-bubble w-64 h-64 bg-purple-600 top-20 left-10"></div>
+    <div class="tech-bubble w-80 h-80 bg-indigo-600 bottom-40 right-20"></div>
+    <div class="tech-bubble w-40 h-40 bg-blue-600 top-1/3 right-1/4"></div>
     <!-- Header -->
+    <header class="py-6 px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="container mx-auto flex justify-between items-center">
             <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3 glow-effect">
                     <i class="fas fa-robot text-white text-xl"></i>
                 </div>
                 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">
                 <a href="#about" class="nav-link text-gray-300 hover:text-white">О нас</a>
                 <a href="#contacts" class="nav-link text-gray-300 hover:text-white">Контакты</a>
             </nav>
+            <button onclick="openModal()" class="btn-primary px-6 py-2 rounded-full font-semibold text-white glow-effect">
                 Заказать
             </button>
             <button class="md:hidden text-gray-300 hover:text-white">
     </header>
     <!-- Hero Section -->
+    <section class="py-20 px-4 sm:px-6 lg:px-8 relative">
+        <div class="container mx-auto flex flex-col md:flex-row items-center relative z-10">
             <div class="md:w-1/2 mb-12 md:mb-0">
                 <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                     <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">AI</span> творческая студия
                     Профессиональный монтаж фото, аудио и видео. Создание сайтов, чат-ботов и уникального контента с использованием искусственного интеллекта.
                 </p>
                 <div class="flex space-x-4">
+                    <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white glow-effect">
                         Сделать заказ
                     </button>
+                    <a href="#portfolio" class="px-8 py-3 rounded-full font-semibold text-white border border-indigo-500 hover:bg-indigo-900/30 transition gradient-border">
                         Портфолио
                     </a>
                 </div>
                 <div class="relative">
                     <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-600/20 blur-3xl"></div>
                     <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div>
+                    <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
                          alt="AI Creative Studio"
+                         class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30 gradient-border">
                 </div>
             </div>
         </div>
     </section>
     <!-- Services Section -->
+    <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 relative">
+        <div class="container mx-auto relative z-10">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Service 1 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-camera-retro text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж фото</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965879.png" alt="Photo editing icon" class="w-24 h-24">
+                    </div>
                 </div>
                 <!-- Service 2 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-music text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж аудио</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3659/3659899.png" alt="Audio editing icon" class="w-24 h-24">
+                    </div>
                 </div>
                 <!-- Service 3 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-video text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Монтаж видео</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3176/3176272.png" alt="Video editing icon" class="w-24 h-24">
+                    </div>
                 </div>
                 <!-- Service 4 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-globe text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Сайты и чат-боты</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2282/2282188.png" alt="Web development icon" class="w-24 h-24">
+                    </div>
                 </div>
                 <!-- Service 5 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-paint-brush text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Дизайн</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3242/3242257.png" alt="Design icon" class="w-24 h-24">
+                    </div>
                 </div>
                 <!-- Service 6 -->
+                <div class="service-card rounded-2xl p-8 relative gradient-border">
+                    <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect">
                         <i class="fas fa-photo-film text-2xl"></i>
                     </div>
                     <h3 class="text-2xl font-semibold mb-4">Создание контента</h3>
                     <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                         Заказать <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <div class="absolute bottom-0 right-0 opacity-10">
+                        <img src="https://cdn-icons-png.flaticon.com/512/1055/1055687.png" alt="Content creation icon" class="w-24 h-24">
+                    </div>
                 </div>
             </div>
         </div>
     </section>
     <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50 relative">
+        <div class="container mx-auto relative z-10">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Наше портфолио</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                 </p>
             </div>
+            <!-- Portfolio Filter -->
+            <div class="flex flex-wrap justify-center gap-3 mb-10">
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="all">
+                    Все работы
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="photo">
+                    Фото монтаж
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="audio">
+                    Аудио монтаж
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="video">
+                    Видео монтаж
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="website">
+                    Сайты и боты
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="design">
+                    Дизайн
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="content">
+                    Контент
+                </button>
+            </div>
+            <!-- Portfolio Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="portfolioGrid">
+                <!-- Photo Editing Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="photo">
+                    <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80"
                          alt="Фото монтаж"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Ретушь портрета</h3>
+                        <p class="text-gray-300 mb-4">Профессиональная обработка кожи, коррекция света и тени</p>
+                        <button onclick="openPortfolioModal('photo1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="photo">
+                    <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
+                         alt="Цветокоррекция"
+                         class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Цветокоррекция</h3>
+                        <p class="text-gray-300 mb-4">Создание атмосферного кадра с помощью цветовых решений</p>
+                        <button onclick="openPortfolioModal('photo2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
+                <!-- Audio Editing Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="audio">
+                    <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+                         alt="Аудио монтаж"
+                         class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Обработка подкаста</h3>
+                        <p class="text-gray-300 mb-4">Шумоподавление и мастеринг аудиозаписи</p>
+                        <button onclick="openPortfolioModal('audio1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Video Editing Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="video">
                     <img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
                          alt="Видео монтаж"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Музыкальный клип</h3>
+                        <p class="text-gray-300 mb-4">Монтаж видео с эффектами и цветокоррекцией</p>
+                        <button onclick="openPortfolioModal('video1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="video">
+                    <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+                         alt="Корпоративное видео"
+                         class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Корпоративное видео</h3>
+                        <p class="text-gray-300 mb-4">Профессиональный монтаж рекламного ролика</p>
+                        <button onclick="openPortfolioModal('video2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Websites Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="website">
                     <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
                          alt="Веб-сайт"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Корпоративный сайт</h3>
+                        <p class="text-gray-300 mb-4">Современный дизайн и адаптивная верстка</p>
+                        <button onclick="openPortfolioModal('website1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="website">
                     <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80"
                          alt="Чат-бот"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">AI Чат-бот</h3>
+                        <p class="text-gray-300 mb-4">Интеллектуальный помощник для бизнеса</p>
+                        <button onclick="openPortfolioModal('website2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
+                <!-- Design Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="design">
                     <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
                          alt="Графический дизайн"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">Фирменный стиль</h3>
+                        <p class="text-gray-300 mb-4">Логотип и брендбук для компании</p>
+                        <button onclick="openPortfolioModal('design1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
                 </div>
+                <!-- Content Examples -->
+                <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="content">
                     <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
                          alt="AI контент"
                          class="w-full h-64 object-cover">
                     <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-semibold mb-2">AI иллюстрации</h3>
+                        <p class="text-gray-300 mb-4">Генерация уникальных изображений нейросетью</p>
+                        <button onclick="openPortfolioModal('content1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
                             Подробнее <i class="fas fa-arrow-right ml-2"></i>
                         </button>
                     </div>
             </div>
             <div class="text-center mt-12">
+                <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white glow-effect">
                     Заказать проект
                 </button>
             </div>
     </section>
     <!-- About Section -->
+    <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 relative">
+        <div class="container mx-auto relative z-10">
             <div class="flex flex-col lg:flex-row items-center">
                 <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
                     <h2 class="text-3xl md:text-4xl font-bold mb-6">О VitoPRO</h2>
                         <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div>
                         <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
                              alt="О VitoPRO"
+                             class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30 gradient-border">
                     </div>
                 </div>
             </div>
     </section>
     <!-- Contacts Section -->
+    <section id="contacts" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50 relative">
+        <div class="container mx-auto relative z-10">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Свяжитесь с нами</h2>
                 <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                             <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
                             <textarea id="message" rows="5" class="input-field w-full px-4 py-3 rounded-lg text-white"></textarea>
                         </div>
+                        <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white glow-effect">
                             Отправить сообщение
                         </button>
                     </form>
                 </div>
                 <div class="lg:w-1/2">
+                    <div class="bg-slate-800/50 rounded-2xl p-8 h-full border border-indigo-500/30 gradient-border">
                         <h3 class="text-2xl font-semibold mb-6">Контактная информация</h3>
                         <div class="space-y-6">
                             <div class="flex items-start">
+                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect">
                                     <i class="fas fa-envelope"></i>
                                 </div>
                                 <div>
                             </div>
                             <div class="flex items-start">
+                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect">
                                     <i class="fab fa-telegram"></i>
                                 </div>
                                 <div>
                             </div>
                             <div class="flex items-start">
+                                <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect">
                                     <i class="fab fa-youtube"></i>
                                 </div>
                                 <div>
                         <div class="mt-10">
                             <h4 class="text-gray-300 font-medium mb-4">Мы в соцсетях</h4>
                             <div class="flex space-x-4">
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-indigo-600 glow-effect">
                                     <i class="fab fa-vk"></i>
                                 </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-600 glow-effect">
                                     <i class="fab fa-facebook-f"></i>
                                 </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-pink-600 glow-effect">
                                     <i class="fab fa-instagram"></i>
                                 </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-400 glow-effect">
                                     <i class="fab fa-twitter"></i>
                                 </a>
                             </div>
     </section>
     <!-- Footer -->
+    <footer class="py-10 px-4 sm:px-6 lg:px-8 border-t border-slate-800/50 relative">
         <div class="container mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center mb-6 md:mb-0">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3 glow-effect">
                         <i class="fas fa-robot text-white"></i>
                     </div>
                     <h2 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">
     <!-- Order Modal -->
     <div id="orderModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
+        <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30 gradient-border">
             <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
                 <i class="fas fa-times text-xl"></i>
             </button>
                     </select>
                 </div>
+                <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white glow-effect">
                     Отправить заявку
                 </button>
             </form>
     <!-- Success Modal -->
     <div id="successModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
+        <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30 gradient-border text-center">
+            <div class="w-20 h-20 rounded-full bg-green-900/30 flex items-center justify-center text-green-400 mx-auto mb-6 glow-effect">
                 <i class="fas fa-check text-3xl"></i>
             </div>
             <h2 class="text-2xl font-bold mb-4">Спасибо!</h2>
             <p class="text-gray-300 mb-6">Ваша заявка успешно отправлена. Мы свяжемся с вами в ближайшее время.</p>
+            <button onclick="closeSuccessModal()" class="btn-primary px-6 py-2 rounded-lg font-semibold text-white glow-effect">
                 Закрыть
             </button>
         </div>
     </div>
+    <!-- Portfolio Modal -->
+    <div id="portfolioModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
+        <div class="bg-slate-800 rounded-2xl max-w-4xl w-full p-8 relative border border-indigo-500/30 gradient-border portfolio-modal-content">
+            <button onclick="closePortfolioModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+            <div id="portfolioModalContent">
+                <!-- Content will be loaded dynamically -->
+            </div>
+        </div>
+    </div>
     <script>
+        // Portfolio data
+        const portfolioItems = {
+            photo1: {
+                title: "Ретушь портрета",
+                category: "Фото монтаж",
+                description: "Профессиональная обработка портрета с коррекцией кожи, удалением дефектов, улучшением света и тени. Использование современных AI инструментов для естественного результата.",
+                before: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80",
+                after: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+                features: [
+                    "Ретушь кожи с сохранением текстуры",
+                    "Коррекция освещения и цвета",
+                    "Удаление фона и замена на профессиональный",
+                    "Добавление художественных эффектов"
+                ]
+            },
+            photo2: {
+                title: "Цветокоррекция",
+                category: "Фото монтаж",
+                description: "Преобразование обычного снимка в атмосферное изображение с помощью продвинутой цветокоррекции. Создание уникального настроения и стиля фотографии.",
+                before: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
+                after: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
+                features: [
+                    "Точная настройка цветового баланса",
+                    "Создание кинематографичного вида",
+                    "Улучшение детализации",
+                    "Добавление виньетирования и эффектов"
+                ]
+            },
+            audio1: {
+                title: "Обработка подкаста",
+                category: "Аудио монтаж",
+                description: "Профессиональная обработка аудиозаписи подкаста с удалением шумов, выравниванием громкости, добавлением музыкального оформления и джинглов.",
+                audio: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+                features: [
+                    "Шумоподавление и очистка звука",
+                    "Нормализация громкости",
+                    "Добавление музыкальных переходов",
+                    "Мастеринг для оптимального звучания"
+                ]
+            },
+            video1: {
+                title: "Музыкальный клип",
+                category: "Видео монтаж",
+                description: "Создание динамичного музыкального клипа с использованием различных эффектов переходов, цветокоррекции и синхронизации с музыкой.",
+                video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+                features: [
+                    "Креативный монтаж с эффектами",
+                    "Цветокоррекция в едином стиле",
+                    "Синхронизация с музыкой",
+                    "Добавление текстов и титров"
+                ]
+            },
+            video2: {
+                title: "Корпоративное видео",
+                category: "Видео монтаж",
+                description: "Профессиональный монтаж рекламного ролика для компании с использованием фирменных цветов, логотипов и анимации.",
+                video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+                features: [
+                    "Сценарий и раскадровка",
+                    "Профессиональный монтаж",
+                    "Добавление анимации и эффектов",
+                    "Озвучка и музыкальное оформление"
+                ]
+            },
+            website1: {
+                title: "Корпоративный сайт",
+                category: "Сайты и боты",
+                description: "Разработка современного адаптивного веб-сайта для бизнеса с удобным интерфейсом, интеграцией с социальными сетями и системой управления контентом.",
+                image: "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80",
+                features: [
+                    "Адаптивный дизайн для всех устройств",
+                    "Интеграция с CRM системой",
+                    "Оптимизация скорости загрузки",
+                    "SEO оптимизация"
+                ]
+            },
+            website2: {
+                title: "AI Чат-бот",
+                category: "Сайты и боты",
+                description: "Создание интеллектуального чат-бота для автоматизации общения с клиентами на сайте и в мессенджерах с использованием технологий искусственного интеллекта.",
+                image: "https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80",
+                features: [
+                    "Интеграция с сайтом и соцсетями",
+                    "Обучение на основе ваших данных",
+                    "Мультиязычная поддержка",
+                    "Аналитика и отчетность"
+                ]
+            },
+            design1: {
+                title: "Фирменный стиль",
+                category: "Дизайн",
+                description: "Разработка уникального фирменного стиля для компании, включая логотип, цветовую палитру, типографику и руководство по использованию бренда.",
+                image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80",
+                features: [
+                    "Разработка логотипа и айдентики",
+                    "Создание брендбука",
+                    "Дизайн полиграфии и сувениров",
+                    "Гайдлайны для соцсетей"
+                ]
+            },
+            content1: {
+                title: "AI иллюстрации",
+                category: "Контент",
+                description: "Создание уникальных иллюстраций и графики с помощью нейросетей для использования в маркетинговых материалах, соцсетях и на сайте.",
+                image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80",
+                features: [
+                    "Генерация уникальных изображений",
+                    "Стилизация под ваш бренд",
+                    "Высокое разрешение и качество",
+                    "Быстрое выполнение заказов"
+                ]
+            }
+        };
         // Modal functions
         function openModal() {
             document.getElementById('orderModal').classList.add('active');
             document.body.style.overflow = 'auto';
         }
+        // Portfolio Modal
+        function openPortfolioModal(itemId) {
+            const item = portfolioItems[itemId];
+            const modalContent = document.getElementById('portfolioModalContent');
+            let content = `
+                <h2 class="text-2xl md:text-3xl font-bold mb-2">${item.title}</h2>
+                <p class="text-indigo-400 mb-6">${item.category}</p>
+                <p class="text-gray-300 mb-6">${item.description}</p>
+                <div class="mb-6">
+                    <h3 class="text-xl font-semibold mb-3">Особенности работы:</h3>
+                    <ul class="space-y-2">
+                        ${item.features.map(feature => `<li class="text-gray-300 flex items-start"><span class="text-indigo-400 mr-2">✓</span> ${feature}</li>`).join('')}
+                    </ul>
+                </div>
+            `;
+            if (item.before && item.after) {
+                content += `
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2 text-center">До обработки</h3>
+                            <img src="${item.before}" alt="До обработки" class="w-full h-64 object-cover rounded-lg portfolio-modal-img">
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2 text-center">После обработки</h3>
+                            <img src="${item.after}" alt="После обработки" class="w-full h-64 object-cover rounded-lg portfolio-modal-img">
+                        </div>
+                    </div>
+                `;
+            } else if (item.image) {
+                content += `
+                    <div class="mb-6">
+                        <img src="${item.image}" alt="${item.title}" class="w-full h-64 object-cover rounded-lg portfolio-modal-img">
+                    </div>
+                `;
+            } else if (item.audio) {
+                content += `
+                    <div class="mb-6">
+                        <audio controls class="w-full">
+                            <source src="${item.audio}" type="audio/mpeg">
+                            Ваш браузер не поддерживает аудио элемент.
+                        </audio>
+                    </div>
+                `;
+            } else if (item.video) {
+                content += `
+                    <div class="mb-6 aspect-w-16 aspect-h-9">
+                        <iframe class="w-full h-64 rounded-lg" src="${item.video}" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                `;
+            }
+            content += `
+                <div class="text-center">
+                    <button onclick="openModal()" class="btn-primary px-6 py-3 rounded-lg font-semibold text-white glow-effect">
+                        Заказать подобный проект
+                    </button>
+                </div>
+            `;
+            modalContent.innerHTML = content;
+            document.getElementById('portfolioModal').classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+        function closePortfolioModal() {
+            document.getElementById('portfolioModal').classList.remove('active');
+            document.body.style.overflow = 'auto';
+        }
+        // Portfolio Filter
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                // Update active button
+                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                const filter = this.dataset.filter;
+                const items = document.querySelectorAll('.portfolio-item');
+                items.forEach(item => {
+                    if (filter === 'all' || item.dataset.category === filter) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+        });
         // Form submission
         document.getElementById('orderForm').addEventListener('submit', function(e) {
             e.preventDefault();
             if (e.key === 'Escape') {
                 closeModal();
                 closeSuccessModal();
+                closePortfolioModal();
             }
         });
                 if (e.target === this) {
                     if (this.id === 'orderModal') closeModal();
                     if (this.id === 'successModal') closeSuccessModal();
+                    if (this.id === 'portfolioModal') closePortfolioModal();
                 }
             });
         });
                 }
             });
         });
+        // Add floating tech elements animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const techBubbles = document.querySelectorAll('.tech-bubble');
+            techBubbles.forEach((bubble, index) => {
+                // Random initial position and animation
+                const duration = 15 + Math.random() * 15;
+                const delay = Math.random() * 5;
+                const xAmplitude = 50 + Math.random() * 100;
+                const yAmplitude = 50 + Math.random() * 100;
+                bubble.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`;
+                bubble.style.setProperty('--x-amplitude', `${xAmplitude}px`);
+                bubble.style.setProperty('--y-amplitude', `${yAmplitude}px`);
+            });
+        });
     </script>
+    <style>
+        /* Floating animation for tech bubbles */
+        @keyframes float {
+            0% {
+                transform: translate(0, 0);
+            }
+            50% {
+                transform: translate(var(--x-amplitude), var(--y-amplitude));
+            }
+            100% {
+                transform: translate(calc(var(--x-amplitude) * -1), calc(var(--y-amplitude) * -1));
+            }
+        }
+    </style>
 <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=Amg63/vitopro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,3 @@
1	- сделай сайт ai VitoPRO . главные услугимонтаж фото , аудио, видео.Сайты и чат боты . Дизайн и создание контента. С кнопкой сделать заказ,которая ведет к шаблону !фио,бюджет.проект!, наполненым интерактивнымпортфолио. без фактического адреса но с обратной форме Email vitopro63@gmail.com YouTube @user-VitoPRO Telegram @VitoPROai

+сделай сайт ai VitoPRO . главные услугимонтаж фото , аудио, видео.Сайты и чат боты . Дизайн и создание контента. С кнопкой сделать заказ,которая ведет к шаблону !фио,бюджет.проект!, наполненым интерактивнымпортфолио. без фактического адреса но с обратной форме Email vitopro63@gmail.com YouTube @user-VitoPRO Telegram @VitoPROai
+портфолио должно быть с примерами работ
+оформление красивыми итехнологическимикартинками