update design

components/shopify/collection-card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Link from 'next/link';
+
+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="block group">
+      {/* Collection Image */}
+      <div className="aspect-video overflow-hidden bg-gray-100">
+        {collection.image ? (
+          <img
+            src={collection.image.url}
+            alt={collection.image.altText || collection.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <i className="ri-folder-line text-6xl"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Collection Info */}
+      <div className="mt-3">
+        <h3 className="text-base font-medium text-gray-900 font-heading">
+          {collection.title}
+        </h3>
+      </div>
+    </Link>
+  );
+};
+
+export default CollectionCard;