feat: introduce new app routes with modular structure and enhanced features

Added modular app routes including `login`, `dashboard`, `categories`, `trends`, and `upload`. Introduced reusable components such as `ContentList`, `ContentSkeleton`, and `AppSidebar` for improved UI consistency. Enhanced authentication with `AuthProvider` and implemented lazy loading, dynamic layouts, and infinite scrolling for better performance.

frontend/src/app/(dashboard)/category/[slug]/page.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { Metadata } from "next";
+import { CategoryContent } from "@/components/category-content";
+import { CategoryService } from "@/services/category.service";
+
+export async function generateMetadata({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}): Promise<Metadata> {
+  const { slug } = await params;
+  try {
+    const categories = await CategoryService.getAll();
+    const category = categories.find(c => c.slug === slug);
+    return {
+      title: `${category?.name || slug} | MemeGoat`,
+      description: `Découvrez tous les mèmes de la catégorie ${category?.name || slug} sur MemeGoat.`,
+    };
+  } catch (error) {
+    return { title: `Catégorie : ${slug} | MemeGoat` };
+  }
+}
+
+export default async function CategoryPage({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}) {
+  const { slug } = await params;
+  return <CategoryContent slug={slug} />;
+}

frontend/src/app/(dashboard)/category/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { CategoryService } from "@/services/category.service";
+import type { Category } from "@/types/content";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { LayoutGrid } from "lucide-react";
+
+export default function CategoriesPage() {
+  const [categories, setCategories] = React.useState<Category[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    CategoryService.getAll()
+      .then(setCategories)
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      <div className="flex items-center gap-2 mb-8">
+        <LayoutGrid className="h-6 w-6" />
+        <h1 className="text-3xl font-bold">Catégories</h1>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {loading ? (
+          Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i} className="animate-pulse">
+              <CardHeader className="h-24 bg-zinc-100 dark:bg-zinc-800 rounded-t-lg" />
+              <CardContent className="h-12" />
+            </Card>
+          ))
+        ) : (
+          categories.map((category) => (
+            <Link key={category.id} href={`/category/${category.slug}`}>
+              <Card className="hover:border-primary transition-colors cursor-pointer group h-full">
+                <CardHeader className="bg-zinc-50 dark:bg-zinc-900 group-hover:bg-primary/5 transition-colors">
+                  <CardTitle className="text-lg">{category.name}</CardTitle>
+                </CardHeader>
+                <CardContent className="pt-4">
+                  <p className="text-sm text-muted-foreground">
+                    {category.description || `Découvrez tous les mèmes de la catégorie ${category.name}.`}
+                  </p>
+                </CardContent>
+              </Card>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}