Adding /live to website

apps/web/package.json

@@ -59,6 +59,7 @@
     "embla-carousel-react": "8.1.7",
     "framer-motion": "^11.3.8",
     "gsap": "^3.12.5",
+    "hls.js": "^1.5.17",
     "jiti": "^1.21.6",
     "lucide-react": "^0.411.0",
     "nanoid": "^5.0.7",

apps/web/src/app/globals.css

@@ -38,10 +38,10 @@
 
 		--radius: 0.5rem;
 
-		--gradient-color-1: #f7f5f5;
-		--gradient-color-2: #f7f5f5;
-		--gradient-color-3: #dcdcdc;
-		--gradient-color-4: #dcdcdc;
+		--gradient-color-1: #3f63c8;
+		--gradient-color-2: #1a46b3;
+		--gradient-color-3: #001773;
+		--gradient-color-4: #11377d;
 	}
 
 	.dark {

apps/web/src/app/live/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import Hls from "hls.js";
+
+export default function LivePage() {
+	const streamUrl =
+		"https://82934cf9c8696bd2.mediapackage.us-east-1.amazonaws.com/out/v1/0909ac7915bf450da5267c52f49797cb/index.m3u8";
+
+	const videoRef = useRef(null);
+
+	useEffect(() => {
+		// Initialize HLS only if supported
+		if (Hls.isSupported()) {
+			const hls = new Hls();
+			hls.loadSource(streamUrl);
+			hls.attachMedia(videoRef.current!);
+
+			hls.on(Hls.Events.MANIFEST_PARSED, () => {
+				// TODO: WILL FIX LATER
+				// @ts-ignore
+				videoRef.current.play();
+			});
+
+			return () => {
+				hls.destroy();
+			};
+		} else {
+			// @ts-ignore
+			if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
+				// For Safari browsers where HLS is natively supported
+				// @ts-ignore
+				videoRef.current.src = streamUrl;
+				// @ts-ignore
+				videoRef.current.play();
+			}
+		}
+	}, [streamUrl]);
+
+	return (
+		<div>
+			<video
+				ref={videoRef}
+				controls
+				width="1920"
+				height="1080"
+				style={{ maxWidth: "100%" }}
+			/>
+		</div>
+	);
+}

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/dash/overview/ServerBubbles.tsx

@@ -36,7 +36,7 @@ export function TitleBubble() {
 					{c.hackathonName}
 				</h1> */}
 				<h1 className="bg-gradient-to-b from-orange-600 via-yellow-300 to-orange-600 bg-clip-text font-bttf text-4xl text-transparent sm:text-7xl lg:text-5xl xl:text-6xl">
-					{"RowdyHacks"}
+					{"rowdyhacks"}
 				</h1>
 				<h2 className="text-center font-mono text-xs text-orange-500 sm:text-base">
 					{`${format(c.startDate, "h:mma, MMM d, yyyy")}`} @{" "}

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>
+	);
+}