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

fix: reduce Hero section gap and Module card overflow 

- Hero: remove min-h-screen, reduce padding (pt-28/pb-12 md:pt-36/pb-16)
- Modules: widen cards 260px → 300px, remove whitespace-nowrap on titles/highlights
- Consistent section spacing (~160px gap between sections)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-03-29 15:55:00 +09:00
parent 3a6d3891ce
commit 922ec8f6bc
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Hero.tsx
View File

@ -13,7 +13,7 @@ export default function Hero() {
};
return (
<section className="relative pt-40 pb-24 md:pt-52 md:pb-32 overflow-hidden flex flex-col items-center justify-center min-h-screen 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 */}
<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>

24
src/components/Modules.tsx
View File

@ -97,7 +97,7 @@ const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className
<div className={`w-10 h-10 shrink-0 rounded-xl flex items-center justify-center text-white font-bold text-lg ${mod.color}`}>
{mod.step}
</div>
<h3 className="text-lg md:text-xl font-bold text-slate-800 leading-tight whitespace-nowrap tracking-tight">{mod.title}</h3>
<h3 className="text-lg md:text-xl font-bold text-slate-800 leading-tight tracking-tight">{mod.title}</h3>
</div>
<ul className="space-y-3 mb-6 flex-grow">
@ -108,7 +108,7 @@ const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className
))}
</ul>
<div className={`mt-auto pt-4 border-t border-slate-100 font-bold text-sm md:text-base tracking-tight whitespace-nowrap ${mod.textColor}`}>
<div className={`mt-auto pt-4 border-t border-slate-100 font-bold text-sm md:text-base tracking-tight ${mod.textColor}`}>
{mod.highlight}
</div>
</motion.div>
@ -139,7 +139,7 @@ export default function Modules() {
</motion.div>
{/* Desktop Layout — Pentagon around Flywheel */}
<div className="hidden lg:block relative max-w-[1100px] mx-auto mt-10" style={{ height: '920px' }}>
<div className="hidden lg:block relative max-w-[1200px] mx-auto mt-10" style={{ height: '960px' }}>
{/* Center flywheel */}
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Flywheel />
@ -148,27 +148,27 @@ export default function Modules() {
{/* Pentagon: 5 cards around center, all same width */}
{/* 1. Top center */}
<div className="absolute left-1/2 -translate-x-1/2" style={{ top: '0px' }}>
<ModuleCard mod={modules[0]} className="w-[260px]" />
<ModuleCard mod={modules[0]} className="w-[300px]" />
</div>
{/* 2. Upper right */}
<div className="absolute" style={{ right: '40px', top: '130px' }}>
<ModuleCard mod={modules[1]} className="w-[260px]" />
<div className="absolute" style={{ right: '20px', top: '130px' }}>
<ModuleCard mod={modules[1]} className="w-[300px]" />
</div>
{/* 3. Lower right */}
<div className="absolute" style={{ right: '100px', bottom: '30px' }}>
<ModuleCard mod={modules[2]} className="w-[260px]" />
<div className="absolute" style={{ right: '80px', bottom: '30px' }}>
<ModuleCard mod={modules[2]} className="w-[300px]" />
</div>
{/* 4. Lower left */}
<div className="absolute" style={{ left: '100px', bottom: '30px' }}>
<ModuleCard mod={modules[3]} className="w-[260px]" />
<div className="absolute" style={{ left: '80px', bottom: '30px' }}>
<ModuleCard mod={modules[3]} className="w-[300px]" />
</div>
{/* 5. Upper left */}
<div className="absolute" style={{ left: '40px', top: '130px' }}>
<ModuleCard mod={modules[4]} className="w-[260px]" />
<div className="absolute" style={{ left: '20px', top: '130px' }}>
<ModuleCard mod={modules[4]} className="w-[300px]" />
</div>
</div>