From ca6f85bc3388170c824c08484f6d12e89e43a989 Mon Sep 17 00:00:00 2001
From: ShwetKhatri2001 <19dcs001@lnmiit.ac.in>
Date: Tue, 27 Dec 2022 14:14:22 +0530
Subject: [PATCH] Added Sponsors component for the fifth theme

---
 src/components/Sponsors/Sponsors.md         |  28 ++++
 src/components/Sponsors/Sponsors.stories.js |  73 ++++++++++
 src/components/Sponsors/index.js            |  61 +++++++++
 src/components/Sponsors/style.sass          | 143 ++++++++++++++++++++
 4 files changed, 305 insertions(+)
 create mode 100644 src/components/Sponsors/Sponsors.md
 create mode 100644 src/components/Sponsors/Sponsors.stories.js
 create mode 100644 src/components/Sponsors/index.js
 create mode 100644 src/components/Sponsors/style.sass

diff --git a/src/components/Sponsors/Sponsors.md b/src/components/Sponsors/Sponsors.md
new file mode 100644
index 00000000..9408ad14
--- /dev/null
+++ b/src/components/Sponsors/Sponsors.md
@@ -0,0 +1,28 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the Sponsors Component
+
+This is a reusable component for the sponsors built from scratch. It could be used to display partners and sponsors for scorelab. The component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+`import {Sponsors} from "../components/Sponsors";`
+
+## How to handle props to the component
+
+```
+<Sponsors
+   subText="PARTNERS AND SPONSORS"
+   mainText="OFFICIAL SPONSORS"
+   sponsorsList={[{name: "sample sponsor name", image: "sample image url"}]}
+   messagesList={[{text: "sample mainText", speaker: "sample speaker name", position: "sample position", image: "sample image url"}]}
+/>
+```
+
+`subText` prop of type text is the subtitle for the schedule
+`mainText` prop of type text is the main title for schedule
+`sponsorsList` prop of type array having the logo image and name of all the sponsors
+`messagesList` prop is the array of messages each having text, speaker, position and image.
diff --git a/src/components/Sponsors/Sponsors.stories.js b/src/components/Sponsors/Sponsors.stories.js
new file mode 100644
index 00000000..3ce0c1c4
--- /dev/null
+++ b/src/components/Sponsors/Sponsors.stories.js
@@ -0,0 +1,73 @@
+import React from "react"
+
+import { Sponsors } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+  title: "Home/Sponsors",
+  component: Sponsors,
+  argTypes: {
+    subText: { control: "text" },
+    mainText: { control: "text" },
+    sponsorsList: { control: "array" },
+    messagesList: { control: "array" },
+  },
+}
+
+export const sponsors = args => <Sponsors {...args} />
+
+sponsors.args = {
+  subText: "PARTNERS AND SPONSORS",
+  mainText: "OFFICIAL SPONSORS",
+  sponsorsList: [
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209560573-ec70ec72-288c-4761-bbf8-ff70ee7524c7.png",
+    },
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209560738-b2bcc68d-39d9-4f26-b8a2-7fac0943325d.png",
+    },
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209560845-4b48b6a1-e38d-4dd6-afd4-21dcb3229e6f.png",
+    },
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209560911-23d22d3d-db28-49b9-8e95-214722d9b326.png",
+    },
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209560971-41ec7d07-ecdd-4691-b2d3-c5525119d4e5.png",
+    },
+    {
+      name: "Logo Ipsum",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209561112-d9e5a359-3e32-40ea-9055-951dd8a06317.png",
+    },
+  ],
+  messagesList: [
+    {
+      text:
+        "STREET FOOD CONVENTION WILL SHOWCASE PRODUCTS LIKE PACKED FOOD, BEEF AND LAMB, STREET FOOD.",
+      speaker: "MARIA HERNANDEZ",
+      position: "UX Manager",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209636327-eaddf6b3-c923-427d-954a-770d6c391e56.jpg",
+    },
+    {
+      text:
+        "STREET FOOD CONVENTION WILL SHOWCASE PRODUCTS LIKE PACKED FOOD, BEEF AND LAMB, STREET FOOD.",
+      speaker: "MARIA HERNANDEZ",
+      position: "UX Manager",
+      image:
+        "https://user-images.githubusercontent.com/56475750/209636327-eaddf6b3-c923-427d-954a-770d6c391e56.jpg",
+    },
+  ],
+}
diff --git a/src/components/Sponsors/index.js b/src/components/Sponsors/index.js
new file mode 100644
index 00000000..348b3741
--- /dev/null
+++ b/src/components/Sponsors/index.js
@@ -0,0 +1,61 @@
+import React from "react"
+import PropTypes from "prop-types"
+import "./style.sass"
+import { Container } from "react-bootstrap"
+
+export const Sponsors = ({ subText, mainText, sponsorsList, messagesList }) => {
+  return (
+    <div className="sponsors-container">
+      <Container>
+        <div className="sponsorsHeadingsDiv">
+          <p className="sponsorsSubText">{subText}</p>
+          <h1 className="sponsorsMainHeading">{mainText}</h1>
+        </div>
+        {sponsorsList?.length > 0 ? (
+          <div className="sponsorsList">
+            {sponsorsList.map(sponsorObj => (
+              <div className="sponsorContainer" key={sponsorObj.image}>
+                <img
+                  className="sponsorImg"
+                  alt={sponsorObj.name}
+                  src={sponsorObj.image}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="emptyMessage"> No Sponsors Available </p>
+        )}
+        {messagesList?.length > 0 && (
+          <div className="messagesList">
+            {messagesList.map(item => (
+              <div className="messageContainer" key={item.image}>
+                <h5 className="messageTitle">{item.text}</h5>
+                <div className="speakerContainer">
+                  <div className="imageContainer">
+                    <img
+                      src={item.image}
+                      alt={item.speaker}
+                      className="speakerImage"
+                    />
+                  </div>
+                  <p className="speakerData">
+                    <span className="speakerName">{item.speaker}</span>
+                    <span className="speakerPosition">{item.position}</span>
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Container>
+    </div>
+  )
+}
+
+Sponsors.propTypes = {
+  subText: PropTypes.string,
+  mainText: PropTypes.string,
+  sponsorsList: PropTypes.array,
+  messagesList: PropTypes.array,
+}
diff --git a/src/components/Sponsors/style.sass b/src/components/Sponsors/style.sass
new file mode 100644
index 00000000..d39b1ca9
--- /dev/null
+++ b/src/components/Sponsors/style.sass
@@ -0,0 +1,143 @@
+@import '../../styles/variables.sass'
+
+.sponsors-container
+  background-color: #1E4F7C
+  width: 100%
+  padding: 30px 0px
+  height: fit-content
+
+.sponsorsHeadingsDiv
+  padding: 10px
+  .sponsorsSubText
+    font-family: 'Montserrat'
+    font-style: normal
+    font-weight: 700
+    text-align: center
+    font-size: 20px
+    line-height: 20px
+    text-transform: uppercase
+    color: #51AD28
+    @media #{$sm-and-less}
+      font-weight: 500
+  .sponsorsMainHeading
+    font-family: 'Montserrat'
+    font-style: normal
+    text-align: center
+    font-weight: 700
+    font-size: 45px
+    text-transform: uppercase
+    color: #FFF
+    @media #{$sm-and-less}
+      font-size: 30px
+      font-weight: 500
+
+.sponsorsList
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  width: 100%
+  color: #FFFFFF
+  width: 75%
+  margin: 0 auto
+  @media #{$sm-and-less}
+    width: 100%
+
+.sponsorContainer
+  height: 125px
+  padding: 15px
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  @media #{$sm-and-less}
+    height: 100px
+
+.sponsorImg 
+  height: 100px
+  @media #{$sm-and-less}
+    height: 75px
+
+.messagesList
+  display: flex
+  flex-wrap: wrap
+  width: 90%
+  margin: 0 auto
+  margin-top: 30px
+  gap: 30px
+  align-items: center
+  justify-content: flex-start
+
+.messageContainer
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  background: rgba(217, 217, 217, 0.12)
+  color: #FFFFFF
+  border-radius: 30px
+  padding: 30px
+  width: 48%
+  @media (max-width: 992px)
+    width: 100%
+
+.messageTitle
+  width: 100%
+  color: #FFFFFF
+  @media #{$sm-and-less}
+   font-size: 18px
+
+.speakerContainer
+  display: flex
+  justify-content: center
+  width: 100%
+  padding: 15px 0
+  text-align: center
+
+.imageContainer
+  width: 25%
+  margin: 5px
+  display: flex
+  justify-content: center
+  align-items: center
+  @media (max-width: 992px)
+    width: 20%
+
+.speakerImage
+  width: 100px
+  height: 100px
+  border-radius: 50%
+  @media (max-width: 992px)
+    width: 75px
+    height: 75px
+
+.speakerData
+  width: 75%
+  color: #B7B7B7
+  font-weight: 500
+  display: flex
+  flex-direction: column
+  justify-content: center
+  line-height: 1.75rem
+  overflow: hidden
+  text-overflow: ellipsis
+  margin: 10px
+  @media (max-width: 992px)
+    font-size: 16px 
+    width: 80%
+
+.speakerName
+  text-align: left
+  color: #FFFFFF
+  font-weight: 600
+
+.speakerPosition
+  text-align: left
+  color: #51AD28
+           
+.emptyMessage
+  font-family: 'Montserrat'
+  font-style: normal
+  text-align: center
+  font-size: 25px
+  color: #B2B6BB
\ No newline at end of file