Skip to content

Commit 249c1c5

Browse files
ericyangpanclaude
andcommitted
feat: enhance UI layout with subtitle and centered navigation
- Add subtitle to AI Coding Stack page for better context - Center navigation menu in header with improved spacing - Align mobile menu buttons to the right 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 4fc676c commit 249c1c5

File tree

2 files changed

+11
-6
lines changed

2 files changed

+11
-6
lines changed

src/app/[locale]/ai-coding-stack/page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ export default async function AICodingStackPage({ params }: Props) {
5757
<h1 className="text-[3rem] font-bold tracking-[-0.04em] leading-[1.1] mb-[var(--spacing-md)]">
5858
{t('title')}
5959
</h1>
60+
<p className="text-lg text-[var(--color-text-secondary)] leading-relaxed">
61+
{t('subtitle')}
62+
</p>
6063
</section>
6164

6265
{/* Stacks Grid Section */}

src/components/Header.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ function Header() {
157157
return (
158158
<header className="sticky top-0 bg-[var(--color-bg)]/95 backdrop-blur-sm border-b border-[var(--color-border)] z-50">
159159
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
160-
<nav className="flex justify-between items-center py-[var(--spacing-sm)]">
160+
<nav className="flex items-center py-[var(--spacing-sm)]">
161161
<Link
162162
href="/"
163163
className="flex items-center gap-2 text-lg font-semibold tracking-tight hover:text-[var(--color-text-secondary)] transition-colors"
@@ -172,13 +172,15 @@ function Header() {
172172
AI Coding Stack
173173
</Link>
174174

175-
{/* Desktop Menu */}
176-
<div className="hidden md:flex items-center gap-[var(--spacing-md)]">
175+
{/* Desktop Menu - Centered */}
176+
<div className="hidden md:flex flex-1 justify-center">
177177
<ul className="flex gap-[var(--spacing-md)] list-none">
178178
{menuItems.map(renderDesktopMenuItem)}
179179
</ul>
180+
</div>
180181

181-
{/* Desktop Search Button */}
182+
{/* Desktop Search Button - Right aligned */}
183+
<div className="hidden md:block">
182184
<button
183185
type="button"
184186
onClick={() => setIsSearchDialogOpen(true)}
@@ -203,8 +205,8 @@ function Header() {
203205
</button>
204206
</div>
205207

206-
{/* Mobile Menu Buttons */}
207-
<div className="flex md:hidden items-center gap-2">
208+
{/* Mobile Menu Buttons - Right aligned */}
209+
<div className="flex md:hidden items-center gap-2 ml-auto">
208210
{/* Mobile Search Toggle */}
209211
<button
210212
type="button"

0 commit comments

Comments
 (0)