Revamp invite page banner styling and layout.

Updated the invite page banner to use a more dynamic and visually appealing design with a background image or fallback styling. Added a text overlay for improved readability and enhanced the fallback display when an image is unavailable.

frontend/src/app/(public)/invite/[slug]/page.tsx

@@ -123,45 +123,52 @@ const InvitationPage = () => {
 
       <div className="mx-auto max-w-4xl px-4 py-6">
         {/* Wooden Sign Title */}
+        <div className="mx-auto max-w-6xl px-0 py-10">
           <div
-          className="mx-auto mb-10 mt-6 rounded-lg p-6 text-center"
+            className="relative overflow-hidden rounded-xl bg-cover bg-center"
             style={{
-            backgroundColor: colors.secondary,
+              backgroundImage: eventTheme?.foreground_image_url
-            color: colors.text,
+                ? `url(${getServerFileUrl(eventTheme.foreground_image_url)})`
-            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                : "none",
+              backgroundColor: !eventTheme?.foreground_image_url
+                ? colors.secondary
+                : undefined,
             }}
           >
-          <h1 className="text-4xl font-bold md:text-5xl" style={headingStyle}>
+            {/* Overlay to ensure text readability */}
+            <div
+              className="absolute inset-0 bg-accent-foreground/30
+                 backdrop-blur-sm"
+            ></div>
+
+            {/* Content */}
+            <div className="relative flex flex-col items-center justify-center text-center p-10">
+              <h1
+                className="text-4xl md:text-5xl font-bold text-white drop-shadow-md"
+                style={headingStyle}
+              >
                 {event.title}
               </h1>
-          <h2 className="mt-2 text-xl md:text-2xl" style={headingStyle}>
+              <h2
+                className="mt-3 text-xl md:text-2xl text-white/80 drop-shadow"
+                style={headingStyle}
+              >
                 Safari Adventure
               </h2>
             </div>
-        {/* Safari Animals Banner */}
+
-        <div className="mb-8 flex justify-center">
+            {/* Fallback when image is not available */}
-          {eventTheme?.foreground_image_url ? (
+            {!eventTheme?.foreground_image_url && (
-            <div className="relative h-64 w-full max-w-4xl md:h-64">
-              <Image
-                src={getServerFileUrl(eventTheme.foreground_image_url) || ""}
-                alt="Safari Animals"
-                fill
-                className="object-contain"
-                priority
-              />
-            </div>
-          ) : (
               <div
-              className="flex h-48 w-full max-w-2xl items-center justify-center rounded-lg border-2 md:h-64"
+                className="relative py-24 text-lg text-center italic text-white"
-              style={{
+                style={{ color: colors.text }}
-                borderColor: colors.primary,
-                backgroundColor: "rgba(255, 255, 255, 0.5)",
-              }}
               >
-              <p className="text-center text-lg">Safari Animals Illustration</p>
+                Safari Animals Illustration
               </div>
             )}
           </div>
+        </div>
+
         {/* Date/Time with Elephant */}
         <InfoCard
           imageSrc={getAssetUrl("elephant")}