Лагерь: Секция Преимущества

wp-content/themes/dekart/assets/css/camp.css

@@ -37,6 +37,7 @@ p {
    color: #1c2b2d;
    font-size: 34px;
    line-height: 1.25;
+   text-align: center;
    padding-bottom: 32px;
 }
 
@@ -455,51 +456,144 @@ p {
 
 }
 
+
 /* suggestions */
-.suggestions {}
+.suggestions {
+    background: #f8f9fa;
+    padding: 100px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+    .suggestions {
+        width: 100vw;
+        margin-left: calc(-50vw + 50%);
+        margin-right: calc(-50vw + 50%);
+    }
+}
+
+.suggestions .container {
+    max-width: 1216px;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+.suggestions__subtitle {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    line-height: 1.6;
+    color: #555;
+    text-align: center;
+    margin: -30px 0 50px;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+}
 
 .suggestions-wrapper {
-   display: flex;
+    display: grid;
-   flex-wrap: wrap;
+    grid-template-columns: repeat(3, 1fr);
-   gap: 50px;
+    gap: 30px;
 }
 
 .suggestions__item {
-   width: calc(33.33% - 34px);
+    background: #fff;
+    border-radius: 20px;
+    padding: 28px;
+    box-shadow: 0 8px 24px rgba(255,107,0,0.12);
     display: flex;
     flex-direction: column;
-   gap: 10px;
+    align-items: center;
+    text-align: center;
+    gap: 16px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.suggestions__item_img {
+.suggestions__item:hover {
-   width: 100%;
+    transform: translateY(-6px);
-   border-radius: 30px;
+    box-shadow: 0 14px 32px rgba(255,107,0,0.18);
-   height: 200px;
+}
-   object-fit: cover;
+
+.suggestions__item-icon-wrap {
+    width: 72px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255,107,0,0.1);
+    border-radius: 16px;
+    flex-shrink: 0;
+}
+
+.suggestions__item-icon {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
 }
 
 .suggestions__item_title {
-   color: #212121;
+    font-family: "Montserrat", sans-serif;
-   font-size: 30px;
+    font-size: 22px;
     line-height: 1.25;
     font-weight: 600;
-   flex: 1;
+    color: #1c2b2d;
+    margin: 0;
 }
 
 .suggestions__item_text {
-   color: #212121;
+    font-family: "Inter", sans-serif;
-   font-size: 18px;
+    font-size: 16px;
-   line-height: 1.3;
+    line-height: 1.5;
+    color: #555;
+    margin: 0;
 }
 
-/* suggestions END */
+.suggestions__doodle {
-/* infograph */
+    position: absolute;
-.infograph {}
+    bottom: 20px;
+    right: 20px;
+    width: 80px;
+    height: 80px;
+    opacity: 0.12;
+    pointer-events: none;
+}
 
-.infograph-wrapper {
+@media (max-width: 1023px) {
-   margin-top: 30px;
+    .suggestions-wrapper {
-   display: flex;
+        grid-template-columns: repeat(2, 1fr);
-   gap: 40px;
+        gap: 24px;
+    }
+    .suggestions__item_title {
+        font-size: 20px;
+    }
+}
+
+@media (max-width: 767px) {
+    .suggestions {
+        padding: 60px 0;
+    }
+    .suggestions__subtitle {
+        font-size: 18px;
+        margin: -20px 0 36px;
+        padding: 0 20px;
+    }
+    .suggestions-wrapper {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    .suggestions__item {
+        padding: 24px;
+    }
+    .suggestions__item_title {
+        font-size: 20px;
+    }
+    .suggestions__item_text {
+        font-size: 15px;
+    }
+    .suggestions__doodle {
+        display: none;
+    }
 }
 
 .infograph__item {
@@ -1453,29 +1547,6 @@ p {
       max-width: 71.67vw;
    }
 
-   .suggestions-wrapper {
-      gap: 4.17vw;
-   }
-
-   .suggestions__item {
-      width: calc(33.33% - 2.83vw);
-      gap: .83vw;
-   }
-
-   .suggestions__item_img {
-      border-radius: 2.5vw;
-      height: 16.67vw;
-   }
-
-   .suggestions__item_title {
-      font-size: 2.5vw;
-   }
-
-   .suggestions__item_text {
-      font-size: 1.5vw;
-   }
-
-   .infograph-wrapper {
       margin-top: 2.5vw;
       gap: 3.33vw;
    }
@@ -1981,22 +2052,6 @@ p {
       padding: 0 15px;
    }
 
-   .suggestions-wrapper {
-      gap: 0;
-      flex-direction: column;
-   }
-
-   .suggestions__item {
-      width: 100%;
-   }
-
-   .suggestions__item_title {
-      font-size: 22px;
-   }
-
-   .suggestions__item_text {
-      font-size: 16px;
-   }
 
    .infograph-wrapper {
       margin-top: 0;

wp-content/themes/dekart/functions.php

@@ -598,6 +598,20 @@ function add_carbon() {
 				->set_help_text( 'Краткий текст о лагере. Выводится на странице лагеря после Hero-секции.' )
 				->set_default_value( 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.' ),
 		))
+		->add_tab('🏭 Преимущества', array(
+			Field::make( 'complex', 'suggestions', 'Блок «Почему выбирают нас»' )
+				->set_layout( 'tabbed-horizontal' )
+				->set_help_text( '3–6 преимуществ с иконкой, заголовком и описанием.' )
+				->add_fields( array(
+					Field::make( 'image', 'suggestions_img', 'Изображение' )
+						->set_help_text( 'Рекомендуемый размер: 335×195 px.' )
+						->set_width( 100 ),
+					Field::make( 'text', 'suggestions_title', 'Заголовок' )
+						->set_width( 100 ),
+					Field::make( 'textarea', 'suggestions_text', 'Описание' )
+						->set_width( 100 ),
+				)),
+		))
 		->add_tab('💰 Программы и цены', array(
 			Field::make( 'separator', 'pricing_sep', 'Цены на пребывание' ),
 			Field::make( 'text', 'price_half_day', 'Стоимость за половину дня (в рублях)' )
@@ -726,20 +740,6 @@ function add_carbon() {
 						->set_width( 80 ),
 				)),
 		))
-		->add_tab('🏭 Преимущества', array(
-			Field::make( 'complex', 'suggestions', 'Блок «Почему выбирают нас»' )
-				->set_layout( 'tabbed-horizontal' )
-				->set_help_text( '3–6 преимуществ с иконкой, заголовком и описанием.' )
-				->add_fields( array(
-					Field::make( 'image', 'suggestions_img', 'Изображение' )
-						->set_help_text( 'Рекомендуемый размер: 335×195 px.' )
-						->set_width( 100 ),
-					Field::make( 'text', 'suggestions_title', 'Заголовок' )
-						->set_width( 100 ),
-					Field::make( 'textarea', 'suggestions_text', 'Описание' )
-						->set_width( 100 ),
-				)),
-		))
 		->add_tab('🚩 Дополнительные баннеры', array(
 			Field::make( 'separator', 'banner1_sep', 'Баннер №1 (между программами и ценами)' ),
 			Field::make( 'image', 'banner_add_img', 'Фоновое изображение баннера №1' )

wp-content/themes/dekart/page-camp.php

@@ -162,21 +162,11 @@ $metrics = [
 	</div>
 </section>
 <section class="suggestions">
-	 <h2 class="camp_title">Что мы предлагаем</h2>
+	<div class="container">
-	 <div class="suggestions-wrapper">
+	<h2 class="camp_title">Почему родители выбирают Dekart?</h2>
-		<?php 
+	<p class="suggestions__subtitle">Потому что дети бегут к нам каждое утро. А возвращаются — с горящими глазами.</p>
-			$suggestions = carbon_get_post_meta($post_id, 'suggestions' );
+	<div class="suggestions-wrapper">		<?php 			$suggestions = carbon_get_post_meta($post_id, 'suggestions' ); 			foreach ($suggestions as $index => $item) { 				$suggestions_img = $item['suggestions_img']; 				$suggestions_title = $item['suggestions_title']; 				$suggestions_text = $item['suggestions_text']; 				$icons = ['/assets/images/doodles/doodle-gears.svg', '/assets/images/doodles/doodle-pencils.svg', '/assets/images/doodles/doodle-star.svg']; 				$icon = $icons[$index % 3]; 			?>				<div class="suggestions__item">					<div class="suggestions__item-icon-wrap">						<?php if ( $suggestions_img ) : ?>							<img class="suggestions__item-icon" src="<?php echo esc_url( wp_get_attachment_url( $suggestions_img ) ); ?>" alt="">						<?php else : ?>							<img class="suggestions__item-icon" src="<?php echo get_template_directory_uri() . $icon; ?>" alt="">						<?php endif; ?>					</div>					<h3 class="suggestions__item_title"><?php echo esc_html( $suggestions_title ); ?></h3>					<p class="suggestions__item_text"><?php echo esc_html( $suggestions_text ); ?></p>				</div>		<?php } ?>	</div>	<img src="<?php echo get_template_directory_uri(); ?>/assets/images/doodles/doodle-circle-orange.svg" alt="" class="suggestions__doodle">
-			foreach ($suggestions as $item) { 
-				$suggestions_img = $item['suggestions_img'];
-				$suggestions_title = $item['suggestions_title'];
-				$suggestions_text = $item['suggestions_text'];
-			?>
-				<div class="suggestions__item">
-				   <img loading="lazy" class="suggestions__item_img" width="335" height="195" src="<?php echo wp_get_attachment_url($suggestions_img); ?>" alt="<?php echo get_post_meta( $suggestions_img, '_wp_attachment_image_alt', true ); ?>">
-				   <h3 class="suggestions__item_title"><?php echo $suggestions_title; ?></h3>
-				   <p class="suggestions__item_text"><?php echo $suggestions_text; ?></p>
 	</div>
-		<?php } ?>
 </section>
 	<section class="infograph">
 		<h2 class="camp_title">С любовью и заботой о каждом</h2>