feat(website): enhance website

web/src/hooks/use-media-query.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function useMediaQuery(query: string): boolean {
+	const [matches, setMatches] = useState(false)
+
+	useEffect(() => {
+		const media = window.matchMedia(query)
+
+		// Initial check
+		if (media.matches !== matches) {
+			setMatches(media.matches)
+		}
+
+		// Setup listener for changes
+		const listener = () => setMatches(media.matches)
+		media.addEventListener("change", listener)
+
+		// Cleanup
+		return () => media.removeEventListener("change", listener)
+	}, [query, matches])
+
+	return matches
+}