Update default shopify site design

components/shopify/product-card.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useShopifyCart, addCartLines } from '@/hooks/use-shopify-cart';
 import { truncate } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
 
 interface ProductImage {
   url: string;
@@ -27,6 +25,7 @@ interface Product {
   id: string;
   title: string;
   description?: string;
+  productType?: string;
   handle: string;
   images: {
     edges: Array<{
@@ -87,7 +86,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
   };
 
   return (
-    <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden group py-0 gap-0">
+    <div className="group">
       {/* Product Image */}
       <div className="aspect-square overflow-hidden bg-gray-100 relative">
         {firstImage ? (
@@ -113,26 +112,17 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
       </div>
 
       {/* Product Info */}
-      <CardContent className="p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-2 line-clamp-2 font-heading">
-          {truncate(product.title, 50)}
-        </h3>
-
-        {/* Price Section */}
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-lg font-bold text-gray-900">
-            ${parseFloat(price.amount).toFixed(2)}
-          </span>
-        </div>
-
-        {/* View Details Button */}
+      <div className="mt-3">
         <Link href={`/products/${product.handle}`}>
-          <Button className="w-full" size="sm">
-            View Details
-          </Button>
+          <h3 className="text-base font-medium text-gray-900 line-clamp-2 font-heading">
+            {truncate(product.title, 50)}
+          </h3>
         </Link>
-      </CardContent>
-    </Card>
+        <p className="text-base text-gray-500">
+          ${parseFloat(price.amount).toFixed(2)}
+        </p>
+      </div>
+    </div>
   );
 };