Task:7199 | Верстка главной. Галерея, квиз, cosmopetx

wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php

@@ -9,6 +9,33 @@ if (!class_exists('Timber')) {
     return;
 }
 
+function enqueue_custom_gallery_assets() {
+    // Fancybox 5
+    wp_enqueue_style(
+        'fancybox-css',
+        'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.css',
+        [],
+        null
+    );
+
+    wp_enqueue_script(
+        'fancybox-js',
+        'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js',
+        [],
+        null,
+        true
+    );
+
+    // Инициализация Fancybox
+    wp_add_inline_script('fancybox-js', "
+        document.addEventListener('DOMContentLoaded', function () {
+            Fancybox.bind('[data-fancybox=\"gallery\"]', {});
+        });
+    ");
+}
+add_action('wp_enqueue_scripts', 'enqueue_custom_gallery_assets');
+
+
 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/front-page.css');
@@ -19,6 +46,8 @@ function theme_enqueue_scripts() {
 }
 add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
 
+
+
 $context = Timber::context();
 
 if (function_exists('get_field')) {
@@ -42,6 +71,16 @@ if (function_exists('get_field')) {
     // specialists
     $context['main_specialists_title']  = get_field('main_specialists-title');
     $context['main_specialists_items']  = get_field('main_specialists-items');
+    // cosmopetx
+    $context['other_post'] = Timber::get_post(383); // Загружаем пост с ID 383
+    //quiz
+    $context['q_title'] = get_field('q_title');
+    $context['reviews_title'] = get_field('reviews_title');
+    $context['q_1'] = get_field('q_1', 383);
+    $context['q_2'] = get_field('q_2', 383);
+    $context['q_3'] = get_field('q_3', 383);
+    $context['q_4'] = get_field('q_4', 383);
+    $context['q_5'] = get_field('q_5', 383);
 }
 
 try {

wp-content/themes/cosmopet/static/css/new-front-page.css

@@ -1035,10 +1035,10 @@ main {
 /* Main Smi */
 
 .main-smi {
-    box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15);
     background: #f4f1f0;
     padding: 100px 20px; 
     border-radius: 0!important;
+    margin-top: -5%;
 }
 .smiSlider .slider-arrows {
     position: absolute;
@@ -1235,7 +1235,410 @@ font-size: 12px;
     margin-bottom: 70px;
 }
 
+/* Main Cosmopet X */
+
+.cosmopet-x {
+    background: #f4f1f0;
+    padding: 100px 20px; 
+    margin-top: -5%;
+    overflow: hidden;
+    border-radius: 0px 0px 60px 60px;
+}
+.cosmopet-x .main-reviews_title {
+    font-weight: 700;
+    font-size: 64px;
+    text-transform: uppercase;
+    color: #121212;
+}
+.cosmopet-x__swiper, 
+.cosmopet-x__swiper .swiper-wrapper {
+    height: auto;
+}
+.cosmopet-x__title {
+    color: var(--creme-white, #F4F1F0);
+    font-family: "Craftwork Grotesk";
+    font-size: 82px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-transform: uppercase;
+}
+.cosmopet-x__swiper {
+    margin-top: 52px;
+    position: relative;
+}
+.cosmopet-x__item {
+    position: relative;
+    width: 100%;
+    height: 484px;
+}
+.cosmopet-x__item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    z-index: 1;
+    width: 100%;
+    border-radius: 60px;
+    border: 2px solid var(--creme-white, #F4F1F0);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%);
+}
+.cosmopet-x__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 60px;
+} 
+.cosmopet-x__body {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 36px 35px;
+}
+.cosmopet-x__heading {
+    color: var(--grey-black, #121212);
+    font-family: "Craftwork Grotesk";
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-transform: uppercase;
+}
+.cosmopet-x__btn {
+    display: block;
+    max-width: max-content;
+    margin-top: 7px;
+    color: #000;
+    font-family: "Craftwork Grotesk";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    padding: 6px 15px 10px 15px;
+    border-radius: 28px;
+    border: 1px solid #000;
+    background: var(--wh, #FFF);
+}
+.cosmopet-x__top {
+    position: absolute;
+    height: auto;
+    width: 60%;
+    top: 43px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+}
+.cosmopet-x .slider-arrows {
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    width: 100%;
+}
+.cosmopet-x .slider-arrows .cosmopet-prev {
+    left: -30px;
+}
+.cosmopet-x .slider-arrows .cosmopet-next {
+    right: -30px;
+}
+.cosmopet-x .slider-arrow {
+    background-image: url('data:image/svg+xml,<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="56" height="56" rx="20" fill="white"/><path d="M37 28.364H20.5" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 34.728" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 22.0001" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')!important;
+}
+
+/* Main Gallery */
+
+.main-gallery .mosaic-swiper {
+  padding: 40px 20px;
+}
+
+.gallery-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* Две колонки */
+  gap: 20px; /* Максимальный gap 20px */
+  padding: 40px 20px;
+  max-height: 700px; /* Фиксированная высота контейнера (настройте под нужный размер) */
+  overflow: hidden;
+}
+
+.item {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.large {
+  grid-column: span 1; /* Занимает одну ячейку */
+  grid-row: span 2; /* Занимает две строки */
+}
+
+.small {
+  grid-column: span 1; /* Занимает одну ячейку */
+  grid-row: span 1; /* Занимает одну строку */
+}
 
+.full-height {
+  grid-column: span 2; /* Занимает обе колонки */
+  grid-row: span 2; /* Занимает две строки */
+}
+
+/* Main quiz */
+
+.truth {
+    border-radius: 60px 60px 0px 0px;
+    background: var(--creme-white, #F4F1F0);
+    padding-bottom: 119px;
+    margin-top: -1px;
+    padding-top: 60px;
+}
+.truth .truth_top{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.truth .truth_title{
+    font-size: 82px;
+    font-weight: 700;
+    line-height: 98.4px;
+    text-align: end;
+    text-transform: uppercase;
+    width: 723px;
+}
+.truth .truth_title span{
+    color: #76CE75;
+
+}
+.truth_top .gift_img{
+    margin-left: -180px;
+}
+.truth_top .gift_line-img{
+    position: absolute;
+    display: none;
+    bottom: 150px;
+    right: 0;
+    width: 245px;
+}
+.truth_content {
+    position: relative;
+    display: none;
+}
+
+.truth_content::after{
+    content: '';
+    display: block;
+    position: absolute;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%);
+    border-radius: 60px;
+    top: -2px;
+    left: -2px;
+    z-index: 0;
+}
+.truth_content.active {
+    display: block;
+}
+.truth .truth_block{
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 480px;
+    overflow: hidden;
+    background: var(--creme-white, #F4F1F0);
+    border-radius: 60px;
+    box-shadow: 0px 3px 13.5px 0px #00000040;
+    padding: 25px 34px 0px 63px;
+}
+.truth .truth_success, 
+.truth .truth_error {
+    display: none;
+}
+.truth .truth_success.show, 
+.truth .truth_error.show {
+    display: flex;
+}
+
+.truth_block .truth_line{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 24px;
+}
+.truth_block .truth_line span{
+    border: 1px solid var(--grey-black, #121212);
+    opacity: .6;
+    width: 73px;
+    border-radius: 10px;
+}
+.truth_block .truth_line span.active{
+    opacity: 1;
+}
+.truth_block .truth_block-title{
+    font-weight: 700;
+    font-size: 48px;
+    text-transform: uppercase;
+    color: #121212;
+    margin-bottom: 40px;
+}
+.truth_content-end .truth_block-title,
+.truth_success .truth_block-title{
+    background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.truth_error .truth_block-title{
+    background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.truth_block .truth_block-text{
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: start;
+    gap: 26px;
+}
+.truth_block .truth_end-text{
+    display: flex;
+    flex-direction: column;
+    gap: 21px;
+}
+.truth_block .truth_block-text p{
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 28.8px;
+    max-width: 559px;    
+}
+.truth_block .truth_block-text p span{
+    font-weight: 500;
+}
+.truth_default .truth_block-text p{
+    text-transform: uppercase;
+}
+.truth_error .truth_block-text p,
+.truth_success .truth_block-text p {
+    max-width: 592px;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+}
+.truth_block .truth_info{
+    position: absolute;
+    width: 95%;
+    bottom: 0;
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    margin-top: -100px;
+    z-index: 0;
+}
+.truth_content-end .truth_info{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+.truth_block .truth_links{
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding-bottom: 56px;
+}
+.truth_error .truth_links,
+.truth_success .truth_links{
+    gap: 20px;
+}
+.truth_block .truth_result{
+    display: flex;
+    align-items: center;
+    gap: 23px;
+}
+.truth_block .truth_result img{
+    width: 100%;
+}
+.truth_block .truth_link{
+    width: 141px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 28.8px;
+    text-align: center;
+    color: var(--grey-black, #121212);
+    border: 2px solid var(--grey-black, #121212);
+    border-radius: 48px;
+}
+
+.truth_content-end .truth_info img{
+    margin-right: -34px;
+}
+.truth_content-end .truth_block .truth_link{
+    width: 221px;
+}
+
+.truth_content-end .truth_xn{
+    position: relative;
+    width: 270px;
+    height: 158px;
+    background-image: url(../img/xn-border.svg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.truth_points {
+    font-size: 450%;
+    font-weight: 700;
+}
+.truth_content-wrap {
+    z-index: 5;
+    min-width: 800px;
+}
+.truth_pictures_brain {
+    display: block;
+    position: absolute;
+    top: -25%;
+    right: -3%;
+    z-index: 11;
+}
+.truth_pictures_sale {
+    display: block;
+    position: absolute;
+    bottom: 5%;
+    z-index: 0;
+    left: 10%;
+}
+.truth_pictures_arrow {
+    display: block;
+    position: absolute;
+    top: 5%;
+    left: 28%;
+}
+.main-truth_title {
+    font-weight: 700;
+    font-size: 64px;
+    text-transform: uppercase;
+    color: #121212;
+}
+.main-truth_title span {
+    font-weight: 700;
+    font-size: 48px;
+    text-transform: uppercase;
+    color: #121212;
+}
 
 
 

wp-content/themes/cosmopet/static/js/new-front-page.js

@@ -218,6 +218,98 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // cosmopet x slider
+
+    let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", {
+        slidesPerView: 2.5,
+        spaceBetween: 43,
+        navigation: {
+            nextEl: '.cosmopet-next',
+            prevEl: '.cosmopet-prev'
+        },
+        breakpoints: {
+            300: {
+                slidesPerView: 1,
+                spaceBetween: 200,
+            },
+            776: {
+                slidesPerView: 2,
+                spaceBetween: 30,
+            },
+            991: {
+                slidesPerView: 2.4,
+                spaceBetween: '5%',
+            },
+            1400: {
+                slidesPerView: 3,
+                spaceBetween: 37,
+            },
+        }
+    });
+
+    // Gallery slider
+
+    new Swiper('.mosaic-swiper', {
+        slidesPerView: 'auto',
+        spaceBetween: 20,
+        freeMode: true,
+        grabCursor: true
+    });
+
+    // Quiz
+    const truthContents = document.querySelectorAll('.truth_content');
+    let currentIndex = 0;
+    let correctAnswers = 0;
+
+    truthContents.forEach(content => {
+        const successBtn = content.querySelector('.success_btn'); 
+        const errorBtn = content.querySelector('.error_btn');
+        const nextBtn = content.querySelectorAll(".next_btn");
+        const truthSuccess = content.querySelector('.truth_success');
+        const truthError = content.querySelector('.truth_error');
+        const truthDefault = content.querySelector('.truth_default');
+
+        if (successBtn) {
+            successBtn.addEventListener('click', function () {
+                truthDefault.style.display = 'none';
+                truthSuccess.classList.add('show');
+                correctAnswers++;
+            });
+        }
+
+        if (errorBtn) {
+            errorBtn.addEventListener('click', function () {
+                truthDefault.style.display = 'none';
+                truthError.classList.add('show');
+            });
+        }
+
+        if (nextBtn) {
+            nextBtn.forEach(btn => {
+                btn.addEventListener('click', function () {
+                    truthSuccess.classList.contains('show') ? truthSuccess.classList.remove('show') : truthError.classList.remove('show');
+                    content.classList.remove('active');
+
+                    currentIndex++;
+                    
+                    if (currentIndex < truthContents.length) {
+                        truthContents[currentIndex].classList.add('active');
+                    }
+                    if (truthContents.length - currentIndex == 1) {
+                        truthContents[currentIndex].querySelector(".truth_points-corrects").innerHTML = correctAnswers;
+                        truthContents[currentIndex].querySelector(".truth_points-all").innerHTML = currentIndex ;
+                    }
+                })
+            });
+        }
+
+        // Initial visibility
+        if (truthDefault) {
+            truthDefault.style.display = 'block';
+        }
+    });
+
+
 });
 
 

wp-content/themes/cosmopet/templates/_pages/new-front-page.twig

@@ -11,6 +11,10 @@
   {% include '/templates/_pages/new-front-page/main-food.twig' %}
   {% include '/templates/_pages/new-front-page/main-reviews.twig' %}
   {% include '/templates/_pages/new-front-page/main-treats.twig' %}
+  {% include '/templates/_pages/new-front-page/main-blog.twig' %}
+  {% include '/templates/_pages/new-front-page/main-quiz.twig' %}
   {% include '/templates/_pages/new-front-page/main-media.twig' %}
   {% include '/templates/_pages/new-front-page/main-bot.twig' %}
+  {% include '/templates/_pages/new-front-page/main-cosmopetx.twig' %}
+  {# {% include '/templates/_pages/new-front-page/main-gallery.twig' %} #}
 {% endblock %}

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig

@@ -0,0 +1,25 @@
+<section class="main-cosmopetx cosmopet-x">
+    <div class="new-container">
+        <h2 class="main-reviews_title">{{ other_post.meta('cosmopet_x_blocktitle') }}</h2>
+        <div class="cosmopet-x__swiper">
+            <div class="swiper-wrapper">
+                {% for slide in other_post.meta('cosmopet_x_slider') %}
+                <div class="swiper-slide">
+                    <div class="cosmopet-x__item">
+                        <img class="cosmopet-x__bg" src="{{ slide.img_1 }}" alt="">
+                        <img class="cosmopet-x__top" src="{{ slide.img_2 }}" alt="">
+                        <div class="cosmopet-x__body">
+                            <div class="cosmopet-x__heading">{{ slide.title }}</div>
+                            <a href="{{ slide.url }}" class="cosmopet-x__btn">подробнее</a>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            <div class="slider-arrows">
+                <button class="slider-arrow slider-arrow-prev cosmopet-prev"></button>
+                <button class="slider-arrow slider-arrow-next cosmopet-next"></button>
+            </div>
+        </div>
+    </div>
+</section>

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig

@@ -0,0 +1,42 @@
+<section class="main-gallery">
+    <div class="new-container">
+        <h2 class="main-reviews_title">{{ other_post.meta('cosmopet_x_blocktitle') }}</h2>
+        <div class="swiper mosaic-swiper">
+            <div class="swiper-wrapper">
+
+                <div class="swiper-slide">
+                    <div class="gallery-container">
+                        <div class="gallery-block block-1">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/2.png" alt="" class="small">
+                        </div>
+                        <div class="gallery-block block-2">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
+                        </div>
+                        <div class="gallery-block block-1">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="small">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="large">
+                        </div>
+                        <div class="gallery-block block-3">
+                            <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="swiper-slide">
+                    <div class="gallery-grid">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/10.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/7.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/8.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/nz6_0121-kopiya-1.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/nz6_9955-1.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/11.png" alt="">
+                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/dscf6363-copy-2-inst-1.png" alt="">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</section>

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig

@@ -0,0 +1,396 @@
+<section class="truth sec-bf">
+    <div class="new-container">
+        <h2 class="main-truth_title">проверьте свои знания<br><span>и получите</span></h2>
+        <div class="truth_top">
+            
+        <div class="truth_pictures">
+            <img src="/wp-content/uploads/2025/07/layer-0-1.png" class="truth_pictures_present">
+            <img src="/wp-content/uploads/2025/07/arrow-4.png" class="truth_pictures_arrow">
+            <img src="/wp-content/uploads/2025/07/frame-1321316166.png" class="truth_pictures_sale">
+            <img src="/wp-content/uploads/2025/07/a_simple_icon_of_light_pink_brain_and_a_rockets_flame_at_bottom_icon_flying_background_is_uniform_da_b230abcd-ab16-4226-90a0-2818b496ae19.png" class="truth_pictures_brain">
+        </div>
+
+        <div class="truth_content-wrap">
+            <div class="truth_content truth_content1 active">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_line">
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ q_1.title }}</div>
+                    <div class="truth_block-text">
+                        <img src="{{ theme.link }}/static/img/truth_num.svg"
+                            alt="">
+                        <p>{{ q_1.text }}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
+                            <button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
+                        </div>
+                        <img src="/wp-content/uploads/2025/07/freepik__the-style-is-3d-model-with-octane-render-volumetri__61883_upscayl_2x_realesrgan-x4plus-1.png" alt="{{ q_1.img.alt }}">
+                    </div>
+                </div>
+
+                <div class="truth_success truth_block">
+                    <div class="truth_line">
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{ q_1.text_true }}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_succes-img.png"
+                            alt="">
+                    </div>
+                </div>
+
+                <div class="truth_error truth_block">
+                    <div class="truth_line">
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p><p>{{ q_1.text_true }}</p></p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_error.png"
+                            alt="">
+                    </div>
+                </div>
+            </div>
+
+            <div class="truth_content truth_content2">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_line">
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                
+                    <div class="truth_block-title"><p>{{ q_2.title }}</p></div>
+                    <div class="truth_block-text">
+                        <img src="{{ theme.link }}/static/img/truth_num2.svg"
+                            alt="">
+                        <p><p>{{ q_2.text }}</p></p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
+                            <button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
+                        </div>
+                        <img src="{{ q_2.img.url }}"
+                            alt="{{ q_2.img.alt }}">
+                    </div>
+                </div>
+
+                <div class="truth_success truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_2.text_true}}
+                        </p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_succes-img.png"
+                            alt="">
+                    </div>
+                </div>
+
+                <div class="truth_error truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_2.text_true}}
+                        </p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_error.png"
+                            alt="">
+                    </div>
+                </div>
+            </div>
+
+            <div class="truth_content truth_content3">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{q_2.title}}</div>
+                    <div class="truth_block-text">
+                        <img src="{{ theme.link }}/static/img/truth_num3.svg"
+                            alt="">
+                        <p>{{q_3.text}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Правда') }}</button>
+                            <button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Миф') }}</button>
+                        </div>
+                        <img src="{{ q_3.img.url }}" alt="">
+                    </div>
+                </div>
+
+                <div class="truth_success truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_3.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+
+                            <div class="truth_result">
+                            {% for img in q3.img_list %}
+                                <img src="{{ item.img.url }}"
+                                    alt="{{ item.img.alt }}">
+                            {% endfor %}
+                                
+                            </div>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_succes-img.png"
+                            alt="">
+                    </div>
+                </div>
+
+                <div class="truth_error truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_3.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                            <div class="truth_result">
+                                        {% for img in q3.img_list_err %}
+                                <img src="{{ item.img.url }}"
+                                    alt="{{ item.img.alt }}">
+                            {% endfor %}
+                            </div>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_error.png"
+                            alt="">
+                    </div>
+                </div>
+            </div>
+
+            <div class="truth_content truth_content4">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{q_4.text_title}}</div>
+                    <div class="truth_block-text">
+                        <img src="{{ theme.link }}/static/img/truth_num4.svg"
+                            alt="">
+                        <p>{{q_4.text}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Правда') }}</button>
+                            <button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Миф') }}</button>
+                        </div>
+                        <img src="{{q_4.img.url}}"
+                            alt="{{q_4.img.alt}}">
+                    </div>
+                </div>
+
+                <div class="truth_success truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_4.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_succes-img.png"
+                            alt="">
+                    </div>
+                </div>
+
+                <div class="truth_error truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                        <span></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_4.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_error.png"
+                            alt="">
+                    </div>
+                </div>
+            </div>
+
+            <div class="truth_content truth_content5">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                    </div>
+                    <div class="truth_block-title">{{q_5.title}}</div>
+                    <div class="truth_block-text">
+                        <img src="{{ theme.link }}/static/img/truth_num5.svg"
+                            alt="">
+                        <p>{{q_5.text}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
+                            <button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
+                        </div>
+                        <img class="img--desktop2"
+                            src="{{q_5.img.url}}"
+                            alt="{{q_5.img.alt}}">
+                        <img class="img--mobile" src="{{ theme.link }}/static/img/quiz/birds_mobile.png" alt="">            </div>
+                </div>
+
+                <div class="truth_success truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p>{{q_5.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_succes-img.png"
+                            alt="">
+                    </div>
+                </div>
+
+                <div class="truth_error truth_block">
+                    <div class="truth_line">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span class="active"></span>
+                    </div>
+                    <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
+                    <div class="truth_block-text">
+                        <p{{q_5.text_true}}</p>
+                    </div>
+                    <div class="truth_info">
+                        <div class="truth_links">
+                            <button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
+                        </div>
+                        <img src="{{ theme.link }}/static/img/truth_error.png"
+                            alt="">
+                    </div>
+                </div>
+            </div>
+
+            <div class="truth_content truth_content-end">
+                <div class="truth_block truth_default" style="display: block;">
+                    <div class="truth_block-title">{{ function('pll_e', 'ваш результат') }}</div>
+                    <div class="truth_block-text">
+                        <div class="truth_xn">
+                            <span class="truth_points truth_points-corrects"></span>
+                            <span class="truth_points truth_points-slash">/</span>
+                            <span class="truth_points truth_points-all"></span>
+                        </div>
+                        <div class="truth_end-text truth_end-text--before">
+                            <p>{{promo_text}}
+                            </p>
+                            <div class="truth__end-promo">{{promo}}</div>
+                            <div class="truth__end-btns">
+                                <button class="truth__end-btn --copy --white"
+                                    data-copy="{{promo}}"><span>{{ function('pll_e', 'Скопировать') }}</span><span
+                                        class="copied">{{ function('pll_e', 'Скопировано') }}</span></button>
+                                <a href="/shop/" class="truth__end-btn --black"><span>{{ function('pll_e', 'В магазин') }} </span></a>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>