Event Section is responsive in all devices

Author: shree404

src/Components/landingpage/announcement.jsx

@@ -4,6 +4,10 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import eventimg from "../../assets/LandingPage/pr-1.jpg";
 import Button from "./button";
+import { useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "react-bootstrap-icons";
+
+
 function Announcement() {
   const AnnouncementArray = [
     {
@@ -15,30 +19,77 @@ function Announcement() {
     {
       title: "event title",
       image: eventimg,
-      date: "2050",
+      date: "2054",
       venue: "Google Meet",
     },
     {
       title: "event title",
       image: eventimg,
-      date: "2050",
+      date: "2051",
       venue: "Google Meet",
     },
     {
       title: "event title",
       image: eventimg,
-      date: "2050",
+      date: "2052",
+      venue: "Google Meet",
+    },
+    {
+      title: "event title",
+      image: eventimg,
+      date: "2055",
       venue: "Google Meet",
     },
   ];
 
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [itemsToShow, setItemsToShow] = useState(4); 
+
+  const totalItems =  AnnouncementArray.length;
+
+
+  useEffect(() => {
+    const handleResize = () => {
+      const screenWidth = window.innerWidth;
+      if (screenWidth < 576) {
+        setItemsToShow(1);
+      } else if (screenWidth < 992) {
+        setItemsToShow(2);
+      }else if (screenWidth < 1280) {
+        setItemsToShow(3);
+      }
+       else {
+        setItemsToShow(4);
+      }
+    };
+
+    handleResize(); 
+    window.addEventListener('resize', handleResize); 
+
+    return () => window.removeEventListener('resize', handleResize); 
+  }, []);
+
+  const nextItem = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + itemsToShow) % totalItems);
+  };
+
+  const prevItem = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - itemsToShow + totalItems) % totalItems);
+  };
+
+  const itemsToDisplay = [];
+  for (let i = 0; i < itemsToShow; i++) {
+    itemsToDisplay.push(AnnouncementArray[(currentIndex + i) % totalItems]);
+  }
+
   return (
     <>
       <Container className="Announcement">
         <Title title={"ANNOUNCEMENTS"} head={"Our Upcoming Events"} />
         <Row>
-          {AnnouncementArray.map((item, index) => (
-            <Col md={3} key={index} className="Announcement-individual">
+          {itemsToDisplay.map((item, index) => (
+            <Col  key={index} className="Announcement-individual">
               <img src={item.image} className="Announcement-individual__image" alt={`image of ${item.title}`} />
               <div style={{padding:'1rem 0rem'}}>
               <h2 className="Announcement-individual__title">{item.title}</h2>
@@ -49,6 +100,16 @@ function Announcement() {
             </Col>
           ))}
         </Row>
+        <Row>
+        <div className="Announcement-row2">
+        <button onClick={prevItem} className="Announcement-row2__button">
+        <ChevronLeft />
+      </button>
+      <button onClick={nextItem} className="Announcement-row2__button" >
+        <ChevronRight />
+      </button>
+        </div>
+        </Row>
       </Container>
     </>
   );

src/Components/landingpage/programs.jsx

@@ -35,7 +35,7 @@ const ProgramArray = [
         <Title title={"Our Programs"} head={"What We Offer"} />
         <Row>
             {ProgramArray.map((program , index) => (
-                <Col md={4} className="Program">
+                <Col lg={4} md={6} sm={12} className="Program">
                     <img src={program.image} alt="Image for program" />
                     <div className="Program-caption">
                     {program.icon && <program.icon className="Program-icons"/>}

src/Styles/App.css

@@ -82,7 +82,7 @@
   justify-content: center;
 }
 
-.herobutton, .eventbutton {
+.herobutton, .Announcement-row2__button, .eventbutton {
   height: 3rem;
   padding: 0.5rem 1rem;
   text-align: center;
@@ -93,7 +93,7 @@
   background-color: #000080;
   border: none;
 }
-.herobutton:hover, .eventbutton:hover {
+.herobutton:hover, .Announcement-row2__button:hover, .eventbutton:hover {
   color: #000080;
   background-color: white;
 }
@@ -225,6 +225,12 @@
   width: 3rem;
 }
 
+@media screen and (max-width: 768px) {
+  .Program {
+    display: flex;
+    justify-content: center;
+  }
+}
 .Announcement-individual {
   padding: 1.5rem;
   overflow: hidden;
@@ -237,6 +243,20 @@
   text-transform: capitalize;
   font-size: 1rem;
 }
+.Announcement-row2 {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+.Announcement-row2 {
+  display: none;
+}
+
+@media screen and (max-width: 993px) {
+  .Announcement-row2 {
+    display: flex;
+  }
+}
 .Partners .carousel-indicators button {
   display: none;
 }

src/Styles/App.css.map

@@ -18,4 +18,22 @@
             @extend .About-MissionVision__description;
         }
     }
+    &-row2{
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        &__button{
+            @extend .herobutton;
+        }
+    }
+}
+
+.Announcement-row2{
+    display: none;
+}
+
+@media screen and (max-width:993px) {
+    .Announcement-row2{
+        display: flex;
+    } 
 }

src/Styles/LandingPage/_Announcement.scss

@@ -30,3 +30,10 @@
     width: 3rem;
   }
 }
+
+@media screen and (max-width:768px) {
+  .Program{
+    display: flex;
+    justify-content: center;
+  }
+}