Skip to content

Commit bb85f18

Browse files
sa-fw-ansa-fw-an
committed
Fix Responsiveness
1 parent 0e93cf4 commit bb85f18

File tree

2 files changed

+81
-81
lines changed

2 files changed

+81
-81
lines changed

‎src/components/Info.tsx‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
images,
88
ImageConfig,
99
mission,
10-
} from '../constants/Info.ts';
10+
} from '@/constants/Info.ts';
1111
import {
1212
fadeIn,
1313
simpleFadeIn,
1414
subtleRise,
1515
simpleGridContainer,
16-
} from '../styles/Animations';
16+
} from '@/styles/Animations';
1717

1818
const Info: React.FC = () => {
1919
const renderImageCard = (key: string, image: ImageConfig) => (
@@ -27,16 +27,16 @@ const Info: React.FC = () => {
2727
<img
2828
src={image.src}
2929
alt={image.alt}
30-
className="w-full max-h-80 md:h-96 object-cover transform group-hover:scale-105
30+
className="w-full h-60 sm:h-72 md:h-80 lg:h-96 object-cover transform group-hover:scale-105
3131
transition-all duration-700 ease-out"
3232
loading="lazy"
3333
/>
3434
{image.caption && (
3535
<div
3636
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
37-
to-transparent p-4 md:p-8"
37+
to-transparent p-3 sm:p-4 md:p-6 lg:p-8"
3838
>
39-
<p className="text-white font-medium text-lg md:text-xl">
39+
<p className="text-white font-medium text-sm sm:text-base md:text-lg lg:text-xl">
4040
{image.caption}
4141
</p>
4242
</div>
@@ -49,15 +49,15 @@ const Info: React.FC = () => {
4949
<img
5050
src={image.src}
5151
alt={image.alt}
52-
className="w-full h-64 object-cover"
52+
className="w-full h-48 sm:h-64 object-cover"
5353
loading="lazy"
5454
/>
5555
{image.caption && (
5656
<div
5757
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
58-
to-transparent p-4"
58+
to-transparent p-3 sm:p-4"
5959
>
60-
<p className="text-white font-normal text-base">{image.caption}</p>
60+
<p className="text-white font-normal text-sm sm:text-base">{image.caption}</p>
6161
</div>
6262
)}
6363
</div>
@@ -66,11 +66,11 @@ const Info: React.FC = () => {
6666
return (
6767
<>
6868
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white font-Inter">
69-
<main className="max-w-7xl mx-auto px-4 md:px-6 py-12 space-y-20">
69+
<main className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 py-8 sm:py-10 md:py-12 space-y-12 sm:space-y-16 md:space-y-20">
7070
{/* Hero Section */}
71-
<section className="container mx-auto px-4 py-8 max-w-7xl">
71+
<section className="container mx-auto px-2 sm:px-4 py-6 sm:py-8 max-w-7xl">
7272
<motion.div
73-
className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl
73+
className="relative mb-6 sm:mb-8 rounded-2xl sm:rounded-3xl overflow-hidden shadow-xl sm:shadow-2xl
7474
transform hover:scale-[1.01] transition-all duration-500
7575
ease-out bg-white"
7676
initial="hidden"
@@ -81,28 +81,28 @@ const Info: React.FC = () => {
8181
<img
8282
src={images.main.src}
8383
alt={images.main.alt}
84-
className="w-full h-[500px] md:h-[700px] object-cover"
84+
className="w-full h-[350px] sm:h-[400px] md:h-[500px] lg:h-[600px] xl:h-[700px] object-cover"
8585
/>
8686
<div
8787
className="absolute inset-0 bg-gradient-to-r from-black/70
8888
via-black/50 to-transparent"
8989
/>
9090
<motion.div
91-
className="absolute top-1/2 left-2 md:left-12 transform -translate-y-1/2
92-
text-white max-w-2xl"
91+
className="absolute top-1/2 left-2 sm:left-6 md:left-12 transform -translate-y-1/2
92+
text-white max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-2xl p-2 sm:p-0"
9393
initial="hidden"
9494
whileInView="visible"
9595
viewport={{ once: true }}
9696
variants={subtleRise}
9797
>
9898
<h1
99-
className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 md:mb-8
99+
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black mb-3 sm:mb-4 md:mb-6 lg:mb-8
100100
leading-tight tracking-tight animate-fade-in font-display"
101101
>
102102
{heroContent.title}
103103
</h1>
104104
<p
105-
className="text-lg md:text-xl lg:text-2xl leading-relaxed opacity-90
105+
className="text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed opacity-90
106106
animate-fade-in-delayed font-light"
107107
>
108108
{heroContent.description}
@@ -112,7 +112,7 @@ const Info: React.FC = () => {
112112

113113
{/* Desktop Image Grid */}
114114
<motion.div
115-
className="hidden md:grid grid-cols-1 md:grid-cols-3 gap-4"
115+
className="hidden md:grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4"
116116
variants={simpleGridContainer}
117117
initial="hidden"
118118
whileInView="visible"
@@ -138,7 +138,7 @@ const Info: React.FC = () => {
138138
autoPlay
139139
interval={5000}
140140
transitionTime={500}
141-
className="rounded-2xl overflow-hidden"
141+
className="rounded-xl sm:rounded-2xl overflow-hidden"
142142
stopOnHover
143143
swipeable
144144
emulateTouch
@@ -152,36 +152,36 @@ const Info: React.FC = () => {
152152

153153
{/* Mission Section */}
154154
<motion.section
155-
className="grid md:grid-cols-2 gap-10 md:gap-20 items-center"
155+
className="grid sm:grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10 md:gap-16 lg:gap-20 items-center px-2 sm:px-4"
156156
initial="hidden"
157157
whileInView="visible"
158158
viewport={{ once: true, amount: 0.2 }}
159159
variants={simpleFadeIn}
160160
>
161-
<div className="space-y-8 md:space-y-10">
161+
<div className="space-y-6 sm:space-y-8 md:space-y-10">
162162
<div
163-
className="inline-block px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r
163+
className="inline-block px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-3 bg-gradient-to-r
164164
from-red-500/10 to-orange-500/10 rounded-full"
165165
>
166166
<span
167-
className="text-4xs md:text-sm font-bold text-red-600 tracking-wider
167+
className="text-xs sm:text-sm font-bold text-red-600 tracking-wider
168168
uppercase"
169169
>
170170
Empowering Young Learners
171171
</span>
172172
</div>
173173
<motion.h2
174-
className="text-4xl md:text-5xl lg:text-6xl font-black space-y-2
174+
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black space-y-1 sm:space-y-2
175175
font-display tracking-tight"
176176
variants={subtleRise}
177177
>
178-
<span className="font-bold tracking-wider font-Caveat text-8xl">
178+
<span className="font-bold tracking-wider font-Caveat text-5xl sm:text-6xl md:text-7xl lg:text-8xl">
179179
Our Mission?
180180
</span>
181181
<div>
182182
<div
183183
className="text-transparent bg-clip-text bg-gradient-to-r
184-
from-red-500 to-orange-500 font-Caveat text-8xl"
184+
from-red-500 to-orange-500 font-Caveat text-5xl sm:text-6xl md:text-7xl lg:text-8xl"
185185
>
186186
Authentic
187187
</div>
@@ -192,60 +192,60 @@ const Info: React.FC = () => {
192192
</motion.h2>
193193

194194
<motion.h4
195-
className="text-lg md:text-xl font-bold text-gray-800"
195+
className="text-base sm:text-lg md:text-xl font-bold text-gray-800"
196196
variants={subtleRise}
197197
>
198198
Igniting Curiosity through Project Based Learning
199199
</motion.h4>
200200

201-
<p className="text-gray-600 text-base md:text-lg font-Roboto">
201+
<p className="text-gray-600 text-sm sm:text-base md:text-lg font-Roboto">
202202
Empowering Young Minds with Hands-on Learning, Transforming
203203
Curiosity into Discovery and Innovation.
204204
</p>
205205
</div>
206206

207207
<motion.div className="relative" variants={subtleRise}>
208-
<div className="bg-auto rounded-2xl overflow-hidden shadow-xl">
208+
<div className="bg-auto rounded-xl sm:rounded-2xl overflow-hidden shadow-lg sm:shadow-xl">
209+
{/* Background Image */}
210+
<motion.img
211+
src={mission.learnImage}
212+
alt="Students learning"
213+
className="w-full rounded-xl sm:rounded-2xl transform hover:scale-105
214+
transition-all duration-500 ease-out"
215+
loading="lazy"
216+
whileHover={{ scale: 1.05 }}
217+
/>
218+
209219
{/* Card on Top Left */}
210220
<motion.div
211-
className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto
212-
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
213-
max-w-xs md:max-w-sm transform hover:scale-105
214-
transition-all duration-300 ease-out z-10 border-2 border-white"
221+
className="absolute top-2 left-2 bg-black/60
222+
backdrop-blur-sm rounded-lg sm:rounded-xl p-2.5 sm:p-4 md:p-6 shadow-lg
223+
max-w-[180px] sm:max-w-[220px] md:max-w-xs transform hover:scale-105
224+
transition-all duration-300 ease-out z-10 border border-white/50"
215225
whileHover={{ scale: 1.05 }}
216226
>
217-
<h3 className="text-lg md:text-xl font-bold mb-1 md:mb-2n text-gray-900 font-AnonymousPro">
227+
<h3 className="text-base sm:text-lg md:text-xl font-bold mb-1 md:mb-2 text-gray-100 font-AnonymousPro">
218228
Project Based Learning
219229
</h3>
220-
<p className="text-white text-xs md:text-sm">
230+
<p className="text-white text-xs sm:text-sm leading-tight sm:leading-snug">
221231
Empowering learners and educators with hands-on
222232
project-based tools that enable creation and real-world
223233
problem-solving.
224234
</p>
225235
</motion.div>
226236

227-
{/* Background Image */}
228-
<motion.img
229-
src={mission.learnImage}
230-
alt="Students learning"
231-
className="w-full rounded-2xl transform hover:scale-105
232-
transition-all duration-500 ease-out"
233-
loading="lazy"
234-
whileHover={{ scale: 1.05 }}
235-
/>
236-
237237
{/* Card on Bottom Right */}
238238
<motion.div
239-
className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto
240-
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
241-
max-w-xs md:max-w-sm transform hover:scale-105
242-
transition-all duration-300 ease-out z-10 border-2 border-white"
239+
className="absolute bottom-2 right-2 bg-black/60
240+
backdrop-blur-sm rounded-lg sm:rounded-xl p-2.5 sm:p-4 md:p-6 shadow-lg
241+
max-w-[180px] sm:max-w-[220px] md:max-w-xs transform hover:scale-105
242+
transition-all duration-300 ease-out z-10 border border-white/50"
243243
whileHover={{ scale: 1.05 }}
244244
>
245-
<h3 className="text-md md:text-lg font-bold mb-1 md:mb-2 text-amber-100 font-AnonymousPro">
245+
<h3 className="text-base sm:text-lg font-bold mb-1 text-amber-100 font-AnonymousPro">
246246
Challenge and Fun: It's hard fun.
247247
</h3>
248-
<p className="text-white text-xs md:text-sm leading-snug">
248+
<p className="text-white text-xs sm:text-sm leading-tight sm:leading-snug">
249249
Bringing interactive, meaningful experiences that make
250250
education exciting and impactful.
251251
</p>

0 commit comments

Comments
 (0)