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

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

SPONSORS

+
+ {allSponsors.map(({ _key, name, url, logo }) => ( + + {logo.asset._ref === "image-placeholder" ? ( +
{name}
+ ) : ( {name -
- ))} -
+ )} + + ))}
-
+ ); };