wip: sponsors

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 (
+        <div className="p-5">
+            <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.sponsorButtonUp}>
+                                <SponsorButton />
+                            </div>
+                            <div className={styles.sponsorText}>SPONSORS</div>
+                            <div className={styles.sponsorList}>
+                                {sponsorsList.map((e: SponsorCardProps) => (
+                                    <SponsorCard name={e.name} logo={e.logo} key={e.toString()} />
+                                ))}
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <h1 className={styles.sponsor}>SPONSORS</h1>
+                            {sponsorsList.length <= 0 && (
+                                <div className={styles.sponsorParent}>
+                                    <div className={styles.sponsorButton}>
+                                        <SponsorButton />
+                                    </div>
+                                    <Image
+                                        src={astronaut}
+                                        alt="astronaut"
+                                        className={styles.astro}
+                                    />
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

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;
+}

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 (
+        <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} />}
+                </div>
+            </div>
+        </div>
+    );
+};
+export default SponsorCard;

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;
+}

src/components/SponsorCard/type.d.ts

@@ -0,0 +1,4 @@
+type SponsorCardProps = {
+    logo: string;
+    name: string;
+};

src/components/SponsorsButton/type.d.ts

@@ -0,0 +1,3 @@
+type SponsorButtonTypes = {
+    className: string;
+};

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';