From 464c1a3a098459b74797fc5f2293004288326dac Mon Sep 17 00:00:00 2001
From: ShwetKhatri2001 <19dcs001@lnmiit.ac.in>
Date: Sat, 28 Jan 2023 00:32:35 +0530
Subject: [PATCH] Added Mid Section for Third Theme

---
 .../MidSectionThemeThree.md                   |  31 +++++
 .../MidSectionThemeThree.stories.js           |  49 +++++++
 src/components/MidSectionThemeThree/index.js  |  72 ++++++++++
 .../MidSectionThemeThree/style.sass           | 128 ++++++++++++++++++
 4 files changed, 280 insertions(+)
 create mode 100644 src/components/MidSectionThemeThree/MidSectionThemeThree.md
 create mode 100644 src/components/MidSectionThemeThree/MidSectionThemeThree.stories.js
 create mode 100644 src/components/MidSectionThemeThree/index.js
 create mode 100644 src/components/MidSectionThemeThree/style.sass

diff --git a/src/components/MidSectionThemeThree/MidSectionThemeThree.md b/src/components/MidSectionThemeThree/MidSectionThemeThree.md
new file mode 100644
index 00000000..8fb89317
--- /dev/null
+++ b/src/components/MidSectionThemeThree/MidSectionThemeThree.md
@@ -0,0 +1,31 @@
+## 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
+
+```
+<MidSectionThemeThree
+mainText="sample-Text"
+subText="sample-Text"
+cardItems="{[{image: "sample image url, label: "sample image label"}]}"
+linkUrl="sample-url"
+linkText="sample-url"
+/>
+```
+
+`mainText`: prop of type text is the mainText of the section
+`subText`: prop of type text is the subText of the section
+`cardItems`: prop of type array is the array of cardItems each having an image url and label
+`linkUrl`: prop of type text is the url present in the section
+`linkText`: prop of type text is label for the link present in the section
diff --git a/src/components/MidSectionThemeThree/MidSectionThemeThree.stories.js b/src/components/MidSectionThemeThree/MidSectionThemeThree.stories.js
new file mode 100644
index 00000000..a9ac8afe
--- /dev/null
+++ b/src/components/MidSectionThemeThree/MidSectionThemeThree.stories.js
@@ -0,0 +1,49 @@
+import React from "react"
+
+import { MidSectionThemeThree } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+  title: "Theme 3/MidSectionThemeThree",
+  component: MidSectionThemeThree,
+  argTypes: {
+    mainText: { control: "text" },
+    subText: { control: "text" },
+    cardItems: { control: "array" },
+    linkUrl: { control: "text" },
+    linkText: { control: "text" },
+  },
+}
+
+export const midsectionthemethree = args => <MidSectionThemeThree {...args} />
+
+midsectionthemethree.args = {
+  mainText: "Build Alongside with your Internet friends.",
+  subText:
+    "Building stuff alone is lame. Once you enroll we'll get you in a channel where you'll get to share progress with a cohort of awesome devs.",
+  cardItems: [
+    {
+      image:
+        "https://user-images.githubusercontent.com/56475750/215061001-0c44a74f-0b11-46e7-805e-07895733df5a.png",
+      label: "Step by Step Guide",
+    },
+    {
+      image:
+        "https://user-images.githubusercontent.com/56475750/215061688-f49b6c5f-5230-487b-9dba-e23eefc9f8b7.png",
+      label: "Live Kickoffs",
+    },
+    {
+      image:
+        "https://user-images.githubusercontent.com/56475750/215063054-58da14e8-78fa-4042-9c44-c86e8a32a04a.png",
+      label: "Community Support",
+    },
+    {
+      image:
+        "https://user-images.githubusercontent.com/56475750/215063239-d05be6c8-0186-4ef0-8d3c-aa8f2722b9be.png",
+      label: "Demo Days",
+    },
+  ],
+  linkUrl: "https://scorelab.org/",
+  linkText: "Take a project for a spin",
+}
diff --git a/src/components/MidSectionThemeThree/index.js b/src/components/MidSectionThemeThree/index.js
new file mode 100644
index 00000000..4c834e8b
--- /dev/null
+++ b/src/components/MidSectionThemeThree/index.js
@@ -0,0 +1,72 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Container, Row, Col } from "react-bootstrap"
+import "./style.sass"
+
+export const MidSectionThemeThree = ({
+  mainText,
+  subText,
+  cardItems,
+  linkUrl,
+  linkText,
+}) => {
+  return (
+    <div className="midSectionWrapper">
+      <Container>
+        <Row className="midSectionRow">
+          <Col className="midSectionLeftCol">
+            <div className="midSectionCard topLeftCard">
+              <img
+                className="midSectionImage"
+                alt={cardItems[0].label}
+                src={cardItems[0].image}
+              />
+              <p className="cardLabel">{cardItems[0].label}</p>
+            </div>
+            <div className="midSectionCard topRightCard">
+              <img
+                className="midSectionImage"
+                alt={cardItems[1].label}
+                src={cardItems[1].image}
+              />
+              <p className="cardLabel">{cardItems[1].label}</p>
+            </div>
+            <div className="midSectionCard bottomLeftCard">
+              <img
+                className="midSectionImage"
+                alt={cardItems[2].label}
+                src={cardItems[2].image}
+              />
+              <p className="cardLabel">{cardItems[2].label}</p>
+            </div>
+            <div className="midSectionCard bottomRightCard">
+              <img
+                className="midSectionImage"
+                alt={cardItems[3].label}
+                src={cardItems[3].image}
+              />
+              <p className="cardLabel">{cardItems[3].label}</p>
+            </div>
+          </Col>
+          <Col className="midSectionRightCol">
+            <h2 className="main-heading">{mainText}</h2>
+            <p className="subText">{subText}</p>
+            <a className="midSectionLink" href={linkUrl}>
+              {linkText} →
+            </a>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  )
+}
+
+MidSectionThemeThree.propTypes = {
+  mainText: PropTypes.string,
+  description: PropTypes.string,
+  subText: PropTypes.string,
+  imageOne: PropTypes.string,
+  imageTwo: PropTypes.string,
+  buttonLink: PropTypes.string,
+  buttonText: PropTypes.string,
+}
diff --git a/src/components/MidSectionThemeThree/style.sass b/src/components/MidSectionThemeThree/style.sass
new file mode 100644
index 00000000..c2730480
--- /dev/null
+++ b/src/components/MidSectionThemeThree/style.sass
@@ -0,0 +1,128 @@
+@import '../../styles/variables.sass'
+
+.midSectionWrapper
+    padding: 3rem
+    min-height: 100vh
+    max-width: 100vw
+    background: linear-gradient(180deg, #000000 70.14%, rgba(0, 0, 0, 0) 100%) , #333
+    .midSectionRow
+        display: flex
+        .midSectionLeftCol
+            background: linear-gradient(to bottom, rgb(164, 38, 199) 0%,  rgb(65, 220, 255) 100%)
+            border-radius: 25px
+            position: relative
+            width: 50%
+            margin: 3%
+            height: 60vh
+            .midSectionCard
+                width: 200px
+                height: 200px
+                background: #232323
+                border-radius: 40px
+                padding: 20px
+                display: flex
+                flex-direction: column
+                align-items: center
+                justify-content: center
+                text-align: center
+                .midSectionImage
+                    width: 100px
+                    height: 100px
+                    border-radius: 50%
+                .cardLabel
+                    color: white
+                    font-size: 1rem
+                    margin: 10px
+            .topLeftCard
+                position: absolute
+                top: 10%
+                left: 10%
+            .topRightCard
+                position: absolute
+                top: 20%
+                right: -10%
+            .bottomLeftCard
+                position: absolute
+                bottom: -10%
+                left: 10%
+            .bottomRightCard
+                position: absolute
+                bottom: -20%
+                right: -10%
+        .midSectionRightCol
+            text-align: left
+            display: flex
+            flex-direction: column
+            justify-content: center
+            margin-left: 5%
+            width: 50%
+            .main-heading
+                color: white
+                text-align: left
+                font-weight: bold
+                margin-bottom: 2rem
+                font-size: 2.5rem
+                line-height: 120%
+            .subText
+                text-align: left
+                font-style: normal
+                font-weight: 600
+                font-size: 1rem
+                overflow: hidden
+                line-height: 140%
+                color: #999999
+            .midSectionLink
+                text-align: left
+                font-style: normal
+                font-weight: 600
+                font-size: 1rem
+                overflow: hidden
+                line-height: 140%
+                color: white
+    @media (max-width: 1024px)
+        .midSectionRow
+            flex-direction: column
+            gap: 80px
+            align-items: center
+            justify-content: center
+            .midSectionLeftCol
+                width: 90%
+                min-height: 60vh
+            .midSectionRightCol
+                width: 100%
+                margin-left: 0
+    @media (min-width: 768px) and (max-width: 1024px)   
+        .midSectionRow 
+            .midSectionLeftCol
+                width: 70%
+            .midSectionRightCol
+                width: 80%
+    @media (max-width: 576px)
+        .midSectionRow
+            gap: 40px
+            .midSectionLeftCol
+                .midSectionCard
+                    width: 150px
+                    height: 150px
+                    border-radius: 20px
+                    .midSectionImage
+                        width: 50px
+                        height: 50px
+                    .cardLabel
+                        font-size: 1rem
+                        margin: 10px
+                .topLeftCard
+                    top: -5%
+                    left: -15%
+                .topRightCard
+                    top: 25%
+                    right: -15%
+                .bottomLeftCard
+                    bottom: 20%
+                    left: -15%
+                .bottomRightCard
+                    bottom: -5%
+                    right: -15%
+            .midSectionRightCol
+                .main-heading
+                    font-size: 2rem
\ No newline at end of file