parent
d6ccf00fe0
commit
269d8e2e67
@ -0,0 +1,48 @@ |
|||||||
|
<?php |
||||||
|
/** |
||||||
|
* Template Name: New Main Page |
||||||
|
* Description: Front page template |
||||||
|
*/ |
||||||
|
|
||||||
|
if (!class_exists('Timber')) { |
||||||
|
echo 'Timber не установлен. Пожалуйста, активируйте плагин Timber.'; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
function theme_enqueue_scripts() { |
||||||
|
wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css'); |
||||||
|
wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/new-front-page.css'); |
||||||
|
wp_enqueue_script('gp-front-page-materialize', get_template_directory_uri() . '/static/js/libs/materialize.min.js', array(), null, true); |
||||||
|
wp_enqueue_script('gp-front-page-main', get_template_directory_uri() . '/static/js/new-front-page.js', array(), null, true); |
||||||
|
} |
||||||
|
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); |
||||||
|
|
||||||
|
$context = Timber::context(); |
||||||
|
|
||||||
|
if (function_exists('get_field')) { |
||||||
|
// main |
||||||
|
$context['main_slider'] = get_field('main_slider'); |
||||||
|
// about |
||||||
|
$context['main_about_title'] = get_field('main_about-title'); |
||||||
|
$context['main_about_image'] = get_field('main_about-image'); |
||||||
|
$context['main_about_text'] = get_field('main_about-text'); |
||||||
|
$context['main_about_banner_bg'] = get_field('main_about-banner-bg'); |
||||||
|
$context['main_about_banner_title'] = get_field('main_about-banner-title'); |
||||||
|
$context['main_about_banner_descr'] = get_field('main_about-banner-descr'); |
||||||
|
// why |
||||||
|
$context['main_why_title'] = get_field('main_why-title'); |
||||||
|
$context['main_why_items'] = get_field('main_why-items'); |
||||||
|
$context['main_why_text'] = get_field('main_why-text'); |
||||||
|
$context['main_why_logos'] = get_field('main_why-logos'); |
||||||
|
// ingredients |
||||||
|
$context['main_ingredients_title'] = get_field('main_ingredients-title'); |
||||||
|
$context['main_ingredients_slider'] = get_field('main_ingredients-slider'); |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
Timber::render('_pages/new-front-page.twig', $context); // Рендерим отдельный Twig-шаблон |
||||||
|
} catch (Exception $e) { |
||||||
|
error_log('Ошибка рендеринга: ' . $e->getMessage()); |
||||||
|
echo 'Произошла ошибка при рендеринге шаблона. Проверь логи: ' . $e->getMessage(); |
||||||
|
} |
||||||
|
?> |
||||||
@ -0,0 +1,376 @@ |
|||||||
|
main { |
||||||
|
padding-top: 0px; |
||||||
|
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%); |
||||||
|
} |
||||||
|
.new-container { |
||||||
|
max-width:1240px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* Main Slider */ |
||||||
|
|
||||||
|
.swiper-container { |
||||||
|
width: 100%; |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
|
.main-slider .swiper-slide { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding-top: 85px; |
||||||
|
padding-left: 60px; |
||||||
|
} |
||||||
|
.swiper-fade .swiper-slide { |
||||||
|
transition-property: opacity; |
||||||
|
} |
||||||
|
.swiper-fade .swiper-slide { |
||||||
|
pointer-events: auto; |
||||||
|
} |
||||||
|
.swiper-fade .swiper-slide .swiper-slide-active { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.overlay { |
||||||
|
position: absolute; |
||||||
|
inset: 0; |
||||||
|
background: linear-gradient(to top, rgba(29, 78, 216, 0.8), transparent); |
||||||
|
} |
||||||
|
.content { |
||||||
|
position: absolute; |
||||||
|
bottom: 40px; |
||||||
|
left: 40px; |
||||||
|
right: 40px; |
||||||
|
color: white; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.main-slider-content_title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 48px; |
||||||
|
line-height: 117%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #fff; |
||||||
|
margin-bottom: 32px; |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
.main-slider-content_descr { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: #fff; |
||||||
|
margin-bottom: 32px; |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
.main-slider-content_btn { |
||||||
|
width: 159px; |
||||||
|
height: 56px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
gap: 10px; |
||||||
|
background-color: #fff; |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: #121212; |
||||||
|
border: 2px solid #fff; |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Main About */ |
||||||
|
|
||||||
|
.main-about { |
||||||
|
/* box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15); */ |
||||||
|
background: #f2f2f2; |
||||||
|
border-radius: 60px 60px 0px 0px; |
||||||
|
padding: 55px 65px; |
||||||
|
margin-top: -50px; |
||||||
|
position: relative; |
||||||
|
z-index: 90; |
||||||
|
} |
||||||
|
.main-about_title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 40px; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-about-bottom { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.main-about_text { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 20px; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-about_banner { |
||||||
|
height: 255px; |
||||||
|
border-radius: 40px; |
||||||
|
padding: 40px 40px 24px 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: flex-start; |
||||||
|
flex-direction: column; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.main-about_banner-title { |
||||||
|
font-weight: 400; |
||||||
|
font-size: 24px; |
||||||
|
color: #f2f2f2; |
||||||
|
} |
||||||
|
.main-about_banner-divider { |
||||||
|
border-radius: 100px; |
||||||
|
width: 108px; |
||||||
|
height: 1px; |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
.main-about_banner-descr { |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
color: #f2f2f2; |
||||||
|
max-width: 50%; |
||||||
|
} |
||||||
|
.main-about_banner-btn { |
||||||
|
border: 2px solid #f2f2f2; |
||||||
|
border-radius: 100px; |
||||||
|
width: 333px; |
||||||
|
height: 48px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
gap: 20px; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
/* Main Why */ |
||||||
|
|
||||||
|
.main-why { |
||||||
|
background: #f2f2f2; |
||||||
|
margin-top: -1%; |
||||||
|
padding-top: 5%; |
||||||
|
padding-bottom: 5%; |
||||||
|
} |
||||||
|
.main-why_title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 64px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-why_wrapper { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(2, 1fr); |
||||||
|
gap: 25px; |
||||||
|
margin-top: 5%; |
||||||
|
} |
||||||
|
.main-why_item { |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 40px; |
||||||
|
padding: 40px; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.main-why_item-title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
color: #121212; |
||||||
|
max-width: 50%; |
||||||
|
} |
||||||
|
.main-why_item-descr { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 14px; |
||||||
|
color: #121212; |
||||||
|
margin-bottom: 7%; |
||||||
|
} |
||||||
|
.main-why_item-image { |
||||||
|
position: absolute; |
||||||
|
top: -25%; |
||||||
|
right: 5%; |
||||||
|
} |
||||||
|
.main-why_item-index { |
||||||
|
position: absolute; |
||||||
|
bottom: 3%; |
||||||
|
right: 3%; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 48px; |
||||||
|
text-align: right; |
||||||
|
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.main-why_bottom { |
||||||
|
margin-top: 25px; |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 40px; |
||||||
|
padding: 40px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.main-why_bottom-text { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-why_bottom-logos { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Main Ingredients */ |
||||||
|
|
||||||
|
.main-ingredients { |
||||||
|
background: #f2f2f2; |
||||||
|
margin-top: -1%; |
||||||
|
padding-top: 5%; |
||||||
|
padding-bottom: 5%; |
||||||
|
} |
||||||
|
.main-ingredients_title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 64px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-ingredients .swiper { |
||||||
|
width: 100%; |
||||||
|
height: 400px; |
||||||
|
padding: 0 60px; |
||||||
|
position: relative; |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-slide { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: all 0.5s ease; |
||||||
|
opacity: 0.3; |
||||||
|
transform: scale(0.7); |
||||||
|
} |
||||||
|
.main-ingredients .swiper-slide-active { |
||||||
|
opacity: 1; |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
.ingredient-card { |
||||||
|
background: rgba(255, 255, 255, 0.95); |
||||||
|
border-radius: 20px; |
||||||
|
padding: 40px 30px; |
||||||
|
text-align: center; |
||||||
|
width: 429px; |
||||||
|
height: 546px; |
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2); |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-slide-active .ingredient-card { |
||||||
|
/* background-image: url(/wp-content/themes/cosmopet/static/img/border.png); */ |
||||||
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
.ingredient-icon { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
margin: 0 auto 20px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 2.5rem; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.ingredients-swiper .swiper-slide { |
||||||
|
transition: all 0.3s ease-in-out; |
||||||
|
} |
||||||
|
.ingredients-swiper .swiper-wrapper { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.ingredients-swiper .swiper-slide { |
||||||
|
transition: all 0.4s ease; |
||||||
|
transform-origin: center center; |
||||||
|
} |
||||||
|
.protein .ingredient-icon { |
||||||
|
background: linear-gradient(135deg, #f8f9fa, #e9ecef); |
||||||
|
} |
||||||
|
.prebiotics .ingredient-icon { |
||||||
|
background: linear-gradient(135deg, #c8e6c9, #4caf50); |
||||||
|
} |
||||||
|
.omega .ingredient-icon { |
||||||
|
background: linear-gradient(135deg, #ffcc80, #ff9800); |
||||||
|
} |
||||||
|
.ingredient-title { |
||||||
|
font-size: 1.1rem; |
||||||
|
font-weight: 700; |
||||||
|
color: #2c3e50; |
||||||
|
margin-bottom: 15px; |
||||||
|
text-transform: uppercase; |
||||||
|
letter-spacing: 0.5px; |
||||||
|
} |
||||||
|
.ingredient-description { |
||||||
|
font-size: 0.9rem; |
||||||
|
color: #555; |
||||||
|
line-height: 1.5; |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-button-next, |
||||||
|
.main-ingredients .swiper-button-prev { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 50%; |
||||||
|
background: rgba(255, 255, 255, 0.9); |
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
||||||
|
color: #2c3e50; |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||||
|
transition: all 0.3s ease; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-button-next:hover, |
||||||
|
.main-ingredients .swiper-button-prev:hover { |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
transform: scale(1.1); |
||||||
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
.main-ingredients .swiper-button-next::after, |
||||||
|
.main-ingredients .swiper-button-prev::after { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-button-next { |
||||||
|
right: 10px; |
||||||
|
} |
||||||
|
.main-ingredients .swiper-button-prev { |
||||||
|
left: 10px; |
||||||
|
} |
||||||
|
@media (max-width: 768px) { |
||||||
|
.main-ingredients .swiper { |
||||||
|
padding: 0 40px; |
||||||
|
} |
||||||
|
.ingredient-card { |
||||||
|
width: 260px; |
||||||
|
height: 300px; |
||||||
|
padding: 30px 20px; |
||||||
|
} |
||||||
|
.title { |
||||||
|
font-size: 2rem; |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,86 @@ |
|||||||
|
document.addEventListener('DOMContentLoaded', function() { |
||||||
|
// Main slider
|
||||||
|
const mainSwiper = new Swiper('.main-slider', { |
||||||
|
effect: 'fade', |
||||||
|
fadeEffect: { crossFade: true }, |
||||||
|
autoplay: { delay: 5000, disableOnInteraction: false }, |
||||||
|
loop: true |
||||||
|
}); |
||||||
|
|
||||||
|
// Ingredients slider
|
||||||
|
const swiper = new Swiper('.ingredients-swiper', { |
||||||
|
slidesPerView: 5, |
||||||
|
centeredSlides: true, |
||||||
|
centeredSlidesBounds: true, |
||||||
|
loop: true, |
||||||
|
autoplay: { |
||||||
|
delay: 4000, |
||||||
|
disableOnInteraction: false, |
||||||
|
}, |
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
watchSlidesProgress: true, |
||||||
|
slideToClickedSlide: true, |
||||||
|
effect: 'slide', |
||||||
|
speed: 800, |
||||||
|
on: { |
||||||
|
init() { |
||||||
|
updateSlideStates(this); |
||||||
|
}, |
||||||
|
slideChange() { |
||||||
|
updateSlideStates(this); |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function updateSlideStates(swiper) { |
||||||
|
const slides = swiper.slides; |
||||||
|
|
||||||
|
slides.forEach((slide) => { |
||||||
|
slide.style.opacity = '0.3'; |
||||||
|
slide.style.transform = 'scale(0.7)'; |
||||||
|
slide.style.zIndex = '1'; |
||||||
|
}); |
||||||
|
|
||||||
|
// Найдём активный слайд по классу
|
||||||
|
const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active')); |
||||||
|
if (!activeSlide) return; |
||||||
|
|
||||||
|
// Обнулим все
|
||||||
|
const updateSlide = (slide, scale, opacity, zIndex) => { |
||||||
|
if (slide) { |
||||||
|
slide.style.transform = `scale(${scale})`; |
||||||
|
slide.style.opacity = opacity; |
||||||
|
slide.style.zIndex = zIndex; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
updateSlide(activeSlide, 1, 1, 10); |
||||||
|
|
||||||
|
// Пройдем от активного — назад и вперёд
|
||||||
|
const getPrev = (el, n) => { |
||||||
|
let node = el; |
||||||
|
for (let i = 0; i < n; i++) { |
||||||
|
node = node.previousElementSibling || swiper.slides[swiper.slides.length - 1]; |
||||||
|
} |
||||||
|
return node; |
||||||
|
}; |
||||||
|
|
||||||
|
const getNext = (el, n) => { |
||||||
|
let node = el; |
||||||
|
for (let i = 0; i < n; i++) { |
||||||
|
node = node.nextElementSibling || swiper.slides[0]; |
||||||
|
} |
||||||
|
return node; |
||||||
|
}; |
||||||
|
|
||||||
|
updateSlide(getPrev(activeSlide, 1), 0.85, 0.6, 6); |
||||||
|
updateSlide(getPrev(activeSlide, 2), 0.75, 0.4, 4); |
||||||
|
|
||||||
|
updateSlide(getNext(activeSlide, 1), 0.85, 0.6, 6); |
||||||
|
updateSlide(getNext(activeSlide, 2), 0.75, 0.4, 4); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
{% set bodyClass = 'main-np' %} |
||||||
|
{% set headerClass = 'white' %} |
||||||
|
{% extends 'layout.twig' %} |
||||||
|
|
||||||
|
{% block content %} |
||||||
|
{% include '/templates/_pages/new-front-page/main-slider.twig' %} |
||||||
|
{% include '/templates/_pages/new-front-page/main-about.twig' %} |
||||||
|
{% include '/templates/_pages/new-front-page/main-why.twig' %} |
||||||
|
{% include '/templates/_pages/new-front-page/main-ingredients.twig' %} |
||||||
|
{% endblock %} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div class="main-about"> |
||||||
|
<div class="new-container"> |
||||||
|
<div class="main-about_title">{{ main_about_title }}</div> |
||||||
|
<div class="main-about-bottom"> |
||||||
|
<img src="{{ main_about_image }}" class="main-about_image" alt="{{ main_about_title }}"> |
||||||
|
<div class="main-about_text"> |
||||||
|
<p>{{ main_about_text }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="main-about_banner" style="background:url({{ main_about_banner_bg }}); background-size: cover; background-position: center;"> |
||||||
|
<div class="main-about_banner-title">{{ main_about_banner_title }}</div> |
||||||
|
<div class="main-about_banner-divider"></div> |
||||||
|
<div class="main-about_banner-descr">{{ main_about_banner_descr }}</div> |
||||||
|
<a href="#" class="main-about_banner-btn">Начать сотрудничество<img src="/wp-content/uploads/2025/07/group-1000001373-2.png"></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<div class="main-ingredients"> |
||||||
|
<div class="new-container"> |
||||||
|
<h2 class="main-ingredients_title">{{ main_ingredients_title }}</h2> |
||||||
|
<div class="swiper ingredients-swiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
{% for slide in main_ingredients_slider %} |
||||||
|
<div class="swiper-slide"> |
||||||
|
<div class="ingredient-card protein"> |
||||||
|
<img src="{{ slide.image }}" class="ingredient-icon" alt="{{ slide.title }}"> |
||||||
|
<div class="ingredient-title">{{ slide.title }}</div> |
||||||
|
<div class="ingredient-description"> |
||||||
|
{{ slide.descr }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
<div class="main-slider swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
{% for slide in main_slider %} |
||||||
|
<div class="swiper-slide" style="background-image: url('{{ slide.main_slider_bg }}'); background-size: cover; background-position: center;"> |
||||||
|
<div class="main-slider-content"> |
||||||
|
<h2 class="main-slider-content_title">{{ slide.main_slider_title }}</h2> |
||||||
|
<p class="main-slider-content_descr">{{ slide.main_slider_descr }}</p> |
||||||
|
<a href="{{ slide.main_slider_link }}" class="main-slider-content_btn">Купить<img src="/wp-content/uploads/2025/07/group-1000001373.png"></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
<div class="main-why"> |
||||||
|
<div class="new-container"> |
||||||
|
<h2 class="main-why_title">{{ main_why_title }}</h2> |
||||||
|
<div class="main-why_wrapper"> |
||||||
|
{% for item in main_why_items %} |
||||||
|
<div class="main-why_item" style="background-image: url('{{ item.bg }}'); background-size: cover; background-position: center;"> |
||||||
|
<div class="main-why_item-title">{{ item.title }}</div> |
||||||
|
<div class="main-why_item-descr">{{ item.descr }}</div> |
||||||
|
<img src="{{ item.image }}" class="main-why_item-image" alt="{{ item.title }}"> |
||||||
|
<div class="main-why_item-index"> |
||||||
|
{{ loop.index < 10 ? '0' ~ loop.index : loop.index }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
<div class="main-why_bottom"> |
||||||
|
<div class="main-why_bottom-text"> |
||||||
|
<p>{{ main_why_text }}</p> |
||||||
|
</div> |
||||||
|
<div class="main-why_bottom-logos"> |
||||||
|
{% for logo in main_why_logos %} |
||||||
|
<img src="{{ logo.logo }}" alt="Логотип сертификации"> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue