Skip to content

Commit 62610ba

Browse files
recursivezerorecursivezero
authored
Merge pull request #112 from recursivezero/feature/RZA-250096
Feature/RZA-250096: Refactor the about us page
2 parents 2e77edf + 73511ae commit 62610ba

File tree

8 files changed

+700
-22
lines changed

8 files changed

+700
-22
lines changed

‎src/assets/icons/github.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/styles/about.css‎

Lines changed: 100 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,101 @@
1-
.container__about {
2-
display: grid;
3-
justify-content: center;
4-
height: 90vh;
5-
padding: 1rem;
6-
7-
& .moto {
8-
color: #3a8657;
9-
font-size: 2rem;
10-
}
1+
:root {
2+
--bg-dark: #0f172a;
3+
--bg-light: #ffffff;
4+
--bg-secondary: #1e293b;
5+
--primary: #3b82f6;
6+
--primary-light: #60a5fa;
7+
--text-main: #f8fafc;
8+
--text-primary: #cbd5e1;
9+
--text-secondary: #212223;
10+
--accent: #f59e0b;
11+
}
12+
13+
.about-container {
14+
background-color: light-dark(var(--bg-light), var(--bg-dark));
15+
color: var(--text-main);
16+
min-height: 100vh;
17+
font-family: "Comic Neue", cursive, sans-serif;
18+
display: flex;
19+
flex-direction: column;
20+
gap: 3rem;
21+
}
22+
23+
.text-highlight {
24+
color: var(--primary);
25+
font-weight: 700;
26+
}
27+
28+
/* Buttons */
29+
.btn {
30+
display: inline-block;
31+
padding: 0.75rem 1.5rem;
32+
border-radius: 2rem;
33+
font-weight: 600;
34+
text-decoration: none;
35+
transition: all 0.3s ease;
36+
margin: 0.5rem;
37+
}
38+
39+
.btn-primary {
40+
background-color: var(--primary);
41+
color: white;
42+
border: 2px solid var(--primary);
43+
}
44+
45+
.btn-primary:hover {
46+
background-color: var(--primary-light);
47+
transform: translateY(-2px);
48+
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
49+
}
50+
51+
.btn-secondary {
52+
background-color: transparent;
53+
color: var(--primary);
54+
border: 2px solid var(--primary);
1155
}
56+
57+
.btn-secondary:hover {
58+
background-color: rgba(59, 130, 246, 0.1);
59+
transform: translateY(-2px);
60+
}
61+
62+
/* Sections */
63+
.section {
64+
max-width: 1200px;
65+
margin: 0 auto;
66+
padding: 2rem 1rem;
67+
}
68+
69+
.section-title {
70+
font-size: 2rem;
71+
text-align: center;
72+
margin-bottom: 1rem;
73+
color: light-dark(var(--text-secondary), var(--text-primary));
74+
position: relative;
75+
}
76+
77+
.section-subtitle {
78+
text-align: center;
79+
color: light-dark(var(--bg-dark), var(--text-primary));
80+
max-width: 700px;
81+
margin: 0 auto 2.5rem;
82+
line-height: 1.6;
83+
}
84+
85+
.section-title::after {
86+
content: "";
87+
position: absolute;
88+
bottom: -10px;
89+
left: 50%;
90+
transform: translateX(-50%);
91+
width: 60%;
92+
height: 4px;
93+
background: linear-gradient(90deg, var(--primary), transparent);
94+
border-radius: 2px;
95+
}
96+
97+
@media (max-width: 768px) {
98+
.section-title {
99+
font-size: 1.5rem;
100+
}
101+
}

‎src/components/about/FeaturesSection.astro‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
interface Feature {
3+
title: string;
4+
description: string;
5+
icon: string;
6+
color: string;
7+
}
8+
9+
const features: Feature[] = [
10+
{
11+
title: "Alphabet Adventures",
12+
description:
13+
"Embark on a journey through letters with interactive games that teach English, Hindi, and Braille. Track progress and explore creative representations like fruits, animals, countries, and geeky codes!",
14+
icon: "🔤",
15+
color: "#3b82f6"
16+
},
17+
{
18+
title: "Culture Explorer",
19+
description:
20+
"Travel through India's rich heritage with immersive maps and family tree explorations. Discover your roots through Gotra, Deity, and Caste search with downloadable clan data.",
21+
icon: "🗺️",
22+
color: "#10b981"
23+
},
24+
{
25+
title: "Word Playground",
26+
description:
27+
"Challenge your mind with engaging puzzles and vocabulary hunts. Find words like CAT, DOG, SUN, and MOON while tracking your progress.",
28+
icon: "🎲",
29+
color: "#f59e0b"
30+
},
31+
{
32+
title: "Math Quest",
33+
description:
34+
"Dive into numbers with fun challenges and games. Learn various number systems including English, Hindi, Roman, and Morse code formats.",
35+
icon: "➕",
36+
color: "#f43f5e"
37+
},
38+
{
39+
title: "Draw & Learn",
40+
description:
41+
"Tap letters to display matching images, then draw over them with customizable colors and backgrounds. A fun blend of art and alphabet learning!",
42+
icon: "✏️",
43+
color: "#ec4899"
44+
},
45+
{
46+
title: "Indic Varnmala",
47+
description:
48+
"Explore the vowels and consonants of different Indian languages. Compare scripts and sounds across regions in a simple, visual way.",
49+
icon: "🅰️",
50+
color: "#8b5cf6"
51+
},
52+
{
53+
title: "Knowledge Glossary",
54+
description:
55+
"Learn about months, days, sun signs, country flags, seasons, colors, shapes, and times of the day in a fun and accessible format.",
56+
icon: "📖",
57+
color: "#6366f1"
58+
},
59+
{
60+
title: "Tithi & Time Tools",
61+
description:
62+
"Explore traditional lunar calendar details alongside modern timestamps. Includes unit converters for daily use.",
63+
icon: "⏳",
64+
color: "#14b8a6"
65+
},
66+
{
67+
title: "Creative Studio",
68+
description:
69+
"Design beautiful quotes or custom text visuals with the Text and Quote Designer tools — perfect for creative expression.",
70+
icon: "🖌️",
71+
color: "#ef4444"
72+
},
73+
{
74+
title: "Display Modes",
75+
description:
76+
"Visualize alphabets interactively: build vertical stacks, create flowing queues, or swipe through sliders in fun display formats.",
77+
icon: "🧩",
78+
color: "#0ea5e9"
79+
},
80+
{
81+
title: "Varnmala Learning Hub",
82+
description:
83+
"Learn and practice alphabets with tools for reading, writing, listening, and drawing — including Barahkhadi and interactive speak-to-draw modes.",
84+
icon: "📖",
85+
color: "#8b5cf6"
86+
},
87+
{
88+
title: "Word Hunt",
89+
description:
90+
"Explore a word discovery game where you find hidden words while keeping track of clicks and progress in an interactive way.",
91+
icon: "🔍",
92+
color: "#f97316"
93+
}
94+
];
95+
---
96+
97+
<section id="features" class="section features-section">
98+
<h2 class="section-title">Our <span class="text-highlight">Enchanting</span> Features</h2>
99+
<p class="section-subtitle">
100+
Designed to spark curiosity and foster a lifelong love for learning through innovative experiences
101+
</p>
102+
<div class="features-grid">
103+
{features.map((feature) => (
104+
<div class="feature-card" style={`--accent-color: ${feature.color}`}>
105+
<div class="feature-icon" aria-label={feature.title}>
106+
{feature.icon}
107+
</div>
108+
<h3 class="feature-title">{feature.title}</h3>
109+
<p class="feature-desc">{feature.description}</p>
110+
</div>
111+
))}
112+
</div>
113+
</section>
114+
115+
<style>
116+
.features-section {
117+
margin-bottom: 4rem;
118+
}
119+
120+
.features-grid {
121+
display: grid;
122+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
123+
gap: 2rem;
124+
}
125+
126+
.feature-card {
127+
background: light-dark(var(--bg-light), var(--bg-secondary));
128+
border-radius: 1rem;
129+
padding: 2rem;
130+
transition: transform 0.3s ease;
131+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
132+
border: 1px solid rgba(59, 130, 246, 0.2);
133+
display: flex;
134+
flex-direction: column;
135+
align-items: center;
136+
text-align: center;
137+
}
138+
139+
.feature-card:hover {
140+
transform: translateY(-10px);
141+
}
142+
143+
.feature-icon {
144+
font-size: 3rem;
145+
margin-bottom: 1.5rem;
146+
color: var(--accent-color);
147+
}
148+
149+
.feature-title {
150+
font-size: 1.5rem;
151+
margin-bottom: 1rem;
152+
color: light-dark(var(--primary), var(--text-main));
153+
}
154+
155+
.feature-desc {
156+
color: light-dark(var(--bg-dark), var(--text-primary));
157+
line-height: 1.6;
158+
}
159+
</style>

0 commit comments

Comments
 (0)