From 5f6b7b416c260d9506bf944d767f1f5a3ae9e97a Mon Sep 17 00:00:00 2001
From: Medicopter117 <oppro.netzwerk@gmail.com>
Date: Sun, 1 Mar 2026 20:08:30 +0100
Subject: [PATCH] feat(web): Introduce foundational UI components and
 comprehensive styling with Tailwind CSS.

---
 src/web/components/CTA.tsx          |   2 +-
 src/web/components/FAQ.tsx          |   2 +-
 src/web/components/Features.tsx     |   2 +-
 src/web/components/Footer.tsx       |   2 +-
 src/web/components/Hero.tsx         |   4 +-
 src/web/components/Navbar.tsx       | 113 +++++++++++++++-------------
 src/web/components/Testimonials.tsx |   2 +-
 src/web/index.css                   |   1 +
 8 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/src/web/components/CTA.tsx b/src/web/components/CTA.tsx
index 69eb874..e7c6ce7 100644
--- a/src/web/components/CTA.tsx
+++ b/src/web/components/CTA.tsx
@@ -18,7 +18,7 @@ export const CTA = memo(function CTA() {
       <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/5 to-accent/5" />
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-7xl h-[600px] bg-primary/5 blur-[120px] rounded-full opacity-50" />
 
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto relative z-10 px-4">
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
diff --git a/src/web/components/FAQ.tsx b/src/web/components/FAQ.tsx
index c603158..72eb20a 100644
--- a/src/web/components/FAQ.tsx
+++ b/src/web/components/FAQ.tsx
@@ -47,7 +47,7 @@ export const FAQ = memo(function FAQ() {
       <div className="absolute top-1/3 right-0 w-[600px] h-[600px] bg-primary/10 blur-[150px] rounded-full" />
       <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-accent/10 blur-[150px] rounded-full" />
 
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto relative z-10 px-4">
         <div className="flex flex-col items-center text-center max-w-4xl mx-auto mb-20">
           <motion.div
             initial={{ opacity: 0, y: 10 }}
diff --git a/src/web/components/Features.tsx b/src/web/components/Features.tsx
index 54a1487..4bd712c 100644
--- a/src/web/components/Features.tsx
+++ b/src/web/components/Features.tsx
@@ -72,7 +72,7 @@ export const Features = memo(function Features() {
       <div className="absolute top-1/4 left-0 w-[600px] h-[600px] bg-primary/10 blur-[150px] rounded-full" />
       <div className="absolute bottom-1/4 right-0 w-[700px] h-[700px] bg-accent/10 blur-[150px] rounded-full" />
 
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto relative z-10 px-4">
         {/* Section Header */}
         <div className="flex flex-col items-center text-center max-w-4xl mx-auto mb-20">
           <motion.div
diff --git a/src/web/components/Footer.tsx b/src/web/components/Footer.tsx
index 5e8d0c8..8aaec9f 100644
--- a/src/web/components/Footer.tsx
+++ b/src/web/components/Footer.tsx
@@ -17,7 +17,7 @@ export const Footer = memo(function Footer() {
       <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent/10 blur-[150px] rounded-full pointer-events-none" />
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,0,0,0.05),transparent)]" />
 
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto relative z-10 px-4">
         <div className="flex flex-col items-center">
 
           {/* --- HERO LOGO REPLICA --- */}
diff --git a/src/web/components/Hero.tsx b/src/web/components/Hero.tsx
index cdac262..d99fa03 100644
--- a/src/web/components/Hero.tsx
+++ b/src/web/components/Hero.tsx
@@ -27,8 +27,8 @@ export const Hero = memo(function Hero() {
       {/* Subtle Grid */}
       <div className="absolute inset-0 opacity-[0.05] grid-pattern" />
 
-      <div className="container relative z-10 px-4">
-        <div className="flex flex-col items-center text-center max-w-5xl mx-auto">
+      <div className="container mx-auto relative z-10 px-4">
+        <div className="flex flex-col items-center text-center max-w-5xl mx-auto w-full">
           {/* Version Badge */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
diff --git a/src/web/components/Navbar.tsx b/src/web/components/Navbar.tsx
index 47f3bec..a3c6dfb 100644
--- a/src/web/components/Navbar.tsx
+++ b/src/web/components/Navbar.tsx
@@ -109,70 +109,75 @@ export function Navbar() {
         isScrolled ? "py-3" : "py-6"
       )}
     >
-      <div className="container px-4 flex justify-center">
+      <div className="container mx-auto px-4 flex justify-center">
         <nav className={cn(
           "flex items-center justify-between gap-8 md:gap-12 px-6 py-3 rounded-[2rem] transition-all duration-500 border border-transparent w-full max-w-7xl",
           isScrolled ? "glass-strong shadow-2xl border-white/10" : "bg-transparent"
         )}>
-          {/* Logo */}
-          <Link to="/" className="flex items-center gap-3 group shrink-0">
-            <motion.div
-              className="w-10 h-10 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/20 text-white relative overflow-hidden"
-              whileHover={{ scale: 1.1, rotate: -5 }}
-            >
-              <Shield className="w-5 h-5 drop-shadow-glow" />
-            </motion.div>
-            <div className="flex flex-col">
-              <span className="text-xl font-bold tracking-tight text-white leading-none">
-                Manager<span className="text-primary">X</span>
-              </span>
-              <span className="text-[9px] text-muted-foreground font-semibold uppercase tracking-[0.2em] mt-1 opacity-50">Stable 2.0.0</span>
-            </div>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-2">
-            {mainLinks.map((link) => (
-              <Link
-                key={link.label}
-                to={link.href}
-                className={cn(
-                  "relative text-sm font-medium transition-all duration-300 flex items-center gap-2 px-4 py-2 rounded-xl",
-                  location.pathname === link.href
-                    ? "text-primary bg-primary/5"
-                    : "text-muted-foreground hover:text-foreground hover:bg-white/5"
-                )}
+          {/* Left: Logo */}
+          <div className="flex-1 flex justify-start">
+            <Link to="/" className="flex items-center gap-3 group shrink-0">
+              <motion.div
+                className="w-10 h-10 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/20 text-white relative overflow-hidden"
+                whileHover={{ scale: 1.1, rotate: -5 }}
               >
-                <link.icon className={cn("w-4 h-4 opacity-70", location.pathname === link.href && "opacity-100")} />
-                {link.label}
-              </Link>
-            ))}
+                <Shield className="w-5 h-5 drop-shadow-glow" />
+              </motion.div>
+              <div className="flex flex-col">
+                <span className="text-xl font-bold tracking-tight text-white leading-none">
+                  Manager<span className="text-primary">X</span>
+                </span>
+                <span className="text-[9px] text-muted-foreground font-semibold uppercase tracking-[0.2em] mt-1 opacity-50">Stable 2.0.0</span>
+              </div>
+            </Link>
+          </div>
 
-            <NavDropdown label="Netzwerk" links={dropdownLinks} location={location} />
+          {/* Center: Desktop Navigation */}
+          <div className="hidden md:flex flex-1 justify-center">
+            <div className="flex items-center gap-1">
+              {mainLinks.map((link) => (
+                <Link
+                  key={link.label}
+                  to={link.href}
+                  className={cn(
+                    "relative text-sm font-medium transition-all duration-300 flex items-center gap-2 px-4 py-2 rounded-xl",
+                    location.pathname === link.href
+                      ? "text-primary bg-primary/5"
+                      : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+                  )}
+                >
+                  <link.icon className={cn("w-4 h-4 opacity-70", location.pathname === link.href && "opacity-100")} />
+                  {link.label}
+                </Link>
+              ))}
+              <NavDropdown label="Netzwerk" links={dropdownLinks} location={location} />
+            </div>
           </div>
 
-          {/* CTA Button */}
-          <div className="hidden md:flex items-center gap-4 shrink-0">
-            <motion.a
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group inline-flex items-center gap-2.5 px-6 py-2.5 rounded-xl bg-primary text-white font-bold text-sm tracking-tight relative overflow-hidden shadow-lg shadow-primary/20"
+          {/* Right: CTA & Mobile Menu */}
+          <div className="flex-1 flex justify-end items-center gap-4">
+            <div className="hidden md:flex items-center">
+              <motion.a
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group inline-flex items-center gap-2.5 px-6 py-2.5 rounded-xl bg-primary text-white font-bold text-sm tracking-tight relative overflow-hidden shadow-lg shadow-primary/20"
+              >
+                <Sparkles className="w-4 h-4" />
+                <span>Bot einladen</span>
+              </motion.a>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="md:hidden p-2 text-white hover:bg-white/5 rounded-xl transition-colors"
             >
-              <Sparkles className="w-4 h-4" />
-              <span>Bot einladen</span>
-            </motion.a>
+              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
           </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            className="md:hidden p-2 text-white hover:bg-white/5 rounded-xl transition-colors"
-          >
-            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-          </button>
         </nav>
       </div>
 
diff --git a/src/web/components/Testimonials.tsx b/src/web/components/Testimonials.tsx
index 08bbbdd..5632de1 100644
--- a/src/web/components/Testimonials.tsx
+++ b/src/web/components/Testimonials.tsx
@@ -84,7 +84,7 @@ export const Testimonials = memo(function Testimonials() {
       <div className="absolute top-0 left-1/3 w-[500px] h-[500px] bg-primary/10 blur-[150px] rounded-full" />
       <div className="absolute bottom-1/4 right-1/4 w-[600px] h-[600px] bg-accent/10 blur-[150px] rounded-full" />
 
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto relative z-10 px-4">
         <div className="flex flex-col items-center text-center max-w-4xl mx-auto mb-20">
           <motion.div
             initial={{ opacity: 0, y: 10 }}
diff --git a/src/web/index.css b/src/web/index.css
index f2abed2..25ebc6a 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -178,6 +178,7 @@
   body {
     @apply bg-background text-foreground font-sans antialiased;
     font-family: 'Inter', 'Space Grotesk', sans-serif;
+    overflow-x: hidden;
   }
 
   h1,