Skip to content

Commit 5189c58

Browse files
setrfsetrf
committed
design: smooth repeated section background seams
1 parent 873f86c commit 5189c58

4 files changed

Lines changed: 153 additions & 116 deletions

File tree

‎app/globals.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,35 @@ h3 {
687687
z-index: 1;
688688
}
689689

690+
.section-band {
691+
position: relative;
692+
overflow: hidden;
693+
background:
694+
radial-gradient(circle at top left, rgba(212, 168, 83, 0.07), transparent 28%),
695+
linear-gradient(180deg, rgba(12, 12, 18, 0.98) 0%, rgba(9, 10, 16, 1) 100%);
696+
}
697+
698+
.section-band::before {
699+
content: '';
700+
position: absolute;
701+
inset: 0;
702+
background-image: radial-gradient(circle, var(--border-subtle) 1px, transparent 1px);
703+
background-size: 24px 24px;
704+
opacity: 0.1;
705+
pointer-events: none;
706+
}
707+
708+
.section-band--soft {
709+
background:
710+
radial-gradient(circle at top left, rgba(212, 168, 83, 0.05), transparent 26%),
711+
linear-gradient(180deg, rgba(11, 12, 19, 0.98) 0%, rgba(12, 12, 18, 1) 100%);
712+
}
713+
714+
.section-band > * {
715+
position: relative;
716+
z-index: 1;
717+
}
718+
690719
.page-intro--home-briefing .page-intro__description {
691720
max-width: 40rem;
692721
}

‎features/about/AboutPageContent.tsx‎

Lines changed: 113 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -13,68 +13,69 @@ export default function AboutPageContent() {
1313
containerClassName="container-medium px-6"
1414
/>
1515

16-
<section className="relative py-12 overflow-hidden">
17-
<div className="container-medium mx-auto px-6">
18-
<div className="max-w-3xl">
19-
<div className="accent-line mb-4" />
20-
<h2 className="text-3xl md:text-4xl mb-6">
21-
Traditional benchmarks fail when models memorize answers.
22-
<br />
23-
<span className="text-[var(--text-secondary)]">We test prediction, not recall.</span>
24-
</h2>
25-
<p className="text-lg text-[var(--text-secondary)] leading-relaxed">
26-
Forecaster Arena uses real prediction markets from Polymarket.
27-
Models make forecasts about future events, outcomes that cannot exist
28-
in any training data because they haven&apos;t happened yet.
29-
</p>
16+
<div className="section-band section-band--soft">
17+
<section className="relative py-12 overflow-hidden">
18+
<div className="container-medium mx-auto px-6">
19+
<div className="max-w-3xl">
20+
<div className="accent-line mb-4" />
21+
<h2 className="text-3xl md:text-4xl mb-6">
22+
Traditional benchmarks fail when models memorize answers.
23+
<br />
24+
<span className="text-[var(--text-secondary)]">We test prediction, not recall.</span>
25+
</h2>
26+
<p className="text-lg text-[var(--text-secondary)] leading-relaxed">
27+
Forecaster Arena uses real prediction markets from Polymarket.
28+
Models make forecasts about future events, outcomes that cannot exist
29+
in any training data because they haven&apos;t happened yet.
30+
</p>
31+
</div>
3032
</div>
31-
</div>
32-
</section>
33+
</section>
3334

34-
<section className="py-12 bg-[var(--bg-secondary)] relative">
35-
<div className="absolute inset-0 dot-grid opacity-20" />
36-
<div className="container-wide mx-auto px-6 relative z-10">
37-
<SectionHeading
38-
eyebrow="Philosophy"
39-
title="Core Principles"
40-
description="The rules that keep the arena rigorous, fair, and transparent."
41-
/>
35+
<section className="py-12 relative">
36+
<div className="container-wide mx-auto px-6 relative z-10">
37+
<SectionHeading
38+
eyebrow="Philosophy"
39+
title="Core Principles"
40+
description="The rules that keep the arena rigorous, fair, and transparent."
41+
/>
4242

43-
<div className="grid md:grid-cols-3 gap-px bg-[var(--border-subtle)] rounded-2xl overflow-hidden">
44-
{[
45-
{
46-
num: '01',
47-
title: 'Rigorous Methodology',
48-
desc: 'Every decision documented. Every prompt stored. Every calculation reproducible. Meeting standards for academic publication.',
49-
accent: 'var(--accent-gold)'
50-
},
51-
{
52-
num: '02',
53-
title: 'Fair Comparison',
54-
desc: 'Identical prompts, starting capital, and constraints for all models. Temperature = 0 for reproducibility. Level playing field.',
55-
accent: 'var(--accent-blue)'
56-
},
57-
{
58-
num: '03',
59-
title: 'Complete Transparency',
60-
desc: 'Open source codebase. Public methodology documentation. Anyone can verify results or build upon our work.',
61-
accent: 'var(--accent-violet)'
62-
}
63-
].map((item) => (
64-
<div key={item.num} className="bg-[var(--bg-secondary)] p-8 md:p-10">
65-
<span
66-
className="font-mono text-5xl font-bold opacity-20 block mb-6"
67-
style={{ color: item.accent }}
68-
>
69-
{item.num}
70-
</span>
71-
<h3 className="text-xl font-semibold mb-3">{item.title}</h3>
72-
<p className="text-[var(--text-secondary)] leading-relaxed">{item.desc}</p>
73-
</div>
74-
))}
43+
<div className="grid md:grid-cols-3 gap-px bg-[var(--border-subtle)] rounded-2xl overflow-hidden">
44+
{[
45+
{
46+
num: '01',
47+
title: 'Rigorous Methodology',
48+
desc: 'Every decision documented. Every prompt stored. Every calculation reproducible. Meeting standards for academic publication.',
49+
accent: 'var(--accent-gold)'
50+
},
51+
{
52+
num: '02',
53+
title: 'Fair Comparison',
54+
desc: 'Identical prompts, starting capital, and constraints for all models. Temperature = 0 for reproducibility. Level playing field.',
55+
accent: 'var(--accent-blue)'
56+
},
57+
{
58+
num: '03',
59+
title: 'Complete Transparency',
60+
desc: 'Open source codebase. Public methodology documentation. Anyone can verify results or build upon our work.',
61+
accent: 'var(--accent-violet)'
62+
}
63+
].map((item) => (
64+
<div key={item.num} className="bg-[var(--bg-secondary)] p-8 md:p-10">
65+
<span
66+
className="font-mono text-5xl font-bold opacity-20 block mb-6"
67+
style={{ color: item.accent }}
68+
>
69+
{item.num}
70+
</span>
71+
<h3 className="text-xl font-semibold mb-3">{item.title}</h3>
72+
<p className="text-[var(--text-secondary)] leading-relaxed">{item.desc}</p>
73+
</div>
74+
))}
75+
</div>
7576
</div>
76-
</div>
77-
</section>
77+
</section>
78+
</div>
7879

7980
<section className="py-12">
8081
<div className="container-wide mx-auto px-6">
@@ -165,66 +166,67 @@ export default function AboutPageContent() {
165166
</div>
166167
</section>
167168

168-
<section className="py-12">
169-
<div className="container-medium mx-auto px-6">
170-
<div className="card p-8 md:p-10 grid gap-6 md:grid-cols-[1.3fr,1fr] items-center">
171-
<div className="flex items-start gap-4">
172-
<div className="w-14 h-14 rounded-2xl bg-[var(--bg-tertiary)] border border-[var(--border-subtle)] flex items-center justify-center text-lg font-semibold">
173-
MG
169+
<div className="section-band section-band--soft">
170+
<section className="py-12">
171+
<div className="container-medium mx-auto px-6">
172+
<div className="card p-8 md:p-10 grid gap-6 md:grid-cols-[1.3fr,1fr] items-center">
173+
<div className="flex items-start gap-4">
174+
<div className="w-14 h-14 rounded-2xl bg-[var(--bg-tertiary)] border border-[var(--border-subtle)] flex items-center justify-center text-lg font-semibold">
175+
MG
176+
</div>
177+
<div>
178+
<p className="text-[var(--accent-gold)] font-mono text-xs tracking-wider mb-1">CONTACT</p>
179+
<h3 className="text-2xl font-semibold leading-tight">Mert Gulsun</h3>
180+
<p className="text-[var(--text-secondary)]">UC Berkeley</p>
181+
</div>
174182
</div>
175-
<div>
176-
<p className="text-[var(--accent-gold)] font-mono text-xs tracking-wider mb-1">CONTACT</p>
177-
<h3 className="text-2xl font-semibold leading-tight">Mert Gulsun</h3>
178-
<p className="text-[var(--text-secondary)]">UC Berkeley</p>
183+
<div className="flex flex-wrap gap-3">
184+
<a className="btn btn-secondary" href="https://mertgulsun.com" target="_blank" rel="noreferrer">
185+
Portfolio
186+
</a>
187+
<a className="btn btn-primary" href="https://linkedin.com/in/mert-gulsun" target="_blank" rel="noreferrer">
188+
LinkedIn
189+
</a>
190+
<a className="btn btn-outline" href="https://github.com/setrf" target="_blank" rel="noreferrer">
191+
GitHub
192+
</a>
179193
</div>
180194
</div>
181-
<div className="flex flex-wrap gap-3">
182-
<a className="btn btn-secondary" href="https://mertgulsun.com" target="_blank" rel="noreferrer">
183-
Portfolio
184-
</a>
185-
<a className="btn btn-primary" href="https://linkedin.com/in/mert-gulsun" target="_blank" rel="noreferrer">
186-
LinkedIn
187-
</a>
188-
<a className="btn btn-outline" href="https://github.com/setrf" target="_blank" rel="noreferrer">
189-
GitHub
190-
</a>
191-
</div>
192195
</div>
193-
</div>
194-
</section>
196+
</section>
195197

196-
<section className="py-12 bg-[var(--bg-secondary)] relative">
197-
<div className="absolute inset-0 dot-grid opacity-20" />
198-
<div className="container-medium mx-auto px-6 relative z-10">
199-
<SectionHeading
200-
eyebrow="Stack"
201-
title="Built With"
202-
description="The application, data, and model infrastructure behind the benchmark."
203-
/>
198+
<section className="py-12 relative">
199+
<div className="container-medium mx-auto px-6 relative z-10">
200+
<SectionHeading
201+
eyebrow="Stack"
202+
title="Built With"
203+
description="The application, data, and model infrastructure behind the benchmark."
204+
/>
204205

205-
<div className="flex flex-wrap gap-3">
206-
{[
207-
{ name: 'Next.js 14', role: 'Framework' },
208-
{ name: 'TypeScript', role: 'Language' },
209-
{ name: 'SQLite', role: 'Database' },
210-
{ name: 'OpenRouter', role: 'LLM API' },
211-
{ name: 'Polymarket', role: 'Market Data' },
212-
{ name: 'Tailwind', role: 'Styling' },
213-
{ name: 'Recharts', role: 'Charts' },
214-
].map((tech) => (
215-
<div
216-
key={tech.name}
217-
className="flex items-center gap-3 px-5 py-3 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-subtle)] hover:border-[var(--border-medium)] transition-colors"
218-
>
219-
<span className="font-medium">{tech.name}</span>
220-
<span className="text-xs text-[var(--text-muted)] px-2 py-0.5 bg-[var(--bg-tertiary)] rounded">
221-
{tech.role}
222-
</span>
223-
</div>
224-
))}
206+
<div className="flex flex-wrap gap-3">
207+
{[
208+
{ name: 'Next.js 14', role: 'Framework' },
209+
{ name: 'TypeScript', role: 'Language' },
210+
{ name: 'SQLite', role: 'Database' },
211+
{ name: 'OpenRouter', role: 'LLM API' },
212+
{ name: 'Polymarket', role: 'Market Data' },
213+
{ name: 'Tailwind', role: 'Styling' },
214+
{ name: 'Recharts', role: 'Charts' },
215+
].map((tech) => (
216+
<div
217+
key={tech.name}
218+
className="flex items-center gap-3 px-5 py-3 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-subtle)] hover:border-[var(--border-medium)] transition-colors"
219+
>
220+
<span className="font-medium">{tech.name}</span>
221+
<span className="text-xs text-[var(--text-muted)] px-2 py-0.5 bg-[var(--bg-tertiary)] rounded">
222+
{tech.role}
223+
</span>
224+
</div>
225+
))}
226+
</div>
225227
</div>
226-
</div>
227-
</section>
228+
</section>
229+
</div>
228230

229231
<section className="py-12">
230232
<div className="container-medium mx-auto px-6 text-center">

‎features/home/HomePageClient.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,10 @@ export default function HomePageClient() {
4747
</div>
4848
</section>
4949
)}
50-
<LeaderboardPreview data={leaderboard} hasRealData={hasRealData} />
51-
<HowItWorks />
50+
<div className="section-band">
51+
<LeaderboardPreview data={leaderboard} hasRealData={hasRealData} />
52+
<HowItWorks integrated />
53+
</div>
5254
<CTASection />
5355
</>
5456
);

‎features/home/components/HowItWorks.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { SectionHeading } from '@/components/ui/SectionHeading';
22

3-
export function HowItWorks() {
3+
interface HowItWorksProps {
4+
integrated?: boolean;
5+
}
6+
7+
export function HowItWorks({ integrated = false }: HowItWorksProps) {
48
const steps = [
59
{
610
num: '01',
@@ -30,8 +34,8 @@ export function HowItWorks() {
3034

3135
return (
3236
<section className="relative py-12 md:py-16 overflow-hidden">
33-
<div className="absolute inset-0 bg-[var(--bg-secondary)]" />
34-
<div className="absolute inset-0 dot-grid opacity-30" />
37+
{!integrated && <div className="absolute inset-0 bg-[var(--bg-secondary)]" />}
38+
{!integrated && <div className="absolute inset-0 dot-grid opacity-30" />}
3539

3640
<div className="container-wide mx-auto px-6 relative z-10">
3741
<SectionHeading

0 commit comments

Comments
 (0)