fx

src/components/ui/bento-grid.tsx

@@ -1,6 +1,8 @@
 import { cn } from "@/lib/utils";
-import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
+import { CT, CP } from "@/components/Texts";
 import Image from 'next/image';
+import React from 'react';
+import { motion } from 'framer-motion';
 
 export const BentoGrid = ({
   className,
@@ -21,23 +23,17 @@ export const BentoGrid = ({
   );
 };
 
-export const BentoGridItem = ({
-  className,
-  title,
-  subtitle,
-  description,
-  img,
-  video,
-}: {
+export const BentoGridItem = React.forwardRef<HTMLDivElement, {
   className?: string;
   title?: string | React.ReactNode;
   subtitle?: string | React.ReactNode;
   description?: string | React.ReactNode;
   img?: string;
   video?: string;
-}) => {
+}>(({ className, title, subtitle, description, img, video }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn(
         "group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
         className,
@@ -64,4 +60,8 @@ export const BentoGridItem = ({
       </div>
     </div>
   );
-};
+});
+
+BentoGridItem.displayName = 'BentoGridItem';
+
+export const MotionBentoGridItem = motion(BentoGridItem);