Skip to content

Commit 377f207

Browse files
biru-codeastromerbiru-codeastromer
committed
Reduce decorative box framing across pages
1 parent 3b7e416 commit 377f207

File tree

6 files changed

+135
-161
lines changed

6 files changed

+135
-161
lines changed

‎web/app/globals.css‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -184,10 +184,7 @@ a {
184184

185185
.image-frame {
186186
overflow: hidden;
187-
border: 1px solid rgba(185, 174, 195, 0.46);
188187
border-radius: 28px;
189-
background: rgba(255, 255, 255, 0.72);
190-
box-shadow: var(--shadow);
191188
}
192189

193190
.image-frame img {
@@ -198,14 +195,20 @@ a {
198195
display: inline-flex;
199196
align-items: center;
200197
gap: 10px;
201-
border-radius: 999px;
202-
border: 1px solid rgba(185, 174, 195, 0.5);
203-
background: rgba(255, 255, 255, 0.74);
204-
padding: 10px 16px;
198+
padding: 0;
205199
font-size: 13px;
206200
color: var(--muted);
207201
}
208202

203+
.stat-chip::before {
204+
content: "";
205+
display: inline-block;
206+
height: 6px;
207+
width: 6px;
208+
border-radius: 999px;
209+
background: rgba(61, 104, 220, 0.8);
210+
}
211+
209212
.footer-link {
210213
color: var(--muted);
211214
text-decoration: underline;

‎web/app/leaderboard/page.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,37 +42,32 @@ export default function LeaderboardPage() {
4242
</div>
4343
</div>
4444

45-
<div className="image-frame relative overflow-visible p-4">
46-
<div className="absolute left-10 top-8 hidden h-[58%] w-[32%] rounded-[30px] border border-[rgba(61,104,220,0.4)] bg-[rgba(220,229,255,0.22)] lg:block" />
47-
<div className="grid gap-4 lg:grid-cols-[0.96fr_1.04fr]">
48-
<div className="relative aspect-[0.88/1] overflow-hidden rounded-[28px]">
45+
<div className="grid gap-6 lg:grid-cols-[0.96fr_1.04fr]">
46+
<div className="relative aspect-[0.88/1] overflow-hidden rounded-[28px]">
47+
<Image
48+
src="/editorial/market-pixabay.jpg"
49+
alt="Market data board representing live benchmark comparison"
50+
fill
51+
className="object-cover"
52+
sizes="(max-width: 1024px) 100vw, 30vw"
53+
/>
54+
</div>
55+
<div className="space-y-6">
56+
<div className="border-t border-[rgba(185,174,195,0.42)] pt-5">
57+
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">Read the signal</p>
58+
<p className="mt-4 font-[var(--font-serif)] text-3xl leading-[1.08] text-[var(--ink)]">
59+
Switch tracks, compare runs, and inspect evidence without leaving the site.
60+
</p>
61+
</div>
62+
<div className="relative aspect-[1/0.66] overflow-hidden rounded-[26px]">
4963
<Image
50-
src="/editorial/market-pixabay.jpg"
51-
alt="Market data board representing live benchmark comparison"
64+
src="/editorial/chart-rdne.jpg"
65+
alt="Soft research chart inset"
5266
fill
5367
className="object-cover"
54-
sizes="(max-width: 1024px) 100vw, 30vw"
68+
sizes="(max-width: 1024px) 100vw, 20vw"
5569
/>
5670
</div>
57-
<div className="space-y-4">
58-
<div className="rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.78)] p-5">
59-
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">Read the signal</p>
60-
<p className="mt-4 font-[var(--font-serif)] text-3xl leading-[1.08] text-[var(--ink)]">
61-
Switch tracks, compare runs, and inspect evidence without leaving the site.
62-
</p>
63-
</div>
64-
<div className="relative aspect-[1/0.66] overflow-hidden rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-3">
65-
<div className="relative h-full w-full overflow-hidden rounded-[20px]">
66-
<Image
67-
src="/editorial/chart-rdne.jpg"
68-
alt="Soft research chart inset"
69-
fill
70-
className="object-cover"
71-
sizes="(max-width: 1024px) 100vw, 20vw"
72-
/>
73-
</div>
74-
</div>
75-
</div>
7671
</div>
7772
</div>
7873
</section>

‎web/app/page.tsx‎

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -68,45 +68,37 @@ export default function HomePage() {
6868
</div>
6969
</div>
7070

71-
<div className="relative">
72-
<div className="image-frame relative overflow-visible p-5">
73-
<div className="absolute -left-10 top-10 hidden h-[62%] w-[42%] rounded-[32px] border border-[rgba(61,104,220,0.4)] bg-[rgba(220,229,255,0.24)] lg:block" />
74-
<div className="absolute -right-8 bottom-8 hidden h-[50%] w-[36%] rounded-[32px] border border-[rgba(244,216,202,0.72)] bg-[rgba(244,216,202,0.28)] lg:block" />
75-
<div className="grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
76-
<div className="relative aspect-[0.95/1.08] overflow-hidden rounded-[30px]">
77-
<Image
78-
src="/editorial/hero-goumbik.jpg"
79-
alt="Desk with benchmark notes and chart printouts"
80-
fill
81-
className="object-cover"
82-
sizes="(max-width: 1024px) 100vw, 40vw"
83-
priority
84-
/>
85-
</div>
86-
<div className="flex flex-col justify-between gap-5">
87-
<div className="rounded-[28px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-5">
88-
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">
89-
Benchmark narrative
90-
</p>
91-
<p className="mt-4 font-[var(--font-serif)] text-3xl leading-[1.08] text-[var(--ink)]">
92-
Build a benchmark surface that communicates as well as the experiment itself.
93-
</p>
94-
</div>
95-
<div className="relative overflow-hidden rounded-[28px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-3">
96-
<div className="relative aspect-[1/1] overflow-hidden rounded-[22px]">
97-
<Image
98-
src="/editorial/chart-rdne.jpg"
99-
alt="Close-up market research chart"
100-
fill
101-
className="object-cover"
102-
sizes="(max-width: 1024px) 100vw, 22vw"
103-
/>
104-
</div>
105-
</div>
106-
</div>
71+
<div className="relative grid gap-6 lg:grid-cols-[1.08fr_0.92fr]">
72+
<div className="relative aspect-[0.95/1.08] overflow-hidden rounded-[30px]">
73+
<Image
74+
src="/editorial/hero-goumbik.jpg"
75+
alt="Desk with benchmark notes and chart printouts"
76+
fill
77+
className="object-cover"
78+
sizes="(max-width: 1024px) 100vw, 40vw"
79+
priority
80+
/>
81+
</div>
82+
<div className="flex flex-col justify-between gap-8 pt-2">
83+
<div className="max-w-sm">
84+
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--muted)]">
85+
Benchmark narrative
86+
</p>
87+
<p className="mt-5 font-[var(--font-serif)] text-4xl leading-[1.02] text-[var(--ink)]">
88+
Build a benchmark surface that communicates as well as the experiment itself.
89+
</p>
90+
</div>
91+
<div className="relative aspect-[1/0.92] overflow-hidden rounded-[28px]">
92+
<Image
93+
src="/editorial/chart-rdne.jpg"
94+
alt="Close-up market research chart"
95+
fill
96+
className="object-cover"
97+
sizes="(max-width: 1024px) 100vw, 24vw"
98+
/>
10799
</div>
108100
</div>
109-
<div className="mt-5 flex flex-wrap gap-3">
101+
<div className="lg:col-span-2 mt-1 flex flex-wrap gap-6 border-t border-[rgba(185,174,195,0.4)] pt-4">
110102
<span className="stat-chip">FastAPI + Postgres + S3</span>
111103
<span className="stat-chip">Next.js App Router</span>
112104
<span className="stat-chip">Real runs live in production</span>
@@ -135,16 +127,14 @@ export default function HomePage() {
135127
</div>
136128

137129
<div className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr]">
138-
<div className="image-frame p-4">
139-
<div className="relative aspect-[1.1/0.95] overflow-hidden rounded-[28px]">
140-
<Image
141-
src="/editorial/team-thirdman.jpg"
142-
alt="Team working over charts and data"
143-
fill
144-
className="object-cover"
145-
sizes="(max-width: 1024px) 100vw, 38vw"
146-
/>
147-
</div>
130+
<div className="relative aspect-[1.1/0.95] overflow-hidden rounded-[28px]">
131+
<Image
132+
src="/editorial/team-thirdman.jpg"
133+
alt="Team working over charts and data"
134+
fill
135+
className="object-cover"
136+
sizes="(max-width: 1024px) 100vw, 38vw"
137+
/>
148138
</div>
149139
<div className="space-y-8">
150140
{surfaces.map((surface) => (
@@ -192,17 +182,14 @@ export default function HomePage() {
192182
</div>
193183
</div>
194184

195-
<div className="image-frame relative p-5">
196-
<div className="absolute left-8 top-8 hidden h-[64%] w-[36%] rounded-[32px] border border-[rgba(61,104,220,0.42)] bg-[rgba(220,229,255,0.22)] lg:block" />
197-
<div className="relative aspect-[1.15/0.96] overflow-hidden rounded-[30px]">
198-
<Image
199-
src="/editorial/market-pixabay.jpg"
200-
alt="Financial board visual suggesting live benchmark comparison"
201-
fill
202-
className="object-cover"
203-
sizes="(max-width: 1024px) 100vw, 44vw"
204-
/>
205-
</div>
185+
<div className="relative aspect-[1.15/0.96] overflow-hidden rounded-[30px]">
186+
<Image
187+
src="/editorial/market-pixabay.jpg"
188+
alt="Financial board visual suggesting live benchmark comparison"
189+
fill
190+
className="object-cover"
191+
sizes="(max-width: 1024px) 100vw, 44vw"
192+
/>
206193
</div>
207194
</section>
208195
</section>

‎web/app/tasks/page.tsx‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -107,40 +107,35 @@ export default function TasksPage() {
107107
</p>
108108
</div>
109109

110-
<div className="image-frame relative overflow-visible p-4">
111-
<div className="absolute -left-8 top-10 hidden h-[60%] w-[34%] rounded-[28px] border border-[rgba(61,104,220,0.38)] bg-[rgba(220,229,255,0.22)] lg:block" />
112-
<div className="grid gap-4 lg:grid-cols-[1.04fr_0.96fr]">
113-
<div className="relative aspect-[1/1.04] overflow-hidden rounded-[28px]">
110+
<div className="grid gap-6 lg:grid-cols-[1.04fr_0.96fr]">
111+
<div className="relative aspect-[1/1.04] overflow-hidden rounded-[28px]">
112+
<Image
113+
src="/editorial/team-thirdman.jpg"
114+
alt="Team collaborating around charts"
115+
fill
116+
className="object-cover"
117+
sizes="(max-width: 1024px) 100vw, 34vw"
118+
/>
119+
</div>
120+
<div className="space-y-6">
121+
<div className="border-t border-[rgba(185,174,195,0.42)] pt-5">
122+
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">What ships with every task</p>
123+
<div className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
124+
<p>Deterministic defaults</p>
125+
<p>Track-ready metadata</p>
126+
<p>Direct upload routing</p>
127+
<p>Readable public benchmark framing</p>
128+
</div>
129+
</div>
130+
<div className="relative aspect-[1/0.7] overflow-hidden rounded-[26px]">
114131
<Image
115-
src="/editorial/team-thirdman.jpg"
116-
alt="Team collaborating around charts"
132+
src="/editorial/hero-goumbik.jpg"
133+
alt="Desk with benchmark notebook and charts"
117134
fill
118135
className="object-cover"
119-
sizes="(max-width: 1024px) 100vw, 34vw"
136+
sizes="(max-width: 1024px) 100vw, 22vw"
120137
/>
121138
</div>
122-
<div className="space-y-4">
123-
<div className="rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-5">
124-
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">What ships with every task</p>
125-
<div className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
126-
<p>Deterministic defaults</p>
127-
<p>Track-ready metadata</p>
128-
<p>Direct upload routing</p>
129-
<p>Readable public benchmark framing</p>
130-
</div>
131-
</div>
132-
<div className="relative aspect-[1/0.7] overflow-hidden rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-3">
133-
<div className="relative h-full w-full overflow-hidden rounded-[20px]">
134-
<Image
135-
src="/editorial/hero-goumbik.jpg"
136-
alt="Desk with benchmark notebook and charts"
137-
fill
138-
className="object-cover"
139-
sizes="(max-width: 1024px) 100vw, 22vw"
140-
/>
141-
</div>
142-
</div>
143-
</div>
144139
</div>
145140
</div>
146141
</section>

‎web/app/upload/page.tsx‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -126,40 +126,35 @@ function UploadStudio() {
126126
</div>
127127
</div>
128128

129-
<div className="image-frame relative overflow-visible p-4">
130-
<div className="absolute -left-8 top-10 hidden h-[54%] w-[32%] rounded-[28px] border border-[rgba(61,104,220,0.38)] bg-[rgba(220,229,255,0.22)] lg:block" />
131-
<div className="grid gap-4 lg:grid-cols-[1.08fr_0.92fr]">
132-
<div className="relative aspect-[1/1.02] overflow-hidden rounded-[28px]">
129+
<div className="grid gap-6 lg:grid-cols-[1.08fr_0.92fr]">
130+
<div className="relative aspect-[1/1.02] overflow-hidden rounded-[28px]">
131+
<Image
132+
src="/editorial/team-thirdman.jpg"
133+
alt="Team collaborating over metrics"
134+
fill
135+
className="object-cover"
136+
sizes="(max-width: 1024px) 100vw, 32vw"
137+
/>
138+
</div>
139+
<div className="space-y-6">
140+
<div className="border-t border-[rgba(185,174,195,0.42)] pt-5">
141+
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">What ships here</p>
142+
<div className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
143+
<p>Run metadata creation</p>
144+
<p>Metrics, trace, and config attachment</p>
145+
<p>Immediate leaderboard publishing</p>
146+
<p>Companion API and CLI examples</p>
147+
</div>
148+
</div>
149+
<div className="relative aspect-[1/0.68] overflow-hidden rounded-[26px]">
133150
<Image
134-
src="/editorial/team-thirdman.jpg"
135-
alt="Team collaborating over metrics"
151+
src="/editorial/chart-rdne.jpg"
152+
alt="Research chart visual"
136153
fill
137154
className="object-cover"
138-
sizes="(max-width: 1024px) 100vw, 32vw"
155+
sizes="(max-width: 1024px) 100vw, 20vw"
139156
/>
140157
</div>
141-
<div className="space-y-4">
142-
<div className="rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.78)] p-5">
143-
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">What ships here</p>
144-
<div className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
145-
<p>Run metadata creation</p>
146-
<p>Metrics, trace, and config attachment</p>
147-
<p>Immediate leaderboard publishing</p>
148-
<p>Companion API and CLI examples</p>
149-
</div>
150-
</div>
151-
<div className="relative aspect-[1/0.68] overflow-hidden rounded-[26px] border border-[rgba(185,174,195,0.42)] bg-[rgba(255,255,255,0.74)] p-3">
152-
<div className="relative h-full w-full overflow-hidden rounded-[20px]">
153-
<Image
154-
src="/editorial/chart-rdne.jpg"
155-
alt="Research chart visual"
156-
fill
157-
className="object-cover"
158-
sizes="(max-width: 1024px) 100vw, 20vw"
159-
/>
160-
</div>
161-
</div>
162-
</div>
163158
</div>
164159
</div>
165160
</section>

0 commit comments

Comments
 (0)