From fe729e40a0e0aa231d03584181167920274aa51b Mon Sep 17 00:00:00 2001
From: Khang Duy LAI <laiduy98@gmail.com>
Date: Wed, 11 Mar 2026 14:38:44 +0100
Subject: [PATCH] feat: add RoastCard component with hover effects

---
 src/components/RoastCard.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/RoastCard.jsx

diff --git a/src/components/RoastCard.jsx b/src/components/RoastCard.jsx
new file mode 100644
index 0000000..3900873
--- /dev/null
+++ b/src/components/RoastCard.jsx
@@ -0,0 +1,18 @@
+export default function RoastCard({ image, caption }) {
+  return (
+    <div className="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 bg-white">
+      <div className="aspect-square overflow-hidden">
+        <img
+          src={`/images/${image}`}
+          alt={caption}
+          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+        />
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+        <p className="text-white text-sm md:text-base font-medium text-center">
+          {caption}
+        </p>
+      </div>
+    </div>
+  )
+}