Updated website deisgn

2025-12-11 05:56:46 +03:00 · 2025-07-08 21:58:45 +05:30
parent bb1842bc10
commit b55d6a5629
15 changed files with 1167 additions and 381 deletions
--- a/www/src/components/Header.tsx
+++ b/www/src/components/Header.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeToggle } from './ThemeToggle';
+import { Github, Menu, X } from 'lucide-react';
+import { Button } from './ui/button';
+
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navLinks = [
+    { href: '#features', label: 'Features' },
+    { href: '#screenshots', label: 'Screenshots' },
+    { 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'
+    }`}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <a href="#" className="flex items-center gap-2 group">
+            <img 
+              src="/assets/logo-no-bg.png" 
+              alt="Gitea Mirror" 
+              className="w-8 h-8 transition-transform group-hover:scale-110" 
+            />
+            <span className="font-semibold text-lg hidden sm:block">Gitea Mirror</span>
+          </a>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <a 
+                key={link.href}
+                href={link.href} 
+                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+
+          {/* Desktop Actions */}
+          <div className="hidden md:flex items-center gap-4">
+            <ThemeToggle />
+            <Button variant="outline" size="sm" asChild>
+              <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
+                <Github className="w-4 h-4 mr-2" />
+                Star on GitHub
+              </a>
+            </Button>
+          </div>
+
+          {/* Mobile Actions */}
+          <div className="flex md:hidden items-center gap-2">
+            <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">
+              <Button variant="outline" size="sm" className="w-full" asChild>
+                <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
+                  <Github className="w-4 h-4 mr-2" />
+                  Star on GitHub
+                </a>
+              </Button>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}