feat: initial commit with seeded database and premium ui changes

frontend/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

frontend/hooks/use-scroll.ts

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export function useScroll(downThreshold: number, upThreshold?: number) {
+	const [scrolled, setScrolled] = useState(false);
+	const scrollUpThreshold = upThreshold ?? downThreshold / 2;
+
+	useEffect(() => {
+		const handleScroll = () => {
+			const y = window.scrollY;
+			// Hysteresis: different thresholds for up/down to prevent flickering
+			setScrolled((prev) => {
+				if (prev) {
+					// Currently scrolled - only unscroll when below lower threshold
+					return y > scrollUpThreshold;
+				}
+				// Currently not scrolled - only scroll when above higher threshold
+				return y > downThreshold;
+			});
+		};
+
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		handleScroll();
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [downThreshold, scrollUpThreshold]);
+
+	return scrolled;
+}