redesign: главная — 2-колоночный contact-grid на desktop (адрес+телефоны слева, карта справа), container 76rem
All checks were successful
deploy / deploy (push) Successful in 46s

This commit is contained in:
Dmitry Gusev
2026-05-22 05:27:53 +03:00
parent ed27dcfc14
commit 602ecd871d
2 changed files with 71 additions and 46 deletions

View File

@@ -1,6 +1,6 @@
---
import Base from '../layouts/Base.astro';
import { SITE_TITLE, SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts';
import { SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts';
const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${GEO.zoom}&pt=${GEO.lon}%2C${GEO.lat}%2Cpm2rdm`;
---
@@ -20,43 +20,46 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
<section>
<div class="container">
<h2>Мы переехали</h2>
<p class="address-block">
<span class="address-postal">{ADDRESS.postal}</span><br />
<strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
{ADDRESS.building}
</p>
</div>
</section>
<div class="contact-grid">
<div class="contact-left">
<div>
<p class="contact-subhead">Адрес</p>
<p class="address-block">
<span class="address-postal">{ADDRESS.postal}</span><br />
<strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
{ADDRESS.building}
</p>
</div>
<section class="alt">
<div class="container">
<h2>Телефоны</h2>
<ul class="phones">
{PHONES.map((p) => (
<li>
<a href={p.href} aria-label={`Позвонить ${p.display}`}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.9.36 1.78.69 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.48a2 2 0 0 1 2.11-.45c.82.33 1.7.56 2.6.69A2 2 0 0 1 22 16.92z"/>
</svg>
{p.display}
</a>
</li>
))}
</ul>
</div>
</section>
<div>
<p class="contact-subhead">Телефоны</p>
<ul class="phones">
{PHONES.map((p) => (
<li>
<a href={p.href} aria-label={`Позвонить ${p.display}`}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.9.36 1.78.69 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.48a2 2 0 0 1 2.11-.45c.82.33 1.7.56 2.6.69A2 2 0 0 1 22 16.92z"/>
</svg>
{p.display}
</a>
</li>
))}
</ul>
</div>
</div>
<section>
<div class="container">
<h2>Как нас найти</h2>
<div class="map-wrap">
<iframe
src={mapSrc}
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Карта проезда — Автозапчасти ПитСтоп"
allow="geolocation"
></iframe>
<div class="contact-right">
<p class="contact-subhead">Как нас найти</p>
<div class="map-wrap">
<iframe
src={mapSrc}
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Карта проезда — Автозапчасти ПитСтоп"
allow="geolocation"
></iframe>
</div>
</div>
</div>
</div>
</section>