import { motion } from "framer-motion";
import React from "react";
const Card = ({ title, price, image }) => {
return (
<div className="relative w-full max-w-xs h-96 perspective">
<motion.div
className="relative h-full w-full bg-cover bg-center bg-no-repeat transition-transform duration-[2300ms] transform-style-3d"
style={{ backgroundImage: `url(${image})` }}
whileHover={{ rotateY: 180 }}
>
<div className="absolute inset-5 border-4 border-white/50 shadow-lg transition-transform duration-[2300ms] transform-style-3d"></div>
<div className="absolute inset-0 bg-black/40 transition-opacity duration-[1300ms]"></div>
<h1 className="absolute bottom-10 left-10 text-3xl font-semibold text-white transform translate-z-0 transition-transform duration-[2300ms]">
{title}
</h1>
<span className="absolute top-10 right-10 text-2xl font-light text-white transform translate-z-0 transition-transform duration-[2300ms]">
${price}
</span>
<div className="absolute inset-0 flex items-center justify-center bg-gray-900 transform translate-z-[-1px] rotate-y-180">
<a
href="#"
className="px-6 py-3 text-lg font-light text-white border border-white transition-all duration-500 hover:bg-white hover:text-gray-900"
>
Add to Cart
</a>
</div>
</motion.div>
</div>
);
};
const CardContainer = () => {
const cards = [
{
title: "Little Bonsai",
price: "79",
image:
"https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80",
},
{
title: "Tropical Leaf",
price: "35",
image:
"https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80",
},
{
title: "Marijuana Chill",
price: "155",
image:
"https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80",
},
];
return (
<div className="flex flex-wrap justify-center gap-6 p-10 bg-gray-900 min-h-screen">
{cards.map((card, index) => (
<Card key={index} {...card} />
))}
</div>
);
};
export default CardContainer;
No comments:
Post a Comment