feat: add GridPattern component and its demo example to MagicuiPage

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

@@ -1,6 +1,7 @@
 import { AnimatedListDemo } from '@/components/magicui/example/animated-list-example';
 import { BentoDemo } from '@/components/magicui/example/bento-grid-example';
 import { DotPatternDemo } from '@/components/magicui/example/dot-pattern-example';
+import { GridPatternDemo } from '@/components/magicui/example/grid-pattern-example';
 import { HeroVideoDialogDemoTopInBottomOut } from '@/components/magicui/example/hero-video-dialog-example';
 import { MarqueeDemoVertical } from '@/components/magicui/example/marquee-example';
 
@@ -12,11 +13,12 @@ import { MarqueeDemoVertical } from '@/components/magicui/example/marquee-exampl
 export default async function MagicuiPage() {
   return (
     <div className="mx-auto space-y-8">
-      <HeroVideoDialogDemoTopInBottomOut />
+      <DotPatternDemo />
+      <GridPatternDemo />
       <BentoDemo />
       <MarqueeDemoVertical />
       <AnimatedListDemo />
-      <DotPatternDemo />
+      <HeroVideoDialogDemoTopInBottomOut />
     </div>
   );
 }

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { GridPattern } from "@/components/magicui/grid-pattern";
+
+export function GridPatternDemo() {
+  return (
+    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background">
+      <GridPattern
+        squares={[
+          [4, 4],
+          [5, 1],
+          [8, 2],
+          [5, 3],
+          [5, 5],
+          [10, 10],
+          [12, 15],
+          [10, 15],
+          [15, 10],
+        ]}
+        className={cn(
+          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        )}
+      />
+    </div>
+  );
+}