From 3b7ea8b3cb76e7dfb1113d73a223fe575c16c194 Mon Sep 17 00:00:00 2001 From: Jayesh Nayak Date: Mon, 2 Oct 2023 19:34:52 +0530 Subject: [PATCH 1/3] feat: added sponsor section --- config/content/sponsors.js | 64 +++++++++++ .../SponsorSection/SponsorSection.jsx | 39 +++++++ src/components/SponsorSection/styles.js | 106 ++++++++++++++++++ src/pages/playground.js | 5 +- 4 files changed, 211 insertions(+), 3 deletions(-) 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/sponsors.js b/config/content/sponsors.js new file mode 100644 index 0000000..18a57f2 --- /dev/null +++ b/config/content/sponsors.js @@ -0,0 +1,64 @@ +export default { + title: '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..bc9d832 --- /dev/null +++ b/src/components/SponsorSection/SponsorSection.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + SponsorContainer, + SponsorLogo, + SponsorSectionContainer, + SponsorText, + SponsorWrapper, + TitleSponsorContainer, + TitleSponsorLogo, + TitleSponsorWrapper, +} from './styles'; +import Sponsors from '../../../config/content/sponsors'; + +const { titleSponsor, sponsors } = Sponsors; +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..8a5817d --- /dev/null +++ b/src/components/SponsorSection/styles.js @@ -0,0 +1,106 @@ +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; + } +`; + +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; + line-height: 42px; + width: 100%; + @media (max-width: 1100px) { + line-height: 26px; + 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; + } + + @media (max-width: 580px) { + width: 120px; + margin-top: 32px; + } +`; + +export const SponsorLogo = styled.img` + ${tw` + w-full + my-auto + `} +`; diff --git a/src/pages/playground.js b/src/pages/playground.js index 62709a9..0b38908 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,8 +1,7 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Helmet } from 'react-helmet'; -import { About } from '../components/shared'; -import AboutUs from '../../config/content/AboutUs'; +import SponsorSection from '../components/SponsorSection/SponsorSection'; const Playground = () => ( <> @@ -11,7 +10,7 @@ const Playground = () => ( Playground - + ); From 057eabc48c990e49584845c13b5fecb22be7020c Mon Sep 17 00:00:00 2001 From: Jayesh Nayak Date: Tue, 3 Oct 2023 21:45:57 +0530 Subject: [PATCH 2/3] fix: styling issues in sponser section --- .../SponsorSection/SponsorSection.jsx | 43 ++++++++++--------- src/components/SponsorSection/styles.js | 5 +-- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/SponsorSection/SponsorSection.jsx b/src/components/SponsorSection/SponsorSection.jsx index bc9d832..ec8a919 100644 --- a/src/components/SponsorSection/SponsorSection.jsx +++ b/src/components/SponsorSection/SponsorSection.jsx @@ -10,30 +10,33 @@ import { TitleSponsorWrapper, } from './styles'; import Sponsors from '../../../config/content/sponsors'; +import SectionLayout from '../shared/SectionLayout'; const { titleSponsor, sponsors } = Sponsors; const SponsorSection = () => ( - - - {titleSponsor.map(({ id, logo, alt, link, color }) => ( - - - + + + + {titleSponsor.map(({ id, logo, alt, link, color }) => ( + + + + Title Sponsor - - - ))} - - - {sponsors.map(({ id, logo, alt, link, type, color }) => ( - - - + + ))} + + + {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 index 8a5817d..73b170b 100644 --- a/src/components/SponsorSection/styles.js +++ b/src/components/SponsorSection/styles.js @@ -27,6 +27,7 @@ export const TitleSponsorContainer = styled.div` `} @media (max-width: 1100px) { width: 240px; + gap: 16px; } `; @@ -45,10 +46,8 @@ export const SponsorText = styled.p` font-size: 24px; font-style: normal; font-weight: 600; - line-height: 42px; width: 100%; @media (max-width: 1100px) { - line-height: 26px; text-align: center; font-size: 16px; } @@ -59,7 +58,6 @@ export const SponsorWrapper = styled.div` grid grid-cols-3 gap-[79px] - `} row-gap: 42px; @media (max-width: 1100px) { @@ -90,6 +88,7 @@ export const SponsorContainer = styled.div` @media (max-width: 780px) { width: 240px; margin-top: 32px; + gap: 6px; } @media (max-width: 580px) { From b4cce9f7b47fd9d799ec00b3f1151786b0531273 Mon Sep 17 00:00:00 2001 From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> Date: Tue, 3 Oct 2023 22:22:10 +0530 Subject: [PATCH 3/3] chore: wrap in section layout --- config/content/index.js | 1 + config/content/sponsors.js | 3 +++ src/components/SponsorSection/SponsorSection.jsx | 6 +++--- src/components/index.js | 3 +++ src/pages/index.js | 3 ++- 5 files changed, 12 insertions(+), 4 deletions(-) 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 index 18a57f2..365e9cd 100644 --- a/config/content/sponsors.js +++ b/config/content/sponsors.js @@ -1,5 +1,8 @@ export default { title: 'Sponsors', + footer: 'Want to sponsor us? Email us at dummy@gmail.com', + link: 'mailto:dummy@gmail.com', + id: 'sponsors', titleSponsor: [ { diff --git a/src/components/SponsorSection/SponsorSection.jsx b/src/components/SponsorSection/SponsorSection.jsx index ec8a919..9b52b70 100644 --- a/src/components/SponsorSection/SponsorSection.jsx +++ b/src/components/SponsorSection/SponsorSection.jsx @@ -9,12 +9,12 @@ import { TitleSponsorLogo, TitleSponsorWrapper, } from './styles'; -import Sponsors from '../../../config/content/sponsors'; import SectionLayout from '../shared/SectionLayout'; +import { _sponsor } from '../../../config/content'; -const { titleSponsor, sponsors } = Sponsors; +const { titleSponsor, sponsors, title, link: footerLink, footer, id: sectionId } = _sponsor; const SponsorSection = () => ( - + {titleSponsor.map(({ id, logo, alt, link, color }) => ( 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() { + );