210 lines
14 KiB
PHP
210 lines
14 KiB
PHP
<?php
|
||
|
||
$id = 'masonry-tiles-block-' . $block['id'];
|
||
if (!empty($block['anchor'])) {
|
||
$id = $block['anchor'];
|
||
}
|
||
|
||
$classes = 'block-masonry-tiles-block';
|
||
if (!empty($block['className'])) {
|
||
$classes .= ' ' . $block['className'];
|
||
}
|
||
if (!empty($block['align'])) {
|
||
$classes .= ' align' . $block['align'];
|
||
}
|
||
|
||
?>
|
||
|
||
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($classes); ?>">
|
||
<div class="container mx-auto py-[90px]">
|
||
|
||
<?php if (get_field('heading')) : ?>
|
||
<h2 class="text-[48px] font-[500] text-[#1f2937] mb-[40px]">
|
||
<?php echo get_field('heading'); ?>
|
||
</h2>
|
||
<?php endif; ?>
|
||
|
||
<?php if (have_rows('tiles_group')) : ?>
|
||
<?php while (have_rows('tiles_group')) :
|
||
the_row(); ?>
|
||
|
||
<div class="flex gap-[24px]">
|
||
|
||
<!-- Первая колонка -->
|
||
<div class="flex flex-col gap-[24px] w-full max-w-[424px]">
|
||
|
||
<!-- First Tile - Текстовый блок -->
|
||
<?php if (have_rows('first_tile')) : ?>
|
||
<?php while (have_rows('first_tile')) : the_row(); ?>
|
||
<div class="<?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> pt-[24px] overflow-hidden">
|
||
<div class="flex <?php echo is_front_page() ? 'flex-col justify-start' : 'flex-col-reverse justify-end'; ?> gap-[16px] h-full [&_img]:w-[294px]">
|
||
<?php if (get_sub_field('heading')) : ?>
|
||
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name_gym' : 'light_logo_name'); ?>
|
||
<h3 class="text-[32px] font-[500] text-[#222] leading-[115%]">
|
||
<span>
|
||
<?php echo esc_html(get_sub_field('heading')); ?>
|
||
</span>
|
||
</h3>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
<!-- Second Tile - Блок с картинкой -->
|
||
<?php if (have_rows('second_tile')) : ?>
|
||
<?php while (have_rows('second_tile')) : the_row(); ?>
|
||
|
||
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)]
|
||
">
|
||
<?php $background = get_sub_field('background'); ?>
|
||
<?php if ($background) : ?>
|
||
<img class="absolute right-0 top-0 w-full h-full" alt="Фон блока"
|
||
src="<?php echo esc_url($background['url']); ?>">
|
||
<?php else :{
|
||
?>
|
||
<div class="absolute flex justify-end dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)] bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] right-0 top-0 w-full h-full">
|
||
<svg width="169" height="136" viewBox="0 0 169 136" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<g opacity="0.2" clip-path="url(#clip0_2281_7020)">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M293 -31C238.959 102.351 121.758 31.3136 29.9512 63.7166C56.6471 -11.0597 104.829 -24.7686 158.872 -25.3918C199.24 -26.0149 255.888 -21.653 293 -31Z"
|
||
fill="#F9F9F9"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M201.195 65.5859C159.523 167.78 70.3205 111.074 0 136C36.463 33.806 119.805 86.1494 201.195 65.5859Z"
|
||
fill="#F9F9F9"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_2281_7020">
|
||
<rect width="293" height="167" fill="white"
|
||
transform="translate(0 -31)"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<?php
|
||
} ?>
|
||
|
||
<?php endif; ?>
|
||
<div class="relative flex flex-col <?php echo is_front_page() ? 'justify-start' : 'justify-end'; ?> h-full z-10">
|
||
<?php if (get_sub_field('text')) : ?>
|
||
|
||
<?php if (get_sub_field('heading')) : ?>
|
||
<h3 class="font-[600] text-[42px] text-[#fff] leading-[115%]">
|
||
<?php echo esc_html(get_sub_field('heading')); ?>
|
||
</h3>
|
||
<?php endif; ?>
|
||
|
||
<?php if (get_sub_field('underheading')) : ?>
|
||
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
|
||
<?php endif; ?>
|
||
|
||
<div class="<?php echo is_front_page() ? 'max-w-[245px]' : 'max-w-full'; ?> w-full text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px]">
|
||
<?php echo wp_kses_post(get_sub_field('text')); ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
<!-- Вторая колонка -->
|
||
<div class="flex flex-col gap-[24px] w-full max-w-[872px]">
|
||
|
||
<!-- Два обычных блока сверху -->
|
||
<div class="grid grid-cols-2 gap-[24px]">
|
||
|
||
<!-- Third Tile -->
|
||
<?php if (have_rows('third_tile')) : ?>
|
||
<?php while (have_rows('third_tile')) : the_row(); ?>
|
||
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
|
||
<?php
|
||
$background = get_sub_field('background');
|
||
if ($background) : ?>
|
||
style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
|
||
<?php endif; ?>>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||
<div class="relative flex flex-col h-full justify-end z-10">
|
||
<?php if (get_sub_field('heading')) : ?>
|
||
<h3 class="font-[700] text-[24px] text-[#fff] leading-[125%]">
|
||
<?php echo esc_html(get_sub_field('heading')); ?>
|
||
</h3>
|
||
<?php endif; ?>
|
||
<?php if (get_sub_field('text')) : ?>
|
||
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
<!-- Fourth Tile -->
|
||
<?php if (have_rows('fourth_tile')) : ?>
|
||
<?php while (have_rows('fourth_tile')) : the_row(); ?>
|
||
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
|
||
<?php
|
||
$background = get_sub_field('background');
|
||
if ($background) : ?>
|
||
style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
|
||
<?php endif; ?>>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||
<div class="relative flex flex-col h-full justify-end z-10">
|
||
<?php if (get_sub_field('heading')) : ?>
|
||
<h3 class="font-[700] text-[24px] text-[#fff] leading-[125%]">
|
||
<?php echo esc_html(get_sub_field('heading')); ?>
|
||
</h3>
|
||
<?php endif; ?>
|
||
<?php if (get_sub_field('underheading')) : ?>
|
||
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
|
||
<?php endif; ?>
|
||
|
||
<?php if (get_sub_field('text')) : ?>
|
||
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
<!-- Fifth Tile - Широкий блок снизу -->
|
||
<?php if (have_rows('fifth_tile')) : ?>
|
||
<?php while (have_rows('fifth_tile')) : the_row(); ?>
|
||
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
|
||
<?php
|
||
$background = get_sub_field('background');
|
||
if ($background) : ?>
|
||
style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
|
||
<?php endif; ?>>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||
|
||
<div class="relative flex flex-col h-full justify-end z-10">
|
||
<?php if (get_sub_field('heading')) : ?>
|
||
<h3 class="font-[600] text-[42px] text-[#fff] leading-[115%]">
|
||
<?php echo esc_html(get_sub_field('heading')); ?>
|
||
</h3>
|
||
<?php endif; ?>
|
||
|
||
<?php if (get_sub_field('underheading')) : ?>
|
||
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
|
||
<?php endif; ?>
|
||
<?php if (get_sub_field('text')) : ?>
|
||
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-[400px]' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php endwhile; ?>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
</section>
|