Skip to content

Commit 1c81768

Browse files
ericyangpanclaude
ericyangpan
and
claude
committed
refactor: update page layout and max-width
- Update pages to use max-w-8xl globally for consistent layout - Update homepage structure and content sections - Standardize page container widths across all routes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 2a8b7ef commit 1c81768

File tree

22 files changed

+101
-180
lines changed

22 files changed

+101
-180
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,10 @@ export default async function Page({ params }: Props) {
5555
return (
5656
<>
5757
<Header />
58-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
58+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
5959
{/* Page Header */}
6060
<div className="mb-[var(--spacing-lg)]">
6161
<h1 className="text-[2rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
62-
<span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
63-
{'//'}
64-
</span>
6562
{tNav('aiCodingLandscape')}
6663
</h1>
6764
<p className="text-base text-[var(--color-text-secondary)] font-light">

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

Lines changed: 39 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { getTranslations } from 'next-intl/server'
22
import Footer from '@/components/Footer'
33
import Header from '@/components/Header'
4-
import StackSidebar from '@/components/sidebar/StackSidebar'
54
import { Link } from '@/i18n/navigation'
6-
import { getManifestoComponent } from '@/lib/manifesto'
75
import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
86

97
export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
@@ -47,76 +45,52 @@ type Props = {
4745
export default async function AICodingStackPage({ params }: Props) {
4846
const { locale } = await params
4947
const t = await getTranslations({ locale, namespace: 'stacksPages.overview' })
50-
const ManifestoContent = await getManifestoComponent(locale)
5148

5249
return (
5350
<>
5451
<Header />
5552

56-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
57-
<div className="flex gap-[var(--spacing-lg)]">
58-
<StackSidebar activeStack="overview" locale={locale} />
53+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
54+
<main>
55+
{/* Hero Section */}
56+
<section className="mb-[var(--spacing-xl)]">
57+
<h1 className="text-[3rem] font-bold tracking-[-0.04em] leading-[1.1] mb-[var(--spacing-md)]">
58+
{t('title')}
59+
</h1>
60+
</section>
5961

60-
<main className="flex-1">
61-
{/* Hero Section */}
62-
<section className="mb-[var(--spacing-2xl)]">
63-
<div className="space-y-[var(--spacing-md)]">
64-
<h1 className="text-[2.5rem] md:text-[2rem] font-bold tracking-[-0.03em] leading-[1.15]">
65-
{t('title')}
66-
</h1>
67-
<div className="bg-[var(--color-hover)] p-[var(--spacing-md)]">
68-
<div className="text-[1.5rem] md:text-[1.25rem] tracking-[-0.01em] font-semibold text-[var(--color-text-secondary)]">
69-
{t('slogan')}
62+
{/* Stacks Grid Section */}
63+
<section className="mb-[var(--spacing-xl)]">
64+
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-md)]">
65+
{[
66+
{ key: 'ides', path: 'ides' },
67+
{ key: 'clis', path: 'clis' },
68+
{ key: 'extensions', path: 'extensions' },
69+
{ key: 'models', path: 'models' },
70+
{ key: 'modelProviders', path: 'model-providers' },
71+
{ key: 'vendors', path: 'vendors' },
72+
].map(stack => (
73+
<Link
74+
key={stack.key}
75+
href={`/${stack.path}`}
76+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
77+
>
78+
<div className="flex justify-between items-start mb-[var(--spacing-md)]">
79+
<h3 className="text-[1.5rem] font-semibold tracking-tight">
80+
{t(`${stack.key}.title`)}
81+
</h3>
82+
<span className="text-2xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
83+
→
84+
</span>
7085
</div>
71-
</div>
72-
</div>
73-
</section>
74-
75-
{/* Stacks Grid Section */}
76-
<section className="mb-[var(--spacing-xl)]">
77-
<h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] my-[var(--spacing-md)]">
78-
<span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
79-
{'//'}
80-
</span>
81-
{t('exploreStack')}
82-
</h2>
83-
84-
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-md)]">
85-
{[
86-
{ key: 'ides', path: 'ides' },
87-
{ key: 'clis', path: 'clis' },
88-
{ key: 'extensions', path: 'extensions' },
89-
{ key: 'models', path: 'models' },
90-
{ key: 'modelProviders', path: 'model-providers' },
91-
{ key: 'vendors', path: 'vendors' },
92-
].map(stack => (
93-
<Link
94-
key={stack.key}
95-
href={`/${stack.path}`}
96-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
97-
>
98-
<div className="flex justify-between items-start mb-[var(--spacing-md)]">
99-
<h3 className="text-[1.5rem] font-semibold tracking-tight">
100-
{t(`${stack.key}.title`)}
101-
</h3>
102-
<span className="text-2xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
103-
→
104-
</span>
105-
</div>
106-
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light">
107-
{t(`${stack.key}.description`)}
108-
</p>
109-
</Link>
110-
))}
111-
</div>
112-
</section>
113-
114-
{/* Manifesto Section */}
115-
<section className="prose prose-neutral dark:prose-invert max-w-none">
116-
<ManifestoContent />
117-
</section>
118-
</main>
119-
</div>
86+
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light">
87+
{t(`${stack.key}.description`)}
88+
</p>
89+
</Link>
90+
))}
91+
</div>
92+
</section>
93+
</main>
12094
</div>
12195

12296
<Footer />

‎src/app/[locale]/articles/[slug]/page.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { notFound } from 'next/navigation'
2+
import { getTranslations } from 'next-intl/server'
3+
import { Breadcrumb } from '@/components/controls/Breadcrumb'
24
import Footer from '@/components/Footer'
35
import Header from '@/components/Header'
46
import { Link } from '@/i18n/navigation'
@@ -53,13 +55,14 @@ export default async function ArticlePage({ params }: Props) {
5355
notFound()
5456
}
5557

58+
const t = await getTranslations({ locale, namespace: 'header' })
5659
const ArticleContent = await getArticleComponent(locale, slug)
5760

5861
if (!ArticleContent) {
5962
return (
6063
<>
6164
<Header />
62-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
65+
<div className="max-w-6xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
6366
<h1 className="text-[2.5rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
6467
{article.title}
6568
</h1>
@@ -83,24 +86,15 @@ export default async function ArticlePage({ params }: Props) {
8386
<>
8487
<Header />
8588

86-
{/* Breadcrumb */}
87-
<section className="py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)]">
88-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
89-
<nav className="flex items-center gap-[var(--spacing-xs)] text-[0.8125rem]">
90-
<Link
91-
href="/articles"
92-
className="text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
93-
>
94-
Articles
95-
</Link>
96-
<span className="text-[var(--color-text-muted)]">/</span>
97-
<span className="text-[var(--color-text)] font-medium">{article.title}</span>
98-
</nav>
99-
</div>
100-
</section>
89+
<Breadcrumb
90+
items={[
91+
{ name: t('articles'), href: '/articles' },
92+
{ name: article.title, href: `/articles/${slug}` },
93+
]}
94+
/>
10195

10296
{/* Article Content */}
103-
<article className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
97+
<article className="max-w-5xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
10498
{/* Article Header */}
10599
<header className="mb-[var(--spacing-xl)]">
106100
<h1 className="text-[2.5rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)] leading-tight">

‎src/app/[locale]/articles/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,10 @@ export default async function ArticlesPage({ params }: Props) {
4949
<>
5050
<Header />
5151

52-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
52+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
5353
{/* Page Header */}
5454
<div className="text-center mb-[var(--spacing-xl)]">
5555
<h1 className="text-[2rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
56-
<span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
57-
{'//'}
58-
</span>
5956
Articles
6057
</h1>
6158
<p className="text-base text-[var(--color-text-secondary)] font-light">
@@ -64,7 +61,7 @@ export default async function ArticlesPage({ params }: Props) {
6461
</div>
6562

6663
{/* Articles Grid */}
67-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-md)]">
64+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-md)]">
6865
{articles.map(article => (
6966
<Link
7067
key={article.slug}

‎src/app/[locale]/clis/[slug]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export default async function CLIPage({
180180
{/* Related IDE */}
181181
{cli.ide && (
182182
<section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
183-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
183+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
184184
<Link
185185
href={`ides/${cli.ide}`}
186186
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"

‎src/app/[locale]/clis/comparison/page.client.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
310310
{/* Fixed Breadcrumb (when scrolled) */}
311311
{isBreadcrumbFixed && (
312312
<section className="fixed top-[60px] left-0 right-0 z-30 py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)] shadow-sm">
313-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
313+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
314314
<nav className="flex items-center gap-[var(--spacing-xs)] text-[0.8125rem]">
315315
<Link
316316
href={`/${locale}/ai-coding-stack`}
@@ -339,7 +339,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
339339
ref={breadcrumbRef}
340340
className="py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)]"
341341
>
342-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
342+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
343343
<nav
344344
className={`flex items-center gap-[var(--spacing-xs)] text-[0.8125rem] ${isBreadcrumbFixed ? 'invisible' : ''}`}
345345
>
@@ -366,7 +366,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
366366

367367
{/* Page Header */}
368368
<section className="py-[var(--spacing-lg)] border-[var(--color-border)]">
369-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
369+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
370370
<h1 className="text-[2.5rem] font-semibold tracking-[-0.04em] mb-[var(--spacing-sm)]">
371371
{tComparison('clis.title')}
372372
</h1>
@@ -378,7 +378,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
378378

379379
{/* Comparison Table */}
380380
<section className="pb-[var(--spacing-lg)] border-b border-[var(--color-border)]">
381-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
381+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
382382
<ComparisonTable
383383
items={clis as unknown as Record<string, unknown>[]}
384384
columns={columns}
@@ -390,7 +390,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
390390

391391
{/* Back Navigation */}
392392
<section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
393-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
393+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
394394
<Link
395395
href={`/${locale}/clis`}
396396
className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"

‎src/app/[locale]/clis/page.client.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,17 +95,12 @@ export default function CLIsPageClient({ locale }: Props) {
9595
<>
9696
<Header />
9797

98-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
98+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
9999
{/* Main Content */}
100100
<main className="w-full">
101101
<div className="mb-[var(--spacing-lg)]">
102102
<div className="flex items-start justify-between mb-[var(--spacing-sm)]">
103-
<h1 className="text-[2rem] font-semibold tracking-[-0.03em]">
104-
<span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
105-
{'//'}
106-
</span>
107-
{t('title')}
108-
</h1>
103+
<h1 className="text-[2rem] font-semibold tracking-[-0.03em]">{t('title')}</h1>
109104
<Link
110105
href={`/${locale}/clis/comparison`}
111106
className="text-sm px-[var(--spacing-md)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors"

‎src/app/[locale]/curated-collections/page.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,10 @@ export default async function CuratedCollectionsPage({ params }: Props) {
5252
<>
5353
<Header />
5454

55-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
55+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
5656
{/* Page Header */}
5757
<div className="text-center mb-[var(--spacing-xl)]">
5858
<h1 className="text-[2rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
59-
<span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
60-
{'//'}
61-
</span>
6259
{t('title')}
6360
</h1>
6461
<p className="text-base text-[var(--color-text-secondary)] font-light">{t('subtitle')}</p>

‎src/app/[locale]/docs/[slug]/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default async function DocPage({ params }: Props) {
5959
return (
6060
<>
6161
<Header />
62-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
62+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
6363
<h1 className="text-[2.5rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
6464
{doc.title}
6565
</h1>
@@ -83,12 +83,12 @@ export default async function DocPage({ params }: Props) {
8383
<>
8484
<Header />
8585

86-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
86+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
8787
<div className="flex gap-[var(--spacing-lg)]">
8888
<DocsSidebar sections={docSections} activeSlug={slug} />
8989

9090
{/* Main Content */}
91-
<main className="flex-1 max-w-[1400px]">
91+
<main className="flex-1 max-w-8xl">
9292
<article className="space-y-[var(--spacing-lg)] text-base leading-[1.8] text-[var(--color-text-secondary)] font-light">
9393
<DocContent />
9494
</article>

‎src/app/[locale]/docs/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@ export default async function DocsPage({ params }: Props) {
5050
<>
5151
<Header />
5252

53-
<div className="max-w-[1400px] mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
53+
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
5454
<div className="flex gap-[var(--spacing-lg)]">
5555
<DocsSidebar sections={docSections} activeSlug="welcome" />
5656

5757
{/* Main Content */}
58-
<main className="flex-1 max-w-[1400px]">
58+
<main className="flex-1 max-w-8xl">
5959
<article className="space-y-[var(--spacing-lg)] text-base leading-[1.8] text-[var(--color-text-secondary)] font-light">
6060
{WelcomeDoc && <WelcomeDoc />}
6161
</article>

0 commit comments

Comments
 (0)