Skip to content

Commit 52f0c3b

Browse files
kevinjosethomaskevinjosethomas
committed
feat: improve PlaySection and AnalysisSection landing
1 parent 07514c4 commit 52f0c3b

File tree

3 files changed

+657
-76
lines changed

3 files changed

+657
-76
lines changed

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

Lines changed: 130 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import Link from 'next/link'
2-
import Image from 'next/image'
32
import { motion } from 'framer-motion'
43
import { useInView } from 'react-intersection-observer'
4+
import {
5+
SimplifiedChessboard,
6+
SimplifiedBlunderMeter,
7+
SimplifiedMovesByRating,
8+
SimplifiedMoveMap,
9+
SimplifiedHighlight,
10+
} from './SimplifiedAnalysisComponents'
511

612
interface AnalysisSectionProps {
713
id: string
@@ -16,101 +22,151 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
1622
return (
1723
<section
1824
id={id}
19-
className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-16"
25+
className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-8"
2026
ref={ref}
2127
>
22-
<div className="container mx-auto flex flex-col-reverse items-center px-4 md:flex-row md:gap-12 lg:gap-16">
23-
{/* Image/Visual - Left side for this section */}
28+
<div className="container mx-auto flex flex-col-reverse items-center px-4 md:flex-row md:gap-8 lg:gap-12">
29+
{/* Analysis Interface Visual */}
2430
<motion.div
25-
className="relative mt-10 w-full md:mt-0 md:w-1/2"
31+
className="relative mt-6 w-full md:mt-0 md:w-1/2"
2632
initial={{ opacity: 0, x: -50 }}
2733
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
28-
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
34+
transition={{ duration: 0.3, ease: 'easeOut', delay: 0.1 }}
2935
>
30-
<div className="relative aspect-square w-full overflow-hidden rounded-lg shadow-xl">
31-
{/* Placeholder for analysis interface image */}
32-
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-tr from-background-2 via-human-3/20 to-background-2">
33-
<div className="grid h-full w-full grid-cols-2 gap-4 p-6">
34-
<div className="rounded-lg bg-background-3"></div>
35-
<div className="flex flex-col gap-2">
36-
<div className="h-1/2 rounded-lg bg-background-3"></div>
37-
<div className="h-1/2 rounded-lg bg-background-3"></div>
36+
<div className="relative w-full overflow-hidden rounded-lg border border-background-3/20 bg-background-2 shadow-xl">
37+
<div className="flex flex-col gap-3 p-3">
38+
<div className="flex gap-3">
39+
<div className="flex w-1/2 flex-col">
40+
<div className="flex flex-col">
41+
<motion.div
42+
className="w-full rounded-t-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80"
43+
initial={{ opacity: 0 }}
44+
animate={inView ? { opacity: 1 } : { opacity: 0 }}
45+
transition={{ duration: 0.3, delay: 0.3 }}
46+
>
47+
Magnus Carlsen (2850)
48+
</motion.div>
49+
<motion.div
50+
className="aspect-square w-full"
51+
initial={{ opacity: 0, scale: 0.95 }}
52+
animate={
53+
inView
54+
? { opacity: 1, scale: 1 }
55+
: { opacity: 0, scale: 0.95 }
56+
}
57+
transition={{ duration: 0.3, delay: 0.3 }}
58+
>
59+
<SimplifiedChessboard />
60+
</motion.div>
61+
<motion.div
62+
className="rounded-b-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80"
63+
initial={{ opacity: 0 }}
64+
animate={inView ? { opacity: 1 } : { opacity: 0 }}
65+
transition={{ duration: 0.3, delay: 0.3 }}
66+
>
67+
Hikaru Nakamura (2836)
68+
</motion.div>
69+
</div>
3870
</div>
39-
<div className="col-span-2 h-24 rounded-lg bg-background-3"></div>
71+
<div className="flex w-1/2 flex-col justify-between">
72+
<motion.div
73+
className="flex-1"
74+
initial={{ opacity: 0, y: 20 }}
75+
animate={
76+
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
77+
}
78+
transition={{ duration: 0.3, delay: 0.4 }}
79+
>
80+
<SimplifiedHighlight />
81+
</motion.div>
82+
<motion.div
83+
className="mt-4"
84+
initial={{ opacity: 0, y: 20 }}
85+
animate={
86+
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
87+
}
88+
transition={{ duration: 0.3, delay: 0.5 }}
89+
>
90+
<SimplifiedBlunderMeter />
91+
</motion.div>
92+
</div>
93+
</div>
94+
95+
{/* Bottom row: Rating Chart and Move Map */}
96+
<div className="flex gap-3">
97+
<motion.div
98+
className="h-48 w-1/2"
99+
initial={{ opacity: 0, y: 20 }}
100+
animate={
101+
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
102+
}
103+
transition={{ duration: 0.3, delay: 0.6 }}
104+
>
105+
<SimplifiedMovesByRating />
106+
</motion.div>
107+
<motion.div
108+
className="h-48 w-1/2"
109+
initial={{ opacity: 0, y: 20 }}
110+
animate={
111+
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
112+
}
113+
transition={{ duration: 0.3, delay: 0.7 }}
114+
>
115+
<SimplifiedMoveMap />
116+
</motion.div>
40117
</div>
41118
</div>
42119
</div>
43-
<motion.div
44-
className="absolute -bottom-5 -left-5 rounded-lg bg-engine-3/10 p-4 backdrop-blur-md md:p-6"
45-
initial={{ y: 20, opacity: 0 }}
46-
animate={inView ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
47-
transition={{ duration: 0.5, delay: 0.5 }}
48-
>
49-
<p className="font-medium text-engine-3">
50-
Understand your mistakes
51-
</p>
52-
</motion.div>
53120
</motion.div>
54121

55-
{/* Content - Right side for this section */}
122+
{/* Content */}
56123
<motion.div
57124
className="w-full md:w-1/2"
58125
initial={{ opacity: 0, x: 50 }}
59126
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
60-
transition={{ duration: 0.6, ease: 'easeOut' }}
127+
transition={{ duration: 0.3, ease: 'easeOut', delay: 0.1 }}
61128
>
62129
<div className="mb-4 inline-block rounded-full bg-engine-3/10 px-4 py-1 text-sm font-medium text-engine-3">
63130
Game Analysis
64131
</div>
65-
<h2 className="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">
66-
Analyze games with human-like insights
67-
</h2>
68-
<p className="mb-8 text-lg text-primary/80">
69-
Upload your games and get unique human-centered analysis. Unlike
70-
traditional engines that focus on perfect play, Maia shows you how
71-
humans of different strengths would approach your position.
72-
</p>
73-
<div className="flex flex-wrap gap-4">
74-
<Link
75-
href="/analysis"
76-
className="flex items-center justify-center rounded-md bg-engine-3 px-6 py-3 font-medium text-white transition duration-200 hover:bg-opacity-90"
77-
>
78-
Try Analysis
79-
</Link>
80-
<a
81-
href="#features"
82-
className="flex items-center justify-center rounded-md border border-background-2 bg-background-1 px-6 py-3 font-medium transition duration-200 hover:bg-background-2"
83-
>
84-
Learn More
85-
</a>
86-
</div>
132+
<motion.h2
133+
className="mt-1 text-2xl font-bold leading-tight tracking-tight text-primary md:text-3xl lg:text-4xl"
134+
initial={{ opacity: 0, y: 20 }}
135+
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
136+
transition={{ duration: 0.3, ease: 'easeOut' }}
137+
>
138+
Analyze Your Games with Powerful AI Tools
139+
</motion.h2>
140+
<motion.p
141+
className="mt-4 max-w-xl text-lg leading-relaxed text-primary/80"
142+
initial={{ opacity: 0, y: 20 }}
143+
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
144+
transition={{ duration: 0.3, ease: 'easeOut', delay: 0.1 }}
145+
>
146+
Maia combines traditional Stockfish precision with human-like
147+
pattern recognition, showing you both the perfect moves and what
148+
humans typically play. Discover your strengths and weaknesses
149+
compared to players at different skill levels.
150+
</motion.p>
151+
<motion.p
152+
className="mt-4 max-w-xl text-lg leading-relaxed text-primary/80"
153+
initial={{ opacity: 0, y: 20 }}
154+
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
155+
transition={{ duration: 0.3, ease: 'easeOut', delay: 0.2 }}
156+
>
157+
Visualize move probabilities across different rating levels, compare
158+
human tendencies with engine evaluations, and understand the
159+
likelihood of mistakes in each position. Get personalized insights
160+
based on your playing style and rating level.
161+
</motion.p>
162+
<Link
163+
href="/analysis"
164+
className="flex w-fit items-center justify-center rounded-md bg-engine-3 px-6 py-3 font-medium text-white transition duration-200 hover:bg-opacity-90"
165+
>
166+
Try Analysis
167+
</Link>
87168
</motion.div>
88169
</div>
89-
90-
{/* Parallax decorative elements */}
91-
<motion.div
92-
className="absolute -bottom-20 left-10 h-40 w-40 rounded-full bg-engine-3/5"
93-
animate={{
94-
y: inView ? [0, -20, 0] : 0,
95-
}}
96-
transition={{
97-
repeat: Infinity,
98-
duration: 4,
99-
times: [0, 0.5, 1],
100-
}}
101-
/>
102-
<motion.div
103-
className="absolute right-10 top-10 h-60 w-60 rounded-full bg-human-3/5"
104-
animate={{
105-
y: inView ? [0, 20, 0] : 0,
106-
}}
107-
transition={{
108-
repeat: Infinity,
109-
duration: 5,
110-
times: [0, 0.5, 1],
111-
delay: 0.5,
112-
}}
113-
/>
114170
</section>
115171
)
116172
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
5858
className="mb-10 w-full md:mb-0 md:w-1/2"
5959
initial={{ opacity: 0, x: -50 }}
6060
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
61-
transition={{ duration: 0.6, ease: 'easeOut' }}
61+
transition={{ duration: 0.3, ease: 'easeOut' }}
6262
>
6363
<div className="mb-4 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3">
6464
Play Against Maia
@@ -99,7 +99,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
9999
className="relative w-[70%] md:w-[35%]"
100100
initial={{ opacity: 0, x: 50 }}
101101
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
102-
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
102+
transition={{ duration: 0.3, ease: 'easeOut', delay: 0.2 }}
103103
>
104104
<div className="relative flex aspect-square w-full items-center justify-center">
105105
{/* Training data visualization */}

0 commit comments

Comments
 (0)