Skip to content

Commit c569c5e

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up feature cards
1 parent 3166301 commit c569c5e

4 files changed

Lines changed: 69 additions & 72 deletions

File tree

‎src/components/Home/HomeHero.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ import {
66
trackLichessConnectionInitiated,
77
} from 'src/lib/analytics'
88

9-
import {
10-
BrainIcon,
11-
TrainIcon,
12-
RegularPlayIcon,
13-
ChessboardIcon,
14-
StarIcon,
15-
BotOrNotIcon,
16-
} from 'src/components/Common/Icons'
179
import { PlayType } from 'src/types'
1810
import { getGlobalStats, getActiveUserCount } from 'src/api'
1911
import { AuthContext, ModalContext } from 'src/contexts'
@@ -32,7 +24,7 @@ type FeatureKey =
3224
| 'bot_or_not'
3325

3426
interface FeatureCardProps {
35-
icon: React.ReactNode
27+
icon: string
3628
title: string
3729
description: string
3830
onClick?: () => void
@@ -49,7 +41,6 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
4941
onClick,
5042
href,
5143
external,
52-
index,
5344
featureKey,
5445
}) => {
5546
const { user } = useContext(AuthContext)
@@ -96,13 +87,17 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
9687

9788
return (
9889
<CardWrapper>
99-
<div className="group relative flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 overflow-hidden rounded-xl border border-white/10 bg-black/20 p-4 text-center backdrop-blur-sm transition-all duration-200 hover:border-white/15 hover:bg-black/30 md:min-h-[140px] md:flex-col md:justify-center md:gap-3">
100-
<div className="w-10 text-white/90 group-hover:text-white">{icon}</div>
90+
<div className="from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 group relative flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br p-4 text-center backdrop-blur-md transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-white/5 md:min-h-[140px] md:flex-col md:items-center md:justify-center md:gap-0">
91+
<div className="text-white/60 transition-colors duration-300 group-hover:text-white/90">
92+
<span className="material-symbols-outlined material-symbols-filled leading-0 text-6xl">
93+
{icon}
94+
</span>
95+
</div>
10196
<div className="flex flex-col items-start md:items-center">
102-
<h2 className="text-lg font-bold text-white/95 group-hover:text-white">
97+
<h2 className="text-lg font-bold text-white/95 transition-colors duration-300 group-hover:text-white">
10398
{title}
10499
</h2>
105-
<p className="text-xs text-white/70 group-hover:text-white/80">
100+
<p className="text-xs text-white/70 transition-colors duration-300 group-hover:text-white/85">
106101
{description}
107102
</p>
108103
</div>
@@ -208,48 +203,48 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
208203
</div>
209204
<div className="grid w-full flex-1 grid-cols-1 gap-2 md:grid-cols-3 md:gap-4">
210205
<FeatureCard
211-
icon={<RegularPlayIcon />}
206+
icon="chess_knight"
212207
title="Play Maia"
213208
description="Play chess against the human-like Maia engine"
214209
onClick={() => startGame('againstMaia')}
215210
index={0}
216211
featureKey="play_maia"
217212
/>
218213
<FeatureCard
219-
icon={<ChessboardIcon />}
214+
icon="network_intelligence"
220215
title="Analysis"
221216
description="Analyze games with Maia's human insights"
222217
href="/analysis"
223218
index={1}
224219
featureKey="analysis"
225220
/>
226221
<FeatureCard
227-
icon={<TrainIcon />}
222+
icon="toys_and_games"
228223
title="Puzzles"
229224
description="Improve your skills with Maia's training puzzles"
230225
href="/puzzles"
231226
index={2}
232227
featureKey="puzzles"
233228
/>
234229
<FeatureCard
235-
icon={<BrainIcon />}
230+
icon="network_intel_node"
236231
title="Hand & Brain"
237232
description="Play a collaborative chess variant with Maia"
238233
onClick={() => startGame('handAndBrain')}
239234
index={3}
240235
featureKey="hand_brain"
241236
/>
242237
<FeatureCard
243-
icon={<StarIcon />}
238+
icon="play_lesson"
244239
title="Openings"
245240
description="Learn and practice chess openings with Maia"
246241
href="/openings"
247242
index={4}
248243
featureKey="openings"
249244
/>
250245
<FeatureCard
251-
icon={<BotOrNotIcon />}
252-
title="Bot-or-Not"
246+
icon="mystery"
247+
title="Bot or Not"
253248
description="Distinguish between human and AI play"
254249
href="/turing"
255250
index={5}

‎src/components/Home/LiveChessBoardShowcase.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,25 +120,25 @@ export const LiveChessBoardShowcase: React.FC = () => {
120120
return (
121121
<div className="flex flex-col items-center">
122122
<motion.div
123-
className="relative inline-block h-[192px] w-[192px] cursor-pointer overflow-hidden rounded-lg transition-colors duration-200"
123+
className="relative inline-block h-[64px] w-[64px] cursor-pointer overflow-hidden rounded-lg transition-colors duration-200"
124124
initial={{ opacity: 0, scale: 0.95 }}
125125
animate={{ opacity: 1, scale: 1 }}
126126
transition={{ duration: 0.3 }}
127127
onClick={handleClick}
128128
>
129129
{/* Live indicator */}
130-
{liveGame?.isLive && (
130+
{/* {liveGame?.isLive && (
131131
<div className="absolute right-2 top-2 z-10 flex items-center gap-1 rounded-full bg-red-500 px-2 py-1">
132132
<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
133133
<span className="text-xs font-semibold text-white">LIVE</span>
134134
</div>
135-
)}
135+
)} */}
136136

137137
{/* Chess board */}
138138
<Chessground
139139
contained
140-
width={192}
141-
height={192}
140+
width={64}
141+
height={64}
142142
config={{
143143
fen: currentFen,
144144
viewOnly: true,

‎src/components/Home/LiveChessShowcase.tsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -30,38 +30,37 @@ const BroadcastWidget: React.FC<BroadcastWidgetProps> = ({ broadcast }) => {
3030
href={`/broadcast/${broadcast.tour.id}/${activeRound?.id || broadcast.rounds[0]?.id}`}
3131
className="w-full"
3232
>
33-
<div className="relative w-48 overflow-hidden rounded-lg border border-background-2 bg-background-1 transition-colors duration-200 hover:border-primary/40">
33+
<div className="relative w-36 overflow-hidden rounded-md border border-white/10 bg-black/20 backdrop-blur-sm transition-all duration-200 hover:border-white/20 hover:bg-black/30">
3434
{/* Header */}
35-
<div className="flex items-center justify-between border-b border-background-2 px-3 py-2">
36-
<h4 className="line-clamp-1 text-[13px] font-semibold text-primary">
35+
<div className="flex items-center justify-between border-b border-white/10 px-2 py-1.5">
36+
<h4 className="line-clamp-1 text-[10px] font-semibold text-white/95">
3737
{broadcast.tour.name}
3838
</h4>
3939
{activeRound?.ongoing && (
40-
<div className="flex items-center gap-1 rounded-full bg-red-500/90 px-2 py-0.5">
41-
<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
42-
<span className="text-[10px] font-semibold text-white">
40+
<div className="flex items-center gap-0.5 rounded-full bg-red-500/90 px-1 py-0.5">
41+
<span className="h-0.5 w-0.5 animate-pulse rounded-full bg-white" />
42+
<span className="text-[8px] font-semibold text-white">
4343
LIVE
4444
</span>
4545
</div>
4646
)}
4747
</div>
4848

4949
{/* Body */}
50-
<div className="flex h-28 flex-col justify-between px-3 py-2">
50+
<div className="flex h-12 flex-col justify-between px-2 py-1.5">
5151
<div>
5252
<p
53-
className="line-clamp-1 text-xs text-secondary"
53+
className="line-clamp-1 text-[10px] text-white/70"
5454
title={activeRound?.name}
5555
>
5656
{activeRound?.name}
5757
</p>
58-
{/* Placeholder meta; could be expanded when we parse PGN/game counts */}
59-
<p className="mt-1 text-[11px] text-primary/70">Ongoing round</p>
58+
<p className="text-[8px] text-white/50">Ongoing round</p>
6059
</div>
6160

62-
<div className="flex items-center justify-end gap-1">
63-
<span className="text-[11px] text-human-4">View</span>
64-
<span className="material-symbols-outlined text-sm text-human-4">
61+
<div className="flex items-center justify-end gap-0.5">
62+
<span className="text-[8px] text-white/60">View</span>
63+
<span className="material-symbols-outlined text-xs text-white/60">
6564
chevron_right
6665
</span>
6766
</div>
@@ -124,66 +123,69 @@ export const LiveChessShowcase: React.FC = () => {
124123
}, [fetchBroadcasts])
125124

126125
return (
127-
<section className="bg-background-2 py-4">
128-
<div className="container mx-auto px-4">
129-
<div className="mb-4 flex flex-col items-center justify-between gap-4 lg:flex-row lg:items-center">
130-
{/* Header on the left */}
131-
<div className="text-center lg:text-left">
132-
<h2 className="mb-1 text-2xl font-bold text-primary">Live Chess</h2>
133-
<p className="text-secondary">
126+
<section className="relative py-3">
127+
{/* Glass morphism background */}
128+
<div className="absolute inset-0 border-y border-white/10 bg-black/10 backdrop-blur-sm" />
129+
130+
<div className="relative mx-auto max-w-4xl px-4">
131+
<div className="flex flex-col items-center gap-4">
132+
{/* Centered header */}
133+
<div className="text-center">
134+
<h2 className="text-lg font-bold text-white/95">Live Chess</h2>
135+
<p className="text-xs text-white/70">
134136
Watch live games and tournaments with real-time Maia AI analysis
135137
</p>
136138
</div>
137139

138-
{/* Live content on the right */}
139-
<div className="flex items-start gap-4 sm:flex-row sm:items-start sm:gap-6">
140+
{/* Centered live content */}
141+
<div className="flex items-center gap-8">
140142
{/* Live Lichess TV Game */}
141143
<div className="flex flex-col items-center">
142-
<h3 className="mb-2 text-base font-semibold text-primary">
144+
<h3 className="mb-2 text-xs font-medium text-white/80">
143145
Maia TV
144146
</h3>
145-
<LiveChessBoardShowcase />
147+
<div className="rounded-md border border-white/10 bg-black/20 p-1.5 backdrop-blur-sm">
148+
<LiveChessBoardShowcase />
149+
</div>
146150
</div>
147151

148152
{/* Top Live Broadcasts */}
149153
{isLoading ? (
150154
<div className="flex flex-col items-center">
151-
<h3 className="mb-2 text-base font-semibold text-primary">
155+
<h3 className="mb-2 text-xs font-medium text-white/80">
152156
Live Tournament
153157
</h3>
154158
<motion.div
155-
className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
159+
className="flex h-[80px] w-36 flex-col items-center justify-center rounded-md border border-white/10 bg-black/20 backdrop-blur-sm"
156160
initial={{ opacity: 0 }}
157161
animate={{ opacity: 1 }}
158162
>
159-
<div className="flex flex-col items-center gap-2 text-center">
160-
<span className="material-symbols-outlined animate-pulse text-2xl text-secondary">
163+
<div className="flex flex-col items-center gap-1 text-center">
164+
<span className="material-symbols-outlined animate-pulse text-lg text-white/60">
161165
stadia_controller
162166
</span>
163-
<p className="px-3 text-xs text-secondary">
164-
Loading tournaments...
165-
</p>
167+
<p className="px-2 text-[10px] text-white/70">Loading...</p>
166168
</div>
167169
</motion.div>
168170
</div>
169171
) : error ? (
170172
<div className="flex flex-col items-center">
171-
<h3 className="mb-2 text-base font-semibold text-primary">
173+
<h3 className="mb-2 text-xs font-medium text-white/80">
172174
Live Tournament
173175
</h3>
174176
<motion.div
175-
className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
177+
className="flex h-[80px] w-36 flex-col items-center justify-center rounded-md border border-white/10 bg-black/20 backdrop-blur-sm"
176178
initial={{ opacity: 0 }}
177179
animate={{ opacity: 1 }}
178180
>
179-
<div className="flex flex-col items-center gap-2 text-center">
180-
<span className="material-symbols-outlined text-2xl text-red-400">
181+
<div className="flex flex-col items-center gap-1 text-center">
182+
<span className="material-symbols-outlined text-lg text-red-400/80">
181183
error
182184
</span>
183-
<p className="px-3 text-xs text-secondary">{error}</p>
185+
<p className="px-2 text-[10px] text-white/70">Error</p>
184186
<button
185187
onClick={fetchBroadcasts}
186-
className="text-xs font-medium text-human-4 hover:underline"
188+
className="text-[9px] font-medium text-white/60 transition-colors hover:text-white/80 hover:underline"
187189
>
188190
Retry
189191
</button>
@@ -192,31 +194,31 @@ export const LiveChessShowcase: React.FC = () => {
192194
</div>
193195
) : topBroadcasts.length > 0 ? (
194196
<div className="flex flex-col items-center">
195-
<h3 className="mb-2 text-base font-semibold text-primary">
197+
<h3 className="mb-2 text-xs font-medium text-white/80">
196198
Live Tournament
197199
</h3>
198200
<BroadcastWidget broadcast={topBroadcasts[0]} />
199201
</div>
200202
) : (
201203
<div className="flex flex-col items-center">
202-
<h3 className="mb-2 text-base font-semibold text-primary">
204+
<h3 className="mb-2 text-xs font-medium text-white/80">
203205
Live Tournament
204206
</h3>
205207
<motion.div
206-
className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
208+
className="flex h-[80px] w-36 flex-col items-center justify-center rounded-md border border-white/10 bg-black/20 backdrop-blur-sm"
207209
initial={{ opacity: 0 }}
208210
animate={{ opacity: 1 }}
209211
>
210-
<div className="flex flex-col items-center gap-2 text-center">
211-
<span className="material-symbols-outlined text-xl text-secondary">
212+
<div className="flex flex-col items-center gap-1 text-center">
213+
<span className="material-symbols-outlined text-base text-white/60">
212214
stadia_controller
213215
</span>
214-
<p className="px-3 text-xs text-secondary">
215-
No live tournaments
216+
<p className="px-2 text-[10px] text-white/70">
217+
No tournaments
216218
</p>
217219
<Link
218220
href="/broadcast"
219-
className="text-xs font-medium text-engine-4 hover:underline"
221+
className="text-[9px] font-medium text-white/60 transition-colors hover:text-white/80 hover:underline"
220222
>
221223
View all
222224
</Link>

‎src/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Home: NextPage = () => {
4141
/>
4242
</Head>
4343
<HomeHero scrollHandler={scrollHandler} />
44-
<LiveChessShowcase />
44+
{/* <LiveChessShowcase /> */}
4545
<PageNavigation />
4646
<div ref={featuresRef}>
4747
<div className="bg-background-1">

0 commit comments

Comments
 (0)