Feature: Homepage Partners Section (#352)

* feat: homepage partners section

* fix: center partner icons vertically

---------

Co-authored-by: Sam Der <[email protected]>

apps/sanity/schemas/index.ts

@@ -1,5 +1,6 @@
 import faqs from "./faqs";
 import event from "./event";
+import partners from "./partners";
 import resource from "./resource";
 import resourceCategory from "./resourceCategory";
 import resourceCategoryOrder from "./resourceCategoryOrder";
@@ -8,6 +9,7 @@ import sponsors from "./sponsors";
 export const schemaTypes = [
 	faqs,
 	event,
+	partners,
 	resource,
 	resourceCategory,
 	resourceCategoryOrder,

apps/sanity/schemas/partners.ts

@@ -0,0 +1,41 @@
+import { defineType, defineField, defineArrayMember } from "sanity";
+import { HeartHandshake } from "lucide-react";
+
+export default defineType({
+	name: "partners",
+	title: "Partners",
+	icon: HeartHandshake,
+	type: "document",
+	fields: [
+		defineField({
+			name: "partners",
+			title: "Partners",
+			type: "array",
+			of: [
+				defineArrayMember({
+					type: "object",
+					name: "partner",
+					fields: [
+						defineField({
+							name: "name",
+							title: "Name",
+							type: "string",
+							validation: (Rule) => Rule.required(),
+						}),
+						defineField({
+							name: "url",
+							title: "URL",
+							type: "url",
+						}),
+						defineField({
+							name: "logo",
+							title: "Logo",
+							type: "image",
+							validation: (Rule) => Rule.required(),
+						}),
+					],
+				}),
+			],
+		}),
+	],
+});

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

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

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

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

apps/site/src/app/(main)/(home)/sections/Partners/Partners.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+
+import { getPartners } from "./getPartners";
+import fishingBoat from "@/assets/images/fishing-boat.png";
+
+import { client } from "@/lib/sanity/client";
+import imageUrlBuilder from "@sanity/image-url";
+
+import styles from "./Partners.module.scss";
+
+const builder = imageUrlBuilder(client);
+
+export default async function Sponsors() {
+	const partners = await getPartners();
+
+	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`}
+			>
+				Partners
+			</h2>
+			<div className="flex flex-wrap gap-8 justify-center pb-32 items-center">
+				{partners.partners.map(({ _key, name, url, logo }) => (
+					<a
+						key={_key}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="max-w-xs flex-grow"
+					>
+						{/* eslint-disable-next-line @next/next/no-img-element*/}
+						<img
+							src={builder.image(logo).format("webp").url()}
+							alt={name + " logo"}
+							className={"max-w-full max-h-full m-auto my-2"}
+						/>
+					</a>
+				))}
+			</div>
+			<Image src={fishingBoat} alt="boat" width="400" height="400" />
+		</section>
+	);
+}

apps/site/src/app/(main)/(home)/sections/Partners/getPartners.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+import { cache } from "react";
+import { client } from "@/lib/sanity/client";
+import { SanityDocument, SanityImageReference } from "@/lib/sanity/types";
+
+export const Partner = z.object({
+	_type: z.literal("partner"),
+	_key: z.string(),
+	name: z.string(),
+	url: z.string().url().optional(),
+	logo: SanityImageReference,
+});
+
+const Partners = SanityDocument.extend({
+	partners: z.array(Partner),
+});
+
+export const getPartners = cache(async () => {
+	const partners = Partners.parse(
+		await client.fetch("*[_type == 'partners' && _id == 'partners'][0]"),
+	);
+	return partners;
+});

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

@@ -1,8 +1,4 @@
-/* eslint-disable @next/next/no-img-element */
-import Image from "next/image";
-
 import { getSponsors } from "./getSponsors";
-import fishingBoat from "@/assets/images/fishing-boat.png";
 import SponsorTier from "./components/SponsorTier/SponsorTier";
 
 import styles from "./Sponsors.module.scss";
@@ -40,7 +36,6 @@ export default async function Sponsors() {
 					<SponsorTier sponsors={sponsors.get(tier)} className={styles[tier]} />
 				</div>
 			))}
-			<Image src={fishingBoat} alt="boat" width="400" height="400" />
 		</section>
 	);
 }

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

@@ -2,4 +2,5 @@ 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"
+export { default as Sponsors } from "./Sponsors/Sponsors";
+export { default as Partners } from "./Partners/Partners";