castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: remove asymmetric blobs from Hero, use centered gradient 

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-03 23:48:15 +09:00
parent 7154e76bc4
commit 0f517473e0
1 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Hero.tsx
View File

@ -13,9 +13,9 @@ export default function Hero() {
}; };
return ( 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"> <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 */} {/* Background Gradient — centered and symmetric */}
<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> <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"> <div className="max-w-4xl mx-auto">
<motion.div <motion.div
@ -78,12 +78,7 @@ export default function Hero() {
</motion.div> </motion.div>
</div> </div>
{/* Decorative elements — symmetric and contained */} {/* No decorative blobs — clean symmetric background */}
<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>
</section> </section>
); );
} }