Skip to content

Commit 26491b8

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up landing
1 parent 5c9611e commit 26491b8

File tree

1 file changed

+93
-99
lines changed

1 file changed

+93
-99
lines changed

‎src/components/Home/HomeHero.tsx

Lines changed: 93 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from 'next/link'
2-
import { useCallback, useContext, useEffect, useState } from 'react'
2+
import { useCallback, useContext } from 'react'
33

44
import {
55
SunIcon,
@@ -8,9 +8,10 @@ import {
88
TuringIcon,
99
TrainIcon,
1010
RegularPlayIcon,
11+
ChessboardIcon,
12+
StarIcon,
1113
} from 'src/components/Icons/icons'
1214
import { PlayType } from 'src/types'
13-
import { getPlayerStats } from 'src/api/home'
1415
import { AuthContext, ModalContext } from 'src/contexts'
1516

1617
interface Props {
@@ -29,154 +30,147 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
2930

3031
const { user, connectLichess } = useContext(AuthContext)
3132

32-
const [stats, setStats] = useState({
33-
regularRating: 1500,
34-
handRating: 1500,
35-
brainRating: 1500,
36-
trainRating: 1500,
37-
botNotRating: 1500,
38-
})
39-
useEffect(() => {
40-
;(async () => {
41-
setStats(await getPlayerStats())
42-
})()
43-
}, [])
44-
45-
const profileContent = (
46-
<>
47-
<div className="flex flex-row items-center gap-2">
48-
<i className="*:h-7 *:w-7 *:fill-primary">{UserIcon}</i>
49-
<p>{user?.displayName || 'Guest'}</p>
50-
</div>
51-
{user?.lichessId ? (
52-
<div className="flex flex-row items-center gap-6">
53-
{[
54-
['Regular', stats.regularRating || '...'],
55-
['Hand', stats.handRating || '...'],
56-
['Brain', stats.brainRating || '...'],
57-
['Puzzles', stats.trainRating || '...'],
58-
['Bot/Not', stats.botNotRating || '...'],
59-
].map(([title, rating]) => (
60-
<div key={title} className="flex flex-col items-center gap-0.5">
61-
<div className="text-xs uppercase">{title}</div>
62-
<div className="text-xl">{rating}</div>
63-
</div>
64-
))}
65-
</div>
66-
) : (
67-
<div className="flex flex-col items-center justify-center">
68-
<button
69-
className="rounded-sm bg-[#629924] px-2 py-1 text-sm text-white transition duration-200 hover:bg-opacity-80"
70-
onClick={() => connectLichess()}
71-
>
72-
Connect with Lichess
73-
</button>
74-
<p className="text-sm">to save your stats and more!</p>
75-
</div>
76-
)}
77-
</>
78-
)
79-
8033
return (
81-
<div className="relative flex flex-col items-center justify-center">
82-
<BetaBlurb />
83-
<div className="flex w-full max-w-[1200px] flex-col items-center justify-center gap-16 p-4 text-left md:flex-row">
84-
<div className="flex w-full flex-col items-start justify-center gap-2 md:w-[40%]">
85-
<div className="flex flex-col">
86-
<h1 className="text-4xl font-bold leading-relaxed">
34+
<div className="relative flex flex-col items-center justify-center pb-16 pt-24 md:pb-28 md:pt-36">
35+
{/* <BetaBlurb /> */}
36+
<div className="flex w-full max-w-[1200px] flex-col items-center justify-center gap-16 p-4 text-left md:flex-row md:gap-20">
37+
<div className="flex w-full flex-col items-start justify-center gap-8 md:w-[40%]">
38+
<div className="flex flex-col gap-4">
39+
<h1 className="text-4xl font-bold leading-tight md:text-5xl">
8740
A human-like chess engine
8841
</h1>
89-
<p className="text-2xl">
42+
<p className="text-xl text-primary/80 md:text-2xl">
9043
Maia is a neural network chess engine with a more human-like
9144
style, trained from online human games.
9245
</p>
9346
</div>
94-
<button
95-
className="flex items-center gap-4 rounded-sm bg-background-2 px-4 py-3 hover:bg-human-4/30"
96-
onClick={scrollHandler}
97-
>
98-
<p>More about Maia</p>
99-
<i className="h-4">{ArrowIcon}</i>
100-
</button>
47+
<div className="flex flex-col gap-4 sm:flex-row">
48+
<button
49+
className="flex items-center justify-center gap-2 rounded-md bg-human-3 px-6 py-3 text-white transition duration-200 hover:bg-opacity-90"
50+
onClick={scrollHandler}
51+
>
52+
<p>Learn More</p>
53+
<i className="h-4">{ArrowIcon}</i>
54+
</button>
55+
{!user?.lichessId && (
56+
<button
57+
className="flex items-center justify-center gap-2 rounded-md border border-background-2 bg-background-1 px-6 py-3 transition duration-200 hover:bg-background-2"
58+
onClick={() => connectLichess()}
59+
>
60+
Connect with Lichess
61+
</button>
62+
)}
63+
</div>
10164
</div>
102-
<div className="grid w-full flex-1 grid-cols-1 gap-5 pb-4 md:w-auto md:grid-cols-2">
65+
66+
<div className="grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-3">
67+
{/* All boxes in a single grid */}
10368
{user?.lichessId ? (
10469
<button
10570
onClick={() => startGame('againstMaia')}
106-
className="flex cursor-pointer select-none flex-col items-center justify-center gap-2 rounded-sm border-none bg-[#7095c7] py-6 text-center text-white transition duration-200 hover:bg-opacity-80"
71+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
10772
>
108-
<i className="w-12">
73+
<i className="w-10">
10974
<RegularPlayIcon />
11075
</i>
11176
<div className="flex flex-col">
112-
<h2 className="text-xl font-bold">Play Maia</h2>
113-
<p className="text-xs">Classic chess versus human-like Maia</p>
77+
<h2 className="text-lg font-bold">Play Maia</h2>
78+
<p className="h-10 text-xs">
79+
Play chess against the human-like Maia engine
80+
</p>
11481
</div>
11582
</button>
11683
) : (
11784
<a
11885
href="https://lichess.org/@/maia1"
11986
target="_blank"
12087
rel="noreferrer"
121-
className="flex cursor-pointer select-none flex-col items-center justify-center gap-2 rounded-sm border-none bg-[#7095c7] py-6 text-center text-white transition duration-200 hover:bg-opacity-80"
88+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
12289
>
123-
<i className="w-12">
90+
<i className="w-10">
12491
<RegularPlayIcon />
12592
</i>
12693
<div className="flex flex-col">
127-
<h2 className="text-xl font-bold">Play Maia</h2>
128-
<p className="text-xs">Classic chess versus human-like Maia</p>
94+
<h2 className="text-lg font-bold">Play Maia</h2>
95+
<p className="h-10 text-xs">
96+
Play chess against the human-like Maia engine
97+
</p>
12998
</div>
13099
</a>
131100
)}
101+
<Link
102+
href="/analysis"
103+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
104+
>
105+
<i className="w-10">
106+
<ChessboardIcon />
107+
</i>
108+
<div className="flex flex-col">
109+
<h2 className="text-lg font-bold">Analysis</h2>
110+
<p className="h-10 text-xs">
111+
Analyze games with Maia&apos;s human-like insights
112+
</p>
113+
</div>
114+
</Link>
115+
<Link
116+
href="/train"
117+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
118+
>
119+
<i className="w-10">
120+
<TrainIcon />
121+
</i>
122+
<div className="flex flex-col">
123+
<h2 className="text-lg font-bold">Train</h2>
124+
<p className="h-10 text-xs">
125+
Improve your skills with Maia&apos;s training puzzles
126+
</p>
127+
</div>
128+
</Link>
129+
132130
<button
133131
onClick={() => startGame('handAndBrain')}
134-
className="flex cursor-pointer select-none flex-col items-center justify-center gap-2 rounded-sm border-none bg-[#6e879c] py-6 text-center text-white transition duration-200 hover:bg-opacity-80"
132+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
135133
>
136-
<i className="w-12">
134+
<i className="w-8">
137135
<TuringIcon />
138136
</i>
139137
<div className="flex flex-col">
140-
<h2 className="text-xl font-bold">Play Hand and Brain</h2>
141-
<p className="text-xs">A chess variant with Maia on your team</p>
138+
<h2 className="text-base font-bold">Hand &amp; Brain</h2>
139+
<p className="h-10 text-xs">
140+
Play a collaborative chess variant with Maia
141+
</p>
142142
</div>
143143
</button>
144+
144145
<Link
145-
href="/train"
146-
className="flex cursor-pointer select-none flex-col items-center justify-center gap-2 rounded-sm border-none bg-[#958a6d] py-6 text-center text-white transition duration-200 hover:bg-opacity-80"
146+
href="/openings"
147+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
147148
>
148-
<i className="w-12">
149-
<TrainIcon />
149+
<i className="w-8">
150+
<StarIcon />
150151
</i>
151152
<div className="flex flex-col">
152-
<h2 className="text-xl font-bold">Train</h2>
153-
<p className="text-xs">Solve puzzles with Maia</p>
153+
<h2 className="text-base font-bold">Openings</h2>
154+
<p className="h-10 text-xs">
155+
Learn and practice chess openings with Maia
156+
</p>
154157
</div>
155158
</Link>
159+
156160
<Link
157161
href="/turing"
158-
className="flex cursor-pointer select-none flex-col items-center justify-center gap-2 rounded-sm border-none bg-[#a3a6a1] py-6 text-center text-white transition duration-200 hover:bg-opacity-80"
162+
className="flex h-full min-h-[140px] cursor-pointer select-none flex-col items-center justify-center gap-3 rounded-md border-none bg-background-2 p-4 text-center transition duration-200 hover:bg-human-4/20"
159163
>
160-
<i className="w-12">
164+
<i className="w-8">
161165
<TuringIcon />
162166
</i>
163167
<div className="flex flex-col">
164-
<h2 className="text-xl font-bold">Bot-or-Not</h2>
165-
<p className="text-xs">Distinguish human from machine play</p>
168+
<h2 className="text-base font-bold">Bot-or-Not</h2>
169+
<p className="h-10 text-xs">
170+
Test your ability to distinguish human from AI play
171+
</p>
166172
</div>
167173
</Link>
168-
{user?.lichessId ? (
169-
<Link
170-
href="/profile"
171-
className="flex w-full flex-col items-start justify-between gap-4 rounded-sm bg-background-2 px-6 py-4 transition duration-200 hover:bg-human-4/20 md:col-span-2 md:h-20 md:flex-row md:items-center md:gap-0 md:py-0"
172-
>
173-
{profileContent}
174-
</Link>
175-
) : (
176-
<div className="flex w-full flex-row items-center justify-between rounded-sm bg-background-2 px-6 py-4 md:col-span-2 md:h-20 md:py-0">
177-
{profileContent}
178-
</div>
179-
)}
180174
</div>
181175
</div>
182176
</div>

0 commit comments

Comments
 (0)