"use client" import { motion, useReducedMotion } from "framer-motion" import { buttonVariants } from "@/components/ui/button" import { ShoppingCart, Star, Heart } from "lucide-react" import { useState } from "react" import { cn } from "@/lib/utils" interface ProductRevealCardProps { name?: string price?: string originalPrice?: string image?: string description?: string rating?: number reviewCount?: number onAdd?: () => void onFavorite?: () => void enableAnimations?: boolean className?: string } export function ProductRevealCard({ name = "Premium Wireless Headphones", price = "$199", originalPrice = "$299", image = "https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?w=800&h=600&fit=crop", // Premium headphones description = "Experience studio-quality sound with advanced noise cancellation and 30-hour battery life. Perfect for music lovers and professionals.", rating = 4.8, reviewCount = 124, onAdd, onFavorite, enableAnimations = true, className, }: ProductRevealCardProps) { const [isFavorite, setIsFavorite] = useState(false) const shouldReduceMotion = useReducedMotion() const shouldAnimate = enableAnimations && !shouldReduceMotion const handleFavorite = () => { setIsFavorite(!isFavorite) onFavorite?.() } const containerVariants = { rest: { scale: 1, y: 0, filter: "blur(0px)", }, hover: shouldAnimate ? { scale: 1.03, y: -8, filter: "blur(0px)", transition: { type: "spring", stiffness: 300, damping: 30, mass: 0.8, } } : {}, } const imageVariants = { rest: { scale: 1 }, hover: { scale: 1.1 }, } const overlayVariants = { rest: { y: "100%", opacity: 0, filter: "blur(4px)", }, hover: { y: "0%", opacity: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 400, damping: 28, mass: 0.6, staggerChildren: 0.1, delayChildren: 0.1, }, }, } const contentVariants = { rest: { opacity: 0, y: 20, scale: 0.95, }, hover: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 400, damping: 25, mass: 0.5, }, }, } const buttonVariants_motion = { rest: { scale: 1, y: 0 }, hover: shouldAnimate ? { scale: 1.05, y: -2, transition: { type: "spring", stiffness: 400, damping: 25 } } : {}, tap: shouldAnimate ? { scale: 0.95 } : {}, } const favoriteVariants = { rest: { scale: 1, rotate: 0 }, favorite: { scale: [1, 1.3, 1], rotate: [0, 10, -10, 0], transition: { duration: 0.5, ease: "easeInOut" } }, } return ( {/* Image Container */}

{/* Favorite Button */} {/* Discount Badge */} {originalPrice && ( {Math.round(((parseFloat(originalPrice.replace('$', '')) - parseFloat(price.replace('$', ''))) / parseFloat(originalPrice.replace('$', ''))) * 100)}% OFF )}

{/* Content */}

{/* Rating */}

{[...Array(5)].map((_, i) => ( ))}

{rating} ({reviewCount} reviews)

{/* Product Info */}

{name}

{price} {originalPrice && ( {originalPrice} )}

{/* Reveal Overlay */}

{/* Product Description */}

Product Details

{description}

{/* Features */}

30h Battery

Long-lasting

Noise Cancel

Studio quality

{/* Action Buttons */} Add to Cart View Details

) }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build