@titas_mallick/wedding-site-gen 1.1.0 → 2.0.1

package/components/hero.tsx

@@ -3,10 +3,12 @@
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { Button } from "@heroui/button";
+import { useEffect, useState } from "react";
 
 import ImportantNews from "./importantNews";
 import CertificatePage from "./certificate";
 import WeddingCard from "./weddingcard";
+import WeddingCard2 from "./weddingcard2";
 import { HeartFilledIcon } from "./icons";
 import Updates from "./updates";
 import CountdownTimer from "./CountdownTimer";
@@ -22,6 +24,19 @@ const fadeInUp = {
 };
 
 const Herohome = () => {
+  const [showReception, setShowReception] = useState(false);
+
+  useEffect(() => {
+    const now = new Date();
+    const weddingDate = new Date("2026-01-23");
+
+    weddingDate.setHours(23, 59, 59, 999);
+
+    if (now > weddingDate) {
+      setShowReception(true);
+    }
+  }, []);
+
   return (
     <div className="flex flex-col gap-16 md:gap-32 pb-20 overflow-hidden">
       {/* Latest Update Bar */}
@@ -55,7 +70,7 @@ const Herohome = () => {
           initial={{ opacity: 0 }}
           transition={{ delay: 1, duration: 1 }}
         >
-          Titas & Sukanya
+          Groom & Bride
         </motion.p>
       </section>
 
@@ -77,8 +92,7 @@ const Herohome = () => {
             </h2>
           </div>
           <div className="relative z-10">
-            <WeddingCard />
-            {/* <WeddingCard2 /> */}
+            {showReception ? <WeddingCard2 /> : <WeddingCard />}
           </div>
         </motion.div>
       </section>
@@ -120,7 +134,36 @@ const Herohome = () => {
         <ImportantNews />
       </section>
 
-      {/* 5. Official Record */}
+      {/* 5. Mini Game Section */}
+      <section className="container mx-auto px-4 py-20 bg-wedding-gold-50/30 dark:bg-white/5 rounded-3xl mx-4 md:mx-0">
+        <motion.div
+          {...fadeInUp}
+          className="flex flex-col items-center text-center max-w-4xl mx-auto"
+        >
+          <h2
+            className={`${fontCursive.className} text-4xl text-wedding-gold-600 dark:text-wedding-gold-400 mb-6`}
+          >
+            A Little Fun
+          </h2>
+          <p
+            className={`${fontMono.className} text-lg mb-8 text-default-600 dark:text-white`}
+          >
+            Take a moment to enjoy a small wedding-themed memory game while you
+            are here!
+          </p>
+          <Button
+            as={Link}
+            className="bg-wedding-gold-500 text-white font-medium shadow-lg hover:bg-wedding-gold-600 transition-all transform hover:-translate-y-1"
+            href="/game"
+            radius="full"
+            size="lg"
+          >
+            Play the Game
+          </Button>
+        </motion.div>
+      </section>
+
+      {/* 6. Official Record */}
       <section className="container mx-auto px-4 pb-10">
         <motion.div
           {...fadeInUp}

package/components/icons.tsx

@@ -281,3 +281,48 @@ export const SearchIcon = (props: IconSvgProps) => (
     />
   </svg>
 );
+
+export const TrashIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    <line x1="10" y1="11" x2="10" y2="17" />
+    <line x1="14" y1="11" x2="14" y2="17" />
+  </svg>
+);
+
+export const CheckIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    stroke="currentColor"
+    strokeWidth="3"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);

package/components/importantNews.js

@@ -1,168 +1,168 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Card, CardBody, Button, Link } from "@heroui/react";
-import { CalendarIcon, ClockIcon, MapPinIcon } from "./icons";
-import { useEffect, useState } from "react";
-
-export default function ImportantNews() {
-  const [currentDate, setCurrentDate] = useState(null);
-
-  useEffect(() => {
-    setCurrentDate(new Date());
-  }, []);
-
-  const events = {
-    registration: {
-      title: "Engagement Ceremony",
-      date: "23rd November 2025",
-      venue: "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",
-    },
-    wedding: {
-      title: "Wedding Ceremony",
-      date: "23rd January 2026",
-      venue: "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",
-    },
-    reception: {
-      title: "Reception Celebration",
-      date: "25th January 2026",
-      venue: "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",
-    },
-  };
-
-  const parseDate = (dateStr) => {
-    // Remove ordinal suffixes (st, nd, rd, th) from the day
-    const cleanedDate = dateStr.replace(/(\d+)(st|nd|rd|th)/, "$1");
-    return new Date(cleanedDate);
-  };
-
-  return (
-    <div className="w-full flex items-center justify-center font-sans my-12 px-4">
-      <motion.div
-        className="w-full max-w-6xl"
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
-      >
-        <Card className="relative w-full rounded-3xl overflow-hidden shadow-2xl border border-white/20 dark:border-white/10 bg-white/80 dark:bg-black/80 backdrop-blur-xl">
-          {/* Decorative background gradients */}
-          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-900 dark:via-purple-900 dark:to-indigo-900" />
-          <div className="absolute -top-24 -right-24 w-64 h-64 bg-pink-100/50 dark:bg-pink-900/20 rounded-full blur-3xl pointer-events-none" />
-          <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-blue-100/50 dark:bg-blue-900/20 rounded-full blur-3xl pointer-events-none" />
-
-          <CardBody className="p-8 md:p-12 relative z-10">
-            {/* Header */}
-            <div className="text-center mb-12">
-              <motion.span 
-                initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                transition={{ delay: 0.2 }}
-                className="inline-block px-3 py-1 rounded-full bg-pink-50 dark:bg-pink-900/30 text-pink-600 dark:text-pink-300 text-xs font-bold tracking-widest uppercase mb-3 border border-pink-100 dark:border-pink-800"
-              >
-                Save The Dates
-              </motion.span>
-              <h1 className="text-3xl md:text-5xl font-bold font-serif bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-4">
-                Wedding Events
-              </h1>
-              <p className="text-gray-500 dark:text-gray-400 text-sm md:text-base max-w-2xl mx-auto italic leading-relaxed">
-                &quot;We invite you to share in our joy at the following events as we begin our new journey together.&quot;
-              </p>
-            </div>
-
-            {/* Events Grid */}
-            <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
-              {Object.entries(events).map(([key, event], index) => {
-                const eventDate = parseDate(event.date);
-                // Set time to end of day to consider event active today
-                eventDate.setHours(23, 59, 59, 999);
-                const isPast = currentDate ? currentDate > eventDate : false;
-
-                return (
-                <motion.div
-                  key={key}
-                  initial={{ opacity: 0, y: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: index * 0.1 + 0.3 }}
-                  className={`group relative flex flex-col items-center bg-white dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 
-                    ${isPast 
-                      ? "opacity-60 grayscale hover:opacity-80 hover:grayscale-0" 
-                      : "hover:shadow-xl hover:shadow-pink-500/10 dark:hover:shadow-pink-500/5 hover:-translate-y-1"
-                    }`}
-                >
-                  {isPast && (
-                    <div className="absolute top-4 right-4 bg-gray-100 dark:bg-gray-800 text-gray-500 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider border border-gray-200 dark:border-gray-700">
-                      Completed
-                    </div>
-                  )}
-
-                  <div className={`absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-pink-200 dark:via-pink-800 to-transparent transition-opacity ${isPast ? 'opacity-0' : 'opacity-0 group-hover:opacity-100'}`} />
-                  
-                  <h3 className="font-serif font-bold text-xl text-gray-800 dark:text-gray-100 mb-6 text-center">
-                    {event.title}
-                  </h3>
-
-                  <div className="w-full space-y-4 flex-grow">
-                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
-                      <CalendarIcon className="w-5 h-5 text-pink-500 mt-0.5 shrink-0" />
-                      <div>
-                        <p className="font-semibold">{event.date}</p>
-                      </div>
-                    </div>
-
-                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
-                      <ClockIcon className="w-5 h-5 text-purple-500 mt-0.5 shrink-0" />
-                      <p>{event.time}</p>
-                    </div>
-
-                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
-                      <MapPinIcon className="w-5 h-5 text-indigo-500 mt-0.5 shrink-0" />
-                      <div>
-                        <p className="font-medium">{event.venue}</p>
-                        <p className="text-xs text-gray-400 mt-0.5">{event.direction}</p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <Button
-                    as={Link}
-                    href={event.mapHref}
-                    isExternal
-                    className={`mt-8 w-full font-medium shadow-sm border
-                      ${isPast 
-                        ? "bg-gray-100 dark:bg-gray-800 text-gray-400 border-gray-200 dark:border-gray-700 cursor-not-allowed" 
-                        : "bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/40 dark:hover:to-purple-900/40 text-pink-700 dark:text-pink-300 border-pink-100 dark:border-pink-800/50"
-                      }`}
-                    variant="flat"
-                    isDisabled={isPast}
-                    endContent={
-                      <MapPinIcon className="w-4 h-4 opacity-50" />
-                    }
-                  >
-                    {isPast ? "Event Concluded" : "View Map"}
-                  </Button>
-                </motion.div>
-              );})}
-            </div>
-          </CardBody>
-        </Card>
-      </motion.div>
-    </div>
-  );
-}
-
-
-
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardBody, Button, Link } from "@heroui/react";
+import { CalendarIcon, ClockIcon, MapPinIcon } from "./icons";
+import { useEffect, useState } from "react";
+
+export default function ImportantNews() {
+  const [currentDate, setCurrentDate] = useState(null);
+
+  useEffect(() => {
+    setCurrentDate(new Date());
+  }, []);
+
+  const events = {
+    registration: {
+      title: "Engagement Ceremony",
+      date: "23rd November 2025",
+      venue: "Venue City",
+      map: "",
+      mapHref: "#",
+      time: "10:00 AM",
+      direction: "Sample Direction",
+    },
+    wedding: {
+      title: "Wedding Ceremony",
+      date: "23rd January 2026",
+      venue: "Venue City",
+      map: "",
+      mapHref: "#",
+      time: "06:00 PM",
+      direction: "Sample Direction",
+    },
+    reception: {
+      title: "Reception Celebration",
+      date: "25th January 2026",
+      venue: "Venue City",
+      map: "",
+      mapHref: "#",
+      time: "06:00 PM",
+      direction: "Sample Direction",
+    },
+  };
+
+  const parseDate = (dateStr) => {
+    // Remove ordinal suffixes (st, nd, rd, th) from the day
+    const cleanedDate = dateStr.replace(/(\d+)(st|nd|rd|th)/, "$1");
+    return new Date(cleanedDate);
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center font-sans my-12 px-4">
+      <motion.div
+        className="w-full max-w-6xl"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+      >
+        <Card className="relative w-full rounded-3xl overflow-hidden shadow-2xl border border-white/20 dark:border-white/10 bg-white/80 dark:bg-black/80 backdrop-blur-xl">
+          {/* Decorative background gradients */}
+          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-900 dark:via-purple-900 dark:to-indigo-900" />
+          <div className="absolute -top-24 -right-24 w-64 h-64 bg-pink-100/50 dark:bg-pink-900/20 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-blue-100/50 dark:bg-blue-900/20 rounded-full blur-3xl pointer-events-none" />
+
+          <CardBody className="p-8 md:p-12 relative z-10">
+            {/* Header */}
+            <div className="text-center mb-12">
+              <motion.span 
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                transition={{ delay: 0.2 }}
+                className="inline-block px-3 py-1 rounded-full bg-pink-50 dark:bg-pink-900/30 text-pink-600 dark:text-pink-300 text-xs font-bold tracking-widest uppercase mb-3 border border-pink-100 dark:border-pink-800"
+              >
+                Save The Dates
+              </motion.span>
+              <h1 className="text-3xl md:text-5xl font-bold font-serif bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-4">
+                Wedding Events
+              </h1>
+              <p className="text-gray-500 dark:text-gray-400 text-sm md:text-base max-w-2xl mx-auto italic leading-relaxed">
+                &quot;We invite you to share in our joy at the following events as we begin our new journey together.&quot;
+              </p>
+            </div>
+
+            {/* Events Grid */}
+            <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
+              {Object.entries(events).map(([key, event], index) => {
+                const eventDate = parseDate(event.date);
+                // Mark as completed only after one full day has passed (24 hours after end of day)
+                const completionThreshold = new Date(eventDate);
+                completionThreshold.setDate(completionThreshold.getDate() + 1);
+                completionThreshold.setHours(23, 59, 59, 999);
+                
+                const isPast = currentDate ? currentDate > completionThreshold : false;
+
+                return (
+                <motion.div
+                  key={key}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: index * 0.1 + 0.3 }}
+                  className={`group relative flex flex-col items-center bg-white dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 
+                    ${isPast 
+                      ? "opacity-60 grayscale hover:opacity-80 hover:grayscale-0" 
+                      : "hover:shadow-xl hover:shadow-pink-500/10 dark:hover:shadow-pink-500/5 hover:-translate-y-1"
+                    }`}
+                >
+                  {isPast && (
+                    <div className="absolute top-4 right-4 bg-gray-100 dark:bg-gray-800 text-gray-500 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider border border-gray-200 dark:border-gray-700">
+                      Completed
+                    </div>
+                  )}
+
+                  <div className={`absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-pink-200 dark:via-pink-800 to-transparent transition-opacity ${isPast ? 'opacity-0' : 'opacity-0 group-hover:opacity-100'}`} />
+                  
+                  <h3 className="font-serif font-bold text-xl text-gray-800 dark:text-gray-100 mb-6 text-center">
+                    {event.title}
+                  </h3>
+
+                  <div className="w-full space-y-4 flex-grow">
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <CalendarIcon className="w-5 h-5 text-pink-500 mt-0.5 shrink-0" />
+                      <div>
+                        <p className="font-semibold">{event.date}</p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <ClockIcon className="w-5 h-5 text-purple-500 mt-0.5 shrink-0" />
+                      <p>{event.time}</p>
+                    </div>
+
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <MapPinIcon className="w-5 h-5 text-indigo-500 mt-0.5 shrink-0" />
+                      <div>
+                        <p className="font-medium">{event.venue}</p>
+                        <p className="text-xs text-gray-400 mt-0.5">{event.direction}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Button
+                    as={Link}
+                    href={event.mapHref}
+                    isExternal
+                    className={`mt-8 w-full font-medium shadow-sm border
+                      ${isPast 
+                        ? "bg-gray-100 dark:bg-gray-800 text-gray-400 border-gray-200 dark:border-gray-700 cursor-not-allowed" 
+                        : "bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/40 dark:hover:to-purple-900/40 text-pink-700 dark:text-pink-300 border-pink-100 dark:border-pink-800/50"
+                      }`}
+                    variant="flat"
+                    isDisabled={isPast || event.mapHref === "#"}
+                    endContent={
+                      <MapPinIcon className="w-4 h-4 opacity-50" />
+                    }
+                  >
+                    {isPast ? "Event Concluded" : "View Map"}
+                  </Button>
+                </motion.div>
+              );})}
+            </div>
+          </CardBody>
+        </Card>
+      </motion.div>
+    </div>
+  );
+}

package/components/navbar.tsx

@@ -15,18 +15,42 @@ import { link as linkStyles } from "@heroui/theme";
 import NextLink from "next/link";
 import clsx from "clsx";
 import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 import { siteConfig } from "@/config/site";
 import { ThemeSwitch } from "@/components/theme-switch";
-import { HeartFilledIcon } from "@/components/icons";
 import { fontCursive } from "@/config/fonts";
+import {
+  HeartFilledIcon,
+  CalendarIcon,
+  MapPinIcon,
+  Logo,
+} from "@/components/icons";
+
+const getIcon = (label: string) => {
+  switch (label.toLowerCase()) {
+    case "home":
+      return <HeartFilledIcon size={18} />;
+    case "our story":
+      return <Logo size={18} />;
+    case "events":
+      return <CalendarIcon size={18} />;
+    case "gallery":
+      return <HeartFilledIcon size={18} />;
+    case "travel guide":
+      return <MapPinIcon size={18} />;
+    default:
+      return <HeartFilledIcon size={18} />;
+  }
+};
 
 export const Navbar = () => {
-  const [, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
     <HeroUINavbar
       className="bg-wedding-cream/80 dark:bg-black/80 backdrop-blur-md"
+      isMenuOpen={isMenuOpen}
       maxWidth="xl"
       position="sticky"
       onMenuOpenChange={setIsMenuOpen}
@@ -81,24 +105,95 @@ export const Navbar = () => {
 
       <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
         <ThemeSwitch />
-        <NavbarMenuToggle />
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="flex items-center justify-center gap-2.5 ml-2 px-4 py-1.5 h-10 w-auto rounded-full bg-gradient-to-r from-wedding-pink-50 to-wedding-cream dark:from-wedding-pink-900/20 dark:to-zinc-900 border-1.5 border-wedding-pink-200/50 dark:border-wedding-pink-800/50 text-wedding-pink-600 dark:text-wedding-pink-400 transition-all hover:scale-105 active:scale-95 shadow-lg shadow-wedding-pink-500/5"
+        >
+          <span className="text-[10px] font-black tracking-[0.2em] ml-1">
+            {isMenuOpen ? "CLOSE" : "MENU"}
+          </span>
+          <div className="relative w-5 h-5 flex items-center justify-center">
+            <AnimatePresence mode="wait">
+              {!isMenuOpen ? (
+                <motion.div
+                  key="menu-heart"
+                  animate={{
+                    opacity: 1,
+                    scale: [1, 1.15, 1],
+                  }}
+                  exit={{ opacity: 0, scale: 0.5, rotate: 180 }}
+                  initial={{ opacity: 0, scale: 0.5 }}
+                  transition={{
+                    scale: {
+                      repeat: Infinity,
+                      duration: 2,
+                      ease: "easeInOut",
+                    },
+                    opacity: { duration: 0.2 },
+                  }}
+                >
+                  <HeartFilledIcon size={16} />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="menu-close"
+                  animate={{ opacity: 1, scale: 1, rotate: 0 }}
+                  exit={{ opacity: 0, scale: 0.5, rotate: -180 }}
+                  initial={{ opacity: 0, scale: 0.5, rotate: 180 }}
+                  transition={{ duration: 0.3, ease: "backOut" }}
+                >
+                  <svg
+                    fill="none"
+                    height="16"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    viewBox="0 0 24 24"
+                    width="16"
+                  >
+                    <line x1="18" x2="6" y1="6" y2="18" />
+                    <line x1="6" x2="18" y1="6" y2="18" />
+                  </svg>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </NavbarMenuToggle>
       </NavbarContent>
 
-      <NavbarMenu>
-        <div className="mx-4 mt-8 flex flex-col gap-4">
-          {siteConfig.navMenuItems.map((item, index) => (
-            <NavbarMenuItem key={`${item}-${index}`}>
-              <Link
-                className="w-full text-lg py-2 hover:text-wedding-pink-500"
-                color="foreground"
-                href={item.href}
-                size="lg"
-                onPress={() => setIsMenuOpen(false)}
-              >
-                {item.label}
-              </Link>
-            </NavbarMenuItem>
-          ))}
+      <NavbarMenu className="bg-wedding-cream/95 dark:bg-black/95 pt-12">
+        <div className="mx-4 flex flex-col h-full">
+          <div className="grid grid-cols-1 gap-3">
+            {siteConfig.navMenuItems.map((item, index) => (
+              <NavbarMenuItem key={`${item.href}-${index}`}>
+                <Link
+                  as={NextLink}
+                  className="w-full flex items-center gap-4 py-4 px-6 rounded-2xl bg-white/50 dark:bg-white/5 border border-wedding-pink-100/50 dark:border-wedding-pink-900/20 text-lg transition-all text-foreground hover:bg-wedding-pink-500 hover:text-white group"
+                  color="foreground"
+                  href={item.href}
+                  onPress={() => setIsMenuOpen(false)}
+                >
+                  <span className="text-wedding-pink-500 group-hover:text-white transition-colors">
+                    {getIcon(item.label)}
+                  </span>
+                  <span className="font-medium">{item.label}</span>
+                </Link>
+              </NavbarMenuItem>
+            ))}
+          </div>
+
+          <div className="mt-auto mb-12 flex flex-col items-center text-center space-y-4">
+            <div className="w-12 h-[1px] bg-wedding-pink-200" />
+            <p
+              className={`${fontCursive.className} text-3xl text-wedding-pink-600 dark:text-wedding-pink-400`}
+            >
+              Titas & Sukanya
+            </p>
+            <p className="text-[10px] uppercase tracking-[0.5em] text-default-400">
+              January 2026
+            </p>
+          </div>
         </div>
       </NavbarMenu>
     </HeroUINavbar>