|
|
<!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">[email protected]</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="[email protected]"> |
|
|
</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> |
