x

apps/website/src/components/ProductCard.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import Image from 'next/image'
 import Link from './LocalizedLink'
 import type { Product } from '@homaroma/types'
 import { getCategoryImage, formatPrice } from '@homaroma/types'
@@ -19,17 +20,19 @@ export default function ProductCard({ product }: ProductCardProps) {
   const firstPrice = product.variants[0]?.price ?? product.price
 
   return (
-    <article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-brutal transition duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
-      <div className="relative aspect-[4/3] overflow-hidden bg-pop-bg">
+    <article className="ui-card ui-card-hover group flex h-full flex-col overflow-hidden">
+      <div className="relative aspect-[4/3] overflow-hidden bg-surface-page">
         <WishlistButton product={product} />
         <Link href={`/products/${product.id}`} className="block h-full w-full">
-          <img
+          <Image
             src={imageUrl}
-            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
             alt={productName}
+            fill
+            unoptimized
+            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
           />
           {categoryName && (
-            <span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-pop-black shadow-sm">
+            <span className="ui-status-badge absolute left-4 top-4 border-line-primary/20 bg-surface-card/90 px-3 py-1 text-[10px] uppercase tracking-widest text-text-main shadow-sm">
               {categoryName}
             </span>
           )}
@@ -38,13 +41,13 @@ export default function ProductCard({ product }: ProductCardProps) {
 
       <div className="flex flex-1 flex-col gap-4 p-5">
         <div className="space-y-1">
-          <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black">
-            <Link href={`/products/${product.id}`} className="transition hover:text-pop-pink">
+          <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-text-main">
+            <Link href={`/products/${product.id}`} className="transition hover:text-brand-primary">
               {productName}
             </Link>
           </h3>
           {product.scent.name && (
-            <p className="text-xs font-semibold uppercase tracking-widest text-gray-400">
+            <p className="text-xs font-semibold uppercase tracking-widest text-muted-text/70">
               {product.scent.name}
             </p>
           )}
@@ -53,7 +56,7 @@ export default function ProductCard({ product }: ProductCardProps) {
         {product.variants.length > 0 && (
           <div className="flex flex-wrap gap-2">
             {product.variants.slice(0, 3).map((variant) => (
-              <span key={variant.id} className="rounded-full bg-pop-bg px-3 py-1 text-xs font-semibold text-gray-600">
+              <span key={variant.id} className="rounded-full bg-surface-page px-3 py-1 text-xs font-semibold text-muted-text">
                 {variant.size}
               </span>
             ))}
@@ -61,10 +64,10 @@ export default function ProductCard({ product }: ProductCardProps) {
         )}
 
         <div className="mt-auto flex items-center justify-between gap-4">
-          <span className="text-lg font-bold text-pop-pink">{formatPrice(firstPrice)}</span>
+          <span className="text-lg font-bold text-brand-primary">{formatPrice(firstPrice)}</span>
           <Link
             href={`/products/${product.id}`}
-            className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
+            className="ui-button-primary px-4 py-2 text-[10px]"
           >
             View
           </Link>