From 8d284648ff6262806795d775b28e7701788747f4 Mon Sep 17 00:00:00 2001 From: Dekart Deploy Bot Date: Mon, 29 Jun 2026 08:49:10 +0000 Subject: [PATCH] reviews-page --- .../themes/dekart/assets/css/reviews-page.css | 227 ++++++++++++++++-- wp-content/themes/dekart/functions.php | 18 +- wp-content/themes/dekart/page-reviews.php | 70 ++++-- 3 files changed, 282 insertions(+), 33 deletions(-) diff --git a/wp-content/themes/dekart/assets/css/reviews-page.css b/wp-content/themes/dekart/assets/css/reviews-page.css index d937ec5..ae7c86a 100644 --- a/wp-content/themes/dekart/assets/css/reviews-page.css +++ b/wp-content/themes/dekart/assets/css/reviews-page.css @@ -81,26 +81,199 @@ min-width: 0; } -/* ─── Фото ─── */ -.reviews-hero__image { - flex: 0 0 340px; +/* ─── Фото — pksh-стиль с анимацией ─── */ +.reviews-hero__visual { + position: relative; + flex: 0 0 auto; + width: 380px; + height: 420px; margin-left: auto; margin-right: 20px; - border-radius: var(--card-radius); + display: flex; + align-items: center; + justify-content: center; +} +/* Glow backdrop — адаптирован под тёмный фон hero (оранжевый/бирюзовый) */ +.reviews-hero__visual-glow { + position: absolute; + width: 420px; + height: 420px; + border-radius: 50%; + background: radial-gradient(circle, rgba(232,117,58,0.12) 0%, rgba(59,178,160,0.06) 30%, transparent 65%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} +/* Photo wrapper */ +.reviews-hero__photo-wrap { + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; +} +/* Decorative circular photo frame */ +.reviews-hero__photo-frame { + position: relative; + width: 320px; + height: 320px; + border-radius: 50%; overflow: hidden; - box-shadow: var(--card-shadow-hover); - transform: rotate(1deg); - transition: transform var(--transition-normal); - aspect-ratio: 4 / 3; + box-shadow: + 0 20px 60px rgba(232, 117, 58, 0.15), + 0 8px 24px rgba(0, 0, 0, 0.2), + inset 0 0 0 4px rgba(255, 255, 255, 0.6); + border: 6px solid rgba(255, 255, 255, 0.8); + animation: reviewsPhotoFloat 6s ease-in-out infinite; } -.reviews-hero__image:hover { - transform: rotate(0deg) scale(1.01); -} -.reviews-hero__image img { +.reviews-hero__photo { width: 100%; height: 100%; - display: block; object-fit: cover; + display: block; +} +/* Accent ring — pulsing */ +.reviews-hero__photo-ring { + position: absolute; + width: 360px; + height: 360px; + border-radius: 50%; + border: 2px solid rgba(232, 117, 58, 0.12); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + animation: reviewsRingPulse 4s ease-in-out infinite; +} +/* Floating badges — адаптированы под тёмный фон */ +.reviews-hero__float { + position: absolute; + display: flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + border-radius: 100px; + font-family: 'Roboto', sans-serif; + font-size: 13px; + font-weight: 600; + white-space: nowrap; + z-index: 3; + animation: reviewsFloat 5s ease-in-out infinite; + backdrop-filter: blur(8px); +} +.reviews-hero__float--1 { + top: 4%; + right: -8px; + animation-delay: 0s; + background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); + color: rgba(255,255,255,0.92); + border: 1px solid rgba(255,255,255,0.12); +} +.reviews-hero__float--2 { + bottom: 22%; + left: -24px; + animation-delay: 1.2s; + background: linear-gradient(135deg, rgba(232,117,58,0.20), rgba(232,117,58,0.08)); + color: #FFD4B8; + border: 1px solid rgba(232,117,58,0.15); +} +.reviews-hero__float--3 { + bottom: 4%; + right: 6%; + animation-delay: 2.4s; + background: linear-gradient(135deg, rgba(59,178,160,0.20), rgba(59,178,160,0.08)); + color: #B8E6DF; + border: 1px solid rgba(59,178,160,0.15); +} +.reviews-hero__float--4 { + top: 48%; + left: -28px; + animation-delay: 3.5s; + background: linear-gradient(135deg, rgba(255,215,0,0.20), rgba(255,183,77,0.08)); + color: #FFE0A0; + border: 1px solid rgba(255,215,0,0.15); + font-size: 12px; + padding: 8px 16px; +} +.reviews-hero__float--4 strong { + color: #FFD43E; +} +.reviews-hero__float-icon { + font-size: 18px; + line-height: 1; +} +/* Sparkle particles */ +.reviews-hero__sparkle { + position: absolute; + border-radius: 50%; + pointer-events: none; + z-index: 1; + animation: reviewsSparkleFloat 6s ease-in-out infinite; + background: rgba(255,255,255,0.3); +} +.reviews-hero__sparkle:nth-child(1) { top: 15%; left: 10%; width: 4px; height: 4px; animation-delay: 0s; background: #E8753A; box-shadow: 0 0 8px rgba(232,117,58,0.4); } +.reviews-hero__sparkle:nth-child(2) { top: 30%; right: 18%; width: 6px; height: 6px; animation-delay: 1.2s; } +.reviews-hero__sparkle:nth-child(3) { bottom: 35%; left: 5%; width: 3px; height: 3px; animation-delay: 2s; } +.reviews-hero__sparkle:nth-child(4) { top: 55%; right: 8%; width: 5px; height: 5px; animation-delay: 0.8s; } +.reviews-hero__sparkle:nth-child(5) { bottom: 12%; left: 20%; width: 4px; height: 4px; animation-delay: 3s; } + +/* ─── Decorative shapes (как на pksh) ─── */ +.reviews-hero__deco { + position: absolute; + border-radius: 50%; + pointer-events: none; + z-index: 1; +} +.reviews-hero__deco--1 { + width: 40px; height: 40px; + background: rgba(232, 117, 58, 0.12); + top: 12%; + left: 2%; + animation: reviewsDecoFloat 6s ease-in-out infinite; +} +.reviews-hero__deco--2 { + width: 24px; height: 24px; + background: rgba(59, 178, 160, 0.14); + bottom: 40%; + right: -6px; + animation: reviewsDecoFloat 8s ease-in-out infinite 1s; +} +.reviews-hero__deco--3 { + width: 16px; height: 16px; + background: rgba(232, 117, 58, 0.16); + top: 48%; + left: -8px; + animation: reviewsDecoFloat 7s ease-in-out infinite 2s; +} +.reviews-hero__deco--4 { + width: 10px; height: 10px; + background: rgba(59, 178, 160, 0.20); + bottom: 15%; + right: -4px; + animation: reviewsDecoFloat 5s ease-in-out infinite 3s; +} +@keyframes reviewsDecoFloat { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-12px) scale(1.1); } +} + +/* ─── Animations ─── */ +@keyframes reviewsPhotoFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} +@keyframes reviewsRingPulse { + 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } + 50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.6; } +} +@keyframes reviewsFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +@keyframes reviewsSparkleFloat { + 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } + 50% { transform: translateY(-20px) scale(1.4); opacity: 0.9; } } /* ─── H1 ─── */ @@ -1187,13 +1360,28 @@ .reviews-hero__wrapper { flex-direction: column; } - .reviews-hero__image { + .reviews-hero__visual { flex: none; width: 100%; - max-width: 400px; + max-width: 360px; + height: auto; + min-height: 320px; margin-left: auto; margin-right: auto; } + .reviews-hero__photo-frame { + width: 260px; + height: 260px; + border-width: 5px; + } + .reviews-hero__photo-ring { + width: 300px; + height: 300px; + } + .reviews-hero__float--1 { top: 4%; right: 0; font-size: 12px; padding: 6px 14px; } + .reviews-hero__float--2 { bottom: 18%; left: -12px; font-size: 12px; padding: 6px 14px; } + .reviews-hero__float--3 { bottom: 2%; right: 5%; font-size: 12px; padding: 6px 14px; } + .reviews-hero__float--4 { display: none; } .reviews-hero__h1 { font-size: 32px; } @@ -1211,7 +1399,7 @@ .page-reviews .container { padding: 0 20px; } - .reviews-hero__image { + .reviews-hero__visual { display: none; } .reviews-hero__content { @@ -1917,7 +2105,12 @@ .reviews-ext-platforms__card, .reviews-loadmore__btn, .social_item, - .reviews-hero__image { + .reviews-hero__visual, + .reviews-hero__photo-frame, + .reviews-hero__photo-ring, + .reviews-hero__float, + .reviews-hero__sparkle, + .reviews-hero__deco { transition: none !important; transform: none !important; animation: none !important; diff --git a/wp-content/themes/dekart/functions.php b/wp-content/themes/dekart/functions.php index af85f87..08410fc 100644 --- a/wp-content/themes/dekart/functions.php +++ b/wp-content/themes/dekart/functions.php @@ -998,7 +998,11 @@ function add_carbon() { ->where('post_template', '=', 'page-reviews.php') ->add_tab('🧑‍🏫 Hero (первый экран)', array( Field::make( 'html', 'reviews_hero_tab_desc', '' ) - ->set_html( '

H1 и подзаголовок — статические в шаблоне. Здесь только метрики и CTA.

' ), + ->set_html( '

H1 формируется автоматически из города. Подзаголовок, метрики и CTA настраиваются ниже.

' ), + Field::make( 'text', 'reviews_hero_subtitle', 'Подзаголовок (под H1)' ) + ->set_default_value( 'Родители доверяют нам самое главное — вот что они говорят о нас' ) + ->set_width( 100 ) + ->set_help_text( 'Текст под заголовком H1. Отображается белым на тёмном фоне hero.' ), Field::make( 'separator', 'reviews_metric_sep', 'Метрики доверия' ), Field::make( 'text', 'reviews_hero_metric_1_number', 'Метрика 1 — число' ) ->set_default_value( '500+' ) @@ -1032,6 +1036,18 @@ function add_carbon() { ->set_default_value( 'отзывов о школе' ) ->set_width( 70 ) ->set_help_text( 'Подпись к цифре 4. Пример: «отзывов о школе», «педагогов», «лет на рынке».' ), + Field::make( 'separator', 'reviews_hero_badges_sep', '🏷️ Плавающие подписи (у фото)' ), + Field::make( 'complex', 'reviews_hero_badges', 'Подписи-плашки вокруг фото' ) + ->set_layout( 'tabbed-horizontal' ) + ->set_help_text( 'До 4 подписей, которые отображаются вокруг фото в hero-секции. Каждая запись: иконка (emoji) + текст. Позиции фиксированы: 1 = верх-право, 2 = лево-середина, 3 = низ-право, 4 = лево-верх. Если записей меньше 4 — отсутствующие не выводятся.' ) + ->add_fields( array( + Field::make( 'text', 'badge_icon', 'Иконка (emoji)' ) + ->set_width( 20 ) + ->set_help_text( 'Один символ emoji для плашки. Примеры: ⭐ 🎓 ❤️ 🌟 🎮 📚 👩‍🏫 🏆' ), + Field::make( 'textarea', 'badge_text', 'Текст подписи' ) + ->set_width( 80 ) + ->set_help_text( 'Короткий текст плашки. Можно использовать HTML: <strong>, <br>. Примеры: «Рейтинг 4.9 на Яндексе», «500+ выпускников», «Родители рекомендуют», «Школа <strong>№1</strong> в районе».' ), + )), // CTA кнопка — статическая в шаблоне, открывает модалку Bitrix24 )) ->add_tab('📝 Вступление (SEO-текст)', array( diff --git a/wp-content/themes/dekart/page-reviews.php b/wp-content/themes/dekart/page-reviews.php index 18986aa..bde84ce 100644 --- a/wp-content/themes/dekart/page-reviews.php +++ b/wp-content/themes/dekart/page-reviews.php @@ -103,6 +103,8 @@ $branch_price_range = get_option( 'branch_price_range', '' ); $branch_social = get_option( 'branch_social' ) ?: carbon_get_theme_option( 'social_media' ) ?: array(); $branch_messengers = get_option( 'branch_messengers', array() ); +$hero_subtitle = carbon_get_post_meta( $post_id, 'reviews_hero_subtitle' ) ?: 'Родители доверяют нам самое главное — вот что они говорят о нас'; + $metric_1_num = carbon_get_post_meta( $post_id, 'reviews_hero_metric_1_number' ); $metric_1_lbl = carbon_get_post_meta( $post_id, 'reviews_hero_metric_1_label' ); $metric_2_num = carbon_get_post_meta( $post_id, 'reviews_hero_metric_2_number' ); @@ -112,6 +114,8 @@ $metric_3_lbl = carbon_get_post_meta( $post_id, 'reviews_hero_metric_3_label' ) $metric_4_num = carbon_get_post_meta( $post_id, 'reviews_hero_metric_4_number' ); $metric_4_lbl = carbon_get_post_meta( $post_id, 'reviews_hero_metric_4_label' ); +$hero_badges = carbon_get_post_meta( $post_id, 'reviews_hero_badges' ); + $results_title = carbon_get_post_meta( $post_id, 'reviews_results_title' ) ?: 'Декарт в цифрах'; $results_items = carbon_get_post_meta( $post_id, 'reviews_results' ); @@ -208,7 +212,9 @@ $jsonld_social = array_values( array_unique( $jsonld_social ) );

Отзывы о частной школе «Декарт»

-

Родители доверяют нам самое главное — вот что они говорят о нас

+ +

+ -
- 'high', - 'width' => $thumb_data[1], - 'height' => $thumb_data[2], - 'loading' => 'eager', - ) ); - } else { - echo get_the_post_thumbnail( get_the_ID(), 'large', array( 'fetchpriority' => 'high' ) ); - } - ?> +
+ + + + +
+
+ 'reviews-hero__photo', + 'fetchpriority' => 'high', + 'loading' => 'eager', + ) ); + ?> +
+ +
+ + + + $badge ) : + $bi = $i + 1; // 1-indexed for CSS class + if ( $bi > 4 ) break; // макс 4 + $icon = $badge['badge_icon'] ?? ''; + $text = $badge['badge_text'] ?? ''; + if ( empty( $text ) ) continue; + ?> +
+ + + + +
+ + + + + + + + + + + + + + +