Заголовки через typo(): «и» не висит. Подписка: у цены нет своей линейки, цена и CTA по низу полей. Этикетки сортов делят строки через subgrid, ступеньки под названием нет; значения полей с интерлиньяжем 1.3, «•» держится за следующую ноту, вес «250 г» — число и единица отдельными span. Под ассортиментом строка про бесплатную доставку от 50 BYN. В тёмной секции строки доставки — поля с подписями, акцент только на «бесплатно». В подвале слеш не отрывается.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { site } from '@/content/site';
|
|
import { typo } from '@/lib/typo';
|
|
import { Label } from '../Label';
|
|
|
|
export function Catalog({ roastDate }: { roastDate: string }) {
|
|
const { catalog } = site;
|
|
const packs = catalog.items.filter((item) => item.id !== 'drip');
|
|
const drip = catalog.items.find((item) => item.id === 'drip');
|
|
return (
|
|
<section id="coffee" aria-labelledby="coffee-title" className="page-x section-y">
|
|
<div className="container-page border-t-2 border-ink pt-10 lg:pt-14">
|
|
<h2 id="coffee-title" className="text-headline font-extrabold">
|
|
{typo(catalog.title)}
|
|
</h2>
|
|
<p className="mt-4 max-w-[46ch] text-lead">{typo(catalog.subtitle)}</p>
|
|
<div className="mt-10 grid gap-4 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-6">
|
|
{packs.map((item) => (
|
|
<Label key={item.id} item={item} roastDate={roastDate} />
|
|
))}
|
|
{drip && (
|
|
<div className="md:col-span-2 lg:col-span-3">
|
|
<Label item={drip} roastDate={roastDate} wide />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="mt-6 text-small">
|
|
<a href={catalog.deliveryNote.href} className="inline-flex min-h-11 items-center underline">
|
|
{typo(catalog.deliveryNote.text)}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|