revert: restore Hero, Modules, CSS to original state

All layout changes (blob modifications, overflow-x/clip, scrollbar-gutter)
reverted to the original version that was working correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-03 23:56:58 +09:00
parent 81d673a3e8
commit 0d72750982
3 changed files with 12 additions and 16 deletions

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-clip 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-hidden flex flex-col items-center justify-center text-center px-6">
{/* Background Gradient — centered and symmetric */} {/* Background Gradient */}
<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="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="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<motion.div <motion.div
@ -78,7 +78,10 @@ export default function Hero() {
</motion.div> </motion.div>
</div> </div>
{/* No decorative blobs — clean symmetric background */} {/* Decorative elements */}
<div className="absolute top-1/4 left-10 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob pointer-events-none"></div>
<div className="absolute top-1/3 right-10 w-64 h-64 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 pointer-events-none"></div>
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 pointer-events-none"></div>
</section> </section>
); );
} }

View File

@ -116,13 +116,11 @@ const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className
export default function Modules() { export default function Modules() {
return ( return (
<section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-clip relative"> <section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-hidden relative">
{/* Animated Background Blobs — contained within section via max-w and inset */} {/* Animated Background Blobs */}
<div className="absolute inset-0 overflow-clip pointer-events-none"> <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] min-w-[600px] min-h-[600px] rounded-full bg-[#fff3eb] opacity-80 blur-[120px] animate-blob-large pointer-events-none"></div>
<div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] rounded-full bg-[#fff3eb] opacity-80 blur-[120px] animate-blob-large"></div> <div className="absolute top-[20%] right-[-10%] w-[40vw] h-[40vw] min-w-[500px] min-h-[500px] rounded-full bg-[#e4cfff] opacity-40 blur-[120px] animate-blob-large animation-delay-7000 pointer-events-none"></div>
<div className="absolute top-[20%] right-[-5%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] rounded-full bg-[#e4cfff] opacity-40 blur-[120px] animate-blob-large animation-delay-7000"></div> <div className="absolute bottom-[-10%] left-[20%] w-[60vw] h-[60vw] min-w-[700px] min-h-[700px] rounded-full bg-[#f5f9ff] opacity-80 blur-[120px] animate-blob-large animation-delay-14000 pointer-events-none"></div>
<div className="absolute bottom-[-10%] left-[20%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] rounded-full bg-[#f5f9ff] opacity-80 blur-[120px] animate-blob-large animation-delay-14000"></div>
</div>
<div className="max-w-7xl mx-auto relative z-10"> <div className="max-w-7xl mx-auto relative z-10">
<motion.div <motion.div

View File

@ -62,12 +62,7 @@
} }
@layer base { @layer base {
html {
overflow-x: clip;
overflow-y: overlay;
}
body { body {
overflow-x: clip;
@apply font-sans text-slate-800 bg-slate-50 antialiased; @apply font-sans text-slate-800 bg-slate-50 antialiased;
} }