(chore): Added Hero Section for the fifth theme

src/components/HeroSectionThemeFive/HeroSectionThemeFive.stories.js

@@ -0,0 +1,28 @@
+import React from "react"
+
+import { HeroSectionThemeFive } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+  title: "Theme 5/HeroSectionThemeFive",
+  component: HeroSectionThemeFive,
+  argTypes: {
+    mainText: { control: "text" },
+    subText: { control: "text" },
+    description: { control: "text" },
+    image: { control: "text" },
+    SubData: { control: "object" },
+  },
+}
+
+export const herosectionthemefive = args => <HeroSectionThemeFive {...args} />
+
+herosectionthemefive.args = {
+  image : "https://user-images.githubusercontent.com/64387054/194717344-dd44d316-245f-4d01-bd44-848d720a2700.png",
+  mainText: "SCoRe lab Conference",
+  description:
+    " Mountain Resort, Phoenix, USA",
+  contributeText: "START BUILDING",
+  contributeLink: "#",
+}

src/components/HeroSectionThemeFive/index.js

@@ -0,0 +1,48 @@
+import React from "react"
+import PropTypes from "prop-types"
+import "./style.sass"
+import { Container, Row, Col } from "react-bootstrap"
+
+export const HeroSectionThemeFive = ({
+  mainText,
+  subText,
+  image,
+  description,
+  buttonText,
+  buttonLink,
+  contributeLink,
+  contributeText,
+}) => {
+  return (
+    <div className="heroThreeWrap"  style={{ backgroundImage: `url(${image})` }}>
+      <Container>
+        <Row>
+          <Col md={6} className="rightCol"></Col>
+          <Col md={6} className="heroThreeleftCol">
+            <div>
+              {mainText ? <h1 className="MainText">{mainText}</h1> : null}
+              {description ? (
+                <p className="heroThreeDescription">{description}</p>
+              ) : null}
+              <div className="heroBtnWrap">
+                {contributeText ? (
+                  <a href={contributeLink}>
+                    <button className="heroBtnOne"> {contributeText}</button>
+                  </a>
+                ) : null}
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  )
+}
+
+HeroSectionThemeFive.propTypes = {
+  mainText: PropTypes.string,
+  subText: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+  SubData: PropTypes.array,
+}

src/components/HeroSectionThemeFive/style.sass

@@ -0,0 +1,120 @@
+@import '../../styles/variables.sass'
+
+.heroThreeWrap
+    padding: 35px
+    background-position: center
+    background-repeat: no-repeat
+    background-size: cover
+    width: 100%
+    .heroThreeleftCol
+        padding: 35px
+    .MainText
+        font-size: 3rem
+        text-align: left !important
+        font-weight: 700
+        color: white
+        text-transform: uppercase
+        inline-size: 30rem
+    .heroThreeDescription
+        font-weight: 400
+        font-size: 18px
+        color: #CCCCCC
+    .herothreeSubText
+        font-style: normal
+        font-weight: 400
+        font-size: 22px
+        color: #CCCCCC
+    .heroBtnWrap
+        display: flex
+        margin-top: 20px
+        gap: 10px
+        .heroBtnOne
+            border-radius: 40px
+            border: none
+            width: 14rem
+            font-weight: 500
+            padding: 12px 50px 12px 50px
+            color: black
+            background-color: #14F195
+        .heroBtnTwo
+            background: transparent
+            border-radius: 40px
+            font-weight: 500
+            width: 15rem
+            border: 2px solid white
+            padding: 10px 40px 10px 40px
+            color: white
+            font-family: "montserrat"
+
+    .rightCol
+        .mainImage
+            width: 100%
+
+@media (min-width: 481px) and (max-width: 767px)
+    .MainText
+        font-size: 2rem
+        inline-size: unset !important
+    .description
+        inline-size: unset !important
+    .icon
+        display: none
+    .listContent
+        display: none
+    .SubSection
+        display: block !important
+        width: 100% !important
+        text-align: center !important
+    .SubSectionText
+        inline-size: unset !important
+    .heroBtnWrap
+        flex-direction: column
+@media (min-width: 320px) and (max-width: 480px)
+    .MainText
+        font-size: 2rem
+        inline-size: unset !important
+    .description
+        inline-size: unset !important
+    .icon
+        display: none
+    .listContent
+        display: none
+    .SubSection
+        display: block !important
+        width: 100% !important
+        text-align: center !important
+    .SubSectionText
+        inline-size: unset !important
+    .heroBtnWrap
+        flex-direction: column
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
+    .MainText
+        font-size: 2rem
+        inline-size: unset !important
+    .description
+        inline-size: unset !important
+    .icon
+        display: none
+    .listContent
+        display: none
+    .SubSection
+        display: block !important
+        width: 100% !important
+        text-align: center !important
+    .SubSectionText
+        inline-size: unset !important
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
+    .MainText
+        font-size: 2rem
+        inline-size: unset !important
+    .description
+        inline-size: unset !important
+    .icon
+        display: none
+    .listContent
+        display: none
+    .SubSection
+        display: block !important
+        width: 100% !important
+        text-align: center !important
+    .SubSectionText
+        inline-size: unset !important