nunuchek
dc70ebccd8
Шрифты Golos Text и Martian Mono через next/font, токены @theme, все блоки по плану: первый экран со штампом даты ближайшей обжарки, лента недели, этикетки сортов, подписка, кто мы, доставка, форма, подвал. Три фото Unsplash локально, priority только у первого экрана. LeadForm перекрашена под токены, логика и data-атрибуты те же. В site.ts и form.ts добавлены служебные подписи для вёрстки.
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import Image from 'next/image';
|
|
import { site } from '@/content/site';
|
|
import { CtaButton } from '../CtaButton';
|
|
import sack from '../../../public/photos/sack.jpg';
|
|
|
|
export function Delivery() {
|
|
const { delivery } = site;
|
|
const { pickup } = delivery;
|
|
return (
|
|
<section id="delivery" aria-labelledby="delivery-title" className="on-dark bg-roast text-cream">
|
|
<div className="grid lg:grid-cols-12">
|
|
<div className="relative aspect-[390/230] lg:col-span-5 lg:aspect-auto lg:min-h-[640px]">
|
|
<Image
|
|
src={sack}
|
|
alt={site.images.sack.alt}
|
|
fill
|
|
sizes="(min-width: 1024px) 42vw, 100vw"
|
|
className="object-cover object-[center_45%]"
|
|
placeholder="blur"
|
|
/>
|
|
</div>
|
|
<div className="page-x section-y lg:col-span-7 lg:pr-12 lg:pl-16">
|
|
<div className="max-w-[720px]">
|
|
<h2 id="delivery-title" className="text-headline font-extrabold">
|
|
{delivery.title}
|
|
</h2>
|
|
<div className="mt-10 grid gap-10 md:grid-cols-2 md:gap-8 lg:mt-14">
|
|
<div>
|
|
<h3 className="text-title font-extrabold">{delivery.delivery.title}</h3>
|
|
<ul className="mt-5">
|
|
{delivery.delivery.lines.map((line) => (
|
|
<li key={line} className="border-t border-muted-on-dark py-3 first:border-t-0 first:pt-0">
|
|
{line}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-title font-extrabold">{pickup.title}</h3>
|
|
<p className="mt-5">{pickup.address}</p>
|
|
<dl className="mt-3">
|
|
{pickup.hours.map((row) => (
|
|
<div key={row.days} className="flex items-baseline justify-between gap-4 border-t border-muted-on-dark py-3">
|
|
<dt className="tag text-muted-on-dark">{row.days}</dt>
|
|
<dd className="mono text-ui font-medium">{row.time}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
<a
|
|
href={pickup.map.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-2 inline-flex min-h-11 items-center gap-2 text-ui font-semibold underline"
|
|
>
|
|
{pickup.map.label}
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true" focusable="false">
|
|
<path d="M5 3h8v8M13 3 3 13" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<CtaButton interest={delivery.cta.interest} className="btn btn-on-dark mt-12 w-full sm:w-auto">
|
|
{delivery.cta.label}
|
|
</CtaButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|