Spaces:

BBQQYT
/

nexustech

Running

App Files Files Community

BBQQYT commited on May 15, 2025

Commit

1ed8f8b

verified ·

1 Parent(s): 7db28f8

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1065 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nexustech
-emoji: ⚡
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nexustech
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 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,1065 @@
-<!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="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NexusTech | Инновационные IT-решения</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            overflow-x: hidden;
+            background-color: #0a0a0a;
+            color: white;
+            cursor: none;
+        }
+        .cursor {
+            position: fixed;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.8);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            mix-blend-mode: difference;
+            z-index: 9999;
+            transition: transform 0.1s ease;
+        }
+        .cursor-follower {
+            position: fixed;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 1px solid rgba(255, 255, 255, 0.6);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: 9998;
+            transition: all 0.3s ease-out;
+        }
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.5);
+            pointer-events: none;
+            z-index: -1;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, #6e00ff 0%, #00ffcc 100%);
+        }
+        .card-hover-effect {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .card-hover-effect:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        .floating-2 {
+            animation: floating 5s ease-in-out infinite 1s;
+        }
+        .floating-3 {
+            animation: floating 7s ease-in-out infinite 1.5s;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        .text-gradient {
+            background: linear-gradient(90deg, #00ffcc, #6e00ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glow {
+            filter: drop-shadow(0 0 10px rgba(110, 0, 255, 0.7));
+        }
+        .section {
+            opacity: 0;
+            transform: translateY(50px);
+            transition: all 0.8s ease;
+        }
+        .section.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .tech-icon {
+            transition: all 0.3s ease;
+        }
+        .tech-icon:hover {
+            transform: scale(1.2);
+            filter: drop-shadow(0 0 10px rgba(110, 0, 255, 0.7));
+        }
+        .timeline-item {
+            position: relative;
+            padding-left: 50px;
+            margin-bottom: 50px;
+        }
+        .timeline-item:before {
+            content: '';
+            position: absolute;
+            left: 15px;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(to bottom, #6e00ff, #00ffcc);
+        }
+        .timeline-dot {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #6e00ff, #00ffcc);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <!-- Custom Cursor -->
+    <div class="cursor"></div>
+    <div class="cursor-follower"></div>
+    <!-- Floating Background Particles -->
+    <div id="particles"></div>
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <div class="text-white font-bold text-2xl mr-2 glow">
+                        <span class="text-gradient">Nexus</span>Tech
+                    </div>
+                </div>
+                <div class="hidden md:flex items-center space-x-10">
+                    <a href="#home" class="text-white hover:text-purple-300 transition duration-300">Главная</a>
+                    <a href="#services" class="text-white hover:text-purple-300 transition duration-300">Услуги</a>
+                    <a href="#about" class="text-white hover:text-purple-300 transition duration-300">О нас</a>
+                    <a href="#portfolio" class="text-white hover:text-purple-300 transition duration-300">Портфолио</a>
+                    <a href="#contact" class="text-white hover:text-purple-300 transition duration-300">Контакты</a>
+                </div>
+                <div class="md:hidden">
+                    <button class="text-white focus:outline-none" id="menu-btn">
+                        <i class="fas fa-bars text-2xl"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div class="hidden bg-black bg-opacity-90 w-full py-4 px-6" id="mobile-menu">
+            <div class="flex flex-col space-y-4">
+                <a href="#home" class="text-white hover:text-purple-300 transition duration-300">Главная</a>
+                <a href="#services" class="text-white hover:text-purple-300 transition duration-300">Услуги</a>
+                <a href="#about" class="text-white hover:text-purple-300 transition duration-300">О нас</a>
+                <a href="#portfolio" class="text-white hover:text-purple-300 transition duration-300">Портфолио</a>
+                <a href="#contact" class="text-white hover:text-purple-300 transition duration-300">Контакты</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
+        <div class="absolute w-full h-full opacity-20">
+            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-purple-600 filter blur-3xl opacity-70 floating"></div>
+            <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full bg-teal-500 filter blur-3xl opacity-70 floating-2"></div>
+            <div class="absolute bottom-1/4 right-1/3 w-80 h-80 rounded-full bg-blue-500 filter blur-3xl opacity-70 floating-3"></div>
+        </div>
+        <div class="container mx-auto px-6 z-10">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-16 md:mb-0">
+                    <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+                        <span class="text-gradient">Инновационные</span><br>
+                        IT-решения для<br>
+                        вашего бизнеса
+                    </h1>
+                    <p class="text-xl text-gray-300 mb-8 max-w-lg">
+                        Мы создаем цифровые продукты, которые помогают компаниям расти и развиваться в эпоху цифровых технологий.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full text-white font-semibold hover:opacity-90 transition duration-300 transform hover:scale-105">
+                            Начать проект
+                        </a>
+                        <a href="#portfolio" class="px-8 py-3 border border-white rounded-full text-white font-semibold hover:bg-white hover:text-black transition duration-300 transform hover:scale-105">
+                            Наши работы
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 relative">
+                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="IT Solutions"
+                         class="w-full max-w-lg rounded-xl shadow-2xl floating transform rotate-3">
+                    <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-600 rounded-full filter blur-xl opacity-40 -z-10"></div>
+                    <div class="absolute -top-10 -right-10 w-40 h-40 bg-teal-500 rounded-full filter blur-xl opacity-40 -z-10"></div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <a href="#services" class="text-white text-2xl">
+                <i class="fas fa-chevron-down"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-black bg-opacity-50 section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-20">
+                <h2 class="text-4xl font-bold mb-4">Наши <span class="text-gradient">услуги</span></h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    Мы предлагаем полный спектр IT-услуг для реализации ваших самых амбициозных проектов
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Service 1 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-purple-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-purple-600 to-blue-500 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-code text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Веб-разработка</h3>
+                    <p class="text-gray-300 mb-4">
+                        Создаем современные, быстрые и адаптивные веб-приложения с использованием новейших технологий.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                            Корпоративные сайты
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                            Интернет-магазины
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                            Веб-приложения
+                        </li>
+                    </ul>
+                </div>
+                <!-- Service 2 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-teal-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-teal-500 to-blue-500 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-mobile-alt text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Мобильные приложения</h3>
+                    <p class="text-gray-300 mb-4">
+                        Разрабатываем кроссплатформенные мобильные приложения с безупречным пользовательским опытом.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-teal-400 mr-2"></i>
+                            iOS и Android приложения
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-teal-400 mr-2"></i>
+                            Гибридные решения
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-teal-400 mr-2"></i>
+                            Интеграция с API
+                        </li>
+                    </ul>
+                </div>
+                <!-- Service 3 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-blue-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-brain text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Искусственный интеллект</h3>
+                    <p class="text-gray-300 mb-4">
+                        Внедряем решения на основе машинного обучения и компьютерного зрения для автоматизации процессов.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-blue-400 mr-2"></i>
+                            Чат-боты и голосовые ассистенты
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-blue-400 mr-2"></i>
+                            Анализ данных
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-blue-400 mr-2"></i>
+                            Прогнозирование и рекомендации
+                        </li>
+                    </ul>
+                </div>
+                <!-- Service 4 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-pink-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-paint-brush text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">UI/UX дизайн</h3>
+                    <p class="text-gray-300 mb-4">
+                        Создаем интуитивно понятные и визуально привлекательные интерфейсы для ваших продуктов.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-pink-400 mr-2"></i>
+                            Прототипирование
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-pink-400 mr-2"></i>
+                            Тестирование пользователей
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-pink-400 mr-2"></i>
+                            Бренд-дизайн
+                        </li>
+                    </ul>
+                </div>
+                <!-- Service 5 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-yellow-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-server text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">DevOps решения</h3>
+                    <p class="text-gray-300 mb-4">
+                        Оптимизируем процессы разработки и развертывания с помощью современных DevOps практик.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
+                            CI/CD pipelines
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
+                            Контейнеризация
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
+                            Облачные решения
+                        </li>
+                    </ul>
+                </div>
+                <!-- Service 6 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 card-hover-effect border border-gray-800 hover:border-green-500 transition-all duration-300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center mb-6">
+                        <i class="fas fa-chart-line text-2xl text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Digital маркетинг</h3>
+                    <p class="text-gray-300 mb-4">
+                        Помогаем привлекать клиентов и увеличивать продажи с помощью цифрового маркетинга.
+                    </p>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            SEO оптимизация
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            Контекстная реклама
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
+                            SMM стратегии
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-gradient-to-b from-black to-gray-900 section">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 relative">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             alt="Our Team"
+                             class="rounded-xl shadow-2xl w-full max-w-lg floating">
+                        <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-purple-600 rounded-full filter blur-xl opacity-40 -z-10"></div>
+                        <div class="absolute -top-6 -right-6 w-40 h-40 bg-teal-500 rounded-full filter blur-xl opacity-40 -z-10"></div>
+                    </div>
+                    <div class="mt-12 bg-gray-900 bg-opacity-50 rounded-xl p-8 border border-gray-800">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-trophy text-xl text-white"></i>
+                            </div>
+                            <h4 class="text-xl font-bold">Наши достижения</h4>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-gradient mb-2">50+</div>
+                                <div class="text-gray-400">Завершенных проектов</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-gradient mb-2">15+</div>
+                                <div class="text-gray-400">Стран работы</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-gradient mb-2">100%</div>
+                                <div class="text-gray-400">Довольных клиентов</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-gradient mb-2">10+</div>
+                                <div class="text-gray-400">Наград</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 lg:pl-12">
+                    <h2 class="text-4xl font-bold mb-6">О <span class="text-gradient">компании</span></h2>
+                    <p class="text-xl text-gray-300 mb-8">
+                        NexusTech - это команда профессионалов, объединенных страстью к технологиям и инновациям. С 2015 года мы помогаем бизнесу трансформироваться и достигать новых высот с помощью цифровых решений.
+                    </p>
+                    <div class="mb-8">
+                        <h3 class="text-2xl font-bold mb-4">Наши ценности</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                    <i class="fas fa-lightbulb text-white"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-xl font-semibold mb-2">Инновации</h4>
+                                    <p class="text-gray-400">Мы постоянно исследуем новые технологии и подходы, чтобы предлагать клиентам передовые решения.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                    <i class="fas fa-handshake text-white"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-xl font-semibold mb-2">Партнерство</h4>
+                                    <p class="text-gray-400">Мы строим долгосрочные отношения с клиентами, основанные на доверии и взаимном успехе.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-teal-500 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                    <i class="fas fa-star text-white"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-xl font-semibold mb-2">Качество</h4>
+                                    <p class="text-gray-400">Мы гарантируем высочайшее качество наших решений и безупречный сервис на всех этапах сотрудничества.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-2xl font-bold mb-4">Технологии, которые мы используем</h3>
+                        <div class="flex flex-wrap gap-4">
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-react text-3xl text-blue-400"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-vuejs text-3xl text-green-500"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-angular text-3xl text-red-500"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-node-js text-3xl text-green-600"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-python text-3xl text-yellow-400"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-aws text-3xl text-orange-500"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fab fa-docker text-3xl text-blue-500"></i>
+                            </div>
+                            <div class="tech-icon w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center">
+                                <i class="fas fa-database text-3xl text-teal-400"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 bg-black bg-opacity-70 section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-20">
+                <h2 class="text-4xl font-bold mb-4">Наши <span class="text-gradient">проекты</span></h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    Вот несколько примеров наших работ, которые демонстрируют наш подход и экспертизу
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Project 1"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">FinTech Dashboard</h3>
+                        <p class="text-gray-300 mb-4">Интерактивная панель управления для финансового сервиса с аналитикой в реальном времени</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-purple-600 bg-opacity-50 rounded-full text-sm text-white">React</span>
+                            <span class="px-3 py-1 bg-blue-500 bg-opacity-50 rounded-full text-sm text-white">Node.js</span>
+                            <span class="px-3 py-1 bg-teal-500 bg-opacity-50 rounded-full text-sm text-white">D3.js</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Project 2"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">HealthTrack Mobile</h3>
+                        <p class="text-gray-300 mb-4">Мобильное приложение для мониторинга здоровья с интеграцией wearable устройств</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-blue-500 bg-opacity-50 rounded-full text-sm text-white">Flutter</span>
+                            <span class="px-3 py-1 bg-green-500 bg-opacity-50 rounded-full text-sm text-white">Firebase</span>
+                            <span class="px-3 py-1 bg-red-500 bg-opacity-50 rounded-full text-sm text-white">TensorFlow</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
+                         alt="Project 3"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">EduPlatform</h3>
+                        <p class="text-gray-300 mb-4">Образовательная платформа с курсами, тестами и системой отслеживания прогресса</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-yellow-500 bg-opacity-50 rounded-full text-sm text-white">Vue.js</span>
+                            <span class="px-3 py-1 bg-purple-500 bg-opacity-50 rounded-full text-sm text-white">Laravel</span>
+                            <span class="px-3 py-1 bg-pink-500 bg-opacity-50 rounded-full text-sm text-white">MongoDB</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Project 4 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Project 4"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">Smart Retail</h3>
+                        <p class="text-gray-300 mb-4">AI решение для ритейла с системой рекомендаций и аналитикой покупательского поведения</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-orange-500 bg-opacity-50 rounded-full text-sm text-white">Python</span>
+                            <span class="px-3 py-1 bg-blue-400 bg-opacity-50 rounded-full text-sm text-white">OpenCV</span>
+                            <span class="px-3 py-1 bg-green-400 bg-opacity-50 rounded-full text-sm text-white">PostgreSQL</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Project 5 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Project 5"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">Blockchain Wallet</h3>
+                        <p class="text-gray-300 mb-4">Безопасный криптовалютный кошелек с мультиподписью и холодным хранением</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-gray-500 bg-opacity-50 rounded-full text-sm text-white">Solidity</span>
+                            <span class="px-3 py-1 bg-yellow-400 bg-opacity-50 rounded-full text-sm text-white">TypeScript</span>
+                            <span class="px-3 py-1 bg-red-500 bg-opacity-50 rounded-full text-sm text-white">Rust</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Project 6 -->
+                <div class="group relative overflow-hidden rounded-xl card-hover-effect">
+                    <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80"
+                         alt="Project 6"
+                         class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
+                    <div class="absolute inset-0 flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold text-white mb-2">CMS для издательства</h3>
+                        <p class="text-gray-300 mb-4">Система управления контент��м для медиа-компании с поддержкой мультимедиа</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-blue-600 bg-opacity-50 rounded-full text-sm text-white">React</span>
+                            <span class="px-3 py-1 bg-green-600 bg-opacity-50 rounded-full text-sm text-white">Node.js</span>
+                            <span class="px-3 py-1 bg-purple-500 bg-opacity-50 rounded-full text-sm text-white">GraphQL</span>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-70">
+                        <a href="#" class="px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-200 transition duration-300">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <a href="#" class="px-8 py-3 border border-white rounded-full text-white font-semibold hover:bg-white hover:text-black transition duration-300 inline-flex items-center">
+                    Посмотреть все проекты <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Process Section -->
+    <section class="py-20 bg-gray-900 section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-20">
+                <h2 class="text-4xl font-bold mb-4">Наш <span class="text-gradient">процесс</span> работы</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    Четко структурированный подход к реализации проектов обеспечивает предсказуемый результат
+                </p>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <!-- Timeline Item 1 -->
+                <div class="timeline-item">
+                    <div class="timeline-dot">1</div>
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
+                        <h3 class="text-2xl font-bold mb-4">Анализ и планирование</h3>
+                        <p class="text-gray-300 mb-4">
+                            Мы тщательно изучаем ваш бизнес, цели и целевую аудиторию. На этом этапе формируем техническое задание, дорожную карту и план реализации проекта.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-purple-600 bg-opacity-30 rounded-full text-sm text-white">Интервью</span>
+                            <span class="px-3 py-1 bg-purple-600 bg-opacity-30 rounded-full text-sm text-white">Анализ конкурентов</span>
+                            <span class="px-3 py-1 bg-purple-600 bg-opacity-30 rounded-full text-sm text-white">User Stories</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Timeline Item 2 -->
+                <div class="timeline-item">
+                    <div class="timeline-dot">2</div>
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
+                        <h3 class="text-2xl font-bold mb-4">Дизайн и прототипирование</h3>
+                        <p class="text-gray-300 mb-4">
+                            Создаем wireframes и интерактивные прототипы, разрабатываем UI/UX дизайн. Проводим тестирование на фокус-группах и дорабатываем концепцию.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-blue-500 bg-opacity-30 rounded-full text-sm text-white">Wireframing</span>
+                            <span class="px-3 py-1 bg-blue-500 bg-opacity-30 rounded-full text-sm text-white">UI/UX Design</span>
+                            <span class="px-3 py-1 bg-blue-500 bg-opacity-30 rounded-full text-sm text-white">Прототипы</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Timeline Item 3 -->
+                <div class="timeline-item">
+                    <div class="timeline-dot">3</div>
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
+                        <h3 class="text-2xl font-bold mb-4">Разработка</h3>
+                        <p class="text-gray-300 mb-4">
+                            Поэтапная реализация проекта с использованием agile-методологии. Регулярные демонстрации функционала и корректировки в процессе работы.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-teal-500 bg-opacity-30 rounded-full text-sm text-white">Agile</span>
+                            <span class="px-3 py-1 bg-teal-500 bg-opacity-30 rounded-full text-sm text-white">CI/CD</span>
+                            <span class="px-3 py-1 bg-teal-500 bg-opacity-30 rounded-full text-sm text-white">Code Review</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Timeline Item 4 -->
+                <div class="timeline-item">
+                    <div class="timeline-dot">4</div>
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
+                        <h3 class="text-2xl font-bold mb-4">Тестирование и запуск</h3>
+                        <p class="text-gray-300 mb-4">
+                            Всестороннее тестирование продукта, включая нагрузочное тестирование и проверку безопасности. Подготовка инфраструктуры и плавный запуск.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-green-500 bg-opacity-30 rounded-full text-sm text-white">QA</span>
+                            <span class="px-3 py-1 bg-green-500 bg-opacity-30 rounded-full text-sm text-white">DevOps</span>
+                            <span class="px-3 py-1 bg-green-500 bg-opacity-30 rounded-full text-sm text-white">Мониторинг</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Timeline Item 5 -->
+                <div class="timeline-item">
+                    <div class="timeline-dot">5</div>
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
+                        <h3 class="text-2xl font-bold mb-4">Поддержка и развитие</h3>
+                        <p class="text-gray-300 mb-4">
+                            После запуска мы продолжаем сопровождать проект, оперативно устраняя возможные проблемы и реализуя новые функции по мере роста бизнеса.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-yellow-500 bg-opacity-30 rounded-full text-sm text-white">Поддержка</span>
+                            <span class="px-3 py-1 bg-yellow-500 bg-opacity-30 rounded-full text-sm text-white">Аналитика</span>
+                            <span class="px-3 py-1 bg-yellow-500 bg-opacity-30 rounded-full text-sm text-white">Оптимизация</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section class="py-20 bg-black bg-opacity-70 section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-20">
+                <h2 class="text-4xl font-bold mb-4">Отзывы <span class="text-gradient">клиентов</span></h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    Вот что говорят о нас наши клиенты и партнеры
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 border border-gray-800 card-hover-effect">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-16 h-16 rounded-full object-cover border-2 border-purple-500">
+                        <div class="ml-4">
+                            <h4 class="text-xl font-bold">Анна Смирнова</h4>
+                            <p class="text-gray-400">CEO, FinTech Solutions</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "NexusTech реализовал для нас сложную аналитическую платформу с использованием AI. Результат превзошел все ожидания - система не только полностью соответствует требованиям, но и предлагает инновационные функции, о которых мы даже не задумывались."
+                    </p>
+                    <div class="flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 border border-gray-800 card-hover-effect">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-16 h-16 rounded-full object-cover border-2 border-blue-500">
+                        <div class="ml-4">
+                            <h4 class="text-xl font-bold">Дмитрий Иванов</h4>
+                            <p class="text-gray-400">CTO, RetailChain</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "Сотрудничество с NexusTech - это пример того, как должны работать IT-компании. Они не просто исполнители, а настоящие партнеры, глубоко погружающиеся в бизнес-процессы клиента. Наш проект по автоматизации розничной сети был реализован в срок и с высочайшим качеством."
+                    </p>
+                    <div class="flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-8 border border-gray-800 card-hover-effect">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-16 h-16 rounded-full object-cover border-2 border-teal-500">
+                        <div class="ml-4">
+                            <h4 class="text-xl font-bold">Елена Петрова</h4>
+                            <p class="text-gray-400">Product Manager, EduTech</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "Мы обратились в NexusTech с идеей образовательной платформы. Команда не только профессионально реализовала техническую часть, но и внесла множество ценных предложений по улучшению UX. Благодаря этому наш продукт получился действительно удобным и востребованным."
+                    </p>
+                    <div class="flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black section">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col lg:flex-row">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
+                    <h2 class="text-4xl font-bold mb-6">Свяжитесь с <span class="text-gradient">нами</span></h2>
+                    <p class="text-xl text-gray-300 mb-8">
+                        Готовы обсудить ваш проект или просто узнать больше о наших услугах? Оставьте сообщение, и мы свяжемся с вами в ближайшее время.
+                    </p>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
+                                <i class="fas fa-map-marker-alt text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-xl font-semibold mb-1">Адрес</h4>
+                                <p class="text-gray-400">Москва, ул. Тверская, 18</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
+                                <i class="fas fa-phone-alt text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-xl font-semibold mb-1">Телефон</h4>
+                                <p class="text-gray-400">+7 (495) 123-45-67</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
+                                <i class="fas fa-envelope text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-xl font-semibold mb-1">Email</h4>
+                                <p class="text-gray-400">info@nexustech.ru</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-12">
+                        <h4 class="text-xl font-semibold mb-4">Мы в соцсетях</h4>
+                        <div class="flex space-x-4">
+                            <a href="#" class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition duration-300">
+                                <i class="fab fa-facebook-f text-xl"></i>
+                            </a>
+                            <a href="#" class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-400 transition duration-300">
+                                <i class="fab fa-twitter text-xl"></i>
+                            </a>
+                            <a href="#" class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center hover:bg-pink-600 transition duration-300">
+                                <i class="fab fa-instagram text-xl"></i>
+                            </a>
+                            <a href="#" class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition duration-300">
+                                <i class="fab fa-linkedin-in text-xl"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <form class="bg-gray-900 bg-opacity-50 rounded-xl p-8 border border-gray-800">
+                        <div class="mb-6">
+                            <label for="name" class="block text-gray-300 mb-2">Ваше имя</label>
+                            <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-white" placeholder="Иван Иванов">
+                        </div>
+                        <div class="mb-6">
+                            <label for="email" class="block text-gray-300 mb-2">Email</label>
+                            <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-white" placeholder="ivan@example.com">
+                        </div>
+                        <div class="mb-6">
+                            <label for="subject" class="block text-gray-300 mb-2">Тема</label>
+                            <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-white" placeholder="О чем вы хотите поговорить?">
+                        </div>
+                        <div class="mb-6">
+                            <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
+                            <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-white" placeholder="Расскажите нам о вашем проекте..."></textarea>
+                        </div>
+                        <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg text-white font-semibold hover:opacity-90 transition duration-300">
+                            Отправить сообщение
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 bg-black">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <div class="text-white font-bold text-2xl mr-2 glow">
+                        <span class="text-gradient">Nexus</span>Tech
+                    </div>
+                    <p class="text-gray-400 mt-2">Инновационные IT-решения для вашего бизнеса</p>
+                </div>
+                <div class="flex flex-wrap justify-center gap-6">
+                    <a href="#home" class="text-gray-400 hover:text-white transition duration-300">Главная</a>
+                    <a href="#services" class="text-gray-400 hover:text-white transition duration-300">Услуги</a>
+                    <a href="#about" class="text-gray-400 hover:text-white transition duration-300">О нас</a>
+                    <a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Портфолио</a>
+                    <a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Контакты</a>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 mb-4 md:mb-0">© 2023 NexusTech. Все права защищены.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-white transition duration-300">Политика конфиденциальности</a>
+                    <a href="#" class="text-gray-500 hover:text-white transition duration-300">Условия использования</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Custom cursor
+        const cursor = document.querySelector('.cursor');
+        const cursorFollower = document.querySelector('.cursor-follower');
+        document.addEventListener('mousemove', (e) => {
+            cursor.style.left = e.clientX + 'px';
+            cursor.style.top = e.clientY + 'px';
+            setTimeout(() => {
+                cursorFollower.style.left = e.clientX + 'px';
+                cursorFollower.style.top = e.clientY + 'px';
+            }, 100);
+        });
+        // Interactive background particles
+        const particlesContainer = document.getElementById('particles');
+        const particleCount = 30;
+        for (let i = 0; i < particleCount; i++) {
+            const particle = document.createElement('div');
+            particle.classList.add('particle');
+            // Random size
+            const size = Math.random() * 5 + 1;
+            particle.style.width = `${size}px`;
+            particle.style.height = `${size}px`;
+            // Random position
+            particle.style.left = `${Math.random() * 100}%`;
+            particle.style.top = `${Math.random() * 100}%`;
+            // Random animation
+            const duration = Math.random() * 20 + 10;
+            const delay = Math.random() * 5;
+            particle.style.animation = `floating ${duration}s ease-in-out infinite ${delay}s`;
+            // Random opacity
+            particle.style.opacity = Math.random() * 0.5 + 0.1;
+            particlesContainer.appendChild(particle);
+        }
+        // Mobile menu toggle
+        const menuBtn = document.getElementById('menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuBtn.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Scroll animations
+        const sections = document.querySelectorAll('.section');
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+        sections.forEach(section => {
+            observer.observe(section);
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    mobileMenu.classList.add('hidden');
+                }
+            });
+        });
+        // Cursor hover effects
+        const hoverElements = document.querySelectorAll('a, button, .card-hover-effect, .tech-icon');
+        hoverElements.forEach(el => {
+            el.addEventListener('mouseenter', () => {
+                cursor.style.transform = 'translate(-50%, -50%) scale(2)';
+                cursor.style.backgroundColor = 'rgba(110, 0, 255, 0.5)';
+                cursorFollower.style.transform = 'translate(-50%, -50%) scale(1.5)';
+                cursorFollower.style.borderColor = 'rgba(110, 0, 255, 0.8)';
+            });
+            el.addEventListener('mouseleave', () => {
+                cursor.style.transform = 'translate(-50%, -50%) scale(1)';
+                cursor.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
+                cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)';
+                cursorFollower.style.borderColor = 'rgba(255, 255, 255, 0.6)';
+            });
+        });
+    </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=BBQQYT/nexustech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ напиши сайт IT компании с оооооооочень красивыми и плавными анимациями, а также добавь интерактива с курсором на заднем фоне, покажи всю крутость компании в сайте!