Replace PNG icons with Habbo-style SVG pixel art icons across index, nav, and mobile nav

- Create 20 Habbo-style pixel-art SVG icon components (home, user, catalog, star, community, games, enter, news, online, camera, chat, clock, heart, arrow, cog, furni, diamond, credits, duckets, rank)
- Update index page: replace all PNG icon references, add pixel font headings, add Habbo-style gradient section headers
- Update navigation: replace all PNG nav icons with Habbo SVG icons
- Update NavDropdown: accept ReactNode icon instead of string path
- Update mobile-nav: replace PNG brand icon with HabboHome SVG

src/components/mobile-nav.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
 import { type ReactNode, useRef, useState } from "react";
 import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { mobileMenuVariants } from "@/lib/motion";
+import { HabboHome } from "@/components/shared/habbo-icons";
 
 interface MobileNavProps {
 	children: ReactNode;
@@ -88,13 +88,7 @@ export function MobileNav({
 										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 								}}
 							>
-								<Image
+								<HabboHome size={22} />
-									src="/assets/images/icons/navigation/home.png"
-									alt=""
-									width={22}
-									height={22}
-									className="shrink-0"
-								/>
 								<span
 									className="text-sm font-extrabold uppercase tracking-wide"
 									style={{

src/components/nav-dropdown.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { dropdownVariants } from "@/lib/motion";
 
 interface NavDropdownProps {
 	label: string;
-	icon?: string;
+	icon?: ReactNode;
 	children: ReactNode;
 }
 
@@ -45,14 +44,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				aria-expanded={open}
 			>
 				{icon ? (
-					<Image
+					<span className="mr-1.5 flex items-center">{icon}</span>
-						src={icon}
-						alt=""
-						width={20}
-						height={20}
-						className="mr-1.5"
-						unoptimized
-					/>
 				) : null}
 				{label}
 				<motion.svg