| | <!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; |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | .cursor, .cursor-follower { |
| | display: none; |
| | } |
| | |
| | body { |
| | cursor: default; |
| | } |
| | |
| | nav { |
| | backdrop-filter: blur(5px); |
| | padding: 1rem; |
| | } |
| | |
| | #home { |
| | padding-top: 6rem; |
| | min-height: auto; |
| | padding-bottom: 4rem; |
| | } |
| | |
| | h1 { |
| | font-size: 2.5rem !important; |
| | line-height: 1.2 !important; |
| | } |
| | |
| | .hero-buttons { |
| | flex-direction: column; |
| | gap: 1rem; |
| | } |
| | |
| | .hero-buttons a { |
| | width: 100%; |
| | text-align: center; |
| | } |
| | |
| | .section { |
| | padding: 3rem 0; |
| | } |
| | |
| | .card-hover-effect:hover { |
| | transform: none; |
| | } |
| | |
| | .tech-icon:hover { |
| | transform: none; |
| | filter: none; |
| | } |
| | |
| | .portfolio-item .overlay-content { |
| | padding: 1rem; |
| | } |
| | |
| | .portfolio-item h3 { |
| | font-size: 1.25rem; |
| | } |
| | |
| | .contact-section { |
| | flex-direction: column; |
| | } |
| | |
| | .contact-info { |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .timeline-item { |
| | padding-left: 30px; |
| | margin-bottom: 30px; |
| | } |
| | |
| | .timeline-dot { |
| | width: 24px; |
| | height: 24px; |
| | font-size: 0.8rem; |
| | } |
| | |
| | .mobile-menu-btn { |
| | display: block !important; |
| | } |
| | |
| | .desktop-menu { |
| | display: none !important; |
| | } |
| | |
| | #mobile-menu { |
| | display: none; |
| | position: absolute; |
| | width: 100%; |
| | left: 0; |
| | top: 100%; |
| | background: rgba(0, 0, 0, 0.95); |
| | z-index: 100; |
| | padding: 1rem; |
| | } |
| | |
| | #mobile-menu a { |
| | display: block; |
| | padding: 0.75rem 0; |
| | border-bottom: 1px solid rgba(255,255,255,0.1); |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <div class="cursor"></div> |
| | <div class="cursor-follower"></div> |
| | |
| | |
| | <div id="particles"></div> |
| | |
| | |
| | <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="desktop-menu hidden md:flex items-center space-x-6"> |
| | <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> |
| | <button class="mobile-menu-btn md:hidden text-white focus:outline-none" id="menu-btn"> |
| | <i class="fas fa-bars text-2xl"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="hidden" id="mobile-menu"> |
| | <div class="container mx-auto px-6 py-4"> |
| | <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> |
| | </div> |
| | </nav> |
| | |
| | |
| | <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-16 h-16 rounded-full bg-purple-600 filter blur-3xl opacity-70 floating"></div> |
| | <div class="absolute top-1/3 right-1/4 w-18 h-18 rounded-full bg-teal-500 filter blur-3xl opacity-70 floating-2"></div> |
| | <div class="absolute bottom-1/4 right-1/3 w-20 h-20 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 flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 hero-buttons"> |
| | <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 text-center"> |
| | Начать проект |
| | </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 text-center"> |
| | Наши работы |
| | </a> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 relative mt-12 md:mt-0"> |
| | <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-8 h-8 bg-purple-600 rounded-full filter blur-xl opacity-40 -z-10"></div> |
| | <div class="absolute -top-10 -right-10 w-10 h-10 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 hidden md:block"> |
| | <a href="#services" class="text-white text-2xl"> |
| | <i class="fas fa-chevron-down"></i> |
| | </a> |
| | </div> |
| | </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"> |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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-8 h-8 bg-purple-600 rounded-full filter blur-xl opacity-40 -z-10"></div> |
| | <div class="absolute -top-6 -right-6 w-10 h-10 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> |
| | |
| | |
| | <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"> |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <div class="group relative overflow-hidden rounded-xl card-hover-effect portfolio-item"> |
| | <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 overlay-content"> |
| | <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> |
| | |
| | |
| | <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"> |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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"> |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <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> |
| | |
| | |
| | <section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black section contact-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 contact-info"> |
| | <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 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> |
| | |
| | if (window.innerWidth > 768) { |
| | 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); |
| | }); |
| | |
| | |
| | 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)'; |
| | }); |
| | }); |
| | } |
| | |
| | |
| | const particlesContainer = document.getElementById('particles'); |
| | const particleCount = window.innerWidth < 768 ? 15 : 30; |
| | |
| | for (let i = 0; i < particleCount; i++) { |
| | const particle = document.createElement('div'); |
| | particle.classList.add('particle'); |
| | |
| | |
| | const size = Math.random() * 5 + 1; |
| | particle.style.width = `${size}px`; |
| | particle.style.height = `${size}px`; |
| | |
| | |
| | particle.style.left = `${Math.random() * 100}%`; |
| | particle.style.top = `${Math.random() * 100}%`; |
| | |
| | |
| | const duration = Math.random() * 20 + 10; |
| | const delay = Math.random() * 5; |
| | particle.style.animation = `floating ${duration}s ease-in-out infinite ${delay}s`; |
| | |
| | |
| | particle.style.opacity = Math.random() * 0.5 + 0.1; |
| | |
| | particlesContainer.appendChild(particle); |
| | } |
| | |
| | |
| | const menuBtn = document.getElementById('menu-btn'); |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | |
| | menuBtn.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | document.querySelectorAll('#mobile-menu a').forEach(link => { |
| | link.addEventListener('click', () => { |
| | mobileMenu.classList.add('hidden'); |
| | }); |
| | }); |
| | |
| | |
| | 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); |
| | }); |
| | |
| | |
| | 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' |
| | }); |
| | |
| | |
| | mobileMenu.classList.add('hidden'); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | if (window.innerWidth < 768) { |
| | |
| | const floatingElements = document.querySelectorAll('.floating, .floating-2, .floating-3'); |
| | floatingElements.forEach(el => { |
| | el.style.animation = 'none'; |
| | }); |
| | } |
| | </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> |
