From 874bb8ba7fdee56c7abac5e5c12f06069ef868c7 Mon Sep 17 00:00:00 2001 From: Abhijay Jain Date: Mon, 10 Oct 2022 22:36:08 +0530 Subject: [PATCH] (chore): Added Contact us for the fifth theme --- .../HeroSectionThemeFive.md | 0 .../HeroSectionThemeFive.stories.js | 28 ++++ src/components/HeroSectionThemeFive/index.js | 48 +++++++ .../HeroSectionThemeFive/style.sass | 120 ++++++++++++++++++ 4 files changed, 196 insertions(+) create mode 100644 src/components/HeroSectionThemeFive/HeroSectionThemeFive.md create mode 100644 src/components/HeroSectionThemeFive/HeroSectionThemeFive.stories.js create mode 100644 src/components/HeroSectionThemeFive/index.js create mode 100644 src/components/HeroSectionThemeFive/style.sass diff --git a/src/components/HeroSectionThemeFive/HeroSectionThemeFive.md b/src/components/HeroSectionThemeFive/HeroSectionThemeFive.md new file mode 100644 index 00000000..e69de29b diff --git a/src/components/HeroSectionThemeFive/HeroSectionThemeFive.stories.js b/src/components/HeroSectionThemeFive/HeroSectionThemeFive.stories.js new file mode 100644 index 00000000..2419c438 --- /dev/null +++ b/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 = { + 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: "#", +} diff --git a/src/components/HeroSectionThemeFive/index.js b/src/components/HeroSectionThemeFive/index.js new file mode 100644 index 00000000..83f642f1 --- /dev/null +++ b/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 ( +
+ + + + +
+ {mainText ?

{mainText}

: null} + {description ? ( +

{description}

+ ) : null} +
+ {contributeText ? ( + + + + ) : null} +
+
+ + + +
+ ) +} + +HeroSectionThemeFive.propTypes = { + mainText: PropTypes.string, + subText: PropTypes.string, + description: PropTypes.string, + image: PropTypes.string, + SubData: PropTypes.array, +} diff --git a/src/components/HeroSectionThemeFive/style.sass b/src/components/HeroSectionThemeFive/style.sass new file mode 100644 index 00000000..e6c432bf --- /dev/null +++ b/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