Skip to content

Commit 665e357

Browse files
M1zzclaude
M1zz
and
claude
committed
refactor: redesign landing page with feature cards for Playground, Frameworks, Roadmap
Replace the framework-first hero section with a clean intro and three prominent feature cards (HIG Playground, Frameworks, Roadmap). The framework list is now under a "Frameworks" section divider below. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 4f153ea commit 665e357

2 files changed

Lines changed: 161 additions & 24 deletions

File tree

‎site/en/index.html‎

Lines changed: 78 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,26 @@
6666
.card-link.soon{background:var(--tag-bg);color:var(--border);border-color:var(--border);opacity:.5;pointer-events:none;cursor:default;}
6767

6868
.footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2);}
69-
@media(max-width:640px){.hero-stats{gap:24px;}.grid{grid-template-columns:1fr;}}
69+
70+
/* Feature Cards */
71+
.features{max-width:1200px;margin:0 auto;padding:0 24px 60px;}
72+
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
73+
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s;display:flex;flex-direction:column;}
74+
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.1);text-decoration:none;}
75+
.feature-banner{padding:40px 32px 32px;position:relative;overflow:hidden;}
76+
.feature-icon{font-size:48px;margin-bottom:16px;display:block;}
77+
.feature-title{font-size:24px;font-weight:900;letter-spacing:-0.5px;margin-bottom:8px;}
78+
.feature-desc{font-size:14px;color:var(--text-2);line-height:1.7;}
79+
.feature-meta{padding:16px 32px 24px;display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
80+
.feature-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;border:1px solid var(--border);color:var(--text-2);}
81+
.feature-tag.highlight{background:var(--accent);color:#fff;border-color:var(--accent);}
82+
.section-divider{max-width:1200px;margin:0 auto 48px;padding:0 24px;}
83+
.section-divider-inner{border-top:1px solid var(--border);padding-top:48px;}
84+
.section-divider h2{font-size:28px;font-weight:900;letter-spacing:-1px;margin-bottom:8px;}
85+
.section-divider p{font-size:15px;color:var(--text-2);}
86+
87+
@media(max-width:860px){.features-grid{grid-template-columns:1fr;}}
88+
@media(max-width:640px){.hero-stats{gap:24px;}.grid{grid-template-columns:1fr;}.features-grid{grid-template-columns:1fr;}}
7089
</style>
7190
</head>
7291
<body>
@@ -86,17 +105,64 @@
86105
</div>
87106

88107
<div class="hero">
89-
<h1 data-i18n="hero_title">Practice Apple Frameworks<br>with Code</h1>
90-
<p data-i18n="hero_desc">Learn 50 essential frameworks from Apple's 367+ frameworks through hands-on practice.<br>
91-
Each topic includes a blog post, DocC tutorial, and sample project.</p>
92-
<p style="margin-top:16px;">
93-
<a href="https://github.com/M1zz/HIGLab/blob/main/GETTING_STARTED.md" style="background:var(--accent);color:white;padding:10px 20px;border-radius:20px;text-decoration:none;font-weight:600;font-size:14px;" data-i18n="hero_btn">🌱 Getting Started Guide</a>
94-
</p>
95-
<div class="hero-stats">
96-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_blog">📝 Blog</div></div>
97-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_docc">📚 DocC</div></div>
98-
<div class="stat"><div class="stat-num">43</div><div class="stat-label" data-i18n="stat_sample">💻 Sample</div></div>
99-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_ai">🤖 AI Ref</div></div>
108+
<h1 data-i18n="hero_title">Everything About<br>Apple Development</h1>
109+
<p data-i18n="hero_desc">Experience HIG guidelines interactively, learn 50 frameworks with real code,<br>and grow with a project-based roadmap.</p>
110+
</div>
111+
112+
<!-- Feature Cards -->
113+
<div class="features">
114+
<div class="features-grid">
115+
116+
<!-- HIG Playground -->
117+
<a href="../hig-playground/" class="feature-card">
118+
<div class="feature-banner" style="background:linear-gradient(135deg,#f0f0ff,#e8f4ff);">
119+
<span class="feature-icon">🎨</span>
120+
<div class="feature-title">HIG Playground</div>
121+
<div class="feature-desc">Interact with iOS UI components inside an iPhone mockup. Try 15 components — buttons, toggles, lists, and more — and tweak styles, sizes, and colors in real time.</div>
122+
</div>
123+
<div class="feature-meta">
124+
<span class="feature-tag highlight">Interactive</span>
125+
<span class="feature-tag">15 Components</span>
126+
<span class="feature-tag">SwiftUI Code</span>
127+
</div>
128+
</a>
129+
130+
<!-- Frameworks -->
131+
<a href="#frameworks" class="feature-card">
132+
<div class="feature-banner" style="background:linear-gradient(135deg,#f0fff4,#e8f5e9);">
133+
<span class="feature-icon">📚</span>
134+
<div class="feature-title">Frameworks</div>
135+
<div class="feature-desc">Learn 50 essential Apple frameworks with blogs, DocC tutorials, sample projects, and AI references. Over 148,000 lines of production-quality code ready to explore.</div>
136+
</div>
137+
<div class="feature-meta">
138+
<span class="feature-tag highlight">50 Frameworks</span>
139+
<span class="feature-tag">43 Samples</span>
140+
<span class="feature-tag">148K+ Lines</span>
141+
</div>
142+
</a>
143+
144+
<!-- Roadmap -->
145+
<a href="roadmap.html" class="feature-card">
146+
<div class="feature-banner" style="background:linear-gradient(135deg,#fff8f0,#fff3e0);">
147+
<span class="feature-icon">🗺️</span>
148+
<div class="feature-title">Roadmap</div>
149+
<div class="feature-desc">Build real-world apps with 10 integration projects based on framework dependency trees. E-commerce, Health, Social apps and more to learn by building.</div>
150+
</div>
151+
<div class="feature-meta">
152+
<span class="feature-tag highlight">Project-Based</span>
153+
<span class="feature-tag">10 Projects</span>
154+
<span class="feature-tag">Learning Path</span>
155+
</div>
156+
</a>
157+
158+
</div>
159+
</div>
160+
161+
<!-- Frameworks Section Header -->
162+
<div class="section-divider" id="frameworks">
163+
<div class="section-divider-inner">
164+
<h2>📚 Frameworks</h2>
165+
<p>50 Apple Frameworks — Blog, DocC Tutorial, Sample Project, AI Reference</p>
100166
</div>
101167
</div>
102168

‎site/index.html‎

Lines changed: 83 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,27 @@
6666
.card-link.soon{background:var(--tag-bg);color:var(--border);border-color:var(--border);opacity:.5;pointer-events:none;cursor:default;}
6767

6868
.footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2);}
69-
@media(max-width:640px){.hero-stats{gap:24px;}.grid{grid-template-columns:1fr;}}
69+
70+
/* Feature Cards */
71+
.features{max-width:1200px;margin:0 auto;padding:0 24px 60px;}
72+
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
73+
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s;display:flex;flex-direction:column;}
74+
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.1);text-decoration:none;}
75+
.feature-banner{padding:40px 32px 32px;position:relative;overflow:hidden;}
76+
.feature-banner .feature-bg{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.08;}
77+
.feature-icon{font-size:48px;margin-bottom:16px;display:block;}
78+
.feature-title{font-size:24px;font-weight:900;letter-spacing:-0.5px;margin-bottom:8px;}
79+
.feature-desc{font-size:14px;color:var(--text-2);line-height:1.7;}
80+
.feature-meta{padding:16px 32px 24px;display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
81+
.feature-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;border:1px solid var(--border);color:var(--text-2);}
82+
.feature-tag.highlight{background:var(--accent);color:#fff;border-color:var(--accent);}
83+
.section-divider{max-width:1200px;margin:0 auto 48px;padding:0 24px;}
84+
.section-divider-inner{border-top:1px solid var(--border);padding-top:48px;}
85+
.section-divider h2{font-size:28px;font-weight:900;letter-spacing:-1px;margin-bottom:8px;}
86+
.section-divider p{font-size:15px;color:var(--text-2);}
87+
88+
@media(max-width:860px){.features-grid{grid-template-columns:1fr;}}
89+
@media(max-width:640px){.hero-stats{gap:24px;}.grid{grid-template-columns:1fr;}.features-grid{grid-template-columns:1fr;}}
7090
</style>
7191
</head>
7292
<body>
@@ -86,17 +106,68 @@
86106
</div>
87107

88108
<div class="hero">
89-
<h1 data-i18n="hero_title">Apple Frameworks를<br>코드로 실습하는 곳</h1>
90-
<p data-i18n="hero_desc">367개 Apple 프레임워크 중 핵심 50개를 실전 중심으로 학습합니다.<br>
91-
각 기술별로 블로그 + DocC 튜토리얼 + 샘플 프로젝트를 제공합니다.</p>
92-
<p style="margin-top:16px;">
93-
<a href="https://github.com/M1zz/HIGLab/blob/main/GETTING_STARTED.md" style="background:var(--accent);color:white;padding:10px 20px;border-radius:20px;text-decoration:none;font-weight:600;font-size:14px;" data-i18n="hero_btn">🌱 주니어 개발자 시작 가이드</a>
94-
</p>
95-
<div class="hero-stats">
96-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_blog">📝 블로그</div></div>
97-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_docc">📚 DocC</div></div>
98-
<div class="stat"><div class="stat-num">43</div><div class="stat-label" data-i18n="stat_sample">💻 샘플</div></div>
99-
<div class="stat"><div class="stat-num">50</div><div class="stat-label" data-i18n="stat_ai">🤖 AI Ref</div></div>
109+
<h1 data-i18n="hero_title">Apple 개발의<br>모든 것을 한곳에서</h1>
110+
<p data-i18n="hero_desc">HIG 가이드라인을 인터랙티브하게 체험하고, 50개 프레임워크를 실전 코드로 학습하고,<br>프로젝트 기반 로드맵으로 성장하세요.</p>
111+
</div>
112+
113+
<!-- ═══════════════════════════════════════════════════════════════════════ -->
114+
<!-- Feature Cards -->
115+
<!-- ═══════════════════════════════════════════════════════════════════════ -->
116+
<div class="features">
117+
<div class="features-grid">
118+
119+
<!-- HIG Playground -->
120+
<a href="hig-playground/" class="feature-card">
121+
<div class="feature-banner" style="background:linear-gradient(135deg,#f0f0ff,#e8f4ff);">
122+
<span class="feature-icon">🎨</span>
123+
<div class="feature-title">HIG Playground</div>
124+
<div class="feature-desc">iOS UI 컴포넌트를 iPhone 목업 안에서 직접 조작해보세요. 버튼, 토글, 리스트 등 15개 컴포넌트의 스타일, 크기, 색상을 실시간으로 바꿔볼 수 있습니다.</div>
125+
</div>
126+
<div class="feature-meta">
127+
<span class="feature-tag highlight">Interactive</span>
128+
<span class="feature-tag">15 Components</span>
129+
<span class="feature-tag">SwiftUI Code</span>
130+
</div>
131+
</a>
132+
133+
<!-- Frameworks -->
134+
<a href="#frameworks" class="feature-card">
135+
<div class="feature-banner" style="background:linear-gradient(135deg,#f0fff4,#e8f5e9);">
136+
<span class="feature-icon">📚</span>
137+
<div class="feature-title">Frameworks</div>
138+
<div class="feature-desc">Apple 핵심 50개 프레임워크를 블로그, DocC 튜토리얼, 샘플 프로젝트, AI Reference로 학습하세요. 148,000줄 이상의 실전 코드가 준비되어 있습니다.</div>
139+
</div>
140+
<div class="feature-meta">
141+
<span class="feature-tag highlight">50 Frameworks</span>
142+
<span class="feature-tag">43 Samples</span>
143+
<span class="feature-tag">148K+ Lines</span>
144+
</div>
145+
</a>
146+
147+
<!-- Roadmap -->
148+
<a href="roadmap.html" class="feature-card">
149+
<div class="feature-banner" style="background:linear-gradient(135deg,#fff8f0,#fff3e0);">
150+
<span class="feature-icon">🗺️</span>
151+
<div class="feature-title">Roadmap</div>
152+
<div class="feature-desc">프레임워크 의존성 트리를 기반으로 설계된 10개 통합 프로젝트로 실력을 쌓으세요. E-commerce, Health, Social 등 실전 앱을 만들며 배웁니다.</div>
153+
</div>
154+
<div class="feature-meta">
155+
<span class="feature-tag highlight">Project-Based</span>
156+
<span class="feature-tag">10 Projects</span>
157+
<span class="feature-tag">Learning Path</span>
158+
</div>
159+
</a>
160+
161+
</div>
162+
</div>
163+
164+
<!-- ═══════════════════════════════════════════════════════════════════════ -->
165+
<!-- Frameworks Section Header -->
166+
<!-- ═══════════════════════════════════════════════════════════════════════ -->
167+
<div class="section-divider" id="frameworks">
168+
<div class="section-divider-inner">
169+
<h2>📚 Frameworks</h2>
170+
<p>50개 Apple 프레임워크 — 블로그, DocC 튜토리얼, 샘플 프로젝트, AI Reference 완비</p>
100171
</div>
101172
</div>
102173

0 commit comments

Comments
 (0)