fix
This commit is contained in:
@@ -76,11 +76,34 @@
|
||||
}
|
||||
|
||||
.home-categories,
|
||||
.home-steps {
|
||||
.home-showcase,
|
||||
.home-steps,
|
||||
.home-delivery,
|
||||
.home-portfolio,
|
||||
.home-reviews,
|
||||
.home-faq,
|
||||
.home-final {
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
.home-categories__head {
|
||||
.home-categories__inner,
|
||||
.home-showcase__inner,
|
||||
.home-steps__inner,
|
||||
.home-delivery__inner,
|
||||
.home-portfolio__inner,
|
||||
.home-reviews__inner,
|
||||
.home-faq__inner,
|
||||
.home-final__inner {
|
||||
width: min(100% - 40px, var(--container));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-categories__head,
|
||||
.home-showcase__head,
|
||||
.home-delivery__head,
|
||||
.home-portfolio__head,
|
||||
.home-reviews__head,
|
||||
.home-faq__head {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
@@ -123,6 +146,44 @@
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-product-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-product-card__image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.home-product-card__content {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.home-product-card__title {
|
||||
font-size: var(--fz-md);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-product-card__price {
|
||||
color: var(--color-accent-dark);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-steps {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
@@ -169,3 +230,127 @@
|
||||
color: #ffffff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-delivery__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
|
||||
.home-portfolio {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.home-portfolio__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr 0.9fr;
|
||||
grid-auto-rows: 260px;
|
||||
gap: 18px;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
|
||||
.home-portfolio__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-portfolio__image:first-child {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.home-reviews__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-review-card {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
min-height: 220px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 26px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-review-card__text {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.home-review-card__author {
|
||||
align-self: end;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-faq {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.home-faq__list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 860px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-faq__item {
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.home-faq__question {
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-faq__answer {
|
||||
margin-top: 12px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.home-final__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-text);
|
||||
color: #ffffff;
|
||||
padding: 42px;
|
||||
}
|
||||
|
||||
.home-final__content {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.home-final__title {
|
||||
font-size: var(--fz-xl);
|
||||
font-weight: 800;
|
||||
line-height: var(--lh-tight);
|
||||
}
|
||||
|
||||
.home-final__text {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
.home-final__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-final .button-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,69 @@
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.site-header__menu-item--catalog {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-header__menu-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.site-header__menu-button::after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
|
||||
.site-header__catalog {
|
||||
position: absolute;
|
||||
top: calc(100% + 14px);
|
||||
left: 50%;
|
||||
z-index: 70;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(180px, 1fr));
|
||||
gap: 6px;
|
||||
width: 420px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 14px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.site-header__menu-item--catalog:hover .site-header__catalog,
|
||||
.site-header__menu-item--catalog.is-open .site-header__catalog {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.site-header__catalog-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--fz-sm);
|
||||
font-weight: 700;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.site-header__catalog-link:hover {
|
||||
background: var(--color-surface-soft);
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.site-header__cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -58,10 +58,27 @@
|
||||
|
||||
.service-details__grid,
|
||||
.home-categories__grid,
|
||||
.home-delivery__grid,
|
||||
.home-reviews__grid,
|
||||
.site-footer__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-portfolio__grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.home-portfolio__image,
|
||||
.home-portfolio__image:first-child {
|
||||
aspect-ratio: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.service-hero__inner,
|
||||
.service-details__inner,
|
||||
.service-process__inner,
|
||||
@@ -86,6 +103,12 @@
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.home-final__inner {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
@@ -123,6 +146,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.lead-form,
|
||||
.policy-content__block {
|
||||
padding: 20px;
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
var menu = document.querySelector('[data-mobile-menu]');
|
||||
var toggle = document.querySelector('[data-menu-toggle]');
|
||||
var closeNodes = document.querySelectorAll('[data-menu-close]');
|
||||
var catalogItem = document.querySelector('.site-header__menu-item--catalog');
|
||||
var catalogButton = document.querySelector('.site-header__menu-button');
|
||||
var cookieNote = document.querySelector('[data-cookie-note]');
|
||||
var cookieButton = document.querySelector('[data-cookie-accept]');
|
||||
|
||||
@@ -29,6 +31,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
if (catalogItem && catalogButton) {
|
||||
catalogButton.addEventListener('click', function (event) {
|
||||
event.stopPropagation();
|
||||
var isOpen = catalogItem.classList.toggle('is-open');
|
||||
catalogButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!catalogItem.contains(event.target)) {
|
||||
catalogItem.classList.remove('is-open');
|
||||
catalogButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (cookieNote && cookieButton && window.localStorage) {
|
||||
if (localStorage.getItem('sevTortCookieAccepted') !== 'yes') {
|
||||
cookieNote.hidden = false;
|
||||
|
||||
@@ -40,6 +40,37 @@ get_header();
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-showcase">
|
||||
<div class="home-showcase__inner">
|
||||
<div class="home-showcase__head">
|
||||
<span class="section-kicker">Популярные позиции</span>
|
||||
<h2 class="section-title">Хиты недели с ценой от 2 300 ₽</h2>
|
||||
</div>
|
||||
<div class="home-showcase__grid">
|
||||
<?php
|
||||
$showcase_items = array(
|
||||
array( 'title' => 'Бенто с надписью', 'price' => 'от 2 300 ₽', 'image' => 'cake-002.jpg', 'alt' => 'Бенто торт с надписью' ),
|
||||
array( 'title' => 'Авторский бенто', 'price' => 'от 2 500 ₽', 'image' => 'cake-006.jpg', 'alt' => 'Авторский бенто торт' ),
|
||||
array( 'title' => 'Нежный декор', 'price' => 'от 2 800 ₽', 'image' => 'cake-010.jpg', 'alt' => 'Торт для мамы' ),
|
||||
array( 'title' => 'Персональный дизайн', 'price' => 'от 2 900 ₽', 'image' => 'cake-015.jpg', 'alt' => 'Бенто с иллюстрацией' ),
|
||||
array( 'title' => 'Романтичный формат', 'price' => 'от 2 700 ₽', 'image' => 'cake-020.jpg', 'alt' => 'Красный праздничный торт' ),
|
||||
array( 'title' => 'Праздничный бенто', 'price' => 'от 2 600 ₽', 'image' => 'cake-025.jpg', 'alt' => 'Праздничный торт' ),
|
||||
array( 'title' => 'Минимализм', 'price' => 'от 2 400 ₽', 'image' => 'cake-030.jpg', 'alt' => 'Минималистичный торт' ),
|
||||
array( 'title' => 'Яркий акцент', 'price' => 'от 2 650 ₽', 'image' => 'cake-038.jpg', 'alt' => 'Голубой торт с надписью' ),
|
||||
);
|
||||
?>
|
||||
<?php foreach ( $showcase_items as $item ) : ?>
|
||||
<article class="home-product-card">
|
||||
<img class="home-product-card__image" src="<?php echo esc_url( sev_tort_asset_image( $item['image'] ) ); ?>" alt="<?php echo esc_attr( $item['alt'] ); ?>" width="420" height="420" loading="lazy">
|
||||
<div class="home-product-card__content">
|
||||
<h3 class="home-product-card__title"><?php echo esc_html( $item['title'] ); ?></h3>
|
||||
<span class="home-product-card__price"><?php echo esc_html( $item['price'] ); ?></span>
|
||||
</div>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-steps">
|
||||
<div class="home-steps__inner">
|
||||
<div class="home-steps__content">
|
||||
@@ -55,6 +86,104 @@ get_header();
|
||||
<?php get_template_part( 'template-parts/lead-form', null, array( 'title' => 'Обсудить торт', 'page' => 'Главная' ) ); ?>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-delivery">
|
||||
<div class="home-delivery__inner">
|
||||
<div class="home-delivery__head">
|
||||
<span class="section-kicker">Условия</span>
|
||||
<h2 class="section-title">Доставка и оплата</h2>
|
||||
</div>
|
||||
<div class="home-delivery__grid">
|
||||
<article class="info-card">
|
||||
<span class="info-card__number">01</span>
|
||||
<h3 class="info-card__title">Доставка по городу</h3>
|
||||
<p class="info-card__text">Курьер по Севастополю в согласованный интервал. Упаковка подбирается под формат торта.</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<span class="info-card__number">02</span>
|
||||
<h3 class="info-card__title">Самовывоз</h3>
|
||||
<p class="info-card__text">Можно забрать заказ самостоятельно после подтверждения готовности и времени выдачи.</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<span class="info-card__number">03</span>
|
||||
<h3 class="info-card__title">Оплата</h3>
|
||||
<p class="info-card__text">После согласования заказа подскажем доступный способ оплаты и размер предоплаты.</p>
|
||||
</article>
|
||||
</div>
|
||||
<a class="button-link" href="<?php echo esc_url( home_url( '/dostavka-i-oplata/' ) ); ?>">Подробнее об условиях</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-portfolio">
|
||||
<div class="home-portfolio__inner">
|
||||
<div class="home-portfolio__head">
|
||||
<span class="section-kicker">Реальные работы</span>
|
||||
<h2 class="section-title">Портфолио тортов</h2>
|
||||
</div>
|
||||
<div class="home-portfolio__grid">
|
||||
<img class="home-portfolio__image" src="<?php echo esc_url( sev_tort_asset_image( 'stefanycake_torty_na_zakaz/cake-024.jpg' ) ); ?>" alt="Шоколадный торт с ягодами" width="600" height="600" loading="lazy">
|
||||
<img class="home-portfolio__image" src="<?php echo esc_url( sev_tort_asset_image( 'stefanycake_torty_na_zakaz/cake-057.jpg' ) ); ?>" alt="Торт с красным декором и ягодами" width="600" height="600" loading="lazy">
|
||||
<img class="home-portfolio__image" src="<?php echo esc_url( sev_tort_asset_image( 'stefanycake_torty_na_zakaz/cake-070.jpg' ) ); ?>" alt="Торт книга с ягодным декором" width="600" height="449" loading="lazy">
|
||||
<img class="home-portfolio__image" src="<?php echo esc_url( sev_tort_asset_image( 'stefanycake_torty_na_zakaz/cake-028.jpg' ) ); ?>" alt="Корпоративный торт" width="600" height="400" loading="lazy">
|
||||
</div>
|
||||
<a class="button-link" href="<?php echo esc_url( home_url( '/portfolio/' ) ); ?>">Смотреть все работы</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-reviews">
|
||||
<div class="home-reviews__inner">
|
||||
<div class="home-reviews__head">
|
||||
<span class="section-kicker">Отзывы</span>
|
||||
<h2 class="section-title">Отзывы клиентов</h2>
|
||||
</div>
|
||||
<div class="home-reviews__grid">
|
||||
<article class="home-review-card">
|
||||
<p class="home-review-card__text">Заказывали торт на день рождения, получилось даже лучше референса. Очень аккуратная доставка.</p>
|
||||
<span class="home-review-card__author">Анна, Севастополь</span>
|
||||
</article>
|
||||
<article class="home-review-card">
|
||||
<p class="home-review-card__text">Сделали срочный заказ за сутки. Вкус, внешний вид и упаковка - все на высоте.</p>
|
||||
<span class="home-review-card__author">Максим, Инкерман</span>
|
||||
</article>
|
||||
<article class="home-review-card">
|
||||
<p class="home-review-card__text">Помогли подобрать начинку для детского праздника. Дети и взрослые в восторге.</p>
|
||||
<span class="home-review-card__author">Ирина, Балаклава</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-faq">
|
||||
<div class="home-faq__inner">
|
||||
<div class="home-faq__head">
|
||||
<span class="section-kicker">FAQ</span>
|
||||
<h2 class="section-title">Частые вопросы</h2>
|
||||
</div>
|
||||
<div class="home-faq__list">
|
||||
<details class="home-faq__item">
|
||||
<summary class="home-faq__question">За сколько дней нужно оформлять заказ?</summary>
|
||||
<p class="home-faq__answer">Оптимально за 2-4 дня. Срочные заказы возможны при свободном окне производства.</p>
|
||||
</details>
|
||||
<details class="home-faq__item">
|
||||
<summary class="home-faq__question">Можно ли сделать торт по фото?</summary>
|
||||
<p class="home-faq__answer">Да, повторяем референс или адаптируем идею под ваш бюджет и формат.</p>
|
||||
</details>
|
||||
<details class="home-faq__item">
|
||||
<summary class="home-faq__question">Есть ли дегустационный набор начинок?</summary>
|
||||
<p class="home-faq__answer">Да, доступен сет начинок. Подробности и актуальную цену пришлем в мессенджер.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-final">
|
||||
<div class="home-final__inner">
|
||||
<div class="home-final__content">
|
||||
<h2 class="home-final__title">Обсудим ваш торт за 10 минут</h2>
|
||||
<p class="home-final__text">Напишите нам в мессенджер или оставьте заявку, чтобы получить 2-3 идеи оформления и ориентир по цене.</p>
|
||||
</div>
|
||||
<div class="home-final__actions">
|
||||
<a class="button-main" href="<?php echo esc_url( sev_tort_telegram_url() ); ?>" target="_blank" rel="noopener noreferrer">Telegram</a>
|
||||
<a class="button-link" href="<?php echo esc_url( sev_tort_whatsapp_url() ); ?>" target="_blank" rel="noopener noreferrer">WhatsApp</a>
|
||||
<a class="button-link" href="<?php echo esc_url( sev_tort_site_phone_href() ); ?>">Позвонить</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<?php
|
||||
get_footer();
|
||||
|
||||
@@ -26,11 +26,20 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
</a>
|
||||
<nav class="site-header__nav" aria-label="Основная навигация">
|
||||
<ul class="site-header__menu">
|
||||
<?php foreach ( sev_tort_nav_pages() as $item ) : ?>
|
||||
<li class="site-header__menu-item">
|
||||
<a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/' . $item['slug'] . '/' ) ); ?>"><?php echo esc_html( $item['label'] ); ?></a>
|
||||
</li>
|
||||
<li class="site-header__menu-item site-header__menu-item--catalog">
|
||||
<button class="site-header__menu-link site-header__menu-button" type="button" aria-expanded="false">Каталог</button>
|
||||
<div class="site-header__catalog">
|
||||
<?php foreach ( array( 'torty-na-zakaz', 'bento', 'detskie', 'svadebnye', 'korporativnye', 'na-den-rozhdeniya', 'srochnyj-zakaz', 'nachinki', 'ceny' ) as $slug ) : ?>
|
||||
<?php $item = sev_tort_pages()[ $slug ]; ?>
|
||||
<a class="site-header__catalog-link" href="<?php echo esc_url( home_url( '/' . $item['slug'] . '/' ) ); ?>"><?php echo esc_html( $item['label'] ); ?></a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</li>
|
||||
<li class="site-header__menu-item"><a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/dostavka-i-oplata/' ) ); ?>">Доставка и оплата</a></li>
|
||||
<li class="site-header__menu-item"><a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/portfolio/' ) ); ?>">Портфолио</a></li>
|
||||
<li class="site-header__menu-item"><a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/otzyvy/' ) ); ?>">Отзывы</a></li>
|
||||
<li class="site-header__menu-item"><a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/faq/' ) ); ?>">FAQ</a></li>
|
||||
<li class="site-header__menu-item"><a class="site-header__menu-link" href="<?php echo esc_url( home_url( '/kontakty/' ) ); ?>">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="site-header__cta" href="<?php echo esc_url( home_url( '/torty-na-zakaz/' ) ); ?>">Заказать торт</a>
|
||||
|
||||
Reference in New Issue
Block a user