We build websites
that convert visitors
into customers

1  // Optimized product card component
2  import { useState } from 'react'
3  import { motion } from 'framer-motion'
4
5  interface ProductProps {
6    title: string
7    price: number
8    image: string
9  }
10
11 export function ProductCard({
12   title, price, image
13 }: ProductProps) {
14   const [added, setAdded] = useState(false)
15
16   return (
17     <motion.div
18       whileHover={{ scale: 1.02 }}
19       className="card"
20     >
21       <img src={image} alt={title} />
22       <h3>{title}</h3>
23       <p>${price}</p>
24       <button onClick={() => setAdded(true)}>
25         {added ? '✓ Added' : 'Add to cart'}
26       </button>
27     </motion.div>
28   )
29 }