Initial commit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F22Ms5Cxam5UHyxaCrtZzu
2026-07-29 11:02:40 -04:00
commit f23332e42c
88 changed files with 7947 additions and 0 deletions
@@ -0,0 +1,90 @@
+import Link from "next/link";
+
+import { content } from "@/lib/content";
+
+const footerLinkClass =
+  "min-h-touch-target text-on-surface-secondary hover:text-on-surface focus-visible:outline-accent inline-flex items-center font-normal no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 motion-safe:transition-colors";
+
+/**
+ * Site footer — shared chrome, server-rendered. Includes the `/cart` link that
+ * is the drawer's reachable no-JS fallback on every page (engineering.md F4 +
+ * `notes/cart.md` "Without JavaScript").
+ */
+export function Footer() {
+  return (
+    <footer className="max-w-page px-margin mx-auto w-full">
+      <div className="border-border grid grid-cols-1 gap-8 border-t py-12 text-sm md:grid-cols-2 lg:grid-cols-4">
+        <div>
+          <h2 className="type-body-sm text-on-surface mb-4 font-medium">CORE</h2>
+          <p className="text-on-surface-secondary">&copy; 2026 CORE</p>
+        </div>
+        <nav aria-labelledby="footer-quick-links-heading">
+          <h2
+            className="type-body-sm text-on-surface mb-4 font-medium"
+            id="footer-quick-links-heading"
+          >
+            {content.footer.quickLinks}
+          </h2>
+          <ul role="list" className="flex flex-col gap-2">
+            <li>
+              <Link href="/collections" className={footerLinkClass}>
+                Collections
+              </Link>
+            </li>
+            <li>
+              <Link href="/collections/men" className={footerLinkClass}>
+                Men
+              </Link>
+            </li>
+            <li>
+              <Link href="/collections/women" className={footerLinkClass}>
+                Women
+              </Link>
+            </li>
+            <li>
+              <Link href="/collections/accessories" className={footerLinkClass}>
+                Accessories
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <nav aria-labelledby="footer-customer-care-heading">
+          <h2
+            className="type-body-sm text-on-surface mb-4 font-medium"
+            id="footer-customer-care-heading"
+          >
+            {content.footer.customerCare}
+          </h2>
+          <ul role="list" className="flex flex-col gap-2">
+            <li>
+              <Link href="/search" className={footerLinkClass}>
+                {content.footer.search}
+              </Link>
+            </li>
+            <li>
+              <Link href="/cart" className={footerLinkClass}>
+                {content.cart.title}
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <h2 className="type-body-sm text-on-surface mb-4 font-medium">
+            {content.footer.paymentMethods}
+          </h2>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
+              Visa
+            </span>
+            <span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
+              Mastercard
+            </span>
+            <span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
+              Shop Pay
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}