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,71 @@
+import React from 'react';
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  image?: CollectionImage;
+}
+
+interface CollectionCardProps {
+  collection: Collection;
+}
+
+const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
+  return (
+    <Link
+      href={`/collections/${collection.handle}`}
+      className="group block h-full"
+    >
+      <div className="card-modern bg-card rounded-3xl overflow-hidden h-full flex flex-col shadow-sm">
+        {/* Collection Image */}
+        <div className="aspect-[16/10] relative overflow-hidden bg-zinc-100">
+          {collection.image ? (
+            <img
+              src={collection.image.url}
+              alt={collection.image.altText || collection.title}
+              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+            />
+          ) : (
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-300">
+              <i className="ri-folder-line text-8xl mb-4"></i>
+              <span className="text-xs tracking-widest font-mono">
+                COLLECTION
+              </span>
+            </div>
+          )}
+
+          <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30"></div>
+        </div>
+
+        {/* Collection Info */}
+        <div className="p-8 flex flex-col flex-1">
+          <h3 className="font-heading text-3xl font-semibold tracking-tighter text-foreground mb-4 group-hover:text-primary transition-colors">
+            {collection.title}
+          </h3>
+
+          {collection.description && (
+            <p className="text-muted-foreground text-[15px] leading-relaxed line-clamp-3 flex-1">
+              {collection.description}
+            </p>
+          )}
+
+          <div className="mt-8 flex items-center text-sm font-semibold text-primary group-hover:gap-x-2 transition-all">
+            EXPLORE COLLECTION
+            <i className="ri-arrow-right-line ml-2 text-base transition-transform group-hover:translate-x-0.5"></i>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default CollectionCard;