Skip to content

Commit cf3e499

Browse files
sa-fw-ansa-fw-an
committed
Code Resturcturing
1 parent 1f9e5d0 commit cf3e499

File tree

6 files changed

+386
-370
lines changed

6 files changed

+386
-370
lines changed

‎src/components/Info.tsx‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import { Carousel } from 'react-responsive-carousel';
2+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
3+
import {
4+
heroContent,
5+
images,
6+
ImageConfig,
7+
mission,
8+
} from '../constants/Info.ts';
9+
10+
const Info: React.FC = () => {
11+
const renderImageCard = (key: string, image: ImageConfig) => (
12+
<div
13+
key={key}
14+
className="group relative rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl
15+
transition-all duration-500 bg-white"
16+
>
17+
<img
18+
src={image.src}
19+
alt={image.alt}
20+
className="w-full max-h-80 md:h-96 object-cover transform group-hover:scale-105
21+
transition-all duration-700 ease-out"
22+
loading="lazy"
23+
/>
24+
{image.caption && (
25+
<div
26+
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
27+
to-transparent p-4 md:p-8"
28+
>
29+
<p className="text-white font-medium text-lg md:text-xl">
30+
{image.caption}
31+
</p>
32+
</div>
33+
)}
34+
</div>
35+
);
36+
37+
const renderCarouselItem = (key: string, image: ImageConfig) => (
38+
<div key={key} className="relative">
39+
<img
40+
src={image.src}
41+
alt={image.alt}
42+
className="w-full h-64 object-cover"
43+
loading="lazy"
44+
/>
45+
{image.caption && (
46+
<div
47+
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
48+
to-transparent p-4"
49+
>
50+
<p className="text-white font-normal text-base">{image.caption}</p>
51+
</div>
52+
)}
53+
</div>
54+
);
55+
56+
return (
57+
<>
58+
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white font-Inter">
59+
<main className="max-w-7xl mx-auto px-4 md:px-6 py-12 space-y-20">
60+
{/* Hero Section */}
61+
<section className="container mx-auto px-4 py-8 max-w-7xl">
62+
<div
63+
className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl
64+
transform hover:scale-[1.01] transition-all duration-500
65+
ease-out bg-white"
66+
>
67+
<img
68+
src={images.main.src}
69+
alt={images.main.alt}
70+
className="w-full h-[500px] md:h-[700px] object-cover"
71+
/>
72+
<div
73+
className="absolute inset-0 bg-gradient-to-r from-black/70
74+
via-black/50 to-transparent"
75+
/>
76+
<div
77+
className="absolute top-1/2 left-2 md:left-12 transform -translate-y-1/2
78+
text-white max-w-2xl"
79+
>
80+
<h1
81+
className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 md:mb-8
82+
leading-tight tracking-tight animate-fade-in font-display"
83+
>
84+
{heroContent.title}
85+
</h1>
86+
<p
87+
className="text-lg md:text-xl lg:text-2xl leading-relaxed opacity-90
88+
animate-fade-in-delayed font-light"
89+
>
90+
{heroContent.description}
91+
</p>
92+
</div>
93+
</div>
94+
95+
{/* Desktop Image Grid */}
96+
<div className="hidden md:grid grid-cols-1 md:grid-cols-3 gap-4">
97+
{Object.entries(images)
98+
.filter(([key]) => key.startsWith('bottom'))
99+
.map(([key, image]) => renderImageCard(key, image))}
100+
</div>
101+
102+
{/* Mobile Carousel */}
103+
<div className="md:hidden">
104+
<Carousel
105+
showThumbs={false}
106+
showStatus={false}
107+
infiniteLoop
108+
autoPlay
109+
interval={5000}
110+
transitionTime={500}
111+
className="rounded-2xl overflow-hidden"
112+
stopOnHover
113+
swipeable
114+
emulateTouch
115+
>
116+
{Object.entries(images)
117+
.filter(([key]) => key.startsWith('bottom'))
118+
.map(([key, image]) => renderCarouselItem(key, image))}
119+
</Carousel>
120+
</div>
121+
</section>
122+
123+
{/* Mission Section */}
124+
<section className="grid md:grid-cols-2 gap-10 md:gap-20 items-center">
125+
<div className="space-y-8 md:space-y-10">
126+
<div
127+
className="inline-block px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r
128+
from-red-500/10 to-orange-500/10 rounded-full"
129+
>
130+
<span
131+
className="text-4xs md:text-sm font-bold text-red-600 tracking-wider
132+
uppercase"
133+
>
134+
Empowering Young Learners
135+
</span>
136+
</div>
137+
<h2
138+
className="text-4xl md:text-5xl lg:text-6xl font-black space-y-2
139+
font-display tracking-tight"
140+
>
141+
<span className=" font-bold tracking-wider font-Caveat text-8xl">
142+
Our Mission?
143+
</span>
144+
<div>
145+
<div
146+
className="text-transparent bg-clip-text bg-gradient-to-r
147+
from-red-500 to-orange-500 font-Caveat text-8xl"
148+
>
149+
Authentic
150+
</div>
151+
<span className="font-semibold">Problem</span>
152+
<br />
153+
<span className="font-semibold">Solving</span>
154+
</div>
155+
</h2>
156+
157+
<h4 className="text-lg md:text-xl font-bold text-gray-800">
158+
Igniting Curiosity through Project Based Learning
159+
</h4>
160+
161+
<p className="text-gray-600 text-base md:text-lg font-Roboto">
162+
Empowering Young Minds with Hands-on Learning, Transforming
163+
Curiosity into Discovery and Innovation.
164+
</p>
165+
</div>
166+
167+
<div className="relative">
168+
<div className=" bg-auto rounded-2xl overflow-hidden shadow-xl">
169+
{/* Card on Top Left */}
170+
<div
171+
className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto
172+
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
173+
max-w-xs md:max-w-sm transform hover:scale-105
174+
transition-all duration-300 ease-out z-10 border-2 border-white"
175+
>
176+
<h3 className="text-lg md:text-xl font-bold mb-1 md:mb-2n text-gray-900 font-AnonymousPro">
177+
Project Based Learning
178+
</h3>
179+
<p className="text-white text-xs md:text-sm">
180+
Empowering learners and educators with hands-on
181+
project-based tools that enable creation and real-world
182+
problem-solving.
183+
</p>
184+
</div>
185+
186+
{/* Background Image */}
187+
<img
188+
src={mission.learnImage}
189+
alt="Students learning"
190+
className="w-full rounded-2xl transform hover:scale-105
191+
transition-all duration-500 ease-out"
192+
loading="lazy"
193+
/>
194+
195+
{/* Card on Bottom Right */}
196+
<div
197+
className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto
198+
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
199+
max-w-xs md:max-w-sm transform hover:scale-105
200+
transition-all duration-300 ease-out z-10 border-2 border-white"
201+
>
202+
<h3 className="text-md md:text-lg font-bold mb-1 md:mb-2 text-amber-100 font-AnonymousPro">
203+
Challenge and Fun: It's hard fun.
204+
</h3>
205+
<p className="text-white text-xs md:text-sm leading-snug">
206+
Bringing interactive, meaningful experiences that make
207+
education exciting and impactful.
208+
</p>
209+
</div>
210+
</div>
211+
</div>
212+
</section>
213+
</main>
214+
</div>
215+
</>
216+
);
217+
};
218+
219+
export default Info;

‎src/components/Stats.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { stats } from '../constants/Stats.ts';
2+
3+
const Stats = () => {
4+
return (
5+
<div className="max-w-7xl mx-auto p-8 bg-white">
6+
<div className="flex flex-col lg:flex-row gap-12">
7+
{/* Left Text Section - Modernized typography */}
8+
<div className="lg:w-1/4">
9+
<h1 className="text-5xl font-bold mb-4 leading-tight">
10+
<span className="text-black font-Caveat text-8xl">What </span>
11+
<div
12+
className="text-transparent bg-clip-text bg-gradient-to-r
13+
from-red-500 to-orange-500 font-Pacifico text-7xl"
14+
>
15+
numbers
16+
</div>
17+
<span className="text-black italic">say for us?</span>
18+
</h1>
19+
<p className="text-gray-600 text-2xl leading-relaxed font-Roboto">
20+
Sugar Labs, founded in 2008, has had{' '}
21+
<span className="italic">an impact on the lives of many</span>. Here
22+
are some of the statistics we are tracking
23+
</p>
24+
</div>
25+
26+
{/* Stats Grid Section - Modernized cards */}
27+
<div className="container mx-auto p-4 max-w-7xl">
28+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
29+
{/* Main Large Card - Kids Enriched */}
30+
<div
31+
className="md:col-span-2 row-span-2 bg-green-100 rounded-xl p-6 md:p-11 shadow-lg hover:shadow-xl transform hover:scale-105
32+
transition-all duration-500 ease-out"
33+
>
34+
<h3 className="text-gray-700 text-2xl font-medium mb-4 font-AnonymousPro">
35+
Kids whone lives have been enriched by using the Sugar Learning
36+
Platform.
37+
</h3>
38+
<div className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-green-600 to-green-700 bg-clip-text text-transparent font-Caveat">
39+
3,000,000+
40+
</div>
41+
<img
42+
src={stats.kidlaptop}
43+
alt="Student with laptop"
44+
className="w-full h-48 md:h-64 object-cover rounded-lg"
45+
/>
46+
</div>
47+
48+
{/* Top Row - Right Side */}
49+
<div
50+
className="bg-red-100 rounded-xl p-4 shadow-lg hover:shadow-xl transform hover:scale-105
51+
transition-all duration-500 ease-out"
52+
>
53+
<h3 className="text-gray-700 text-lg font-medium mb-2 font-AnonymousPro">
54+
Projects for teaching and learning created bay Sugar Labs
55+
students and teachers.
56+
</h3>
57+
<div className="text-6xl font-bold bg-gradient-to-r from-red-600 to-red-700 bg-clip-text text-transparent font-Caveat">
58+
344+
59+
</div>
60+
<img
61+
src={stats.studentsCollaborating}
62+
alt="Students collaborating"
63+
className="w h-36 object-cover rounded-lg"
64+
/>
65+
</div>
66+
67+
<div
68+
className="bg-green-200 rounded-xl p-4 shadow-lg hover:shadow-xl transform hover:scale-105
69+
transition-all duration-500 ease-out"
70+
>
71+
<h3 className="text-gray-700 text-lg font-medium mb-2 font-AnonymousPro">
72+
Problem-solving tasks conmpleted by students ages 13-17.
73+
</h3>
74+
<div className="text-6xl font-bold bg-gradient-to-r from-green-600 to-green-700 bg-clip-text text-transparent font-Caveat">
75+
1,450+
76+
</div>
77+
<img
78+
src={stats.studentMobile}
79+
alt="Student with mobile device"
80+
className="w h-36 object-cover rounded-lg"
81+
/>
82+
</div>
83+
84+
{/* Bottom Row */}
85+
<div
86+
className="bg-yellow-100 rounded-xl p-4 shadow-lg hover:shadow-xl transform hover:scale-105
87+
transition-all duration-500 ease-out"
88+
>
89+
<h3 className="text-gray-700 text-lg font-medium mb-2 font-AnonymousPro">
90+
Activities Downloaded
91+
</h3>
92+
<div className="text-5xl font-bold bg-gradient-to-r from-yellow-600 to-yellow-700 bg-clip-text text-transparent font-Caveat">
93+
11,531,321+
94+
</div>
95+
<img
96+
src={stats.activity}
97+
alt="Activity icon"
98+
className="w-full h-1/2 rounded-lg"
99+
/>
100+
</div>
101+
102+
<div
103+
className="bg-blue-200 rounded-xl p-4 shadow-lg hover:shadow-xl transform hover:scale-105
104+
transition-all duration-500 ease-out"
105+
>
106+
<h3 className="text-gray-700 text-lg font-medium mb-2 font-AnonymousPro">
107+
Languages our educational software has been translated into
108+
</h3>
109+
<div className="text-5xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent font-Caveat">
110+
170
111+
</div>
112+
<img
113+
src={stats.language}
114+
alt="Language icon"
115+
className="w-full h-1/2 rounded-lg"
116+
/>
117+
</div>
118+
119+
<div
120+
className="bg-red-200 rounded-xl p-4 shadow-lg hover:shadow-xl transform hover:scale-105
121+
transition-all duration-500 ease-out"
122+
>
123+
<h3 className="text-gray-700 text-lg font-medium mb-2 font-AnonymousPro">
124+
Mentors helping youth learn in program like Google Code-In (GCI)
125+
and Google Summer of Code
126+
</h3>
127+
<div className="text-6xl font-bold bg-gradient-to-r from-red-600 to-red-700 bg-clip-text text-transparent font-Caveat">
128+
55+
129+
</div>
130+
<img
131+
src={stats.mentorsTeaching}
132+
alt="Mentors teaching"
133+
className="w-full h-1/2 rounded-lg"
134+
/>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
);
141+
};
142+
143+
export default Stats;

‎src/constants/MainPage.ts‎ renamed to ‎src/constants/Info.ts‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@ import teach1Image from '../assets/Images/teach1.jpg';
33
import discussImage from '../assets/Images/discuss.jpeg';
44
import teach2Image from '../assets/Images/teach2.jpeg';
55
import learnImage from '../assets/Images/learn.jpg';
6-
import kidlaptop from '../assets/Stats/KidsWhoseLife.svg';
7-
import studentsCollaborating from '../assets/Stats/ProjectsForTeaching.svg';
8-
import studentMobile from '../assets/Stats/ProblemSolvingTasks.svg';
9-
import activity from '../assets/Stats/ActivitiesDownloaded.svg';
10-
import language from '../assets/Stats/Languages.svg';
11-
import mentorsTeaching from '../assets/Stats/MentorsHelping.svg';
126

137
export interface ImageConfig {
148
src: string;
@@ -51,12 +45,6 @@ export const images: Record<string, ImageConfig> = {
5145
},
5246
};
5347

54-
export const stats = {
48+
export const mission = {
5549
learnImage,
56-
kidlaptop,
57-
studentsCollaborating,
58-
studentMobile,
59-
activity,
60-
language,
61-
mentorsTeaching,
6250
};

0 commit comments

Comments
 (0)