1526 lines
105 KiB
HTML
1526 lines
105 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" class="scroll-smooth">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ИКП — Игра. Киберспорт. Профессионалы.</title>
|
||
<!-- Tailwind CSS (CDN) для быстрой стилизации и адаптивности -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="Scripts/scripts.js"></script>
|
||
<link rel="stylesheet" href="Styles/style.css">
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="Images/favicon.ico">
|
||
<link rel="icon" type="image/png" href="Images/favicon.png">
|
||
</head>
|
||
|
||
<body class="antialiased relative selection:bg-cyber-purple selection:text-white">
|
||
|
||
|
||
<!-- Yandex.Metrika counter -->
|
||
<script type="text/javascript">
|
||
(function(m,e,t,r,i,k,a){
|
||
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||
m[i].l=1*new Date();
|
||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
|
||
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=109871645', 'ym');
|
||
|
||
ym(109871645, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
|
||
</script>
|
||
<noscript><div><img src="https://mc.yandex.ru/watch/109871645" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||
<!-- /Yandex.Metrika counter -->
|
||
<!-- Overlay с шумом -->
|
||
<div class="noise-bg"></div>
|
||
|
||
<!-- 1. ШАПКА (Header) -->
|
||
<header
|
||
class="fixed top-0 w-full z-40 bg-darker/90 backdrop-blur-md border-b border-cyber-gray/50 shadow-[0_4px_30px_rgba(0,0,0,0.5)]">
|
||
<div class="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
|
||
<!-- Логотип -->
|
||
<a href="#" class="flex items-center gap-3 group">
|
||
<!-- ВСТАВЬТЕ ССЫЛКУ НА ВАШ ЛОГОТИП (темный или светлый) СЮДА: -->
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-12 w-auto object-contain rounded-lg group-hover:drop-shadow-[0_0_15px_rgba(124,58,237,0.8)] transition-all">
|
||
<span
|
||
class="font-display font-black text-2xl tracking-wider text-white hidden sm:block uppercase glitch-hover">ИКП</span>
|
||
</a>
|
||
|
||
<!-- Десктопное меню -->
|
||
<nav class="hidden md:flex gap-8">
|
||
<a href="#services" class="nav-link text-sm text-gray-300">Услуги</a>
|
||
<a href="#about" class="nav-link text-sm text-gray-300">О нас</a>
|
||
<a href="#achievements" class="nav-link text-sm text-gray-300">Достижения</a>
|
||
<a href="#vacancies" class="nav-link text-sm text-gray-300">Вакансии</a>
|
||
<a href="#contacts" class="nav-link text-sm text-gray-300">Контакты</a>
|
||
</nav>
|
||
|
||
<!-- Бургер кнопка для мобильных -->
|
||
<button id="burger-btn"
|
||
class="md:hidden text-cyber-purple hover:text-cyber-pink transition-colors focus:outline-none">
|
||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Мобильное меню (скрыто по умолчанию) -->
|
||
<div id="mobile-menu"
|
||
class="hidden md:hidden bg-darker border-b border-cyber-gray absolute w-full top-20 left-0 shadow-lg">
|
||
<div class="flex flex-col px-6 py-6 gap-6">
|
||
<a href="#services"
|
||
class="mobile-link text-gray-300 uppercase font-black tracking-widest hover:text-cyber-blue hover:pl-2 transition-all">01.
|
||
Услуги</a>
|
||
<a href="#about"
|
||
class="mobile-link text-gray-300 uppercase font-black tracking-widest hover:text-cyber-blue hover:pl-2 transition-all">02.
|
||
О нас</a>
|
||
<a href="#achievements"
|
||
class="mobile-link text-gray-300 uppercase font-black tracking-widest hover:text-cyber-blue hover:pl-2 transition-all">03.
|
||
Достижения</a>
|
||
<a href="#vacancies"
|
||
class="mobile-link text-gray-300 uppercase font-black tracking-widest hover:text-cyber-blue hover:pl-2 transition-all">04.
|
||
Вакансии</a>
|
||
<a href="#contacts"
|
||
class="mobile-link text-gray-300 uppercase font-black tracking-widest hover:text-cyber-blue hover:pl-2 transition-all">05.
|
||
Контакты</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 2. БЛОК HERO (Первый экран) -->
|
||
<section class="relative min-h-screen flex items-center pt-20 overflow-hidden hex-pattern">
|
||
<!-- Неоновые фоновые градиенты -->
|
||
<div
|
||
class="absolute top-1/2 left-0 -translate-y-1/2 w-[600px] h-[600px] bg-cyber-purple/20 rounded-full blur-[120px] pointer-events-none">
|
||
</div>
|
||
<div
|
||
class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-cyber-blue/20 rounded-full blur-[150px] pointer-events-none">
|
||
</div>
|
||
|
||
<div class="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center relative z-10 w-full">
|
||
<div class="space-y-8">
|
||
<!-- Бейдж -->
|
||
<div
|
||
class="inline-flex items-center gap-3 px-5 py-2 bg-cyber-purple/10 border border-cyber-purple/30 rounded-none clip-path-polygon backdrop-blur-sm">
|
||
<span class="w-2.5 h-2.5 bg-cyber-purple animate-pulse shadow-[0_0_10px_#7c3aed]"></span>
|
||
<span class="text-xs font-mono text-cyber-purple uppercase tracking-widest font-bold">Организация
|
||
высшего тира</span>
|
||
</div>
|
||
|
||
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-black leading-tight uppercase">
|
||
<span class="text-white block glitch-hover">ИКП — Твой</span>
|
||
<span class="gradient-text block">Киберспортивный</span>
|
||
<span class="text-white block glitch-hover">Старт</span>
|
||
</h1>
|
||
|
||
<p
|
||
class="text-lg text-gray-300 max-w-xl font-medium border-l-4 border-cyber-blue pl-6 bg-gradient-to-r from-cyber-blue/10 to-transparent py-2">
|
||
<strong class="text-white">ИКП</strong> — это не буквы. Это твой путь: Играть как бог, мыслить как
|
||
киберспортсмен, побеждать как профессионал.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap gap-6 pt-4">
|
||
<a href="#vacancies" class="cyber-btn">Вступить в команду</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative hidden lg:block">
|
||
<!-- Декоративные уголки -->
|
||
<div
|
||
class="absolute -top-6 -left-6 w-24 h-24 border-t-2 border-l-2 border-cyber-purple opacity-50 z-20">
|
||
</div>
|
||
<div
|
||
class="absolute -bottom-6 -right-6 w-24 h-24 border-b-2 border-r-2 border-cyber-blue opacity-50 z-20">
|
||
</div>
|
||
|
||
<!-- ВСТАВЬТЕ ВАШУ КАРТИНКУ-ЗАГЛУШКУ ИЛИ АНИМАЦИЮ КЛАВИАТУРЫ СЮДА: -->
|
||
<div class="cyber-card relative z-10 group overflow-hidden">
|
||
<img src="Images/hero.png" alt="Киберспортсмен ИКП"
|
||
class="w-full object-cover h-[500px] group-hover:scale-105 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent"></div>
|
||
</div>
|
||
|
||
<!-- Плавающая плашка со статой -->
|
||
<div
|
||
class="absolute bottom-10 -left-12 cyber-card p-6 border border-cyber-pink shadow-[0_0_30px_rgba(236,72,153,0.2)] z-30 bg-darker/90 backdrop-blur-md">
|
||
<p class="text-cyber-pink font-mono text-4xl font-bold mb-1 glitch-hover">99.9%</p>
|
||
<p class="text-xs uppercase tracking-widest text-gray-400 font-bold">Win Rate в финалах</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. БЛОК УСЛУГИ -->
|
||
<section id="services" class="py-24 relative bg-darker/50 border-t border-cyber-gray">
|
||
<!-- Неоновые фоновые градиенты -->
|
||
<div
|
||
class="absolute top-1/2 left-1/4 -translate-y-1/2 w-[400px] h-[400px] bg-cyber-blue/10 rounded-full blur-[120px] pointer-events-none">
|
||
</div>
|
||
<div
|
||
class="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-cyber-purple/10 rounded-full blur-[150px] pointer-events-none">
|
||
</div>
|
||
|
||
<div class="max-w-[1400px] mx-auto px-6 relative z-10">
|
||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-16">
|
||
<div class="space-y-4">
|
||
<h2 class="text-4xl md:text-5xl font-black uppercase text-glow-blue glitch-hover inline-block">
|
||
Услуги</h2>
|
||
<div class="h-1 w-24 bg-cyber-blue shadow-[0_0_15px_rgba(59,130,246,0.8)]"></div>
|
||
<p class="text-gray-400 max-w-2xl font-mono text-sm">Профессиональные решения для игроков, команд и
|
||
организаторов.</p>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<button id="carousel-prev"
|
||
class="w-12 h-12 rounded-none border border-cyber-blue bg-cyber-blue/10 flex items-center justify-center text-cyber-blue hover:bg-cyber-blue hover:text-white transition-all clip-path-polygon shadow-[0_0_10px_rgba(59,130,246,0.2)] focus:outline-none"
|
||
aria-label="Предыдущий слайд">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<button id="carousel-next"
|
||
class="w-12 h-12 rounded-none border border-cyber-blue bg-cyber-blue/10 flex items-center justify-center text-cyber-blue hover:bg-cyber-blue hover:text-white transition-all clip-path-polygon shadow-[0_0_10px_rgba(59,130,246,0.2)] focus:outline-none"
|
||
aria-label="Следующий слайд">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="services-carousel"
|
||
class="flex gap-8 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-8 scrollbar-hide">
|
||
<!-- Услуга 1 -->
|
||
<div class="snap-start shrink-0 w-full sm:w-[380px] md:w-[410px]">
|
||
<div class="cyber-card p-1 border border-cyber-blue shadow-[0_0_15px_rgba(59,130,246,0.2)] h-full">
|
||
<div class="bg-dark p-6 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<!-- Декоративные уголки и фоновые элементы -->
|
||
<div
|
||
class="absolute -top-10 -right-10 w-40 h-40 bg-cyber-blue/10 rounded-full blur-3xl pointer-events-none">
|
||
</div>
|
||
|
||
<!-- Заголовок и логотип -->
|
||
<div class="flex justify-between items-start gap-4 mb-3">
|
||
<div class="space-y-1">
|
||
<h3
|
||
class="text-3xl font-black italic tracking-tighter uppercase text-white leading-none text-glow-blue">
|
||
Разовая<br>тренировка
|
||
</h3>
|
||
<div class="text-[9px] font-mono text-gray-400 tracking-wider uppercase">
|
||
Counter-Strike 2 • Dota 2 • World of Tanks
|
||
</div>
|
||
</div>
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-10 w-auto object-contain rounded border border-cyber-blue/30">
|
||
</div>
|
||
|
||
<!-- Изображение сессии -->
|
||
<div
|
||
class="relative w-full h-40 mb-5 overflow-hidden border border-cyber-blue/20 rounded-md">
|
||
<img src="Images/coaching_session.png" alt="Разовая тренировка"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Преимущества -->
|
||
<div class="space-y-4 mb-6">
|
||
<!-- Бэйдж быстрого разбора -->
|
||
<div
|
||
class="inline-flex items-center gap-2 px-3 py-1 bg-cyber-blue text-[#0a0a0f] text-[10px] font-black uppercase tracking-wider clip-path-polygon shadow-[0_0_10px_rgba(59,130,246,0.3)]">
|
||
<span>⚡</span> Быстрый разбор
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<!-- Анализ игры -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
🔍
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Анализ
|
||
игры</span>
|
||
</div>
|
||
|
||
<!-- Работа над механикой и позиционированием -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
🎯
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Работа
|
||
над механикой и позиционированием</span>
|
||
</div>
|
||
|
||
<!-- Персональные рекомендации -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
👤
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Персональные
|
||
рекомендации</span>
|
||
</div>
|
||
|
||
<!-- Фидбек после занятия -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
💬
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Фидбек
|
||
после занятия</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок цены и кнопки -->
|
||
<div class="pt-4 mt-auto border-t border-cyber-blue/20">
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div>
|
||
<span
|
||
class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
|
||
<span class="text-3xl font-black text-white text-glow-blue">870 ₽</span>
|
||
</div>
|
||
<a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
|
||
class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-blue flex items-center gap-2 group/btn">
|
||
Записаться
|
||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нижняя плашка с тегами (Стратегия, Дисциплина, Практика, Результат) -->
|
||
<div
|
||
class="grid grid-cols-4 gap-1 pt-4 border-t border-cyber-gray text-[8px] font-mono font-bold uppercase text-gray-500 text-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">♟</span>
|
||
<span>Стратегия</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">🎯</span>
|
||
<span>Дисциплина</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">📈</span>
|
||
<span>Практика</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">🏆</span>
|
||
<span>Результат</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Услуга 2: Абонемент на 4 занятия (Групповой) -->
|
||
<div class="snap-start shrink-0 w-full sm:w-[380px] md:w-[410px]">
|
||
<div
|
||
class="cyber-card p-1 border border-cyber-purple shadow-[0_0_15px_rgba(124,58,237,0.2)] h-full">
|
||
<div class="bg-dark p-6 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<!-- Декоративные уголки и фоновые элементы -->
|
||
<div
|
||
class="absolute -top-10 -right-10 w-40 h-40 bg-cyber-purple/10 rounded-full blur-3xl pointer-events-none">
|
||
</div>
|
||
|
||
<!-- Заголовок и логотип -->
|
||
<div class="flex justify-between items-start gap-4 mb-3">
|
||
<div class="space-y-1">
|
||
<h3
|
||
class="text-3xl font-black italic tracking-tighter uppercase text-white leading-none text-glow-purple">
|
||
Абонемент<br>на 4 занятия
|
||
</h3>
|
||
<div class="text-[9px] font-mono text-gray-400 tracking-wider uppercase">
|
||
Counter-Strike 2 • Dota 2 • World of Tanks
|
||
</div>
|
||
</div>
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-10 w-auto object-contain rounded border border-cyber-purple/30">
|
||
</div>
|
||
|
||
<!-- Изображение сессии -->
|
||
<div
|
||
class="relative w-full h-40 mb-5 overflow-hidden border border-cyber-purple/20 rounded-md">
|
||
<img src="Images/group_4_coaching.png" alt="Абонемент на 4 занятия (Групповой)"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Преимущества -->
|
||
<div class="space-y-4 mb-6">
|
||
<!-- Бэйдж группового формата -->
|
||
<div
|
||
class="inline-flex items-center gap-2 px-3 py-1 bg-cyber-purple text-[#0a0a0f] text-[10px] font-black uppercase tracking-wider clip-path-polygon shadow-[0_0_10px_rgba(124,58,237,0.3)]">
|
||
<span>👥</span> Групповой формат
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<!-- Тренировки в мини-группе -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
👥
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Тренировки
|
||
в мини-группе</span>
|
||
</div>
|
||
|
||
<!-- Разбор игровых ситуаций -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
🎯
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Разбор
|
||
игровых ситуаций</span>
|
||
</div>
|
||
|
||
<!-- Командное взаимодействие -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
🤝
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Командное
|
||
взаимодействие</span>
|
||
</div>
|
||
|
||
<!-- Поддержка тренера -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
🎧
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Поддержка
|
||
тренера</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок цены и кнопки -->
|
||
<div class="pt-4 mt-auto border-t border-cyber-purple/20">
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div>
|
||
<span
|
||
class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
|
||
<span class="text-3xl font-black text-white text-glow-purple">2 790 ₽</span>
|
||
</div>
|
||
<a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
|
||
class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-purple flex items-center gap-2 group/btn">
|
||
Записаться
|
||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нижняя плашка с тегами (Стратегия, Дисциплина, Практика, Результат) -->
|
||
<div
|
||
class="grid grid-cols-4 gap-1 pt-4 border-t border-cyber-gray text-[8px] font-mono font-bold uppercase text-gray-500 text-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">♟</span>
|
||
<span>Стратегия</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">🎯</span>
|
||
<span>Дисциплина</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">📈</span>
|
||
<span>Практика</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">🏆</span>
|
||
<span>Результат</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Услуга 3: Абонемент на 8 занятий (Групповой) -->
|
||
<div class="snap-start shrink-0 w-full sm:w-[380px] md:w-[410px]">
|
||
<div class="cyber-card p-1 border border-cyber-pink shadow-[0_0_15px_rgba(236,72,153,0.2)] h-full">
|
||
<div class="bg-dark p-6 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<!-- Декоративные уголки и фоновые элементы -->
|
||
<div
|
||
class="absolute -top-10 -right-10 w-40 h-40 bg-cyber-pink/10 rounded-full blur-3xl pointer-events-none">
|
||
</div>
|
||
|
||
<!-- Заголовок и логотип -->
|
||
<div class="flex justify-between items-start gap-4 mb-3">
|
||
<div class="space-y-1">
|
||
<h3
|
||
class="text-3xl font-black italic tracking-tighter uppercase text-white leading-none text-glow-pink">
|
||
Абонемент<br>на 8 занятий
|
||
</h3>
|
||
<div class="text-[9px] font-mono text-gray-400 tracking-wider uppercase">
|
||
Counter-Strike 2 • Dota 2 • World of Tanks
|
||
</div>
|
||
</div>
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-10 w-auto object-contain rounded border border-cyber-pink/30">
|
||
</div>
|
||
|
||
<!-- Изображение сессии -->
|
||
<div
|
||
class="relative w-full h-40 mb-5 overflow-hidden border border-cyber-pink/20 rounded-md">
|
||
<img src="Images/group_8_coaching.png" alt="Абонемент на 8 занятий (Групповой)"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Преимущества -->
|
||
<div class="space-y-4 mb-6">
|
||
<!-- Бэйдж группового формата -->
|
||
<div
|
||
class="inline-flex items-center gap-2 px-3 py-1 bg-cyber-pink text-[#0a0a0f] text-[10px] font-black uppercase tracking-wider clip-path-polygon shadow-[0_0_10px_rgba(236,72,153,0.3)]">
|
||
<span>👥</span> Групповой формат
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<!-- Регулярные тренировки в mini-группе -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-pink/40 flex items-center justify-center text-cyber-pink text-sm shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.1)]">
|
||
👥
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Регулярные
|
||
тренировки в mini-группе</span>
|
||
</div>
|
||
|
||
<!-- Командные тактики и взаимодействие -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-pink/40 flex items-center justify-center text-cyber-pink text-sm shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.1)]">
|
||
🎯
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Командные
|
||
тактики и взаимодействие</span>
|
||
</div>
|
||
|
||
<!-- Разбор ошибок после игр -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-pink/40 flex items-center justify-center text-cyber-pink text-sm shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.1)]">
|
||
📊
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Разбор
|
||
ошибок после игр</span>
|
||
</div>
|
||
|
||
<!-- Поддержка и отслеживание прогресса -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-pink/40 flex items-center justify-center text-cyber-pink text-sm shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.1)]">
|
||
📈
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Поддержка
|
||
и отслеживание прогресса</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок цены и кнопки -->
|
||
<div class="pt-4 mt-auto border-t border-cyber-pink/20">
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div>
|
||
<span
|
||
class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
|
||
<span class="text-3xl font-black text-white text-glow-pink">4 990 ₽</span>
|
||
</div>
|
||
<a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
|
||
class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-pink flex items-center gap-2 group/btn">
|
||
Записаться
|
||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нижняя плашка с тегами (Стратегия, Дисциплина, Практика, Результат) -->
|
||
<div
|
||
class="grid grid-cols-4 gap-1 pt-4 border-t border-cyber-gray text-[8px] font-mono font-bold uppercase text-gray-500 text-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-pink text-xs">♟</span>
|
||
<span>Стратегия</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-pink text-xs">🎯</span>
|
||
<span>Дисциплина</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-pink text-xs">📈</span>
|
||
<span>Практика</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-pink text-xs">🏆</span>
|
||
<span>Результат</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Услуга 4: Абонемент на 4 занятия (Индивидуальный) -->
|
||
<div class="snap-start shrink-0 w-full sm:w-[380px] md:w-[410px]">
|
||
<div class="cyber-card p-1 border border-cyber-blue shadow-[0_0_15px_rgba(59,130,246,0.2)] h-full">
|
||
<div class="bg-dark p-6 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<!-- Декоративные уголки и фоновые элементы -->
|
||
<div
|
||
class="absolute -top-10 -right-10 w-40 h-40 bg-cyber-blue/10 rounded-full blur-3xl pointer-events-none">
|
||
</div>
|
||
|
||
<!-- Заголовок и логотип -->
|
||
<div class="flex justify-between items-start gap-4 mb-3">
|
||
<div class="space-y-1">
|
||
<h3
|
||
class="text-3xl font-black italic tracking-tighter uppercase text-white leading-none text-glow-blue">
|
||
Абонемент<br>на 4 занятия
|
||
</h3>
|
||
<div class="text-[9px] font-mono text-gray-400 tracking-wider uppercase">
|
||
Counter-Strike 2 • Dota 2 • World of Tanks
|
||
</div>
|
||
</div>
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-10 w-auto object-contain rounded border border-cyber-blue/30">
|
||
</div>
|
||
|
||
<!-- Изображение сессии -->
|
||
<div
|
||
class="relative w-full h-40 mb-5 overflow-hidden border border-cyber-blue/20 rounded-md">
|
||
<img src="Images/indiv_4_coaching.png" alt="Абонемент на 4 занятия (Индивидуальный)"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Преимущества -->
|
||
<div class="space-y-4 mb-6">
|
||
<!-- Бэйдж индивидуального формата -->
|
||
<div
|
||
class="inline-flex items-center gap-2 px-3 py-1 bg-cyber-blue text-[#0a0a0f] text-[10px] font-black uppercase tracking-wider clip-path-polygon shadow-[0_0_10px_rgba(59,130,246,0.3)]">
|
||
<span>👤</span> Индивидуальный формат
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<!-- Персональный разбор игры -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
🎯
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Персональный
|
||
разбор игры</span>
|
||
</div>
|
||
|
||
<!-- Работа над механикой и позиционированием -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
⚙️
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Работа
|
||
над механикой и позиционированием</span>
|
||
</div>
|
||
|
||
<!-- План тренировок -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
📋
|
||
</div>
|
||
<span class="text-[11px] font-bold uppercase tracking-wider text-gray-300">План
|
||
тренировок</span>
|
||
</div>
|
||
|
||
<!-- Фидбек после занятия -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-blue/40 flex items-center justify-center text-cyber-blue text-sm shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.1)]">
|
||
💬
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Фидбек
|
||
после занятия</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок цены и кнопки -->
|
||
<div class="pt-4 mt-auto border-t border-cyber-blue/20">
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div>
|
||
<span
|
||
class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
|
||
<span class="text-3xl font-black text-white text-glow-blue">3 290 ₽</span>
|
||
</div>
|
||
<a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
|
||
class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-blue flex items-center gap-2 group/btn">
|
||
Записаться
|
||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нижняя плашка с тегами (Стратегия, Дисциплина, Практика, Результат) -->
|
||
<div
|
||
class="grid grid-cols-4 gap-1 pt-4 border-t border-cyber-gray text-[8px] font-mono font-bold uppercase text-gray-500 text-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">♟</span>
|
||
<span>Стратегия</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">🎯</span>
|
||
<span>Дисциплина</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">📈</span>
|
||
<span>Практика</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-blue text-xs">🏆</span>
|
||
<span>Результат</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Услуга 5: Абонемент на 8 занятий (Индивидуальный) -->
|
||
<div class="snap-start shrink-0 w-full sm:w-[380px] md:w-[410px]">
|
||
<div
|
||
class="cyber-card p-1 border border-cyber-purple shadow-[0_0_15px_rgba(124,58,237,0.2)] h-full">
|
||
<div class="bg-dark p-6 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<!-- Декоративные уголки и фоновые элементы -->
|
||
<div
|
||
class="absolute -top-10 -right-10 w-40 h-40 bg-cyber-purple/10 rounded-full blur-3xl pointer-events-none">
|
||
</div>
|
||
|
||
<!-- Заголовок и логотип -->
|
||
<div class="flex justify-between items-start gap-4 mb-3">
|
||
<div class="space-y-1">
|
||
<h3
|
||
class="text-3xl font-black italic tracking-tighter uppercase text-white leading-none text-glow-purple">
|
||
Абонемент<br>на 8 занятий
|
||
</h3>
|
||
<div class="text-[9px] font-mono text-gray-400 tracking-wider uppercase">
|
||
Counter-Strike 2 • Dota 2 • World of Tanks
|
||
</div>
|
||
</div>
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-10 w-auto object-contain rounded border border-cyber-purple/30">
|
||
</div>
|
||
|
||
<!-- Изображение сессии -->
|
||
<div
|
||
class="relative w-full h-40 mb-5 overflow-hidden border border-cyber-purple/20 rounded-md">
|
||
<img src="Images/indiv_8_coaching.png" alt="Абонемент на 8 занятий (Индивидуальный)"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-transparent to-transparent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Преимущества -->
|
||
<div class="space-y-4 mb-6">
|
||
<!-- Бэйдж индивидуального формата -->
|
||
<div
|
||
class="inline-flex items-center gap-2 px-3 py-1 bg-cyber-purple text-[#0a0a0f] text-[10px] font-black uppercase tracking-wider clip-path-polygon shadow-[0_0_10px_rgba(124,58,237,0.3)]">
|
||
<span>👤</span> Индивидуальный формат
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<!-- Персональный разбор игры -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
🔍
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Персональный
|
||
разбор игры</span>
|
||
</div>
|
||
|
||
<!-- Работа над механикой и позиционированием -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
🎯
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Работа
|
||
над механикой и позиционированием</span>
|
||
</div>
|
||
|
||
<!-- План тренировок -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
📋
|
||
</div>
|
||
<span class="text-[11px] font-bold uppercase tracking-wider text-gray-300">План
|
||
тренировок</span>
|
||
</div>
|
||
|
||
<!-- Фидбек после занятия -->
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-full border border-cyber-purple/40 flex items-center justify-center text-cyber-purple text-sm shrink-0 shadow-[0_0_10px_rgba(124,58,237,0.1)]">
|
||
💬
|
||
</div>
|
||
<span
|
||
class="text-[11px] font-bold uppercase tracking-wider text-gray-300">Фидбек
|
||
после занятия</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок цены и кнопки -->
|
||
<div class="pt-4 mt-auto border-t border-cyber-purple/20">
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div>
|
||
<span
|
||
class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
|
||
<span class="text-3xl font-black text-white text-glow-purple">5 990 ₽</span>
|
||
</div>
|
||
<a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
|
||
class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-purple flex items-center gap-2 group/btn">
|
||
Записаться
|
||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нижняя плашка с тегами (Стратегия, Дисциплина, Практика, Результат) -->
|
||
<div
|
||
class="grid grid-cols-4 gap-1 pt-4 border-t border-cyber-gray text-[8px] font-mono font-bold uppercase text-gray-500 text-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">♟</span>
|
||
<span>Стратегия</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">🎯</span>
|
||
<span>Дисциплина</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">📈</span>
|
||
<span>Практика</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<span class="text-cyber-purple text-xs">🏆</span>
|
||
<span>Результат</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Горизонтальный прогресс-бар для услуг -->
|
||
<div class="w-full h-1.5 bg-cyber-gray/30 border border-cyber-blue/20 rounded-none overflow-hidden mt-4 mb-8 relative">
|
||
<div id="services-progress-bar" class="absolute h-full bg-gradient-to-r from-cyber-blue to-cyber-purple transition-all duration-300 shadow-[0_0_15px_rgba(59,130,246,0.8)]" style="width: 0%; left: 0%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. БЛОК О НАС -->
|
||
<section id="about" class="py-24 relative">
|
||
<div class="max-w-[1400px] mx-auto px-6">
|
||
<div class="flex flex-col md:flex-row gap-16 items-center">
|
||
<div class="w-full md:w-1/2 relative group">
|
||
<div
|
||
class="absolute inset-0 bg-cyber-purple/20 blur-3xl group-hover:bg-cyber-blue/20 transition-colors duration-500">
|
||
</div>
|
||
<img src="Images/about.png" alt="Команда ИКП"
|
||
class="relative z-10 w-full object-cover cyber-card aspect-square border-cyber-gray">
|
||
</div>
|
||
|
||
<div class="w-full md:w-1/2 space-y-8">
|
||
<div class="space-y-4">
|
||
<h2 class="text-4xl md:text-5xl font-black uppercase text-glow-blue glitch-hover inline-block">О
|
||
нас</h2>
|
||
<div class="h-1 w-24 bg-cyber-blue shadow-[0_0_15px_rgba(59,130,246,0.8)]"></div>
|
||
</div>
|
||
|
||
<div class="space-y-6 text-gray-300 leading-relaxed text-lg">
|
||
<p>
|
||
<strong class="text-white text-xl border-b border-cyber-purple">ИКП</strong> — это мощная
|
||
экосистема для взрывного роста профессиональных игроков. Мы предоставляем бескомпромиссную
|
||
инфраструктуру, лучших тренеров и глубокую data-аналитику, чтобы вы могли доминировать на
|
||
турнирной сцене с первых секунд матча.
|
||
</p>
|
||
<p>
|
||
Наше сообщество стало кузницей для многих талантов. Мы объединяем амбициозных стрелков,
|
||
гениальных стратегов и хладнокровных аналитиков. Присоединяйтесь к движению, где каждый
|
||
выигранный раунд — это шаг к вершине мирового рейтинга, а каждая ошибка — повод стать еще
|
||
жестче.
|
||
</p>
|
||
|
||
<!-- Дисциплины -->
|
||
<div class="pt-4 pb-2">
|
||
<h3 class="text-xs font-mono text-gray-500 uppercase tracking-widest mb-3">> Загрузка
|
||
дивизионов...</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<div
|
||
class="border-l-2 border-cyber-blue bg-cyber-blue/10 px-4 py-2 shadow-[0_0_15px_rgba(59,130,246,0.1)] hover:bg-cyber-blue/20 transition-colors">
|
||
<span
|
||
class="text-cyber-blue font-black tracking-wider uppercase text-sm">Counter-Strike
|
||
2</span>
|
||
</div>
|
||
<div
|
||
class="border-l-2 border-cyber-purple bg-cyber-purple/10 px-4 py-2 shadow-[0_0_15px_rgba(124,58,237,0.1)] hover:bg-cyber-purple/20 transition-colors">
|
||
<span class="text-cyber-purple font-black tracking-wider uppercase text-sm">Dota
|
||
2</span>
|
||
</div>
|
||
<div
|
||
class="border-l-2 border-dashed border-cyber-pink bg-cyber-pink/5 px-4 py-2 flex items-center gap-2 hover:bg-cyber-pink/10 transition-colors">
|
||
<span class="text-gray-300 font-bold tracking-wider uppercase text-sm">Мир
|
||
Танков</span>
|
||
<span
|
||
class="bg-cyber-pink text-[#0a0a0f] text-[10px] px-1.5 py-0.5 font-black animate-pulse">TEST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-cyber-purple/10 border-l-4 border-cyber-purple p-4 mt-6">
|
||
<p class="font-mono text-cyber-purple font-bold">
|
||
> sys.log("Мы не просто играем. Мы живем киберспортом."); <span
|
||
class="animate-pulse">_</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. БЛОК ДОСТИЖЕНИЯ -->
|
||
<section id="achievements" class="py-24 relative bg-darker border-y border-cyber-gray">
|
||
<div class="max-w-[1400px] mx-auto px-6">
|
||
<div class="text-center space-y-4 mb-16 relative">
|
||
<h2 class="text-4xl md:text-5xl font-black uppercase text-glow-purple glitch-hover">Наши достижения</h2>
|
||
<p class="text-gray-400 max-w-2xl mx-auto font-mono text-sm">История наших побед. Мы доказываем свое
|
||
превосходство на сервере каждый день.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- Карточка 1 -->
|
||
<div class="cyber-card p-1">
|
||
<div class="bg-dark p-8 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-20 transition-opacity">
|
||
<svg class="w-32 h-32 text-cyber-purple" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M14.4 6L14 4H5V21H7V14H12.6L13 16H20V6H14.4Z"></path>
|
||
</svg>
|
||
</div>
|
||
|
||
<span class="text-cyber-purple font-mono font-bold text-xl mb-4 block">1 Сентября 2025</span>
|
||
<h3 class="text-2xl font-black uppercase mb-3">Создание компании</h3>
|
||
<div
|
||
class="inline-block bg-cyber-purple/20 text-cyber-purple px-3 py-1 text-sm font-bold uppercase w-fit mb-6 border border-cyber-purple/50">
|
||
Основание 🚀</div>
|
||
|
||
<p class="text-gray-400 text-sm mt-auto leading-relaxed">
|
||
Официальное открытие киберспортивной организации «ИКП». Формирование первого состава,
|
||
утверждение айдентики и начало работы.
|
||
</p>
|
||
|
||
<img src="Images/start_creation.png" alt="Создание компании ИКП"
|
||
class="mt-6 w-full h-48 object-cover border border-cyber-gray grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Карточка 2 -->
|
||
<div class="cyber-card p-1">
|
||
<div class="bg-dark p-8 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-20 transition-opacity">
|
||
<svg class="w-32 h-32 text-cyber-blue" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 1L8 5H4V9L0 12L4 15V19H8L12 23L16 19H20V15L24 12L20 9V5H16L12 1ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
|
||
<span class="text-cyber-blue font-mono font-bold text-xl mb-4 block">10 Ноября 2025</span>
|
||
<h3 class="text-2xl font-black uppercase mb-3">Первые локальные турниры</h3>
|
||
<div
|
||
class="inline-block bg-cyber-blue/20 text-cyber-blue px-3 py-1 text-sm font-bold uppercase w-fit mb-6 border border-cyber-blue/50">
|
||
Дебют ⚔️</div>
|
||
|
||
<p class="text-gray-400 text-sm mt-auto leading-relaxed">
|
||
Успешный старт ростера на региональных чемпионатах. Первые победы, первые фанаты и
|
||
закрепление ИКП в статусе перспективной команды.
|
||
</p>
|
||
|
||
<img src="Images/first_steps.png" alt="Локальные турниры"
|
||
class="mt-6 w-full h-48 object-cover border border-cyber-gray grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Карточка 3 -->
|
||
<div class="cyber-card p-1">
|
||
<div class="bg-dark p-8 h-full clip-path-polygon flex flex-col relative overflow-hidden group">
|
||
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-20 transition-opacity">
|
||
<svg class="w-32 h-32 text-cyber-pink" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.45 13.97L5.82 21L12 17.27Z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
|
||
<span class="text-cyber-pink font-mono font-bold text-xl mb-4 block">2026 год</span>
|
||
<h3 class="text-2xl font-black uppercase mb-3">Турниры VK Play</h3>
|
||
<div
|
||
class="inline-block bg-cyber-pink/20 text-cyber-pink px-3 py-1 text-sm font-bold uppercase w-fit mb-6 border border-cyber-pink/50">
|
||
Внешняя сцена 🏆</div>
|
||
|
||
<p class="text-gray-400 text-sm mt-auto leading-relaxed">
|
||
Первое выступление на крупных внешних соревнованиях от VK Play. Команда показала высочайший
|
||
уровень игры против сильных коллективов.
|
||
</p>
|
||
|
||
<img src="Images/victory.png" alt="VK Play турниры"
|
||
class="mt-6 w-full h-48 object-cover border border-cyber-gray grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. БЛОК ВАКАНСИИ -->
|
||
<section id="vacancies" class="py-24 relative hex-pattern">
|
||
<div class="max-w-[1400px] mx-auto px-6">
|
||
<div class="flex flex-col xl:flex-row gap-16">
|
||
<!-- Левая часть с текстом и фото -->
|
||
<div class="w-full xl:w-1/3 space-y-8">
|
||
<div class="space-y-4">
|
||
<h2 class="text-4xl md:text-5xl font-black uppercase text-glow-pink glitch-hover">Стань частью
|
||
ИКП</h2>
|
||
<div class="h-1 w-24 bg-cyber-pink shadow-[0_0_15px_rgba(236,72,153,0.8)]"></div>
|
||
</div>
|
||
<p class="text-gray-300 text-lg">
|
||
Мы всегда в поиске свежей крови. Если ты горишь игрой, готов пахать на результат по 10 часов в
|
||
день и хочешь поднять кубок над головой — твой путь начинается здесь.
|
||
</p>
|
||
<img src="Images/bootcamp.png" alt="Игроки на буткемпе"
|
||
class="w-full object-cover cyber-card hidden xl:block h-[500px]">
|
||
</div>
|
||
|
||
<!-- Правая часть со списком вакансий -->
|
||
<div class="w-full xl:w-2/3">
|
||
<!-- Заголовок и управление вертикальной каруселью -->
|
||
<div class="flex justify-between items-center mb-6">
|
||
<span class="text-xs font-mono text-cyber-pink uppercase tracking-widest font-bold">> Набор в команду открыт</span>
|
||
<div class="flex gap-2">
|
||
<button id="vacancies-prev"
|
||
class="w-10 h-10 rounded-none border border-cyber-pink bg-cyber-pink/10 flex items-center justify-center text-cyber-pink hover:bg-cyber-pink hover:text-white transition-all clip-path-polygon shadow-[0_0_10px_rgba(236,72,153,0.2)] focus:outline-none"
|
||
aria-label="Предыдущие вакансии">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||
</svg>
|
||
</button>
|
||
<button id="vacancies-next"
|
||
class="w-10 h-10 rounded-none border border-cyber-pink bg-cyber-pink/10 flex items-center justify-center text-cyber-pink hover:bg-cyber-pink hover:text-white transition-all clip-path-polygon shadow-[0_0_10px_rgba(236,72,153,0.2)] focus:outline-none"
|
||
aria-label="Следующие вакансии">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Контейнер для карусели и прогресс-бара -->
|
||
<div class="flex gap-4 items-stretch">
|
||
<!-- Вьюпорт вертикальной карусели -->
|
||
<div id="vacancies-carousel-viewport" class="overflow-hidden relative transition-all duration-500 flex-1">
|
||
<!-- Трек вертикальной карусели -->
|
||
<div id="vacancies-carousel-track" class="flex flex-col gap-6 transition-transform duration-500 w-full">
|
||
<!-- Вакансия: Киберспортсмен Dota2 в новую команду -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-cyber-purple/5">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-cyber-purple/20 text-cyber-purple px-3 py-1 text-xs font-mono font-bold border border-cyber-purple/50">ROSTER</span>
|
||
<span class="text-cyber-purple font-bold font-mono">DOTA 2</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">Киберспортсмен
|
||
Dota2 в новую команду</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Ищем активных, молодых и целеустремленных
|
||
игроков для формирования сильного состава. <br>Требования: от 5000+ MMR, сыгранность,
|
||
дисциплина, опыт командной игры и регулярных тренировок.</p>
|
||
</div>
|
||
<button type="button"
|
||
onclick="alert('Функция в разработке. Заявки временно принимаются только через Telegram!')"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-cyber-purple w-full md:w-auto">Откликнуться</button>
|
||
</div>
|
||
|
||
<!-- Вакансия: Киберспортсмен Counter Strike 2 в новую команду -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-cyber-blue/5">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-cyber-blue/20 text-cyber-blue px-3 py-1 text-xs font-mono font-bold border border-cyber-blue/50">ROSTER</span>
|
||
<span class="text-cyber-blue font-bold font-mono">CS2</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">Киберспортсмен
|
||
Counter Strike 2 в новую команду</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Ищем перспективных и жестких стрелков для
|
||
участия в турнирах и лигах. <br>Требования: 3000+ ELO на Faceit, отличная коммуникация,
|
||
понимание меты и умение играть в команде.</p>
|
||
</div>
|
||
<button type="button"
|
||
onclick="alert('Функция в разработке. Заявки временно принимаются только через Telegram!')"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-cyber-blue w-full md:w-auto">Откликнуться</button>
|
||
</div>
|
||
|
||
<!-- Вакансия: Киберспортсмен "Мир танков" в новую команду -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-cyber-pink/5">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-cyber-pink/20 text-cyber-pink px-3 py-1 text-xs font-mono font-bold border border-cyber-pink/50">ROSTER</span>
|
||
<span class="text-cyber-pink font-bold font-mono">МИР ТАНКОВ</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">Киберспортсмен
|
||
"Мир танков" в новую команду</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Ищем опытных танкистов для выступления на
|
||
профессиональной киберспортивной сцене. <br>Требования: процент побед 60%+, средний урон
|
||
на топах 3000+, опыт в турнирах формата 7х7.</p>
|
||
</div>
|
||
<button type="button"
|
||
onclick="alert('Функция в разработке. Заявки временно принимаются только через Telegram!')"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-cyber-pink w-full md:w-auto">Откликнуться</button>
|
||
</div>
|
||
|
||
|
||
<!-- Вакансия 3 -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-cyber-pink/5">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-cyber-pink/20 text-cyber-pink px-3 py-1 text-xs font-mono font-bold border border-cyber-pink/50">STAFF</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">Тренер состава
|
||
</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Опыт работы с тир-2/3 коллективами. Умение
|
||
строить дисциплину, решать конфликты и поднимать мораль команды в критических ситуациях.
|
||
Тактическая гибкость обязательна.</p>
|
||
</div>
|
||
<button type="button"
|
||
onclick="alert('Функция в разработке. Заявки временно принимаются только через Telegram!')"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-cyber-pink w-full md:w-auto">Откликнуться</button>
|
||
</div>
|
||
|
||
<!-- Вакансия 4 -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-gray-700/10">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-gray-700/50 text-gray-300 px-3 py-1 text-xs font-mono font-bold border border-gray-500">MEDIA</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">SMM-специалист
|
||
</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Ведение соцсетей организации, генерация
|
||
мемов, нарезка хайлайтов в TikTok/Shorts. Ты должен дышать киберспортом, понимать
|
||
актуальные тренды и уметь делать вирусный контент.</p>
|
||
</div>
|
||
<button type="button"
|
||
onclick="alert('Функция в разработке. Заявки временно принимаются только через Telegram!')"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-gray-500 w-full md:w-auto text-gray-300 before:bg-gray-600">Откликнуться</button>
|
||
</div>
|
||
|
||
<!-- Партнерам и спонсорам -->
|
||
<div
|
||
class="cyber-card p-6 md:p-8 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center hover:bg-cyber-purple/5">
|
||
<div class="space-y-3 flex-1">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span
|
||
class="bg-cyber-purple/20 text-cyber-purple px-3 py-1 text-xs font-mono font-bold border border-cyber-purple/50">B2B</span>
|
||
<h3 class="text-2xl font-black uppercase w-full sm:w-auto mt-2 sm:mt-0">Партнерам и
|
||
спонсорам
|
||
</h3>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed">Ищете выход на активную аудиторию
|
||
киберспорта? Мы открыты для амбициозных коллабораций. Предлагаем интеграции в турнирные
|
||
трансляции, совместный медиа-контент и брендирование игровой формы ростеров.</p>
|
||
</div>
|
||
<a href="#contacts"
|
||
class="cyber-btn text-sm whitespace-nowrap !py-3 !px-8 border-cyber-purple w-full md:w-auto text-center">Связаться</a>
|
||
</div>
|
||
</div>
|
||
<!-- Вертикальный прогресс-бар -->
|
||
<div class="w-1.5 relative bg-cyber-gray/30 border border-cyber-pink/20 rounded-none overflow-hidden shrink-0 self-stretch my-2">
|
||
<div id="vacancies-progress-bar" class="absolute w-full bg-gradient-to-b from-cyber-pink to-cyber-purple transition-all duration-500 shadow-[0_0_15px_rgba(236,72,153,0.8)]" style="height: 50%; top: 0%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. БЛОК КОНТАКТЫ -->
|
||
<section id="contacts" class="py-24 relative bg-darker border-t border-cyber-gray">
|
||
<div class="max-w-[1400px] mx-auto px-6">
|
||
<div class="text-center space-y-4 mb-16">
|
||
<h2 class="text-4xl md:text-5xl font-black uppercase text-glow-blue glitch-hover">Свяжись с нами</h2>
|
||
<p class="text-gray-400 max-w-2xl mx-auto font-mono text-sm">Готов предложить спонсорство, вызвать на
|
||
пракк или задать вопрос? Канал связи открыт.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
<!-- Инфо и Карта -->
|
||
<div class="space-y-8">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<!-- Email -->
|
||
<div class="cyber-card p-6 border-l-4 border-l-cyber-purple hover:bg-cyber-purple/5">
|
||
<div class="text-cyber-purple mb-4">
|
||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h4 class="text-lg font-black uppercase mb-1">Email</h4>
|
||
<a href="mailto:support@infocyber.pro"
|
||
class="text-gray-400 font-mono text-sm hover:text-cyber-purple transition-colors">support@infocyber.pro</a>
|
||
</div>
|
||
<!-- Social -->
|
||
<div class="cyber-card p-6 border-l-4 border-l-cyber-blue hover:bg-cyber-blue/5">
|
||
<div class="text-cyber-blue mb-4">
|
||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h4 class="text-lg font-black uppercase mb-1">Telegram</h4>
|
||
<p class="text-gray-400 font-mono text-sm">@ikp_team</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Доп Соцсети (ВКонтакте и Discord) -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<!-- ВКонтакте -->
|
||
<div class="cyber-card p-6 border-l-4 border-l-cyber-blue hover:bg-cyber-blue/5">
|
||
<div class="text-cyber-blue mb-4">
|
||
<img src="Images/vk_icon.png" alt="ВКонтакте" class="w-8 h-8 object-contain">
|
||
</div>
|
||
<h4 class="text-lg font-black uppercase mb-1">ВКонтакте</h4>
|
||
<a href="https://vk.com/ikpro" target="_blank"
|
||
class="text-gray-400 font-mono text-sm hover:text-cyber-blue transition-colors">vk.com/ikpro</a>
|
||
</div>
|
||
<!-- Discord -->
|
||
<div class="cyber-card p-6 border-l-4 border-l-cyber-purple hover:bg-cyber-purple/5">
|
||
<div class="text-cyber-purple mb-4">
|
||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="text-lg font-black uppercase mb-1">Discord</h4>
|
||
<a href="https://discord.gg/z92mAw7KEe" target="_blank"
|
||
class="text-gray-400 font-mono text-sm hover:text-cyber-purple transition-colors">discord.gg/z92mAw7KEe</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Форма обратной связи -->
|
||
<div
|
||
class="cyber-card p-8 lg:p-12 border-t-4 border-t-cyber-pink flex flex-col justify-center bg-darker">
|
||
<h3 class="text-2xl font-black uppercase mb-8 glitch-hover inline-block">Отправить сообщение</h3>
|
||
<form class="space-y-6"
|
||
onsubmit="event.preventDefault(); alert('Ошибка сети: Функция отправки формы в разработке. Пожалуйста, используйте Telegram.');">
|
||
<div>
|
||
<label
|
||
class="block text-xs font-mono text-cyber-pink mb-2 uppercase tracking-widest">Позывной
|
||
/ Имя</label>
|
||
<input type="text" required placeholder="Например: s1mple" class="cyber-input">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-mono text-cyber-blue mb-2 uppercase tracking-widest">Email
|
||
для связи</label>
|
||
<input type="email" required placeholder="player@server.com" class="cyber-input">
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-xs font-mono text-cyber-purple mb-2 uppercase tracking-widest">Текст
|
||
сообщения</label>
|
||
<textarea required rows="4" placeholder="Введите ваш запрос..."
|
||
class="cyber-input resize-none"></textarea>
|
||
</div>
|
||
<button type="submit"
|
||
class="cyber-btn w-full border-cyber-pink text-center flex justify-center mt-4">Отправить
|
||
сообщение</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. БЛОК ПОДВАЛ (Footer) -->
|
||
<footer class="bg-[#050508] pt-16 pb-8 border-t border-cyber-gray relative overflow-hidden">
|
||
<!-- Неоновая линия -->
|
||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyber-purple via-cyber-blue to-cyber-pink">
|
||
</div>
|
||
|
||
<div
|
||
class="max-w-[1400px] mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8 border-b border-cyber-gray/30 pb-12">
|
||
|
||
<!-- Логотип в футере -->
|
||
<div class="flex items-center gap-4">
|
||
<img src="Images/Logo.jpg" alt="ИКП"
|
||
class="h-16 w-auto object-contain rounded-xl border border-cyber-gray">
|
||
<div>
|
||
<div class="font-display font-black text-2xl text-white tracking-widest uppercase">ИКП</div>
|
||
<div class="text-xs text-cyber-blue font-mono font-bold mt-1">Играй. Киберспорт. Профессионалы.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Дубликат меню -->
|
||
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-sm font-black uppercase text-gray-400">
|
||
<a href="#services" class="hover:text-cyber-blue transition-colors">Услуги</a>
|
||
<a href="#about" class="hover:text-cyber-purple transition-colors">О нас</a>
|
||
<a href="#achievements" class="hover:text-cyber-blue transition-colors">Достижения</a>
|
||
<a href="#vacancies" class="hover:text-cyber-pink transition-colors">Вакансии</a>
|
||
</div>
|
||
|
||
<!-- Соцсети -->
|
||
<div class="flex gap-4">
|
||
<!-- VK -->
|
||
<a href="https://vk.com/ikpro" target="_blank"
|
||
class="w-12 h-12 bg-dark border border-cyber-gray flex items-center justify-center text-gray-400 hover:text-white hover:border-cyber-blue transition-all cyber-card p-0 clip-path-polygon group">
|
||
<span class="font-black group-hover:scale-110 transition-transform">VK</span>
|
||
</a>
|
||
<!-- TG -->
|
||
<a href="https://t.me/ikp_team" target="_blank"
|
||
class="w-12 h-12 bg-dark border border-cyber-gray flex items-center justify-center text-gray-400 hover:text-white hover:border-cyber-purple transition-all cyber-card p-0 clip-path-polygon group">
|
||
<span class="font-black group-hover:scale-110 transition-transform">TG</span>
|
||
</a>
|
||
<!-- VK Video (LIVE) -->
|
||
<a href="https://live.vkvideo.ru/ikp" target="_blank"
|
||
class="w-12 h-12 bg-dark border border-cyber-gray flex items-center justify-center text-gray-400 hover:text-white hover:border-cyber-pink transition-all cyber-card p-0 clip-path-polygon group">
|
||
<span class="font-black text-[10px] group-hover:scale-110 transition-transform">LIVE</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="text-center mt-8 text-xs text-gray-600 font-mono flex flex-col sm:flex-row justify-center items-center gap-4">
|
||
<span>© 2025 ИКП. Все права защищены.</span>
|
||
<span class="hidden sm:inline">|</span>
|
||
<span class="text-gray-700">GL HF</span>
|
||
<!-- Yandex.Metrika informer -->
|
||
<span class="hidden sm:inline">|</span>
|
||
<a href="https://metrika.yandex.ru/stat/?id=109871645&from=informer" target="_blank" rel="nofollow">
|
||
<img src="https://informer.yandex.ru/informer/109871645/3_0_202020FF_000000FF_1_pageviews"
|
||
style="width:88px; height:31px; border:0;"
|
||
alt="Яндекс.Метрика"
|
||
title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)"
|
||
/>
|
||
</a>
|
||
<!-- /Yandex.Metrika informer -->
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Скрипты (Управление меню) -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const burgerBtn = document.getElementById('burger-btn');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');
|
||
|
||
// Открытие/закрытие бургер меню
|
||
burgerBtn.addEventListener('click', () => {
|
||
if (mobileMenu.classList.contains('hidden')) {
|
||
mobileMenu.classList.remove('hidden');
|
||
} else {
|
||
mobileMenu.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// Закрытие меню при клике на ссылку
|
||
mobileLinks.forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileMenu.classList.add('hidden');
|
||
});
|
||
});
|
||
|
||
// Управление каруселью услуг
|
||
const carousel = document.getElementById('services-carousel');
|
||
const prevBtn = document.getElementById('carousel-prev');
|
||
const nextBtn = document.getElementById('carousel-next');
|
||
const servicesProgressBar = document.getElementById('services-progress-bar');
|
||
|
||
if (carousel && prevBtn && nextBtn) {
|
||
prevBtn.addEventListener('click', () => {
|
||
const cardWidth = carousel.firstElementChild.getBoundingClientRect().width + 32; // ширина карточки + gap-8 (32px)
|
||
carousel.scrollBy({ left: -cardWidth, behavior: 'smooth' });
|
||
});
|
||
|
||
nextBtn.addEventListener('click', () => {
|
||
const cardWidth = carousel.firstElementChild.getBoundingClientRect().width + 32; // ширина карточки + gap-8 (32px)
|
||
carousel.scrollBy({ left: cardWidth, behavior: 'smooth' });
|
||
});
|
||
|
||
// Обновление прогресс-бара услуг
|
||
function updateServicesProgress() {
|
||
if (servicesProgressBar) {
|
||
const scrollWidth = carousel.scrollWidth;
|
||
const clientWidth = carousel.clientWidth;
|
||
const scrollLeft = carousel.scrollLeft;
|
||
|
||
if (scrollWidth > 0) {
|
||
const widthPercent = (clientWidth / scrollWidth) * 100;
|
||
const leftPercent = (scrollLeft / scrollWidth) * 100;
|
||
servicesProgressBar.style.width = `${widthPercent}%`;
|
||
servicesProgressBar.style.left = `${leftPercent}%`;
|
||
}
|
||
}
|
||
}
|
||
|
||
carousel.addEventListener('scroll', updateServicesProgress);
|
||
window.addEventListener('resize', updateServicesProgress);
|
||
// Инициализация
|
||
setTimeout(updateServicesProgress, 100);
|
||
window.addEventListener('load', updateServicesProgress);
|
||
}
|
||
|
||
// Управление вертикальной каруселью вакансий
|
||
const vacViewport = document.getElementById('vacancies-carousel-viewport');
|
||
const vacTrack = document.getElementById('vacancies-carousel-track');
|
||
const vacPrevBtn = document.getElementById('vacancies-prev');
|
||
const vacNextBtn = document.getElementById('vacancies-next');
|
||
const vacProgressBar = document.getElementById('vacancies-progress-bar');
|
||
|
||
if (vacViewport && vacTrack && vacPrevBtn && vacNextBtn) {
|
||
const cards = vacTrack.children;
|
||
let vacIndex = 0;
|
||
const gap = 24; // gap-6 (24px)
|
||
|
||
function updateVacanciesCarousel() {
|
||
if (cards.length === 0) return;
|
||
|
||
// Обеспечиваем границы индекса
|
||
const maxIndex = Math.max(0, cards.length - 3);
|
||
if (vacIndex > maxIndex) {
|
||
vacIndex = maxIndex;
|
||
}
|
||
if (vacIndex < 0) {
|
||
vacIndex = 0;
|
||
}
|
||
|
||
// Вычисляем смещение
|
||
const offset = cards[vacIndex].offsetTop - cards[0].offsetTop;
|
||
vacTrack.style.transform = `translateY(-${offset}px)`;
|
||
|
||
// Вычисляем высоту под ровно 3 карточки
|
||
let combinedHeight = 0;
|
||
const end = Math.min(vacIndex + 3, cards.length);
|
||
for (let i = vacIndex; i < end; i++) {
|
||
combinedHeight += cards[i].offsetHeight;
|
||
}
|
||
// Добавляем промежутки gap между карточками
|
||
const visibleCount = end - vacIndex;
|
||
if (visibleCount > 1) {
|
||
combinedHeight += (visibleCount - 1) * gap;
|
||
}
|
||
|
||
vacViewport.style.height = `${combinedHeight}px`;
|
||
|
||
// Обновляем прогресс-бар
|
||
if (vacProgressBar) {
|
||
const total = cards.length;
|
||
if (total > 0) {
|
||
const heightPercent = (visibleCount / total) * 100;
|
||
const topPercent = (vacIndex / total) * 100;
|
||
vacProgressBar.style.height = `${heightPercent}%`;
|
||
vacProgressBar.style.top = `${topPercent}%`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Кнопка Вниз (Следующие вакансии)
|
||
vacNextBtn.addEventListener('click', () => {
|
||
const maxIndex = cards.length - 3;
|
||
if (vacIndex < maxIndex) {
|
||
vacIndex++;
|
||
} else {
|
||
vacIndex = 0; // Зацикливаем в начало
|
||
}
|
||
updateVacanciesCarousel();
|
||
});
|
||
|
||
// Кнопка Вверх (Предыдущие вакансии)
|
||
vacPrevBtn.addEventListener('click', () => {
|
||
if (vacIndex > 0) {
|
||
vacIndex--;
|
||
} else {
|
||
vacIndex = Math.max(0, cards.length - 3); // Зацикливаем в конец
|
||
}
|
||
updateVacanciesCarousel();
|
||
});
|
||
|
||
// Первичная инициализация (ждем полной загрузки, чтобы offsetHeight был верным)
|
||
setTimeout(updateVacanciesCarousel, 100);
|
||
// Повторно при полной загрузке страницы (картинки, стили и т.д.)
|
||
window.addEventListener('load', updateVacanciesCarousel);
|
||
window.addEventListener('resize', updateVacanciesCarousel);
|
||
}
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |