mid section component for theme five added

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
+
+```
+<MidSectionThemeFive
+mainText="sample-Text"
+mainHead="sample-Text"
+mainPara="sample-text"
+button="sample-text"
+img="sample-url"
+secondHead="sample-text"
+secondSubHead="sample-text"
+countItems=[{time:"sample time" , duration:"duration"}]
+/>
+```
+
+`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

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=> <MidSectionThemeFive {...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"
+        },
+
+    ]
+}

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 (
+        <div className='midSectionWrapper'>
+            <Container className='midMainSection'>
+                <Row>
+                    <Col className='mainLeftContainer'>
+
+                        <p className='mainText'>{mainText}</p>
+                        <h1 className='mainHead'>{mainHead}</h1>
+                        <p className='mainPara'>{mainPara}</p>
+                        <button className='mainButton'>{button} &nbsp; <FontAwesomeIcon icon={faArrowRight} /> </button>
+
+                    </Col>
+                    <Col className='mainRightContainer'>
+                        <img src={img} height="400px" width="425px" alt="" />
+                    </Col>
+                </Row>
+            </Container>
+
+            <Container className='midSecondSec'>
+
+
+                <Row>
+                    <Col className='midSecHead'>
+                        <p className='conferenceP'>{secondHead}</p>
+                        <h3 className='conferenceHead'>{secondSubHead}</h3>
+                    </Col>
+
+                    <Col className='midSecCountdown'>
+                        <Container className='countDownContainer'>
+                            <div className='countDownDiv'>
+                                <span className='countDown'>{countItems[0].time}</span> 
+                                <span className='duration'>{countItems[0].duration}</span> 
+                            </div>
+                            <div className='countDownDiv'>
+                                <span className='countDown'>{countItems[1].time}</span> 
+                                <span className='duration'>{countItems[1].duration}</span>
+                            </div>
+                            <div className='countDownDiv '>
+                                <span className='countDown'>{countItems[2].time}</span> 
+                                <span className='duration'>{countItems[2].duration}</span>
+                            </div>
+                            <div className='countDownDiv'>
+                                <span className='countDown'>{countItems[3].time}</span> 
+                                <span className='duration'>{countItems[3].duration}</span>
+                            </div>
+                        </Container>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
+    )
+}
+
+MidSectionThemeFive.propTypes={
+    mainText:PropTypes.string,
+    mainHead:PropTypes.string,
+    mainPara:PropTypes.string,
+    button:PropTypes.string,
+    img:PropTypes.string,
+    secondHead:PropTypes.string,
+    secondSubHead:PropTypes.string,
+}

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