fix: shadow in the homepage and component split

src/app/page.tsx

@@ -1,7 +1,7 @@
 import Hero from "@/components/Hero"
 import { HeroParticles } from "@/components/HeroParticles"
 import BlurFade from "@/components/magicui/blur-fade"
-import TrustedBy from "@/components/TrustedBy"
+import TrustedBy from "@/components/TrustedBy/TrustedBy"
 import { getMyntenanceRepository } from "@/lib/github/api"
 import { getServerOctokit } from "@/lib/github/server"
 import { createClient } from "@/lib/supabase/server"

src/components/TrustedBy/Card.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from "next-themes"
+import { MagicCard } from "../magicui/magic-card"
+
+export const Card = ({ children }: { children: React.ReactNode }) => {
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <MagicCard
+      gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"}
+      className="flex min-w-[180px] cursor-pointer items-center justify-center md:min-w-[300px]"
+    >
+      <div className="flex h-full flex-col items-center justify-center gap-2 px-8 py-4 text-xl md:px-16">
+        {children}
+      </div>
+    </MagicCard>
+  )
+}

src/components/TrustedBy/CardLabel.tsx

@@ -0,0 +1,3 @@
+export const CardLabel = ({ children }: { children: React.ReactNode }) => {
+  return <div className="text-base md:text-xl">{children}</div>
+}

src/components/TrustedBy/CardNumber.tsx

@@ -0,0 +1,16 @@
+import NumberTicker from "../magicui/number-ticker"
+
+export const CardNumber = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode
+  value: number
+}) => {
+  return (
+    <div className="mb-auto flex items-center gap-1 text-xl font-semibold md:text-4xl">
+      <NumberTicker value={value} />
+      {children}
+    </div>
+  )
+}

src/components/TrustedBy.tsx → src/components/TrustedBy/TrustedBy.tsx

@@ -1,10 +1,11 @@
 "use client"
-import { useTheme } from "next-themes"
-import { MagicCard } from "@/components/magicui/magic-card"
-import Marquee from "./magicui/marquee"
-import NumberTicker from "./magicui/number-ticker"
-import { FolderGit2, Forklift, GitFork, Star, User } from "lucide-react"
-import { Avatar, AvatarImage } from "./ui/avatar"
+
+import Marquee from "../magicui/marquee"
+import { FolderGit2, GitFork, Star, User } from "lucide-react"
+import { Avatar, AvatarImage } from "../ui/avatar"
+import { CardNumber } from "./CardNumber"
+import { CardLabel } from "./CardLabel"
+import { Card } from "./Card"
 
 type Props = {
   stargazers: number
@@ -71,37 +72,3 @@ export default function TrustedBy({
     </div>
   )
 }
-
-const Card = ({ children }: { children: React.ReactNode }) => {
-  const { resolvedTheme } = useTheme()
-
-  return (
-    <MagicCard
-      gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"}
-      className="flex min-w-[180px] cursor-pointer items-center justify-center shadow-xl md:min-w-[300px]"
-    >
-      <div className="flex h-full flex-col items-center justify-center gap-2 px-8 py-4 text-xl md:px-16">
-        {children}
-      </div>
-    </MagicCard>
-  )
-}
-
-const CardNumber = ({
-  children,
-  value,
-}: {
-  children: React.ReactNode
-  value: number
-}) => {
-  return (
-    <div className="mb-auto flex items-center gap-1 text-xl font-semibold md:text-4xl">
-      <NumberTicker value={value} />
-      {children}
-    </div>
-  )
-}
-
-const CardLabel = ({ children }: { children: React.ReactNode }) => {
-  return <div className="text-base md:text-xl">{children}</div>
-}