From 7b08e60c73a144802cd72be0b45b40dbbb9e4eea Mon Sep 17 00:00:00 2001 From: Jayesh Nayak Date: Tue, 3 Oct 2023 22:30:50 +0530 Subject: [PATCH] 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> --- config/content/index.js | 1 + config/content/sponsors.js | 67 +++++++++++ .../SponsorSection/SponsorSection.jsx | 42 +++++++ src/components/SponsorSection/styles.js | 105 ++++++++++++++++++ src/components/index.js | 3 + src/pages/index.js | 3 +- 6 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 config/content/sponsors.js create mode 100644 src/components/SponsorSection/SponsorSection.jsx create mode 100644 src/components/SponsorSection/styles.js diff --git a/config/content/index.js b/config/content/index.js index ed3e18a..5f5ae17 100644 --- 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 new file mode 100644 index 0000000..365e9cd --- /dev/null +++ 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 new file mode 100644 index 0000000..9b52b70 --- /dev/null +++ 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 = () => ( + + + + {titleSponsor.map(({ id, logo, alt, link, color }) => ( + + + + + Title Sponsor + + ))} + + + {sponsors.map(({ id, logo, alt, link, type, color }) => ( + + + + + {type} + + ))} + + + +); +export default SponsorSection; diff --git a/src/components/SponsorSection/styles.js b/src/components/SponsorSection/styles.js new file mode 100644 index 0000000..73b170b --- /dev/null +++ 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 index b6ebd6d..9a2873a 100644 --- 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 index d0de10f..11b3c61 100644 --- 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() { + );