feat: /sponsors

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<SponsorCardProps[]>([]);
+    useEffect(() => {
+        const a = async () => {
+            setSponsorsList(await getSponsors());
+        };
+        a();
+    }, []);
+
+    return (
+        <div className={styles.page}>
+            <NavBar />
+            <div className={styles.parent}>
+                <div className={styles.background}>
+                    <h1 className={styles.backgroundText}>SPONSORS</h1>
+                </div>
+                <div className={styles.foreground}>
+                    {sponsorsList.length > 0 ? (
+                        <>
+                            <div className={styles.sponsorText}>SPONSORS</div>
+                            <div className={styles.sponsorButtonUp}>
+                                <SponsorButton />
+                            </div>
+                            <div className={styles.parentList}>
+                                <div className={styles.sponsorList}>
+                                    {sponsorsList.map((e: SponsorCardProps) => (
+                                        <SponsorCard name={e.name} logo={e.logo} key={e.name} />
+                                    ))}
+                                </div>
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <h1 className={styles.sponsor}>SPONSORS</h1>
+                            {sponsorsList.length <= 0 && (
+                                <div className={styles.sponsorParent}>
+                                    <div className={`${styles.sponsorButton} ${styles.empty}`}>
+                                        <SponsorButton />
+                                    </div>
+                                    <Image
+                                        src={astronaut}
+                                        alt="astronaut"
+                                        className={styles.astro}
+                                    />
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/sponsors/sponsors.module.css

@@ -0,0 +1,232 @@
+.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;
+}

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 (
+        <>
+            <div className={styles.parent}>
+                <div className={styles.borderOverlay}>
+                    <div className="flex w-full justify-between">
+                        <Image src={topLeftBorder} alt="" className={styles.topLeftBorder} />
+                        <Image src={topRightBorder} alt="" className={styles.topRightBorder} />
+                    </div>
+                    <Image src={bottomBorder} alt="" className={styles.bottomBorder} />
+                </div>
+                <div className={styles.sponsorParent}>
+                    <div className={styles.title}>
+                        <div className={styles.titleBorder}>{name} </div>
+                    </div>
+                    <div className={styles.body}>
+                        {logo != '' && (
+                            <Image
+                                src={logo}
+                                alt={name}
+                                width={400}
+                                height={400}
+                                className={styles.logo}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+export default SponsorCard;