feat: add hover opacity transitions and bottom margin to bento grid components

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

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">