Integrate opensource

src/assets/stylesheets/main.scss

@@ -35,5 +35,6 @@
 @import "pages/about-us";
 @import "pages/contact-us";
 @import "pages/testimonial";
+@import "pages/opensource";
 /* offcanvas */
 @import "offcanvas";

src/assets/stylesheets/pages/_opensource.scss

@@ -0,0 +1,107 @@
+.section-opensource {
+  margin-top: rem(75px);
+  .section-content {
+    padding: rem(150px 0);
+
+    @include media-breakpoint-down(sm) {
+      padding: 0;
+    }
+
+    &.section-even {
+      background-color: #fafafa;
+    }
+    &.section-odd {
+      background-color: #f4f4f4;
+    }
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(center);
+
+    .section-heading {
+      font-family: Lato-Bold;
+      text-transform: uppercase;
+      font-size: 26pt;
+      color: #333333;
+      margin-bottom: rem(32px);
+      @include media-breakpoint-down(sm) {
+        font-size: 24pt;
+        margin: rem(42px) rem(5px);
+      }
+    }
+
+    .txt-info {
+      font-family: Lato-Light;
+      font-size: 14pt;
+      color: #333333;
+      margin-bottom: rem(42px);
+      @include media-breakpoint-down(sm) {
+        margin: rem(42px) rem(5px);
+        text-align: center;
+      }
+    }
+
+    .btn-wrap {
+      @include media-breakpoint-down(sm) {
+        margin: rem(62px) rem(5px);
+        text-align: center;
+      }
+    }
+
+    .card-carousel {
+      border-radius: rem(20px);
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+      .card-carousel-title {
+        font-family: Lato-Bold;
+        color: #333333;
+        font-size: 18pt;
+      }
+      .card-carousel-description {
+        font-family: Lato-Light;
+        color: #808080;
+        font-size: 14px;
+      }
+      .card-carousel-domain {
+        padding: 8px;
+        border: 1px solid #cf4338;
+        border-radius: 15px;
+        color: #cf4338;
+        font-size: 11px;
+      }
+      .tech-tag {
+        margin: 5px;
+        font-size: 11pt;
+      }
+    }
+
+    .card {
+      &.card-community-event {
+        border-radius: 2rem;
+        width: 75%;
+        margin: auto;
+      }
+
+      .card-body {
+        padding: 0.75rem;
+      }
+
+      .community-event-description {
+        font-size: 11pt;
+      }
+
+      .card-title {
+        font-family: Lato-Bold;
+        font-size: 14pt;
+        margin-bottom: 0.4rem;
+      }
+
+      .card-video {
+        // border-radius: 2.25rem;
+        height: 96px;
+        border-top-left-radius: 2.25rem;
+        border-top-right-radius: 2.25rem;
+      }
+    }
+  }
+}

src/components/layout/Navbar.js

@@ -75,6 +75,11 @@ Component.defaultProps = {
       title: "Success Stories",
       url: routes.SUCCESS_STORIES_URL
     },
+    {
+      id: 10,
+      title: "Open Source",
+      url: routes.OPEN_SOURCE_URL
+    },
     {
       id: 5,
       title: "Blogs",

src/components/opensource/communityEvents.jsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { Spinner } from "reactstrap";
+import { API_BASE_URL } from "../../globalConstants";
+
+const CommunityEvents = (props) => {
+  const [loading, setLoading] = useState(false);
+  const [events, setEvents] = useState([]);
+
+  // helper function to fetch community events
+  const fetchEvents = () => {
+    setLoading(true);
+    return fetch(`${API_BASE_URL}community_events`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }).then((response) => response.json());
+  };
+
+  // useEffect to fetch and store the events data
+  useEffect(() => {
+    const promise = fetchEvents();
+    promise
+      .then((responseData) => {
+        setEvents(responseData.community_events);
+        setLoading(false);
+      })
+      .catch((error) => console.log(error));
+  }, []);
+
+  return (
+    <section className="section-content">
+      <div className="container">
+        <p className="section-heading text-center mb-5">
+          Organising Community Events
+        </p>
+        {loading && (
+          <div className="row d-flex justify-content-center">
+            <Spinner style={{ width: "3rem", height: "3rem" }} />
+          </div>
+        )}
+        {loading === false && (
+          <div className="row justify-content-center">
+            {events.map((event, index) => {
+              return (
+                <div
+                  className="col-xs-12 col-md-6 col-lg-4 mb-4 justify-content-center"
+                  key={index}
+                >
+                  <div className="card card-community-event">
+                    <iframe
+                      className="card-video"
+                      src={event.video}
+                      width="100%"
+                      height="100%"
+                      title={index}
+                      frameBorder="0"
+                      allowFullScreen
+                    />
+                    <div className="card-body">
+                      <p className="card-title text-danger text-center">
+                        {event.name}
+                      </p>
+                      <p className="card-text community-event-description">
+                        {event.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default CommunityEvents;

src/components/opensource/imageCarousel.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Card, CardBody, Badge } from "reactstrap";
+import Media from "react-media";
+import { API_PUBLIC_URL } from "../../globalConstants";
+const ImageCarousel = ({ description, name, tags, image_url }) => {
+  const MobileView = (
+    <>
+      <div className="card-carousel-title mb-2">{name}</div>
+      <img
+        className="img-fluid m-auto"
+        src={`${API_PUBLIC_URL}${image_url}`}
+        alt="open-source-carousel"
+      />
+      <div className="my-2">
+        <span className="card-carousel-domain">Domain Name</span>
+      </div>
+      <p className="card-carousel-description">
+        {description.slice(0, 150)}...
+      </p>
+      {tags.map((tag, index) => (
+        <Badge color="danger tech-tag" key={index}>
+          {tag}
+        </Badge>
+      ))}
+    </>
+  );
+
+  const WebView = (
+    <>
+      <div className="row justify-content-around">
+        <div className="col-sm-5">
+          <div className="my-2">
+            <span className="card-carousel-domain">Domain Name</span>
+          </div>
+          <img
+            src={`${API_PUBLIC_URL}${image_url}`}
+            alt="open-source-carousel"
+          />
+        </div>
+        <div className="col-sm-5">
+          <p className="card-carousel-title mb-2">{name}</p>
+          <p className="card-carousel-description">
+            {description.slice(0, 150)}...
+          </p>
+        </div>
+      </div>
+      <div className="row justify-content-center">
+        {tags.map((tag, index) => (
+          <Badge color="danger tech-tag" key={index}>
+            {tag}
+          </Badge>
+        ))}
+      </div>
+    </>
+  );
+
+  return (
+    <Card className="card-carousel">
+      <CardBody>
+        <div className="container">
+          <Media query="(max-width: 500px)">
+            {(matches) => (matches ? MobileView : WebView)}
+          </Media>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+ImageCarousel.defaultProps = {
+  description: "",
+  name: "",
+  tags: [],
+  image_url: "",
+};
+
+export default React.memo(ImageCarousel);

src/components/opensource/index.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import CommunityEvents from "./communityEvents";
+import SectionFragment from "./sectionFragment";
+
+const OpenSource = (props) => {
+  return (
+    <div>
+      <section className="section-opensource">
+        {props.sectionsData.map((section, index) => {
+          return (
+            <SectionFragment
+              sectionHeading={section.title}
+              textInfo={section.description}
+              sectionId={section.section_id}
+              carouselType={section.carousel_type}
+              index={index}
+              key={section.title}
+            />
+          );
+        })}
+        <CommunityEvents />
+      </section>
+    </div>
+  );
+};
+
+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;