From 5b8c6ab52a66b80b509c76a729ebf3330dc235ab Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 16:33:37 +0000
Subject: [PATCH 1/2] Initial plan


From b16ea860ffad610fa1a46118d4c87ab15468e6f6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 16:38:05 +0000
Subject: [PATCH 2/2] fix: move blob keyframes to globals.css; remove duplicate
 per-instance style injection from SkewCard

Co-authored-by: atharhive <169134776+atharhive@users.noreply.github.com>
---
 frontend/app/globals.css                          | 13 +++++++++++++
 frontend/components/ui/gradient-card-showcase.tsx | 11 +----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 25e585d..2ef44a3 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -93,3 +93,16 @@
     @apply font-sans;
   }
 }
+
+@keyframes blob {
+  0%, 100% { transform: translateY(10px); }
+  50% { transform: translate(-10px); }
+}
+
+.animate-blob {
+  animation: blob 4s ease-in-out infinite;
+}
+
+.animation-delay-1000 {
+  animation-delay: -2s;
+}
diff --git a/frontend/components/ui/gradient-card-showcase.tsx b/frontend/components/ui/gradient-card-showcase.tsx
index 206fc70..1466821 100644
--- a/frontend/components/ui/gradient-card-showcase.tsx
+++ b/frontend/components/ui/gradient-card-showcase.tsx
@@ -47,20 +47,11 @@ export const SkewCard = ({
       </span>
 
       {/* Content */}
-      <div className="relative z-20 h-full flex flex-col justify-center p-10 bg-black/40 backdrop-blur-xl border border-white/10 rounded-3xl text-white transition-all duration-500 group-hover:left-[-15px] group-hover:bg-black/20">
+      <div className="relative z-20 h-full flex flex-col justify-center p-10 bg-black/40 backdrop-blur-xl border border-white/10 rounded-3xl text-white transition-all duration-500 left-0 group-hover:left-[-15px] group-hover:bg-black/20">
         <Icon className="w-12 h-12 text-white mb-6 transition-transform duration-500 group-hover:scale-110" />
         <h3 className="text-2xl font-bold mb-4">{title}</h3>
         <p className="text-muted-foreground leading-relaxed text-lg">{description}</p>
       </div>
-
-      <style dangerouslySetInnerHTML={{ __html: `
-        @keyframes blob {
-          0%, 100% { transform: translateY(10px); }
-          50% { transform: translate(-10px); }
-        }
-        .animate-blob { animation: blob 4s ease-in-out infinite; }
-        .animation-delay-1000 { animation-delay: -2s; }
-      `}} />
     </div>
   );
 };