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

@@ -4,19 +4,15 @@ import React, { useEffect, useState } from "react";
 import { useEvents } from "@/context/event-context";
 import { useEventThemes } from "@/context/event-theme-context";
 import { format, parseISO } from "date-fns";
-import Image from "next/image";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
 import { Loader2 } from "lucide-react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+// import { RSVP } from "@/components/rsvp";
 import { useParams } from "next/navigation";
-import { EventResponse } from "@/client";
 import { getServerFileUrl } from "@/lib/utils";
-import InfoCard from "@/components/info-card";
 
-interface InvitationParams {
-  slug: string;
-}
+// Helper function to get server file URL (assuming it exists in your codebase)
+// If not, replace with your actual implementation
 
 const InvitationPage = () => {
   const { slug } = useParams<{ slug: string }>();
@@ -28,7 +24,7 @@ const InvitationPage = () => {
 
   // Fetch event data when slug is available
   useEffect(() => {
-    fetchEventBySlug(slug);
+    fetchEventBySlug(slug || "");
   }, [slug, fetchEventBySlug]);
 
   // If loading, show a spinner
@@ -55,7 +51,7 @@ const InvitationPage = () => {
   // Find the theme for this event
   const eventTheme = themes?.find((theme) => theme.id === event.theme_id);
 
-  // Default colors if theme is not available
+  // Enhanced color palette that works well with safari animals
   const colors = eventTheme?.color_palette || {
     primary: "#90B77D", // Soft jungle green
     secondary: "#D2AB67", // Warm giraffe yellow
@@ -63,21 +59,45 @@ const InvitationPage = () => {
     accent2: "#8FBDD3", // Elephant blue
     accent3: "#E8B87D", // Lion tan
     background: "#F9F5F0", // Cream paper texture
+    backgroundDark: "#F0E9D6", // Slightly darker cream for panels
     text: "#5B4B49", // Warm dark brown
     textLight: "#7D6D6B", // Lighter text variant
+    gold: "#D4AF37", // Gold accent for special elements
+  };
+
+  // Font selections
+  const fonts = eventTheme?.fonts || {
+    heading: "Georgia, serif",
+    body: "Arial, sans-serif",
   };
 
   // Format date and time for display
   const eventDate = event.event_date
     ? format(parseISO(event.event_date), "EEEE, MMMM d, yyyy")
     : null;
+
+  const displayDay = event.event_date
+    ? format(parseISO(event.event_date), "EEEE")
+    : null;
+
+  const displayDate = event.event_date
+    ? format(parseISO(event.event_date), "d")
+    : null;
+
+  const displayMonth = event.event_date
+    ? format(parseISO(event.event_date), "MMMM")
+    : null;
+
   const startTime = event.event_start_time
     ? format(parseISO(`2000-01-01T${event.event_start_time}`), "HH:mm")
     : null;
+
   const endTime = event.event_end_time
     ? format(parseISO(`2000-01-01T${event.event_end_time}`), "HH:mm")
     : null;
-  const timeRange = startTime && endTime ? `${startTime} - ${endTime}` : null;
+
+  const timeRange =
+    startTime && endTime ? `${startTime} - ${endTime}` : startTime;
 
   // Format RSVP deadline
   const rsvpDeadline = event.rsvp_deadline
@@ -92,244 +112,352 @@ const InvitationPage = () => {
     return null;
   };
 
-  // Background style
-  const pageStyle = {
+  // Animation variants
+  const archVariants = {
+    hidden: { opacity: 0, y: -50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const contentVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.4,
+        duration: 0.5,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  const animalVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: 1.2,
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  };
+  const foregroundImageUrl = getServerFileUrl(eventTheme?.foreground_image_url);
+  const backgroundImageUrl = getServerFileUrl(eventTheme?.background_image_url);
+  const threeAnimalsImgUrl = getAssetUrl("three-animals");
+  console.log(backgroundImageUrl);
+  return (
+    <div
+      className="min-h-screen overflow-hidden pb-10 pt-0"
+      style={{
         backgroundColor: colors.background,
         color: colors.text,
-    fontFamily: eventTheme?.fonts?.body || "sans-serif",
-  };
-
-  const headingStyle = {
-    fontFamily: eventTheme?.fonts?.heading || "sans-serif",
-    color: colors.text,
-  };
-
-  return (
-    <div className="min-h-screen relative overflow-hidden" style={pageStyle}>
-      <div
-        className="absolute inset-0 bg-no-repeat bg-[top_right] bg-cover bg-fixed opacity-10"
-        style={{
-          backgroundImage: `url(${getAssetUrl("background-h")})`,
+        fontFamily: fonts.body,
       }}
     >
-        <style jsx>{`
-          @media (min-width: 768px) {
-            div {
-              background-image: url(${getAssetUrl("background-w")});
-            }
-          }
-        `}</style>
-      </div>
+      {/* Top jungle arch */}
+      {/* Top arch with background image */}
+      {/* Simplest background image approach */}
+      <motion.div
+        className="relative h-48 w-full md:h-56 lg:h-64"
+        variants={archVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {/* Background image with high transparency (if present) */}
+        {eventTheme?.background_image_url && (
+          <img
+            src={backgroundImageUrl}
+            alt=""
+            className="absolute inset-0 h-full w-full object-cover"
+            style={{ opacity: 0.7 }} // Very subtle background image
+          />
+        )}
 
-      <div className="mx-auto max-w-4xl px-4 py-6">
-        {/* Banner */}
-        <div className="mx-auto max-w-6xl px-0 py-10">
-          <div
-            className="relative overflow-hidden rounded-xl bg-cover bg-center"
+        {/* Animals image stacked on top */}
+        <img
+          src={threeAnimalsImgUrl || ""}
+          alt="Three animals"
+          className="absolute left-1/2 top-1/2 z-10 h-auto max-h-full w-auto max-w-full -translate-x-1/2 -translate-y-1/2 transform object-contain"
+        />
+      </motion.div>
+      {/* Main content container */}
+      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          className="flex flex-col items-center"
+          variants={contentVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {/* Title Section */}
+          <motion.div variants={itemVariants} className="mb-8 text-center">
+            <h2
+              className="text-xl font-medium italic sm:text-2xl"
               style={{
-              backgroundImage: eventTheme?.foreground_image_url
-                ? `url(${getServerFileUrl(eventTheme.foreground_image_url)})`
-                : "none",
-              backgroundColor: !eventTheme?.foreground_image_url
-                ? colors.secondary
-                : undefined,
+                fontFamily: fonts.heading,
+                color: colors.primary,
               }}
             >
-            {/* 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">
+              wild
+            </h2>
             <h1
-                className="text-4xl md:text-5xl font-bold text-white drop-shadow-md"
-                style={headingStyle}
+              className="text-5xl font-bold tracking-wide sm:text-6xl md:text-7xl"
+              style={{
+                fontFamily: fonts.heading,
+                color: colors.secondary,
+              }}
+            >
+              ONE
+            </h1>
+            {/*<p*/}
+            {/*  className="mt-4 text-sm uppercase tracking-widest sm:text-base"*/}
+            {/*  style={{ color: colors.text }}*/}
+            {/*>*/}
+            {/*  SEI INVITATO ALL'EVENTO*/}
+            {/*</p>*/}
+            <h3
+              className="mt-3 text-xl font-bold sm:text-2xl md:text-3xl"
+              style={{
+                fontFamily: fonts.heading,
+                color: colors.text,
+              }}
             >
               {event.title}
-              </h1>
-              <h2
-                className="mt-3 text-xl md:text-2xl text-white/80 drop-shadow"
-                style={headingStyle}
+            </h3>
+          </motion.div>
+
+          {/* Date & Time Section */}
+          <motion.div variants={itemVariants} className="mb-8 w-full max-w-md">
+            <div
+              className="rounded-lg p-5"
+              style={{ backgroundColor: colors.backgroundDark }}
             >
-                Safari Adventure
-              </h2>
+              <div className="flex items-center justify-center space-x-4 sm:space-x-6">
+                <div className="text-center">
+                  <p
+                    className="text-xs uppercase tracking-wide sm:text-sm"
+                    style={{ color: colors.textLight }}
+                  >
+                    {displayDay}
+                  </p>
+                  <p
+                    className="text-xl font-bold sm:text-2xl"
+                    style={{
+                      fontFamily: fonts.heading,
+                      color: colors.text,
+                    }}
+                  >
+                    {displayDate}
+                  </p>
                 </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 }}
+                  className="h-12 w-px sm:h-16"
+                  style={{ backgroundColor: colors.primary }}
+                ></div>
+
+                <div className="text-center">
+                  <p
+                    className="text-xl font-bold sm:text-2xl"
+                    style={{
+                      fontFamily: fonts.heading,
+                      color: colors.primary,
+                    }}
+                  >
+                    {displayMonth}
+                  </p>
+                </div>
+
+                <div
+                  className="h-12 w-px sm:h-16"
+                  style={{ backgroundColor: colors.primary }}
+                ></div>
+
+                <div className="text-center">
+                  <p
+                    className="text-xl font-bold sm:text-2xl"
+                    style={{
+                      fontFamily: fonts.heading,
+                      color: colors.text,
+                    }}
+                  >
+                    {timeRange}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Location Section */}
+          <motion.div variants={itemVariants} className="mb-8 w-full max-w-md">
+            <div
+              className="rounded-lg p-5"
+              style={{ backgroundColor: colors.backgroundDark }}
+            >
+              <h4
+                className="mb-2 text-center text-lg font-bold sm:text-xl"
+                style={{
+                  fontFamily: fonts.heading,
+                  color: colors.text,
+                }}
+              >
+                {event.location_name}
+              </h4>
+              <p
+                className="mb-3 text-center text-sm sm:text-base"
+                style={{ color: colors.textLight }}
+              >
+                {event.location_address}
+              </p>
+
+              {event.location_url && (
+                <div className="flex justify-center">
+                  <Button
+                    className="flex items-center justify-center rounded-md border-2 px-6 py-2 text-sm font-medium transition-all duration-300 hover:scale-105 hover:shadow-md sm:text-base"
+                    style={{
+                      borderColor: colors.primary,
+                      color: colors.primary,
+                      backgroundColor: "white",
+                    }}
+                    onClick={() =>
+                      window.open(event.location_url || "", "_blank")
+                    }
+                  >
+                    VEDI MAPPA
+                  </Button>
+                </div>
+              )}
+            </div>
+          </motion.div>
+
+          {/* Description Section */}
+          {event.description && (
+            <motion.div
+              variants={itemVariants}
+              className="mb-8 w-full max-w-2xl"
+            >
+              <div
+                className="rounded-lg p-5 md:p-6"
+                style={{ backgroundColor: colors.backgroundDark }}
+              >
+                <div
+                  className="whitespace-pre-line text-center text-sm italic sm:text-base"
+                  style={{ color: colors.textLight }}
+                >
+                  {event.description}
+                </div>
+                <p
+                  className="mt-4 text-center text-sm italic sm:text-base"
+                  style={{ color: colors.secondary }}
+                >
+                  Con affetto, Emma, Anto & Fely
+                </p>
+              </div>
+            </motion.div>
+          )}
+
+          {/* RSVP and Gift Registry Section */}
+          <motion.div
+            variants={itemVariants}
+            className="mb-12 flex flex-col items-center space-y-6 sm:flex-row sm:justify-center sm:space-x-8 sm:space-y-0"
+          >
+            {event.rsvp_enabled && (
+              <div className="text-center">
+                {/*<p*/}
+                {/*  className="mb-2 text-sm font-medium sm:text-base"*/}
+                {/*  style={{ color: colors.text }}*/}
+                {/*>*/}
+                {/*  RSVP by {rsvpDeadline}*/}
+                {/*</p>*/}
+                <Button
+                  className="rounded-md px-8 py-2 text-sm font-medium transition duration-300 hover:scale-105 sm:text-base"
+                  style={{
+                    backgroundColor: colors.accent,
+                    color: "white",
+                  }}
+                  onClick={() => setShowRSVP(true)}
+                >
+                  PARTECIPO
+                </Button>
+              </div>
+            )}
+
+            {event.gift_registry_enabled && (
+              <div className="text-center">
+                {/*<p*/}
+                {/*  className="mb-2 text-sm font-medium sm:text-base"*/}
+                {/*  style={{ color: colors.text }}*/}
+                {/*>*/}
+                {/*  List Regali*/}
+                {/*</p>*/}
+                <Button
+                  className="rounded-md px-8 py-2 text-sm font-medium transition duration-300 hover:scale-105 sm:text-base"
+                  style={{
+                    backgroundColor: colors.secondary,
+                    color: "white",
+                  }}
+                  onClick={() => window.open(`/gifts/${slug}`, "_blank")}
+                >
+                  LISTA REGALI
+                </Button>
+              </div>
+            )}
+          </motion.div>
+        </motion.div>
+
+        {/* Animal Section at Bottom */}
+        <motion.div
+          className="mb-6 mt-10 flex justify-center" // Increased margins for more space
+          variants={animalVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          <div className="relative h-48 w-full max-w-4xl sm:h-64 md:h-80 lg:h-96">
+            {" "}
+            {eventTheme?.foreground_image_url ? (
+              <img
+                src={foregroundImageUrl}
+                alt="Safari Animals"
+                className="h-full w-full object-contain"
+              />
+            ) : (
+              <div
+                className="flex h-full w-full items-center justify-center rounded-lg text-sm sm:text-base"
+                style={{ backgroundColor: colors.backgroundDark }}
               >
                 Safari Animals Illustration
               </div>
             )}
           </div>
+        </motion.div>
+
+        {/* Bottom arch to frame the animals */}
       </div>
 
-        {/* Date/Time with Elephant */}
-        <InfoCard
-          imageSrc={getAssetUrl("elephant")}
-          imageAlt="Elephant"
-          borderColor={colors.accent2}
-          backgroundColor="rgba(240,233,214,0.7)"
-          headingText={eventDate || ""}
-          headingStyle={headingStyle}
-          bodyText={timeRange || ""}
-          bodyTextColor={colors.text}
-        />
-
-        {/* Location with Giraffe */}
-        <InfoCard
-          imageSrc={getAssetUrl("giraffe")}
-          imageAlt="Giraffe"
-          borderColor={colors.secondary}
-          backgroundColor="rgba(240,233,214,0.7)"
-          headingText={event.location_name || ""}
-          headingStyle={headingStyle}
-          bodyText={event.location_address || ""}
-          bodyTextColor={colors.text}
-          buttonProps={
-            event.location_url
-              ? {
-                  text: "View Map",
-                  href: event.location_url,
-                  backgroundColor: colors.secondary,
-                  textColor: "white",
-                }
-              : undefined
-          }
-          imagePosition="right" // key part for giraffe card
-        />
-
-        {/* Description */}
-        <Card
-          className="mb-10 border-2 p-6"
-          style={{
-            backgroundColor: "white",
-            borderColor: colors.primary,
-            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.05)",
-          }}
-        >
-          <h3
-            className="mb-4 text-center text-2xl font-bold"
-            style={headingStyle}
-          >
-            La nostra piccola safari adventure!
-          </h3>
-          <div
-            className="prose mx-auto max-w-none"
-            style={{ color: colors.text }}
-          >
-            {event.description ? (
-              <div className="whitespace-pre-line text-center">
-                {event.description}
-              </div>
-            ) : (
-              <p className="text-center">
-                Join us for a wild safari celebration with games, food, and
-                jungle fun! Safari attire encouraged but optional. Children
-                welcome to dress as their favorite animals for a truly wild
-                experience!
-              </p>
-            )}
-          </div>
-        </Card>
-        {/* RSVP Section */}
-        {event.rsvp_enabled && (
-          <div
-            className="mb-10 rounded-xl p-6"
-            style={{
-              backgroundColor: colors.accent,
-              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-            }}
-          >
-            <h3
-              className="mb-2 text-center text-2xl font-bold text-white"
-              style={headingStyle}
-            >
-              RSVP
-            </h3>
-            <p className="mb-4 text-center text-white">
-              {rsvpDeadline
-                ? `Please respond by ${rsvpDeadline}`
-                : "Please respond as soon as possible"}
-            </p>
-            <div className="flex justify-center">
-              <Link href={`/rsvp/${event.slug}`}>
-                <Button
-                  className="rounded-full px-8 py-6 text-lg"
-                  style={{
-                    backgroundColor: "white",
-                    color: colors.text,
-                  }}
-                >
-                  Respond Now
-                </Button>
-              </Link>
-            </div>
-          </div>
-        )}
-        {/* Gift Registry with Lion */}
-        {event.gift_registry_enabled && (
-          <InfoCard
-            imageSrc={getAssetUrl("lion")}
-            imageAlt="Lion"
-            imagePosition="right"
-            borderColor={colors.accent3}
-            backgroundColor="rgba(240, 233, 214, 0.7)"
-            boxShadow="0 2px 4px rgba(0, 0, 0, 0.05)"
-            headingText="Gift Registry"
-            headingStyle={{
-              fontFamily: eventTheme?.fonts?.heading || "sans-serif",
-              color: colors.text,
-            }}
-            bodyText="View Emma's Wishes"
-            bodyTextColor={colors.text}
-            buttonProps={{
-              text: "View Gifts",
-              href: `/gifts/${event.slug}`,
-              backgroundColor: colors.accent3,
-              textColor: "#ffffff",
-            }}
-          />
-        )}
-        {/* View Map Button */}
-        {event.location_url && (
-          <div className="mb-10 flex justify-center">
-            <Link
-              href={event.location_url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Button
-                className="rounded-full px-8 py-6 text-lg"
-                style={{
-                  backgroundColor: colors.primary,
-                  color: "white",
-                }}
-              >
-                View Location Map
-              </Button>
-            </Link>
-          </div>
-        )}
-        {/* Footer with Contact Info */}
-        <div
-          className="mx-auto max-w-2xl rounded-lg p-6 text-center"
-          style={{
-            backgroundColor: "rgba(240, 233, 214, 0.5)",
-            borderColor: colors.secondary,
-            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-          }}
-        >
-          <p className="mb-2 font-semibold">Contact:</p>
-          {event.contact_email && <p className="mb-1">{event.contact_email}</p>}
-          {event.contact_phone && <p>{event.contact_phone}</p>}
-        </div>
-      </div>
+      {/* RSVP Modal */}
+      {/*{showRSVP && (*/}
+      {/*  <RSVP*/}
+      {/*    eventId={event.id}*/}
+      {/*    isOpen={showRSVP}*/}
+      {/*    onClose={() => setShowRSVP(false)}*/}
+      {/*  />*/}
+      {/*)}*/}
     </div>
   );
 };