feat: added sponsor section (#80)

* feat: added sponsor section * fix: styling issues in sponser section * chore: wrap in section layout --------- Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
dscnitrourkela · Oct 3, 2023 · 7b08e60 · 7b08e60
1 parent 0f0f846
commit 7b08e60
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 1 deletion.
diff --git a/config/content/index.js b/config/content/index.js
@@ -3,4 +3,5 @@ export { default as footer } from './Footer';
 export { default as faq } from './FAQ';
 export { default as success } from './Success';
 export { default as pageNotFound } from './PageNotFound';
+export { default as _sponsor } from './sponsors';
 export * from './payment';
diff --git a/config/content/sponsors.js b/config/content/sponsors.js
@@ -0,0 +1,67 @@
+export default {
+  title: 'Sponsors',
+  footer: 'Want to sponsor us? Email us at dummy@gmail.com',
+  link: 'mailto:dummy@gmail.com',
+  id: 'sponsors',
+
+  titleSponsor: [
+    {
+      id: 1,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_9_rxhiki.png',
+      alt: 'MLH',
+      link: 'inno.nitrkl.in',
+      color: '#FFB8FF',
+    },
+  ],
+
+  sponsors: [
+    {
+      id: 1,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_10_cutge9.png',
+      alt: 'Polygon',
+      type: 'Associate Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#5CFFA7',
+    },
+    {
+      id: 2,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_20_qn6b1d.png',
+      alt: 'Quine',
+      type: 'Media Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#E85CFF',
+    },
+    {
+      id: 3,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_20_qn6b1d.png',
+      alt: 'Quine',
+      type: 'Refreshments Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#5C9DFF',
+    },
+    {
+      id: 4,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_10_cutge9.png',
+      alt: 'Polygon',
+      type: 'Associate Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#5CFFA7',
+    },
+    {
+      id: 5,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_20_qn6b1d.png',
+      alt: 'Quine',
+      type: 'Media Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#E85CFF',
+    },
+    {
+      id: 6,
+      logo: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1696249159/image_20_qn6b1d.png',
+      alt: 'Quine',
+      type: 'Refreshments Sponsor',
+      link: 'inno.nitrkl.in',
+      color: '#5C9DFF',
+    },
+  ],
+};
diff --git a/src/components/SponsorSection/SponsorSection.jsx b/src/components/SponsorSection/SponsorSection.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  SponsorContainer,
+  SponsorLogo,
+  SponsorSectionContainer,
+  SponsorText,
+  SponsorWrapper,
+  TitleSponsorContainer,
+  TitleSponsorLogo,
+  TitleSponsorWrapper,
+} from './styles';
+import SectionLayout from '../shared/SectionLayout';
+import { _sponsor } from '../../../config/content';
+
+const { titleSponsor, sponsors, title, link: footerLink, footer, id: sectionId } = _sponsor;
+const SponsorSection = () => (
+  <SectionLayout title={title} footer={footer} footerLink={footerLink} id={sectionId}>
+    <SponsorSectionContainer>
+      <TitleSponsorWrapper>
+        {titleSponsor.map(({ id, logo, alt, link, color }) => (
+          <TitleSponsorContainer key={id}>
+            <a href={link} target='_blank noopener noreferer'>
+              <TitleSponsorLogo src={logo} alt={alt} />
+            </a>
+            <SponsorText color={color}>Title Sponsor</SponsorText>
+          </TitleSponsorContainer>
+        ))}
+      </TitleSponsorWrapper>
+      <SponsorWrapper>
+        {sponsors.map(({ id, logo, alt, link, type, color }) => (
+          <SponsorContainer key={id}>
+            <a href={link} target='_blank noopener noreferer'>
+              <SponsorLogo src={logo} alt={alt} />
+            </a>
+            <SponsorText color={color}>{type}</SponsorText>
+          </SponsorContainer>
+        ))}
+      </SponsorWrapper>
+    </SponsorSectionContainer>
+  </SectionLayout>
+);
+export default SponsorSection;
diff --git a/src/components/SponsorSection/styles.js b/src/components/SponsorSection/styles.js
@@ -0,0 +1,105 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const SponsorSectionContainer = styled.div`
+  ${tw`
+    flex
+    flex-col
+    w-[90%]
+    mx-auto
+  `}
+`;
+
+export const TitleSponsorWrapper = styled.div`
+  ${tw`
+    flex
+    justify-around
+  `}
+`;
+
+export const TitleSponsorContainer = styled.div`
+  ${tw`
+    flex
+    flex-col
+    gap-[32px]
+    text-center
+    w-[320px]
+  `}
+  @media (max-width: 1100px) {
+    width: 240px;
+    gap: 16px;
+  }
+`;
+
+export const TitleSponsorLogo = styled.img`
+  ${tw`
+    w-full
+    my-auto
+  `}
+`;
+export const SponsorText = styled.p`
+  color: ${(props) => props.color || '#D0D0D0'};
+
+  font-family:
+    Noto Sans,
+    sans-serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  width: 100%;
+  @media (max-width: 1100px) {
+    text-align: center;
+    font-size: 16px;
+  }
+`;
+
+export const SponsorWrapper = styled.div`
+  ${tw`
+      grid
+      grid-cols-3
+      gap-[79px]
+  `}
+  row-gap: 42px;
+  @media (max-width: 1100px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 42px;
+    justify-content: space-between;
+    row-gap: 32px;
+  }
+  @media (max-width: 280px) {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 32px;
+    justify-content: space-between;
+  }
+`;
+
+export const SponsorContainer = styled.div`
+  ${tw`
+    flex
+    flex-col
+    gap-[32px]
+    text-center
+    w-[320px]
+    col-span-1
+    mx-auto
+    items-center
+    mt-[42px]
+  `}
+  @media (max-width: 780px) {
+    width: 240px;
+    margin-top: 32px;
+    gap: 6px;
+  }
+
+  @media (max-width: 580px) {
+    width: 120px;
+    margin-top: 32px;
+  }
+`;
+
+export const SponsorLogo = styled.img`
+  ${tw`
+    w-full
+    my-auto
+  `}
+`;
diff --git a/src/components/index.js b/src/components/index.js
@@ -22,3 +22,6 @@ export { default as PaymentCard } from './Payment/PaymentCard';
 
 // Success Card
 export { default as SuccessCard } from './Payment/SuccessCard';
+
+// Sponsor section
+export { default as SponsorSection } from './SponsorSection/SponsorSection';
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { About, FAQSection, Ticker } from '../components';
+import { About, FAQSection, SponsorSection, Ticker } from '../components';
 import AboutUs from '../../config/content/AboutUs';
 
 export default function Home() {
@@ -14,6 +14,7 @@ export default function Home() {
       </Helmet>
       <Ticker />
       <About title={AboutUs.title} desc={AboutUs.desc} link={AboutUs.link} />
+      <SponsorSection />
       <FAQSection />
     </>
   );