Enhance Section and Card components with new styling; add polka background pattern and update glass effect for improved visual appeal.

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"
     };
 

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) && (

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;
+  }
+}