Task 7199 | пк верстка новой главной страницы

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -1,3 +1,10 @@
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("CraftworkGrotesk-Heavy"),
+      url("../fonts/craftwork/CraftworkGrotesk-Heavy.ttf") format("ttf");
+    font-weight: 900;
+}
+
 @font-face {
     font-family: "Craftwork Grotesk";
     src: local("Craftwork Grotesk Bold"),
@@ -2122,14 +2129,6 @@ textarea{
   width: max-content;
 }
 
-.marketplace {
-  overflow: hidden!important;
-}
-
-.marketplace__swiper {
-  overflow: visible!important;
-}
-
 .about_us-title {
   font-weight: 700;
 }
@@ -2311,3 +2310,8 @@ textarea{
         display: flex !important;
     }
 }
+
+
+a, button{
+  cursor: pointer;
+}

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

@@ -1,6 +1,8 @@
 <section class="main-about">
     <div class="new-container">
-        <div class="main-about_title">{{ main_about_title }}</div>
+        <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">
@@ -8,11 +10,11 @@
             </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">
             <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>
+            <a href="#" class="main-about_banner-btn"><span class="main-about_banner-btn-text">Начать сотрудничество</span><span class="main-about_banner-btn-arrow"></span></a>
         </div>
     </div>
 </section>

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

@@ -19,8 +19,8 @@
         </div>
         <div class="main-blog_wrapper">
             <div class="main-blog_wrapper-most">
-                <a href="#">
+                <a href="#" class="main-blog_wrapper-most-link">
-                    <img src="/wp-content/uploads/2025/07/rectangle-23.png" alt="most-read" class="main-blog_wrapper-most-img">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/6.png" alt="most-read" class="main-blog_wrapper-most-img">
                 </a>    
                 <a href="#">
                     <div class="main-blog_wrapper-most-title">Как рассчитать дневную порцию корма для кошки?</div>

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

@@ -1,3 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0;">
+  <filter id="angled-shadow" x="-200%" y="-200%" width="400%" height="400%">
+    <feOffset in="SourceAlpha" dx="-20" dy="10" result="offset" />
+    <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
+    
+    <!-- Генерируем карту смещения для skew -->
+    <feImage xlink:href="data:image/svg+xml;utf8,
+      <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
+        <linearGradient id='grad' gradientTransform='skewY(20)'>
+          <stop offset='0%' stop-color='white'/>
+          <stop offset='100%' stop-color='black'/>
+        </linearGradient>
+        <rect width='10' height='10' fill='url(%23grad)'/>
+      </svg>"
+      result="displacementMap" />
+    
+    <feDisplacementMap in="blur" in2="displacementMap" scale="10" xChannelSelector="R" yChannelSelector="G" result="skewed" />
+    
+    <feFlood flood-color="black" flood-opacity="0.4" result="color" />
+    <feComposite in="color" in2="skewed" operator="in" result="shadow" />
+    
+    <feMerge>
+      <feMergeNode in="shadow" />
+      <feMergeNode in="SourceGraphic" />
+    </feMerge>
+  </filter>
+</svg>
+
+
 <div class="main-food">
     <div class="new-container">
         <h2 class="main-food_title">сухой гипоаллергенный корм</h2>
@@ -5,25 +34,8 @@
             <div class="main-food_products">
                 <div class="main-food_products-card fish">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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">
                         Рыба, крупные, adult, 15мм, 2кг
@@ -35,25 +47,8 @@
                 </div>
                 <div class="main-food_products-card turkey">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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кг
@@ -65,25 +60,8 @@
                 </div>
                 <div class="main-food_products-card fish">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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">
                         Рыба, крупные, adult, 15мм, 2кг
@@ -95,25 +73,8 @@
                 </div>
                 <div class="main-food_products-card turkey">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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">
                         Индейка, крупные, adult, 15мм, 2кг
@@ -125,25 +86,8 @@
                 </div>
                 <div class="main-food_products-card fish">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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">
                         Рыба, крупные, adult, 15мм, 2кг
@@ -155,25 +99,8 @@
                 </div>
                 <div class="main-food_products-card turkey">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+
-                            <svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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кг">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img 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">
                         Индейка, крупные, adult, 15мм, 2кг
@@ -183,7 +110,9 @@
                         <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
-                <a href="#" class="main-food_link main-about_banner-btn">Вся продукция<img src="/wp-content/uploads/2025/07/group-1000001373-2.png"></a>
+
+                <a href="#" class="main-about_banner-btn"><span class="main-about_banner-btn-text">Вся продукция</span><span class="main-about_banner-btn-arrow"></span></a>
+               
             </div>
             <div class="main-food_reviews">
                 <div class="main-food_reviews-title">Отзывы</div>

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

@@ -1,90 +1,109 @@
+
 <section class="main-gallery">
     <div class="new-container">
         <h2 class="main-gallery_title">COSMOPETS</h2>
-        <div class="swiper mosaic-swiper">
+        <div class="gallery-grid">
-            <div class="swiper-wrapper">
+            <div class="gallery-box gallery-box--1">
-
+                <div class="gallery-card">
-                <div class="swiper-slide">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/1.png" alt="">
-                    <div class="gallery-container">
-                        <div class="gallery-block block-1">
-                            <div class="large">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
                 </div>
                 
-                            <div class="small">
+                <div class="gallery-card ">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/3.png" alt="">
                 </div>
-                            
+                <div class="gallery-card ">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/4.png" alt="">
                 </div>
-                        <div class="gallery-block block-2">
+                <div class="gallery-card ">
-                            <div class="small">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/5.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
                 </div>
-                            
-                            <div class="large">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/06/nz6_1558.jpg" alt="" class="large">
             </div>
-                            
+            <div class="gallery-box gallery-box--2">
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/6.png" alt="">
             </div>
-                        <div class="gallery-block block-1">
+            <div class="gallery-card ">
-                            <div class="large">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/7.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="large">
             </div>
-                            
+            <div class="gallery-card ">
-                            <div class="small">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/8.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="small">
             </div>
-                            
            </div>
-                        <div class="gallery-block block-3">
+           <div class="gallery-box gallery-box--3">
-                            <div class="full-height">
+            <div class="gallery-card ">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/10.png" alt="">
             </div>
-                            
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/11.png" alt="">
             </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/12.png" alt="">
             </div>
+                       <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/12.png" alt="">
             </div>
-                <div class="swiper-slide">
-                    <div class="gallery-container">
-                        <div class="gallery-block block-1">
-                            <div class="large">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
             </div>
-                            
+            <div class="gallery-box gallery-box--4">
-                            <div class="small">
+             <div class="gallery-card ">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/13.png" alt="">
             </div>
-                            
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/14.png" alt="">
             </div>
-                        <div class="gallery-block block-2">
+            <div class="gallery-card ">
-                            <div class="small">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/15.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
             </div>
-                            
+            </div>
-                            <div class="large">
+                        <div class="gallery-box gallery-box--1">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/2.png" alt="" class="large">
+                <div class="gallery-card">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/1.png" alt="">
                 </div>
                 
+                <div class="gallery-card ">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/3.png" alt="">
                 </div>
-                        <div class="gallery-block block-1">
+                <div class="gallery-card ">
-                            <div class="large">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/4.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="large">
                 </div>
-                            
+                <div class="gallery-card ">
-                            <div class="small">
+                    <img src="/wp-content/themes/cosmopet/static/img/new-front/5.png" alt="">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="small">
                 </div>
-                            
             </div>
-                        <div class="gallery-block block-3">
+            <div class="gallery-box gallery-box--2">
-                            <div class="full-height">
+            <div class="gallery-card ">
-                                <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/6.png" alt="">
             </div>
-                            
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/7.png" alt="">
             </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/8.png" alt="">
             </div>
            </div>
-
+           <div class="gallery-box gallery-box--3">
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/10.png" alt="">
+            </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/11.png" alt="">
+            </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/12.png" alt="">
+            </div>
+                       <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/12.png" alt="">
+            </div>
+            </div>
+            <div class="gallery-box gallery-box--4">
+             <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/13.png" alt="">
+            </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/14.png" alt="">
+            </div>
+            <div class="gallery-card ">
+                <img src="/wp-content/themes/cosmopet/static/img/new-front/15.png" alt="">
+            </div>
             </div>
         </div>
     </div>

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

@@ -1,12 +1,16 @@
 <section 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="swiper-slide">
+      <picture class="main-slider-bg">
+        <source media="(max-width: 820px)" srcset="{{ slide.mobile_slider_bg }}">
+        <img src="{{ slide.main_slider_bg }}" alt="">
+      </picture>
         <div class="new-container">
           <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>
+              <a href="{{ slide.main_slider_link }}" class="main-slider-content_btn"><span class="main-slider-content_btn-text">Купить</span><span class="main-slider-content_btn__arrow"></span></a>
           </div>
         </div>  
       </div>

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

@@ -16,55 +16,21 @@
             <div class="main-food_products">
                 <div class="main-food_products-card lamb">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+              
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-186.png" alt="Ягненок на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-186.png" alt="Ягненок на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Ягненок на косточке, для собак, 100гр
                     </div>
                     <div class="main-food_products-card-bottom">
-                        <div class="main-treats_products-card-bottom-price">1 303 ₽</div>
+                        <div class="main-food_products-card-bottom-price">1 303 ₽</div>
-                        <button class="main-treats_products-cardbottom-btn">В корзину</button>
+                        <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
                 <div class="main-food_products-card beef">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+       
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1862.png" alt="Говядина на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1862.png" alt="Говядина на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Говядина на косточке, для собак, 100гр
@@ -76,122 +42,54 @@
                 </div>
                 <div class="main-food_products-card lamb">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+                
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1863.png" alt="Ягненок на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1863.png" alt="Ягненок на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Ягненок на косточке, для собак, 100гр
                     </div>
                     <div class="main-food_products-card-bottom">
-                        <div class="main-treats_products-card-bottom-price">1 303 ₽</div>
+                        <div class="main-food_products-card-bottom-price">1 303 ₽</div>
-                        <button class="main-treats_products-cardbottom-btn">В корзину</button>
+                        <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
                 <div class="main-food_products-card beef">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+                 
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1864.png" alt="Говядина на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1864.png" alt="Говядина на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Говядина на косточке, для собак, 100гр
                     </div>
                     <div class="main-food_products-card-bottom">
-                        <div class="main-treats_products-card-bottom-price">1 303 ₽</div>
+                        <div class="main-food_products-card-bottom-price">1 303 ₽</div>
-                        <button class="main-treats_products-cardbottom-btn">В корзину</button>
+                        <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
                 <div class="main-food_products-card lamb">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+                 
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1865.png" alt="Ягненок на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1865.png" alt="Ягненок на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Ягненок на косточке, для собак, 100гр
                     </div>
                     <div class="main-food_products-card-bottom">
-                        <div class="main-treats_products-card-bottom-price">1 303 ₽</div>
+                        <div class="main-food_products-card-bottom-price">1 303 ₽</div>
-                        <button class="main-treats_products-cardbottom-btn">В корзину</button>
+                        <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
                 <div class="main-food_products-card beef">
                     <div class="main-food_products-card-img">
-                        <div class="shadow-svg">
+              
-                            <svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <img class="shadowed" src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1866.png" alt="Говядина на косточке, для собак, 100гр">
-                                <g opacity="0.4" filter="url(#filter0_f_2819_3039)">
-                                    <path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
-                                </g>
-                                <defs>
-                                    <filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                                    <feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
-                                    </filter>
-                                    <linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
-                                    <stop />
-                                    <stop offset="1" stop-opacity="0" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
-                        </div>
-                        <img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1866.png" alt="Говядина на косточке, для собак, 100гр">
                     </div>
                     <div class="main-food_products-card-title">
                         Говядина на косточке, для собак, 100гр
                     </div>
                     <div class="main-food_products-card-bottom">
-                        <div class="main-treats_products-card-bottom-price">1 303 ₽</div>
+                        <div class="main-food_products-card-bottom-price">1 303 ₽</div>
-                        <button class="main-treats_products-cardbottom-btn">В корзину</button>
+                        <button class="main-food_products-cardbottom-btn">В корзину</button>
                     </div>
                 </div>
             </div>