Initial commit for homaroma

apps/website/src/components/ProductCard.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom'
+import type { Product } from '../types'
+import { getCategoryImage, formatPrice } from '../types'
+
+interface ProductCardProps {
+  product: Product
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  return (
+    <div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
+      <div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
+        <img
+          src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+          alt={product.scent.name}
+        />
+        {/* Category badge */}
+        <div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
+          {product.category.name}
+        </div>
+        {/* Available badge */}
+        <div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
+          Available
+        </div>
+      </div>
+
+      <div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
+          <div>
+            <h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
+              {product.scent.name}
+            </h3>
+            <p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
+              {product.category.name}
+            </p>
+          </div>
+          <span className="text-cyan-glow font-bold text-xs md:text-lg">
+            {formatPrice(product.variants[0]?.price)}
+          </span>
+        </div>
+
+        {/* Variants (sizes) */}
+        <div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
+          {product.variants.map((v) => (
+            <div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
+              {v.size}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex-1" />
+
+        <Link
+          to={`/products/${product.id}`}
+          className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
+        >
+          Discover
+        </Link>
+      </div>
+    </div>
+  )
+}