style: add styles and photos

Reviewed-on: #17

assets/images/svg-sprites.svg

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="icon-complex" viewBox="0 0 32 32" fill="none">
+    <path d="M20 28V17.3333C20 16.9797 19.8595 16.6406 19.6095 16.3905C19.3594 16.1405 19.0203 16 18.6667 16H13.3333C12.9797 16 12.6406 16.1405 12.3905 16.3905C12.1405 16.6406 12 16.9797 12 17.3333V28" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4 13.3335C3.99991 12.9455 4.08445 12.5623 4.24772 12.2104C4.41099 11.8585 4.64906 11.5465 4.94533 11.2961L14.2787 3.29745C14.76 2.89067 15.3698 2.66748 16 2.66748C16.6302 2.66748 17.24 2.89067 17.7213 3.29745L27.0547 11.2961C27.3509 11.5465 27.589 11.8585 27.7523 12.2104C27.9156 12.5623 28.0001 12.9455 28 13.3335V25.3335C28 26.0407 27.719 26.719 27.219 27.2191C26.7189 27.7192 26.0406 28.0001 25.3333 28.0001H6.66667C5.95942 28.0001 5.28115 27.7192 4.78105 27.2191C4.28095 26.719 4 26.0407 4 25.3335V13.3335Z" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-restaurant" viewBox="0 0 32 32" fill="none">
+    <path d="M4 2.6665V11.9998C4 13.4665 5.2 14.6665 6.66667 14.6665H12C12.7072 14.6665 13.3855 14.3856 13.8856 13.8855C14.3857 13.3854 14.6667 12.7071 14.6667 11.9998V2.6665" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.33331 2.6665V29.3332" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28 19.9998V2.6665C26.2319 2.6665 24.5362 3.36888 23.2859 4.61913C22.0357 5.86937 21.3333 7.56506 21.3333 9.33317V17.3332C21.3333 18.7998 22.5333 19.9998 24 19.9998H28ZM28 19.9998V29.3332" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-changingrooms" viewBox="0 0 32 32" fill="none">
+    <path d="M20.636 17.1865L22.656 28.5545C22.6787 28.6884 22.6599 28.826 22.6022 28.9489C22.5445 29.0718 22.4507 29.1741 22.3333 29.2423C22.2159 29.3104 22.0804 29.341 21.9451 29.3301C21.8098 29.3192 21.681 29.2673 21.576 29.1812L16.8027 25.5985C16.5723 25.4264 16.2923 25.3334 16.0047 25.3334C15.7171 25.3334 15.4371 25.4264 15.2067 25.5985L10.4254 29.1799C10.3205 29.2658 10.1919 29.3177 10.0567 29.3286C9.92154 29.3395 9.78626 29.309 9.66892 29.241C9.55157 29.1731 9.45774 29.071 9.39993 28.9483C9.34212 28.8256 9.32308 28.6883 9.34537 28.5545L11.364 17.1865" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16 18.6665C20.4183 18.6665 24 15.0848 24 10.6665C24 6.24823 20.4183 2.6665 16 2.6665C11.5817 2.6665 8 6.24823 8 10.6665C8 15.0848 11.5817 18.6665 16 18.6665Z" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-drying" viewBox="0 0 32 32" fill="none">
+    <path d="M13.3333 26.6668L11.6667 23.3335L8 24.0002" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13.3333 5.3335L11.6667 8.66683L8 8.00016" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M18.6666 26.6668L20.3333 23.3335L24 24.0002" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M18.6666 5.3335L20.3333 8.66683L24 8.00016" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M22.6667 28L18.6667 20H13.3334" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M22.6666 4L18.6666 12L20.6666 16" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2.66663 16H11.3333L13.3333 12" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M26.6666 13.3335L24.6666 16.0002L26.6666 18.6668" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M29.3333 16H20.6666L18.6666 20" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.33337 13.3335L7.33337 16.0002L5.33337 18.6668" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.33337 28L13.3334 20L11.3334 16" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.33337 4L13.3334 12H18.6667" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-address" viewBox="0 0 24 24" fill="none">
+    <path d="M20 10C20 14.993 14.461 20.193 12.601 21.799C12.4277 21.9293 12.2168 21.9998 12 21.9998C11.7832 21.9998 11.5723 21.9293 11.399 21.799C9.539 20.193 4 14.993 4 10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-telephone" viewBox="0 0 24 24" fill="none">
+    <path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-email" viewBox="0 0 24 24" fill="none">
+    <path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-time" viewBox="0 0 24 24" fill="none">
+    <circle cx="12" cy="12" r="9" stroke="#CF1717" stroke-width="2"/>
+    <path d="M12 7V12L15 14" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-whatsapp" viewBox="0 0 24 24" fill="none">
+    <path d="M20.521 3.479A11.91 11.91 0 0012.037 0C5.488 0 .137 5.35.137 11.9c0 2.096.548 4.141 1.588 5.946L0 24l6.307-1.66a11.844 11.844 0 005.73 1.46h.005c6.549 0 11.9-5.35 11.9-11.9a11.833 11.833 0 00-3.421-8.421zm-8.484 18.31h-.004a9.86 9.86 0 01-5.018-1.371l-.36-.213-3.742.984.998-3.646-.234-.374a9.88 9.88 0 01-1.51-5.27c.002-5.457 4.442-9.896 9.904-9.896a9.83 9.83 0 017.01 2.903 9.833 9.833 0 012.89 6.997c-.003 5.458-4.443 9.886-9.934 9.886z" fill="currentColor"/>
+    <path d="M17.457 14.572c-.298-.15-1.764-.87-2.037-.968-.273-.1-.472-.15-.67.15-.198.298-.768.968-.943 1.166-.174.2-.347.224-.645.075-.298-.149-1.257-.463-2.395-1.477-.885-.788-1.483-1.762-1.657-2.06-.174-.299-.019-.46.131-.61.135-.134.298-.348.447-.521.15-.174.199-.299.299-.498.099-.199.05-.373-.025-.523-.075-.149-.67-1.614-.918-2.211-.241-.58-.486-.502-.67-.511-.174-.008-.372-.01-.57-.01a1.097 1.097 0 00-.794.373c-.273.298-1.042 1.017-1.042 2.48 0 1.465 1.067 2.88 1.216 3.078.149.199 2.103 3.213 5.095 4.505.712.307 1.266.49 1.699.627.713.227 1.362.195 1.875.118.572-.085 1.764-.72 2.013-1.414.248-.695.248-1.29.173-1.414-.074-.125-.273-.2-.57-.349z" fill="currentColor"/>
+  </symbol>
+
+  <symbol id="icon-telegram" viewBox="0 0 24 24" fill="none">
+    <path d="M9.347 14.695l-.394 5.54c.564 0 .808-.242 1.101-.533l2.64-2.52 5.472 4.005c1.004.558 1.712.264 1.983-.924L23.74 3.35c.355-1.453-.525-2.022-1.503-1.658L1.09 9.84c-1.443.563-1.421 1.367-.246 1.73l5.406 1.686L18.806 5.4c.591-.39 1.13-.174.687.217l-10.146 9.078z" fill="currentColor"/>
+  </symbol>
+
+  <symbol id="icon-route" viewBox="0 0 24 24" fill="none">
+    <path d="M6.5 4.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm0 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm11-5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" stroke="currentColor" stroke-width="1.8"/>
+    <path d="M8.8 7h5.1c1.2 0 2.1 1 2.1 2.1v.2M15.9 12.9v.2c0 1.2-1 2.1-2.1 2.1H8.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </symbol>
+
+  <symbol id="icon-map" viewBox="0 0 24 24" fill="none">
+    <path d="M8 3.5l8-2v19l-8 2-6-1.5v-19L8 3.5zm0 0v19m8-21l6 1.5v19L16 20.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
+  </symbol>
+
+  <symbol id="icon-instagram" viewBox="0 0 24 24" fill="none">
+    <rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/>
+    <circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
+    <circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
+  </symbol>
+
+  <symbol id="icon-vk" viewBox="0 0 24 24" fill="none">
+    <path d="M3.8 7.5c.1-.4.4-.6.8-.6h2.2c.3 0 .6.2.7.5.8 2.1 1.8 3.9 2.6 4.8.3.3.5.4.7.4.1 0 .2-.1.2-.4V7.8c0-.5.4-.9.9-.9h2c.5 0 .9.4.9.9v2.4c0 .8.3 1.1.6 1.1.2 0 .4-.1.7-.4.8-.9 1.7-2.6 2.5-4.6.1-.3.4-.5.7-.5h2.2c.6 0 1 .6.8 1.2-.6 1.7-1.5 3.3-2.4 4.4-.3.4-.4.7 0 1.2.9 1 1.8 1.9 2.5 3.2.3.6-.1 1.3-.8 1.3h-2.4c-.3 0-.5-.1-.7-.4-.5-.7-1.1-1.4-1.8-2-.2-.1-.3-.2-.5-.2-.2 0-.4.2-.4.5v1.2c0 .5-.4.9-.9.9h-1.3c-1.2 0-2.4-.4-3.6-1.4-1.7-1.4-3.1-3.7-4-6.4 0-.1 0-.3 0-.4z" fill="currentColor"/>
+  </symbol>
+</svg>

assets/js/main.js

@@ -0,0 +1,340 @@
+(() => {
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const selectors = [
+        ".section__head",
+        ".info-card",
+        ".feature-card",
+        ".object-card",
+        ".service-card",
+        ".gallery__item",
+        ".review-card",
+        ".stats article",
+        ".booking__form",
+        ".contacts-card",
+        ".hours-card",
+    ];
+
+    const elements = Array.from(document.querySelectorAll(selectors.join(",")));
+    if (!elements.length) return;
+
+    const siblingCounters = new WeakMap();
+
+    elements.forEach((element) => {
+        element.classList.add("scroll-reveal");
+        const parent = element.parentElement;
+        let offsetIndex = 0;
+
+        if (parent) {
+            offsetIndex = siblingCounters.get(parent) ?? 0;
+            siblingCounters.set(parent, offsetIndex + 1);
+        }
+
+        element.style.setProperty("--reveal-delay", `${(offsetIndex % 4) * 80}ms`);
+    });
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+        elements.forEach((element) => element.classList.add("is-visible"));
+        return;
+    }
+
+    const observer = new IntersectionObserver(
+        (entries, currentObserver) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) return;
+                entry.target.classList.add("is-visible");
+                currentObserver.unobserve(entry.target);
+            });
+        },
+        {
+            threshold: 0.18,
+            rootMargin: "0px 0px -12% 0px"
+        }
+    );
+
+    elements.forEach((element) => observer.observe(element));
+})();
+
+(() => {
+    const counters = Array.from(document.querySelectorAll(".js-counter"));
+    if (!counters.length) return;
+
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const formatCounter = (counter, value) => {
+        const suffix = counter.dataset.suffix || "";
+        counter.textContent = `${value}${suffix}`;
+    };
+
+    const setFinalValue = (counter) => {
+        const target = Number(counter.dataset.target || 0);
+        formatCounter(counter, Number.isFinite(target) ? target : 0);
+    };
+
+    const animateCounter = (counter) => {
+        const target = Number(counter.dataset.target || 0);
+        const duration = Number(counter.dataset.duration || 1300);
+
+        if (!Number.isFinite(target) || target <= 0) {
+            setFinalValue(counter);
+            return;
+        }
+
+        let startTime = null;
+
+        const tick = (timestamp) => {
+            if (startTime === null) startTime = timestamp;
+
+            const progress = Math.min((timestamp - startTime) / duration, 1);
+            const currentValue = Math.floor(progress * target);
+            formatCounter(counter, currentValue);
+
+            if (progress < 1) {
+                window.requestAnimationFrame(tick);
+                return;
+            }
+
+            setFinalValue(counter);
+        };
+
+        window.requestAnimationFrame(tick);
+    };
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+        counters.forEach(setFinalValue);
+        return;
+    }
+
+    const observer = new IntersectionObserver(
+        (entries, currentObserver) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) return;
+                animateCounter(entry.target);
+                currentObserver.unobserve(entry.target);
+            });
+        },
+        { threshold: 0.45 }
+    );
+
+    counters.forEach((counter) => {
+        formatCounter(counter, 0);
+        observer.observe(counter);
+    });
+})();
+
+(() => {
+    const slider = document.querySelector("[data-reviews-slider]");
+    if (!slider) return;
+
+    const viewport = slider.querySelector("[data-reviews-viewport]");
+    const track = slider.querySelector("[data-reviews-track]");
+    const prevButton = slider.querySelector("[data-reviews-prev]");
+    const nextButton = slider.querySelector("[data-reviews-next]");
+    const dotsContainer = document.querySelector("[data-reviews-dots]");
+    const cards = Array.from(track?.querySelectorAll(".review-card") ?? []);
+
+    if (!viewport || !track || !prevButton || !nextButton || !dotsContainer || cards.length < 2) return;
+
+    let currentIndex = 0;
+    let touchStartX = 0;
+
+    const readVisibleSlides = () => {
+        const visibleValue = Number.parseInt(getComputedStyle(slider).getPropertyValue("--reviews-visible"), 10);
+        return Number.isFinite(visibleValue) && visibleValue > 0 ? visibleValue : 1;
+    };
+
+    const readTrackGap = () => {
+        const styles = getComputedStyle(track);
+        const gapValue = styles.gap || styles.columnGap || "0";
+        const parsedGap = Number.parseFloat(gapValue);
+        return Number.isFinite(parsedGap) ? parsedGap : 0;
+    };
+
+    const maxIndex = () => Math.max(0, cards.length - readVisibleSlides());
+
+    const renderDots = () => {
+        const total = maxIndex() + 1;
+        dotsContainer.innerHTML = "";
+
+        for (let index = 0; index < total; index += 1) {
+            const dot = document.createElement("button");
+            dot.type = "button";
+            dot.className = "reviews__dot";
+            dot.setAttribute("aria-label", `Показать отзыв ${index + 1}`);
+            dot.addEventListener("click", () => {
+                currentIndex = index;
+                update();
+            });
+            dotsContainer.appendChild(dot);
+        }
+    };
+
+    const update = () => {
+        const max = maxIndex();
+        currentIndex = Math.min(Math.max(currentIndex, 0), max);
+
+        const cardWidth = cards[0].getBoundingClientRect().width;
+        const offset = (cardWidth + readTrackGap()) * currentIndex;
+        track.style.transform = `translateX(${-offset}px)`;
+
+        prevButton.disabled = currentIndex === 0;
+        nextButton.disabled = currentIndex === max;
+
+        const dots = Array.from(dotsContainer.querySelectorAll(".reviews__dot"));
+        dots.forEach((dot, index) => {
+            dot.classList.toggle("is-active", index === currentIndex);
+            dot.setAttribute("aria-current", index === currentIndex ? "true" : "false");
+        });
+    };
+
+    prevButton.addEventListener("click", () => {
+        currentIndex -= 1;
+        update();
+    });
+
+    nextButton.addEventListener("click", () => {
+        currentIndex += 1;
+        update();
+    });
+
+    viewport.addEventListener("touchstart", (event) => {
+        touchStartX = event.changedTouches[0].clientX;
+    }, { passive: true });
+
+    viewport.addEventListener("touchend", (event) => {
+        const deltaX = event.changedTouches[0].clientX - touchStartX;
+        const threshold = 48;
+
+        if (deltaX > threshold) {
+            currentIndex -= 1;
+            update();
+            return;
+        }
+
+        if (deltaX < -threshold) {
+            currentIndex += 1;
+            update();
+        }
+    }, { passive: true });
+
+    const handleResize = () => {
+        renderDots();
+        update();
+    };
+
+    let resizeRaf = null;
+    window.addEventListener("resize", () => {
+        if (resizeRaf) return;
+        resizeRaf = window.requestAnimationFrame(() => {
+            resizeRaf = null;
+            handleResize();
+        });
+    });
+
+    renderDots();
+    update();
+})();
+
+(() => {
+    const bookingForm = document.getElementById("booking-form");
+    const successModal = document.getElementById("booking-success-modal");
+
+    if (!bookingForm || !successModal) return;
+
+    const closeTriggers = Array.from(successModal.querySelectorAll("[data-modal-close]"));
+
+    const openModal = () => {
+        successModal.classList.add("is-open");
+        successModal.setAttribute("aria-hidden", "false");
+    };
+
+    const closeModal = () => {
+        successModal.classList.remove("is-open");
+        successModal.setAttribute("aria-hidden", "true");
+    };
+
+    const triggerAnalytics = () => {
+        const eventName = "заявка";
+
+        const metrikaIdRaw = bookingForm.dataset.metrikaId || document.body.dataset.metrikaId || window.YANDEX_METRIKA_ID;
+        const metrikaId = Number(metrikaIdRaw);
+
+        if (typeof window.ym === "function" && Number.isFinite(metrikaId) && metrikaId > 0) {
+            window.ym(metrikaId, "reachGoal", eventName);
+        }
+
+        const legacyCounterKey = Object.keys(window).find((key) => {
+            return key.startsWith("yaCounter") && typeof window[key]?.reachGoal === "function";
+        });
+
+        if (legacyCounterKey) {
+            window[legacyCounterKey].reachGoal(eventName);
+        }
+
+        if (typeof window.gtag === "function") {
+            window.gtag("event", eventName, {
+                event_category: "lead",
+                event_label: "booking_form"
+            });
+        }
+
+        if (Array.isArray(window.dataLayer)) {
+            window.dataLayer.push({
+                event: eventName,
+                event_category: "lead",
+                event_label: "booking_form"
+            });
+        }
+    };
+
+    const triggerAutoReply = async (email) => {
+        if (!email) return;
+
+        const autoReplyEndpoint = bookingForm.dataset.autoreplyEndpoint || window.BOOKING_AUTOREPLY_ENDPOINT;
+        if (!autoReplyEndpoint) return;
+
+        try {
+            await fetch(autoReplyEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    email,
+                    source: "booking-form"
+                })
+            });
+        } catch (error) {
+            // Auto-reply is optional and should not block form success.
+            console.error("Auto-reply request failed", error);
+        }
+    };
+
+    bookingForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        if (!bookingForm.checkValidity()) {
+            bookingForm.reportValidity();
+            return;
+        }
+
+        const formData = new FormData(bookingForm);
+        const email = String(formData.get("email") || "").trim();
+
+        triggerAnalytics();
+        await triggerAutoReply(email);
+
+        bookingForm.reset();
+        openModal();
+    });
+
+    closeTriggers.forEach((trigger) => {
+        trigger.addEventListener("click", closeModal);
+    });
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && successModal.classList.contains("is-open")) {
+            closeModal();
+        }
+    });
+})();

assets/scss/_fonts.scss

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
+
+:root {
+    color-scheme: dark;
+}

assets/scss/_mixin.scss

@@ -0,0 +1,17 @@
+@use "vars" as *;
+
+@mixin container{
+    width: 100%;
+    max-width: $container;
+    margin: 0 auto;
+
+    @media only screen and (max-width: 1400px){
+        padding: 0 20px;
+    }
+}
+
+@mixin image{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

assets/scss/_mixins.scss

@@ -0,0 +1,20 @@
+@use "vars" as *;
+
+@mixin container {
+    width: 100%;
+    max-width: $container;
+    margin: 0 auto;
+}
+
+@mixin card {
+    background: rgba(18, 18, 18, 0.4);
+    border: 1px solid $color-border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-card;
+}
+
+@mixin respond($breakpoint) {
+    @media only screen and (max-width: $breakpoint) {
+        @content;
+    }
+}

assets/scss/_reset.scss

@@ -0,0 +1,47 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body { line-height: 1; }
+
+ol, ul { list-style: none; }
+
+blockquote, q { quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

assets/scss/_vars.scss

@@ -0,0 +1,28 @@
+$container: 1400px;
+$container-padding: 24px;
+
+$bp-xxl: 1600px;
+$bp-xl: 1280px;
+$bp-lg: 1024px;
+$bp-md: 768px;
+$bp-sm: 520px;
+
+$font-main: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
+$font-heading: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
+
+$color-bg: #121212;
+$color-surface: #293133;
+$color-surface-2: #20272a;
+$color-border: rgba(255, 255, 255, 0.1);
+$color-border-strong: rgba(207, 23, 23, 0.3);
+$color-text: #ffffff;
+$color-text-muted: rgba(255, 255, 255, 0.7);
+$color-text-soft: rgba(255, 255, 255, 0.8);
+$color-accent: #cf1717;
+
+$radius-sm: 14px;
+$radius-md: 16px;
+$radius-lg: 20px;
+
+$shadow-accent: 0 25px 50px rgba(231, 0, 11, 0.5);
+$shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);

assets/scss/main.scss

@@ -0,0 +1,5 @@
+@use "reset";
+@use "fonts";
+@use "vars" as *;
+@use "mixins" as *;
+@use "base";

index.html

@@ -1,11 +1,638 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
-<head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OlimpArena</title>
+        <title>OlimpArena</title>
-</head>
+        <link rel="stylesheet" href="./assets/css/main.min.css">
-<body>
+    </head>
-    <h1>OlimpArena IN DEV</h1>
+    <body>
-</body>
+        <div class="site">
-</html>
+            <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>
+                            Два ледовых поля 58×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/renders/led.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/renders/basket.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/renders/photo_olimp_sport4.jpg');"></div>
+                            <div class="object-card__content">
+                                <h3>Фитнес-центр</h3>
+                                <p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p>
+                                <a class="btn btn--small" href="#booking">Подробнее</a>
+                            </div>
+                        </article>
+
+                        <article class="object-card object-card--reverse" style="display:none;">
+                            <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/renders/no_photo.png');"></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/renders/photo_olimp_rest7.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/renders/no_photo.png');"></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>
+                        </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/renders/basket.jpg');"></div>
+                            <div class="gallery__item" style="background-image:url('./assets/images/renders/led.jpg');"></div>
+                            <div class="gallery__item" style="background-image:url('./assets/images/renders/ledadnbasket.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/renders/photo_olimp_rest1.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest2.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest3.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest4.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest5.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport1.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport2.jpg');"></div>
+							<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport3.jpg');"></div>
+
+                        </div>
+                    </div>
+                </section>
+
+                <section class="section reviews" id="reviews">
+                    <div class="container">
+                        <header class="section__head">
+                            <h2>Отзывы</h2>
+                            <p>Что говорят клиенты о тренировках и сборах в OlimpArena</p>
+                        </header>
+                        <div class="reviews__slider" data-reviews-slider>
+                            <button class="reviews__nav reviews__nav--prev" type="button" data-reviews-prev aria-label="Предыдущий отзыв">←</button>
+                            <div class="reviews__viewport" data-reviews-viewport>
+                                <div class="reviews__track" data-reviews-track>
+                                    <article class="review-card">
+                                        <p>Ледовая арена премиум-уровня с отличной локацией. Удобные раздевалки и отличный лед. Профессиональный и приветливый персонал. Лучшая арена для тренировок и соревнований</p>
+                                        <div class="review-card__meta">
+                                            <strong>Владимир Л.</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=1zaqed8uewrx0zdfqr75d3n8zm&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Отличная локация, вежливый персонал, прекрасные ледовые арены, хорошо обустроенные раздевалки. Дизайнерское решение соответствует направлению. Всё очень круто!!! Обязательно посетите данное место!</p>
+                                        <div class="review-card__meta">
+                                            <strong>Закопайло С.</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=9g4uxhfhd4cqbjdjec0unkqzug&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Отличная локация, отличный лед и его постоянно обновляют, очень вежливый персонал, очень приятно находиться в помещении. Очень современные место. Хорошее впечатление</p>
+                                        <div class="review-card__meta">
+                                            <strong>Ольга Р.</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=vpdm0u6jzp7dcwndttf7z9akv4&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Побывала на экскурсии по своему направлению деятельности, понравилось все: инфраструктура комплекса, дизайн, персонал, все на высшем уровне 👍</p>
+                                        <div class="review-card__meta">
+                                            <strong>Елена Ильина</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=fwfzfd88e6uq59qa8h6pv84ve0&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Нам очень понравилась арена! Высокий уровень-комфорт, красота, расположение, персонал. Очень понравилось качество льда. Спасибо</p>
+                                        <div class="review-card__meta">
+                                            <strong>Руслан Я.</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=81a1u705vn3kd0kmhdkc7qh02c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Полноценное футбольное поле под крышей! Чего ещё желать? Таких объектов в Москве по пальцам одной руки можно пересчитать. И самое главное на территории легендарная футбольная школа...</p>
+                                        <div class="review-card__meta">
+                                            <strong>Andrey Kuleshov</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=k1eyc820uqf5wua1ypqua8zyww&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Отличный лед. Приветливый персонал. Очень красиво внутри. Просторные раздевалки.</p>
+                                        <div class="review-card__meta">
+                                            <strong>Сергей рылов</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=nah55c29h52e3fxw0bfuk2he1c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Хороший персонал, хорошие место, хороший пк клуб. Всем советую, хороший пк клуб</p>
+                                        <div class="review-card__meta">
+                                            <strong>Иван Курцев</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=af38gg3nfbrz1cnfr94peuv6zc&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Выглядит очень здорово. Будете в восторге от места, где найдется всем место для комфортного катания и ожидания.Отличный лед</p>
+                                        <div class="review-card__meta">
+                                            <strong>Оксана Викторовна завхоз</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=rtr4medjwd3hev3138by8nw17c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Отличное место для занятия спортом, очень понравилось😊 рекомендую👍</p>
+                                        <div class="review-card__meta">
+                                            <strong>Serega</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=5tctvtm88tq564tc117493nqq4&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                    <article class="review-card">
+                                        <p>Отличная арена 🏒</p>
+                                        <div class="review-card__meta">
+                                            <strong>Андрей Иванов</strong>
+                                            <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=heccmk2e26d2bcpqtgdccq47bg&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
+                                        </div>
+                                    </article>
+                                </div>
+                            </div>
+                            <button class="reviews__nav reviews__nav--next" type="button" data-reviews-next aria-label="Следующий отзыв">→</button>
+                        </div>
+                        <div class="reviews__dots" data-reviews-dots></div>
+                    </div>
+                </section>
+
+                <section class="section facts" id="facts" style="display:none;">
+                    <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к5</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 style="margin-bottom:5px;" href="tel:+79251404737">+7 (925) 140-47-37</a><br>
+                                            <a href="tel:+79251404764">+7 (925) 140-47-64</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><br>
+                            <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>

package.json

@@ -0,0 +1,26 @@
+{
+    "name": "olymparena",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "scss:build": "sass assets/scss/main.scss assets/css/main.css --no-source-map",
+        "css:minify": "postcss assets/css/main.css -o assets/css/main.min.css",
+        "css:build": "npm-run-all scss:build css:minify",
+        "scss:watch": "sass --watch assets/scss:assets/css --no-source-map",
+        "css:watch": "postcss assets/css/main.css -o assets/css/main.min.css --watch",
+        "dev": "npm-run-all --parallel scss:watch css:watch"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "type": "commonjs",
+    "devDependencies": {
+        "autoprefixer": "^10.4.27",
+        "cssnano": "^7.1.2",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.5.6",
+        "postcss-cli": "^11.0.1",
+        "sass": "^1.97.3"
+    }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+    require('cssnano')({ preset: 'default' })
+  ]
+};