Merge pull request #21 from NepTechTribe/new

Partners carousel added

Author: shree404

src/Components/landingpage/partners.jsx

@@ -0,0 +1,59 @@
+import Title from "./title";
+import img1 from "../../assets/LandingPage/pr-1.jpg";
+import React from "react";
+import { Container, Carousel, Row, Col } from "react-bootstrap";
+import img2 from "../../assets/LandingPage/about.jpg";
+
+const images = [img1, img1, img2, img1, img2, img2, img2];
+
+const generateInfiniteCarouselItems = (images, numItems) => {
+  const totalImages = images.length;
+  const sequence = [];
+
+  for (let i = 0; i < numItems; i++) {
+    const startIndex = i % totalImages;
+    const itemIndices = [
+      (startIndex + 0) % totalImages,
+      (startIndex + 1) % totalImages,
+      (startIndex + 2) % totalImages,
+      (startIndex + 3) % totalImages,
+    ];
+    sequence.push(itemIndices);
+  }
+
+  return sequence;
+};
+
+function Partners() {
+  const carouselItems = generateInfiniteCarouselItems(
+    images,
+    images.length * 2
+  );
+  return (
+    <> <Title title={"PARTNERS"} head={"Our Partners "} />
+    <div className="Partners">
+      <Container >
+        <Carousel>
+          {carouselItems.map((seq, index) => (
+            <Carousel.Item key={index}>
+              <Row>
+                {seq.map((imgIndex, i) => (
+                  <Col key={i} className="Partners-col">
+                    <img
+                      src={images[imgIndex]}
+                      alt={`Slide ${imgIndex + 1}`}
+                      className="Partners-col__image"
+                    />
+                  </Col>
+                ))}
+              </Row>
+            </Carousel.Item>
+          ))}
+        </Carousel>
+      </Container>
+      </div>
+    </>
+  );
+}
+
+export default Partners;

src/Components/landingpage/pastevent.jsx

@@ -43,7 +43,7 @@ function PastEvent() {
   const nextItem = () => handleNavigation(itemsToShow);
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
+    <div style={{ display: 'flex', alignItems: 'center', padding:'0rem 1rem' }}>
       <button onClick={prevItem} className="herobutton" disabled={currentIndex === 0}>
         <ChevronLeft />
       </button>

src/Pages/Landingpage.jsx

@@ -4,6 +4,7 @@ import AboutUs from "../Components/landingpage/about";
 import Programs from "../Components/landingpage/programs";
 import Announcement from "../Components/landingpage/announcement";
 import PastEvent from "../Components/landingpage/pastevent";
+import Partners from "../Components/landingpage/partners";
 
 function LandingPage(){
     return(
@@ -14,6 +15,7 @@ function LandingPage(){
         <Programs/>
         <Announcement/>
         <PastEvent/>
+        <Partners/>
         </>
     )
 }

src/Styles/App.css

@@ -197,4 +197,29 @@
 .Announcement-individual__title {
   text-transform: capitalize;
   font-size: 1rem;
+}
+.Partners .carousel-indicators button {
+  display: none;
+}
+
+.Partners .carousel-control-prev,
+.carousel-control-next {
+  display: none;
+}
+
+.Partners {
+  padding: 2rem 0rem;
+  background-color: #e0e0f2;
+  display: flex;
+  justify-content: center;
+}
+.Partners-col {
+  height: 10rem;
+  width: 10rem;
+  display: flex;
+  justify-content: center;
+}
+.Partners-col__image {
+  height: 10rem;
+  width: 10rem;
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css.map

@@ -5,4 +5,5 @@
 @import 'Title';
 @import 'About';
 @import 'Program';
-@import 'Announcement';
+@import 'Announcement';
+@import 'Partners';

src/Styles/LandingPage/_Index.scss

@@ -0,0 +1,28 @@
+.Partners .carousel-indicators button{
+    display: none;
+  
+}
+
+.Partners 
+.carousel-control-prev,
+.carousel-control-next {
+    display: none;
+}
+
+
+.Partners{
+    padding: 2rem 0rem;
+        background-color: #e0e0f2 ;
+        display: flex;
+        justify-content: center;
+    &-col{
+        height: 10rem;
+        width: 10rem;
+        display: flex;
+        justify-content: center;
+        &__image{
+            height: 10rem;
+            width: 10rem;  
+        }
+    }
+}