Feature/sponsors (#25)

* fix: added color-input to sanity config

* feat: sponsors section

* fix: sponsors section description

apps/sanity/sanity.config.ts

@@ -1,6 +1,7 @@
 import {defineConfig} from 'sanity'
 import {deskTool} from 'sanity/desk'
 import {visionTool} from '@sanity/vision'
+import {colorInput} from '@sanity/color-input'
 import {schemaTypes} from './schemas'
 
 export default defineConfig({
@@ -10,7 +11,7 @@ export default defineConfig({
   projectId: 'fosuyru0',
   dataset: 'production',
 
-  plugins: [deskTool(), visionTool()],
+  plugins: [deskTool(), visionTool(), colorInput()],
 
   schema: {
     types: schemaTypes,

apps/site/package.json

@@ -18,6 +18,7 @@
 		"@radix-ui/react-toast": "^1.1.5",
 		"@react-three/drei": "^9.88.14",
 		"@react-three/fiber": "^8.15.11",
+		"@sanity/image-url": "^1.0.2",
 		"@types/three": "^0.158.2",
 		"clsx": "^2.0.0",
 		"lucide-react": "^0.292.0",

apps/site/src/app/(home)/page.tsx

@@ -1,4 +1,4 @@
-import { About, Landing, MentorVolunteer, FAQ } from "./sections";
+import { About, Landing, MentorVolunteer, FAQ, Sponsors } from "./sections";
 
 export const revalidate = 60;
 
@@ -13,6 +13,7 @@ export default function Home() {
 			<About />
 			<MentorVolunteer />
 			<FAQ />
+			<Sponsors />
 		</>
 	);
 }

apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss

@@ -0,0 +1,3 @@
+.title {
+	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+}

apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+
+import { getSponsors } from "./getSponsors";
+import { client } from "@/lib/sanity/client";
+import imageUrlBuilder from "@sanity/image-url";
+import fishingBoat from "@/assets/images/fishing-boat.png";
+
+import styles from "./Sponsors.module.scss";
+
+const builder = imageUrlBuilder(client);
+
+export default async function Sponsors() {
+	const sponsors = await getSponsors();
+
+	return (
+		<section className="container py-24 md:my-16 relative items-center flex flex-col md:p-8 w-3/4 mx-auto text-center">
+			<h2
+				className={`${styles.title} my-12 font-display sm:text-[3rem] text-[#fffce2] text-4xl text-center`}
+			>
+				Sponsors
+			</h2>
+			<p className="max-w-md mb-12">
+				Interested in sponsoring IrvineHacks 2024? Check out our
+				information above to learn more about our event! For more
+				information, please email us at{" "}
+				<a
+					href="mailto:[email protected]"
+					className="hover:underline font-bold"
+				>
+					[email protected]
+				</a>
+				.
+			</p>
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-14 items-center mb-12">
+				{sponsors.sponsors.map(({ _key, name, url, logo }) => (
+					<a
+						key={_key}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<img
+							className="w-full"
+							src={builder.image(logo).format("webp").url()}
+							alt={name + " logo"}
+						/>
+					</a>
+				))}
+			</div>
+			<Image src={fishingBoat} alt="boat" width="400" height="400" />
+		</section>
+	);
+}

apps/site/src/app/(home)/sections/Sponsors/getSponsors.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { cache } from "react";
+import { client } from "@/lib/sanity/client";
+import { SanityDocument, SanityImageReference } from "@/lib/sanity/types";
+
+const Sponsors = SanityDocument.extend({
+	sponsors: z.array(
+		z.object({
+			_type: z.literal("sponsor"),
+			_key: z.string(),
+			name: z.string(),
+			url: z.string().url().optional(),
+			tier: z.union([z.literal("bronze"), z.literal("silver")]),
+			logo: SanityImageReference,
+		}),
+	),
+});
+
+export const getSponsors = cache(async () => {
+	return Sponsors.parse(await client.fetch("*[_type == 'sponsors'][0]"));
+});

apps/site/src/app/(home)/sections/index.ts

@@ -2,3 +2,4 @@ export { default as Landing } from "./Landing/Landing";
 export { default as About } from "./About/About";
 export { default as MentorVolunteer } from "./MentorVolunteer/MentorVolunteer";
 export { default as FAQ } from "./FAQ/FAQ";
+export { default as Sponsors } from "./Sponsors/Sponsors"