Skip to content

Commit 0d4865f

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Update website design
Update website to a super minimal black and white design with accent colors for numerical data.
1 parent 7a629d2 commit 0d4865f

8 files changed

Lines changed: 90 additions & 135 deletions

File tree

‎src/components/Leaderboard.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ const getRankBadgeVariant = (rank: number) => {
7777

7878
const Leaderboard = () => {
7979
return (
80-
<Card className="bg-gradient-card border-border/20 shadow-elevation">
81-
<div className="p-6 border-b border-border/20">
80+
<Card className="bg-card border shadow-sm">
81+
<div className="p-6 border-b border-border">
8282
<div className="flex items-center justify-between">
8383
<div>
84-
<h2 className="text-2xl font-bold text-foreground">Official Leaderboard</h2>
85-
<p className="text-muted-foreground">Top performing models in Balatro gameplay</p>
84+
<h2 className="text-2xl font-bold text-foreground">Community Leaderboard</h2>
85+
<p className="text-muted-foreground">Top performing models in Balatro benchmarks</p>
8686
</div>
87-
<Button variant="outline" className="border-border/40">
87+
<Button variant="outline">
8888
View All Results
8989
</Button>
9090
</div>
@@ -93,7 +93,7 @@ const Leaderboard = () => {
9393
<div className="overflow-x-auto">
9494
<Table>
9595
<TableHeader>
96-
<TableRow className="border-border/20 hover:bg-muted/30">
96+
<TableRow className="border-b hover:bg-muted/50">
9797
<TableHead className="text-muted-foreground">Rank</TableHead>
9898
<TableHead className="text-muted-foreground">Model</TableHead>
9999
<TableHead className="text-center text-muted-foreground">Avg Ante</TableHead>
@@ -108,7 +108,7 @@ const Leaderboard = () => {
108108
{mockData.map((entry) => (
109109
<TableRow
110110
key={entry.rank}
111-
className="border-border/20 hover:bg-muted/20 transition-colors"
111+
className="border-b hover:bg-muted/30 transition-colors"
112112
>
113113
<TableCell>
114114
<Badge variant={getRankBadgeVariant(entry.rank)} className="w-8 h-8 rounded-full flex items-center justify-center">
@@ -122,19 +122,19 @@ const Leaderboard = () => {
122122
</div>
123123
</TableCell>
124124
<TableCell className="text-center">
125-
<span className="font-mono text-primary font-bold">{entry.avgAnte}</span>
125+
<span className="font-mono text-accent font-bold">{entry.avgAnte}</span>
126126
</TableCell>
127127
<TableCell className="text-center">
128-
<span className="font-mono text-success font-bold">{entry.winRate}%</span>
128+
<span className="font-mono text-accent font-bold">{entry.winRate}%</span>
129129
</TableCell>
130130
<TableCell className="text-center">
131131
<span className="font-mono text-accent font-bold">{entry.avgScore.toLocaleString()}</span>
132132
</TableCell>
133133
<TableCell className="text-center">
134-
<span className="font-mono text-secondary font-bold">{entry.tokenEfficiency}</span>
134+
<span className="font-mono text-accent font-bold">{entry.tokenEfficiency}</span>
135135
</TableCell>
136136
<TableCell className="text-center">
137-
<span className="font-mono text-warning font-bold">${entry.costPerGame}</span>
137+
<span className="font-mono text-accent font-bold">${entry.costPerGame}</span>
138138
</TableCell>
139139
<TableCell className="text-center text-xs text-muted-foreground">
140140
{entry.lastUpdated}

‎src/components/Navigation.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ const Navigation = () => {
88
const isActive = (path: string) => location.pathname === path;
99

1010
return (
11-
<Card className="bg-gradient-card border-border/20 shadow-card mb-8">
11+
<Card className="bg-card border-border shadow-card mb-8">
1212
<nav className="flex items-center justify-between px-6 py-4">
13-
<div className="flex items-center space-x-2">
14-
<div className="w-8 h-8 bg-gradient-primary rounded-lg flex items-center justify-center shadow-glow-primary">
13+
<div className="flex items-center space-x-3">
14+
<div className="w-8 h-8 bg-primary rounded flex items-center justify-center">
1515
<span className="text-primary-foreground font-bold text-sm">B</span>
1616
</div>
17-
<h1 className="text-2xl font-bold bg-gradient-primary bg-clip-text text-transparent">
17+
<h1 className="text-2xl font-bold text-foreground">
1818
BalatroBench
1919
</h1>
2020
</div>
@@ -38,7 +38,7 @@ const Navigation = () => {
3838

3939
<div className="flex items-center space-x-2">
4040
<Button
41-
className="bg-gradient-primary hover:shadow-glow-primary"
41+
className="bg-primary hover:bg-primary/90"
4242
asChild
4343
>
4444
<Link to="/submit">Submit Run</Link>

‎src/components/StatsCard.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ const StatsCard = ({
4747

4848
return (
4949
<Card className={cn(
50-
"bg-gradient-card shadow-card hover:shadow-elevation transition-all duration-300",
51-
getVariantStyles(),
50+
"bg-card border shadow-sm hover:shadow-md transition-all duration-200",
5251
className
5352
)}>
5453
<div className="p-6">
@@ -60,7 +59,7 @@ const StatsCard = ({
6059
</Badge>
6160
)}
6261
</div>
63-
<div className="text-2xl font-bold text-foreground mb-1">{value}</div>
62+
<div className="text-2xl font-bold text-accent mb-1">{value}</div>
6463
{subtitle && (
6564
<p className="text-xs text-muted-foreground">{subtitle}</p>
6665
)}

‎src/index.css‎

Lines changed: 62 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,94 +2,75 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
/* BalatroLLM Design System - Neon cyberpunk aesthetic with professional data visualization
6-
All colors MUST be HSL.
7-
*/
5+
/* BalatroBench - Super minimal black and white design system */
86

97
@layer base {
108
:root {
11-
/* Core backgrounds - Deep space blues */
12-
--background: 222 84% 5%;
13-
--foreground: 210 40% 98%;
14-
15-
/* Card system - Subtle elevation with glow potential */
16-
--card: 222 47% 11%;
17-
--card-foreground: 210 40% 95%;
18-
19-
/* Interactive elements */
20-
--popover: 222 47% 11%;
21-
--popover-foreground: 210 40% 95%;
22-
23-
/* Brand colors - Balatro inspired */
24-
--primary: 270 100% 80%;
25-
--primary-foreground: 222 84% 5%;
26-
27-
/* Secondary - Neon green accent */
28-
--secondary: 150 100% 50%;
29-
--secondary-foreground: 222 84% 5%;
30-
31-
/* Muted elements */
32-
--muted: 222 47% 15%;
33-
--muted-foreground: 210 20% 65%;
34-
35-
/* Accent - Neon pink/magenta */
36-
--accent: 320 100% 70%;
37-
--accent-foreground: 222 84% 5%;
38-
39-
/* Status colors */
40-
--destructive: 0 100% 60%;
41-
--destructive-foreground: 210 40% 98%;
42-
43-
--success: 150 100% 50%;
44-
--success-foreground: 222 84% 5%;
45-
46-
--warning: 45 100% 60%;
47-
--warning-foreground: 222 84% 5%;
48-
49-
/* Borders and inputs */
50-
--border: 222 47% 20%;
51-
--input: 222 47% 15%;
52-
--ring: 270 100% 80%;
53-
54-
--radius: 0.75rem;
55-
56-
/* Custom gradients for BalatroLLM */
57-
--gradient-primary: linear-gradient(135deg, hsl(270 100% 80%), hsl(320 100% 70%));
58-
--gradient-secondary: linear-gradient(135deg, hsl(150 100% 50%), hsl(180 100% 50%));
59-
--gradient-background: linear-gradient(135deg, hsl(222 84% 5%), hsl(222 47% 11%));
60-
--gradient-card: linear-gradient(135deg, hsl(222 47% 11%), hsl(222 47% 15%));
61-
62-
/* Glow effects */
63-
--glow-primary: 0 0 20px hsl(270 100% 80% / 0.3);
64-
--glow-secondary: 0 0 20px hsl(150 100% 50% / 0.3);
65-
--glow-accent: 0 0 20px hsl(320 100% 70% / 0.3);
66-
67-
/* Enhanced shadows */
68-
--shadow-card: 0 8px 32px hsl(222 84% 5% / 0.8);
69-
--shadow-elevation: 0 16px 48px hsl(222 84% 5% / 0.9);
70-
71-
/* Transitions */
72-
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
73-
--transition-glow: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
74-
9+
/* Light mode - Clean minimal design */
10+
--background: 0 0% 100%;
11+
--foreground: 0 0% 5%;
12+
--card: 0 0% 100%;
13+
--card-foreground: 0 0% 5%;
14+
--popover: 0 0% 100%;
15+
--popover-foreground: 0 0% 5%;
16+
--primary: 0 0% 5%;
17+
--primary-foreground: 0 0% 98%;
18+
--secondary: 0 0% 97%;
19+
--secondary-foreground: 0 0% 5%;
20+
--muted: 0 0% 96%;
21+
--muted-foreground: 0 0% 40%;
22+
--accent: 220 100% 50%; /* Blue accent for numbers */
23+
--accent-foreground: 0 0% 98%;
24+
--destructive: 0 84% 60%;
25+
--destructive-foreground: 0 0% 98%;
26+
--border: 0 0% 90%;
27+
--input: 0 0% 96%;
28+
--ring: 220 100% 50%;
29+
--radius: 0.375rem;
30+
31+
/* Sidebar */
7532
--sidebar-background: 0 0% 98%;
76-
77-
--sidebar-foreground: 240 5.3% 26.1%;
78-
79-
--sidebar-primary: 240 5.9% 10%;
80-
33+
--sidebar-foreground: 0 0% 5%;
34+
--sidebar-primary: 0 0% 5%;
8135
--sidebar-primary-foreground: 0 0% 98%;
82-
83-
--sidebar-accent: 240 4.8% 95.9%;
84-
85-
--sidebar-accent-foreground: 240 5.9% 10%;
86-
87-
--sidebar-border: 220 13% 91%;
88-
89-
--sidebar-ring: 217.2 91.2% 59.8%;
36+
--sidebar-accent: 0 0% 96%;
37+
--sidebar-accent-foreground: 0 0% 5%;
38+
--sidebar-border: 0 0% 90%;
39+
--sidebar-ring: 220 100% 50%;
9040
}
9141

92-
/* Remove conflicting dark mode - BalatroLLM uses dark theme by default */
42+
.dark {
43+
/* Dark mode - Clean minimal design */
44+
--background: 0 0% 5%;
45+
--foreground: 0 0% 95%;
46+
--card: 0 0% 8%;
47+
--card-foreground: 0 0% 95%;
48+
--popover: 0 0% 5%;
49+
--popover-foreground: 0 0% 95%;
50+
--primary: 0 0% 95%;
51+
--primary-foreground: 0 0% 5%;
52+
--secondary: 0 0% 10%;
53+
--secondary-foreground: 0 0% 95%;
54+
--muted: 0 0% 12%;
55+
--muted-foreground: 0 0% 60%;
56+
--accent: 220 100% 60%; /* Blue accent for numbers */
57+
--accent-foreground: 0 0% 5%;
58+
--destructive: 0 62% 50%;
59+
--destructive-foreground: 0 0% 98%;
60+
--border: 0 0% 15%;
61+
--input: 0 0% 12%;
62+
--ring: 220 100% 60%;
63+
64+
/* Sidebar */
65+
--sidebar-background: 0 0% 8%;
66+
--sidebar-foreground: 0 0% 95%;
67+
--sidebar-primary: 0 0% 95%;
68+
--sidebar-primary-foreground: 0 0% 5%;
69+
--sidebar-accent: 0 0% 12%;
70+
--sidebar-accent-foreground: 0 0% 95%;
71+
--sidebar-border: 0 0% 15%;
72+
--sidebar-ring: 220 100% 60%;
73+
}
9374
}
9475

9576
@layer base {

‎src/pages/Community.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Community = () => {
3838
];
3939

4040
return (
41-
<div className="min-h-screen bg-gradient-background">
41+
<div className="min-h-screen bg-background">
4242
<div className="container mx-auto px-4 py-8">
4343
<Navigation />
4444

‎src/pages/OfficialBenchmark.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import StatsCard from "@/components/StatsCard";
44

55
const OfficialBenchmark = () => {
66
return (
7-
<div className="min-h-screen bg-gradient-background">
7+
<div className="min-h-screen bg-background">
88
<div className="container mx-auto px-4 py-8">
99
<Navigation />
1010

1111
<div className="mb-8">
12-
<h1 className="text-4xl font-bold bg-gradient-primary bg-clip-text text-transparent mb-4">
12+
<h1 className="text-4xl font-bold text-foreground mb-4">
1313
BalatroBench
1414
</h1>
1515
<p className="text-muted-foreground text-lg max-w-3xl">
@@ -48,7 +48,7 @@ const OfficialBenchmark = () => {
4848

4949
<Leaderboard />
5050

51-
<div className="mt-12 bg-gradient-card rounded-xl p-8 border border-border/20">
51+
<div className="mt-12 bg-card rounded-lg p-8 border border-border">
5252
<h2 className="text-2xl font-bold mb-4">Methodology</h2>
5353
<div className="grid md:grid-cols-2 gap-6 text-muted-foreground">
5454
<div>

‎src/pages/SubmitRun.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import { Upload } from "lucide-react";
88

99
const SubmitRun = () => {
1010
return (
11-
<div className="min-h-screen bg-gradient-background">
11+
<div className="min-h-screen bg-background">
1212
<div className="container mx-auto px-4 py-8">
1313
<Navigation />
1414

1515
<div className="mb-8">
16-
<h1 className="text-4xl font-bold bg-gradient-primary bg-clip-text text-transparent mb-4">
16+
<h1 className="text-4xl font-bold text-foreground mb-4">
1717
Submit Custom Run
1818
</h1>
1919
<p className="text-muted-foreground text-lg max-w-3xl">
@@ -23,7 +23,7 @@ const SubmitRun = () => {
2323

2424
<div className="grid lg:grid-cols-3 gap-8">
2525
<div className="lg:col-span-2">
26-
<Card className="bg-gradient-card border-border/20 shadow-card">
26+
<Card className="bg-card border shadow-sm">
2727
<CardHeader>
2828
<CardTitle>Custom Benchmark Run</CardTitle>
2929
<CardDescription>
@@ -33,7 +33,7 @@ const SubmitRun = () => {
3333
<CardContent className="space-y-6">
3434
<div className="space-y-2">
3535
<Label htmlFor="strategy-file">Strategy File (STRATEGY.md)</Label>
36-
<div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-primary/50 transition-colors cursor-pointer">
36+
<div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accent/50 transition-colors cursor-pointer">
3737
<Upload className="mx-auto h-8 w-8 text-muted-foreground mb-2" />
3838
<p className="text-sm text-muted-foreground">
3939
Click to upload or drag and drop your STRATEGY.md file
@@ -86,7 +86,7 @@ const SubmitRun = () => {
8686
</Label>
8787
</div>
8888

89-
<Button className="w-full bg-gradient-primary hover:shadow-glow-primary">
89+
<Button className="w-full bg-primary hover:bg-primary/90">
9090
Start Benchmark Run
9191
</Button>
9292
</CardContent>

‎tailwind.config.ts‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@ export default {
3636
DEFAULT: 'hsl(var(--destructive))',
3737
foreground: 'hsl(var(--destructive-foreground))'
3838
},
39-
success: {
40-
DEFAULT: 'hsl(var(--success))',
41-
foreground: 'hsl(var(--success-foreground))'
42-
},
43-
warning: {
44-
DEFAULT: 'hsl(var(--warning))',
45-
foreground: 'hsl(var(--warning-foreground))'
46-
},
4739
muted: {
4840
DEFAULT: 'hsl(var(--muted))',
4941
foreground: 'hsl(var(--muted-foreground))'
@@ -71,23 +63,6 @@ export default {
7163
ring: 'hsl(var(--sidebar-ring))'
7264
}
7365
},
74-
backgroundImage: {
75-
'gradient-primary': 'var(--gradient-primary)',
76-
'gradient-secondary': 'var(--gradient-secondary)',
77-
'gradient-background': 'var(--gradient-background)',
78-
'gradient-card': 'var(--gradient-card)'
79-
},
80-
boxShadow: {
81-
'card': 'var(--shadow-card)',
82-
'elevation': 'var(--shadow-elevation)',
83-
'glow-primary': 'var(--glow-primary)',
84-
'glow-secondary': 'var(--glow-secondary)',
85-
'glow-accent': 'var(--glow-accent)'
86-
},
87-
transitionProperty: {
88-
'smooth': 'var(--transition-smooth)',
89-
'glow': 'var(--transition-glow)'
90-
},
9166
borderRadius: {
9267
lg: 'var(--radius)',
9368
md: 'calc(var(--radius) - 2px)',
@@ -118,4 +93,4 @@ export default {
11893
}
11994
},
12095
plugins: [require("tailwindcss-animate")],
121-
} satisfies Config;
96+
} satisfies Config;

0 commit comments

Comments
 (0)
⚡