Правки верстки новой страницы

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

@@ -14,13 +14,21 @@ main {
     width: 100%;
     height: 100vh;
 }
+.main-slider .new-container {
+    width: 1600px;
+    max-width: 1600px;
+    margin: 0 auto;
+}
 .main-slider .swiper-slide {
     position: relative;
     overflow: hidden;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     padding-top: 85px;
-    padding-left: 60px;
+    padding-left: 0px;
+}
+.main-slider-content {
+    margin-top: 85px;
 }
 .swiper-fade .swiper-slide {
     transition-property: opacity;
@@ -51,7 +59,7 @@ main {
     text-transform: uppercase;
     color: #fff;
     margin-bottom: 32px;
-    width: 45%;
+    width: 50%;
 }
 .main-slider-content_descr {
     font-weight: 700;
@@ -76,6 +84,13 @@ main {
     border: 2px solid #fff;
     border-radius: 100px;
 }
+@media(max-width:1600px) {
+    .main-slider .new-container {
+        width: 1280px;
+        max-width: 1600px;
+        margin: 0 auto;
+    }
+}
 
 /* Main About */
 
@@ -98,6 +113,12 @@ main {
     justify-content: space-between;
     align-items: center;
 }
+.main-about_title {
+    font-weight: 500;
+}
+.main-about_title strong {
+    font-weight: 700;
+}
 .main-about_text {
     font-weight: 500;
     font-size: 20px;
@@ -128,7 +149,7 @@ main {
     font-weight: 400;
     font-size: 16px;
     color: #f2f2f2;
-    max-width: 50%;
+    max-width: 60%;
 }
 .main-about_banner-btn {
     border: 2px solid #f2f2f2;
@@ -136,14 +157,35 @@ main {
     width: 333px;
     height: 48px;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
+    padding-left: 20px;
+    padding-right: 5px;
     gap: 20px;
     font-weight: 400;
     font-size: 20px;
     line-height: 120%;
     color: #fff;
 }
+.text-with-underline {
+  position: relative;
+  display: inline-block;
+}
+.underline {
+  display: block;
+  width: 100%;
+  height: 6px;
+  border-radius: 16px;
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+}
+.underline-1 {
+  background: #eddfab; /* Цвет первого подчеркивания */
+}
+.underline-2 {
+  background: #d9ffcc; /* Цвет второго подчеркивания */
+}
 
 /* Main Why */
 
@@ -180,7 +222,7 @@ main {
     font-weight: 700;
     font-size: 20px;
     color: #121212;
-    max-width: 50%;
+    max-width: 65%;
 }
 .main-why_item-descr {
     font-weight: 500;
@@ -193,6 +235,21 @@ main {
     top: -25%;
     right: 5%;
 }
+.main-why_item-image-2 {
+    position: absolute;
+    top: -33%;
+    right: 5%;
+}
+.main-why_item-image-3 {
+    position: absolute;
+    top: -20%;
+    right: 8%;
+}
+.main-why_item-image-4 {
+    position: absolute;
+    top: -15%;
+    right: 8%;
+}
 .main-why_item-index {
     position: absolute;
     bottom: 3%;

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

@@ -1,4 +1,4 @@
-<div class="main-about">
+<section class="main-about">
     <div class="new-container">
         <div class="main-about_title">{{ main_about_title }}</div>
         <div class="main-about-bottom">
@@ -15,4 +15,4 @@
             <a href="#" class="main-about_banner-btn">Начать сотрудничество<img src="/wp-content/uploads/2025/07/group-1000001373-2.png"></a>
         </div>
     </div>
-</div>
+</section>

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

@@ -1,14 +1,15 @@
-<div class="main-slider swiper-container">
+<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="main-slider-content">
+        <div class="new-container">
-            <h2 class="main-slider-content_title">{{ slide.main_slider_title }}</h2>
+          <div class="main-slider-content">
-            <p class="main-slider-content_descr">{{ slide.main_slider_descr }}</p>
+              <h2 class="main-slider-content_title">{{ slide.main_slider_title }}</h2>
-            <a href="{{ slide.main_slider_link }}" class="main-slider-content_btn">Купить<img src="/wp-content/uploads/2025/07/group-1000001373.png"></a>
+              <p class="main-slider-content_descr">{{ slide.main_slider_descr }}</p>
-        </div>
+              <a href="{{ slide.main_slider_link }}" class="main-slider-content_btn">Купить<img src="/wp-content/uploads/2025/07/group-1000001373.png"></a>
+          </div>
+        </div>  
       </div>
     {% endfor %}
   </div>
-
+</section>
-</div>

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

@@ -1,4 +1,4 @@
-<div class="main-why">
+<section class="main-why">
     <div class="new-container">
         <h2 class="main-why_title">{{ main_why_title }}</h2>
         <div class="main-why_wrapper">
@@ -6,7 +6,7 @@
             <div class="main-why_item" style="background-image: url('{{ item.bg }}'); background-size: cover; background-position: center;">
                 <div class="main-why_item-title">{{ item.title }}</div> 
                 <div class="main-why_item-descr">{{ item.descr }}</div> 
-                <img src="{{ item.image }}" class="main-why_item-image" alt="{{ item.title }}">
+                <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> 
@@ -24,4 +24,4 @@
             </div>
         </div>
     </div>    
-</div>
+</section>