feat(landing): секции по DESIGN.md

Шрифты Golos Text и Martian Mono через next/font, токены @theme, все блоки по плану: первый экран со штампом даты ближайшей обжарки, лента недели, этикетки сортов, подписка, кто мы, доставка, форма, подвал. Три фото Unsplash локально, priority только у первого экрана. LeadForm перекрашена под токены, логика и data-атрибуты те же. В site.ts и form.ts добавлены служебные подписи для вёрстки.
2026-10-17 16:56:52 +03:00
parent 66d69c1245
commit dc70ebccd8
26 changed files with 1364 additions and 65 deletions
@@ -0,0 +1,70 @@
+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>
+  );
+}