Skip to content

Commit 942cae8

Browse files
kevinjosethomaskevinjosethomas
committed
feat: add beta blurb to landing
1 parent 1a975a6 commit 942cae8

1 file changed

Lines changed: 140 additions & 163 deletions

File tree

‎src/components/Home/HomeHero.tsx‎

Lines changed: 140 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from 'next/link'
22
import { motion } from 'framer-motion'
3-
import { useCallback, useContext, useEffect, useState } from 'react'
3+
import { Fragment, useCallback, useContext, useEffect, useState } from 'react'
44

55
import {
66
SunIcon,
@@ -142,214 +142,191 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
142142
}, [])
143143

144144
return (
145-
<div className="relative flex flex-col items-center justify-center gap-14 overflow-hidden pb-12 pt-16 md:pb-16 md:pt-36">
146-
<div className="z-10 flex w-full max-w-[1200px] flex-col items-center justify-center gap-10 p-4 text-left md:flex-row md:gap-20">
147-
<div className="flex w-full flex-col items-start justify-center gap-6 md:w-[40%] md:gap-8">
148-
<div className="flex flex-col gap-3 md:gap-4">
149-
<motion.h1
150-
className="text-4xl font-bold leading-tight md:text-5xl"
151-
initial={{ opacity: 0, y: -20 }}
152-
animate={{ opacity: 1, y: 0 }}
153-
transition={{ duration: 0.4, ease: 'easeOut' }}
154-
>
155-
A human-like chess engine
156-
</motion.h1>
157-
<motion.p
158-
className="text-xl text-primary/80 md:text-2xl"
159-
initial={{ opacity: 0, y: -10 }}
145+
<Fragment>
146+
<BetaBlurb />
147+
<div className="relative flex flex-col items-center justify-center gap-14 overflow-hidden pb-12 pt-8 md:pb-16 md:pt-20">
148+
<div className="z-10 flex w-full max-w-[1200px] flex-col items-center justify-center gap-10 p-4 text-left md:flex-row md:gap-20">
149+
<div className="flex w-full flex-col items-start justify-center gap-6 md:w-[40%] md:gap-8">
150+
<div className="flex flex-col gap-3 md:gap-4">
151+
<motion.h1
152+
className="text-4xl font-bold leading-tight md:text-5xl"
153+
initial={{ opacity: 0, y: -20 }}
154+
animate={{ opacity: 1, y: 0 }}
155+
transition={{ duration: 0.4, ease: 'easeOut' }}
156+
>
157+
A human-like chess engine
158+
</motion.h1>
159+
<motion.p
160+
className="text-xl text-primary/80 md:text-2xl"
161+
initial={{ opacity: 0, y: -10 }}
162+
animate={{ opacity: 1, y: 0 }}
163+
transition={{ duration: 0.4, delay: 0.1, ease: 'easeOut' }}
164+
>
165+
Maia is a neural network chess engine with a more human-like
166+
style, trained from online human games.
167+
</motion.p>
168+
</div>
169+
<motion.div
170+
className="flex flex-col gap-4 sm:flex-row"
171+
initial={{ opacity: 0, y: 10 }}
160172
animate={{ opacity: 1, y: 0 }}
161-
transition={{ duration: 0.4, delay: 0.1, ease: 'easeOut' }}
173+
transition={{ duration: 0.4, delay: 0.2, ease: 'easeOut' }}
162174
>
163-
Maia is a neural network chess engine with a more human-like
164-
style, trained from online human games.
165-
</motion.p>
166-
</div>
167-
<motion.div
168-
className="flex flex-col gap-4 sm:flex-row"
169-
initial={{ opacity: 0, y: 10 }}
170-
animate={{ opacity: 1, y: 0 }}
171-
transition={{ duration: 0.4, delay: 0.2, ease: 'easeOut' }}
172-
>
173-
<motion.button
174-
className="flex items-center justify-center gap-2 rounded-md bg-human-4 px-6 py-3 text-white hover:bg-opacity-90"
175-
onClick={scrollHandler}
176-
whileHover={{ scale: 1.05 }}
177-
whileTap={{ scale: 0.98 }}
178-
transition={{ duration: 0.2 }}
179-
>
180-
<p>Learn More</p>
181-
<i className="h-4">{ArrowIcon}</i>
182-
</motion.button>
183-
{!user?.lichessId && (
184175
<motion.button
185-
className="flex items-center justify-center gap-2 rounded-md border border-background-2 bg-background-1 px-6 py-3 hover:bg-background-2"
186-
onClick={() => connectLichess()}
176+
className="flex items-center justify-center gap-2 rounded-md bg-human-4 px-6 py-3 text-white hover:bg-opacity-90"
177+
onClick={scrollHandler}
187178
whileHover={{ scale: 1.05 }}
188179
whileTap={{ scale: 0.98 }}
189180
transition={{ duration: 0.2 }}
190181
>
191-
Connect with Lichess
182+
<p>Learn More</p>
183+
<i className="h-4">{ArrowIcon}</i>
192184
</motion.button>
193-
)}
194-
</motion.div>
195-
</div>
196-
<div className="grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-3">
197-
<FeatureCard
198-
icon={<RegularPlayIcon />}
199-
title="Play Maia"
200-
description="Play chess against the human-like Maia engine"
201-
{...(user?.lichessId
202-
? { onClick: () => startGame('againstMaia') }
203-
: { href: 'https://lichess.org/@/maia1', external: true })}
204-
index={0}
205-
/>
206-
<FeatureCard
207-
icon={<ChessboardIcon />}
208-
title="Analysis"
209-
description="Analyze games with Maia's human-like insights"
210-
href="/analysis"
211-
index={1}
212-
/>
213-
<FeatureCard
214-
icon={<TrainIcon />}
215-
title="Train"
216-
description="Improve your skills with Maia's training puzzles"
217-
href="/train"
218-
index={2}
219-
/>
220-
<FeatureCard
221-
icon={<TuringIcon />}
222-
title="Hand & Brain"
223-
description="Play a collaborative chess variant with Maia"
224-
onClick={() => startGame('handAndBrain')}
225-
index={3}
226-
/>
227-
<FeatureCard
228-
icon={<StarIcon />}
229-
title="Openings"
230-
description="Learn and practice chess openings with Maia"
231-
href="/openings"
232-
index={4}
233-
/>
234-
<FeatureCard
235-
icon={<TuringIcon />}
236-
title="Bot-or-Not"
237-
description="Distinguish between human and AI play"
238-
href="/turing"
239-
index={5}
240-
/>
185+
{!user?.lichessId && (
186+
<motion.button
187+
className="flex items-center justify-center gap-2 rounded-md border border-background-2 bg-background-1 px-6 py-3 hover:bg-background-2"
188+
onClick={() => connectLichess()}
189+
whileHover={{ scale: 1.05 }}
190+
whileTap={{ scale: 0.98 }}
191+
transition={{ duration: 0.2 }}
192+
>
193+
Connect with Lichess
194+
</motion.button>
195+
)}
196+
</motion.div>
197+
</div>
198+
<div className="grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-3">
199+
<FeatureCard
200+
icon={<RegularPlayIcon />}
201+
title="Play Maia"
202+
description="Play chess against the human-like Maia engine"
203+
{...(user?.lichessId
204+
? { onClick: () => startGame('againstMaia') }
205+
: { href: 'https://lichess.org/@/maia1', external: true })}
206+
index={0}
207+
/>
208+
<FeatureCard
209+
icon={<ChessboardIcon />}
210+
title="Analysis"
211+
description="Analyze games with Maia's human-like insights"
212+
href="/analysis"
213+
index={1}
214+
/>
215+
<FeatureCard
216+
icon={<TrainIcon />}
217+
title="Train"
218+
description="Improve your skills with Maia's training puzzles"
219+
href="/train"
220+
index={2}
221+
/>
222+
<FeatureCard
223+
icon={<TuringIcon />}
224+
title="Hand & Brain"
225+
description="Play a collaborative chess variant with Maia"
226+
onClick={() => startGame('handAndBrain')}
227+
index={3}
228+
/>
229+
<FeatureCard
230+
icon={<StarIcon />}
231+
title="Openings"
232+
description="Learn and practice chess openings with Maia"
233+
href="/openings"
234+
index={4}
235+
/>
236+
<FeatureCard
237+
icon={<TuringIcon />}
238+
title="Bot-or-Not"
239+
description="Distinguish between human and AI play"
240+
href="/turing"
241+
index={5}
242+
/>
243+
</div>
241244
</div>
245+
<motion.div
246+
className="grid grid-cols-3 gap-6 px-2 md:flex"
247+
initial={{ opacity: 0, y: 10 }}
248+
animate={{ opacity: 1, y: 0 }}
249+
transition={{ duration: 0.4, delay: 0.3 }}
250+
>
251+
<p className="text-center text-base text-primary/80">
252+
<AnimatedNumber
253+
value={globalStats?.play_moves_total || 0}
254+
className="font-bold"
255+
/>{' '}
256+
moves played
257+
</p>
258+
<p className="text-center text-base text-primary/80">
259+
<AnimatedNumber
260+
value={globalStats?.puzzle_games_total || 0}
261+
className="font-bold"
262+
/>{' '}
263+
puzzle games solved
264+
</p>
265+
<p className="text-center text-base text-primary/80">
266+
<AnimatedNumber
267+
value={globalStats?.turing_games_total || 0}
268+
className="font-bold"
269+
/>{' '}
270+
turing games played
271+
</p>
272+
</motion.div>
242273
</div>
243-
<motion.div
244-
className="grid grid-cols-3 gap-6 px-2 md:flex"
245-
initial={{ opacity: 0, y: 10 }}
246-
animate={{ opacity: 1, y: 0 }}
247-
transition={{ duration: 0.4, delay: 0.3 }}
248-
>
249-
<p className="text-center text-base text-primary/80">
250-
<AnimatedNumber
251-
value={globalStats?.play_moves_total || 0}
252-
className="font-bold"
253-
/>{' '}
254-
moves played
255-
</p>
256-
<p className="text-center text-base text-primary/80">
257-
<AnimatedNumber
258-
value={globalStats?.puzzle_games_total || 0}
259-
className="font-bold"
260-
/>{' '}
261-
puzzle games solved
262-
</p>
263-
<p className="text-center text-base text-primary/80">
264-
<AnimatedNumber
265-
value={globalStats?.turing_games_total || 0}
266-
className="font-bold"
267-
/>{' '}
268-
turing games played
269-
</p>
270-
</motion.div>
271-
</div>
274+
</Fragment>
272275
)
273276
}
274277

275278
function BetaBlurb() {
276279
const { user, connectLichess } = useContext(AuthContext)
277280

278281
return (
279-
<>
282+
<div className="mt-2 flex items-center justify-center md:mt-8">
280283
{user?.lichessId ? (
281284
<motion.div
282-
className="my-4 flex w-screen flex-col items-start bg-engine-1 p-3 transition md:mt-0 md:w-auto md:rounded"
285+
className="flex flex-row items-center gap-3 bg-human-4 p-2 px-6 transition md:mt-0 md:rounded-full"
283286
initial={{ opacity: 0, y: -10 }}
284287
animate={{ opacity: 1, y: 0 }}
285288
transition={{ duration: 0.4 }}
286289
>
287-
<div className="flex items-center gap-2">
288-
<div className="*:h-5 *:w-5">{SunIcon}</div>
289-
<p className="text-lg font-medium">Maia Chess is in private beta</p>
290-
</div>
291-
<p className="max-w-2xl text-left text-sm">
292-
You are logged in to the new Beta Maia Chess platform! Report any
293-
bugs using the Feedback form in the header, and{' '}
290+
<div className="*:h-5 *:w-5">{SunIcon}</div>
291+
<p>
292+
Maia Chess is in private beta. Join our Discord community{' '}
294293
<a
295294
target="_blank"
296295
rel="noreferrer"
297296
className="underline"
298297
href="https://discord.gg/Az93GqEAs7"
299298
>
300-
join our Discord
301-
</a>{' '}
302-
and stay tuned for our full release in the upcoming weeks.
299+
here
300+
</a>
301+
.
303302
</p>
304303
</motion.div>
305304
) : (
306305
<motion.div
307-
className="my-4 flex w-screen flex-col items-start bg-human-4 p-3 transition md:mt-0 md:w-auto md:rounded"
306+
className="flex flex-row items-center gap-3 bg-human-4 p-2 px-6 transition md:mt-0 md:rounded-full"
308307
initial={{ opacity: 0, y: -10 }}
309308
animate={{ opacity: 1, y: 0 }}
310309
transition={{ duration: 0.4 }}
311310
>
312-
<div className="flex items-center gap-2">
313-
<div className="*:h-5 *:w-5">{SunIcon}</div>
314-
<p className="text-lg font-medium">Maia Chess is in private beta</p>
315-
</div>
316-
<p className="max-w-4xl text-left text-sm">
317-
We are currently beta testing the new Maia Chess platform! If you
318-
were invited to test the Beta launch, please{' '}
319-
<button onClick={connectLichess} className="underline">
320-
sign in with Lichess
321-
</button>{' '}
322-
before proceeding. Otherwise, you can{' '}
311+
<div className="*:h-5 *:w-5">{SunIcon}</div>
312+
<p>
313+
Maia Chess is in private beta. Sign up{' '}
323314
<a
324315
target="_blank"
325316
rel="noreferrer"
326317
className="underline"
327318
href="https://forms.gle/VAUKap4uwMGXJH3N8"
328319
>
329-
sign up for the beta
320+
here
330321
</a>{' '}
331-
or play{' '}
332-
<a
333-
target="_blank"
334-
rel="noreferrer"
335-
className="underline"
336-
href="https://lichess.org/@/maia1"
337-
>
338-
Maia on Lichess
339-
</a>
340-
!{' '}
341-
<a
342-
target="_blank"
343-
rel="noreferrer"
344-
className="underline"
345-
href="https://discord.gg/Az93GqEAs7"
346-
>
347-
Join our Discord
348-
</a>{' '}
349-
and stay tuned for our full release in the upcoming weeks.
322+
and sign in with{' '}
323+
<button onClick={connectLichess} className="underline">
324+
Lichess
325+
</button>
326+
.
350327
</p>
351328
</motion.div>
352329
)}
353-
</>
330+
</div>
354331
)
355332
}

0 commit comments

Comments
 (0)