add

src/components/ui/bento-grid.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
-import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
+import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
+import Image from 'next/image';
 
 export const BentoGrid = ({
   className,
@@ -23,28 +24,43 @@ export const BentoGrid = ({
 export const BentoGridItem = ({
   className,
   title,
+  subtitle,
   description,
-  header,
-  icon,
+  img,
+  video,
 }: {
   className?: string;
   title?: string | React.ReactNode;
+  subtitle?: string | React.ReactNode;
   description?: string | React.ReactNode;
-  header?: React.ReactNode;
-  icon?: React.ReactNode;
+  img?: string;
+  video?: string;
 }) => {
   return (
     <div
       className={cn(
-        "group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-2xl border border-white/20 bg-black/20 p-8 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40",
+        "group/bento shadow-input row-span-1 flex flex-col justify-between  border border-black bg-black/20 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
         className,
       )}
     >
-      {header}
-      <div className="transition duration-200 group-hover/bento:translate-x-2">
-        {icon}
+      <div className="flex flex-1 w-full h-full min-h-[6rem] bg-black overflow-hidden">
+        {video ? (
+          <video
+            src={video}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="w-full h-full object-cover"
+          />
+        ) : img ? (
+          <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover" />
+        ) : null}
+      </div>
+      <div className="p-4 transition duration-200 group-hover/bento:translate-x-2">
         <CT>{title}</CT>
-        <CP>{description}</CP>
+        <CP className="font-medium">{subtitle}</CP>
+        <CP className="mt-2">{description}</CP>
       </div>
     </div>
   );