Skip to content

Commit 035fad1

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign landing page
1 parent 9135dd4 commit 035fad1

7 files changed

Lines changed: 63 additions & 27 deletions

File tree

‎src/components/Home/AboutMaia.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const teamMembers = [
4646
image: '/assets/team/kevin.jpg',
4747
name: 'Kevin Thomas',
4848
website: 'https://kevinjosethomas.com/',
49-
institution: 'Burnaby South Secondary',
49+
institution: 'University of Waterloo',
5050
role: 'Web Developer',
5151
github: 'kevinjosethomas',
5252
},

‎src/components/Home/PageNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
33
export const PageNavigation = () => {
44
return (
55
<motion.div
6-
className="sticky top-0 z-20 flex flex-row flex-wrap items-center justify-center gap-3 border-y border-background-3/20 bg-background-2 px-3 py-4 text-sm uppercase tracking-wider backdrop-blur-md md:gap-6"
6+
className="sticky top-0 z-20 flex flex-row flex-wrap items-center justify-center gap-3 border-b border-t border-white/10 bg-black px-3 py-4 text-sm uppercase tracking-wider md:gap-6"
77
initial={{ opacity: 0 }}
88
animate={{ opacity: 1 }}
99
transition={{ duration: 0.3 }}

‎src/components/Home/Sections/AdditionalFeaturesSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const FeatureCard = ({
6969

7070
return (
7171
<motion.div
72-
className="flex flex-col overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform duration-200"
72+
className="from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md transition-all duration-200 hover:border-white/20"
7373
variants={variants}
7474
>
7575
<div className="flex flex-col p-5">
@@ -169,7 +169,7 @@ export const AdditionalFeaturesSection = ({
169169
return (
170170
<section
171171
id={id}
172-
className="relative w-full flex-col items-center overflow-hidden bg-background-1 py-10 md:py-16"
172+
className="relative w-full flex-col items-center overflow-hidden bg-transparent py-10 md:py-16"
173173
ref={ref}
174174
>
175175
<div className="mx-auto flex w-full max-w-[95%] flex-col px-2 md:max-w-[90%] md:px-4">

‎src/components/Home/Sections/AnalysisSection.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
216216
return (
217217
<section
218218
id={id}
219-
className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-6 md:py-8"
219+
className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-transparent py-6 md:py-8"
220220
ref={ref}
221221
>
222222
<div className="mx-auto flex w-full max-w-[95%] flex-col-reverse items-center px-2 md:max-w-[90%] md:flex-row md:gap-8 md:px-4 lg:gap-12">
@@ -226,27 +226,27 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
226226
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
227227
transition={{ duration: 0.4, ease: 'easeOut' }}
228228
>
229-
<div className="relative w-full overflow-hidden rounded-lg border border-background-3/20 bg-background-2 shadow-xl">
229+
<div className="relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
230230
<div className="flex flex-col gap-3 p-3">
231231
<div className="flex flex-col gap-3 md:flex-row">
232232
<div className="flex flex-col md:w-1/2">
233-
<div className="flex flex-col overflow-hidden rounded border border-white/10">
234-
<div className="w-full rounded-t-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
233+
<div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
234+
<div className="w-full rounded-t-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
235235
Spassky, Boris V.
236236
</div>
237237
<div className="relative aspect-square w-full">
238238
<div className="aspect-square h-full w-full">
239239
<AnalysisChessboard forceKey={renderKey} />
240240
</div>
241241
</div>
242-
<div className="rounded-b-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
242+
<div className="rounded-b-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
243243
Petrosian, Tigran V
244244
</div>
245245
</div>
246246
</div>
247247
<div className="flex flex-col gap-3 md:w-1/2">
248248
<motion.div
249-
className="min-h-0 flex-1 overflow-hidden rounded border border-white/10"
249+
className="min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
250250
initial={{ opacity: 0, y: 20 }}
251251
animate={
252252
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -274,7 +274,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
274274
/>
275275
</motion.div>
276276
<motion.div
277-
className="flex-shrink-0 overflow-hidden rounded border border-white/10"
277+
className="flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
278278
initial={{ opacity: 0, y: 20 }}
279279
animate={
280280
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -294,7 +294,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
294294
}
295295
transition={{ duration: 0.3, delay: 0.6 }}
296296
>
297-
<div className="h-full w-full overflow-hidden rounded border border-white/10 bg-background-1/60">
297+
<div className="h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
298298
<MovesByRating
299299
moves={analysisMockData.movesByRating}
300300
colorSanMapping={analysisMockData.colorSanMapping}
@@ -303,7 +303,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
303303
</div>
304304
</motion.div>
305305
<motion.div
306-
className="h-64 overflow-hidden rounded border border-white/10 md:w-1/2"
306+
className="h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md md:w-1/2"
307307
initial={{ opacity: 0, y: 20 }}
308308
animate={
309309
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }

‎src/components/Home/Sections/PlaySection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
4747
return (
4848
<section
4949
id={id}
50-
className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-10 md:py-16"
50+
className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-transparent py-10 md:py-16"
5151
ref={ref}
5252
>
5353
<div className="mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
@@ -84,11 +84,11 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
8484
transition={{ duration: 0.4, ease: 'easeOut' }}
8585
>
8686
<div className="relative flex aspect-square w-full items-center justify-center">
87-
<div className="absolute left-0 top-0 grid h-3/4 w-3/4 grid-cols-6 grid-rows-6 gap-0.5 bg-background-2">
87+
<div className="absolute left-0 top-0 grid h-3/4 w-3/4 grid-cols-6 grid-rows-6 gap-0.5 bg-transparent">
8888
<AnimatedTrainingBoards inView={inView} />
8989
</div>
9090
<motion.div
91-
className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-background-3/20 bg-background-1 shadow-lg"
91+
className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
9292
initial={{ scale: 0.95, opacity: 0 }}
9393
animate={{ scale: 1, opacity: 1 }}
9494
transition={{ duration: 0.5 }}

‎src/components/Home/Sections/TrainSection.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
213213
return (
214214
<section
215215
id={id}
216-
className="relative w-full flex-col items-center overflow-hidden py-10 md:py-16"
216+
className="relative w-full flex-col items-center overflow-hidden bg-transparent py-10 md:py-16"
217217
ref={ref}
218218
>
219219
<div className="z-10 mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
@@ -253,15 +253,15 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
253253
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
254254
transition={{ duration: 0.4, ease: 'easeOut' }}
255255
>
256-
<div className="flex flex-col overflow-hidden rounded-lg bg-background-2 shadow-xl">
257-
<div className="border-b border-background-3/20 px-4 pt-4">
256+
<div className="flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
257+
<div className="border-b border-white/10 px-4 pt-4">
258258
<div className="flex items-center justify-between">
259259
<div className="flex items-center">
260260
<div className="mr-2 h-2 w-2 rounded-full bg-human-3" />
261261
<p className="font-medium text-primary">Tactical Puzzle</p>
262262
</div>
263263
<div className="flex gap-2">
264-
<span className="rounded bg-background-3/80 px-2 py-1 text-xs text-primary/60">
264+
<span className="rounded bg-white/10 px-2 py-1 text-xs text-primary/70">
265265
Intermediate
266266
</span>
267267
</div>
@@ -280,7 +280,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
280280
transform: 'translateZ(0)',
281281
}}
282282
>
283-
<div className="flex flex-col overflow-hidden rounded border border-white/10">
283+
<div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
284284
<div
285285
className="relative w-full"
286286
style={{
@@ -312,7 +312,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
312312
}
313313
transition={{ duration: 0.3, delay: 0.5 }}
314314
>
315-
<div className="h-full w-full rounded border border-white/10 bg-background-1/60">
315+
<div className="h-full w-full rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
316316
<MovesByRating
317317
moves={puzzleMockData.movesByRating}
318318
colorSanMapping={puzzleMockData.colorSanMapping}
@@ -323,7 +323,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
323323

324324
{/* Position Analysis */}
325325
<motion.div
326-
className="mt-3 overflow-hidden rounded border border-white/10 bg-background-1/60 p-3"
326+
className="mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 p-3 backdrop-blur-md"
327327
initial={{ opacity: 0, y: 20 }}
328328
animate={
329329
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }

‎src/pages/index.tsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,54 @@ const Home: NextPage = () => {
4444
<GameCarousel />
4545
<PageNavigation />
4646
<div ref={featuresRef}>
47-
<div className="bg-background-1">
47+
{/* Play Section with subtle radial overlays */}
48+
<div className="relative bg-transparent">
49+
<div
50+
className="pointer-events-none absolute inset-0"
51+
style={{
52+
background:
53+
'radial-gradient(ellipse 90% 80% at 0% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 70% 60% at 100% 60%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
54+
}}
55+
/>
4856
<PlaySection id="play-section" />
4957
</div>
50-
<div className="bg-background-2">
58+
59+
{/* Analysis Section with mirrored edge glows */}
60+
<div className="relative bg-transparent">
61+
<div
62+
className="pointer-events-none absolute inset-0"
63+
style={{
64+
background:
65+
'radial-gradient(ellipse 95% 85% at 100% 15%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 80% 70% at 0% 70%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
66+
}}
67+
/>
5168
<AnalysisSection id="analysis-section" />
5269
</div>
53-
<div className="bg-background-1">
70+
71+
{/* Train Section with lower-edge emphasis */}
72+
<div className="relative bg-transparent">
73+
<div
74+
className="pointer-events-none absolute inset-0"
75+
style={{
76+
background:
77+
'radial-gradient(ellipse 100% 85% at 0% 90%, rgba(239, 68, 68, 0.07) 0%, transparent 75%), radial-gradient(ellipse 75% 65% at 100% 40%, rgba(239, 68, 68, 0.05) 0%, transparent 75%)',
78+
}}
79+
/>
5480
<TrainSection id="train-section" />
5581
</div>
56-
<div className="bg-background-2">
82+
83+
{/* Additional Features with diagonal accents */}
84+
<div className="relative bg-transparent">
85+
<div
86+
className="pointer-events-none absolute inset-0"
87+
style={{
88+
background:
89+
'radial-gradient(ellipse 90% 80% at 100% 85%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 80% 70% at 0% 10%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
90+
}}
91+
/>
5792
<AdditionalFeaturesSection id="more-features" />
5893
</div>
94+
5995
<AboutMaia />
6096
</div>
6197
</>

0 commit comments

Comments
 (0)