Added SpeakerCard Component

src/components/SpeakerCard/App.js

@@ -0,0 +1,52 @@
+import React from "react"
+import PropTypes from "prop-types"
+import  "./App.sass"
+
+
+export const SpeakerCard = ({title , subText , cardData , emptyMessage}) => {
+    return(
+          <div className="SpeakerCardFifth">
+          <div className="SpeakerCardHeadingWrapper">
+            <p className="SpeakerCardTitle">{title}</p>
+            <h1 className="SpeakerCardSubText">{subText}</h1>
+          </div>
+          {cardData?.length > 0 ? (
+            <div className="cardItem">
+              {cardData.map((item, index) => {
+                return (
+
+                  <div className="CardTextOver">
+
+
+                        <img src={item.image}
+
+                          alt={item.title}
+                        />
+                    <div className="caption">
+
+                    <p className="caption1">{item.title}  </p>
+                    <p className="caption2">{item.designation}</p>
+
+
+                  </div >
+
+                  </div>
+
+                )
+              })}
+            </div>
+          ): (
+            <p className="emptyMessage"> {emptyMessage} </p>
+          )}
+          </div>
+
+    )
+}
+
+
+SpeakerCard.propTypes = {
+    title: PropTypes.string,
+    subText: PropTypes.string,
+    cardData: PropTypes.array,
+    emptyMessage: PropTypes.string,
+}

src/components/SpeakerCard/App.sass

@@ -0,0 +1,122 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap')
+
+.SpeakerCardHeadingWrapper
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    margin: auto
+    min-width: 600px
+
+
+
+
+    .SpeakerCardTitle
+       font-family: 'Montserrat'
+       font-style: normal
+       font-weight: 500
+       text-align: center
+       font-size: 20px
+       line-height: 39px
+       text-transform: uppercase
+       color: #51AD28
+       margin: 20px
+       align-items: center
+       justify-content: center
+
+
+
+    .SpeakerCardSubText
+        font-family: 'Montserrat'
+        font-style: normal
+        margin-bottom: 80px
+        font-weight: 600
+        font-size: 45px
+        text-align: center
+
+        color: #808080
+        align-items: center
+        justify-content: center
+
+
+
+
+
+.cardItem
+    font-family: inter
+    display: grid
+    grid-gap: 1rem
+    grid-template-rows: auto
+    margin: auto
+    align-items: center
+    justify-content: center
+    padding: 0 1rem
+    grid-template-columns: repeat(3,1fr)
+    min-width: 600px
+    max-width: 1300px
+    @media( max-width: 1300px)
+        grid-template-columns: repeat(3,1fr)
+    @media( max-width: 1200px)
+        grid-template-columns: repeat(2,1fr)
+    @media (max-width: 760px)
+        grid-template-columns: repeat(1,1fr)
+
+
+    .CardTextOver
+        position: relative
+        align-items: center
+        justify-content: center
+        margin: auto
+
+
+        .img
+            width: 100%
+            height: 100%
+
+
+
+        .caption
+          display: flex
+          flex-direction: column
+
+          height: auto
+          position: absolute
+          bottom: 33.36px
+          left: 0
+          padding: 0 10px
+
+          max-width: 100%
+
+
+
+          .caption1
+
+            padding: 0 1rem
+
+
+
+            position: relative
+
+            font-family: 'Montserrat'
+            font-style: normal
+            font-weight: 700
+            font-size: 32px
+            line-height: 39px
+            color: #FFFFFF
+            width: 272px
+            height: 47.48px
+          .caption2
+
+            padding: 0 1rem
+            margin: 0
+            position: relative
+            font-family: 'Montserrat'
+            font-style: normal
+            font-weight: 700
+            line-height: 29px
+            font-size: 24px
+            width: 126.32px
+            height: 39.78px
+
+            color: #51AD28

src/components/SpeakerCard/SpeakerCard.md

@@ -0,0 +1,34 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the SpeakerCard Component
+
+This is a reuasble 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 SpeakerCard from "../components/SpeakerCard";`
+
+## How to handle props to the component
+
+```
+<SpeakerCard
+      title = "sample-title"
+      subText= "sample-subtext"
+      emptyMessage= "sample-empty-message"
+      cardData =  {[
+        {
+            image:"image-source",
+            title:"card-title",
+            description:"card-description-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/SpeakerCard/SpeakerCard.stories.js

@@ -0,0 +1,63 @@
+import React from "react"
+
+import { SpeakerCard } from "./App"
+
+
+
+
+export default {
+    title: "General/SpeakerCardCard",
+    component: SpeakerCard,
+    argTypes: {
+        title: { control: "text" },
+        subText: { control: "text"},
+        cardData: { control: "array"},
+        emptyMessage: { control: "text"},
+    },
+}
+
+export const speakerCard = args => <SpeakerCard {...args} />
+
+speakerCard.args = {
+    title: "Speakers",
+    subText: "Meet Our Speakers",
+    cardData: [
+        {
+            image:"https://i.ibb.co/tCsR9rn/img1.png",
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+        {
+            image:"https://i.ibb.co/rG8Cfb0/Rectangle-26.png" ,
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+        {
+            image:"https://i.ibb.co/tZSxZMn/Rectangle-27.png",
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+        {
+            image: "https://i.ibb.co/86g8j6C/Rectangle-28.png",
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+        {
+            image:"https://i.ibb.co/tHNgTKB/Rectangle-29.png",
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+        {
+            image:"https://i.ibb.co/BcCd5D5/Rectangle-30.png",
+            title:"Albert Barnes",
+            designation:"Founder",
+
+        },
+    ],
+    emptyMessage:"No data Available",
+}