加入开源彩条图形

frontend/app/[lang]/globals.css

@@ -73,7 +73,10 @@
   @apply text-gray-600;
 }
 
-.prose h1, .prose h2, .prose h3, .prose h4 {
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
   @apply text-gray-900 font-bold mt-8 mb-4;
 }
 
@@ -93,7 +96,8 @@
   @apply mb-6 leading-relaxed;
 }
 
-.prose ul, .prose ol {
+.prose ul,
+.prose ol {
   @apply my-6 ml-6;
 }
 
@@ -135,4 +139,11 @@
 
 .prose figure figcaption {
   @apply text-center text-sm text-gray-600 mt-2 italic;
-}
+}
+
+/* Hide GitHub ribbon on small screens */
+@media (max-width: 640px) {
+  .github-corner {
+    display: none;
+  }
+}

frontend/app/[lang]/layout.tsx

@@ -4,6 +4,7 @@ import Footer from "@/components/web/Footer";
 import { ThemeProvider } from "@/components/web/theme-provider";
 import Script from "next/script";
 import { getDictionary } from "@/lib/dictionary";
+import GitHubRibbon from "@/components/web/GitHubRibbon";
 
 export default async function RootLayout({
   children,
@@ -26,6 +27,7 @@ export default async function RootLayout({
           disableTransitionOnChange
           storageKey="theme-preference"
         >
+          <GitHubRibbon />
           <Header messages={messages} lang={lang} />
           <div className="flex-1">{children}</div>
           <Footer messages={messages} lang={lang} />

frontend/components/web/GitHubRibbon.tsx

@@ -0,0 +1,65 @@
+import { Github } from "lucide-react";
+import Link from "next/link";
+
+const GitHubRibbon = () => {
+  // 定义基础尺寸，便于统一调整
+  const squareSize = "170px"; // 正方形大小
+  const triangleSize = "150px"; // 三角形大小
+  const ribbonWidth = "280px"; // 彩带宽度
+  const ribbonHeight = "34px"; // 彩带高度
+
+  return (
+    <div
+      className="github-corner group"
+      style={{
+        position: "fixed",
+        top: 0,
+        right: 0,
+        zIndex: 1000,
+        width: squareSize,
+        height: squareSize,
+        overflow: "hidden",
+        pointerEvents: "none",
+      }}
+    >
+      {/* 三角形背景 */}
+      <div
+        className="absolute top-0 right-0 bg-black dark:bg-gray-800"
+        style={{
+          width: triangleSize,
+          height: triangleSize,
+          clipPath: "polygon(100% 0, 100% 100%, 0 0)",
+        }}
+      />
+
+      {/* GitHub 图标 */}
+      <Github
+        className="absolute text-primary-foreground rotate-45"
+        style={{
+          top: "28px",
+          right: "28px",
+        }}
+        size={38}
+      />
+
+      {/* Fork me 彩带 */}
+      <Link
+        href="https://github.com/david-bai00/PrivyDrop"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute bg-green-600 text-white font-bold flex items-center justify-center shadow-lg transform rotate-45 transition-colors duration-300 group-hover:bg-green-700"
+        style={{
+          top: "50px",
+          right: "-64px",
+          width: ribbonWidth,
+          height: ribbonHeight,
+          pointerEvents: "auto",
+        }}
+      >
+        Fork me on GitHub
+      </Link>
+    </div>
+  );
+};
+
+export default GitHubRibbon;