From 153a2749cebe5cc54cd709c3365bd1e54c688c87 Mon Sep 17 00:00:00 2001
From: Medicopter117 <oppro.netzwerk@gmail.com>
Date: Sun, 1 Mar 2026 20:15:09 +0100
Subject: [PATCH] feat: Establish initial web UI with Hero and CTA components,
 and a comprehensive styling system including custom themes, animations, and
 visual effects.

---
 src/web/components/CTA.tsx  |  4 ++--
 src/web/components/Hero.tsx |  6 +++---
 src/web/index.css           | 15 ++++++++-------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/web/components/CTA.tsx b/src/web/components/CTA.tsx
index e7c6ce7..89929c8 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-bold text-lg shadow-xl shadow-primary/20"
+              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"
             >
               <span>Bot einladen</span>
               <ArrowRight className="w-5 h-5" />
@@ -80,7 +80,7 @@ export const CTA = memo(function CTA() {
               href="https://discord.gg/oppro"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-10 py-4.5 rounded-2xl glass border border-white/10 font-bold text-lg"
+              className="inline-flex items-center gap-3 px-10 py-4.5 rounded-2xl glass border border-white/10 font-bold text-lg text-white shadow-xl"
             >
               Support Server
             </motion.a>
diff --git a/src/web/components/Hero.tsx b/src/web/components/Hero.tsx
index d99fa03..0b12ac9 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 rounded-2xl bg-primary text-white font-bold text-lg shadow-xl shadow-primary/20 hover:shadow-primary/40 transition-shadow"
+              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"
             >
               <span>Bot einladen</span>
               <ArrowRight className="w-5 h-5" />
             </motion.a>
             <motion.a
-              whileHover={{ scale: 1.02, backgroundColor: "rgba(255,255,255,0.1)" }}
+              whileHover={{ scale: 1.02, backgroundColor: "rgba(255,255,255,0.05)" }}
               whileTap={{ scale: 0.98 }}
               href="#features"
-              className="inline-flex items-center gap-2 px-10 py-4 rounded-2xl glass border border-white/5 font-bold text-lg transition-colors"
+              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"
             >
               Features entdecken
             </motion.a>
diff --git a/src/web/index.css b/src/web/index.css
index 25ebc6a..79ce6f8 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% 100%;
+    --primary-foreground: 0 0% 0%;
 
     --secondary: 240 6% 10%;
     --secondary-foreground: 0 0% 98%;
@@ -351,11 +351,11 @@
 
 /* Glass Morphism - Optimized for performance */
 @utility glass {
-  background: hsl(var(--card) / var(--glass-opacity));
+  background: hsl(var(--card) / calc(var(--glass-opacity) + 0.15));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   backdrop-filter: blur(var(--glass-blur));
   border: 1px solid hsl(var(--border) / var(--glass-border-opacity));
-  border-top-color: hsl(var(--border) / calc(var(--glass-border-opacity) + 0.2));
+  border-top-color: hsl(var(--border) / calc(var(--glass-border-opacity) + 0.3));
 }
 
 @utility glass-strong {
@@ -550,13 +550,14 @@
 
 /* Button Styles */
 @utility btn-primary {
-  @apply px-6 py-3 rounded-lg font-semibold;
+  @apply px-8 py-4 rounded-2xl font-bold transition-all duration-300;
   background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
-  transition: all 0.3s ease;
+  color: white;
+  box-shadow: 0 10px 20px -10px hsl(var(--primary) / 0.5);
 
   &:hover {
-    @apply scale-105 shadow-lg;
-    box-shadow: 0 0 30px -5px hsl(var(--primary) / 0.6);
+    @apply scale-[1.02];
+    box-shadow: 0 20px 40px -10px hsl(var(--primary) / 0.6);
   }
 }