Add dedicated video pages and related content recommendations

Introduce a new route for individual video pages, enabling direct navigation to videos. The video cards now link to this new page. Additionally, a new `VideoPage` component is added to display video details, track plays, and show recommended videos similar to YouTube's interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/gfjV9kW

client/src/App.tsx

@@ -4,6 +4,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import Home from "@/pages/home";
+import VideoPage from "@/pages/VideoPage";
 import Admin from "@/pages/admin";
 import BunnyAdminPage from "@/pages/BunnyAdminPage";
 import NotFound from "@/pages/not-found";
@@ -12,6 +13,7 @@ function Router() {
   return (
     <Switch>
       <Route path="/" component={Home} />
+      <Route path="/video/:id" component={VideoPage} />
       <Route path="/admin" component={Admin} />
       <Route path="/bunny-admin" component={BunnyAdminPage} />
       <Route component={NotFound} />