+ );
+};
+
+OpenSource.defaultProps = {
+ sectionsData: [
+ {
+ title: "Driving Open Source",
+ section_id: "open_source_contributions",
+ carousel_type: "image",
+ description:
+ "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+ },
+ {
+ title: "Trainings at Josh",
+ section_id: "trainings",
+ carousel_type: "video",
+ description:
+ "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+ },
+ {
+ title: "Talks at Josh",
+ section_id: "community_events",
+ carousel_type: "video",
+ description:
+ "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+ },
+ {
+ title: "Josh Hackathon",
+ section_id: "hackathons",
+ carousel_type: "image",
+ description:
+ "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+ },
+ ],
+};
+
+export default OpenSource;
diff --git a/src/components/opensource/sectionFragment.jsx b/src/components/opensource/sectionFragment.jsx
new file mode 100644
index 00000000..e9695d1d
--- /dev/null
+++ b/src/components/opensource/sectionFragment.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Row, Col } from "reactstrap";
+import JoshCarousel from "../home/carousel";
+import ImageCarousel from "./imageCarousel";
+import Media from "react-media";
+import { API_BASE_URL } from "../../globalConstants";
+import VideoCarousel from "./videoCarousel";
+
+const SectionFragment = ({
+ sectionHeading,
+ textInfo,
+ index,
+ sectionId,
+ carouselType,
+}) => {
+ const [sectionData, setSectionData] = useState([]);
+ let alignmentRight = index % 2 === 0;
+
+ // helper function to fetch the data for sepecific section from API
+ const fetchSectionData = useCallback(() => {
+ return fetch(`${API_BASE_URL}${sectionId}`, {
+ method: "GET",
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ }).then((response) => response.json());
+ }, [sectionId]);
+
+ // helper function to get array of carousel items.
+ const getCarouselItems = () => {
+ if (sectionData.length !== 0) {
+ return sectionData[Object.keys(sectionData)[0]].map((data) =>
+ // based on the carousel type for specific section return image or video carousel
+ carouselType === "image" ? (
+
+ ) : (
+
+ )
+ );
+ }
+ return [];
+ };
+
+ // useEffect for fetching and locally storing the data
+ useEffect(() => {
+ const promise = fetchSectionData();
+ promise
+ .then((responseData) => {
+ setSectionData(responseData);
+ })
+ .catch((error) => console.log(error));
+ }, [fetchSectionData, sectionId]);
+
+ const carouselSettings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ arrows: false,
+ autoplay: true,
+ autoplaySpeed: 3000,
+ dotsClass: "slick-dots bottom-100",
+ };
+
+ // get carousel section
+ const SectionCarousel = (
+
+ );
+
+ // get section textual context ie. heading,description & button
+ const SectionDescription = (
+ <>
+
+