(chore): Added Summit Card component for the fifth theme

src/components/SummitCard/SummitCard.md

@@ -0,0 +1,36 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the SummitCard Component
+
+This is a resuasble component for displaying data related to conferences in card format. This Component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+
+`import SummitCard from "../components/SummitCard";`
+
+## How to handle props to the component
+
+```
+<SummitCard 
+      title = "sample-title"
+      subText= "sample-subtext"
+      emptyMessage= "sample-empty-message"
+      cardData =  {[
+        {
+            image:"image-source",
+            title:"card-title",
+            description:"card-discription-content",
+        }
+    ]}
+/> 
+```
+`title` prop is the title at the beginning of the component
+`subText` prop is the sub heading or additional info related to the content of component
+`emptyMessage` prop is the message to be displayed when there is no card data
+`cardData` prop is an array containing data to be displayed in cards ( the object inside the array contains cardtitle , card content and image source)
+
+

src/components/SummitCard/SummitCard.stories.js

@@ -0,0 +1,46 @@
+import React from "react"
+
+import { SummitCard } from "./index"
+
+import  "bootstrap/dist/css/bootstrap.css"
+
+export default {
+    title: "General/SummitCard",
+    component: SummitCard,
+    argTypes: {
+        title: { control: "text" },
+        subText: { control: "text"},
+        cardData: { control: "array"},
+        emptyMessage: { control: "text"},
+    },
+}
+
+export const summitCard = args => <SummitCard {...args} />
+
+summitCard.args = {
+    title: "Summit Meeting",
+    subText: "What we offer",
+    cardData: [
+        {
+            image:"https://user-images.githubusercontent.com/109169835/204906679-43affa5c-22d5-43d3-adb1-89835a781974.png",
+            title:"Conference",
+            description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque",
+        },
+        {
+            image:"https://user-images.githubusercontent.com/109169835/204906976-d3f51e01-dd36-4442-b72f-792f480c30e2.png",
+            title:"Conference",
+            description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque",
+        },
+        {
+            image:"https://user-images.githubusercontent.com/109169835/204906877-115fecd8-8e8a-4bd8-abc1-73eacb6b3749.png",
+            title:"Conference",
+            description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque",
+        },
+        {
+            image:"https://user-images.githubusercontent.com/109169835/204906818-be5d2619-6137-4eed-bcb4-af2f82a1bce1.png",
+            title:"Conference",
+            description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque",
+        }
+    ],
+    emptyMessage:"No data Available",
+}

src/components/SummitCard/index.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types"
+import  "./style.sass"
+
+import { Card } from "react-bootstrap";
+
+export const SummitCard = ({title , subText , cardData , emptyMessage}) => {
+    return(
+      <div className="SummitCardWrapper">
+          <div className="SummitCardHeadingWrapper">
+            <p className="SummitCardTitle">{title}</p>
+            <h1 className="SummitCardSubText">{subText}</h1>
+          </div>
+          {cardData?.length > 0 ? (
+            <div className="cardItem">
+              {cardData.map((item, index) => {
+                return (
+                  <Card>
+                    <div className="cardImageDisplay">
+                      <div className="imageWrapper">
+                        <img
+                          src={item.image}
+                          alt={item.title}
+                        />
+                      </div>
+                    </div>
+                    <h2 className="cardItemTitle">{item.title}</h2>
+                    <p className="cardItemDescription">{item.description}</p>
+                  </Card >
+                )
+              })}
+            </div>
+          ) : (
+            <p className="emptyMessage"> {emptyMessage} </p>
+          )}
+      </div>
+    )
+}
+
+
+SummitCard.propTypes = {
+    title: PropTypes.string,
+    subText: PropTypes.string,
+    cardData: PropTypes.array,
+    emptyMessage: PropTypes.string,
+}

src/components/SummitCard/style.sass

@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap')
+
+.SummitCardHeadingWrapper
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    text-transform: uppercase
+    font-family: inter
+    .SummitCardTitle
+        color: #54AD28
+        font-size: 2rem
+        font-weight: 500
+        margin: 20px
+        @media (max-width: 576px)
+            font-size: 1.5rem
+    .SummitCardSubText
+        color: #6D6D6D
+        font-family: inter
+        font-size: 3rem
+        font-weight: 700
+        margin-bottom: 80px
+        @media (max-width: 576px)
+            font-size: 2.25rem
+
+.cardItem
+    font-family: inter
+    display: grid
+    margin: auto
+    grid-template-columns: repeat(4,1fr)
+    max-width: 1600px
+    @media( max-width: 1300px)
+        grid-template-columns: repeat(3,1fr)
+    @media( max-width: 896px)
+        grid-template-columns: repeat(2,1fr)
+    @media (max-width: 576px)
+        grid-template-columns: repeat(1,1fr)
+
+    .card
+        border: 1px solid #14F195
+        border-radius: 16px
+        height: 430px
+        max-width: 344px
+        width: inherit
+        display: flex
+        justify-content: center
+        align-items: center
+        margin: 10px
+        .cardImageDisplay
+            height: 217px
+            display: flex
+            justify-content: center
+            align-items: center
+            .imageWrapper
+                height: 155px
+                width: 155px
+                background: linear-gradient(130.58deg, #14F195 15.22%, rgba(97, 232, 232, 0.609375) 85.92%, rgba(217, 217, 217, 0) 85.93%)
+                border-radius: 100%
+                display: flex
+                align-items: center
+                justify-content: center
+        .cardItemTitle
+            font-weight: 600
+            margin-bottom: 2rem
+            @media (max-width: 576px)
+                font-size: 1.75rem
+                margin-bottom: 1rem
+        .cardItemDescription
+            font-weight: 500
+            font-size: 1.5rem
+            color: #5D5E8D
+            line-height: 1.815rem
+            padding: 1rem
+            @media (max-width: 576px)
+                font-size: 1.5rem