Files
olimparena/index.html
2026-05-22 15:06:58 +03:00

540 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OlimpArena</title>
<link rel="stylesheet" href="./assets/css/main.min.css">
</head>
<body>
<div class="site">
<header class="header" id="top">
<div class="container header__inner">
<a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena">
</a>
<nav class="header__nav" aria-label="Основная навигация">
<a href="#objects">Объекты</a>
<a href="#services">Услуги</a>
<a href="#pricing">Стоимость</a>
<a href="#gallery">Галерея</a>
<a href="#contacts">Контакты</a>
</nav>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</header>
<main>
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__content">
<h1>
Спорткомплекс полного цикла в <span>Москве:</span>
лёд, залы, проживание и питание на одной территории
</h1>
<p>
Два ледовых поля 56×26 м, универсальный зал, фитнес-центр и
апарт-отель на 70+ номеров. В пределах ТТК.
</p>
<ul class="hero__tags">
<li>2 ледовых поля 58×26 м</li>
<li>Универсальный зал, фитнес центр, и зал хореографии</li>
<li>Проживание и питание на территории</li>
</ul>
<div class="hero__actions">
<a class="btn" href="#booking">Забронировать площадку</a>
<a class="btn btn--ghost" href="#">Узнать расписание</a>
</div>
</div>
</section>
<section class="highlights">
<div class="container highlights__grid">
<article class="info-card">
<h3>Всё в одном месте</h3>
<p>Лёд, спортзалы, фитнес, проживание и питание — 5 минут от метро Волгоградский проспект, удобный заезд на автомобиле, собственная парковка для гостей комплекса</p>
</article>
<article class="info-card">
<h3>Удобная логистика</h3>
<p>15 минут пешком от метро, удобный заезд на автомобиле, бесплатная парковка для гостей и команд.</p>
</article>
<article class="info-card">
<h3>Комфорт для команд</h3>
<p>9 раздевалок, судейские помещения, ресторан, апарт-отель — всё для тренировок, сборов и турниров любого масштаба.</p>
</article>
<article class="info-card">
<h3>Готовы к соревнованиям</h3>
<p>Стандартные размеры площадок, профессиональное оборудование, опыт проведения турниров.</p>
</article>
</div>
</section>
<section class="section section--pattern objects" id="objects">
<div class="container">
<header class="section__head">
<h2>Наши объекты</h2>
<p>Профессиональная инфраструктура для ваших целей</p>
</header>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/ledovie.jpg');"></div>
<div class="object-card__content">
<h3>Два ледовых поля</h3>
<p>Стандарт 58×26 м. Тренировки, сборы, соревнования.</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="object-card__content">
<h3>Универсальный зал</h3>
<p>Зал для игровых видов спорта, паркетное покрытие.</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__content">
<h3>Фитнес-центр</h3>
<p>Оборудован зеркалами и станками для занятий хореографией.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/1231.png');"></div>
<div class="object-card__content">
<h3>Зал хореографии</h3>
<p>Зеркала, станки. Танцы, групповые программы, ОФП.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__content">
<h3>Апарт-отель</h3>
<p>70+ номеров для команд и гостей. Прямо на территории.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="object-card__content">
<h3>Ресторан</h3>
<p>Сбалансированное спортивное питание. Меню для команд.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="object-card__content">
<h3>Парковка и подъезд</h3>
<p>Своя парковка для гостей и автобусов команд.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
</div>
</section>
<section class="section infrastructure" id="infrastructure">
<div class="container">
<header class="section__head">
<h2>Инфраструктура</h2>
<p>Всё для комфорта спортсменов</p>
</header>
<div class="infrastructure__grid">
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-complex"></use>
</svg>
</div>
<h3>Апарт-отель</h3>
<p>70+ номеров на территории.</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-restaurant"></use>
</svg>
</div>
<h3>Ресторан</h3>
<p>Сбалансированное питание для спортсменов. Меню под запрос команды (диета, время приёмов, специализированное питание).</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-changingrooms"></use>
</svg>
</div>
<h3>9 раздевалок</h3>
<p>Душевые, индивидуальные шкафчики, скамейки, всё необходимое для команд и посетителей.</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-drying"></use>
</svg>
</div>
<h3>Судейские помещения</h3>
<p>Отдельные комнаты для судей, организаторов и пресс-зоны при проведении соревнований.</p>
</article>
</div>
</div>
</section>
<section class="section services" id="services">
<div class="container">
<header class="section__head">
<h2>Услуги</h2>
<p>Широкий спектр возможностей для вашего спорта</p>
</header>
<div class="services__grid">
<a class="service-card" href="#booking">
<span class="service-card__title">Аренда льда</span>
<span class="service-card__description">Почасовая аренда. Подберем удобные слоты для тренировок и матчей.</span>
</a>
<a class="service-card" href="#booking">
<span class="service-card__title">Аренда залов</span>
<span class="service-card__description">Полноценная инфраструктура для проведения тренировочного процесса и организации мероприятий.</span>
</a>
<a class="service-card" href="#booking">
<span class="service-card__title">Сборы команд под ключ</span>
<span class="service-card__description">Лёд, зал, проживание и питание в одном комплексе без лишней логистики.</span>
</a>
<a class="service-card" href="#booking">
<span class="service-card__title">Корпоративные мероприятия</span>
<span class="service-card__description">Спортивные тимбилдинги, активные форматы и сопровождение программы под задачи компании.</span>
</a>
<a class="service-card" href="#booking">
<span class="service-card__title">Фитнес</span>
<span class="service-card__description">Индивидуальные тренировки, абонементы и групповые занятия с гибким расписанием.</span>
</a>
</div>
<div class="services__cta">
<a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a>
</div>
</div>
</section>
<section class="section pricing" id="pricing">
<div class="container">
<header class="section__head">
<h2>Стоимость</h2>
</header>
<div class="pricing__list">
<article class="pricing-item">
<h3>Аренда льда</h3>
<p>от 25.000₽/час</p>
</article>
<article class="pricing-item">
<h3>Аренда универсального зала</h3>
<p>от 7.000₽/час</p>
</article>
<article class="pricing-item">
<h3>Фитнес центр</h3>
<p>от 3.000₽/месяц</p>
</article>
</div>
<p class="pricing__note">Точная стоимость зависит от времени, длительности и пакета услуг. Оставьте заявку — пришлём расчёт за 30 минут.</p>
<div class="pricing__cta">
<a class="btn pricing__cta-btn" href="#booking">Получить расчёт</a>
</div>
</div>
</section>
<section class="section gallery" id="gallery">
<div class="container">
<header class="section__head">
<h2>Галерея</h2>
<p>Пространства OlimpArena в деталях</p>
</header>
<div class="gallery__grid">
<div class="gallery__item" style="background-image:url('./assets/images/other/1231.png');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/ledovie.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
</div>
</div>
</section>
<section class="section facts" id="facts">
<div class="container">
<header class="section__head">
<h2>Цифры о комплексе</h2>
<p>Ключевые показатели инфраструктуры OlimpArena</p>
</header>
<div class="stats stats--facts">
<article class="stats__item">
<strong class="js-counter" data-target="70" data-suffix="+">0</strong>
<span>аппартов</span>
</article>
<article class="stats__item">
<strong class="js-counter" data-target="2">0</strong>
<span>профессиональных ледовых поля</span>
</article>
<article class="stats__item">
<strong class="js-counter" data-target="9">0</strong>
<span>оборудованных раздевалок</span>
</article>
</div>
</div>
</section>
<section class="section booking" id="booking">
<div class="container booking__wrap">
<div class="booking__form">
<h2>Оставьте заявку — подберём площадку и время</h2>
<p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p>
<form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint="">
<div class="booking__field">
<label for="booking-name">Имя <span class="required-mark">*</span></label>
<input id="booking-name" type="text" name="name" autocomplete="name" placeholder="Введите имя" required>
</div>
<div class="booking__field">
<label for="booking-phone">Телефон <span class="required-mark">*</span></label>
<input id="booking-phone" type="tel" name="phone" autocomplete="tel" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="booking__field">
<label for="booking-email">E-mail (для расчёта)</label>
<input id="booking-email" type="email" name="email" autocomplete="email" placeholder="example@mail.ru">
</div>
<div class="booking__field">
<label for="booking-interest">Что интересует <span class="required-mark">*</span></label>
<select id="booking-interest" name="interest" required>
<option value="" selected disabled>Выберите вариант</option>
<option value="Лёд">Лёд</option>
<option value="Универсальный зал">Универсальный зал</option>
<option value="Зал единоборств">Зал единоборств</option>
<option value="Зал хореографии">Зал хореографии</option>
<option value="Фитнес">Фитнес</option>
<option value="Сборы команды">Сборы команды</option>
<option value="Турнир">Турнир</option>
<option value="Корпоратив">Корпоратив</option>
<option value="Другое">Другое</option>
</select>
</div>
<div class="booking__field">
<label for="booking-date">Удобная дата</label>
<input id="booking-date" type="date" name="date">
</div>
<div class="booking__field">
<label for="booking-comment">Комментарий</label>
<textarea id="booking-comment" name="comment" placeholder="Кратко опишите запрос"></textarea>
</div>
<label class="booking__consent" for="booking-consent">
<input id="booking-consent" type="checkbox" name="consent" required>
<span>Я согласен(а) с <a href="#" target="_blank" rel="noopener noreferrer">политикой обработки ПДн</a> <span class="required-mark">*</span></span>
</label>
<button class="btn booking__submit" type="submit">Отправить заявку</button>
</form>
</div>
<div class="booking__contacts" id="contacts">
<div class="contacts-card">
<h3>Контакты</h3>
<ul>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-address"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Адрес</strong>
<span>Москва, Автомобильный проезд, 4</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-time"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Режим работы</strong>
<span>Ежедневно с 06:00 до 23:00</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telephone"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Телефон</strong>
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-email"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Email</strong>
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
</div>
</li>
</ul>
<div class="contacts-card__links">
<a class="contacts-card__messenger" href="https://wa.me/74951234567?text=%D0%94%D0%BE%D0%B1%D1%80%D1%8B%D0%B9%20%D0%B4%D0%B5%D0%BD%D1%8C%2C%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%B1%D1%80%D0%BE%D0%BD%D1%8C%20%D0%B2%20OlimpArena." target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a class="contacts-card__messenger contacts-card__messenger--secondary" href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div>
<div class="contacts-card__links contacts-card__links--social">
<a href="#" aria-label="ВКонтакте">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg>
</span>
</a>
<a href="#" aria-label="Instagram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="hours-card map-card">
<h4>Карта и маршрут</h4>
<div class="map-card__embed">
<iframe title="OlimpArena на Яндекс Картах" src="https://yandex.ru/map-widget/v1/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&z=16" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="map-card__actions">
<a class="btn btn--small map-card__route" href="https://yandex.ru/maps/?rtext=~%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&rtt=auto" target="_blank" rel="noopener noreferrer" aria-label="Построить маршрут">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-route"></use>
</svg>
</span>
</a>
<a href="https://yandex.ru/maps/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204" target="_blank" rel="noopener noreferrer" aria-label="Открыть в Яндекс Картах">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-map"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="booking-modal" id="booking-success-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="booking-success-title">
<button class="booking-modal__overlay" type="button" data-modal-close aria-label="Закрыть окно"></button>
<div class="booking-modal__content">
<button class="booking-modal__close" type="button" data-modal-close aria-label="Закрыть окно">×</button>
<div class="booking-modal__status" aria-hidden="true"></div>
<h2 class="booking-modal__title" id="booking-success-title">Заявка отправлена</h2>
<p class="booking-modal__text">Перезвоним в течение 15 минут.</p>
<div class="booking-modal__actions">
<button class="btn booking-modal__btn" type="button" data-modal-close>Понятно</button>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer__top">
<div class="footer__brand">
<a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena">
</a>
<p>OlimpArena — спорткомплекс полного цикла: ледовые арены, залы, проживание и питание на одной территории.</p>
</div>
<nav class="footer__nav" aria-label="Навигация в футере">
<h4>Объекты</h4>
<a href="#objects">Объекты</a>
<a href="#infrastructure">Инфраструктура</a>
<a href="#gallery">Галерея</a>
<a href="#facts">Цифры о комплексе</a>
</nav>
<nav class="footer__nav" aria-label="Услуги в футере">
<h4>Услуги</h4>
<a href="#services">Форматы аренды и мероприятий</a>
<a href="#pricing">Стоимость</a>
<a href="#booking">Оставить заявку</a>
</nav>
<div class="footer__contacts">
<h4>Контакты и режим работы</h4>
<a href="tel:+79251404737">+7 (925) 140-47-37</a>
<a href="tel:+79251404764">+7 (925) 140-47-64</a>
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
<span>Москва, Автомобильный проезд, 4</span>
<span>Ежедневно с 06:00 до 23:00</span>
<div class="footer__messengers">
<a href="https://wa.me/74951234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div>
<div class="footer__socials">
<a href="#" aria-label="Instagram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
</svg>
</span>
</a>
<a href="#" aria-label="ВКонтакте">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span>© 2026 ООО «ОлимпАрена»</span>
<div class="footer__legal">
<a href="#">Политика конфиденциальности</a>
<a href="#">Договор оферты</a>
<span>ИНН 7700000000 · ОГРН 1207700000000</span>
</div>
</div>
</div>
</footer>
</div>
<script src="./assets/js/main.js" defer></script>
</body>
</html>