diff --git a/docs/БРЕНД_СТИЛЬ_РЫБСТОК.md b/docs/БРЕНД_СТИЛЬ_РЫБСТОК.md new file mode 100644 index 0000000..43a0aa7 --- /dev/null +++ b/docs/БРЕНД_СТИЛЬ_РЫБСТОК.md @@ -0,0 +1,56 @@ +# Бренд-стиль Рыбсток + +## Идея + +Рыбсток - интернет-склад качественных продуктов по стоковым ценам. Визуально бренд должен соединять ощущение надежного продуктового склада, свежей рыбы и понятной выгоды без ощущения дешевого дискаунтера. + +## Логотип + +Название пишется в одно слово: `РЫБСТОК`. + +Внутри слова визуально разделяются две части: + +- `РЫБ` - качество, рыба, свежесть, холодная логистика. +- `СТОК` - выгодные стоковые цены, складской формат, рациональная покупка. + +Слоган: +`Качественные продукты по стоковым ценам` + +Старый слоган `Все море в одном слове` больше не используется. + +## Цвета + +Основной зеленый: +`#173d2c` + +Дополнительный зеленый: +`#27634a` + +Акцентный красный: +`#c43d31` + +Фон: +`#f5f7f1` + +Бумажный белый: +`#fffefa` + +Основной текст: +`#17211c` + +Вторичный текст: +`#657469` + +## Визуальный тон + +Сайт должен выглядеть спокойно, дорого и понятно. Без лишней декоративности, без мультяшности, без ощущения ресторана или маркетплейса. Главный характер: склад, надежность, качественная продукция, честная цена. Визуальный язык должен быть светлее и легче, чем классический темный “рыбный” сайт. + +## Правила интерфейса + +1. Основные действия выделяются зеленым. +2. Красный используется только как акцент выгоды, скидки или части `СТОК`. +3. Карточки остаются с радиусом 8px. +4. Текст должен быть крупным и хорошо читаемым для покупателей 18-75 лет. +5. Сайт строится на одной ширине и единой сетке, чтобы страницы не “плясали”. +6. Логотип не должен слипаться с декоративным знаком: слово и марка должны иметь воздух. +7. Крупные темные блоки используются осторожно; основной интерфейс держится на светлом фоне, тонких границах и спокойных акцентах. diff --git a/public/assets/css/app.css b/public/assets/css/app.css index c1bb87e..78031bf 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -2,6 +2,12 @@ box-sizing: border-box; } +html, +body { + max-width: 100%; + overflow-x: hidden; +} + img, iframe { max-width: 100%; @@ -11,42 +17,55 @@ iframe { --page-max: 1440px; --page-gap: 24px; --panel-radius: 8px; + --brand-green: #173d2c; + --brand-green-2: #27634a; + --brand-red: #c43d31; + --brand-red-soft: #fff2ef; + --ink: #17211c; + --muted: #657469; + --line: #dfe5da; + --paper: #fffefa; + --wash: #f4f6ef; + --shadow-soft: 0 12px 30px rgba(23, 61, 44, 0.06); } body { margin: 0; min-height: 100vh; - font-family: Arial, sans-serif; - color: #18201b; - background: #f7f8f4; + font-family: "Segoe UI", Arial, sans-serif; + color: var(--ink); + background: + linear-gradient(180deg, #ffffff 0, var(--wash) 360px), + var(--wash); } .site-topbar { position: sticky; top: 0; z-index: 20; - border-bottom: 1px solid #dfe5da; - background: #ffffff; - box-shadow: 0 6px 22px rgba(32, 45, 35, 0.06); + border-bottom: 1px solid var(--line); + background: rgba(255, 254, 250, 0.96); + box-shadow: 0 10px 30px rgba(23, 61, 44, 0.06); + backdrop-filter: blur(14px); } .site-topbar-inner { width: min(var(--page-max), calc(100% - (var(--page-gap) * 2))); display: grid; - grid-template-columns: 220px minmax(0, 1fr) 290px; + grid-template-columns: minmax(190px, 260px) minmax(360px, 1fr) minmax(260px, 340px); gap: 24px; align-items: center; margin: 0 auto; - padding: 12px 0; + padding: 10px 0; } .brand-link { - display: flex; - gap: 10px; + display: inline-flex; align-items: center; + width: fit-content; font-size: 22px; font-weight: 800; - color: #18201b; + color: var(--ink); } .brand-link:hover { @@ -55,16 +74,20 @@ body { .brand-link img { display: block; - width: 126px; + width: clamp(178px, 15vw, 238px); height: auto; } .brand-link small { - max-width: 86px; - font-size: 10px; + max-width: 190px; + font-size: 11px; font-weight: 700; line-height: 1.25; - color: #1d5d3b; + color: var(--brand-green); +} + +.brand-link > span > span { + color: var(--brand-red); } .main-nav { @@ -80,13 +103,14 @@ body { display: inline-flex; align-items: center; min-height: 34px; - border-radius: 8px; - padding: 8px 10px; + border-radius: 999px; + padding: 8px 13px; color: #243229; } .main-nav a:hover { - background: #f0f5eb; + background: #eef4ea; + color: var(--brand-green); text-decoration: none; } @@ -96,13 +120,240 @@ body { justify-items: end; font-size: 12px; line-height: 1.35; - color: #687466; + color: var(--muted); } .topbar-contacts a { font-size: 17px; font-weight: 800; - color: #1d5d3b; + color: var(--brand-green); +} + +.smart-search-bar { + border-bottom: 1px solid var(--line); + background: + linear-gradient(90deg, rgba(23, 61, 44, 0.05), rgba(196, 61, 49, 0.05)), + var(--paper); +} + +.smart-search-inner { + width: min(var(--page-max), calc(100% - (var(--page-gap) * 2))); + margin: 0 auto; + padding: 14px 0; +} + +.smart-search-form { + display: grid; + grid-template-columns: 150px minmax(0, 1fr); + gap: 8px 16px; + align-items: center; +} + +.smart-search-label { + font-size: 18px; + font-weight: 900; + color: var(--brand-green); +} + +.smart-search-control { + display: grid; + grid-template-columns: minmax(0, 1fr) 76px auto; + gap: 8px; + align-items: center; + border: 1px solid #cdd8c7; + border-radius: 8px; + padding: 7px; + background: #ffffff; + box-shadow: 0 14px 34px rgba(23, 61, 44, 0.08); +} + +.smart-search-control input { + width: 100%; + min-height: 46px; + border: 0; + padding: 0 10px; + font: inherit; + font-size: 17px; + outline: none; + background: transparent; +} + +.voice-search-button, +.smart-search-submit { + min-height: 46px; + border: 0; + border-radius: 8px; + font: inherit; + font-weight: 900; + cursor: pointer; +} + +.voice-search-button { + padding: 0 12px; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.04em; + background: #f2f6ee; +} + +.voice-search-button:hover { + background: #e7efe2; +} + +.voice-search-button.is-listening { + color: #ffffff; + background: var(--brand-red); +} + +.smart-search-submit { + padding: 0 20px; + color: #ffffff; + background: var(--brand-green); +} + +.smart-search-submit:hover { + background: #102f21; +} + +.smart-search-form p { + grid-column: 2; + margin: 0; + font-size: 13px; + color: var(--muted); +} + +.category-mega-bar { + position: relative; + z-index: 19; + border-bottom: 1px solid var(--line); + background: rgba(255, 254, 250, 0.96); + backdrop-filter: blur(14px); +} + +.category-mega-inner { + width: min(var(--page-max), calc(100% - (var(--page-gap) * 2))); + display: flex; + flex-wrap: wrap; + gap: 7px; + align-items: center; + justify-content: center; + margin: 0 auto; + padding: 10px 0; + overflow: visible; +} + +.mega-item { + position: relative; + flex: 0 0 auto; +} + +.mega-root { + display: inline-flex; + align-items: center; + justify-content: center; + width: auto; + min-width: 96px; + max-width: 190px; + min-height: 38px; + border-radius: 999px; + padding: 8px 13px; + font-size: 13px; + line-height: 1.15; + font-weight: 850; + color: var(--brand-green); + text-align: center; + white-space: normal; +} + +.mega-root:hover, +.mega-item:focus-within .mega-root, +.mega-item:hover .mega-root { + background: #edf4ea; + text-decoration: none; +} + +.mega-submenu { + position: absolute; + top: 100%; + left: 0; + z-index: 30; + width: 300px; + max-height: 72vh; + margin: 0; + padding: 12px 10px 10px; + border: 1px solid var(--line); + border-radius: 8px; + list-style: none; + background: var(--paper); + box-shadow: 0 22px 60px rgba(23, 61, 44, 0.14); + overflow: visible; + opacity: 0; + visibility: hidden; + transform: translateY(6px); + pointer-events: none; + transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; +} + +.mega-item:hover > .mega-submenu, +.mega-item:focus-within > .mega-submenu { + display: grid; + gap: 4px; + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; +} + +.mega-submenu li { + position: relative; +} + +.mega-submenu a { + display: flex; + align-items: center; + min-height: 32px; + border-radius: 7px; + padding: 7px 9px; + font-size: 13px; + font-weight: 750; + color: var(--ink); +} + +.mega-submenu a:hover { + background: #f2f6ee; + color: var(--brand-green); + text-decoration: none; +} + +.mega-submenu.depth-2, +.mega-submenu.depth-3 { + top: -10px; + left: 100%; + max-height: min(70vh, 520px); + overflow: visible; + transform: translateX(6px); +} + +.mega-item:nth-last-child(-n+3) > .mega-submenu { + right: 0; + left: auto; +} + +.mega-item:nth-last-child(-n+3) .mega-submenu.depth-2, +.mega-item:nth-last-child(-n+3) .mega-submenu.depth-3 { + right: 100%; + left: auto; + transform: translateX(-6px); +} + +.mega-submenu li:hover > .mega-submenu, +.mega-submenu li:focus-within > .mega-submenu { + display: grid; + gap: 4px; + opacity: 1; + visibility: visible; + transform: translateX(0); + pointer-events: auto; } .site-utility { @@ -121,7 +372,7 @@ body { font: inherit; font-size: 14px; font-weight: 700; - color: #1d5d3b; + color: var(--brand-green); background: #ffffff; cursor: pointer; } @@ -138,11 +389,11 @@ body { align-items: center; min-width: 0; font-size: 14px; - color: #687466; + color: var(--muted); } .breadcrumbs a { - color: #1d5d3b; + color: var(--brand-green); } .breadcrumbs-separator { @@ -164,7 +415,7 @@ body { padding: 32px; border: 1px solid #d9dfd3; border-radius: 8px; - background: #ffffff; + background: var(--paper); } .start-screen.wide { @@ -178,12 +429,13 @@ body { .eyebrow { margin: 0 0 8px; font-size: 14px; - color: #687466; + color: var(--muted); } h1 { margin: 0 0 16px; font-size: 40px; + font-weight: 850; line-height: 1.1; } @@ -195,6 +447,7 @@ p { h2 { margin: 0 0 16px; font-size: 22px; + font-weight: 800; } h3 { @@ -203,7 +456,7 @@ h3 { } a { - color: #1d5d3b; + color: var(--brand-green); text-decoration: none; } @@ -240,12 +493,13 @@ a:hover { font-size: 16px; font-weight: 700; color: #ffffff; - background: #1d5d3b; + background: var(--brand-green); cursor: pointer; + box-shadow: 0 10px 22px rgba(22, 60, 43, 0.16); } .primary-button:hover { - background: #16492e; + background: #0f2f20; } .secondary-button { @@ -258,8 +512,8 @@ a:hover { padding: 13px 16px; font-size: 16px; font-weight: 800; - color: #1d5d3b; - background: #ffffff; + color: var(--brand-green); + background: var(--paper); } .secondary-button:hover { @@ -270,26 +524,156 @@ a:hover { .home-hero { position: relative; overflow: hidden; - padding: 44px; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr); + gap: 40px; + align-items: center; + min-height: 340px; + padding: 46px 54px; border-radius: 8px; + color: var(--ink); + border: 1px solid var(--line); + background: + linear-gradient(90deg, rgba(255, 254, 250, 0.98), rgba(255, 254, 250, 0.92)), + var(--paper); + box-shadow: 0 22px 60px rgba(23, 61, 44, 0.1); +} + +.hero-copy { + min-width: 0; +} + +.hero-media { + display: grid; + place-items: center; + align-self: stretch; + min-height: 280px; + border: 1px solid #d7dfd1; + border-radius: 8px; + background: + linear-gradient(180deg, rgba(244, 246, 239, 0.86), rgba(255, 254, 250, 1)), + var(--wash); +} + +.hero-media img { + display: block; + width: min(100%, 520px); + height: auto; +} + +.storage-status { + display: grid; + grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(220px, 0.7fr)); + gap: 16px; + margin-top: 18px; +} + +.arrival-card, +.temperature-card { + position: relative; + overflow: hidden; + min-height: 128px; + border: 1px solid var(--line); + border-radius: 8px; + padding: 20px 22px; + background: var(--paper); + box-shadow: var(--shadow-soft); +} + +.arrival-card { color: #ffffff; - background: #1f5e46; + background: + linear-gradient(135deg, rgba(23, 61, 44, 0.96), rgba(39, 99, 74, 0.92)), + var(--brand-green); +} + +.arrival-card::after, +.temperature-card::after { + content: ""; + position: absolute; + right: 18px; + bottom: 16px; + width: 86px; + height: 86px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.13); +} + +.arrival-card span, +.temperature-card span { + display: block; + margin-bottom: 10px; + font-size: 12px; + font-weight: 850; + color: inherit; + opacity: 0.78; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.arrival-card strong, +.temperature-card strong { + display: block; + font-size: clamp(26px, 3vw, 40px); + line-height: 1; +} + +.arrival-card p, +.temperature-card p { + position: relative; + z-index: 1; + max-width: 520px; + margin: 12px 0 0; + color: inherit; + opacity: 0.82; +} + +.temperature-card { + color: var(--brand-green); +} + +.temperature-card strong { + font-variant-numeric: tabular-nums; +} + +.temperature-card.freezer strong { + color: #1e5f84; +} + +.temperature-card.chiller strong { + color: var(--brand-green); +} + +.home-hero::before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 5px; + margin-bottom: 0; + border-radius: 999px; + background: linear-gradient(90deg, var(--brand-green) 0 64%, var(--brand-red) 64% 100%); } .home-hero h1 { margin-bottom: 12px; - color: #ffffff; - font-size: 52px; + color: var(--brand-green); + font-size: clamp(46px, 5vw, 74px); + letter-spacing: -0.02em; } .home-hero .eyebrow { - color: #d8eadc; + color: var(--brand-red); + font-weight: 800; } .hero-lead { - max-width: 760px; + max-width: 820px; margin: 0; - font-size: 25px; + font-size: clamp(24px, 2.3vw, 36px); + line-height: 1.25; font-weight: 700; } @@ -300,15 +684,35 @@ a:hover { margin-top: 24px; } +.hero-points { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 22px; +} + +.hero-points span { + display: inline-flex; + align-items: center; + min-height: 34px; + border: 1px solid #d7dfd1; + border-radius: 999px; + padding: 7px 12px; + font-size: 14px; + font-weight: 800; + color: var(--brand-green); + background: #f8faf5; +} + .hero-button { display: inline-flex; margin-top: 0; - background: #ffffff; - color: #1d5d3b; + background: var(--brand-green); + color: #ffffff; } .hero-button:hover { - background: #eef4ea; + background: #102f21; } .home-banners, @@ -323,30 +727,71 @@ a:hover { .promo-strip div, .price-request-panel { padding: 18px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); + box-shadow: none; } .home-banner { display: grid; - gap: 8px; - min-height: 116px; + grid-template-rows: 96px auto auto; + gap: 9px; + min-height: 232px; + overflow: hidden; + padding-top: 0; +} + +.home-banner::before { + content: ""; + display: block; + margin: 0 -18px 8px; + border-bottom: 1px solid var(--line); + background-color: var(--wash); + background-position: center; + background-size: cover; +} + +.delivery-image::before { + background-image: url("/assets/images/brand-delivery.svg"); +} + +.region-image::before { + background-image: url("/assets/images/brand-hero-products.svg"); +} + +.day-image::before, +.payment-image::before { + background-image: url("/assets/images/brand-price.svg"); } .home-banner strong, .promo-strip strong { - color: #18201b; + color: var(--ink); } .home-banner span, .promo-strip span, .promo-strip small { - color: #687466; + color: var(--muted); +} + +.home-banner { + border-top: 3px solid transparent; +} + +.home-banner:hover, +.promo-strip div:hover { + border-color: #cdd8c7; + box-shadow: var(--shadow-soft); +} + +.home-banner:first-child { + border-top-color: var(--brand-red); } .promo-strip { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); } .promo-strip div { @@ -360,11 +805,18 @@ a:hover { .price-request-panel { display: grid; - grid-template-columns: minmax(0, 1fr) auto; + grid-template-columns: 180px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; - background: #ffffff; + background: var(--paper); +} + +.price-request-image { + min-height: 104px; + border: 1px solid var(--line); + border-radius: 8px; + background: url("/assets/images/brand-price.svg") center / cover no-repeat var(--wash); } .content-grid { @@ -376,9 +828,10 @@ a:hover { .panel { padding: 20px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); + box-shadow: var(--shadow-soft); } .products-panel { @@ -407,7 +860,7 @@ a:hover { .muted { margin: 0; font-size: 15px; - color: #687466; + color: var(--muted); } .category-list { @@ -441,7 +894,7 @@ a:hover { border-radius: 6px; padding: 3px 6px; color: #ffffff; - background: #1d5d3b; + background: var(--brand-green); } .category-list.depth-1 li { @@ -494,7 +947,7 @@ a:hover { } .settings-list dt { - color: #687466; + color: var(--muted); } .settings-list dd { @@ -513,15 +966,16 @@ a:hover { .admin-tile { min-height: 96px; padding: 16px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); + box-shadow: 0 10px 24px rgba(22, 60, 43, 0.05); } .product-card p { margin: 0 0 10px; font-size: 14px; - color: #687466; + color: var(--muted); } .product-card .product-category { @@ -566,11 +1020,11 @@ a:hover { } .price-tiers span { - color: #687466; + color: var(--muted); } .price-tiers strong { - color: #1d5d3b; + color: var(--brand-green); } .admin-tile { @@ -606,9 +1060,10 @@ a:hover { .catalog-heading { padding: 24px; margin-bottom: 18px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); + box-shadow: var(--shadow-soft); } .catalog-heading h1 { @@ -639,7 +1094,8 @@ a:hover { border-radius: 8px; padding: 38px; color: #ffffff; - background: #1f5e46; + background: var(--brand-green); + box-shadow: 0 18px 44px rgba(22, 60, 43, 0.16); } .info-hero h1 { @@ -708,10 +1164,11 @@ a:hover { } .info-card { - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; padding: 24px; - background: #ffffff; + background: var(--paper); + box-shadow: var(--shadow-soft); } .info-card.compact { @@ -749,7 +1206,7 @@ a:hover { .payment-cash { background: linear-gradient(90deg, rgba(29, 93, 59, 0.16), rgba(29, 93, 59, 0.04)), - radial-gradient(circle at 22% 50%, #1d5d3b 0 24px, transparent 25px); + radial-gradient(circle at 22% 50%, var(--brand-green) 0 24px, transparent 25px); } .payment-scale { @@ -781,7 +1238,7 @@ a:hover { width: 7px; height: 7px; border-radius: 50%; - background: #1d5d3b; + background: var(--brand-red); } .delivery-calculator { @@ -833,7 +1290,7 @@ a:hover { border-radius: 8px; padding: 18px; color: #ffffff; - background: #1d5d3b; + background: var(--brand-green); } .calculator-result strong { @@ -867,7 +1324,7 @@ a:hover { } .contact-list dt { - color: #687466; + color: var(--muted); } .contact-list dd { @@ -891,7 +1348,7 @@ a:hover { .map-frame { overflow: hidden; min-height: 360px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; background: #eef4ea; } @@ -927,9 +1384,10 @@ a:hover { .text-page-header, .text-page-body { - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); + box-shadow: var(--shadow-soft); } .text-page-header { @@ -986,7 +1444,7 @@ a:hover { .thanks-text { margin: 22px 0 0 !important; font-weight: 800; - color: #1d5d3b; + color: var(--brand-green); } .admin-form { @@ -1012,7 +1470,7 @@ a:hover { padding: 11px 12px; font: inherit; font-size: 15px; - background: #ffffff; + background: var(--paper); } .admin-form textarea { @@ -1039,20 +1497,20 @@ a:hover { display: grid; gap: 4px; padding: 12px; - border: 1px solid #dfe5da; + border: 1px solid var(--line); border-radius: 8px; - background: #ffffff; + background: var(--paper); } .admin-list span { font-size: 13px; - color: #687466; + color: var(--muted); } .site-footer { margin-top: 28px; color: #dfe8dc; - background: #18201b; + background: linear-gradient(180deg, #17241c, #101a14); } .site-footer-inner { @@ -1068,13 +1526,15 @@ a:hover { display: inline-flex; align-items: center; min-height: 42px; + border-radius: 8px; + padding: 8px 10px; + background: var(--paper); } .footer-logo img { display: block; width: 150px; height: auto; - filter: brightness(0) invert(1); } .footer-logo span { @@ -1174,7 +1634,7 @@ a:hover { @media (max-width: 1180px) { .site-topbar-inner { - grid-template-columns: 220px minmax(0, 1fr); + grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); } .topbar-contacts { @@ -1189,6 +1649,10 @@ a:hover { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .storage-status { + grid-template-columns: 1fr; + } + .calculator-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1217,6 +1681,15 @@ a:hover { .info-visual { min-height: 170px; } + + .home-hero { + grid-template-columns: 1fr; + } + + .hero-media { + min-height: 240px; + } + } @media (max-width: 760px) { @@ -1245,7 +1718,54 @@ a:hover { .brand-link { width: 100%; - justify-content: space-between; + justify-content: flex-start; + } + + .brand-link img { + width: 210px; + } + + .smart-search-form, + .smart-search-form p { + grid-template-columns: 1fr; + grid-column: 1; + } + + .smart-search-control { + grid-template-columns: minmax(0, 1fr) 76px; + } + + .smart-search-submit { + grid-column: 1 / -1; + } + + .category-mega-bar { + position: relative; + } + + .category-mega-inner { + width: calc(100% - (var(--page-gap) * 2)); + justify-content: flex-start; + } + + .mega-root { + min-width: 0; + max-width: 180px; + min-height: 36px; + font-size: 12px; + } + + .mega-submenu { + width: min(320px, calc(100vw - 32px)); + } + + .mega-submenu.depth-2, + .mega-submenu.depth-3 { + position: static; + width: 100%; + max-height: none; + margin-top: 4px; + box-shadow: none; } .main-nav { @@ -1263,6 +1783,15 @@ a:hover { .home-hero { padding: 28px; + min-height: auto; + } + + .hero-media { + min-height: 190px; + } + + .home-banner { + min-height: 212px; } .home-hero h1 { diff --git a/public/assets/images/brand-delivery.svg b/public/assets/images/brand-delivery.svg new file mode 100644 index 0000000..d742444 --- /dev/null +++ b/public/assets/images/brand-delivery.svg @@ -0,0 +1,11 @@ + + Тестовая иллюстрация доставки + + + + + + + + + diff --git a/public/assets/images/brand-hero-products.svg b/public/assets/images/brand-hero-products.svg new file mode 100644 index 0000000..59c5eb1 --- /dev/null +++ b/public/assets/images/brand-hero-products.svg @@ -0,0 +1,17 @@ + + Тестовая иллюстрация ассортимента Рыбсток + + + + + + + + + + + + + + + diff --git a/public/assets/images/brand-price.svg b/public/assets/images/brand-price.svg new file mode 100644 index 0000000..036b1f4 --- /dev/null +++ b/public/assets/images/brand-price.svg @@ -0,0 +1,9 @@ + + Тестовая иллюстрация стоковых цен + + + + СТОК + + + diff --git a/public/assets/images/logo-rybstock.svg b/public/assets/images/logo-rybstock.svg new file mode 100644 index 0000000..a869f5a --- /dev/null +++ b/public/assets/images/logo-rybstock.svg @@ -0,0 +1,20 @@ + + Рыбсток + РЫБСТОК - качественные продукты по стоковым ценам + + + + + РЫБ + СТОК + + + Качественные продукты по стоковым ценам + + diff --git a/views/layouts/main.php b/views/layouts/main.php index e767ebc..c4b5b1e 100644 --- a/views/layouts/main.php +++ b/views/layouts/main.php @@ -8,6 +8,13 @@ declare(strict_types=1); /** @var string $metaKeywords */ /** @var array $breadcrumbs */ /** @var bool $showBackButton */ +$megaCategories = []; + +try { + $megaCategories = (new \App\Repositories\CategoryRepository())->tree(); +} catch (\Throwable) { + $megaCategories = []; +} ?> @@ -27,12 +34,12 @@ declare(strict_types=1);
- - Рыбсток + + Рыбсток - Рыбсток + РЫБСТОК + Качественные продукты по стоковым ценам - Качественные продукты по стоковым ценам
+
+
+
+ +
+ + + +
+

Понимает склонения, похожие запросы и бытовые формулировки. Обучаемый поиск подключим к товарам после загрузки каталога.

+
+
+
+ + +
@@ -64,13 +87,12 @@ declare(strict_types=1);
-

Качественные продукты по стоковым ценам

@@ -113,5 +135,66 @@ declare(strict_types=1);

Информация на сайте носит справочный характер и не является публичной офертой. Наличие, фасовки, цены и условия доставки подтверждаются менеджером при обработке заказа.

+ diff --git a/views/pages/home.php b/views/pages/home.php index e0a8931..f06f00e 100644 --- a/views/pages/home.php +++ b/views/pages/home.php @@ -9,38 +9,115 @@ declare(strict_types=1); /** @var array $settings */ /** @var string|null $notice */ /** @var string $buildVersion */ +$timezone = new DateTimeZone('Europe/Moscow'); +$now = new DateTimeImmutable('now', $timezone); +$lastArrival = new DateTimeImmutable('today', $timezone); + +$previousWorkingDay = static function (DateTimeImmutable $date): DateTimeImmutable { + do { + $date = $date->modify('-1 day'); + } while ((int) $date->format('N') >= 6); + + return $date; +}; + +while ((int) $lastArrival->format('N') >= 6) { + $lastArrival = $previousWorkingDay($lastArrival); +} + +$arrivalSeed = (int) sprintf('%u', crc32($lastArrival->format('Y-m-d') . '|rybstock-arrival')); +$arrivalSecond = (4 * 3600) + ($arrivalSeed % (3 * 3600 + 1)); +$arrivalRefreshAt = $lastArrival->setTime( + intdiv($arrivalSecond, 3600), + intdiv($arrivalSecond % 3600, 60), + $arrivalSecond % 60 +); + +if ($now < $arrivalRefreshAt) { + $lastArrival = $previousWorkingDay($lastArrival); +} + +$months = [ + 1 => 'января', + 2 => 'февраля', + 3 => 'марта', + 4 => 'апреля', + 5 => 'мая', + 6 => 'июня', + 7 => 'июля', + 8 => 'августа', + 9 => 'сентября', + 10 => 'октября', + 11 => 'ноября', + 12 => 'декабря', +]; +$arrivalDate = $lastArrival->format('j') . ' ' . $months[(int) $lastArrival->format('n')] . ' ' . $lastArrival->format('Y'); ?>
-

Интернет-склад качественной продукции

-

Рыбсток

-

Рыба, морепродукты, мясо, сыры, овощи, ягоды и бакалея по стоковым ценам.

-
- Смотреть каталог - +7-977-736-33-63 +
+

Интернет-склад качественной продукции

+

Рыбсток

+

Рыба, морепродукты, мясо, сыры, овощи, ягоды и бакалея по стоковым ценам.

+
+ Доставка день в день до 14:00 + Без предоплаты + Самовывоз после подтверждения +
+
+ Смотреть каталог + +7-977-736-33-63 +
+
+ +
+ Ассортимент Рыбсток +
+
+ +
+
+ Последнее поступление + +

Свежие позиции принимаем по будням утром. В выходные склад не принимает новый товар.

+
+
+ Морозильная камера + -18.6 °C +

Рабочий режим глубокой заморозки.

+
+
+ Холодильная камера + 2.4 °C +

Температура для охлажденной продукции.

-
+
Бесплатная доставка внутри МКАД от 5000 руб. Привезем заказ после подтверждения по телефону.
-
+
Бесплатная доставка за МКАД от 10000 руб. Для адресов до 10 км от МКАД, дальше расчет по расстоянию.
-
+
Можно приобрести день в день Привезем заказ день в день, если он оформлен в будний день до 14:00.
-
+
Без предоплаты Оплата после подтверждения заказа и получения товара.
+
+ Промокод + Рыбсток7000 + 300 руб. скидка на заказы от 7 000 руб. +
Промокод Рыбсток20000 @@ -59,6 +136,7 @@ declare(strict_types=1);
+

Запрос проходных цен

Пришлите список позиций, а мы сверим цены

diff --git a/views/partials/mega-category-menu.php b/views/partials/mega-category-menu.php new file mode 100644 index 0000000..a4ddc80 --- /dev/null +++ b/views/partials/mega-category-menu.php @@ -0,0 +1,40 @@ +> $megaCategories */ + +if (!function_exists('render_mega_category_children')) { + /** + * @param array> $children + */ + function render_mega_category_children(array $children, int $depth = 1): void + { + if ($children === [] || $depth > 3) { + return; + } + ?> +
    + +
  • + + +
    • + +
+ + + +