(chore): Added Gallery component for the fifth theme

src/components/Gallery/Gallery.md

@@ -0,0 +1,22 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the Gallery Component
+
+This is a reusable component for the gallery built from scratch. It could be used to display pictures of flexible sizes. This Component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+`import {Gallery} from "../components/Gallery";`
+
+## How to handle props to the component
+
+```
+<Gallery  subText="Memories" mainText="Past Year Gallery" data={[{image: "sample image URL", title: "sample image title"}]} />
+```
+
+`subText` prop of type text is the subtitle for the gallery
+`mainText` prop of type text is the main title for gallery
+`data` prop is the array of image-sources along with image-titles

src/components/Gallery/Gallery.stories.js

@@ -0,0 +1,48 @@
+import React from "react"
+
+import { Gallery } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+  title: "General/Gallery",
+  component: Gallery,
+  argTypes: {
+    subText: { control: "text" },
+    mainText: { control: "text" },
+    data: { control: "array" },
+  },
+}
+
+export const gallery = args => <Gallery {...args} />
+
+gallery.args = {
+  subText: "Memories",
+  mainText: "Past Year Gallery",
+  data: [
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203128758-e02f4766-5dfb-4eb0-9e36-8ce2c8883ae4.png",
+      title: "Freshers being mentored",
+    },
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203128871-79b36496-7f5a-4df2-aeef-cda8bbafc6e9.png",
+      title: "Women in Tech",
+    },
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203128989-7d70215d-3b78-4649-b8d0-3187126846fe.png",
+      title: "Amazing work environment",
+    },
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203129183-8c3b6305-9daa-4b79-89f1-642f68cc34fa.png",
+      title: "Made Connections",
+    },
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203129450-deda01a6-f3de-44e8-bb21-c607c4c64bc5.png",
+      title: "Achieved Goals",
+    },
+    {
+      image: "https://user-images.githubusercontent.com/56475750/203129311-c3f54810-aaae-48bb-bc97-61aa6385249c.png",
+      title: "Discussed Creative Ideas",
+    },
+  ],
+}

src/components/Gallery/index.js

@@ -0,0 +1,40 @@
+import React from "react"
+import PropTypes from "prop-types"
+import "./style.sass"
+import { Container } from "react-bootstrap"
+
+export const Gallery = ({ subText, mainText, data }) => {
+  return (
+    <Container>
+      <div className="galleryHeadingsDiv">
+        <p className="gallerySubText">{subText}</p>
+        <h1 className="galleryMainHeading">{mainText}</h1>
+      </div>
+      {data?.length > 0 ? (
+        <div className="gallery">
+          {data.map((item, index) => {
+            return (
+              <div className="pics" key={index}>
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  style={{
+                    width: "100%",
+                  }}
+                />
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        <p className="emptyMessage"> No Pictures Available </p>
+      )}
+    </Container>
+  )
+}
+
+Gallery.propTypes = {
+  subText: PropTypes.string,
+  mainText: PropTypes.string,
+  data: PropTypes.array,
+}

src/components/Gallery/style.sass

@@ -0,0 +1,55 @@
+@import '../../styles/variables.sass'
+
+.galleryHeadingsDiv
+  padding: 20px
+  .gallerySubText
+    font-family: 'Montserrat'
+    font-style: normal
+    font-weight: 700
+    text-align: center
+    font-size: 20px
+    line-height: 39px
+    text-transform: uppercase
+    color: #51AD28
+    @media #{$sm-and-less}
+      font-weight: 500
+  .galleryMainHeading
+    font-family: 'Montserrat'
+    font-style: normal
+    text-align: center
+    font-weight: 700
+    font-size: 45px
+    text-transform: uppercase
+    color: #808080
+    @media #{$sm-and-less}
+      font-size: 30px
+      font-weight: 500
+
+.gallery 
+  column-count: 3
+  -webkit-column-count: 3
+  -moz-column-count: 3
+  padding: 12px
+  .pics
+    transition: all 350ms ease
+    -webkit-transition: all 350ms ease
+    margin-bottom: 12px
+  @media (max-width: 992px)
+    column-count: 2
+    -webkit-column-count: 2
+    -moz-column-count: 2
+  @media #{$sm-and-less}
+    column-count: 1
+    -webkit-column-count: 1
+    -moz-column-count: 1
+
+.emptyMessage
+  font-family: 'Montserrat'
+  font-style: normal
+  text-align: center
+  font-size: 25px
+  color: #B2B6BB
+
+
+
+