diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx new file mode 100644 index 0000000..3b36ded --- /dev/null +++ b/src/app/sponsors/page.tsx @@ -0,0 +1,53 @@ +import { NavBar, SponsorButton, SponsorCard } from '@/components'; +import styles from './sponsors.module.css'; +import Image from 'next/image'; + +import astronaut from '../../assets/images/astronaut.svg'; + +export default function Sponsors() { + const sponsorsList: SponsorCardProps[] = []; // change to let + + // backend logic + // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); + 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..bfa8b0b --- /dev/null +++ b/src/app/sponsors/sponsors.module.css @@ -0,0 +1,96 @@ +.parent { + display: grid; +} + +.foreground { + display: flex; + flex-direction: column; + gap:1px; +} + +.foreground, +.background { + width: 100vw; + max-width: 100vw; + overflow: hidden; + grid-area: 1/1; + max-height: 86vh; +} + +.sponsor { + color: #fff; + text-align: center; + font-family: ROG; + font-size: 74.8px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top:60px; +} + +.background { + display: flex; + justify-content: center; + align-items: center; +} + +.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; +} + +.sponsorParent { + align-self: flex-end; + display: flex; + padding-left: 20px; + gap: 2px; + height: fit-content; + transform: translateY(-10%); +} + +.sponsorButton { + margin-top: 90px; + height: fit-content; +} + +.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; +} + +.sponsorButtonUp { + position: absolute; + right: 30px; + margin-top: 85px; + display: flex; + justify-content: center; + align-items: center; +} + +.sponsorList { + /* margin-top: 140px; */ + display: flex; + flex-wrap: wrap; + max-height: 100%; +} +.astro{ + overflow: hidden; +} diff --git a/src/assets/images/astronaut.svg b/src/assets/images/astronaut.svg new file mode 100644 index 0000000..90d0816 --- /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..be9956d --- /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..8681aeb --- /dev/null +++ b/src/assets/images/top-right-border.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx new file mode 100644 index 0000000..cebbe76 --- /dev/null +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -0,0 +1,29 @@ +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..0fc982e --- /dev/null +++ b/src/components/SponsorCard/styles.module.css @@ -0,0 +1,72 @@ +.parent { + display: grid; +} + +.borderOverlay, +.sponsorParent { + width: 455px; + height: 340px; + grid-area: 1/1; +} + +.borderOverlay { + display: flex; + justify-content: space-between; + flex-direction: column; +} + +.topRightBorder { + top: 0px; + right: 0px; + left: auto; + z-index: 5; +} + +.sponsorParent { + display: flex; + + justify-content: center; + align-items: center; + + flex-direction: column; +} + +.title { + width: 425px; + height: 85px; + 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: 405px; + height: 65px; + flex-shrink: 0; + border: 5px solid rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.body { + width: 425px; + height: 195px; + flex-shrink: 0; + + border: 0.5px solid #fff; + background: rgba(2, 33, 41, 0.5); + display: flex; + justify-content: center; + align-items: center; +} \ 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..5e5df0e --- /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';