107 lines
4.8 KiBLFS
TypeScript
107 lines
4.8 KiBLFS
TypeScript
import { AgentSkillsExplainer } from "@/components/AgentSkillsExplainer";
|
|
import { DomainRadar } from "@/components/DomainRadar";
|
|
import { HomeBackground } from "@/components/HomeBackground";
|
|
import { Leaderboard } from "@/components/Leaderboard";
|
|
import { HowItWorks } from "@/components/HowItWorks";
|
|
import { ReleasePerformance } from "@/components/ReleasePerformance";
|
|
import { TaskCards } from "@/components/TaskCards";
|
|
import { TimePerformance } from "@/components/TimePerformance";
|
|
import { WhosCiting } from "@/components/WhosCiting";
|
|
import { Button } from "@/components/ui/button";
|
|
import { getTasks } from "@/utils/tasks";
|
|
import { ArrowRight } from "lucide-react";
|
|
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "SkillsBench — Benchmarking How Well Agent Skills Work",
|
|
description:
|
|
"The first evaluation framework measuring how AI agent skills improve performance. SkillsBench v1.1 ships 87 native BenchFlow task.md packages for BenchFlow.",
|
|
alternates: { canonical: "https://skillsbench.ai" },
|
|
};
|
|
|
|
export default async function Home() {
|
|
const tasks = await getTasks();
|
|
const recentTasks = tasks.slice(0, 20);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen relative text-foreground overflow-x-hidden">
|
|
<main className="flex-1">
|
|
{/* Custom Hero Section */}
|
|
<div className="flex flex-col items-center justify-center min-h-[75vh] text-center space-y-8 relative z-10 px-4 pt-20 overflow-hidden">
|
|
<HomeBackground />
|
|
{/* Soft Glow Background for better text visibility */}
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-3xl h-full max-h-128 bg-background/60 blur-hero -z-10 rounded-full pointer-events-none mix-blend-normal" />
|
|
<div className="space-y-6">
|
|
<Link
|
|
href="/blogs/skillsbench-1-1"
|
|
className="inline-flex items-center rounded-full border border-chart-2/50 px-4 py-1.5 text-xs font-medium bg-chart-2/10 text-foreground backdrop-blur-md hover:bg-chart-2/20 hover:border-chart-2 transition-[background-color,border-color] duration-300 cursor-pointer group"
|
|
>
|
|
<span className="w-2 h-2 rounded-full bg-chart-2 mr-2 animate-pulse group-hover:scale-110 transition-transform shadow-glow"></span>
|
|
New release · SkillsBench v1.1
|
|
<ArrowRight className="ml-1.5 h-3 w-3 transition-transform group-hover:translate-x-0.5" />
|
|
</Link>
|
|
|
|
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight text-foreground leading-tight drop-shadow-2xl max-w-3xl mx-auto">
|
|
<AgentSkillsExplainer />
|
|
Bench: Benchmarking How Well Skills Work Across Diverse Tasks
|
|
</h1>
|
|
|
|
<p className="max-w-xl mx-auto text-lg text-foreground/80 font-normal drop-shadow-md">
|
|
The first evaluation framework that measures how skills work, and
|
|
the first dataset that measures how powerful models are at using
|
|
skills on expert-curated tasks across high-GDP-value, diverse domains.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Buttons wrapped in 'dark' class to ensure they look correct against the dark background regardless of system theme */}
|
|
<div className="flex flex-col sm:flex-row items-center gap-6 pt-4">
|
|
<Button asChild>
|
|
<a href="https://arxiv.org/abs/2602.12670" target="_blank" rel="noopener noreferrer">
|
|
Read the Paper
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="secondary"
|
|
className="border border-border hover:bg-accent transition-colors"
|
|
>
|
|
<Link href="/leaderboard">
|
|
See Leaderboard
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="secondary"
|
|
className="border border-border hover:bg-accent transition-colors"
|
|
>
|
|
<Link href="/docs">
|
|
Documentation
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-6xl mx-auto px-4 md:px-8 py-12 space-y-32">
|
|
<TimePerformance />
|
|
|
|
{/* How SkillsBench Works (main column) + Cited By (right rail) */}
|
|
<section className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-10 items-start">
|
|
<div className="lg:col-span-7">
|
|
<HowItWorks />
|
|
</div>
|
|
<aside className="lg:col-span-5 lg:border-l lg:border-border/60 lg:pl-10">
|
|
<WhosCiting />
|
|
</aside>
|
|
</section>
|
|
|
|
<Leaderboard />
|
|
<ReleasePerformance />
|
|
<DomainRadar />
|
|
<TaskCards tasks={recentTasks} />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|