Skip to content

Commit 6a0e404

Browse files
jahoomajahooma
committed
Add BuffBench section right below hero section
1 parent 9ed62a6 commit 6a0e404

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed

‎web/public/codebuff-vs-claude-code.png‎

21.2 KB
Loading

‎web/src/app/page.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import { useSearchParams } from 'next/navigation'
44
import { useSession } from 'next-auth/react'
5+
import Image from 'next/image'
6+
import { motion } from 'framer-motion'
57
import posthog from 'posthog-js'
68
import { useEffect, useState, Suspense } from 'react'
79

@@ -127,6 +129,143 @@ export default function Home() {
127129
</Section>
128130

129131
<div className={cn('transition-all duration-1000')}>
132+
{/* Visual divider between hero and comparison */}
133+
<div className="h-px bg-gradient-to-r from-transparent via-green-500/30 to-transparent"></div>
134+
135+
{/* Prominent Claude Code vs Codebuff Comparison - MOVED TO TOP */}
136+
<Section background={BlockColor.DarkForestGreen}>
137+
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
138+
<motion.div
139+
initial={{ opacity: 0, y: 20 }}
140+
whileInView={{ opacity: 1, y: 0 }}
141+
viewport={{ once: true, amount: 0.3 }}
142+
transition={{ duration: 0.6 }}
143+
className="space-y-8"
144+
>
145+
<div className="space-y-4">
146+
<div className="flex items-center justify-center gap-3 mb-4">
147+
<motion.div
148+
initial={{ opacity: 0, scale: 0.8 }}
149+
whileInView={{ opacity: 1, scale: 1 }}
150+
viewport={{ once: true }}
151+
transition={{ duration: 0.5, delay: 0.1 }}
152+
className="bg-gradient-to-r from-red-500 to-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold tracking-wider shadow-lg"
153+
>
154+
🆕 NEW
155+
</motion.div>
156+
<motion.div
157+
initial={{ opacity: 0, scale: 0.8 }}
158+
whileInView={{ opacity: 1, scale: 1 }}
159+
viewport={{ once: true }}
160+
transition={{ duration: 0.5, delay: 0.2 }}
161+
className="bg-green-500/20 border border-green-500/50 text-green-400 px-3 py-1 rounded-full text-sm font-semibold"
162+
>
163+
BENCHMARK RESULTS
164+
</motion.div>
165+
</div>
166+
<h2 className="text-4xl md:text-5xl font-bold text-white">
167+
BuffBench Results
168+
</h2>
169+
<p className="text-xl text-white/70 max-w-2xl mx-auto">
170+
State of the art coding agent evaluation using generated workflows and judging from open
171+
source repositories
172+
</p>
173+
</div>
174+
175+
<motion.div
176+
initial={{ opacity: 0, scale: 0.9 }}
177+
whileInView={{ opacity: 1, scale: 1 }}
178+
viewport={{ once: true, amount: 0.2 }}
179+
transition={{ duration: 0.7, delay: 0.2 }}
180+
className="relative"
181+
>
182+
<div className="bg-zinc-900/50 border-2 border-green-500/30 rounded-xl p-8 shadow-2xl shadow-green-500/10">
183+
<Image
184+
src="/codebuff-vs-claude-code.png"
185+
alt="Codebuff vs Claude Code Performance Comparison"
186+
width={800}
187+
height={600}
188+
className="rounded-lg mx-auto"
189+
priority
190+
/>
191+
</div>
192+
</motion.div>
193+
194+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
195+
<motion.div
196+
initial={{ opacity: 0, y: 20 }}
197+
whileInView={{ opacity: 1, y: 0 }}
198+
viewport={{ once: true }}
199+
transition={{ duration: 0.5, delay: 0.4 }}
200+
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
201+
>
202+
<div className="text-3xl font-bold text-green-400 mb-2">
203+
175+
204+
</div>
205+
<div className="text-white font-semibold mb-1">
206+
Real Tasks
207+
</div>
208+
<div className="text-white/60 text-sm">
209+
Git commit reconstruction from open source projects
210+
</div>
211+
</motion.div>
212+
213+
<motion.div
214+
initial={{ opacity: 0, y: 20 }}
215+
whileInView={{ opacity: 1, y: 0 }}
216+
viewport={{ once: true }}
217+
transition={{ duration: 0.5, delay: 0.6 }}
218+
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
219+
>
220+
<div className="text-3xl font-bold text-green-400 mb-2">
221+
5
222+
</div>
223+
<div className="text-white font-semibold mb-1">
224+
Turn Conversations
225+
</div>
226+
<div className="text-white/60 text-sm">
227+
Prompting agent simulates human for multiple turns
228+
</div>
229+
</motion.div>
230+
231+
<motion.div
232+
initial={{ opacity: 0, y: 20 }}
233+
whileInView={{ opacity: 1, y: 0 }}
234+
viewport={{ once: true }}
235+
transition={{ duration: 0.5, delay: 0.8 }}
236+
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
237+
>
238+
<div className="text-3xl font-bold text-green-400 mb-2">
239+
4D
240+
</div>
241+
<div className="text-white font-semibold mb-1">
242+
Scoring System
243+
</div>
244+
<div className="text-white/60 text-sm">
245+
Completion, efficiency, code quality, and overall scores
246+
</div>
247+
</motion.div>
248+
</div>
249+
250+
<div className="mt-8">
251+
<motion.a
252+
href="https://github.com/CodebuffAI/codebuff/tree/main/evals"
253+
target="_blank"
254+
rel="noopener noreferrer"
255+
initial={{ opacity: 0, y: 10 }}
256+
whileInView={{ opacity: 1, y: 0 }}
257+
viewport={{ once: true }}
258+
transition={{ duration: 0.5, delay: 1.0 }}
259+
className="inline-flex items-center gap-2 text-green-400 hover:text-green-300 transition-colors"
260+
>
261+
<span>View evaluation methodology</span>
262+
<span className="text-xs">↗</span>
263+
</motion.a>
264+
</div>
265+
</motion.div>
266+
</div>
267+
</Section>
268+
130269
<FeatureSection
131270
title={
132271
<>

0 commit comments

Comments
 (0)