Initial commit: Shopify storefront Next.js template

Next.js 16 + React 19 storefront template with Shopify Storefront API integration, Tailwind v4, and shadcn/ui components. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0111qSr3KopyGRsJ6LznR1xZ
2026-07-31 22:12:19 -04:00
commit e3d5e75299
69 changed files with 7960 additions and 0 deletions
@@ -0,0 +1,121 @@
+import React from 'react';
+
+export interface FooterLink {
+  label: string;
+  url: string;
+}
+
+interface FooterProps {
+  storeName?: string;
+  logoUrl?: string;
+  tagline?: string;
+  copyright?: string;
+  links?: FooterLink[];
+}
+
+const Footer: React.FC<FooterProps> = ({
+  storeName = 'Stride',
+  logoUrl,
+  tagline = 'Performance in every stride.',
+  copyright = '© 2026 Stride. All rights reserved.',
+  links = [
+    { label: 'About', url: '#' },
+    { label: 'Athletes', url: '#' },
+    { label: 'Technology', url: '#' },
+    { label: 'Contact', url: '#' },
+  ],
+}) => {
+  return (
+    <footer className="bg-zinc-50 border-t border-border py-16 text-sm">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-y-12">
+          {/* Brand Column */}
+          <div className="md:col-span-5">
+            <div className="flex items-baseline mb-4">
+              {logoUrl ? (
+                <img
+                  src={logoUrl}
+                  alt={storeName}
+                  className="h-8 w-auto object-contain"
+                />
+              ) : (
+                <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground">
+                  {storeName}
+                </span>
+              )}
+            </div>
+
+            <p className="max-w-xs text-muted-foreground text-[15px] leading-relaxed">
+              {tagline}
+            </p>
+
+            <div className="mt-8 text-xs font-mono text-muted-foreground tracking-[1px]">
+              ENGINEERED FOR MOTION
+            </div>
+          </div>
+
+          {/* Links */}
+          <div className="md:col-span-3">
+            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
+              SHOP
+            </div>
+            <div className="flex flex-col gap-y-3 text-muted-foreground">
+              {links.map((link, index) => (
+                <a
+                  key={index}
+                  href={link.url}
+                  className="hover:text-foreground transition-colors w-fit"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          <div className="md:col-span-4">
+            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
+              CONNECT
+            </div>
+            <div className="flex flex-col gap-y-3 text-muted-foreground">
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Instagram
+              </a>
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Pinterest
+              </a>
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Newsletter
+              </a>
+            </div>
+
+            <div className="mt-auto pt-12 text-[10px] text-muted-foreground font-mono leading-loose">
+              CRAFTED WITH PRECISION
+              <br />
+              IN A NEUTRAL PALETTE
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-16 pt-8 border-t border-border text-xs text-muted-foreground flex flex-col md:flex-row justify-between items-center gap-4 font-mono tracking-widest">
+          <div>{copyright}</div>
+          <div className="flex gap-x-6">
+            <span>Privacy</span>
+            <span>Terms</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;