From 32ba396695377e12eb35357857f2a56ad1ac7952 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Tue, 28 Oct 2025 17:11:21 +0100
Subject: [PATCH] Enhance Section and Card components with new styling; add
 polka background pattern and update glass effect for improved visual appeal.

---
 app/components/card.tsx    |  2 +-
 app/components/section.tsx |  6 +-----
 app/globals.css            | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/components/card.tsx b/app/components/card.tsx
index 556bdf7..9b0986f 100644
--- a/app/components/card.tsx
+++ b/app/components/card.tsx
@@ -14,7 +14,7 @@ export default function Card({
 
     const variantClasses = {
         default: "bg-gradient-to-br bg-gradient-to-br from-stone-800 via-stone-900 to-stone-800 border border-stone-700",
-        glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-md",
+        glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-sm",
         outlined: "bg-transparent border-2 border-stone-700/50"
     };
 
diff --git a/app/components/section.tsx b/app/components/section.tsx
index 020d4e2..ded7758 100644
--- a/app/components/section.tsx
+++ b/app/components/section.tsx
@@ -19,17 +19,13 @@ export default function Section({
 
     const variantClasses = {
         default: "bg-stone-900",
-        hero: "bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950",
+        hero: "polka lg:pt-40",
         minimal: "bg-transparent"
     };
 
     return (
         <section
             className={`${baseClasses} ${variantClasses[variant]} ${className}`}
-            style={{
-                transform: 'translateZ(0)',
-                willChange: 'transform'
-            }}
         >
             <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                 {(title || subtitle) && (
diff --git a/app/globals.css b/app/globals.css
index 1c65e4c..53b0dbd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,3 +13,21 @@ body {
   min-height: 100vh;
   font-family: "Space Grotesk", sans-serif;
 }
+
+.polka{
+  background-image: radial-gradient(#0c0a09 20%, #292524 22%);
+  background-size: 80px 80px;
+  animation-name: background_keyframes;
+  animation-duration: 8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes background_keyframes {
+  0%{
+    background-position: 0px 0px;
+  }
+  100%{
+    background-position: 160px 80px;
+  }
+}
\ No newline at end of file