Added sponsors section to the website

apps/web/src/app/page.tsx

@@ -5,6 +5,7 @@ import About from "@/components/landing/About";
 
 import Partners from "@/components/landing/Partners";
 import Footer from "@/components/landing/Footer";
+import { Sponsors } from "@/components/landing/Sponsors";
 import MLHBadge from "@/components/landing/MLHBadge";
 import Team from "@/components/landing/Team";
 import { Oswald } from "next/font/google";
@@ -52,6 +53,7 @@ export default function Home() {
 				</div>
 				<Hero />
 				<About />
+				<Sponsors />
 				{/* <Partners /> */}
 				<WorkWithUs />
 				<Team />

apps/web/src/components/landing/SponsorItem.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Partner } from "@/lib/utils/shared/types";
+
+const capitalize = (input: string) =>
+	input.charAt(0).toUpperCase() + input.slice(1);
+
+const tierColorMap = {
+	title: "text-[#E817C6]",
+	gold: "text-yellow-600",
+	silver: "text-gray-400",
+	bronze: "text-[#a97142]",
+	partner: "text-[#17C6E8]",
+} as const;
+
+export function SponsorItem({ name, logo, tier, url }: Partner) {
+	const textColor = tierColorMap[tier];
+	const isTitle = tier === "title";
+
+	return (
+		<Link
+			href={url}
+			className={`group flex flex-col justify-center text-center ${
+				isTitle ? "w-full max-w-2xl" : "w-full"
+			}`}
+		>
+			<div>
+				<div className="relative z-50 rounded-xl border-2 border-[#ea580c] bg-white transition-transform lg:group-hover:-translate-y-6">
+					<div
+						className={`flex items-center justify-center p-4 ${
+							isTitle ? "h-96" : "h-60"
+						}`}
+					>
+						<Image
+							src={logo}
+							height={isTitle ? 300 : 200}
+							width={isTitle ? 300 : 200}
+							alt={`${name}'s Logo`}
+							className="object-contain"
+						/>
+					</div>
+				</div>
+				<div
+					className={`invisible ${textColor} relative ${
+						isTitle ? "bottom-32" : "bottom-20"
+					} z-10 transition-all duration-200 ease-linear lg:group-hover:visible lg:group-hover:bottom-0`}
+				>
+					<h1
+						className={`mb-2 font-semibold ${
+							isTitle ? "text-6xl" : "text-2xl"
+						}`}
+					>
+						{name}
+					</h1>
+					<h1 className={isTitle ? "text-4xl" : "text-xl"}>
+						{capitalize(tier)} Sponsor
+					</h1>
+				</div>
+			</div>
+		</Link>
+	);
+}

apps/web/src/components/landing/Sponsors.tsx

@@ -0,0 +1,48 @@
+import { SponsorItem } from "./SponsorItem";
+import { Partner } from "@/lib/utils/shared/types";
+import partners from "./partners.json";
+
+export async function Sponsors() {
+	const partnerList: Partner[] = partners.partners as Partner[];
+
+	const titleSponsors = partnerList.filter((p) => p.tier === "title");
+	const otherSponsors = partnerList.filter((p) => p.tier !== "title");
+
+	return (
+		<section className="mt-20 font-oswald">
+			<div className="rounded-xl px-8 py-10">
+				<div className="mb-28 py-10">
+					<h1 className="flex justify-center bg-gradient-to-b from-orange-600 via-yellow-300 to-orange-600 bg-clip-text text-center font-bttf text-4xl text-transparent sm:text-5xl md:text-6xl">
+						a huge thanks to our rowdyhacks partners
+					</h1>
+				</div>
+
+				{titleSponsors.length > 0 && (
+					<div className="mb-16 flex flex-wrap justify-center gap-8">
+						{titleSponsors.map(({ name, url, logo, tier }) => (
+							<SponsorItem
+								key={name}
+								name={name}
+								url={url}
+								logo={logo}
+								tier={tier}
+							/>
+						))}
+					</div>
+				)}
+
+				<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+					{otherSponsors.map(({ name, url, logo, tier }) => (
+						<SponsorItem
+							key={name}
+							name={name}
+							url={url}
+							logo={logo}
+							tier={tier}
+						/>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

apps/web/src/components/landing/partners.json

@@ -1,142 +1,64 @@
 {
 	"partners": [
-		{
-			"name": "Cymanii",
-			"logo": "CyManII_Logo.svg",
-			"url": "https://cymanii.org/",
-			"tier": "Gold Sponsor"
-		},
-		{
-			"name": "UTSA DS Dept.",
-			"logo": "UTSADS.svg",
-			"url": "https://sds.utsa.edu/",
-			"tier": "Gold Sponsor"
-		},
 		{
 			"name": "Swivel",
-			"logo": "swivel_logo.svg",
-			"url": "https://www.getswivel.io/",
-			"tier": "Silver Sponsor"
-		},
-		{
-			"name": "UTSA CS Dept.",
-			"logo": "UTSA_CS.svg",
-			"url": "https://sciences.utsa.edu/computer-science/",
-			"tier": "Silver Sponsor"
-		},
-		{
-			"name": "Frost Bank",
-			"logo": "FrostBank.svg",
-			"url": "https://www.frostbank.com/",
-			"tier": "Silver Sponsor"
-		},
-		{
-			"name": "Valero",
-			"logo": "ValeroLogo.svg",
-			"url": "https://www.valero.com/",
-			"tier": "Silver Sponsor"
-		},
-		{
-			"name": "Google",
-			"logo": "Google_Icon.svg",
-			"url": "https://about.google/",
-			"tier": "Bronze Sponsor"
-		},
-		{
-			"name": "Paycom",
-			"logo": "PaycomLogo.svg",
-			"url": "https://www.paycom.com/",
-			"tier": "Bronze Sponsor"
+			"logo": "/img/sponsors/SWIVEL Knockout-b.svg",
+			"tier": "title",
+			"url": "https://www.getswivel.io/"
 		},
 		{
-			"name": "Dell",
-			"logo": "Dell_Tech_Logo.svg",
-			"url": "https://www.dell.com/",
-			"tier": "Bronze Sponsor"
-		},
-		{
-			"name": "S + S",
-			"logo": "Students_and_Startups.svg",
-			"url": "https://studentsstartups.com/",
-			"tier": "Bronze Sponsor"
-		},
-		{
-			"name": "AFCS",
-			"logo": "AFCSLogo.svg",
-			"url": "https://afciviliancareers.com/",
-			"tier": "Bronze Sponsor"
-		},
-		{
-			"name": "Accenture",
-			"logo": "Accenture-logo.svg",
-			"url": "https://www.accenture.com/",
-			"tier": "Rowdy Partner"
+			"name": "Schroeder",
+			"logo": "/img/sponsors/SCHROEDER.png",
+			"tier": "bronze",
+			"url": "/"
 		},
 		{
-			"name": "UTSA COE",
-			"logo": "UTSA_COE.svg",
-			"url": "https://klesse.utsa.edu/",
-			"tier": "Rowdy Partner"
+			"name": "Groq",
+			"logo": "/img/sponsors/GROQ.png",
+			"tier": "silver",
+			"url": "https://groq.com/"
 		},
 		{
-			"name": "UTSA Tech Store",
-			"logo": "rowdy_tech_logo.svg",
-			"url": "https://campustechnologystore.com/campustechnologystore/",
-			"tier": "Rowdy Partner"
+			"name": "Matrix AI",
+			"logo": "/img/sponsors/MATRIX.png",
+			"tier": "partner",
+			"url": "https://ai.utsa.edu/"
 		},
 		{
-			"name": "TD Synnex",
-			"logo": "TD_Synnex_logo.svg",
-			"url": "https://www.tdsynnex.com/",
-			"tier": "Rowdy Partner"
+			"name": "CyManii",
+			"logo": "/img/sponsors/CYMANII.svg",
+			"tier": "silver",
+			"url": "https://cymanii.org/"
 		},
 		{
-			"name": "Wolfram Alpha",
-			"logo": "wolfram_logo.svg",
-			"url": "https://www.wolframalpha.com/",
-			"tier": "Rowdy Partner"
+			"name": "Klesse Engineering",
+			"logo": "/img/sponsors/KLESSE.svg",
+			"tier": "partner",
+			"url": "https://klesse.utsa.edu/"
 		},
 		{
-			"name": "CodePath",
-			"logo": "Codepath_logo.svg",
-			"url": "https://www.codepath.org/",
-			"tier": "Rowdy Partner"
+			"name": "UTSA Data Science",
+			"logo": "/img/sponsors/UTSA_DATA_SCIENCE.svg",
+			"tier": "gold",
+			"url": "https://sds.utsa.edu/"
 		},
 		{
-			"name": "ACM",
-			"logo": "ACM_logo.svg",
-			"url": "https://www.acm.org/",
-			"tier": "Rowdy Partner"
+			"name": "UTSA Computer Science",
+			"logo": "/img/sponsors/UTSA_CS.svg",
+			"tier": "silver",
+			"url": "https://sciences.utsa.edu/computer-science/"
 		},
 		{
-			"name": "Artea",
-			"logo": "Artea_logo.svg",
-			"url": "https://www.drinkartea.com/",
-			"tier": "Rowdy In-Kind"
+			"name": "HEB",
+			"logo": "/img/sponsors/HEB.svg",
+			"tier": "silver",
+			"url": "https://www.heb.com/"
 		},
 		{
-			"name": "Pho Thien An",
-			"logo": "Pho_logo.svg",
-			"url": "https://www.phothienan.com/",
-			"tier": "Rowdy In-Kind"
-		},
-		{
-			"name": "Bunz Burgers",
-			"logo": "Bunz_logo.svg",
-			"url": "https://www.tastybunz.com/",
-			"tier": "Rowdy In-Kind"
-		},
-		{
-			"name": "H-E-B",
-			"logo": "HEB.svg",
-			"url": "https://www.heb.com/",
-			"tier": "Rowdy In-Kind"
-		},
-		{
-			"name": "Six Flags",
-			"logo": "Six_Flags_logo.svg",
-			"url": "https://www.sixflags.com/fiestatexas",
-			"tier": "Rowdy In-Kind"
+			"name": "Dell",
+			"logo": "/img/sponsors/DELL.svg",
+			"tier": "silver",
+			"url": "https://www.dell.com/en-us"
 		}
 	]
 }

apps/web/src/lib/utils/shared/types.ts

@@ -1 +1,10 @@
 export type DeArray<T> = T extends (infer R)[] ? R : T;
+
+type PartnerType = "gold" | "silver" | "bronze" | "title" | "partner";
+
+export interface Partner {
+	name: string;
+	logo: string;
+	tier: PartnerType;
+	url: string;
+}