From 0f517473e0e44d7fd359a8ad28f14bc113bd44eb Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Fri, 3 Apr 2026 23:48:15 +0900
Subject: [PATCH] fix: remove asymmetric blobs from Hero, use centered gradient

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Hero.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 2590896..72fd826 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -13,9 +13,9 @@ export default function Hero() {
   };
 
   return (
-    <section className="relative pt-28 pb-12 md:pt-36 md:pb-16 overflow-hidden flex flex-col items-center justify-center text-center px-6">
-      {/* Background Gradient */}
-      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-100 via-purple-50 to-pink-50 opacity-70"></div>
+    <section className="relative pt-28 pb-12 md:pt-36 md:pb-16 overflow-clip flex flex-col items-center justify-center text-center px-6">
+      {/* Background Gradient — centered and symmetric */}
+      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center_top,_rgba(224,231,255,0.5)_0%,_rgba(245,243,255,0.3)_40%,_transparent_70%)]"></div>
       
       <div className="max-w-4xl mx-auto">
         <motion.div
@@ -78,12 +78,7 @@ export default function Hero() {
         </motion.div>
       </div>
 
-      {/* Decorative elements — symmetric and contained */}
-      <div className="absolute inset-0 overflow-clip pointer-events-none">
-        <div className="absolute top-1/4 left-[10%] w-48 h-48 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
-        <div className="absolute top-1/3 right-[10%] w-48 h-48 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
-        <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-48 h-48 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
-      </div>
+      {/* No decorative blobs — clean symmetric background */}
     </section>
   );
 }