Task 7201 | мобильная верстка новой главной

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

@@ -84,7 +84,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 // Specialists slider
     const specialistsSwiper = new Swiper('.main-specialists_wrapper', {
-        slidesPerView: 3,
+        slidesPerView: 1,
         spaceBetween: 20,
         loop: true,
         autoplay: {
@@ -139,6 +139,19 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+
+        
+    const whySwiper = new Swiper('.main-why_swiper', {
+        slidesPerView: 1,
+        spaceBetween: 20,
+        loop: true,
+        navigation: {
+            nextEl: '.main-why_swiper .swiper-button-next',
+            prevEl: '.main-why_swiper .swiper-button-prev',
+        },
+    });
+
+
     function updatePagination(swiper) {
         const currentSlide = swiper.activeIndex + 1; // С 1
         const totalSlides = swiper.slides.length;
@@ -200,11 +213,11 @@ document.addEventListener('DOMContentLoaded', function() {
         },
         breakpoints: {
             300: {
-                slidesPerView: 1.3,
+                slidesPerView: 1.6,
                 spaceBetween: 20,
             },
             776: {
-                slidesPerView: 1.3,
+                slidesPerView: 1.6,
                 spaceBetween: 40,
             },
             991: {
@@ -232,31 +245,46 @@ document.addEventListener('DOMContentLoaded', function() {
         },
     });
 
+
+    //productswiper
+   const productSwiper = new Swiper('.main-food_products-card-slider', {
+        effect: 'fade',
+        fadeEffect: { crossFade: true },
+        autoplay: { delay: 5000, disableOnInteraction: false },
+        loop: true,
+        pagination: {
+            el: '.swiper-dots',
+            clickable: true,
+            bulletClass: 'swiper-pagination-bullet',
+            bulletActiveClass: 'swiper-pagination-bullet-active',
+        },
+    });
+
     // cosmopet x slider
 
     let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", {
-        slidesPerView: 2.5,
-        spaceBetween: 43,
+        slidesPerView: 3.3,
+        spaceBetween: 40,
         navigation: {
             nextEl: '.cosmopet-next',
             prevEl: '.cosmopet-prev'
         },
                 breakpoints: {
             300: {
-                slidesPerView: 1,
-                spaceBetween: 200,
+                slidesPerView: 1.6,
+                spaceBetween: 20,
             },
             776: {
-                slidesPerView: 2,
-                spaceBetween: 30,
+                slidesPerView: 1.6,
+                spaceBetween: 40,
             },
             991: {
                 slidesPerView: 2.4,
-                spaceBetween: '5%',
+                spaceBetween: 40,
             },
             1400: {
-                slidesPerView: 3,
-                spaceBetween: 37,
+                slidesPerView: 2.8,
+                spaceBetween: 40,
             },
         }
     });

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

@@ -1,4 +1,4 @@
-{% set bodyClass = 'main-np' %}
+{% set bodyClass = 'main-np new-grad' %}
 {% set headerClass = 'white' %}
 {% extends 'layout.twig' %}
 
@@ -10,11 +10,29 @@
   {% include '/templates/_pages/new-front-page/main-reviews.twig' %}
   {% include '/templates/_pages/new-front-page/main-ingredients.twig' %}
   {% include '/templates/_pages/new-front-page/main-specialists.twig' %}
+  <div class="grad-bg">
   {% include '/templates/_pages/new-front-page/main-treats.twig' %}
   {% include '/templates/_pages/new-front-page/main-bot.twig' %}
   {% include '/templates/_pages/new-front-page/main-blog.twig' %}
+  </div>
   {% 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-cosmopetx.twig' %}
   {% include '/templates/_pages/new-front-page/main-gallery.twig' %}
+
+
+  <a class="btn-rocket">
+    <span class="btn-rocket__img"></span>
+    <span class="btn-rocket__link">
+      <span class="btn-rocket__text">узнать больше о e-protein</span>
+    </span>
+  </a>
+
+
+    <a class="btn-ufo">
+    <span class="btn-ufo__img"></span>
+    <span class="btn-ufo__link">
+      <span class="btn-ufo__text">в магазин</span>
+    </span>
+  </a>
 {% endblock %}

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

@@ -26,6 +26,8 @@
                     <div class="main-blog_wrapper-most-title">Как рассчитать дневную порцию корма для кошки?</div>
                 </a>    
                 <p class="main-blog_wrapper-most-descr">Составили гид по дозировкам для сторонников индивидуального подхода. Если вы с утра насыплете полную миску корма</p>
+                <div class="main-blog_wrapper-most-bottom-wrap">
+                <a class="main-blog_wrapper-most-more" href="#">Читать</a>
                 <div class="main-blog_wrapper-most-bottom">
                     <a href="#">
                         <img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
@@ -33,6 +35,7 @@
                     <div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
                     </div>
                 </div>
+            </div>
             <div class="main-blog_wrapper-items">
                 <div class="main-blog_wrapper-items-item" style="background:url('/wp-content/uploads/2025/04/320h180-52-768x432.jpg.webp');background-size:cover;background-position:center;">
                     <a href="#">
@@ -80,5 +83,6 @@
                 </div>
             </div>
         </div>
+        <a href="/blog" class="main-blog_all" >Все статьи</a>
     </p>    
 </section>    

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

@@ -2,15 +2,17 @@
     <div class="new-container">
         <div class="bot-slider swiper-container">
             <div class="swiper-wrapper">
-                <div class="swiper-slide main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173.png');background-position: center;background-size:cover;">
+                <div class="swiper-slide main-bot_wrapper main-bot_wrapper--bot">
                     <div class="main-bot_wrapper-tag">Первый в России</div>
-                    <h2 class="main-bot_wrapper-title">ветеринарный бот с бесплатными вет консультациями</h2>
-                    <a href="#" target="_blank" class="main-bot_wrapper-link">Перейти<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
+                    <h2 class="main-bot_wrapper-title">ветеринарный бот с&nbsp;бесплатными вет консультациями</h2>
+                    <a href="#" target="_blank" class="main-bot_wrapper-link">Перейти</a>
+                    <img class="main-bot_wrapper__img" src="/wp-content/themes/cosmopet/static/img/new-front/banner1.png">
                 </div>
-                <div class="swiper-slide main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173-1.png');background-position: center;background-size:cover;">
-                    <h2 class="main-bot_wrapper-title">Телеграм с инструкцией о том, как понимать своего пета</h2>
-                    <p></p>
-                    <a href="#" target="_blank" class="main-bot_wrapper-link">Перейти в Telegram<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
+                <div class="swiper-slide main-bot_wrapper main-bot_wrapper--tg">
+                    <h2 class="main-bot_wrapper-title">Телеграм с&nbsp;инструкцией о том, как понимать своего пета</h2>
+                    <p>зоопсихология, петхакинг, советы кинологов и&nbsp;ветеринаров</p>
+                    <a href="#" target="_blank" class="main-bot_wrapper-link">Перейти в Telegram</a>
+                    <img class="main-bot_wrapper__img" src="/wp-content/themes/cosmopet/static/img/new-front/banner2.png">
                 </div>
             </div>
             <div class="swiper-pagination"></div>

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

@@ -33,11 +33,29 @@
         <div class="main-food_wrapper">
             <div class="main-food_products">
                 <div class="main-food_products-card fish">
-                    <div class="main-food_products-card-img">
+                <div class="main-food_products-card-slider">
+                <div class="swiper-wrapper">
 
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
                     <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
                 </div>
-                    <div class="main-food_products-card-title">
+                </div>
+                <div class="swiper-dots"></div>
+                </div>
+                
+                </div>
+                    <div class=""><div class="main-food_products-card-title">
                         Рыба, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
@@ -45,70 +63,150 @@
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                     </div>
-                <div class="main-food_products-card turkey">
+                    
+                </div>
+                 <div class="main-food_products-card fish">
+                <div class="main-food_products-card-slider">
+                <div class="swiper-wrapper">
+
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
                 <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-dots"></div>
+                </div>
                 
-                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-turkey.png" alt="Индейка, крупные, adult, 15мм, 2кг">
                 </div>
-                    <div class="main-food_products-card-title">
-                        Индейка, крупные, adult, 15мм, 2кг
+                    <div class=""><div class="main-food_products-card-title">
+                        Рыба, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
                         <div class="main-food_products-card-bottom-price">1 303 ₽</div>
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                     </div>
+                    
+                </div>
                 <div class="main-food_products-card fish">
-                    <div class="main-food_products-card-img">
+                                    <div class="main-food_products-card-slider">
+                <div class="swiper-wrapper">
 
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
                     <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
                 </div>
-                    <div class="main-food_products-card-title">
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-dots"></div>
+                </div>
+                
+                </div>
+                    <div class=""><div class="main-food_products-card-title">
                         Рыба, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
                         <div class="main-food_products-card-bottom-price">1 303 ₽</div>
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
-                    </div>
+                    </div></div>
+                    
                 </div>
                 <div class="main-food_products-card turkey">
+                                    <div class="main-food_products-card-slider">
+                <div class="swiper-wrapper">
+
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
                 <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-dots"></div>
+                </div>
                 
-                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmodog-2kg-front-1.png" alt="Индейка, крупные, adult, 15мм, 2кг">
                 </div>
-                    <div class="main-food_products-card-title">
+                    <div class=""> <div class="main-food_products-card-title">
                         Индейка, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
                         <div class="main-food_products-card-bottom-price">1 303 ₽</div>
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
-                    </div>
+                    </div></div>
+                   
                 </div>
                 <div class="main-food_products-card fish">
+                                    <div class="main-food_products-card-slider">
+                <div class="swiper-wrapper">
+
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
+                <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-slide">
                 <div class="main-food_products-card-img">
+                    <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
+                </div>
+                </div>
+                <div class="swiper-dots"></div>
+                </div>
                 
-                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1-2.png" alt="Рыба, крупные, adult, 15мм, 2кг">
                 </div>
-                    <div class="main-food_products-card-title">
+                    <div class=""><div class="main-food_products-card-title">
                         Рыба, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
                         <div class="main-food_products-card-bottom-price">1 303 ₽</div>
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
-                    </div>
+                    </div></div>
+                    
                 </div>
                 <div class="main-food_products-card turkey">
                     <div class="main-food_products-card-img">
 
                         <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1-3.png" alt="Индейка, крупные, adult, 15мм, 2кг">
                     </div>
-                    <div class="main-food_products-card-title">
+                    <div class=""><div class="main-food_products-card-title">
                         Индейка, крупные, adult, 15мм, 2кг
                     </div>
                     <div class="main-food_products-card-bottom">
                         <div class="main-food_products-card-bottom-price">1 303 ₽</div>
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
-                    </div>
+                    </div></div>
+                    
                 </div>
 
                 <a href="#" class="main-about_banner-btn"><span class="main-about_banner-btn-text">Вся продукция</span><span class="main-about_banner-btn-arrow"></span></a>

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

@@ -1,9 +1,11 @@
 <section class="truth sec-bf">
     <div class="new-container">
-        <h2 class="main-truth_title">проверьте свои знания<br><span>и получите</span></h2>
+        <h2 class="main-truth_title">проверьте свои знания<br><span>и получите</span></h2><img src="/wp-content/themes/cosmopet/static/img/new-front/gft1.png" class="truth_pictures_gft">
+
         <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">
@@ -31,7 +33,7 @@
                             <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 }}">
+                        <img src="/wp-content/themes/cosmopet/static/img/new-front/chicken.png">
                     </div>
                 </div>
 
@@ -66,7 +68,7 @@
                     </div>
                     <div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
                     <div class="truth_block-text">
-                        <p><p>{{ q_1.text_true }}</p></p>
+                        <p>{{ q_1.text_true }}</p>
                     </div>
                     <div class="truth_info">
                         <div class="truth_links">
@@ -92,7 +94,7 @@
                     <div class="truth_block-text">
                         <img src="{{ theme.link }}/static/img/truth_num2.svg"
                             alt="">
-                        <p><p>{{ q_2.text }}</p></p>
+                        <p>{{ q_2.text }}</p>
                     </div>
                     <div class="truth_info">
                         <div class="truth_links">

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

@@ -3,7 +3,7 @@
         <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" style="background-image: url('{{ item.bg }}');" >
                 <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 main-why_item-image-{{ loop.index }}" alt="{{ item.title }}">
@@ -12,6 +12,31 @@
                 </div> 
             </div>
         {% endfor %}    
+        </div>
+
+                <div class="main-why_swiper">
+                <div class="swiper-wrapper">
+        {% for item in main_why_items %}
+            <div class="main-why_item swiper-slide" style="background-image: url('{{ item.bg }}');" >
+                <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 main-why_item-image-{{ loop.index }}" 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_swiper_arrows"><button class="swiper-button-prev swiper-button"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.5 12.364H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M4.5 12.364L10.864 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M4.5 12.364L10.864 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg></button>
+<button class="swiper-button-next swiper-button"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21 12.364H4.5" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M21 12.364L14.636 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M21 12.364L14.636 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg></button></div>
         </div>
         <div class="main-why_bottom">
             <div class="main-why_bottom-text">