diff --git a/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md new file mode 100644 index 00000000..ca0a21af --- /dev/null +++ b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md @@ -0,0 +1,37 @@ +## Initial Setup + +Hope you have successfully set up the project in your local system and install all dependencies + +## About the mid-section Component + +This is a resuasble component for displaying the information in a two grid system where the first section is to show main features in cards +and the second section provides a title and description. This Component is highly reusable and customizable via props. + +## How to use the component + +Import the component to `pages/index.js` +`import {MidSectionThemeFive} from "../components/MidSectionComponentThemeFive";` + +## How to handle props to the component + +``` + +``` + +`mainText`: prop of type text is the mainText of the section +`mainHead`: prop of type text is the mainHeading/subtitle of the section +`mainPara`: prop of type text is the main paragraph present in the section +`button`: prop of type text is label for the botton present in the section +`img`: prop of type text is label for the imageURL present in the section +`secondHead`: prop of type text is label for the botton present in the section +`secondSubHead`: prop of type text is label for the botton present in the section +`countItems`: prop of type array is the array of cardItems each having an time and duration diff --git a/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.stories.js b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.stories.js new file mode 100644 index 00000000..19831bf4 --- /dev/null +++ b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.stories.js @@ -0,0 +1,49 @@ +import React from "react"; +import { MidSectionThemeFive } from "./index"; +import "bootstrap/dist/css/bootstrap.css" + +export default{ + title:"theme 5/midSectionComponentThemeFive", + component:MidSectionThemeFive, + argTypes:{ + mainText:{control:"text"}, + mainHead:{control:"text"}, + mainPara:{control:"text"}, + button:{control:"text"}, + img:{control:"text"}, + secondSubHead:{control:"text"}, + secondSubHead:{control:"text"}, + countItems:{control:"array"}, + } +} + +export const midThemeFive=args=> + +midThemeFive.args={ + mainText:"About Conference", + mainHead:"WELCOME TO THE PROJECT MANAGEMENT", + mainPara:"The Project Management is a platform to learn expert techniques for building successful project teams, creating efficient plans and implementing effective tracking measures to ensure your projects come in on deadline and on budget. In one fast-paced, well-designed day, we’ll cover all the essential elements of project management.", + button:"Interested", + img:"https://i.ibb.co/dBzsTZP/Untitled-design.png", + secondHead:"CONFERENCE DATE", + secondSubHead:"COUNT EVERY SECOND UNTIL THE EVENT", + countItems:[ + { + time:"00", + duration:"MONTHS" + }, + { + time:"00", + duration:"DAYS" + }, + { + time:"00", + duration:"HOURS" + }, + { + time:"00", + duration:"MINUTES" + }, + + ] +} \ No newline at end of file diff --git a/src/components/MidSectionComponentThemeFive/index.js b/src/components/MidSectionComponentThemeFive/index.js new file mode 100644 index 00000000..964e7053 --- /dev/null +++ b/src/components/MidSectionComponentThemeFive/index.js @@ -0,0 +1,72 @@ +import React from 'react' +import PropTypes from "prop-types" +import "./style.sass" +import { faArrowRight} from '@fortawesome/free-solid-svg-icons' +import { Col, Container, Row } from 'react-bootstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + + + +export const MidSectionThemeFive = ({mainText,mainHead,mainPara,button,img,secondHead,secondSubHead,countItems}) => { + return ( +
+ + + + +

{mainText}

+

{mainHead}

+

{mainPara}

+ + + + + + + + + + + + + + +

{secondHead}

+

{secondSubHead}

+ + + + +
+ {countItems[0].time} + {countItems[0].duration} +
+
+ {countItems[1].time} + {countItems[1].duration} +
+
+ {countItems[2].time} + {countItems[2].duration} +
+
+ {countItems[3].time} + {countItems[3].duration} +
+ + + + +
+ ) +} + +MidSectionThemeFive.propTypes={ + mainText:PropTypes.string, + mainHead:PropTypes.string, + mainPara:PropTypes.string, + button:PropTypes.string, + img:PropTypes.string, + secondHead:PropTypes.string, + secondSubHead:PropTypes.string, +} \ No newline at end of file diff --git a/src/components/MidSectionComponentThemeFive/styles.sass b/src/components/MidSectionComponentThemeFive/styles.sass new file mode 100644 index 00000000..eaa7d0bc --- /dev/null +++ b/src/components/MidSectionComponentThemeFive/styles.sass @@ -0,0 +1,231 @@ +@import '../../styles/variables.sass' +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap') + +.midSectionWrapper + background: #1E4F7C + min-height: 100vh + max-width: 100vw + padding-top: 25px + padding-left: 60px + .midMainSection + min-height: 70vh + max-width: 100vw + display: flex + justify-content: center + align-items: center + + .mainLeftContainer + + .mainText + font-family: 'Inter' + font-style: normal + font-weight: 500 + font-size: 20px + line-height: 154.88% + display: flex + align-items: center + letter-spacing: -0.005em + color: #51AD28 + + .mainHead + font-family: 'Inter' + font-style: normal + font-weight: 700 + font-size: 55px + line-height: 122.38% + letter-spacing: -0.005em + color: #FFFFFF + .mainPara + font-family: 'Inter' + font-style: normal + font-weight: 500 + font-size: 22px + line-height: 132.38% + letter-spacing: -0.005em + color: #FFFFFF + .mainButton + background: linear-gradient(90deg, #14F195 0%, #14F195 28.96%, rgba(19, 222, 222, 0.612462) 99.99%, #14F195 100%) + border-radius: 42px + font-family: 'Inter' + font-style: normal + font-weight: 600 + font-size: 24px + line-height: 34px + letter-spacing: -0.02em + text-transform: uppercase + color: #FFFFFF + width: 260px + height: 60px + + .mainRightContainer + display: flex + justify-content: center + align-items: center + + .midSecondSec + max-width: 100vw + margin-top: 20px + .midSecHead + max-width: 410px + .conferenceP + font-family: 'Inter' + font-style: normal + font-weight: 400 + font-size: 20px + line-height: 132.38% + letter-spacing: -0.005em + color: #51AD28 + .conferenceHead + font-family: 'Inter' + font-style: normal + font-weight: 600 + font-size: 26px + line-height: 131.38% + display: flex + align-items: center + letter-spacing: -0.005em + color: #FFFFFF + .midSecCountdown + max-width: 100vw + .countDownContainer + display: flex + max-width: 50vw + flex-direction: row + gap: 45px + margin-left: 160px + .countDownDiv + width: 160px + height: 145px + border: 1px solid #FFFFFF + padding-bottom: 5px + padding-left: 15px + + .countDown + font-size: 86px + font-weight: 700 + color: white + display: block + max-height: 110px + .duration + font-size: 20px + color: white + margin-left: 15px + margin-bottom: 0px +@media (min-width:768px) and (max-width:1024px) + .midSectionWrapper + .midMainSection + .mainLeftContainer + + .mainButton + margin-left: 200px + margin-top: 20px + margin-bottom: 20px + .midSecondSec + + .midSecHead + min-width: 100vw + .midSecCountdown + max-width: 60vw + margin-left: 0px + .countDownContainer + margin-left: 0px + .countDownDiv + height: 100px + widows: 100px + .countDown + font-size: 45px + padding-left: 5px + padding-right: 15px + .duration + font-size: 12px + padding-right: 15px +@media (max-width:768px) + .midSectionWrapper + .midMainSection + max-width: 100vw + padding: 30px + .mainLeftContainer + max-width: 100vw + .mainHead + font-size: 24px + .mainPara + font-size: 18px + .mainButton + margin-left: 50px + margin-top: 20px + margin-bottom: 20px + .midSecondSec + max-width: 100vw + position: relative + right: 50px + .midSecHead + min-width: 30vw + margin-left: 0 + .conferenceHead + font-size: 24px + margin-bottom: 15px + + .midSecCountdown + margin-left: 0px + .countDownContainer + margin-left: 0px + display: grid + grid-template-columns: 1fr 1fr + gap: 10px + .countDownDiv + height: 100px + width: 130px + margin-bottom: 20px + margin-left: 10px + + .countDown + font-size: 45px + padding-left: 10px + .duration + font-size: 15px + padding-right: 15px +@media (min-width:320px) and (max-width:360px) + .midSectionWrapper + padding-left: 100px + .midMainSection + max-width: 100vw + padding: 30px + .mainLeftContainer + max-width: 100vw + .mainHead + font-size: 24px + .mainPara + font-size: 18px + .mainButton + margin-left: 30px + margin-top: 20px + margin-bottom: 20px + .img + margin-right: 20px + .midSecondSec + max-width: 100vw + position: relative + right: 50px + .midSecHead + min-width: 30vw + margin-left: 0 + .conferenceHead + font-size: 24px + margin-bottom: 15px + + .midSecCountdown + .countDownContainer + display: grid + grid-template-columns: 1fr 1fr + gap: 10px + .countDownDiv + height: 90px + width: 90px + margin-bottom: 10px + + .countDown + font-size: 35px + padding-left: 5px + .duration + font-size: 10px + padding-right: 25px \ No newline at end of file