@@ -211,21 +211,21 @@ const ImageGallery = () => {
211211 ] ;
212212
213213 return (
214- < section className = "py-16 bg-white" >
215- < div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 " >
216- < div className = "text-center mb-12 " >
214+ < section className = "py-12 bg-white" >
215+ < div className = "max-w-[95%] mx-auto" >
216+ < div className = "text-center mb-8 " >
217217 < h2 className = "text-3xl font-extrabold text-gray-900 sm:text-4xl" >
218218 Learn Together. Grow Together.
219219 </ h2 >
220- < p className = "mt-4 text-xl text-gray-600" >
220+ < p className = "mt-3 text-xl text-gray-600" >
221221 A Journey Through Our Global Tech Community Events
222222 </ p >
223223 </ div >
224224
225225 { /* Scroll Container */ }
226226 < div
227227 ref = { scrollRef }
228- className = "flex gap-6 overflow-x-auto pb-8 cursor-grab active:cursor-grabbing scroll-smooth hide-scrollbar"
228+ className = "flex gap-4 overflow-x-auto pb-6 cursor-grab active:cursor-grabbing scroll-smooth hide-scrollbar -mx-2 px-2 "
229229 style = { {
230230 WebkitOverflowScrolling : 'touch' ,
231231 scrollSnapType : 'x mandatory' ,
@@ -236,18 +236,19 @@ const ImageGallery = () => {
236236 { images . map ( ( image , index ) => (
237237 < div
238238 key = { index }
239- className = "flex-none w-[300px ] group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl scroll-snap-align-start"
239+ className = "flex-none w-[280px] md:w-[320px ] group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl scroll-snap-align-start"
240240 >
241- < div className = "aspect-w-16 aspect-h-9 " >
241+ < div className = "relative pt-[66.67%] " >
242242 < img
243243 src = { image . src }
244244 alt = { image . alt }
245- className = "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
245+ className = "absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
246+ loading = "lazy"
246247 />
247248 </ div >
248- < div className = "absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" >
249+ < div className = "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" >
249250 < div className = "absolute bottom-0 left-0 right-0 p-4" >
250- < p className = "text-white text-lg font-semibold" >
251+ < p className = "text-white text-base font-semibold line-clamp-2 " >
251252 { image . caption }
252253 </ p >
253254 </ div >
@@ -257,9 +258,15 @@ const ImageGallery = () => {
257258 </ div >
258259
259260 { /* Scroll Indicator */ }
260- < div className = "mt-8 flex justify-center" >
261- < div className = "text-sm text-gray-500" >
262- ← Scroll or drag to see more photos →
261+ < div className = "mt-6 flex justify-center" >
262+ < div className = "text-sm text-gray-500 flex items-center gap-2" >
263+ < svg className = "w-4 h-4" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
264+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M15 19l-7-7 7-7" />
265+ </ svg >
266+ < span > Scroll or drag to explore more</ span >
267+ < svg className = "w-4 h-4" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
268+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9 5l7 7-7 7" />
269+ </ svg >
263270 </ div >
264271 </ div >
265272 </ div >
@@ -271,6 +278,12 @@ const ImageGallery = () => {
271278 .scroll-snap-align-start {
272279 scroll-snap-align: start;
273280 }
281+ .line-clamp-2 {
282+ display: -webkit-box;
283+ -webkit-line-clamp: 2;
284+ -webkit-box-orient: vertical;
285+ overflow: hidden;
286+ }
274287 ` } </ style >
275288 </ section >
276289 ) ;
0 commit comments