The GitHub link for mobile and desktop uses a uniform style, delete the GitHubRibbon component

frontend/app/[lang]/layout.tsx

@@ -2,9 +2,7 @@ import "./globals.css";
 import Header from "@/components/web/Header";
 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,7 +24,6 @@ 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

@@ -1,65 +0,0 @@
-import { Github } from "lucide-react";
-import Link from "next/link";
-
-const GitHubRibbon = () => {
-  // Define base dimensions for easy adjustment
-  const squareSize = "170px"; // Square size
-  const triangleSize = "150px"; // Triangle size
-  const ribbonWidth = "280px"; // Ribbon width
-  const ribbonHeight = "34px"; // Ribbon height
-
-  return (
-    <div
-      className="github-corner group"
-      style={{
-        position: "fixed",
-        top: 0,
-        right: 0,
-        zIndex: 1000,
-        width: squareSize,
-        height: squareSize,
-        overflow: "hidden",
-        pointerEvents: "none",
-      }}
-    >
-      {/* Triangle background */}
-      <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 Icon */}
-      <Github
-        className="absolute text-primary-foreground rotate-45"
-        style={{
-          top: "28px",
-          right: "28px",
-        }}
-        size={38}
-      />
-
-      {/* Fork me Ribbon */}
-      <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;

frontend/components/web/Header.tsx

@@ -9,15 +9,23 @@ import { Menu, X, Github } from "lucide-react";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { Messages } from "@/types/messages";
 
+/**
+ * Props interface for the Header component
+ */
 interface HeaderProps {
   messages: Messages;
   lang: string;
 }
 
+/**
+ * Header component providing navigation, language switching, and GitHub link
+ * Features responsive design with mobile menu support
+ */
 const Header = ({ messages, lang }: HeaderProps) => {
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
 
+  // Configuration for navigation items
   const navItems = [
     { href: `/${lang}`, label: messages.text.Header.Home_dis },
     { href: `/${lang}/blog`, label: messages.text.Header.Blog_dis },
@@ -28,10 +36,14 @@ const Header = ({ messages, lang }: HeaderProps) => {
     { href: `/${lang}/privacy`, label: messages.text.Header.Privacy_dis },
   ];
 
+  // GitHub repository URL
+  const githubUrl = "https://github.com/david-bai00/PrivyDrop";
+
   return (
     <header className="bg-background border-b sticky top-0 z-50">
       <div className="container mx-auto px-4 py-4">
         <div className="flex justify-between items-center">
+          {/* Logo and site name */}
           <Link href={`/${lang}`} className="flex items-center space-x-2">
             <Image
               src="/logo.png"
@@ -45,7 +57,7 @@ const Header = ({ messages, lang }: HeaderProps) => {
             </span>
           </Link>
 
-          {/* Desktop navigation and language switcher */}
+          {/* Desktop navigation and controls */}
           <div className="hidden md:flex items-center space-x-4">
             <nav>
               <ul className="flex space-x-2">
@@ -66,17 +78,31 @@ const Header = ({ messages, lang }: HeaderProps) => {
                 ))}
               </ul>
             </nav>
-            <LanguageSwitcher />
+            {/* Desktop GitHub link and language switcher */}
+            <div className="flex items-center space-x-2">
+              <Button asChild variant="ghost" size="icon">
+                <Link
+                  href={githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="GitHub Repository"
+                >
+                  <Github className="h-5 w-5" />
+                </Link>
+              </Button>
+              <LanguageSwitcher />
+            </div>
           </div>
 
-          {/* Mobile menu button */}
+          {/* Mobile menu controls */}
           <div className="md:hidden flex items-center space-x-2">
             <LanguageSwitcher />
             <Button asChild variant="ghost" size="icon">
               <Link
-                href="https://github.com/david-bai00/PrivyDrop"
+                href={githubUrl}
                 target="_blank"
                 rel="noopener noreferrer"
+                aria-label="GitHub Repository"
               >
                 <Github className="h-5 w-5" />
               </Link>