Refactor FootBar content for clarity and visual appeal; replace deprecated PageSection component with improved layout; update Badge component variants for consistent styling across the application.

app/components/badge.tsx

@@ -2,37 +2,31 @@ import { ReactNode } from 'react';
 
 interface BadgeProps {
     children: ReactNode;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'glass';
+    variant?: 'gray' | 'green' | 'yellow' | 'red' | 'blue' | 'glass';
-    size?: 'sm' | 'md' | 'lg';
+    border?: boolean;
     className?: string;
 }
 
 export default function Badge({
     children,
-    variant = 'default',
+    variant = 'gray',
-    size = 'md',
+    border = false,
     className = ''
 }: BadgeProps) {
-    const baseClasses = "inline-flex items-center font-medium rounded-full transition-all duration-300 ease-out";
+    const baseClasses = "rounded-full px-2 py-0.5 text-sm";
-
-    const sizeClasses = {
-        sm: "px-2 py-1 text-xs",
-        md: "px-3 py-1.5 text-sm",
-        lg: "px-4 py-2 text-base"
-    };
 
     const variantClasses = {
-        default: "bg-gray-700/50 text-gray-300 border border-gray-600/50",
+        gray: "bg-gray-700/50 text-gray-300 border-gray-600/50",
-        success: "bg-green-500/20 text-green-400 border border-green-500/30",
+        green: "bg-green-500/20 text-green-400 border-green-500/30",
-        warning: "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
+        yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
-        error: "bg-red-500/20 text-red-400 border border-red-500/30",
+        red: "bg-red-500/20 text-red-400 border-red-500/30",
-        info: "bg-blue-500/20 text-blue-400 border border-blue-500/30",
+        blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
-        glass: "bg-white/10 text-white border border-white/20 backdrop-blur-sm"
+        glass: "bg-white/10 text-white border-white/20 backdrop-blur-sm"
     };
 
     return (
         <span
-            className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
+            className={` ${border?"border":""} ${baseClasses} ${variantClasses[variant]} ${className}`}
         >
             {children}
         </span>

app/footbar.tsx

@@ -33,9 +33,11 @@ export default function FootBar() {
               </div>
             </div>
             <p className="text-gray-300 mb-6 max-w-md leading-relaxed">
-              Leidenschaftlicher Entwickler auf der Suche nach neuen Möglichkeiten.
+              Leidenschaftlicher Entwickler, stets auf der Suche nach neuen Möglichkeiten.
-              <i> Always learning, always building.</i>
             </p>
+              <p className="mt-4 bg-gradient-to-r from-yellow-400 to-indigo-600 bg-clip-text text-transparent">
+                <i> Always learning, always building.</i>
+              </p>
           </div>
 
           {/* Quick Links */}

app/page-section.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function PageSection({ title, content, children }: { title: string; content?: string; children?: ReactNode }) {
-  return (
-    <section className="py-12">
-      <div className="container mx-auto">
-        <h2 className="text-3xl font-bold mb-6">{title}</h2>
-        <p className="text-lg text-gray-700">
-          {content}
-        </p>
-        {children}
-      </div>
-    </section>
-  );
-}

app/page.tsx

@@ -93,10 +93,10 @@ export default function Home() {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex flex-wrap gap-2">
-                  <Badge variant="info">JavaScript</Badge>
+                  <Badge variant="blue">JavaScript</Badge>
-                  <Badge variant="info">Rust</Badge>
+                  <Badge variant="blue">Rust</Badge>
-                  <Badge variant="info">Java</Badge>
+                  <Badge variant="blue">Java</Badge>
-                  <Badge variant="info">C#</Badge>
+                  <Badge variant="blue">C#</Badge>
                 </div>
                 <p className="text-gray-300 text-sm">
                   Webentwicklung und Systementwicklung
@@ -112,9 +112,9 @@ export default function Home() {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex flex-wrap gap-2">
-                  <Badge variant="success">Hardware</Badge>
+                  <Badge variant="green">Hardware</Badge>
-                  <Badge variant="success">Virtualisierung</Badge>
+                  <Badge variant="green">Virtualisierung</Badge>
-                  <Badge variant="success">Networking</Badge>
+                  <Badge variant="green">Networking</Badge>
                 </div>
                 <p className="text-gray-300 text-sm">
                   Self-Hosting
@@ -130,8 +130,8 @@ export default function Home() {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex flex-wrap gap-2">
-                  <Badge variant="warning">Projektmanagement</Badge>
+                  <Badge variant="yellow">Projektmanagement</Badge>
-                  <Badge variant="warning">Layer 8  ^^</Badge>
+                  <Badge variant="yellow">Layer 8  ^^</Badge>
                 </div>
                 <p className="text-gray-300 text-sm">
                   Erfahrung im professionellen Umgang mit internen und externen Kunden
@@ -158,9 +158,9 @@ export default function Home() {
                 Ein Nachbau des Raytracers aus der Buchserie "Raytracing in a Weekend". Portiert von C++ auf Rust.
               </p>
               <div className="flex flex-wrap gap-2">
-                <Badge variant="info">Rust</Badge>
+                <Badge variant="blue">Rust</Badge>
-                <Badge variant="info">Graphics</Badge>
+                <Badge variant="blue">Graphics</Badge>
-                <Badge variant="info">Math</Badge>
+                <Badge variant="blue">Math</Badge>
               </div>
             </CardContent>
             <CardFooter>
@@ -182,9 +182,9 @@ export default function Home() {
                 Alle Instruktionen und Addressierungsmodi auf einzelne Taktzyklen genau simuliert.
               </p>
               <div className="flex flex-wrap gap-2">
-                <Badge variant="info">Emulation</Badge>
+                <Badge variant="blue">Emulation</Badge>
-                <Badge variant="info">Low-level</Badge>
+                <Badge variant="blue">Low-level</Badge>
-                <Badge variant="info">Hardware</Badge>
+                <Badge variant="blue">Hardware</Badge>
               </div>
             </CardContent>
             <CardFooter>