Use hub 'name' in routes & add top-post sorting

Switch hub endpoints to use the hub `name` slug and update frontend routes/clients accordingly. Backend: HubViewSet now uses lookup_field='name'; PostViewSet list supports `sort=top` with vote_score annotation and time windows/custom ranges, and a new TopPostsCursorPagination was added. Frontend: routes changed from `/hub/:id` to `/h/:name`, the generated hubs API was updated from id->name, and the hub feed client accepts `sort`, `time`, `start`, and `end` params (query key updated). Also adds new homepage UI components (HeroSection, DroneSection) and navbar improvements (scroll state, auto-close mobile menu on route changes, and small icon/class tweaks).

frontend/src/pages/home/home.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
-import PortfolioGrid from "./components/Services/Services";
-import TradingGraph from "./components/Services/TradingGraph";
-import DonationShop from "./components/donate/DonationShop";
-import ContactMeForm from "../../components/home/ContactMe/ContactMeForm";
-import Services from "../../components/home/services/Services";
-
+import HeroSection from "@/components/home/hero/HeroSection";
+import DroneSection from "@/components/home/drone/DroneSection";
+import WebDevSection from "@/components/home/webdev/WebDevSection";
+import ProjectsSection from "@/components/home/projects/ProjectsSection";
+import TechMarquee from "@/components/home/tech/TechMarquee";
+import ContactMeForm from "@/components/home/ContactMe/ContactMeForm";
 
 export default function Home() {
-  // Optional: keep spark effect for fun
+  // Spark cursor on click
   useEffect(() => {
     const handleClick = (event: MouseEvent) => {
       const spark = document.createElement("div");
@@ -33,13 +33,15 @@ export default function Home() {
 
   return (
     <main>
-      <Services />
+      <HeroSection />
       <div className="divider" />
-      <PortfolioGrid />
+      <DroneSection />
       <div className="divider" />
-      <TradingGraph />
+      <WebDevSection />
       <div className="divider" />
-      <DonationShop />
+      <ProjectsSection />
+      <div className="divider" />
+      <TechMarquee />
       <div className="divider" />
       <ContactMeForm />
     </main>