From f1dda711cde179dafecc3d787f0d843aefb79e2e Mon Sep 17 00:00:00 2001
From: Medicopter117 <oppro.netzwerk@gmail.com>
Date: Sun, 1 Mar 2026 20:22:22 +0100
Subject: [PATCH] feat: Add foundational web UI components including Navbar,
 Hero, CTA, Footer, and global styling.

---
 src/web/components/CTA.tsx    | 2 +-
 src/web/components/Footer.tsx | 1 +
 src/web/components/Hero.tsx   | 6 +++---
 src/web/components/Navbar.tsx | 2 +-
 src/web/index.css             | 4 ++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/web/components/CTA.tsx b/src/web/components/CTA.tsx
index 89929c8..d3880b7 100644
--- a/src/web/components/CTA.tsx
+++ b/src/web/components/CTA.tsx
@@ -69,7 +69,7 @@ export const CTA = memo(function CTA() {
               href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-10 py-4.5 rounded-2xl bg-primary text-white font-black text-lg shadow-2xl shadow-primary/40 border border-white/10"
+              className="btn-primary inline-flex items-center gap-3"
             >
               <span>Bot einladen</span>
               <ArrowRight className="w-5 h-5" />
diff --git a/src/web/components/Footer.tsx b/src/web/components/Footer.tsx
index 8aaec9f..f730470 100644
--- a/src/web/components/Footer.tsx
+++ b/src/web/components/Footer.tsx
@@ -122,6 +122,7 @@ export const Footer = memo(function Footer() {
               <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-primary mb-2">Rechtliches</span>
               <Link to="/legal/privacy" className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium">Datenschutz</Link>
               <Link to="/legal/imprint" className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium">Impressum</Link>
+              <Link to="/legal/terms" className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium">Nutzungsbedingungen</Link>
               <Link to="/legal/license" className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium">Lizenz (GPL-3.0)</Link>
             </div>
 
diff --git a/src/web/components/Hero.tsx b/src/web/components/Hero.tsx
index 0b12ac9..20a06be 100644
--- a/src/web/components/Hero.tsx
+++ b/src/web/components/Hero.tsx
@@ -93,16 +93,16 @@ export const Hero = memo(function Hero() {
               href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-10 py-4.5 rounded-2xl bg-primary text-white font-bold text-lg shadow-xl shadow-primary/30 hover:shadow-primary/50 transition-all border border-white/10"
+              className="btn-primary inline-flex items-center gap-3"
             >
               <span>Bot einladen</span>
               <ArrowRight className="w-5 h-5" />
             </motion.a>
             <motion.a
-              whileHover={{ scale: 1.02, backgroundColor: "rgba(255,255,255,0.05)" }}
+              whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
               href="#features"
-              className="inline-flex items-center gap-2 px-10 py-4.5 rounded-2xl glass border border-white/10 font-bold text-lg text-white transition-all shadow-lg"
+              className="inline-flex items-center gap-2 px-10 py-4.5 rounded-2xl glass border border-white/10 font-bold text-lg text-white shadow-lg"
             >
               Features entdecken
             </motion.a>
diff --git a/src/web/components/Navbar.tsx b/src/web/components/Navbar.tsx
index a3c6dfb..d0b247e 100644
--- a/src/web/components/Navbar.tsx
+++ b/src/web/components/Navbar.tsx
@@ -163,7 +163,7 @@ export function Navbar() {
                 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"
+                className="btn-primary inline-flex items-center gap-2.5 !px-6 !py-2.5 !text-sm"
               >
                 <Sparkles className="w-4 h-4" />
                 <span>Bot einladen</span>
diff --git a/src/web/index.css b/src/web/index.css
index 79ce6f8..0f8b5d9 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -123,7 +123,7 @@
     --popover-foreground: 0 0% 98%;
 
     --primary: 0 84% 55%;
-    --primary-foreground: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 240 6% 10%;
     --secondary-foreground: 0 0% 98%;
@@ -552,7 +552,7 @@
 @utility btn-primary {
   @apply px-8 py-4 rounded-2xl font-bold transition-all duration-300;
   background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
-  color: white;
+  color: white !important;
   box-shadow: 0 10px 20px -10px hsl(var(--primary) / 0.5);
 
   &:hover {