Лагерь: Секция Преимущества
This commit is contained in:
Dekart Deploy Bot
parent
50b732ac10
commit
cdadd6d1e7
@ -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;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.suggestions__item {
|
||||
width: calc(33.33% - 34px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 8px 24px rgba(255,107,0,0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.suggestions__item_img {
|
||||
width: 100%;
|
||||
border-radius: 30px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
.suggestions__item:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 14px 32px rgba(255,107,0,0.18);
|
||||
}
|
||||
|
||||
.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-size: 30px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 22px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
color: #1c2b2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.suggestions__item_text {
|
||||
color: #212121;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* suggestions END */
|
||||
/* infograph */
|
||||
.infograph {}
|
||||
.suggestions__doodle {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.infograph-wrapper {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
@media (max-width: 1023px) {
|
||||
.suggestions-wrapper {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
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;
|
||||
|
||||
@ -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' )
|
||||
|
||||
@ -162,22 +162,12 @@ $metrics = [
|
||||
</div>
|
||||
</section>
|
||||
<section class="suggestions">
|
||||
<h2 class="camp_title">Что мы предлагаем</h2>
|
||||
<div class="suggestions-wrapper">
|
||||
<?php
|
||||
$suggestions = carbon_get_post_meta($post_id, 'suggestions' );
|
||||
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>
|
||||
<div class="container">
|
||||
<h2 class="camp_title">Почему родители выбирают Dekart?</h2>
|
||||
<p class="suggestions__subtitle">Потому что дети бегут к нам каждое утро. А возвращаются — с горящими глазами.</p>
|
||||
<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">
|
||||
</div>
|
||||
</section>
|
||||
<section class="infograph">
|
||||
<h2 class="camp_title">С любовью и заботой о каждом</h2>
|
||||
<p class="camp_text">Мы обеспечиваем безопасную и поддерживающую среду, где дети могут раскрывать свой
|
||||
|
||||
Loading…
Reference in New Issue
Block a user