feat(landing): секции по DESIGN.md
Шрифты Golos Text и Martian Mono через next/font, токены @theme, все блоки по плану: первый экран со штампом даты ближайшей обжарки, лента недели, этикетки сортов, подписка, кто мы, доставка, форма, подвал. Три фото Unsplash локально, priority только у первого экрана. LeadForm перекрашена под токены, логика и data-атрибуты те же. В site.ts и form.ts добавлены служебные подписи для вёрстки.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
import { site } from '@/content/site';
|
||||
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">
|
||||
{catalog.title}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[46ch] text-lead">{catalog.subtitle}</p>
|
||||
<div className="mt-10 grid gap-4 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user