Pavithran

ComputerSocietyVITC · Jun 17, 2024 · 8ac4550 · 8ac4550
1 parent 75d0ddd
commit 8ac4550
Show file tree

Hide file tree

Showing 31 changed files with 167 additions and 154 deletions.
diff --git a/src/1-min.jpeg b/src/1-min.jpeg
diff --git a/src/2-min.jpeg b/src/2-min.jpeg
diff --git a/src/3-min.jpeg b/src/3-min.jpeg
diff --git a/src/components/Accordian/imageAccordian.jsx b/src/components/Accordian/imageAccordian.jsx
@@ -13,10 +13,10 @@ const ImageAccordian = ({ itemms, setActiveItem }) => {
             {items.map((item, index) => {
             const isActive = active === index ? "active" : "";
             return (
-                <div className='rounded-[20px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[456px] text-center'>
+                <div className='rounded-[20px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[456px] items-center text-center'>
                 <div
                 key={item.header}
-                className={`image-accordion-item ${isActive}`}
+                className={`image-accordion-item  ${isActive}`}
                 onClick={() => handleToggle(index)}
                 >
                 <h2 className='out_content -rotate-90 flex'>{item.header}</h2>

diff --git a/src/components/Accordian/style.css b/src/components/Accordian/style.css
@@ -5,7 +5,7 @@
     align-items: center;
     gap: 12px;
     cursor: pointer;
-    font-family: 'montserrat';
+    font-family: 'Montserrat', sans-serif; /* Corrected font-family syntax */
 }
 
 .image-accordion-item {
@@ -14,13 +14,15 @@
     width: 120px;
     height: 450px;
     border-radius: 20px;
-    padding-bottom:70px;
     display: flex;
-    align-items: flex-end;
-    background: linear-gradient(to bottom,#061b24, #072031,#061b24);
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    background: linear-gradient(to bottom, #061b24, #072031, #061b24);
     opacity: 1;
     transition: 1s;
+    padding-top: 120px;
 }
+
 .image-accordion :is(h2) {
     margin: 0;
 }
@@ -29,6 +31,7 @@
     font-size: 28px;
     font-weight: 700;
     color: #6CEDFF;
+    text-align: center; /* Center text */
 }
 
 .image-accordion-item.active {
@@ -39,29 +42,36 @@
 .image-accordion-item .content {
     position: absolute;
     width: auto;
-    top:40%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     z-index: 1;
     opacity: 0;
     visibility: hidden;
-    padding: 20px 20px 20px 20px;
+    padding: 20px;
     display: flex;
+    flex-direction: column; /* Stack children vertically */
     align-items: center;
+    justify-content: center;
     gap: 14px;
     transition: 0.5s;
-  }
-  .image-accordion-item .out_content {
+}
+
+.image-accordion-item .out_content {
     width: 100px;
     z-index: 1;
-    padding: 35px 20px 20px 70px;
+    text-align: center;
+    padding: 35px 20px;
     gap: 1px;
     transition: 0.5s;
-  }
-  
+}
+
 .image-accordion-item.active .content {
     opacity: 1;
     visibility: visible;
 }
+
 .image-accordion-item.active .out_content {
     opacity: 0;
-    visibility:hidden;
-}
+    visibility: hidden;
+}
diff --git a/src/data/images/8 copy 2.jpg → src/data/images/events/event1/8 copy 2.jpg b/src/data/images/8 copy 2.jpg → src/data/images/events/event1/8 copy 2.jpg
diff --git a/src/data/images/8 copy.jpg → src/data/images/events/event1/8 copy.jpg b/src/data/images/8 copy.jpg → src/data/images/events/event1/8 copy.jpg
diff --git a/src/data/images/8.jpg → src/data/images/events/event1/main.jpg b/src/data/images/8.jpg → src/data/images/events/event1/main.jpg
diff --git a/src/data/images/9 copy 2.jpg → src/data/images/events/event2/9 copy 2.jpg b/src/data/images/9 copy 2.jpg → src/data/images/events/event2/9 copy 2.jpg
diff --git a/src/data/images/9 copy.jpg → src/data/images/events/event2/9 copy.jpg b/src/data/images/9 copy.jpg → src/data/images/events/event2/9 copy.jpg
diff --git a/src/data/images/9.jpg → src/data/images/events/event2/main.jpg b/src/data/images/9.jpg → src/data/images/events/event2/main.jpg
diff --git a/src/data/images/10 copy 2.jpg → src/data/images/events/event3/10 copy 2.jpg b/src/data/images/10 copy 2.jpg → src/data/images/events/event3/10 copy 2.jpg
diff --git a/src/data/images/10 copy.jpg → src/data/images/events/event3/10 copy.jpg b/src/data/images/10 copy.jpg → src/data/images/events/event3/10 copy.jpg
diff --git a/src/data/images/10.jpg → src/data/images/events/event3/main.jpg b/src/data/images/10.jpg → src/data/images/events/event3/main.jpg
diff --git a/src/data/images/11 copy 2.jpg → src/data/images/events/event4/11 copy 2.jpg b/src/data/images/11 copy 2.jpg → src/data/images/events/event4/11 copy 2.jpg
diff --git a/src/data/images/11 copy.jpg → src/data/images/events/event4/11 copy.jpg b/src/data/images/11 copy.jpg → src/data/images/events/event4/11 copy.jpg
diff --git a/src/data/images/11.jpg → src/data/images/events/event4/main.jpg b/src/data/images/11.jpg → src/data/images/events/event4/main.jpg
diff --git a/src/data/images/12 copy 2.jpg → src/data/images/events/event5/12 copy 2.jpg b/src/data/images/12 copy 2.jpg → src/data/images/events/event5/12 copy 2.jpg
diff --git a/src/data/images/12 copy.jpg → src/data/images/events/event5/12 copy.jpg b/src/data/images/12 copy.jpg → src/data/images/events/event5/12 copy.jpg
diff --git a/src/data/images/12.jpg → src/data/images/events/event5/main.jpg b/src/data/images/12.jpg → src/data/images/events/event5/main.jpg
diff --git a/src/data/images/13 copy 2.jpg → src/data/images/events/event6/13 copy 2.jpg b/src/data/images/13 copy 2.jpg → src/data/images/events/event6/13 copy 2.jpg
diff --git a/src/data/images/13 copy.jpg → src/data/images/events/event6/13 copy.jpg b/src/data/images/13 copy.jpg → src/data/images/events/event6/13 copy.jpg
diff --git a/src/data/images/13.jpg → src/data/images/events/event6/main.jpg b/src/data/images/13.jpg → src/data/images/events/event6/main.jpg
diff --git a/src/data/images/14 copy 2.jpg → src/data/images/events/event7/14 copy 2.jpg b/src/data/images/14 copy 2.jpg → src/data/images/events/event7/14 copy 2.jpg
diff --git a/src/data/images/14 copy.jpg → src/data/images/events/event7/14 copy.jpg b/src/data/images/14 copy.jpg → src/data/images/events/event7/14 copy.jpg
diff --git a/src/data/images/14.jpg → src/data/images/events/event7/main.jpg b/src/data/images/14.jpg → src/data/images/events/event7/main.jpg
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/events.jsx b/src/pages/events.jsx
@@ -1,77 +1,89 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/effect-coverflow';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import { Autoplay, EffectCoverflow, Pagination } from 'swiper/modules';
-import image1 from '../data/images/12.jpg';
 import { useNavigate } from 'react-router-dom';
 
+// Utility function to load images dynamically
+const importAll = (r) => {
+    let images = {};
+    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
+    return images;
+}
+
+// Load all images from the events subfolders
+const images = importAll(require.context('../data/images/events', true, /main\.jpg$/));
+
 const Events = () => {
     const navigate = useNavigate();
 
-    const [slides] = useState([
-        { src: image1, eventName: 'Event 1' },
-        { src: image1, eventName: 'Event 2' },
-        { src: image1, eventName: 'Event 3' },
-        { src: image1, eventName: 'Event 4' },
-        { src: image1, eventName: 'Event 5' },
-    ]);
-    const [currentEvent, setCurrentEvent] = useState(slides[0].eventName);
+    const [slides, setSlides] = useState([]);
+    const [currentEvent, setCurrentEvent] = useState('');
+
+    useEffect(() => {
+        const eventSlides = Object.keys(images).map((key, index) => {
+            const eventName = `Event${index + 1}`;
+            return { src: images[key], eventName };
+        });
+        setSlides(eventSlides);
+        if (eventSlides.length > 0) {
+            setCurrentEvent(eventSlides[0].eventName);
+        }
+    }, []);
 
     const handleNavigateToGallery = () => {
-        navigate('/gallery');
+        navigate(`/${currentEvent.toLowerCase()}_gallery`);
     };
 
     const handleSlideChange = (swiper) => {
         setCurrentEvent(slides[swiper.activeIndex].eventName);
     };
 
     return (
-        <>
-            <div className="min-h-screen gradient events-container">
-                <div className="text-white text-9xl font-bold text-center pb-16">{currentEvent}</div>
-                <Swiper
-                    effect={"coverflow"}
-                    grabCursor={true}
-                    centeredSlides={true}
-                    loop={false}
-                    slidesPerView={3}
-                    coverflowEffect={{
-                        rotate: 0,
-                        stretch: 0,
-                        depth: 100,
-                        modifier: 1,
-                    }}
-                    pagination={{ el: '.swiper-pagination', clickable: true }}
-                    modules={[Autoplay, EffectCoverflow, Pagination]}
-                    className="swiper-container"
-                    onSlideChange={handleSlideChange}
-                    autoplay={{
-                        delay: 2000,
-                        stopOnLastSlide: false,
-                        disableOnInteraction: false,
-                        speed: 500
-                    }}
-                >
-                    {slides.map((slide, index) => (
-                        <SwiperSlide key={index}>
-                            <img src={slide.src} alt={slide.eventName} />
-                        </SwiperSlide>
-                    ))}
-                    <div className="slider-controler">
-                        <div className="swiper-pagination"></div>
-                    </div>
-                </Swiper>
-                <button
-                    className='border-2 border-solid border-teal-500 p-3 rounded-full bg-gradient-to-r from-b_col1 to-b_col2 float-end'
-                    onClick={handleNavigateToGallery}
-                >
-                    <span className='text-teal-500 text-montserrat font-light text-lg'>View Gallery &gt;</span>
-                </button>
-            </div>
-        </>
+        <div className="min-h-screen gradient events-container">
+            <div className="text-white text-6xl font-bold text-center pt-12 pb-4">{currentEvent}</div>
+            <Swiper
+                effect={"coverflow"}
+                grabCursor={true}
+                centeredSlides={true}
+                loop={false}
+                slidesPerView={3}
+                coverflowEffect={{
+                    rotate: 0,
+                    stretch: 0,
+                    depth: 100,
+                    modifier: 1,
+                }}
+                pagination={{ el: '.swiper-pagination', clickable: true }}
+                modules={[Autoplay, EffectCoverflow, Pagination]}
+                className="swiper-container"
+                onSlideChange={handleSlideChange}
+                autoplay={{
+                    delay: 2000,
+                    stopOnLastSlide: false,
+                    disableOnInteraction: false,
+                    speed: 500
+                }}
+            >
+                {slides.map((slide, index) => (
+                    <SwiperSlide key={index}>
+                        <img src={slide.src} alt={slide.eventName} />
+                    </SwiperSlide>
+                ))}
+                <div className="slider-controler">
+                    <div className="swiper-pagination"></div>
+                </div>
+            </Swiper>
+            <button
+                className='border-2 border-solid border-teal-500 p-3 rounded-full bg-gradient-to-r from-b_col1 to-b_col2 float-end'
+                onClick={handleNavigateToGallery}
+            >
+                <span className='text-teal-500 text-montserrat font-light text-lg'>View Gallery &gt;</span>
+            </button>
+        </div>
     );
 };
 

diff --git a/src/pages/gallery.jsx b/src/pages/gallery.jsx
@@ -5,80 +5,56 @@ import 'swiper/css/effect-coverflow';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import { Autoplay, EffectCoverflow, Pagination } from 'swiper/modules';
-import image1 from '../data/images/12.jpg';
-import image2 from '../data/images/11.jpg';
-import { useNavigate } from 'react-router-dom';
 
-const Gallery = () => {
-    const navigate = useNavigate();
-
-    const [slides] = useState([
-        { src: image1, eventName: 'This so and so happened in this event, you could literally see it with your own eyes.' },
-        { src: image2, eventName: 'Event 2' },
-        { src: image1, eventName: 'Event 3' },
-        { src: image1, eventName: 'Event 4' },
-        { src: image1, eventName: 'Event 5' },
-    ]);
+const Gallery = ({ slides }) => {
     const [currentEvent, setCurrentEvent] = useState(slides[0].eventName);
 
-    const handleNavigateToGallery = () => {
-        navigate('/gallery');
-    };
-
     const handleSlideChange = (swiper) => {
         setCurrentEvent(slides[swiper.activeIndex].eventName);
     };
 
     return (
-        <>
-            <div className="min-h-screen bg-slate-950 events-container">
-                <div className="text-white text-9xl font-bold text-center pb-16">{currentEvent}</div>
-                <Swiper
-                    effect={"coverflow"}
-                    grabCursor={true}
-                    centeredSlides={true}
-                    loop={true}
-                    slidesPerView={5}
-                    coverflowEffect={{
-                        rotate: -10,
-                        stretch: 20,
-                        depth: 350,
-                        modifier: 1,
-                    }}
-                    pagination={{ el: '.swiper-pagination', clickable: true }}
-                    modules={[Autoplay, EffectCoverflow, Pagination]}
-                    onSlideChange={handleSlideChange}
-                    autoplay={{
-                        delay: 5000,
-                        stopOnLastSlide: true,
-                        disableOnInteraction: true,
-                        speed: 200,
-                    }}
-                >
-                    {slides.map((slide, index) => (
-                        <SwiperSlide key={index}>
-                            <section className='bg-[#f4f3e9] px-4 pt-4 flex flex-col items-center justify-center'>
-                                <img
-                                    src={slide.src}
-                                    alt={slide.eventName}
-                                    style={{ maxHeight: '500px', maxWidth: '100%' }}
-                                />
-                                <section className='text-center py-12'>{slide.eventName}</section>
-                            </section>
-                        </SwiperSlide>
-                    ))}
-                    <div className="slider-controler">
-                        <div className="swiper-pagination"></div>
-                    </div>
-                </Swiper>
-                <button
-                    className='border-2 border-solid border-teal-500 p-3 rounded-full bg-gradient-to-r from-b_col1 to-b_col2 float-end'
-                    onClick={handleNavigateToGallery}
-                >
-                    <span className='text-teal-500 text-montserrat font-light text-lg'>View Gallery &gt;</span>
-                </button>
-            </div>
-        </>
+        <div className="min-h-screen bg-slate-950 events-container">
+            <div className="text-white text-9xl font-bold text-center pb-16">{currentEvent}</div>
+            <Swiper
+                effect={"coverflow"}
+                grabCursor={true}
+                centeredSlides={true}
+                loop={true}
+                slidesPerView={5}
+                coverflowEffect={{
+                    rotate: -10,
+                    stretch: 20,
+                    depth: 350,
+                    modifier: 1,
+                }}
+                pagination={{ el: '.swiper-pagination', clickable: true }}
+                modules={[Autoplay, EffectCoverflow, Pagination]}
+                onSlideChange={handleSlideChange}
+                autoplay={{
+                    delay: 5000,
+                    stopOnLastSlide: true,
+                    disableOnInteraction: true,
+                    speed: 200,
+                }}
+            >
+                {slides.map((slide, index) => (
+                    <SwiperSlide key={index}>
+                        <section className='bg-[#f4f3e9] px-4 pt-4 flex flex-col items-center justify-center'>
+                            <img
+                                src={slide.src}
+                                alt={slide.eventName}
+                                style={{ maxHeight: '500px', maxWidth: '100%' }}
+                            />
+                            <section className='text-center py-12'>{slide.eventName}</section>
+                        </section>
+                    </SwiperSlide>
+                ))}
+                <div className="slider-controler">
+                    <div className="swiper-pagination"></div>
+                </div>
+            </Swiper>
+        </div>
     );
 };