feat : add more footer and donate page

app/donate/page.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+
+import { SiteFooter } from "@/components/public/site-footer";
+import { SiteHeader } from "@/components/public/site-header";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function DonatePage() {
+  return (
+    <div className="flex min-h-svh flex-col bg-background">
+      <SiteHeader />
+      <main className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center px-4 py-12 sm:px-6 sm:py-16">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle className="text-3xl">สนับสนุนผู้พัฒนา</CardTitle>
+            <CardDescription className="text-base leading-7">
+              สามารถสนับสนุนค่าดูแลเว็บไซต์ได้ที่นี่
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col items-center gap-5">
+            <div className="rounded-2xl bg-white p-4 ring-1 ring-foreground/10">
+              <Image
+                src="/donate.jpg"
+                alt="QR Code สำหรับสนับสนุน Buzz Guide"
+                width={412}
+                height={412}
+                className="size-full max-w-72"
+                priority
+              />
+            </div>
+            <p className="text-sm leading-6 text-muted-foreground">
+              สแกน QR Code ผ่านแอปธนาคาร
+              <br />
+              ขอบคุณทุกการสนับสนุน เลิฟๆคับ
+            </p>
+          </CardContent>
+        </Card>
+      </main>
+      <SiteFooter />
+    </div>
+  );
+}

components/public/site-footer.tsx

@@ -4,12 +4,28 @@ export function SiteFooter() {
   return (
     <footer className="mt-auto border-t">
       <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-col items-center justify-center gap-1 px-4 py-3 text-center sm:px-6">
-        <Link
-          href="/thanks"
-          className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          Special Thanks
-        </Link>
+        <div className="flex items-center gap-4">
+          <Link
+            href="/thanks"
+            className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Special Thanks
+          </Link>
+          <Link
+            href="https://discord.gg/qrTNRsChSX"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Discord
+          </Link>
+          <Link
+            href="/donate"
+            className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Donate
+          </Link>
+        </div>
         <p className="max-w-3xl text-xs leading-5 text-muted-foreground/80">
           guide.sudloh.com is not affiliated with HoYoverse. Game content and
           materials are trademarks and copyrights of HoYoverse. With sincere