shkola/wp-content/themes/dekart/template-parts/block-banner.php
2026-06-30 13:31:13 +00:00

184 lines
7.8 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
/**
* Hero section — cinematic split-screen redesign 2026
*
* Fields loaded from Carbon Fields tab "🖼️ Герой (баннер)".
* Город и адрес — из Настроек филиала (branch_city_prep, branch_address).
*
* @package Dekart
*/
$post_id = get_the_ID();
$page_breadcrumbs = carbon_get_post_meta( $post_id, 'page_breadcrumbs' );
// Поля из Carbon Fields (вкладка "🖼️ Герой")
$banner_img_id = carbon_get_post_meta( $post_id, 'banner_image' );
$h1 = carbon_get_post_meta( $post_id, 'banner_h1' );
$subtitle = carbon_get_post_meta( $post_id, 'banner_subtitle' );
$scarcity = carbon_get_post_meta( $post_id, 'banner_scarcity' );
// Город и адрес из Настроек филиала
$branch_city = get_option( 'branch_city_prep', 'в Щёлково' );
$branch_address = get_option( 'branch_address', 'ул. Комсомольская, 11' );
?>
<section class="hero-pksh" aria-label="Hero">
<!-- ── Background layers ── -->
<div class="hero-pksh__bg" aria-hidden="true">
<div class="hero-pksh__blob hero-pksh__blob--1"></div>
<div class="hero-pksh__blob hero-pksh__blob--2"></div>
<div class="hero-pksh__blob hero-pksh__blob--3"></div>
<div class="hero-pksh__pattern"></div>
</div>
<!-- ── Breadcrumbs ── -->
<?php if ( ! empty( $page_breadcrumbs ) ) : ?>
<nav class="hero-pksh__breadcrumbs container" aria-label="Хлебные крошки">
<ul class="breadcrumbs">
<li>
<a href="<?php echo esc_url( home_url() ); ?>/" class="home fa-home" title="Главная страница">
<span style="display:none;">Главная</span>
<svg width="21" height="16" viewBox="0 0 21 16" fill="none">
<path d="M11.6473 10.6896H12.1473V11.1896V15.4691H16.4353C16.5143 15.4691 16.5756 15.4462 16.6432 15.3788C16.7108 15.3113 16.7333 15.2505 16.7333 15.1725V9.36976L10.0513 3.8712L3.36922 9.36976V15.1725C3.36922 15.2505 3.39178 15.3113 3.45937 15.3788C3.52698 15.4462 3.5883 15.4691 3.66723 15.4691H7.95527V11.1896V10.6896H8.45527H11.6473ZM10.3711 1.74407L18.9226 8.86174L19.5643 8.09722L16.9141 5.8987L16.7333 5.74874V5.51388V0.537319H14.5413V2.86272V3.93127L13.7209 3.2466L10.6815 0.709949C10.5114 0.572829 10.3095 0.499981 10.0513 0.499981C9.79293 0.499981 9.59094 0.572914 9.42075 0.710194L0.538196 8.09712L1.17996 8.86174L9.73142 1.74407L10.0513 1.47783L10.3711 1.74407Z" fill="currentColor" stroke="currentColor"/>
</svg>
</a>
</li>
<?php foreach ( $page_breadcrumbs as $index => $item ) :
$breadcrumbs_name = $item['breadcrumbs_name'];
$breadcrumbs_link = $item['breadcrumbs_link'];
$is_last = ( $index === count( $page_breadcrumbs ) - 1 );
?>
<li>
<?php if ( $is_last ) : ?>
<span class="last_item"><?php echo esc_html( $breadcrumbs_name ); ?></span>
<?php else : ?>
<a href="<?php echo esc_url( $breadcrumbs_link ); ?>" title="<?php echo esc_attr( $breadcrumbs_name ); ?>">
<?php echo esc_html( $breadcrumbs_name ); ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</nav>
<?php endif; ?>
<!-- ── Main hero layout: split screen ── -->
<div class="hero-pksh__layout">
<!-- ====== LEFT COLUMN: Content ====== -->
<div class="hero-pksh__content">
<!-- Address pill -->
<div class="hero-pksh__address">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span><?php echo esc_html( $branch_address ); ?> — центр <?php echo esc_html( str_replace( array( 'в ', 'В ' ), '', $branch_city ) ); ?></span>
</div>
<!-- Main headline -->
<h1 class="hero-pksh__title">
<?php echo esc_html( $h1 ?: 'Подготовка к школе в Щёлково' ); ?>
</h1>
<!-- Subtitle -->
<?php if ( '' !== $subtitle ) : ?>
<p class="hero-pksh__subtitle"><?php echo esc_html( $subtitle ); ?></p>
<?php endif; ?>
<!-- CTA + Scarcity -->
<div class="hero-pksh__actions">
<button class="hero-pksh__cta btn-write">Записаться на бесплатное пробное</button>
<div class="hero-pksh__scarcity">
<?php echo wp_kses_post( $scarcity ?: '🔥 Осталось <strong>2 места из 8</strong> в группе 56 лет. Стартуем <strong>1 июня</strong>' ); ?>
</div>
</div>
<!-- Trust bar -->
<div class="hero-pksh__trust">
<div class="hero-pksh__trust-item">
<span class="hero-pksh__trust-icon">⭐</span>
<span class="hero-pksh__trust-label">Рейтинг <strong>4.8</strong></span>
</div>
<div class="hero-pksh__trust-item">
<span class="hero-pksh__trust-icon">🎓</span>
<span class="hero-pksh__trust-label"><strong>500+</strong> выпускников</span>
</div>
<div class="hero-pksh__trust-item">
<span class="hero-pksh__trust-icon">📜</span>
<span class="hero-pksh__trust-label">Гослицензия</span>
</div>
<div class="hero-pksh__trust-item">
<span class="hero-pksh__trust-icon">🛡️</span>
<span class="hero-pksh__trust-label">Гарантия результата</span>
</div>
</div>
</div>
<!-- ====== RIGHT COLUMN: Photo of children + floating badges ====== -->
<div class="hero-pksh__visual">
<!-- Purple glow backdrop -->
<div class="hero-pksh__visual-glow" aria-hidden="true"></div>
<!-- Hero photo — the emotional anchor -->
<div class="hero-pksh__photo-wrap">
<div class="hero-pksh__photo-frame">
<?php if ( $banner_img_id ) : ?>
<?php echo wp_get_attachment_image( $banner_img_id, 'full', false, array(
'class' => 'hero-pksh__photo',
'loading' => 'eager',
'decoding' => 'async',
'alt' => 'Подготовка к школе в Щёлково — занятия для детей 57 лет',
) ); ?>
<?php else : ?>
<img
src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/girl_and_a_boy.webp' ); ?>"
alt="Подготовка к школе в Щёлково — занятия для детей 57 лет"
class="hero-pksh__photo"
loading="eager"
decoding="async"
width="689"
height="689"
/>
<?php endif; ?>
</div>
<!-- Photo accent glow ring -->
<div class="hero-pksh__photo-ring" aria-hidden="true"></div>
</div>
<!-- Floating badges — sticky-note style around photo -->
<div class="hero-pksh__float hero-pksh__float--1">
<span class="hero-pksh__float-icon">👩‍🏫</span>
<span>Педагоги с опытом 15+ лет</span>
</div>
<div class="hero-pksh__float hero-pksh__float--2">
<span class="hero-pksh__float-icon">🎮</span>
<span>Игровая методика</span>
</div>
<div class="hero-pksh__float hero-pksh__float--3">
<span class="hero-pksh__float-icon">📚</span>
<span>Авторская программа</span>
</div>
<div class="hero-pksh__float hero-pksh__float--4">
<span>🌟 Рейтинг <strong>4.8</strong></span>
</div>
<!-- Decorative shapes -->
<div class="hero-pksh__deco hero-pksh__deco--1" aria-hidden="true"></div>
<div class="hero-pksh__deco hero-pksh__deco--2" aria-hidden="true"></div>
<div class="hero-pksh__deco hero-pksh__deco--3" aria-hidden="true"></div>
<div class="hero-pksh__deco hero-pksh__deco--4" aria-hidden="true"></div>
<!-- Sparkle particles -->
<div class="hero-pksh__sparkle" aria-hidden="true"></div>
<div class="hero-pksh__sparkle" aria-hidden="true"></div>
<div class="hero-pksh__sparkle" aria-hidden="true"></div>
<div class="hero-pksh__sparkle" aria-hidden="true"></div>
<div class="hero-pksh__sparkle" aria-hidden="true"></div>
</div>
</div>
</section>