Skip to content

Commit 2b225ba

Browse files
huayuankou9-archhuayuankou9-arch
committed
Promote multimodal matrix to hero and redesign visual hierarchy
1 parent bfd738e commit 2b225ba

File tree

4 files changed

+177
-37
lines changed

4 files changed

+177
-37
lines changed

‎app/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { AbstractSection } from "@/components/AbstractSection";
44
import { BackToTop } from "@/components/BackToTop";
55
import { BenchmarkComparisonTable } from "@/components/BenchmarkComparisonTable";
6-
import { BenchmarkMatrix } from "@/components/BenchmarkMatrix";
76
import { CitationSection } from "@/components/CitationSection";
87
import { ConclusionSection } from "@/components/ConclusionSection";
98
import { EvaluationSection } from "@/components/EvaluationSection";
@@ -92,11 +91,6 @@ export default function HomePage() {
9291
description="WebCompass integrates modalities, task types, and realistic engineering constraints into one coherent benchmark design."
9392
/>
9493
<PaperSourceNote text={paperSectionMap.benchmark} />
95-
96-
<div className="mb-8">
97-
<BenchmarkMatrix />
98-
</div>
99-
10094
{benchmarkLead ? (
10195
<div className="mb-8">
10296
<InlineFigureSpotlight figure={benchmarkLead} />
@@ -266,3 +260,6 @@ export default function HomePage() {
266260
</main>
267261
);
268262
}
263+
264+
265+

‎components/HeroSection.tsx‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { ArrowUpRight, BadgeCheck } from "lucide-react";
1+
import { ArrowUpRight, BadgeCheck } from "lucide-react";
22

3-
import { BenchmarkMatrix } from "@/components/BenchmarkMatrix";
3+
import { MultimodalMatrix } from "@/components/MultimodalMatrix";
44
import { StatsStrip } from "@/components/StatsStrip";
55
import { Button } from "@/components/ui/button";
6+
import { multimodalMatrix } from "@/data/multimodalMatrix";
67
import type { HeroMetric, LinkItem } from "@/lib/types";
78

89
type HeroSectionProps = {
@@ -32,40 +33,44 @@ export function HeroSection({
3233
<div className="absolute left-1/2 top-[-240px] h-[560px] w-[760px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.22),rgba(59,130,246,0.08),transparent_72%)]" />
3334
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(255,255,255,0),rgba(255,255,255,1)_78%)]" />
3435
</div>
36+
3537
<div className="container pb-16">
36-
<div className="grid items-start gap-8 lg:grid-cols-[1.25fr_1fr]">
37-
<div className="max-w-4xl">
38-
<p className="text-sm font-medium tracking-wide text-primary">Official Project Page</p>
39-
<h1 className="mt-4 text-balance text-4xl font-semibold tracking-tight text-foreground md:text-6xl">{title}</h1>
40-
<p className="mt-4 max-w-3xl text-balance text-lg text-muted-foreground md:text-2xl">{subtitle}</p>
41-
<p className="mt-4 text-pretty text-base font-medium text-foreground md:text-lg">
42-
Benchmarking Web Coding Agents Across Multimodal Inputs and Full Development Lifecycle
43-
</p>
44-
<p className="mt-4 max-w-3xl text-pretty leading-relaxed text-muted-foreground">{tagline}</p>
45-
<div className="mt-6 space-y-1 text-sm text-muted-foreground">
46-
<p>{authors}</p>
47-
<p>{affiliations}</p>
48-
</div>
49-
<div className="mt-8 flex flex-wrap items-center gap-3">
50-
{links.map((link, index) => (
51-
<Button key={link.label} asChild variant={index === 0 ? "default" : "outline"}>
52-
<a href={link.href} target={link.href.startsWith("#") ? "_self" : "_blank"} rel="noreferrer">
53-
{link.label}
54-
<ArrowUpRight className="h-4 w-4" />
55-
</a>
56-
</Button>
57-
))}
58-
<Button asChild variant="secondary">
59-
<a href={arxivBadge} target="_blank" rel="noreferrer">
60-
<BadgeCheck className="h-4 w-4" />
61-
arXiv Badge (Placeholder)
38+
<div className="mx-auto max-w-4xl text-center">
39+
<p className="text-sm font-medium tracking-wide text-primary">Official Project Page</p>
40+
<h1 className="mt-4 text-balance text-4xl font-semibold tracking-tight text-foreground md:text-6xl">{title}</h1>
41+
<p className="mt-4 text-balance text-lg text-muted-foreground md:text-2xl">{subtitle}</p>
42+
<p className="mt-4 text-pretty text-base font-medium text-foreground md:text-lg">
43+
Benchmarking Web Coding Agents Across Multimodal Inputs and Full Development Lifecycle
44+
</p>
45+
<p className="mt-4 text-pretty leading-relaxed text-muted-foreground">{tagline}</p>
46+
<div className="mt-6 space-y-1 text-sm text-muted-foreground">
47+
<p>{authors}</p>
48+
<p>{affiliations}</p>
49+
</div>
50+
51+
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
52+
{links.map((link, index) => (
53+
<Button key={link.label} asChild variant={index === 0 ? "default" : "outline"}>
54+
<a href={link.href} target={link.href.startsWith("#") ? "_self" : "_blank"} rel="noreferrer">
55+
{link.label}
56+
<ArrowUpRight className="h-4 w-4" />
6257
</a>
6358
</Button>
64-
</div>
59+
))}
60+
<Button asChild variant="secondary">
61+
<a href={arxivBadge} target="_blank" rel="noreferrer">
62+
<BadgeCheck className="h-4 w-4" />
63+
arXiv Badge (Placeholder)
64+
</a>
65+
</Button>
6566
</div>
66-
<BenchmarkMatrix compact />
6767
</div>
68-
<div className="mx-auto mt-12 max-w-5xl">
68+
69+
<div className="mx-auto mt-10 w-full max-w-7xl">
70+
<MultimodalMatrix data={multimodalMatrix} />
71+
</div>
72+
73+
<div className="mx-auto mt-10 max-w-6xl">
6974
<StatsStrip metrics={metrics} />
7075
</div>
7176
</div>

‎components/MultimodalMatrix.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { cn } from "@/lib/utils";
2+
import type { MatrixCell, MatrixCol, MatrixRow, MultimodalMatrixData } from "@/data/multimodalMatrix";
3+
4+
type MultimodalMatrixProps = {
5+
data: MultimodalMatrixData;
6+
className?: string;
7+
};
8+
9+
const colAccent: Record<MatrixCol, string> = {
10+
Generation: "from-sky-500/18 to-blue-500/18 border-sky-300/60 text-sky-800",
11+
Editing: "from-violet-500/16 to-indigo-500/16 border-violet-300/60 text-violet-800",
12+
Repair: "from-emerald-500/16 to-teal-500/16 border-emerald-300/60 text-emerald-800"
13+
};
14+
15+
const rowAccent: Record<MatrixRow, string> = {
16+
Text: "bg-slate-100 text-slate-700",
17+
Image: "bg-slate-100 text-slate-700",
18+
Video: "bg-slate-100 text-slate-700"
19+
};
20+
21+
function renderCell(cell: MatrixCell, col: MatrixCol) {
22+
if (!cell.label) {
23+
return (
24+
<div className="h-full min-h-[88px] rounded-xl border border-slate-200/70 bg-slate-50/90" aria-hidden="true" />
25+
);
26+
}
27+
28+
return (
29+
<div
30+
className={cn(
31+
"group flex h-full min-h-[88px] items-center justify-center rounded-xl border bg-gradient-to-br px-3 py-3 text-center text-sm font-medium leading-snug shadow-sm transition duration-200",
32+
colAccent[col],
33+
cell.emphasis === "strong" && "ring-1 ring-current/20",
34+
"hover:-translate-y-0.5 hover:shadow-md hover:brightness-105"
35+
)}
36+
>
37+
{cell.label}
38+
</div>
39+
);
40+
}
41+
42+
export function MultimodalMatrix({ data, className }: MultimodalMatrixProps) {
43+
const { rows, cols, cells } = data;
44+
45+
return (
46+
<section
47+
aria-label="Multimodal Task Matrix"
48+
className={cn(
49+
"rounded-3xl border border-border/70 bg-white/80 p-4 shadow-sm backdrop-blur-sm md:p-6",
50+
className
51+
)}
52+
>
53+
<div className="mb-4 flex items-end justify-between gap-3">
54+
<div>
55+
<p className="text-xs font-semibold uppercase tracking-[0.12em] text-primary">Core Design</p>
56+
<h3 className="mt-1 text-xl font-semibold text-foreground md:text-2xl">Multimodal Task Matrix</h3>
57+
<p className="mt-1 text-sm text-muted-foreground">3 Modalities x 3 Task Types, covering 7 valid task categories.</p>
58+
</div>
59+
</div>
60+
61+
<div className="hidden grid-cols-[130px_repeat(3,minmax(0,1fr))] gap-3 md:grid">
62+
<div />
63+
{cols.map((col) => (
64+
<div
65+
key={col}
66+
className={cn(
67+
"rounded-xl border px-3 py-3 text-center text-sm font-semibold",
68+
colAccent[col],
69+
"bg-gradient-to-br"
70+
)}
71+
>
72+
{col}
73+
</div>
74+
))}
75+
76+
{rows.map((row, rowIndex) => (
77+
<div key={row} className="contents">
78+
<div className={cn("rounded-xl px-3 py-3 text-center text-sm font-semibold", rowAccent[row])}>{row}</div>
79+
{cols.map((col, colIndex) => (
80+
<div key={`${row}-${col}`}>{renderCell(cells[rowIndex][colIndex], col)}</div>
81+
))}
82+
</div>
83+
))}
84+
</div>
85+
86+
<div className="space-y-3 md:hidden">
87+
{rows.map((row, rowIndex) => (
88+
<div key={row} className="rounded-2xl border border-border/60 bg-slate-50/60 p-3">
89+
<div className={cn("mb-2 inline-flex rounded-md px-2 py-1 text-xs font-semibold", rowAccent[row])}>{row}</div>
90+
<div className="grid grid-cols-3 gap-2">
91+
{cols.map((col, colIndex) => (
92+
<div key={`${row}-${col}`} className="space-y-1">
93+
<div className="text-center text-[11px] font-semibold text-muted-foreground">{col}</div>
94+
{renderCell(cells[rowIndex][colIndex], col)}
95+
</div>
96+
))}
97+
</div>
98+
</div>
99+
))}
100+
</div>
101+
</section>
102+
);
103+
}

‎data/multimodalMatrix.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export type MatrixRow = "Text" | "Image" | "Video";
2+
export type MatrixCol = "Generation" | "Editing" | "Repair";
3+
4+
export type MatrixCell = {
5+
label: string | null;
6+
emphasis?: "normal" | "strong";
7+
};
8+
9+
export type MultimodalMatrixData = {
10+
rows: MatrixRow[];
11+
cols: MatrixCol[];
12+
cells: MatrixCell[][];
13+
};
14+
15+
export const multimodalMatrix: MultimodalMatrixData = {
16+
rows: ["Text", "Image", "Video"],
17+
cols: ["Generation", "Editing", "Repair"],
18+
cells: [
19+
[
20+
{ label: "Text-Guided Generation", emphasis: "strong" },
21+
{ label: "Text-Guided Editing", emphasis: "normal" },
22+
{ label: "Diagnostic Repair", emphasis: "normal" }
23+
],
24+
[
25+
{ label: "Vision-Guided Generation", emphasis: "normal" },
26+
{ label: "Vision-Guided Editing", emphasis: "normal" },
27+
{ label: "Visual-Diagnostic Repair", emphasis: "strong" }
28+
],
29+
[
30+
{ label: "Video-Guided Generation", emphasis: "strong" },
31+
{ label: null },
32+
{ label: null }
33+
]
34+
]
35+
};

0 commit comments

Comments
 (0)