You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Fakel-Gym/template-parts/la-components/modals/modal-welcome-branch.php

121 lines
11 KiB

<?php
/**
* Шаблон приветственной модалки для выбора зала
*/
?>
<?php
$gymBg = get_template_directory_uri() . '/assets/images/welcom-dark.png';
$fitnessBg = get_template_directory_uri() . '/assets/images/welcom-light.png';
?>
<div>
<div class="max-[768px]:p-[20px] bg-[#e21e24] flex flex-col items-center justify-center py-[32px] px-[20px] gap-[16px]">
<svg width="100" height="16" viewBox="0 0 100 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2384_13059)">
<path d="M57.5345 15.9665C57.5345 15.9665 57.6027 15.7648 57.7731 15.395C57.9436 14.9917 58.1481 14.4875 58.3868 13.8488C58.6595 13.2102 58.9322 12.5043 59.2731 11.6976C59.614 10.8909 59.955 10.0506 60.2958 9.21018C60.6367 8.36986 60.9777 7.52954 61.3186 6.72281C61.6595 5.91609 61.9322 5.21021 62.205 4.57155C62.4777 3.9329 62.6822 3.4287 62.8527 3.02534C63.0231 2.62198 63.0913 2.45391 63.0913 2.45391C63.3981 1.78165 63.8754 1.27744 64.489 0.874086C65.1027 0.470723 65.7845 0.302656 66.5004 0.302656H81.0572L80.1368 2.48752C79.8299 3.19341 79.3868 3.76483 78.7391 4.1682C78.0913 4.60517 77.3754 4.80685 76.6254 4.80685H67.5572C67.1481 4.80685 66.8413 5.00853 66.6709 5.37828L66.2959 6.28584H74.0345L72.9436 8.90771C72.8073 9.24385 72.6027 9.51273 72.2959 9.71443C71.9891 9.91605 71.6823 10.0169 71.3072 10.0169H65.3754C64.9663 10.0169 64.6595 10.2186 64.489 10.5883L64.1141 11.4959H76.3527L75.4664 13.6471C75.1595 14.353 74.7163 14.9244 74.0686 15.3614C73.4209 15.7984 72.705 16.0001 71.9549 16.0001H57.5345V15.9665ZM45.6368 1.34467C45.7731 1.00854 45.9777 0.773243 46.2504 0.571563C46.5231 0.369883 46.864 0.269043 47.2049 0.269043H50.9208L48.4663 6.28584L48.5004 6.31945L54.5686 0.672403C54.8754 0.403496 55.1822 0.269043 55.5572 0.269043H61.5572L51.8413 9.34462C51.8754 9.41188 52.08 9.68076 52.4549 10.185C52.5913 10.3866 52.7959 10.6556 53.0345 10.9917C53.2731 11.2942 53.5458 11.6976 53.8867 12.1682C54.2277 12.6388 54.6026 13.1765 55.0799 13.8152C55.5231 14.4539 56.0686 15.1597 56.6481 16.0001H51.1595L46.8981 10.0842L44.9549 14.8573C44.8186 15.1934 44.614 15.4623 44.3072 15.664C44.0004 15.8656 43.6936 15.9665 43.3186 15.9665H39.6027L45.6368 1.34467ZM35.989 6.28584C36.1935 6.28584 36.364 6.185 36.4322 5.98332L36.9094 4.80685H29.9208C29.7163 4.80685 29.5458 4.90769 29.4777 5.10937L29.0004 6.28584H35.989ZM20.1367 15.9665L25.6594 2.58837C25.9663 1.88248 26.4095 1.31106 27.0231 0.907701C27.6368 0.504336 28.3527 0.269043 29.1367 0.269043H43.6595L38.1709 13.58C37.864 14.2858 37.4208 14.8573 36.7731 15.2943C36.1254 15.7312 35.4095 15.9329 34.6594 15.9329H32.3413L34.7959 9.94972H27.4663L25.4208 14.8573C25.2845 15.1934 25.08 15.4287 24.7731 15.6303C24.4663 15.832 24.1595 15.9329 23.7845 15.9329H20.1367V15.9665Z"
fill="white"/>
<path d="M5.13645 5.71449L6.39782 2.62206C6.70464 1.91617 7.14782 1.34475 7.79555 0.941391C8.44327 0.504414 9.15921 0.302734 9.90918 0.302734H12.2274L10.4546 4.60525L8.20464 10.1178C8.13646 10.2523 8.06827 10.3867 8.00009 10.5212L6.73873 13.6136C6.43191 14.3195 5.98873 14.8909 5.341 15.3279C4.69327 15.7649 3.97736 15.9665 3.22736 15.9665H0.90918L2.6819 11.664L4.9319 6.15146C5.00009 5.9834 5.06827 5.84894 5.13645 5.71449Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.4319 0C21.6024 7.19326 15.466 3.36134 10.6592 5.10923C12.0569 1.07563 14.5796 0.336134 17.4092 0.30252C19.5228 0.268907 22.4888 0.504201 24.4319 0Z"
fill="white"/>
<path d="M99.0909 0.336348L93.6366 13.6136C93.3297 14.3195 92.8863 14.8909 92.2387 15.3279C91.5912 15.7649 90.8754 15.9666 90.125 15.9666H87.8072L92.3753 4.84054H91.6932C91.3863 4.84054 91.0794 4.90777 90.7733 5.04222C90.4664 5.17667 90.2278 5.37836 90.023 5.61365L81.3977 15.9666H75.5684L87.2954 1.7145C87.6369 1.27752 88.0795 0.941386 88.5913 0.672482C89.1023 0.437187 89.6478 0.302734 90.2278 0.302734H99.0909V0.336348Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.6249 5.21045C17.4431 10.723 12.7726 7.66422 9.09082 9.00872C10.9999 3.49616 15.3636 6.31969 19.6249 5.21045Z"
fill="white"/>
</g>
<defs>
<clipPath id="clip0_2384_13059">
<rect width="98.1818" height="16" fill="white" transform="translate(0.90918)"/>
</clipPath>
</defs>
</svg>
<h2 class="max-[768px]:text-[20px] text-center w-full max-w-[450px] font-[600] text-[32px] leading-[115%] text-[#fff]">
Какое направление вас интересует?
</h2>
</div>
<div class="grid grid-cols-2 max-[768px]:grid-cols-1">
<div class="bg-cover bg-center cursor-pointer flex items-center justify-center h-[453px] max-[768px]:h-[352px] w-full branch-card group cursor-pointer transition-all"
style=background-image:url("<?php echo $gymBg ?>"
data-branch="gym">
<div class="max-[768px]:px-[12px] w-full max-w-[365px] flex flex-col gap-[27px] max-[768px]:gap-[16px] items-center justify-center">
<div class="flex flex-col gap-[27px] max-[768px]:gap-[16px] items-center justify-center">
<?php display_icon('dark_logo_name'); ?>
<h3 class="text-[24px] font-[600] leading-[125%] text-[#fff]">
Зал силовых тренировок
</h3>
<p class="max-[768px]:text-[14px] text-center text-[16px] leading-[145%] text-[#fff]">
Пространство для работы с весами, топовыми тренажерами и ничего лишнего. Идеальное соотношение
цены и комфорта, если Вам необходим лишь тренажерный зал.
</p>
<p class="max-[768px]:text-[16px] font-[600] text-[20px] leading-[115%] text-[#fff]">от 3 190₽/мес.</p>
</div>
<button class="max-[768px]:text-[16px] max-[768px]:h-[59px] cursor-pointer max-w-[290px] !no-underline transition red-gradient-hover gap-[12px] w-full rounded-[90px] flex items-center justify-center h-[75px]">
<span class="font-[600] text-[18px] leading-[195%] text-[#f8f8f8]">Зал силовых тренировок</span>
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 17.5C0 7.83502 7.83502 0 17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5Z"
fill="url(#paint0_linear_4064_4274)"></path>
<path d="M22.3612 11.7656C22.8445 11.7656 23.2366 12.1578 23.2366 12.641V20.5156C23.2366 20.9989 22.8445 21.391 22.3612 21.391C21.878 21.391 21.4858 20.9989 21.4858 20.5156V14.7544L13.258 22.9823C12.9163 23.324 12.3617 23.324 12.02 22.9823C11.6782 22.6406 11.6782 22.0859 12.02 21.7442L20.2478 13.5164H14.4866C14.0033 13.5164 13.6112 13.1243 13.6112 12.641C13.6112 12.1578 14.0033 11.7656 14.4866 11.7656H22.3612Z"
fill="#F8F8F8"></path>
<defs>
<linearGradient id="paint0_linear_4064_4274" x1="0" y1="17.5" x2="35" y2="17.5"
gradientUnits="userSpaceOnUse">
<stop offset="0.443137" stop-color="#F8F8F8" stop-opacity="0.34"></stop>
<stop offset="0.929023" stop-color="white" stop-opacity="0.72"></stop>
</linearGradient>
</defs>
</svg>
</button>
</div>
</div>
<div class="bg-cover bg-center cursor-pointer flex items-center justify-center h-[453px] max-[768px]:h-[352px] w-full branch-card group cursor-pointer transition-all"
style=background-image:url("<?php echo $fitnessBg ?>"
data-branch="fitness">
<div class="max-[768px]:px-[12px] w-full max-w-[365px] flex flex-col gap-[27px] max-[768px]:gap-[16px] items-center justify-center">
<div class="flex flex-col gap-[27px] max-[768px]:gap-[16px] items-center justify-center">
<?php display_icon('light_logo_name'); ?>
<h3 class="text-[24px] font-[600] leading-[125%] text-[#222]">
Фитнес-центр
</h3>
<p class="max-[768px]:text-[14px] text-center text-[16px] leading-[145%] text-[#222]">
Фитнес-центр мировых стандартов 2500 м². Оборудование из США, большая кардио-зона, более 45
направлений групповых программ, сауна, кафе, зона релакса и мн. др.
</p>
<p class="max-[768px]:text-[16px] font-[600] text-[20px] leading-[115%] text-[#222]">от 8 900₽/мес.</p>
</div>
<button class="max-[768px]:text-[16px] max-[768px]:h-[59px] cursor-pointer max-w-[290px] !no-underline transition red-gradient-hover gap-[12px] w-full rounded-[90px] flex items-center justify-center h-[75px]">
<span class="font-[600] text-[18px] leading-[195%] text-[#f8f8f8]"> Фитнес-центр</span>
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 17.5C0 7.83502 7.83502 0 17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5Z"
fill="url(#paint0_linear_4064_4274)"></path>
<path d="M22.3612 11.7656C22.8445 11.7656 23.2366 12.1578 23.2366 12.641V20.5156C23.2366 20.9989 22.8445 21.391 22.3612 21.391C21.878 21.391 21.4858 20.9989 21.4858 20.5156V14.7544L13.258 22.9823C12.9163 23.324 12.3617 23.324 12.02 22.9823C11.6782 22.6406 11.6782 22.0859 12.02 21.7442L20.2478 13.5164H14.4866C14.0033 13.5164 13.6112 13.1243 13.6112 12.641C13.6112 12.1578 14.0033 11.7656 14.4866 11.7656H22.3612Z"
fill="#F8F8F8"></path>
<defs>
<linearGradient id="paint0_linear_4064_4274" x1="0" y1="17.5" x2="35" y2="17.5"
gradientUnits="userSpaceOnUse">
<stop offset="0.443137" stop-color="#F8F8F8" stop-opacity="0.34"></stop>
<stop offset="0.929023" stop-color="white" stop-opacity="0.72"></stop>
</linearGradient>
</defs>
</svg>
</button>
</div>
</div>
</div>
</div>
<style>
.branch-card.selected {
}
.branch-card.selecting {
}
</style>