Skip to content

Commit 93c09db

Browse files
vtamaravtamara
committed
Adding semantic tags and ARIA labels. Advancing #80 
1 parent 98f6b2c commit 93c09db

File tree

4 files changed

+192
-180
lines changed

4 files changed

+192
-180
lines changed

‎apps/nextjs/app/page.tsx‎

Lines changed: 104 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,122 +2,128 @@
22

33
export default function Home() {
44
return (
5-
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
5+
<main className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
66
<div className="relative overflow-hidden">
77
<div className="absolute inset-0 bg-gradient-to-br from-primary-100/20 via-transparent to-secondary-100/20 animate-pulse"></div>
88

99
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24">
1010
<div className="text-center space-y-8">
11-
<div className="space-y-4">
12-
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-primary-300 via-primary-200 to-secondary-100 bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
13-
Learn Through Games
14-
</h1>
15-
<p className="text-xl sm:text-2xl text-gray-600 max-w-3xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-200">
16-
Blockchain-powered education with real rewards. Study and earn
17-
scholarships as you learn.
18-
</p>
19-
</div>
20-
21-
<div className="flex items-center justify-center gap-4 text-sm text-gray-500 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300">
22-
<div className="flex items-center gap-2">
23-
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
24-
<span>Web3 Enabled</span>
25-
</div>
26-
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
27-
<div className="flex items-center gap-2">
28-
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
29-
<span>USDT Rewards</span>
11+
<section aria-label="Hero section">
12+
<div className="space-y-4">
13+
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-primary-300 via-primary-200 to-secondary-100 bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
14+
Learn Through Games
15+
</h1>
16+
<p className="text-xl sm:text-2xl text-gray-600 max-w-3xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-200">
17+
Blockchain-powered education with real rewards. Study and earn
18+
scholarships as you learn.
19+
</p>
3020
</div>
31-
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
32-
<div className="flex items-center gap-2">
33-
<div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
34-
<span>Free to Start</span>
21+
22+
<div className="flex items-center justify-center gap-4 text-sm text-gray-500 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300">
23+
<div className="flex items-center gap-2">
24+
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
25+
<span>Web3 Enabled</span>
26+
</div>
27+
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
28+
<div className="flex items-center gap-2">
29+
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
30+
<span>USDT Rewards</span>
31+
</div>
32+
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
33+
<div className="flex items-center gap-2">
34+
<div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
35+
<span>Free to Start</span>
36+
</div>
3537
</div>
36-
</div>
38+
</section>
3739

38-
<div className="pt-8 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500">
39-
<h2 className="text-2xl font-semibold text-gray-700 mb-8">
40-
Choose Your Language
41-
</h2>
42-
<div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
43-
<a
44-
href="/en"
45-
className="group relative w-80 h-56 rounded-3xl bg-gradient-to-br from-white to-gray-50 shadow-lg hover:shadow-2xl border border-gray-200 hover:border-primary-200 transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden"
46-
>
47-
<div className="absolute inset-0 bg-gradient-to-br from-primary-100/0 to-primary-100/0 group-hover:from-primary-100/10 group-hover:to-primary-200/10 transition-all duration-500"></div>
48-
<div className="relative h-full flex flex-col items-center justify-center p-8 space-y-4">
49-
<div className="text-6xl transform group-hover:scale-110 transition-transform duration-500">
50-
🇬🇧
51-
</div>
52-
<h3 className="text-3xl font-bold text-gray-800 group-hover:text-primary-300 transition-colors duration-300">
53-
English
54-
</h3>
55-
<p className="text-sm text-gray-500 text-center">
56-
Education & scholarships
57-
</p>
58-
<div className="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-300">
59-
<span className="text-white text-xl">→</span>
40+
<section aria-label="Language selection">
41+
<div className="pt-8 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500">
42+
<h2 className="text-2xl font-semibold text-gray-700 mb-8">
43+
Choose Your Language
44+
</h2>
45+
<div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
46+
<a
47+
href="/en"
48+
className="group relative w-80 h-56 rounded-3xl bg-gradient-to-br from-white to-gray-50 shadow-lg hover:shadow-2xl border border-gray-200 hover:border-primary-200 transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden"
49+
>
50+
<div className="absolute inset-0 bg-gradient-to-br from-primary-100/0 to-primary-100/0 group-hover:from-primary-100/10 group-hover:to-primary-200/10 transition-all duration-500"></div>
51+
<div className="relative h-full flex flex-col items-center justify-center p-8 space-y-4">
52+
<div className="text-6xl transform group-hover:scale-110 transition-transform duration-500">
53+
🇬🇧
54+
</div>
55+
<h3 className="text-3xl font-bold text-gray-800 group-hover:text-primary-300 transition-colors duration-300">
56+
English
57+
</h3>
58+
<p className="text-sm text-gray-500 text-center">
59+
Education & scholarships
60+
</p>
61+
<div className="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-300">
62+
<span className="text-white text-xl">→</span>
63+
</div>
6064
</div>
61-
</div>
62-
</a>
65+
</a>
6366

64-
<a
65-
href="/es"
66-
className="group relative w-80 h-56 rounded-3xl bg-gradient-to-br from-white to-gray-50 shadow-lg hover:shadow-2xl border border-gray-200 hover:border-secondary-100 transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden"
67-
>
68-
<div className="absolute inset-0 bg-gradient-to-br from-secondary-100/0 to-secondary-100/0 group-hover:from-secondary-100/10 group-hover:to-primary-100/10 transition-all duration-500"></div>
69-
<div className="relative h-full flex flex-col items-center justify-center p-8 space-y-4">
70-
<div className="text-6xl transform group-hover:scale-110 transition-transform duration-500">
71-
🇪🇸
72-
</div>
73-
<h3 className="text-3xl font-bold text-gray-800 group-hover:text-secondary-100 transition-colors duration-300">
74-
Español
75-
</h3>
76-
<p className="text-sm text-gray-500 text-center">
77-
Educación y becas
78-
</p>
79-
<div className="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-300">
80-
<span className="text-white text-xl">→</span>
67+
<a
68+
href="/es"
69+
className="group relative w-80 h-56 rounded-3xl bg-gradient-to-br from-white to-gray-50 shadow-lg hover:shadow-2xl border border-gray-200 hover:border-secondary-100 transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden"
70+
>
71+
<div className="absolute inset-0 bg-gradient-to-br from-secondary-100/0 to-secondary-100/0 group-hover:from-secondary-100/10 group-hover:to-primary-100/10 transition-all duration-500"></div>
72+
<div className="relative h-full flex flex-col items-center justify-center p-8 space-y-4">
73+
<div className="text-6xl transform group-hover:scale-110 transition-transform duration-500">
74+
🇪🇸
75+
</div>
76+
<h3 className="text-3xl font-bold text-gray-800 group-hover:text-secondary-100 transition-colors duration-300">
77+
Español
78+
</h3>
79+
<p className="text-sm text-gray-500 text-center">
80+
Educación y becas
81+
</p>
82+
<div className="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-300">
83+
<span className="text-white text-xl">→</span>
84+
</div>
8185
</div>
82-
</div>
83-
</a>
86+
</a>
87+
</div>
8488
</div>
85-
</div>
89+
</section>
8690

87-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto pt-16 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-700">
88-
<div className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
89-
<div className="text-4xl">🎓</div>
90-
<h3 className="text-lg font-semibold text-gray-800">
91-
Interactive Courses
92-
</h3>
93-
<p className="text-sm text-gray-600">
94-
Engaging content with quizzes and challenges
95-
</p>
96-
</div>
91+
<section aria-label="Key features">
92+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto pt-16 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-700">
93+
<article className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
94+
<div className="text-4xl">🎓</div>
95+
<h3 className="text-lg font-semibold text-gray-800">
96+
Interactive Courses
97+
</h3>
98+
<p className="text-sm text-gray-600">
99+
Engaging content with quizzes and challenges
100+
</p>
101+
</article>
97102

98-
<div className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
99-
<div className="text-4xl">💰</div>
100-
<h3 className="text-lg font-semibold text-gray-800">
101-
Earn Rewards
102-
</h3>
103-
<p className="text-sm text-gray-600">
104-
Get paid in USDT for completing educational guides
105-
</p>
106-
</div>
103+
<article className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
104+
<div className="text-4xl">💰</div>
105+
<h3 className="text-lg font-semibold text-gray-800">
106+
Earn Rewards
107+
</h3>
108+
<p className="text-sm text-gray-600">
109+
Get paid in USDT for completing educational guides
110+
</p>
111+
</article>
107112

108-
<div className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
109-
<div className="text-4xl">🔒</div>
110-
<h3 className="text-lg font-semibold text-gray-800">
111-
Blockchain Secured
112-
</h3>
113-
<p className="text-sm text-gray-600">
114-
Transparent scholarships on Celo blockchain
115-
</p>
113+
<article className="text-center space-y-3 p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-primary-100 transition-all duration-300 hover:shadow-lg">
114+
<div className="text-4xl">🔒</div>
115+
<h3 className="text-lg font-semibold text-gray-800">
116+
Blockchain Secured
117+
</h3>
118+
<p className="text-sm text-gray-600">
119+
Transparent scholarships on Celo blockchain
120+
</p>
121+
</article>
116122
</div>
117-
</div>
123+
</section>
118124
</div>
119125
</div>
120126
</div>
121-
</div>
127+
</main>
122128
)
123129
}

0 commit comments

Comments
 (0)