@titas_mallick/wedding-site-gen 1.1.0 → 2.0.1

package/app/invitation/[slug]/page.tsx

@@ -1,7 +1,17 @@
 "use client";
 
 import { useEffect, useState, use } from "react";
-import { getFirestore, doc, getDoc, addDoc, collection, serverTimestamp } from "firebase/firestore";
+import {
+  getFirestore,
+  doc,
+  getDoc,
+  addDoc,
+  collection,
+  serverTimestamp,
+  query,
+  where,
+  getDocs,
+} from "firebase/firestore";
 import {
   Card,
   CardBody,
@@ -22,7 +32,7 @@ import { motion, AnimatePresence } from "framer-motion";
 
 import { fontCursive, fontSans, fontMono } from "@/config/fonts";
 import firebaseApp from "@/config/firebase";
-import { MapPinIcon, CalendarIcon, ClockIcon } from "@/components/icons";
+import { MapPinIcon, CalendarIcon, ClockIcon, CheckIcon } from "@/components/icons";
 
 export default function InvitationPage({
   params,
@@ -36,22 +46,35 @@ export default function InvitationPage({
   const [notFound, setNotFound] = useState(false);
   const [isTranslating, setIsTranslating] = useState(false);
   const [translatedData, setTranslatedData] = useState<any>(null);
-  
+
   // RSVP States
   const [showRSVP, setShowRSVP] = useState(false);
-  const [rsvpData, setRsvpData] = useState({ attending: "yes", guests: 1, food: "non-veg", note: "", captcha: "" });
+  const [rsvpData, setRsvpData] = useState({
+    attending: "yes",
+    guests: 1,
+    food: "non-veg",
+    note: "",
+    captcha: "",
+  });
   const [rsvpLoading, setRsvpLoading] = useState(false);
   const [hasRSVPed, setHasRSVPed] = useState(false);
+  const [hasEmailReminder, setHasEmailReminder] = useState(false);
 
   const handleRSVP = async () => {
     if (rsvpData.captcha.trim() !== "10") {
-      addToast({ title: "Security Check", description: "Please answer correctly (Hint: 10).", color: "warning" });
+      addToast({
+        title: "Security Check",
+        description: "Please answer correctly (Hint: 10).",
+        color: "warning",
+      });
+
       return;
     }
 
     setRsvpLoading(true);
     try {
       const db = getFirestore(firebaseApp());
+
       await addDoc(collection(db, "rsvps"), {
         guestId: slug,
         guestName: guest.name,
@@ -59,17 +82,61 @@ export default function InvitationPage({
         timestamp: serverTimestamp(),
       });
       setHasRSVPed(true);
-      addToast({ title: "RSVP Received", description: "Thank you for confirming!", color: "success" });
+      addToast({
+        title: "RSVP Received",
+        description: "Thank you for confirming!",
+        color: "success",
+      });
     } catch (err) {
       console.error("RSVP error", err);
-      addToast({ title: "Error", description: "Failed to send RSVP. Please try again.", color: "danger" });
+      addToast({
+        title: "Error",
+        description: "Failed to send RSVP. Please try again.",
+        color: "danger",
+      });
     } finally {
       setRsvpLoading(false);
     }
   };
 
   const translateContent = async () => {
-    // ... rest of translation logic remains same
+    if (translatedData) {
+      setTranslatedData(null);
+
+      return;
+    }
+
+    if (!guest) return;
+
+    setIsTranslating(true);
+
+    try {
+      // Simulate network delay for effect
+      await new Promise((resolve) => setTimeout(resolve, 600));
+
+      const relationMap: Record<string, string> = {
+        family: "আত্মীয়",
+        friend: "বন্ধু",
+        colleague: "সহকর্মী",
+        other: "শুভাকাঙ্ক্ষী",
+      };
+
+      setTranslatedData({
+        guestName: guest.name || "অতিথি",
+        familySide: guest.familySide,
+        relation: relationMap[guest.relation?.toLowerCase()] || guest.relation || "শুভাকাঙ্ক্ষী",
+      });
+    } catch (error) {
+      console.error("Translation error:", error);
+      addToast({
+        title: "অনুবাদ ব্যর্থ হয়েছে",
+        description: "দুঃখিত, অনুবাদ করার সময় একটি সমস্যা হয়েছে।",
+        color: "danger",
+      });
+      setTranslatedData(null);
+    } finally {
+      setIsTranslating(false);
+    }
   };
 
   useEffect(() => {
@@ -81,11 +148,24 @@ export default function InvitationPage({
 
         if (docSnap.exists()) {
           const guestData = docSnap.data();
+
           setGuest(guestData);
+
+          // Check for existing email reminders
+          const remindersQuery = query(
+            collection(db, "email-reminders"),
+            where("guestId", "==", slug),
+          );
+          const remindersSnap = await getDocs(remindersQuery);
+
+          if (!remindersSnap.empty) {
+            setHasEmailReminder(true);
+          }
         } else {
           setNotFound(true);
         }
       } catch (error) {
+        console.error("Fetch error:", error);
         setNotFound(true);
       } finally {
         setLoading(false);
@@ -97,31 +177,31 @@ export default function InvitationPage({
 
   const events: any = {
     registration: {
-      title: "Engagement Ceremony",
-      date: "23rd November 2025",
-      venue: "Srerampore",
+      title: translatedData ? "শুভ আংটি বদল" : "Engagement Ceremony",
+      date: translatedData ? "২৩শে নভেম্বর, ২০২৫" : "23rd November 2025",
+      venue: translatedData ? "শ্রীরামপুর" : "Srerampore",
       map: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d229.96354422747754!2d88.34617843336005!3d22.749911773448982!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f89b1ee7f14647%3A0xe44dfacd65bb5f48!2sMohan%20Joyti%20Banquet%20Hall!5e0!3m2!1sen!2sin!4v1758679491438!5m2!1sen!2sin",
       mapHref: "https://maps.app.goo.gl/diSeycey1hyqqtAu8",
-      time: "10:00 AM",
-      direction: "Near Battala",
+      time: translatedData ? "সকাল ১০:০০টা" : "10:00 AM",
+      direction: translatedData ? "বটতলার কাছে" : "Near Battala",
     },
     wedding: {
-      title: "Wedding Ceremony",
-      date: "23rd January 2026",
-      venue: "Serampore",
+      title: translatedData ? "শুভ বিবাহ" : "Wedding Ceremony",
+      date: translatedData ? "২৩শে জানুয়ারি, ২০২৬" : "23rd January 2026",
+      venue: translatedData ? "শ্রীরামপুর" : "Serampore",
       map: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3679.3779465759876!2d88.33077587399126!3d22.75135112639763!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f89b287ddfb39b%3A0xc67348083f7cea9d!2sAnandamayee%20Bhawan!5e0!3m2!1sen!2sin!4v1765848206729!5m2!1sen!2sin",
       mapHref: "https://maps.app.goo.gl/G5R3bkcTwwa2d54R8",
-      time: "06:00 PM",
-      direction: "Near Belting Bazar",
+      time: translatedData ? "সন্ধ্যা ০৬:০০টা" : "06:00 PM",
+      direction: translatedData ? "বেল্টিং বাজারের কাছে" : "Near Belting Bazar",
     },
     reception: {
-      title: "Reception Celebration",
-      date: "25th January 2026",
-      venue: "Konnagar",
+      title: translatedData ? "প্রীতিভোজ" : "Reception Celebration",
+      date: translatedData ? "২৫শে জানুয়ারি, ২০২৬" : "25th January 2026",
+      venue: translatedData ? "কোন্নগর" : "Konnagar",
       map: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.8284397695707!2d88.35295167398938!3d22.697429628386114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f89c85a91d38fd%3A0x19dcd2c61895f79f!2sKonnagar%20Friends%20Union%20Club%20Community%20Centre%2FGangadhar%20Chatterjee%20Bhaban!5e0!3m2!1sen!2sin!4v1765848530552!5m2!1sen!2sin",
       mapHref: "https://maps.app.goo.gl/ubdTsy6tnYMsvSSXA",
-      time: "06:00 PM",
-      direction: "Near GT Road",
+      time: translatedData ? "সন্ধ্যা ০৬:০০টা" : "06:00 PM",
+      direction: translatedData ? "জি.টি. রোডের কাছে" : "Near GT Road",
     },
   };
 
@@ -136,7 +216,7 @@ export default function InvitationPage({
             <p className="text-default-600 dark:text-gray-300">{event.date}</p>
           </div>
         </div>
-        
+
         <div className="flex items-start gap-4">
           <ClockIcon className="w-6 h-6 text-wedding-gold-500 mt-1" />
           <div>
@@ -149,16 +229,18 @@ export default function InvitationPage({
           <MapPinIcon className="w-6 h-6 text-indigo-500 mt-1" />
           <div>
             <p className="font-bold text-default-800 dark:text-white">Venue</p>
-            <p className="text-default-600 dark:text-gray-300 font-medium">{event.venue}</p>
+            <p className="text-default-600 dark:text-gray-300 font-medium">
+              {event.venue}
+            </p>
             <p className="text-default-500 text-sm mt-1">{event.direction}</p>
           </div>
         </div>
 
         <Button
-          as={Link}
-          href={event.mapHref}
           isExternal
+          as={Link}
           className="w-full bg-wedding-pink-100 text-wedding-pink-700 font-semibold hover:bg-wedding-pink-200 dark:bg-wedding-pink-900/30 dark:text-wedding-pink-200 mt-4"
+          href={event.mapHref}
           startContent={<MapPinIcon className="w-4 h-4" />}
         >
           Open in Google Maps
@@ -168,12 +250,12 @@ export default function InvitationPage({
       {/* Map Embed */}
       <div className="h-64 md:h-auto rounded-2xl overflow-hidden shadow-lg border border-default-200 dark:border-default-700">
         <iframe
-          title={`${event.title} Map`}
+          allowFullScreen
           className="w-full h-full"
-          src={event.map}
           loading="lazy"
-          allowFullScreen
-        ></iframe>
+          src={event.map}
+          title={`${event.title} Map`}
+        />
       </div>
     </div>
   );
@@ -218,7 +300,7 @@ export default function InvitationPage({
               <p
                 className={`${fontCursive.className} text-4xl md:text-7xl font-bold drop-shadow-md px-2`}
               >
-                Titas & Sukanya
+                Groom & Bride
               </p>
               <p
                 className={`${fontMono.className} mt-2 md:mt-4 text-[10px] md:text-base uppercase tracking-widest opacity-90 px-4`}
@@ -228,11 +310,11 @@ export default function InvitationPage({
             </div>
             {/* Translation Button */}
             <Button
+              className="absolute bottom-2 right-2 bg-white/20 text-white backdrop-blur-md border border-white/30 text-[10px] h-7 px-2"
+              isLoading={isTranslating}
               size="sm"
               variant="flat"
               onPress={translateContent}
-              isLoading={isTranslating}
-              className="absolute bottom-2 right-2 bg-white/20 text-white backdrop-blur-md border border-white/30 text-[10px] h-7 px-2"
             >
               {translatedData ? "See English" : "বাংলায় দেখুন"}
             </Button>
@@ -244,9 +326,12 @@ export default function InvitationPage({
               <p
                 className={`${fontCursive.className} text-3xl md:text-5xl text-wedding-pink-600 dark:text-wedding-pink-400 mb-4 md:mb-6`}
               >
-                {translatedData ? "প্রিয়" : "Dear"} {translatedData?.guestName || guest.name}
+                {translatedData ? "প্রিয়" : "Dear"}{" "}
+                {translatedData?.guestName || guest.name}
                 {guest.invitedGuests > 1 && (
-                  <span className="text-xl md:text-3xl ml-2">{translatedData ? "& পরিবার" : "& Family"}</span>
+                  <span className="text-xl md:text-3xl ml-2">
+                    {translatedData ? "& পরিবার" : "& Family"}
+                  </span>
                 )}
                 ,
               </p>
@@ -257,7 +342,8 @@ export default function InvitationPage({
                 <p>
                   {translatedData ? (
                     <>
-                      {translatedData.welcomeNote || `${translatedData.familySide === "bride" ? "কনে" : "বর"}-র পক্ষ থেকে একজন প্রিয় ${translatedData.relation} হিসেবে আপনার উপস্থিতি আমাদের কাছে অনেক গুরুত্বপূর্ণ।`}
+                      {translatedData.welcomeNote ||
+                        `${translatedData.familySide === "bride" ? "কনে" : "বর"}-র পক্ষ থেকে একজন প্রিয় ${translatedData.relation} হিসেবে আপনার উপস্থিতি আমাদের কাছে অনেক গুরুত্বপূর্ণ।`}
                     </>
                   ) : (
                     <>
@@ -271,7 +357,9 @@ export default function InvitationPage({
                   )}
                 </p>
                 <p>
-                  {translatedData ? "আমরা আপনাকে নিম্নলিখিত অনুষ্ঠানে যোগ দেওয়ার জন্য সাদর আমন্ত্রণ জানাচ্ছি:" : `We warmly invite you to join us for the following celebration${guest.invitedFor.length > 1 ? "s" : ""}:`}
+                  {translatedData
+                    ? "আমরা আপনাকে নিম্নলিখিত অনুষ্ঠানে যোগ দেওয়ার জন্য সাদর আমন্ত্রণ জানাচ্ছি:"
+                    : `We warmly invite you to join us for the following celebration${guest.invitedFor.length > 1 ? "s" : ""}:`}
                 </p>
               </div>
             </div>
@@ -282,14 +370,16 @@ export default function InvitationPage({
               <div className="hidden md:block">
                 <Tabs
                   aria-label="Wedding Events"
-                  color="danger"
-                  variant="underlined"
                   classNames={{
-                    tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
+                    tabList:
+                      "gap-6 w-full relative rounded-none p-0 border-b border-divider",
                     cursor: "w-full bg-wedding-pink-500",
                     tab: "max-w-fit px-0 h-12",
-                    tabContent: "group-data-[selected=true]:text-wedding-pink-500 font-medium text-lg"
+                    tabContent:
+                      "group-data-[selected=true]:text-wedding-pink-500 font-medium text-lg",
                   }}
+                  color="danger"
+                  variant="underlined"
                 >
                   {guest.invitedFor.map((eventKey: string) => (
                     <Tab key={eventKey} title={events[eventKey].title}>
@@ -301,22 +391,22 @@ export default function InvitationPage({
 
               {/* Mobile Accordion */}
               <div className="md:hidden text-left">
-                <Accordion 
-                  variant="splitted" 
-                  selectionMode="multiple"
-                  defaultExpandedKeys={guest.invitedFor}
+                <Accordion
                   className="px-0"
+                  defaultExpandedKeys={guest.invitedFor}
+                  selectionMode="multiple"
+                  variant="splitted"
                 >
                   {guest.invitedFor.map((eventKey: string) => (
                     <AccordionItem
                       key={eventKey}
                       aria-label={events[eventKey].title}
+                      className="bg-default-50 dark:bg-default-100/5 border border-default-100 dark:border-default-800 rounded-xl shadow-sm mb-4"
                       title={
                         <span className="font-bold text-wedding-pink-600 dark:text-wedding-pink-400">
                           {events[eventKey].title}
                         </span>
                       }
-                      className="bg-default-50 dark:bg-default-100/5 border border-default-100 dark:border-default-800 rounded-xl shadow-sm mb-4"
                     >
                       {renderEventDetails(events[eventKey])}
                     </AccordionItem>
@@ -332,92 +422,157 @@ export default function InvitationPage({
               <AnimatePresence mode="wait">
                 {hasRSVPed ? (
                   <motion.div
-                    initial={{ opacity: 0, scale: 0.9 }}
                     animate={{ opacity: 1, scale: 1 }}
                     className="bg-green-50 dark:bg-green-900/20 p-6 md:p-8 rounded-3xl border border-green-100 dark:border-green-800/30 text-center"
+                    initial={{ opacity: 0, scale: 0.9 }}
                   >
-                    <p className={`${fontCursive.className} text-2xl md:text-3xl text-green-600 dark:text-green-400 mb-2`}>Thank You!</p>
-                    <p className="text-sm md:text-green-700 dark:text-green-300 font-medium">We have received your RSVP and can't wait to see you.</p>
+                    <p
+                      className={`${fontCursive.className} text-2xl md:text-3xl text-green-600 dark:text-green-400 mb-2`}
+                    >
+                      Thank You!
+                    </p>
+                    <p className="text-sm md:text-green-700 dark:text-green-300 font-medium">
+                      We have received your RSVP and can&apos;t wait to see you.
+                    </p>
                   </motion.div>
                 ) : !showRSVP ? (
-                  <Button 
-                    onPress={() => setShowRSVP(true)}
+                  <Button
                     className="bg-wedding-pink-500 text-white font-bold h-12 md:h-14 px-8 md:px-10 text-base md:text-lg rounded-full shadow-lg shadow-wedding-pink-500/30 w-full md:w-auto"
+                    onPress={() => setShowRSVP(true)}
                   >
                     RSVP / Confirm Attendance
                   </Button>
                 ) : (
                   <motion.div
-                    initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     className="space-y-6 md:space-y-8 text-left bg-default-50 dark:bg-zinc-900/50 p-5 md:p-10 rounded-[24px] md:rounded-[32px] border border-default-200 dark:border-default-800"
+                    initial={{ opacity: 0, y: 20 }}
                   >
                     <div className="flex justify-between items-center">
-                       <h3 className={`${fontSans.className} text-xl md:text-2xl font-bold text-default-800 dark:text-white`}>RSVP Details</h3>
-                       <Button isIconOnly variant="light" size="sm" onPress={() => setShowRSVP(false)}>✕</Button>
+                      <h3
+                        className={`${fontSans.className} text-xl md:text-2xl font-bold text-default-800 dark:text-white`}
+                      >
+                        RSVP Details
+                      </h3>
+                      <Button
+                        isIconOnly
+                        size="sm"
+                        variant="light"
+                        onPress={() => setShowRSVP(false)}
+                      >
+                        ✕
+                      </Button>
                     </div>
 
                     <div className="grid md:grid-cols-2 gap-6 md:gap-8">
                       <RadioGroup
+                        classNames={{
+                          label:
+                            "text-wedding-pink-600 font-bold mb-1 text-sm md:text-base",
+                        }}
                         label="Will you attend?"
                         value={rsvpData.attending}
-                        onValueChange={(val) => setRsvpData({ ...rsvpData, attending: val })}
-                        classNames={{ label: "text-wedding-pink-600 font-bold mb-1 text-sm md:text-base" }}
+                        onValueChange={(val) =>
+                          setRsvpData({ ...rsvpData, attending: val })
+                        }
                       >
-                        <Radio value="yes" classNames={{ label: "text-sm" }}>Yes, I'll be there!</Radio>
-                        <Radio value="no" classNames={{ label: "text-sm" }}>Sorry, I can't make it</Radio>
+                        <Radio classNames={{ label: "text-sm" }} value="yes">
+                          Yes, I&apos;ll be there!
+                        </Radio>
+                        <Radio classNames={{ label: "text-sm" }} value="no">
+                          Sorry, I can&apos;t make it
+                        </Radio>
                       </RadioGroup>
 
                       {rsvpData.attending === "yes" && (
                         <RadioGroup
+                          classNames={{
+                            label:
+                              "text-wedding-pink-600 font-bold mb-1 text-sm md:text-base",
+                          }}
                           label="Food Preference"
                           value={rsvpData.food}
-                          onValueChange={(val) => setRsvpData({ ...rsvpData, food: val })}
-                          classNames={{ label: "text-wedding-pink-600 font-bold mb-1 text-sm md:text-base" }}
+                          onValueChange={(val) =>
+                            setRsvpData({ ...rsvpData, food: val })
+                          }
                         >
-                          <Radio value="non-veg" classNames={{ label: "text-sm" }}>Non-Vegetarian</Radio>
-                          <Radio value="veg" classNames={{ label: "text-sm" }}>Vegetarian</Radio>
+                          <Radio
+                            classNames={{ label: "text-sm" }}
+                            value="non-veg"
+                          >
+                            Non-Vegetarian
+                          </Radio>
+                          <Radio classNames={{ label: "text-sm" }} value="veg">
+                            Vegetarian
+                          </Radio>
                         </RadioGroup>
                       )}
                     </div>
 
                     <div className="space-y-5 md:space-y-6">
-                      <Input 
-                        label="Number of Guests" 
-                        type="number" 
-                        variant="bordered"
+                      <Input
+                        classNames={{
+                          label:
+                            "text-wedding-pink-600 font-bold text-xs md:text-sm",
+                          inputWrapper: "border-wedding-pink-100",
+                          input: "outline-none text-sm",
+                        }}
+                        label="Number of Guests"
                         labelPlacement="outside-top"
+                        type="number"
                         value={String(rsvpData.guests)}
-                        onChange={(e) => setRsvpData({ ...rsvpData, guests: Number(e.target.value) })}
-                        classNames={{ label: "text-wedding-pink-600 font-bold text-xs md:text-sm", inputWrapper: "border-wedding-pink-100", input: "outline-none text-sm" }}
-                      />
-                      <Input 
-                        label="Special Note / Allergies" 
                         variant="bordered"
+                        onChange={(e) =>
+                          setRsvpData({
+                            ...rsvpData,
+                            guests: Number(e.target.value),
+                          })
+                        }
+                      />
+                      <Input
+                        classNames={{
+                          label:
+                            "text-wedding-pink-600 font-bold text-xs md:text-sm",
+                          inputWrapper: "border-wedding-pink-100",
+                          input: "outline-none text-sm",
+                        }}
+                        label="Special Note / Allergies"
                         labelPlacement="outside-top"
                         value={rsvpData.note}
-                        onChange={(e) => setRsvpData({ ...rsvpData, note: e.target.value })}
-                        classNames={{ label: "text-wedding-pink-600 font-bold text-xs md:text-sm", inputWrapper: "border-wedding-pink-100", input: "outline-none text-sm" }}
+                        variant="bordered"
+                        onChange={(e) =>
+                          setRsvpData({ ...rsvpData, note: e.target.value })
+                        }
                       />
-                      
+
                       <div className="p-4 bg-wedding-pink-50 dark:bg-wedding-pink-900/10 rounded-xl border border-wedding-pink-100 dark:border-wedding-pink-800/30">
-                        <p className="text-[9px] font-black text-wedding-pink-600 uppercase tracking-widest mb-1">Bot Protection</p>
-                        <Input 
+                        <p className="text-[9px] font-black text-wedding-pink-600 uppercase tracking-widest mb-1">
+                          Bot Protection
+                        </p>
+                        <Input
                           isRequired
-                          label="How many years have we been together?" 
-                          placeholder="Answer in numbers"
-                          variant="underlined"
+                          classNames={{
+                            label: "text-[10px] md:text-xs",
+                            input: "font-bold outline-none",
+                          }}
+                          label="How many years have we been together?"
                           labelPlacement="outside-top"
+                          placeholder="Answer in numbers"
                           value={rsvpData.captcha}
-                          onChange={(e) => setRsvpData({ ...rsvpData, captcha: e.target.value })}
-                          classNames={{ label: "text-[10px] md:text-xs", input: "font-bold outline-none" }}
+                          variant="underlined"
+                          onChange={(e) =>
+                            setRsvpData({
+                              ...rsvpData,
+                              captcha: e.target.value,
+                            })
+                          }
                         />
                       </div>
 
-                      <Button 
+                      <Button
+                        className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-black h-12 md:h-14 text-base md:text-lg rounded-full"
                         isLoading={rsvpLoading}
                         onPress={handleRSVP}
-                        className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-black h-12 md:h-14 text-base md:text-lg rounded-full"
                       >
                         Confirm RSVP
                       </Button>
@@ -427,6 +582,62 @@ export default function InvitationPage({
               </AnimatePresence>
             </div>
 
+            <Divider className="my-8 md:my-10 opacity-50" />
+
+            {/* Email Reminder Section */}
+            <div className="mb-10 px-0 md:px-10">
+              <div className="bg-default-50 dark:bg-zinc-900/50 p-6 rounded-2xl border border-default-200 dark:border-default-800">
+                <h3 className={`${fontSans.className} text-xl font-bold text-default-800 dark:text-white mb-4`}>
+                  Get Event Reminders
+                </h3>
+                {hasEmailReminder && (
+                  <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800/30 flex items-center justify-center gap-2">
+                    <CheckIcon className="w-4 h-4 text-blue-500" />
+                    <p className="text-xs font-medium text-blue-700 dark:text-blue-300">
+                      Email reminder already set for your invitation.
+                    </p>
+                  </div>
+                )}
+                <p className="text-default-600 dark:text-gray-400 text-sm mb-6">
+                  Leave your email to receive a reminder before the event starts.
+                </p>
+                <form
+                  action={async (formData) => {
+                    const { sendEmailReminder } = await import("../actions");
+
+                    formData.append("slug", slug);
+                    await sendEmailReminder(formData);
+                    setHasEmailReminder(true);
+                    addToast({
+                      title: "Reminder Set",
+                      description: "We will notify you before the event!",
+                      color: "success",
+                    });
+                  }}
+                  className="flex flex-col sm:flex-row gap-4 items-end"
+                >
+                  <Input
+                    isRequired
+                    className="flex-1"
+                    classNames={{
+                      input: "outline-none",
+                      inputWrapper: "bg-white dark:bg-zinc-900",
+                    }}
+                    name="email"
+                    placeholder="john@example.com"
+                    type="email"
+                    aria-label="Email Address"
+                  />
+                  <Button
+                    className="w-full sm:w-auto bg-wedding-pink-500 text-white font-semibold shadow-md"
+                    type="submit"
+                  >
+                    Notify Me
+                  </Button>
+                </form>
+              </div>
+            </div>
+
             <Divider className="my-8 md:my-10 opacity-50" />
             <div className="space-y-6">
               <p
@@ -443,6 +654,14 @@ export default function InvitationPage({
                 >
                   Meet the Couple
                 </Button>
+                <Button
+                  as={Link}
+                  className="bg-wedding-pink-500 text-white shadow-lg hover:bg-wedding-pink-600 font-semibold w-full sm:w-auto"
+                  href="/game"
+                  size="lg"
+                >
+                  Play Couple Quiz
+                </Button>
                 <Button
                   as={Link}
                   className="border-wedding-pink-500 text-wedding-pink-500 hover:bg-wedding-pink-50 dark:hover:bg-wedding-pink-900/20 font-semibold w-full sm:w-auto"