From b929d560cf810e30684437377cabf1e99fbe0a9c Mon Sep 17 00:00:00 2001 From: dhruv Date: Sun, 12 Mar 2023 22:41:58 +0530 Subject: [PATCH 1/2] mid section component for theme five added --- .../MidSectionThemeFive.md | 37 +++ .../MidSectionThemeFive.stories.js | 49 ++++ .../MidSectionComponentThemeFive/index.js | 72 ++++++ .../MidSectionComponentThemeFive/styles.sass | 231 ++++++++++++++++++ 4 files changed, 389 insertions(+) create mode 100644 src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md create mode 100644 src/components/MidSectionComponentThemeFive/MidSectionThemeFive.stories.js create mode 100644 src/components/MidSectionComponentThemeFive/index.js create mode 100644 src/components/MidSectionComponentThemeFive/styles.sass diff --git a/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md new file mode 100644 index 00000000..6346a474 --- /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 {MidSectionThemeThree} from "../components/MidSectionThemeThree";` + +## 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 \ No newline at end of file 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 From 55d4f44939377744bad4d8c5fcdc6678bbcdc828 Mon Sep 17 00:00:00 2001 From: Dhruv Ranjan <97687317+dhruv18ranjan@users.noreply.github.com> Date: Tue, 14 Mar 2023 19:46:33 +0530 Subject: [PATCH 2/2] Update MidSectionThemeFive.md --- .../MidSectionComponentThemeFive/MidSectionThemeFive.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md index 6346a474..ca0a21af 100644 --- a/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md +++ b/src/components/MidSectionComponentThemeFive/MidSectionThemeFive.md @@ -10,7 +10,7 @@ and the second section provides a title and description. This Component is highl ## How to use the component Import the component to `pages/index.js` -`import {MidSectionThemeThree} from "../components/MidSectionThemeThree";` +`import {MidSectionThemeFive} from "../components/MidSectionComponentThemeFive";` ## How to handle props to the component @@ -34,4 +34,4 @@ countItems=[{time:"sample time" , duration:"duration"}] `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 \ No newline at end of file +`countItems`: prop of type array is the array of cardItems each having an time and duration