From 922ec8f6bcf1855686792071f78a2b7195cc5cf0 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Sun, 29 Mar 2026 15:55:00 +0900
Subject: [PATCH] fix: reduce Hero section gap and Module card overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/components/Hero.tsx    |  2 +-
 src/components/Modules.tsx | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index ee938b4..1fc303f 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -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>
       
diff --git a/src/components/Modules.tsx b/src/components/Modules.tsx
index 86d1584..0784cda 100644
--- a/src/components/Modules.tsx
+++ b/src/components/Modules.tsx
@@ -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>