From f0066ac607af0480e6508bd29acc82505bd3cde7 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Tue, 21 Oct 2025 11:55:23 +0200
Subject: [PATCH] Refactor Home page by adding badges and buttons for enhanced
 interactivity; update Section components to include variant props for better
 customization; remove unnecessary styles from Badge and Button components for
 cleaner code.

---
 app/components/badge.tsx  |  4 ----
 app/components/button.tsx |  4 ----
 app/page.tsx              | 28 ++++++++++++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/components/badge.tsx b/app/components/badge.tsx
index 8368191..ad8677e 100644
--- a/app/components/badge.tsx
+++ b/app/components/badge.tsx
@@ -33,10 +33,6 @@ export default function Badge({
     return (
         <span
             className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
-            style={{
-                transform: 'translateZ(0)',
-                willChange: 'transform'
-            }}
         >
             {children}
         </span>
diff --git a/app/components/button.tsx b/app/components/button.tsx
index 5567573..dc9ecfa 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -33,10 +33,6 @@ export default function Button({
     return (
         <button
             className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
-            style={{
-                transform: 'translateZ(0)',
-                willChange: 'transform'
-            }}
             {...props}
         >
             {children}
diff --git a/app/page.tsx b/app/page.tsx
index 1ff4586..33f942d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,14 +16,22 @@ export default function Home() {
               <h3 className="text-xl font-semibold text-white mb-2">About Me</h3>
             </CardHeader>
             <CardContent>
-              <p className="text-gray-300 leading-relaxed">
-                Passionate developer with expertise in full-stack development,
-                system programming, and modern web technologies.
-              </p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                <Badge variant="default">Default</Badge>
+                <Badge variant="success">Success</Badge>
+                <Badge variant="info">Info</Badge>
+                <Badge variant="warning">Warning</Badge>
+                <Badge variant="error">Error</Badge>
+                <Badge variant="glass">Glass</Badge>
+              </div>
+              <div className="flex flex-wrap gap-2 mb-4">
+                <Button variant="primary" size="sm">Learn More</Button>
+                <Button variant="secondary" size="sm">Learn More</Button>
+                <Button variant="outline" size="sm">Learn More</Button>
+                <Button variant="glass" size="sm">Learn More</Button>
+                <Button variant="ghost" size="sm">Learn More</Button>
+              </div>
             </CardContent>
-            <CardFooter>
-              <Button variant="glass" size="sm">Learn More</Button>
-            </CardFooter>
           </Card>
 
           <Card
@@ -120,7 +128,7 @@ export default function Home() {
       </Section>
 
       {/* Skills Section */}
-      <Section title="Skills & Expertise" subtitle="Technical capabilities and professional skills">
+      <Section variant="feature" title="Skills & Expertise" subtitle="Technical capabilities and professional skills">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card variant="elevated">
             <CardHeader>
@@ -180,7 +188,7 @@ export default function Home() {
       </Section>
 
       {/* Portfolio Section */}
-      <Section title="Featured Projects" subtitle="Some of my notable work and contributions">
+      <Section variant="feature" title="Featured Projects" subtitle="Some of my notable work and contributions">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <Card
             variant="glass"
@@ -332,7 +340,7 @@ export default function Home() {
       </Section>
 
       {/* Contact Section */}
-      <Section title="Get In Touch" subtitle="Let's connect and discuss opportunities"/>
+      <Section variant="minimal" title="Get In Touch" subtitle="Let's connect and discuss opportunities"/>
     </main>
   );
 }