fix: refactor main page

app/(main)/page.tsx

@@ -1,11 +1,11 @@
-import ServerList from "@/components/ServerList"
+import ServerListClient from "./ClientComponents/ServerListClient"
-import ServerOverview from "@/components/ServerOverview"
+import ServerOverviewClient from "./ClientComponents/ServerOverviewClient"
 
 export default async function Home() {
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
-      <ServerOverview />
+      <ServerOverviewClient />
-      <ServerList />
+      <ServerListClient />
     </div>
   )
 }

components/BlurLayer.tsx

@@ -1,35 +0,0 @@
-import React from "react"
-
-const BlurLayers = () => {
-  const computeLayerStyle = (index: number) => {
-    const blurAmount = index * 3.7037
-    const maskStart = index * 10
-    let maskEnd = maskStart + 20
-    if (maskEnd > 100) {
-      maskEnd = 100
-    }
-    return {
-      backdropFilter: `blur-sm(${blurAmount}px)`,
-      WebkitBackdropFilter: `blur-sm(${blurAmount}px)`,
-      zIndex: index + 1,
-      maskImage: `linear-gradient(rgba(0, 0, 0, 0) ${maskStart}%, rgb(0, 0, 0) ${maskEnd}%)`,
-    }
-  }
-
-  // 根据层数动态生成层
-  const layers = Array.from({ length: 5 }).map((_, index) => (
-    <div
-      key={index}
-      className={"absolute inset-0 h-full w-full"}
-      style={computeLayerStyle(index)}
-    />
-  ))
-
-  return (
-    <div className={"fixed bottom-0 left-0 right-0 z-50 h-[140px]"}>
-      <div className={"relative h-full"}>{layers}</div>
-    </div>
-  )
-}
-
-export default BlurLayers

components/ServerList.tsx

@@ -1,5 +0,0 @@
-import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient"
-
-export default async function ServerList() {
-  return <ServerListClient />
-}

components/ServerOverview.tsx

@@ -1,5 +0,0 @@
-import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient"
-
-export default async function ServerOverview() {
-  return <ServerOverviewClient />
-}