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 mb-10 mt-6 rounded-lg p-6 text-center"
-          style={{
-            backgroundColor: colors.secondary,
-            color: colors.text,
-            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-          }}
-        >
-          <h1 className="text-4xl font-bold md:text-5xl" style={headingStyle}>
-            {event.title}
-          </h1>
-          <h2 className="mt-2 text-xl md:text-2xl" style={headingStyle}>
-            Safari Adventure
-          </h2>
-        </div>
-        {/* Safari Animals Banner */}
-        <div className="mb-8 flex justify-center">
-          {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="mx-auto max-w-6xl px-0 py-10">
+          <div
+            className="relative overflow-hidden rounded-xl bg-cover bg-center"
+            style={{
+              backgroundImage: eventTheme?.foreground_image_url
+                ? `url(${getServerFileUrl(eventTheme.foreground_image_url)})`
+                : "none",
+              backgroundColor: !eventTheme?.foreground_image_url
+                ? colors.secondary
+                : undefined,
+            }}
+          >
+            {/* Overlay to ensure text readability */}
             <div
-              className="flex h-48 w-full max-w-2xl items-center justify-center rounded-lg border-2 md:h-64"
-              style={{
-                borderColor: colors.primary,
-                backgroundColor: "rgba(255, 255, 255, 0.5)",
-              }}
-            >
-              <p className="text-center text-lg">Safari Animals Illustration</p>
+              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-3 text-xl md:text-2xl text-white/80 drop-shadow"
+                style={headingStyle}
+              >
+                Safari Adventure
+              </h2>
             </div>
-          )}
+
+            {/* Fallback when image is not available */}
+            {!eventTheme?.foreground_image_url && (
+              <div
+                className="relative py-24 text-lg text-center italic text-white"
+                style={{ color: colors.text }}
+              >
+                Safari Animals Illustration
+              </div>
+            )}
+          </div>
         </div>
+
         {/* Date/Time with Elephant */}
         <InfoCard
           imageSrc={getAssetUrl("elephant")}