Redesign storefront to match minimal reference design

Product cards, header, footer, PDP, and typography reworked toward a
leaner layout; adds shop policy pages backed by the Storefront API.

- Type: switch to Geist Sans/Mono, regular-weight headings
- Product cards: drop borders, rounded corners, and action buttons
- Header: shorter bar, no bottom border, center-out hover underline,
  bag icon replacing the cart icon (drawer wording updated to match)
- Footer: single line with policy links and social icons on bg-background
- Policies: /policies/[handle] renders shop.privacyPolicy,
  termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy
  (SSG, hourly revalidation)
- PDP: image grid with mobile carousel + dots and click-to-zoom,
  sticky info column, colour swatches from option optionValues with a
  configurable name-to-colour fallback in config/swatches.ts,
  Shop-purple checkout button
- Recommendations: left-aligned heading on bg-background
- Ignore .env*.local and tsconfig.tsbuildinfo

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX

app/collections/[handle]/page.tsx

@@ -16,10 +16,7 @@ export default function Page() {
       <CollectionDetail />
       <Footer
         storeName="Stride"
-        logoUrl=""
-        tagline="Your premium shopping destination"
         copyright="© 2026 Stride. All rights reserved."
-        links={[]}
       />
     </>
   );

app/collections/page.tsx

@@ -16,10 +16,7 @@ export default function Page() {
       <Collections title="Our Collections" />
       <Footer
         storeName="Stride"
-        logoUrl=""
-        tagline="Your premium shopping destination"
         copyright="© 2026 Stride. All rights reserved."
-        links={[]}
       />
     </>
   );

app/globals.css

@@ -33,6 +33,9 @@
   --color-destructive: hsl(0 84.2% 60.2%);
   --color-destructive-foreground: hsl(0 0% 98%);
 
+  /* Shop (accelerated checkout) purple */
+  --color-shop: #5a31f4;
+
   /* Border */
   --color-border: hsl(240 5.9% 90%);
   --color-input: hsl(240 5.9% 90%);
@@ -44,10 +47,12 @@
   --radius-lg: 1rem;
   --radius-xl: 1.25rem;
 
-  /* Enhanced typography scale */
-  --font-heading: 'Space Grotesk', system-ui, sans-serif;
-  --font-body: 'Inter', system-ui, sans-serif;
-  --font-poppins: 'Poppins', system-ui, sans-serif;
+  /* Typography — Geist Sans / Geist Mono */
+  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+  --font-heading: var(--font-geist-sans), system-ui, sans-serif;
+  --font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --font-poppins: var(--font-geist-sans), system-ui, sans-serif;
 }
 
 /* Base styles for light, modern Shopify storefront */
@@ -71,12 +76,70 @@ body {
   border-color: hsl(240 5.9% 85%);
 }
 
-/* Bold heading styles */
+/* Heading styles — regular weight, slightly tightened like the Geist reference */
 h1,
 h2,
 .font-heading {
-  font-weight: 700;
-  letter-spacing: -0.025em;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+
+/* Swipeable rows (mobile galleries) without a visible scrollbar */
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Product description (HTML returned by the Storefront API) */
+.product-description p {
+  margin-bottom: 1rem;
+}
+
+.product-description > :last-child {
+  margin-bottom: 0;
+}
+
+/* Shop policy body (HTML returned by the Storefront API) */
+.policy-body p,
+.policy-body ul,
+.policy-body ol {
+  margin-bottom: 1.5rem;
+}
+
+.policy-body ul,
+.policy-body ol {
+  padding-left: 1.25rem;
+  list-style: revert;
+}
+
+.policy-body li {
+  margin-bottom: 0.5rem;
+}
+
+.policy-body h2,
+.policy-body h3,
+.policy-body h4 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.policy-body a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.policy-body strong {
+  font-weight: 500;
+}
+
+.policy-body > :last-child {
+  margin-bottom: 0;
 }
 
 /* Enhanced button styles */

app/layout.tsx

@@ -2,24 +2,16 @@
 
 import React from 'react';
 import './globals.css';
-import { Space_Grotesk, Inter, Poppins } from 'next/font/google';
+import { Geist, Geist_Mono } from 'next/font/google';
 
-const poppins = Poppins({
+const geist = Geist({
   subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-poppins',
+  variable: '--font-geist-sans',
 });
 
-const spaceGrotesk = Space_Grotesk({
+const geistMono = Geist_Mono({
   subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-heading',
-});
-
-const inter = Inter({
-  subsets: ['latin'],
-  weight: ['400', '500', '600'],
-  variable: '--font-body',
+  variable: '--font-geist-mono',
 });
 
 export default function RootLayout({
@@ -28,10 +20,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="en"
-      className={`${poppins.variable} ${spaceGrotesk.variable} ${inter.variable}`}
-    >
+    <html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
       <body className="font-body antialiased bg-background text-foreground m-0 p-0">
         {children}
       </body>

app/page.tsx

@@ -13,13 +13,13 @@ export default function Page() {
           { label: 'Collections', url: '/collections' },
         ]}
       />
-      <Products title="Shop All" />
+      <Products
+        title="Shopify Hydrogen Storefront"
+        subtitle="An agent-friendly Shopify storefront built with Next.js and Hydrogen."
+      />
       <Footer
         storeName="Stride"
-        logoUrl=""
-        tagline="Your premium shopping destination"
         copyright="© 2026 Stride. All rights reserved."
-        links={[]}
       />
     </>
   );

app/policies/[handle]/page.tsx

@@ -0,0 +1,65 @@
+import { notFound } from 'next/navigation';
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import { getShopPolicy, POLICY_HANDLES } from '@/hooks/use-shopify-policies';
+
+export function generateStaticParams() {
+  return POLICY_HANDLES.map((handle) => ({ handle }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  const policy = await getShopPolicy(handle);
+
+  return {
+    title: policy ? `${policy.title} — Stride` : 'Policy — Stride',
+  };
+}
+
+export default async function PolicyPage({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  const policy = await getShopPolicy(handle);
+
+  if (!policy) {
+    notFound();
+  }
+
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+
+      <main className="max-w-screen-2xl mx-auto w-full px-5 lg:px-10 py-16">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-3xl md:text-4xl font-normal text-foreground">
+            {policy.title}
+          </h1>
+
+          <div
+            className="policy-body mt-8 text-[15px] leading-7 text-foreground"
+            dangerouslySetInnerHTML={{ __html: policy.body }}
+          />
+        </div>
+      </main>
+
+      <Footer
+        storeName="Stride"
+        copyright="© 2026 Stride. All rights reserved."
+      />
+    </>
+  );
+}

app/products/[handle]/page.tsx

@@ -14,21 +14,11 @@ export default function Page() {
           { label: 'Collections', url: '/collections' },
         ]}
       />
-      <ProductDetail
-        addToCartLabel="Add to Cart"
-        features={[
-          { icon: 'RiTruckLine', label: 'Free shipping on orders over $100' },
-          { icon: 'RiArrowGoBackLine', label: '30-day return policy' },
-          { icon: 'RiSecurePaymentLine', label: 'Secure payment' },
-        ]}
-      />
-      <ProductRecommendations title="You Might Also Like" />
+      <ProductDetail addToCartLabel="Add to Cart" />
+      <ProductRecommendations title="You May Also Like" />
       <Footer
         storeName="Stride"
-        logoUrl=""
-        tagline="Your premium shopping destination"
         copyright="© 2026 Stride. All rights reserved."
-        links={[]}
       />
     </>
   );

app/shop/collections/page.tsx

@@ -16,10 +16,7 @@ export default function Page() {
       <Collections title="Our Collections" />
       <Footer
         storeName="Stride"
-        logoUrl=""
-        tagline="Your premium shopping destination"
         copyright="© 2026 Stride. All rights reserved."
-        links={[]}
       />
     </>
   );