diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
index 7a2b1938..d2580ccc 100644
--- a/apps/site/src/app/(home)/page.tsx
+++ b/apps/site/src/app/(home)/page.tsx
@@ -12,8 +12,10 @@ const Home = () => {
return (
+ {/*
+ */}
- {/* */}
+
{/* */}
);
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..0f5235a9 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,66 @@
@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: bold;
+ margin-bottom: 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;
- display: flex;
- flex-direction: column;
- align-items: stretch;
-
- @include utils.media-breakpoint-up(sm) {
- padding: 32px 32px 48px 32px;
+ @include utils.media-breakpoint-up(md) {
+ font-size: 3rem;
}
}
-.clip {
- height: 192px;
- position: absolute;
- left: 50%;
- transform: translateX(-50%) rotate(90deg);
- top: -105px;
-
- @include utils.media-breakpoint-up(sm) {
- height: 256px;
- top: 50%;
- transform: translateY(-50%);
- left: -85px;
- }
+.logos {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1.5rem;
+ max-width: 1200px;
+ margin: 0 auto;
}
-.logos {
- flex-grow: 1;
- display: grid;
+.logo {
+ width: calc(50% - 1.5rem);
+ aspect-ratio: 16 / 9;
+ background-color: theme.$white;
+ border-radius: 8px;
+ display: flex;
align-items: center;
- align-content: center;
justify-content: center;
- grid-template-columns: repeat(auto-fill, 192px);
- gap: 32px;
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: scale(1.05);
+ }
@include utils.media-breakpoint-up(sm) {
- padding-left: 24px;
- grid-template-columns: repeat(auto-fill, 256px);
+ width: calc(33.333% - 1.5rem);
}
- @include utils.media-breakpoint-up(md) {
- grid-template-columns: repeat(auto-fill, 384px);
- padding-left: 48px;
+ @include utils.media-breakpoint-up(lg) {
+ width: calc(25% - 1.5rem);
+ }
+
+ img {
+ max-width: 80%;
+ max-height: 80%;
+ object-fit: contain;
}
}
-.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..3975e4c4 100644
--- a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx
+++ b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx
@@ -3,31 +3,58 @@ 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";
+import Container from "react-bootstrap/Container";
const builder = imageUrlBuilder(client);
const Sponsors = async () => {
const sponsors = await getSponsors();
+ // placeholder sponsors (replace this section)
+ const fakeSponsorNames = [
+ "Ryan Yang",
+ "Ryan Yang",
+ "Ryan Yang",
+ "Ryan Yang",
+ "Ryan Yang",
+ ];
+ const fakeSponsorLogos = fakeSponsorNames.map((name, index) => ({
+ _key: `fake-sponsor-${index}`,
+ name,
+ url: "#",
+ logo: {
+ asset: {
+ _ref: "image-placeholder",
+ },
+ },
+ }));
+
+ const allSponsors = [...sponsors.sponsors, ...fakeSponsorLogos];
+
return (
-
-
-
-
Sponsors
-
-
+
);
};