diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx index 7091c1ca..6b731b05 100644 --- a/apps/site/src/app/(home)/page.tsx +++ b/apps/site/src/app/(home)/page.tsx @@ -4,6 +4,7 @@ import Landing from "./sections/Landing"; import GetInvolved from "./sections/GetInvolved"; import Sponsors from "./sections/Sponsors"; import FAQ from "./sections/FAQ"; +import Clubs from "./sections/Clubs/Clubs"; import styles from "./page.module.scss"; @@ -12,7 +13,8 @@ const Home = () => {
- {/* */} + +
); diff --git a/apps/site/src/app/(home)/sections/Clubs/Clubs.module.scss b/apps/site/src/app/(home)/sections/Clubs/Clubs.module.scss new file mode 100644 index 00000000..fe7fd56b --- /dev/null +++ b/apps/site/src/app/(home)/sections/Clubs/Clubs.module.scss @@ -0,0 +1,50 @@ +@use "zothacks-theme" as theme; +@use "bootstrap-utils" as utils; + +.title { + text-align: center; + color: theme.$white; + font-size: 2rem; + font-weight: 600; + margin-bottom: 48px; + + @include utils.media-breakpoint-up(md) { + font-size: 3rem; + } +} + +.logos { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 2rem; + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +.logo { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease; + aspect-ratio: 16 / 9; + width: 300px; + height: 200px; + + &:hover { + transform: scale(1.05); + background-color: rgba(255, 255, 255, 0.15); + } + + img { + width: 100%; + height: 100%; + object-fit: contain; + padding: 1rem; + } +} diff --git a/apps/site/src/app/(home)/sections/Clubs/Clubs.tsx b/apps/site/src/app/(home)/sections/Clubs/Clubs.tsx new file mode 100644 index 00000000..464f3480 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Clubs/Clubs.tsx @@ -0,0 +1,36 @@ +/* eslint-disable @next/next/no-img-element */ +import Container from "react-bootstrap/Container"; +import imageUrlBuilder from "@sanity/image-url"; +import { client } from "@/lib/sanity/client"; +import { getClubs } from "./getClubs"; +import styles from "./Clubs.module.scss"; + +const builder = imageUrlBuilder(client); + +const Clubs = async () => { + const clubs = await getClubs(); + + return ( + +

PARTNER CLUBS

+
+ {clubs.clubs.map(({ _key, name, url, logo }) => ( + + {name + + ))} +
+
+ ); +}; + +export default Clubs; diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss index 51912663..8a04d09c 100644 --- a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss +++ b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss @@ -1,68 +1,72 @@ @use "zothacks-theme" as theme; @use "bootstrap-utils" as utils; -.container { - padding-top: 6rem; - padding-bottom: 6rem; -} - .title { text-align: center; + color: theme.$white; + font-size: 2rem; + font-weight: 600; + margin-bottom: 48px; + + @include utils.media-breakpoint-up(md) { + font-size: 3rem; + } } -.clipboard { - position: relative; - padding: 64px 32px 48px 32px; - min-height: 512px; - width: 80%; - margin: 0 auto; - border: 20px solid #aa703c; - border-radius: 100px; - background: #ffffff; +.logos { display: flex; flex-direction: column; - align-items: stretch; - - @include utils.media-breakpoint-up(sm) { - padding: 32px 32px 48px 32px; - } + align-items: center; + gap: 1.5rem; + max-width: 1200px; + margin: 0 auto; } -.clip { - height: 192px; - position: absolute; - left: 50%; - transform: translateX(-50%) rotate(90deg); - top: -105px; +.logo { + background-color: theme.$white; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease; + aspect-ratio: 1 / 1; + width: 100%; - @include utils.media-breakpoint-up(sm) { - height: 256px; - top: 50%; - transform: translateY(-50%); - left: -85px; + &:hover { + transform: scale(1.05); } -} -.logos { - flex-grow: 1; - display: grid; - align-items: center; - align-content: center; - justify-content: center; - grid-template-columns: repeat(auto-fill, 192px); - gap: 32px; + max-width: 250px; - @include utils.media-breakpoint-up(sm) { - padding-left: 24px; - grid-template-columns: repeat(auto-fill, 256px); + &.gold { + max-width: 450px; } @include utils.media-breakpoint-up(md) { - grid-template-columns: repeat(auto-fill, 384px); - padding-left: 48px; + max-width: 350px; + + &.gold { + max-width: 550px; + } + } + + img { + width: 100%; + height: 100%; + object-fit: contain; + padding: 2rem; } } -.logo { - width: 100%; +.placeholderLogo { + font-weight: bold; + color: theme.$black; + text-align: center; + padding: 0.5rem; + font-size: 0.8rem; + + @include utils.media-breakpoint-up(md) { + font-size: 1rem; + padding: 1rem; + } } diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx index cd2ca6a9..509de401 100644 --- a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx +++ b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx @@ -1,9 +1,9 @@ /* eslint-disable @next/next/no-img-element */ +import Container from "react-bootstrap/Container"; +import imageUrlBuilder from "@sanity/image-url"; +import { client } from "@/lib/sanity/client"; import { getSponsors } from "./getSponsors"; import styles from "./Sponsors.module.scss"; -import { client } from "@/lib/sanity/client"; -import imageUrlBuilder from "@sanity/image-url"; -import clip from "./clip.svg"; const builder = imageUrlBuilder(client); @@ -11,23 +11,25 @@ const Sponsors = async () => { const sponsors = await getSponsors(); return ( -
-
- -

Sponsors

-
- {sponsors.sponsors.map(({ _key, name, url, logo }) => ( - - {name - - ))} -
+ +

SPONSORS

+
+ {sponsors.sponsors.map(({ _key, name, url, logo, tier }) => ( + + {name + + ))}
-
+ ); };