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 }) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+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 }) => (
-
-
-
- ))}
-
+
+ SPONSORS
+
+ {sponsors.sponsors.map(({ _key, name, url, logo, tier }) => (
+
+
+
+ ))}
-
+
);
};