feat: add BentoDemo component and integrate it into the MagicuiPage

src/app/[locale]/(marketing)/(pages)/magicui/page.tsx

@@ -1,3 +1,4 @@
+import { BentoDemo } from '@/components/magicui/example/bento-grid-example';
 import { HeroVideoDialogDemoTopInBottomOut } from '@/components/magicui/example/hero-video-dialog-example';
 import { MarqueeDemoVertical } from '@/components/magicui/example/marquee-example';
 
@@ -10,6 +11,7 @@ export default async function MagicuiPage() {
   return (
     <div className="mx-auto space-y-8">
       <HeroVideoDialogDemoTopInBottomOut />
+      <BentoDemo />
       <MarqueeDemoVertical />
     </div>
   );

src/components/magicui/bento-grid.tsx

@@ -76,7 +76,7 @@ const BentoCard = ({
         </a>
       </Button>
     </div>
-    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] dark:group-hover:bg-neutral-800/10" />
+    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
   </div>
 );
 

src/components/magicui/example/bento-grid-example.tsx

@@ -0,0 +1,69 @@
+import {
+    BellIcon,
+    CalendarIcon,
+    FileTextIcon,
+    GlobeIcon,
+    InputIcon,
+  } from "@radix-ui/react-icons";
+  
+  import { BentoCard, BentoGrid } from "@/components/magicui/bento-grid";
+  
+  const features = [
+    {
+      Icon: FileTextIcon,
+      name: "Save your files",
+      description: "We automatically save your files as you type.",
+      href: "/",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
+    },
+    {
+      Icon: InputIcon,
+      name: "Full text search",
+      description: "Search through all your files in one place.",
+      href: "/",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
+    },
+    {
+      Icon: GlobeIcon,
+      name: "Multilingual",
+      description: "Supports 100+ languages and counting.",
+      href: "/",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
+    },
+    {
+      Icon: CalendarIcon,
+      name: "Calendar",
+      description: "Use the calendar to filter your files by date.",
+      href: "/",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
+    },
+    {
+      Icon: BellIcon,
+      name: "Notifications",
+      description:
+        "Get notified when someone shares a file or mentions you in a comment.",
+      href: "/",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",
+    },
+  ];
+  
+  export function BentoDemo() {
+    return (
+      <BentoGrid className="lg:grid-rows-3">
+        {features.map((feature) => (
+          <BentoCard key={feature.name} {...feature} />
+        ))}
+      </BentoGrid>
+    );
+  }
+