[#56] Landing Pagehttps://project.mdnd-it.cc/work_packages/56

2025-07-07 10:11:41 +02:00
parent 9296782fc1
commit 19c762fe67
19 changed files with 848 additions and 138 deletions
@@ -0,0 +1,87 @@
+import React, { useState } from "react"
+import Logo from "../../assets/pictures/Logo"
+
+const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
+
+const Navbar = () => {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16 items-center">
+          {/* Logo */}
+          <div className="flex-shrink-0 flex items-center gap-2">
+            <div className="flex items-center mt-1 h-9">
+              <Logo size={36} />
+            </div>
+            <span className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+              SerpentRace
+            </span>
+          </div>
+          {/* Desktop Menu */}
+          <div className="hidden md:flex space-x-8">
+            <a href="#" className={navLinkClass}>
+              Home
+            </a>
+            <a href="#" className={navLinkClass}>
+              Leaderboard
+            </a>
+            <a href="#" className={navLinkClass}>
+              About
+            </a>
+            <a href="#" className={navLinkClass}>
+              Contact
+            </a>
+          </div>
+          {/* Mobile Hamburger */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="text-white focus:outline-none"
+              aria-label="Toggle menu"
+            >
+              <svg
+                className="h-7 w-7"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                {menuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
+          <a href="#" className={navLinkClass}>
+            Home
+          </a>
+          <a href="#" className={navLinkClass}>
+            Leaderboard
+          </a>
+          <a href="#" className={navLinkClass}>
+            About
+          </a>
+          <a href="#" className={navLinkClass}>
+            Contact
+          </a>
+        </div>
+      )}
+    </nav>
+  )
+}
+
+export default Navbar