Add CardNav, theme providers, and UI updates

Introduce an interactive top navigation and theming + site UI/branding changes. - Add CardNav component (TSX + CSS) with GSAP animations and responsive behavior. - Dynamic Header now loads CardNav (client-side). - Add Providers (next-themes) and wrap RootLayout; enable theme toggle and update site title to "Koring Team". - Add Koring logo component and public SVG asset. - Add custom 404 (app/not-found.tsx). - Update home page spacing and card paddings for responsiveness. - Refactor Footer content and layout for legal/branding text. - Add dependencies: gsap, react-icons and update pnpm lock.
2026-09-12 05:45:17 +08:00 · 2026-07-11 01:21:44 +08:00
parent f35b9d1fec
commit 6d87e76ebb
12 changed files with 771 additions and 78 deletions
@@ -6,6 +6,7 @@ import { Header } from "@/layout/header";
 import { Footer } from "@/layout/footer";
 import Script from "next/script";
 import { cn } from "@/lib/utils";
+import { Providers } from "./providers";

 const alimamaFangYuan = localFont({
  src: "../public/font/Alimama.ttf",
@@ -18,7 +19,7 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "RivFox",
+  title: "Koring Team",
  description: "Generated by create next app",
  icons: {
    icon: "/favicon.svg",
@@ -32,12 +33,15 @@ export default function RootLayout({
 }>) {
  return (
    <html
-      lang="en"
-      className={cn("h-full", "antialiased", alimamaFangYuan.variable, geistMono.variable, "font-sans")}
-  >
+        lang="en"
+        suppressHydrationWarning
+        className={cn("h-full", "antialiased", alimamaFangYuan.variable, geistMono.variable, "font-sans")}
+    >
      <body className="min-h-full flex flex-col">
+        <Providers>
        <Header />
-        <main className="flex-1 pt-14 px-4 sm:px-10 lg:px-48">
+        <div style={{ height: 20 }} />
+        <main className="flex-1 px-4 sm:px-10 lg:px-48">
          {children}
          <Script
            src="https://analysis.rivfox.com/api/script.js"
@@ -45,7 +49,9 @@ export default function RootLayout({
            strategy="afterInteractive"
          />
        </main>
+        <div style={{ height: 50 }} />
        <Footer/>
+        </Providers>
      </body>
    </html>
  );
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { FlickeringGrid } from "@/components/ui/flickering-grid";
+
+export default function NotFound() {
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-[60vh] gap-6" style={{ height: "85vh" }}>
+      <FlickeringGrid
+        className="absolute inset-0 z-0 mask-[radial-gradient(700px_circle_at_center,white,transparent)]"
+        squareSize={6}
+        gridGap={14}
+        color="#6b9eb6"
+        maxOpacity={0.7}
+        flickerChance={0.1}
+      />
+      <div className="relative z-10 flex flex-col items-center gap-2">
+        <span className="text-8xl font-black tracking-tighter text-muted-foreground/20">404</span>
+        <h1 className="text-2xl font-bold">页面未找到</h1>
+        <p className="text-sm text-muted-foreground">你访问的页面不存在或已被移除</p>
+      </div>
+      <Link href="/" className="relative z-10">
+        <Button>返回首页</Button>
+      </Link>
+    </div>
+  );
+}
@@ -30,34 +30,24 @@ export default function HomePage() {
          </div>
        </div>

-        <div className="relative w-full h-120 overflow-hidden">
-          <div className="relative rounded-xl border w-full h-full">
-            <div className="absolute inset-0 z-10 flex items-center justify-center">
-              <img
-                src="/koring-big-w-blue.svg"
-                alt="Koring Team"
-                className="w-[5%] h-1"
-              />
-            </div>
-
-            <span className="absolute right-12 bottom-12 text-xl text-muted-foreground">
-
-            </span>
-
-            <FlickeringGrid
-              className="absolute inset-0 z-0 mask-[radial-gradient(700px_circle_at_center,white,transparent)]"
-              squareSize={6}
-              gridGap={14}
-              color="#6b9eb6"
-              maxOpacity={0.7}
-              flickerChance={0.1}
-            />
+        <div className="relative w-full" style={{ height: "75vh" }}>
+          <FlickeringGrid
+            className="absolute inset-0 z-0 mask-[radial-gradient(700px_circle_at_center,white,transparent)]"
+            squareSize={6}
+            gridGap={14}
+            color="#6b9eb6"
+            maxOpacity={0.7}
+            flickerChance={0.1}
+          />
+          <div className="relative z-10 flex flex-col items-center justify-center h-full gap-2">
+            <span className="font-bold text-5xl">Koring Team</span>
+            <span className="text-xl text-muted-foreground">创意无限</span>
          </div>
        </div>

        <Link
          href="/launcher"
-          className="relative flex w-full flex-col overflow-hidden rounded-md border p-6 group dark text-white bg-[#0A0A0AFF]"
+          className="relative flex w-full flex-col overflow-hidden rounded-md border p-4 sm:p-6 group dark text-white bg-[#0A0A0AFF]"
        >
          <div className="flex items-center justify-between gap-4">
            要不来尝尝鲜？试试这个...
@@ -90,7 +80,7 @@ export default function HomePage() {
          <a
            href="https://docs.play.lenjing.work"
            target="_blank"
-            className="group rounded-md border border-border p-6"
+            className="group rounded-md border border-border p-4 sm:p-6"
          >
            <div className="flex items-center justify-between gap-4">
              <b>散射系列</b>
@@ -104,7 +94,7 @@ export default function HomePage() {

          <a
            href="/launcher"
-            className="group rounded-md border border-border p-6"
+            className="group rounded-md border border-border p-4 sm:p-6"
          >
            <div className="flex items-center justify-between gap-4">
              <b>科灵启动器</b>
@@ -120,7 +110,7 @@ export default function HomePage() {
            </div>
          </a>

-          <a className="group rounded-md border border-border p-6">
+          <a className="group rounded-md border border-border p-4 sm:p-6">
            <div className="flex items-center justify-between gap-4">
              <b>绘皮编辑器</b>
              <Status status="degraded">
@@ -135,7 +125,7 @@ export default function HomePage() {
            </div>
          </a>

-          <a className="group rounded-md border border-border p-6">
+          <a className="group rounded-md border border-border p-4 sm:p-6">
            <div className="flex items-center justify-between gap-4">
              <b>绘皮编辑器</b>
              <Status status="degraded">
@@ -150,7 +140,7 @@ export default function HomePage() {
            </div>
          </a>

-          <a className="group rounded-md border border-border p-6">
+          <a className="group rounded-md border border-border p-4 sm:p-6">
            <div className="flex items-center justify-between gap-4">
              <b>创汇基金</b>
              <Status status="degraded">
@@ -168,7 +158,7 @@ export default function HomePage() {
          <a
            href="https://mchine.space"
            target="_blank"
-            className="group rounded-md border border-border p-6"
+            className="group rounded-md border border-border p-4 sm:p-6"
          >
            <div className="flex items-center justify-between gap-4">
              <b>木柴.空间</b>
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}