polished template

2025-06-19 14:18:56 +03:00
parent f8688ae00b
commit a6bb81cbe1
13 changed files with 677 additions and 259 deletions
--- a/template-parts/la-components/blocks/hero-block/hero-block.css
+++ b/template-parts/la-components/blocks/hero-block/hero-block.css
@@ -1,26 +1,34 @@
-.inverted-radius-wrapper:before {
-    content: '';
-    display: block;
-    width: 40px;
-    height: 25px;
-    background-color: transparent;
-    border-radius: 0 0 0 25px;
-    box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
-    position: absolute;
-    z-index: -1;
-    left: -1px;
-    bottom: 100%;
+
+.pagination-item[data-active="true"] {
+    flex: 2;
 }
-.inverted-radius-wrapper:after {
-    content: '';
-    display: block;
-    width: 40px;
-    height: 25px;
-    background-color: transparent;
-    border-radius: 0 0 0 25px;
-    box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
-    position: absolute;
-    z-index: -1;
-    left: calc(100% - 1px);
-    bottom: 0;
+
+.pagination-item[data-active="false"] .pagination-line {
+    background: #e0e0e0;
+}
+.pagination-item[data-active="true"] .pagination-line {
+    background: #222;
+}
+
+.dark .pagination-item[data-active="false"] .pagination-line {
+    background: rgba(248, 248, 248, 0.15);
+}
+.dark .pagination-item[data-active="true"] .pagination-line {
+    background: linear-gradient(90deg, rgba(250, 248, 245, 0.7) 0%, rgba(250, 248, 245, 0.7) 100%);
+}
+
+.pagination-item[data-active="true"] .slide-text {
+    opacity: 1;
+}
+
+.inverted-radius{
+    -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
+    mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
+    width: 648px;
+    background-color: #ffffff;
+    aspect-ratio: 648 / 575;
+}
+
+.radient-bg {
+    background: linear-gradient(180deg, #f9f9f9 69.59%, #ededed 100%);
 }
--- a/template-parts/la-components/blocks/hero-block/hero-block.js
+++ b/template-parts/la-components/blocks/hero-block/hero-block.js
@@ -12,30 +12,31 @@ document.addEventListener('DOMContentLoaded', function() {
            grabCursor: true,
            on: {
                slideChange: function () {
-                    const realIndex = this.realIndex;
-                    const paginationItems = block.querySelectorAll('.pagination-item');
-
-                    paginationItems.forEach((item, index) => {
-                        const line = item.querySelector('.pagination-line');
-                        const text = item.querySelector('.slide-text');
-
-                        if (index === realIndex) {
-                            item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
-                            line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
-                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
-                        } else {
-                            item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
-                            line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
-                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
-                        }
-                    });
+                    updatePagination(block, this.realIndex);
                }
            }
        });

+        // Функция обновления пагинации
+        function updatePagination(block, activeIndex) {
+            const paginationItems = block.querySelectorAll('.pagination-item');
+
+            paginationItems.forEach((item, index) => {
+                item.setAttribute('data-active', index === activeIndex ? 'true' : 'false');
+            });
+        }
+
        // Навигация
-        block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
-        block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());
+        const prevBtn = block.querySelector('.custom-prev');
+        const nextBtn = block.querySelector('.custom-next');
+
+        if (prevBtn) {
+            prevBtn.addEventListener('click', () => swiper.slidePrev());
+        }
+
+        if (nextBtn) {
+            nextBtn.addEventListener('click', () => swiper.slideNext());
+        }

        // Пагинация
        block.querySelectorAll('.pagination-item').forEach((item, index) => {
--- a/template-parts/la-components/blocks/hero-block/hero-block.php
+++ b/template-parts/la-components/blocks/hero-block/hero-block.php
@@ -16,7 +16,6 @@ if (!empty($block['align'])) {
    $className .= ' align' . $block['align'];
 }

-// Получаем данные из ACF полей
 $slider_data = get_field('slider') ?: [];
 $text_data = get_field('text') ?: [];

@@ -42,15 +41,27 @@ if (!empty($slider_data) && is_array($slider_data)) {
    }
 }

+$room = get_current_room();
+$base_classes = 'hero-block pb-[30px] pt-[14px]';

+if ($room === 'fitness') {
+    $section_classes = $base_classes . 'radient-bg';
+    $style_attr = '';
+} else {
+    $section_classes = $base_classes . ' bg-cover bg-center bg-no-repeat';
+    $bg_image = get_template_directory_uri() . '/assets/images/hero-bg.png';
+    $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+}
 ?>

-<section class="container mx-auto hero-block">
-    <div class="flex justify-between gap-[24px]">
-        <div class="flex flex-col w-full mt-[26px]">
-            <?php display_icon('logo_fitness') ?>
+<section class="pt-[161px] dark:text-[#f8f8f8] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>

-            <h1 class="font-[500] leading-[110%] text-[48px] mt-[20px]">
+    <div class="container mx-auto">
+    <div class="flex justify-between gap-[24px] ">
+        <div class="flex flex-col w-full mt-[26px]">
+            <?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
+
+            <h1 class=" font-[500] leading-[110%] text-[48px] mt-[20px]">
                <?php if (!empty($heading)): ?>
                    <?php echo wp_kses_post($heading); ?>
                <?php endif; ?>
@@ -76,7 +87,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
                    <p>
                        <b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
                    </p>
-                    <p>
+                    <p class="dark:text-[#6c6b6b]">
                        <?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
                    </p>
                </div>
@@ -84,7 +95,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
        </div>

        <div class="w-full max-w-[648px] h-[575px] relative">
-            <div class="swiper rounded-[25px] w-full h-full">
+            <div class="swiper inverted-radius rounded-[25px] w-full h-full">
                <div class="swiper-wrapper">
                    <?php foreach ($slides as $index => $slide): ?>
                        <div class="swiper-slide [&>_img]:max-w-none">
@@ -96,7 +107,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
                </div>
            </div>

-            <div class="inverted-radius-wrapper absolute z-[1] pt-[15px] pr-[15px] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] bg-[#f9f9f9] left-0 bottom-0">
+            <div class="absolute z-[1] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] left-0 bottom-0">
                <button class="group custom-prev cursor-pointer">
                    <?php display_icon('slider-prev') ?>
                </button>
@@ -107,17 +118,22 @@ if (!empty($slider_data) && is_array($slider_data)) {
        </div>
    </div>

-    <div class="flex gap-[24px] mt-[44px]">
-        <?php foreach ($slides as $index => $slide): ?>
-            <div class="pagination-item <?php echo $index === 0 ? 'flex-[2]' : 'flex-1' ?> cursor-pointer transition-all"
-                 data-slide="<?php echo $index ?>">
-                <div class="pagination-line <?php echo $index === 0 ? 'bg-[#222]' : 'bg-gray-[#e0e0e0]' ?> h-[2px] rounded-[30px] transition-colors"></div>
-                <div class="slide-text <?php echo $index === 0 ? 'opacity-100' : 'opacity-0' ?> transition-opacity">
-                    <span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
-                    <span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
+
+        <div class="flex gap-[24px] mt-[44px]">
+            <?php foreach ($slides as $index => $slide): ?>
+                <div class="pagination-item flex-1 cursor-pointer transition-all"
+                     data-active="<?php echo $index === 0 ? 'true' : 'false' ?>"
+                     data-slide="<?php echo $index ?>">
+                    <div class="pagination-line h-[2px] rounded-[30px] transition-colors"></div>
+                    <div class="slide-text opacity-0 mt-[10px] text-[14px] text-[#222] font-[600] transition-opacity">
+                        <div class="w-fit dark:bg-gradient-to-r dark:from-[rgba(248,248,248,0.55)] dark:to-white dark:bg-clip-text dark:text-transparent">
+                            <span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
+                            <span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
+                        </div>
+                    </div>
                </div>
-            </div>
-        <?php endforeach; ?>
+            <?php endforeach; ?>
+        </div>
    </div>
 </section>