"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, Plus, Star } from "lucide-react"; import { cn } from "@/lib/utils"; export function ProductVisual({ hovering }: { hovering: boolean }) { return (

); } export function ProductCard({ name, price, rating = 5, className, }: { name: string; price: string; rating?: number; className?: string; }) { const [hovering, setHovering] = useState(false); const [added, setAdded] = useState(false); function handleAdd() { if (added) return; setAdded(true); setTimeout(() => setAdded(false), 1800); } return ( setHovering(true)} onMouseLeave={() => setHovering(false)} whileHover={{ y: -6 }} transition={{ duration: 0.3, ease: "easeOut" }} className={cn( "group relative w-64 rounded-2xl border border-line bg-panel p-4 shadow-lg shadow-black/20", hovering && "shadow-2xl shadow-brand/10", className )} style={{ transition: "box-shadow 0.3s ease" }} >

{Array.from({ length: 5 }).map((_, i) => ( ))}

{name}

{price} {added ? ( ) : ( )}

); } export default function Demo() { return (

); }

Product Card

Lumen Vial, 10ml