From 2641cb3984e87b648eca4a63d83d62e07f0b683f Mon Sep 17 00:00:00 2001 From: Ayush Chadha <82471116+elegantShock2258@users.noreply.github.com> Date: Wed, 27 Dec 2023 16:20:18 +0530 Subject: [PATCH] Sponsors (#27) * wip: sponsors * Sponsors (#24) * fix: navbar mobile animation * feat: responsiveness * feat: responsiveness, fixed sponsor button issue and overflow issue * wip: responsiveness, todo: decrease card sizes * fix: aboutCard skill issue :( * fix: signUp * fix(footer): delta and login * fix: mobile responsiveness * fix: mobile responsiveness * fix: mobile responsiveness * fix: mobile responsiveness * fix: astronaut * fix: mobile sponsors button, center cards always * fix: mobile sponsors button, center cards always * fix: s20 ultra overflow * fix: ipad mini overlap, and add more screens * fix: scroll behavior * fix: scroll behavior * fix: scroll behavior * fix: astronaut, sponsor button placement, integrate cms * fix: sponsorcard alignment * fix: sponsorsContainer overflow * fix: sponsorsContainer overflow * fix: zindex issue --------- Co-authored-by: SRISOWRIRAJAN K S Co-authored-by: Bhoopesh --------- Co-authored-by: Bhoopesh Co-authored-by: SRISOWRIRAJAN K S --- src/app/sponsors/page.tsx | 62 +++++ src/app/sponsors/sponsors.module.css | 235 ++++++++++++++++++ src/assets/images/astronaut.svg | 225 +++++++++++++++++ src/assets/images/bottom-border.svg | 3 + src/assets/images/top-left-border.svg | 3 + src/assets/images/top-right-border.svg | 3 + src/components/NavBar/navbar.module.css | 7 +- src/components/SponsorCard/SponsorCard.tsx | 39 +++ src/components/SponsorCard/styles.module.css | 88 +++++++ src/components/SponsorCard/type.d.ts | 4 + .../SponsorsButton/SponsorsButton.tsx | 80 ++++++ src/components/SponsorsButton/type.d.ts | 3 + src/components/index.ts | 2 + src/utils/events_cms.ts | 15 ++ 14 files changed, 763 insertions(+), 6 deletions(-) create mode 100644 src/app/sponsors/page.tsx create mode 100644 src/app/sponsors/sponsors.module.css create mode 100644 src/assets/images/astronaut.svg create mode 100644 src/assets/images/bottom-border.svg create mode 100644 src/assets/images/top-left-border.svg create mode 100644 src/assets/images/top-right-border.svg create mode 100644 src/components/SponsorCard/SponsorCard.tsx create mode 100644 src/components/SponsorCard/styles.module.css create mode 100644 src/components/SponsorCard/type.d.ts create mode 100644 src/components/SponsorsButton/SponsorsButton.tsx create mode 100644 src/components/SponsorsButton/type.d.ts diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx new file mode 100644 index 0000000..17c9e46 --- /dev/null +++ b/src/app/sponsors/page.tsx @@ -0,0 +1,62 @@ +'use client'; +import { NavBar, SponsorButton, SponsorCard } from '@/components'; +import styles from './sponsors.module.css'; +import Image from 'next/image'; + +import astronaut from '../../assets/images/astronaut.svg'; +import { getSponsors } from '@/utils/events_cms'; +import { useEffect, useState } from 'react'; + +export default function Sponsors() { + const [sponsorsList, setSponsorsList] = useState([]); + useEffect(() => { + const a = async () => { + setSponsorsList(await getSponsors()); + }; + a(); + }, []); + + return ( +
+ +
+
+

SPONSORS

+
+
+ {sponsorsList.length > 0 ? ( +
+
SPONSORS
+
+ +
+
+
+ {sponsorsList.map((e: SponsorCardProps) => ( + + ))} +
+
+
+ ) : ( + <> +

SPONSORS

+ {sponsorsList.length <= 0 && ( +
+
+ +
+ astronaut +
+ )} + + )} +
+
+
+ ); +} diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css new file mode 100644 index 0000000..9ebd5c9 --- /dev/null +++ b/src/app/sponsors/sponsors.module.css @@ -0,0 +1,235 @@ +.parent { + display: grid; +} + +.foreground, +.background { + width: 100vw; + max-width: 100vw; + overflow-x: hidden; + grid-area: 1/1; + max-height: 86vh; +} + +.foreground { + display: flex; + flex-direction: column; + gap: 1px; + + height: 100vh; + width: 100%; +} + +.sponsor { + color: #fff; + text-align: center; + font-family: ROG; + font-size: 74.8px; + + align-self: center; + width: fit-content; + + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 60px; + + @media screen and (max-width:560px) { + font-size: 34.8px; + text-align: center; + } + + @media screen and (min-width:656px) and (max-width:656px) { + font-size: 34.8px; + } +} + +.background { + display: flex; + justify-content: center; + align-items: center; + width: fit-content; +} + +.backgroundText { + position: fixed; + top: 40%; + left: 50vw; + transform: translate(-50%, -25%); + text-align: center; + font-family: ROG; + font-size: 9.5rem; + font-style: normal; + font-weight: 700; + line-height: normal; + color: transparent; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #ffffff90; + + @media screen and (max-width:560px) { + font-size: 3rem; + overflow: hidden; + } +} + +.sponsorParent { + align-self: flex-end; + display: flex; + padding-left: 20px; + gap: 2px; + height: fit-content; + transform: translateY(-10%); + width: min-content; + + @media screen and (max-width:560px) { + overflow: none; + padding-left: 0px; + } +} + +.sponsorButton { + padding: 0px; + width: min-content; + height: min-content; + + @media screen and (max-width:560px) { + transform: translate(10%, -5%); + margin-top: 60px; + } +} + +.empty{ + height: 35%; + display: flex; + align-items: flex-end; +} + +.sponsorText { + margin-top: 90px; + text-align: center; + color: #fff; + text-align: center; + font-family: ROG; + font-size: 104.8px; + font-style: normal; + font-weight: 400; + line-height: normal; + + @media screen and (min-width:768px) and (max-width:840px) { + font-size: 94.8px; + } + + @media screen and (max-width:560px) { + font-size: 44px; + } + + @media screen and (max-width:300px) { + font-size: 34px; + } +} + +.sponsorButtonUp { + /* position: absolute; + right: 30px; + top: 85px; */ + + position: relative; + transform: translate(36%, -5%); + display: flex; + justify-content: center; + align-items: center; + + + @media screen and (min-width:768px) and (max-width:820px) { + margin-top: 30px; + transform: translate(27%, -5%); + } + + @media screen and (max-width:560px) { + transform: translate(10%, -55%); + margin-top: 60px; + } + + + @media screen and (min-width:656px) and (max-width:656px) { + margin-top: 15px; + transform: translate(23%, -5%); + } + + @media screen and (min-width:540px) and (max-width:540px) { + transform: translate(27%, -45%); + } + + @media screen and (min-width:412px) and (max-width:412px) { + transform: translate(13%, -45%); + } + + @media screen and (min-width:912px) and (max-width:912px) { + transform: translate(32%, 3%); + } + + @media screen and (max-width:300px) { + width: fit-content; + height: fit-content; + transform: translate(-8%, -65%); + margin-top: 60px; + } +} + +.sponsorList { + /* margin-top: 140px; */ + display: flex; + flex-wrap: wrap; + width: fit-content; + height: fit-content; + overflow-x: hidden; + + gap: 115px; + justify-content: center; + + @media screen and (max-width:560px) { + gap: 5px; + } + + +} + +.astro { + overflow: hidden; + min-width: 320px !important; + + @media screen and (max-width:560px) { + display: none; + } +} + +.parentList { + padding: 50px; + padding-top: 0px; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + + @media screen and (max-width:560px) { + padding: 0px; + transform: translateY(-80px); + } + + @media screen and (min-width:656px) and (max-width:656px) { + transform: translateY(30px); + } + +} + +.parentList::-webkit-scrollbar, +.foreground::-webkit-scrollbar, +.sponsorList::-webkit-scrollbar { + display: none; +} + +.page { + padding: 5px; + min-height: 100vh; + min-width: 100vw; +} \ No newline at end of file diff --git a/src/assets/images/astronaut.svg b/src/assets/images/astronaut.svg new file mode 100644 index 0000000..e43f383 --- /dev/null +++ b/src/assets/images/astronaut.svg @@ -0,0 +1,225 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/bottom-border.svg b/src/assets/images/bottom-border.svg new file mode 100644 index 0000000..6f3d757 --- /dev/null +++ b/src/assets/images/bottom-border.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/top-left-border.svg b/src/assets/images/top-left-border.svg new file mode 100644 index 0000000..4016c5a --- /dev/null +++ b/src/assets/images/top-left-border.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/top-right-border.svg b/src/assets/images/top-right-border.svg new file mode 100644 index 0000000..ccc2310 --- /dev/null +++ b/src/assets/images/top-right-border.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/NavBar/navbar.module.css b/src/components/NavBar/navbar.module.css index 8e2e919..5f7c006 100644 --- a/src/components/NavBar/navbar.module.css +++ b/src/components/NavBar/navbar.module.css @@ -96,12 +96,7 @@ } #menubg { - animation: fadeInLast 1.5s ease-in-out; -} - -.li{ - cursor: pointer; - transition: all 0.2s ease-in-out; + animation: fadeInLast 3s ease-in-out; } .li:nth-child(2n + 1) { diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx new file mode 100644 index 0000000..0dedf51 --- /dev/null +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -0,0 +1,39 @@ +import styles from './styles.module.css'; + +import topLeftBorder from '../../assets/images/top-left-border.svg'; +import topRightBorder from '../../assets/images/top-right-border.svg'; +import bottomBorder from '../../assets/images/bottom-border.svg'; +import Image from 'next/image'; + +const SponsorCard = ({ name, logo }: SponsorCardProps) => { + return ( + <> +
+
+
+ + +
+ +
+
+
+
{name}
+
+
+ {logo != '' && ( + {name} + )} +
+
+
+ + ); +}; +export default SponsorCard; diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css new file mode 100644 index 0000000..fb15c75 --- /dev/null +++ b/src/components/SponsorCard/styles.module.css @@ -0,0 +1,88 @@ +.parent { + display: grid; + flex-shrink: 1; + flex-grow: 0; + + @media screen and (max-width:560px) { + transform: scale(0.65); + } + z-index: 4; +} + +.borderOverlay, +.sponsorParent { + width: 341px; + height: 255px; + grid-area: 1/1; +} + +.borderOverlay { + display: flex; + justify-content: space-between; + flex-direction: column; +} +.topBorder{ + transform: translateY(-7px); +} +.topRightBorder { + top: 0px; + right: 0px; + left: auto; + z-index: 5; +} + +.sponsorParent { + display: flex; + + justify-content: center; + align-items: center; + + flex-direction: column; +} + +.title { + width: 318px; + height: 64px; + flex-shrink: 0; + transform: translateY(-15%); + background: rgba(57, 158, 184, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.titleBorder { + color: #fff; + text-align: center; + font-family: ROG; + font-size: 40px; + font-style: normal; + font-weight: 400; + line-height: normal; + width: 304px; + height: 49px; + flex-shrink: 0; + border: 5px solid rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.body { + width: 319px; + height: 146px; + flex-shrink: 0; + + border: 0.5px solid #fff; + background: rgba(2, 33, 41, 0.7); + display: flex; + justify-content: center; + align-items: center; + + padding: 10px; +} +.logo{ + object-fit: contain; + max-height: 100%; + max-width: 100%; +} \ No newline at end of file diff --git a/src/components/SponsorCard/type.d.ts b/src/components/SponsorCard/type.d.ts new file mode 100644 index 0000000..24b40a8 --- /dev/null +++ b/src/components/SponsorCard/type.d.ts @@ -0,0 +1,4 @@ +type SponsorCardProps = { + logo: string; + name: string; +}; diff --git a/src/components/SponsorsButton/SponsorsButton.tsx b/src/components/SponsorsButton/SponsorsButton.tsx new file mode 100644 index 0000000..55107d6 --- /dev/null +++ b/src/components/SponsorsButton/SponsorsButton.tsx @@ -0,0 +1,80 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { useState } from 'react'; + +export default function SponsorButton() { + const [hover, setHover] = useState(false); + + return ( + <> + { + setHover(true); + }} + onMouseLeave={() => { + setHover(false); + }} + className="max-sm:scale-75" + > + + + + + + + + + + + + + + ); +} diff --git a/src/components/SponsorsButton/type.d.ts b/src/components/SponsorsButton/type.d.ts new file mode 100644 index 0000000..2ef1ea2 --- /dev/null +++ b/src/components/SponsorsButton/type.d.ts @@ -0,0 +1,3 @@ +type SponsorButtonTypes = { + className: string; +}; diff --git a/src/components/index.ts b/src/components/index.ts index c2269cd..5eadd5b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -13,3 +13,5 @@ export { default as LoadingMobileView } from './Landing/LoadingMobileView'; export { default as ClusterCarousel } from './ClusterCarousel/ClusterCarousel'; export { default as Menu } from './Menu/Menu'; export { default as AuthLayout } from './AuthLayout/AuthLayout'; +export { default as SponsorCard } from './SponsorCard/SponsorCard'; +export { default as SponsorButton } from './SponsorsButton/SponsorsButton'; diff --git a/src/utils/events_cms.ts b/src/utils/events_cms.ts index 403fe0d..1393cdd 100644 --- a/src/utils/events_cms.ts +++ b/src/utils/events_cms.ts @@ -68,3 +68,18 @@ export const getGallery = async () => { }); return details; }; + +export const getSponsors = async () => { + let res = await axios.get(`${CMS_URL}/api/sponsors?populate=*`); + let detailArray = res.data.data; + //@ts-ignore + let details: any = []; + // eslint-disable @typescript-eslint/ban-ts-comment + //@ts-ignore + detailArray.forEach((data: any) => { + let detail = data.attributes; + details.push({ name: detail.name, logo: `${CMS_URL}${detail.logo.data.attributes.url}` }); + }); + + return details; +};