Enhance image upload and background management: Update Docker configuration to create a dedicated backgrounds directory for uploaded images, modify API routes to handle background images specifically, and improve README documentation to reflect these changes. Additionally, refactor components to utilize the new Avatar component for consistent avatar rendering across the application.

app/feedback/[eventId]/page.tsx

@@ -1,30 +1,19 @@
-"use client";
+import FeedbackPageClient from "./FeedbackPageClient";
+import { getBackgroundImage } from "@/lib/preferences";
 
-import { useState, useEffect, type FormEvent } from "react";
-import { useSession } from "next-auth/react";
-import { useRouter, useParams } from "next/navigation";
-import Navigation from "@/components/Navigation";
-import { useBackgroundImage } from "@/hooks/usePreferences";
+export const dynamic = "force-dynamic";
 
-interface Event {
-  id: string;
-  name: string;
-  date: string;
-  description: string;
+interface FeedbackPageProps {
+  params: {
+    eventId: string;
+  };
 }
 
-interface Feedback {
-  id: string;
-  rating: number;
-  comment: string | null;
-}
+export default async function FeedbackPage({ params }: FeedbackPageProps) {
+  const backgroundImage = await getBackgroundImage("home", "/got-2.jpg");
 
-export default function FeedbackPage() {
-  const { status } = useSession();
-  const router = useRouter();
-  const params = useParams();
-  const eventId = params?.eventId as string;
-  const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
+  return <FeedbackPageClient backgroundImage={backgroundImage} />;
+}
 
   const [event, setEvent] = useState<Event | null>(null);
   const [existingFeedback, setExistingFeedback] = useState<Feedback | null>(