nunuchek
dc70ebccd8
Шрифты Golos Text и Martian Mono через next/font, токены @theme, все блоки по плану: первый экран со штампом даты ближайшей обжарки, лента недели, этикетки сортов, подписка, кто мы, доставка, форма, подвал. Три фото Unsplash локально, priority только у первого экрана. LeadForm перекрашена под токены, логика и data-атрибуты те же. В site.ts и form.ts добавлены служебные подписи для вёрстки.
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { CONTACT_PHONE } from '@/content/form';
|
|
import { site } from '@/content/site';
|
|
import { LEAD_SECTION_ID } from '@/lib/leadPrefill';
|
|
import { LeadForm } from '../LeadForm';
|
|
|
|
export function LeadSection() {
|
|
const { lead, delivery } = site;
|
|
return (
|
|
<section id={LEAD_SECTION_ID} aria-labelledby="lead-title" className="page-x section-y scroll-mt-4">
|
|
<div className="container-page grid gap-10 lg:grid-cols-12 lg:gap-6">
|
|
<div className="lg:col-span-5">
|
|
<h2 id="lead-title" className="text-headline font-extrabold">
|
|
{lead.title}
|
|
</h2>
|
|
<p className="mt-4 max-w-[36ch] text-lead">{lead.subtitle}</p>
|
|
<p className="mt-8">
|
|
{lead.call}{' '}
|
|
<a href={CONTACT_PHONE.href} className="mono inline-flex min-h-11 items-center text-[18px] font-semibold whitespace-nowrap lg:text-[22px]">
|
|
{CONTACT_PHONE.display}
|
|
</a>
|
|
</p>
|
|
<dl className="mt-4 hidden max-w-[320px] lg:block">
|
|
{delivery.pickup.hours.map((row) => (
|
|
<div key={row.days} className="flex items-baseline justify-between gap-4 border-t border-ink py-2">
|
|
<dt className="tag text-muted">{row.days}</dt>
|
|
<dd className="mono text-ui font-medium">{row.time}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
<div className="lg:col-span-7">
|
|
<LeadForm />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|