Optimsed for mobile

Author: arunavo4

www/src/components/CTA.tsx

@@ -15,8 +15,8 @@ export function CTA() {
 
           <div className="relative">
             <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
-              Start Protecting Your
-              <span className="text-gradient from-primary via-accent to-accent-purple"> Code Today</span>
+              <span className="block sm:inline">Start Protecting</span>
+              <span className="text-gradient from-primary via-accent to-accent-purple block sm:inline"> Your Code Today</span>
             </h2>
             <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8 max-w-2xl mx-auto px-4">
               Join developers who trust Gitea Mirror to keep their repositories safe and accessible. 

www/src/components/GitHubButton.tsx

@@ -22,18 +22,39 @@ export function GitHubButton() {
   }, []);
 
   return (
-    <Button variant="outline" size="sm" className="hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
-      <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer" className="flex items-center">
-        <Github className="w-4 h-4 mr-2" />
-        <span>Star on GitHub</span>
-        {stars !== null && (
-          <>
-            <span className="mx-2 text-muted-foreground">•</span>
-            <Star className="w-3 h-3 mr-1" />
-            <span>{stars}</span>
-          </>
-        )}
-      </a>
-    </Button>
+    <>
+      {/* Mobile version - compact with text */}
+      <Button 
+        variant="outline" 
+        size="sm" 
+        className="md:hidden hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300 px-3" 
+        asChild
+      >
+        <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5">
+          <Star className="w-4 h-4" />
+          <span className="font-semibold">{stars || '—'}</span>
+        </a>
+      </Button>
+      
+      {/* Desktop version - full button */}
+      <Button 
+        variant="outline" 
+        size="sm" 
+        className="hidden md:flex hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" 
+        asChild
+      >
+        <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer" className="flex items-center">
+          <Github className="w-4 h-4 mr-2" />
+          <span>Star on GitHub</span>
+          {stars !== null && (
+            <>
+              <span className="mx-2 text-muted-foreground">•</span>
+              <Star className="w-3 h-3 mr-1" />
+              <span>{stars}</span>
+            </>
+          )}
+        </a>
+      </Button>
+    </>
   );
 }

www/src/components/Header.tsx

@@ -1,11 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ThemeToggle } from './ThemeToggle';
-import { Menu, X } from 'lucide-react';
-import { Button } from './ui/button';
 import { GitHubButton } from './GitHubButton';
 
 export function Header() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
@@ -23,10 +20,6 @@ export function Header() {
     { href: '#installation', label: 'Installation' }
   ];
 
-  const handleNavClick = () => {
-    setIsMenuOpen(false);
-  };
-
   return (
     <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
       isScrolled ? 'backdrop-blur-lg bg-background/80 border-b shadow-sm' : 'bg-background/50'
@@ -45,7 +38,7 @@ export function Header() {
               alt="Gitea Mirror Logo"
               className="h-6 w-6 hidden dark:block"
             />
-            <span className="text-xl font-bold hidden sm:inline">Gitea Mirror</span>
+            <span className="text-lg sm:text-xl font-bold">Gitea Mirror</span>
           </a>
 
           {/* Desktop Navigation */}
@@ -68,47 +61,13 @@ export function Header() {
           </div>
 
           {/* Mobile Actions */}
-          <div className="flex md:hidden items-center gap-2">
+          <div className="flex md:hidden items-center gap-3">
+            <GitHubButton />
             <ThemeToggle />
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
-              aria-label="Toggle menu"
-              className="w-10 h-10"
-            >
-              {isMenuOpen ? (
-                <X className="h-5 w-5" />
-              ) : (
-                <Menu className="h-5 w-5" />
-              )}
-            </Button>
           </div>
         </div>
       </div>
 
-      {/* Mobile Menu */}
-      <div className={`md:hidden transition-all duration-300 ease-in-out ${
-        isMenuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'
-      }`}>
-        <div className="bg-background/95 backdrop-blur-lg border-b">
-          <nav className="px-4 py-4 space-y-3">
-            {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                onClick={handleNavClick}
-                className="block py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {link.label}
-              </a>
-            ))}
-            <div className="pt-3 border-t">
-              <GitHubButton />
-            </div>
-          </nav>
-        </div>
-      </div>
     </header>
   );
 }