From 2fdcb3697d09f52fa644a6ce3f57ba443714161c Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 18 Sep 2025 18:17:19 +0200
Subject: [PATCH] feat: add hover opacity transitions and bottom margin to
 bento grid components

---
 src/components/BentoReviews.tsx  | 2 +-
 src/components/ui/bento-grid.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/BentoReviews.tsx b/src/components/BentoReviews.tsx
index 714e736..7995a33 100644
--- a/src/components/BentoReviews.tsx
+++ b/src/components/BentoReviews.tsx
@@ -71,7 +71,7 @@ export function BentoReviews() {
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="mx-auto max-w-4xl mt-6 "
+          className="mx-auto max-w-4xl mt-6 mb-8"
         >
           <P className="text-center" color="primary">
           A robust infrastructure layer for autonomous AI agents, our technology stack
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
index a72cd4e..dcaa32d 100644
--- a/src/components/ui/bento-grid.tsx
+++ b/src/components/ui/bento-grid.tsx
@@ -51,10 +51,10 @@ export const BentoGridItem = ({
             loop
             muted
             playsInline
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
           />
         ) : img ? (
-          <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover" />
+          <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300" />
         ) : null}
       </div>
       <div className="p-4 transition duration-200 group-hover/bento:translate-x-2">