@titas_mallick/wedding-site-gen 1.1.0 → 2.0.0

package/components/ConciergeBot.tsx

@@ -13,8 +13,10 @@ import {
   Badge,
 } from "@heroui/react";
 import { motion, AnimatePresence } from "framer-motion";
+
 import { HeartFilledIcon } from "./icons";
-import { fontCursive, fontMono } from "@/config/fonts";
+
+import { fontCursive } from "@/config/fonts";
 
 interface Message {
   role: "user" | "bot";
@@ -43,23 +45,25 @@ const ConciergeBot = () => {
     if (!input.trim()) return;
 
     const userMsg = input.trim();
+
     setMessages((prev) => [...prev, { role: "user", text: userMsg }]);
     setInput("");
     setIsTyping(true);
 
     try {
       const apiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
+
       if (!apiKey) throw new Error("API Key missing");
 
       const systemInstruction = `
-        You are an elegant and helpful Wedding Concierge for Titas and Sukanya's wedding. 
+        You are an elegant and helpful Wedding Concierge for a wedding celebration. 
         Your tone is warm, respectful, and slightly formal (Indian hospitality style).
         
         Key Info:
-        - Couple: Titas Mallick & Sukanya (married after 10 years of love).
-        - Engagement: 23rd Nov 2025 at Mohan Jyoti Banquet Hall, Serampore (10:00 AM).
-        - Wedding: 23rd Jan 2026 at Anandamayee Bhawan, Serampore (06:00 PM).
-        - Reception: 25th Jan 2026 at Friends Union Club, Konnagar (06:00 PM).
+        - Couple: Groom & Bride (married after 10 years of love).
+        - Engagement: 23rd Nov 2025 at Venue Name (10:00 AM).
+        - Wedding: 23rd Jan 2026 at Venue Name (06:00 PM).
+        - Reception: 25th Jan 2026 at Venue Name (06:00 PM).
         - Story: They were college classmates who became soulmates. They love the mountains.
         
         Instructions:
@@ -77,30 +81,38 @@ const ConciergeBot = () => {
           body: JSON.stringify({
             contents: [
               { role: "user", parts: [{ text: systemInstruction }] },
-              ...messages.map(m => ({
+              ...messages.map((m) => ({
                 role: m.role === "user" ? "user" : "model",
-                parts: [{ text: m.text }]
+                parts: [{ text: m.text }],
               })),
-              { role: "user", parts: [{ text: userMsg }] }
+              { role: "user", parts: [{ text: userMsg }] },
             ],
-            generationConfig: { maxOutputTokens: 400, temperature: 0.7 }
-          })
-        }
+            generationConfig: { maxOutputTokens: 400, temperature: 0.7 },
+          }),
+        },
       );
 
       const data = await response.json();
-      
+
       if (data.error) {
         console.error("Gemini API Error Detail:", data.error);
         throw new Error(data.error.message);
       }
 
-      const botResponse = data.candidates?.[0]?.content?.parts?.[0]?.text || "I apologize, I'm having trouble connecting. Please try again soon!";
-      
+      const botResponse =
+        data.candidates?.[0]?.content?.parts?.[0]?.text ||
+        "I apologize, I'm having trouble connecting. Please try again soon!";
+
       setMessages((prev) => [...prev, { role: "bot", text: botResponse }]);
     } catch (error: any) {
       console.error("Chatbot Error:", error);
-      setMessages((prev) => [...prev, { role: "bot", text: `I'm having a small technical issue: ${error.message || "Please try again later."}` }]);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: "bot",
+          text: `I'm having a small technical issue: ${error.message || "Please try again later."}`,
+        },
+      ]);
     } finally {
       setIsTyping(false);
     }
@@ -111,34 +123,55 @@ const ConciergeBot = () => {
       <AnimatePresence>
         {isOpen && (
           <motion.div
-            initial={{ opacity: 0, scale: 0.8, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.8, y: 20 }}
             className="mb-3 w-[calc(100vw-32px)] sm:w-[350px] md:w-[380px] shadow-2xl overflow-hidden"
+            exit={{ opacity: 0, scale: 0.8, y: 20 }}
+            initial={{ opacity: 0, scale: 0.8, y: 20 }}
           >
             <Card className="border-none bg-white/90 dark:bg-zinc-900/95 backdrop-blur-xl h-[400px] md:h-[500px] max-h-[70vh] flex flex-col">
               <CardHeader className="bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 p-4 flex justify-between items-center text-white">
                 <div className="flex items-center gap-3">
-                  <Avatar src="/love-birds.png" className="bg-white/20" size="sm" />
+                  <Avatar
+                    className="bg-white/20"
+                    size="sm"
+                    src="/love-birds.png"
+                  />
                   <div>
-                    <p className={`${fontCursive.className} text-xl leading-none`}>Wedding Assistant</p>
-                    <p className="text-[10px] uppercase tracking-widest opacity-80">Online & Ready</p>
+                    <p
+                      className={`${fontCursive.className} text-xl leading-none`}
+                    >
+                      Wedding Assistant
+                    </p>
+                    <p className="text-[10px] uppercase tracking-widest opacity-80">
+                      Online & Ready
+                    </p>
                   </div>
                 </div>
-                <Button isIconOnly variant="light" size="sm" onPress={() => setIsOpen(false)} className="text-white min-w-0">
+                <Button
+                  isIconOnly
+                  className="text-white min-w-0"
+                  size="sm"
+                  variant="light"
+                  onPress={() => setIsOpen(false)}
+                >
                   ✕
                 </Button>
               </CardHeader>
-              
+
               <CardBody className="p-0">
                 <ScrollShadow ref={scrollRef} className="h-full p-4 space-y-4">
                   {messages.map((msg, i) => (
-                    <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
-                      <div className={`max-w-[85%] p-3 rounded-2xl text-sm ${
-                        msg.role === "user" 
-                        ? "bg-wedding-pink-500 text-white rounded-tr-none" 
-                        : "bg-default-100 dark:bg-zinc-800 text-default-800 dark:text-zinc-200 rounded-tl-none"
-                      }`}>
+                    <div
+                      key={i}
+                      className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+                    >
+                      <div
+                        className={`max-w-[85%] p-3 rounded-2xl text-sm ${
+                          msg.role === "user"
+                            ? "bg-wedding-pink-500 text-white rounded-tr-none"
+                            : "bg-default-100 dark:bg-zinc-800 text-default-800 dark:text-zinc-200 rounded-tl-none"
+                        }`}
+                      >
                         {msg.text}
                       </div>
                     </div>
@@ -158,26 +191,45 @@ const ConciergeBot = () => {
               </CardBody>
 
               <CardFooter className="p-4 pt-2">
-                <form className="flex w-full gap-2" onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
+                <form
+                  className="flex w-full gap-2"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSend();
+                  }}
+                >
                   <Input
+                    className="flex-1"
+                    classNames={{
+                      inputWrapper:
+                        "border-wedding-pink-100 focus-within:!border-wedding-pink-500",
+                      input: "outline-none",
+                    }}
                     placeholder="Ask me anything..."
+                    size="sm"
                     value={input}
-                    onChange={(e) => setInput(e.target.value)}
                     variant="bordered"
-                    size="sm"
-                    className="flex-1"
-                    classNames={{ inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500", input: "outline-none" }}
+                    onChange={(e) => setInput(e.target.value)}
                   />
-                  <Button 
-                    isIconOnly 
-                    color="danger" 
-                    size="sm" 
-                    onPress={handleSend}
+                  <Button
+                    isIconOnly
                     className="bg-wedding-pink-500"
+                    color="danger"
+                    size="sm"
+                    onPress={handleSend}
                   >
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <line x1="22" y1="2" x2="11" y2="13"></line>
-                      <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                    <svg
+                      fill="none"
+                      height="16"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2.5"
+                      viewBox="0 0 24 24"
+                      width="16"
+                    >
+                      <line x1="22" x2="11" y1="2" y2="13" />
+                      <polygon points="22 2 15 22 11 13 2 9 22 2" />
                     </svg>
                   </Button>
                 </form>
@@ -192,8 +244,16 @@ const ConciergeBot = () => {
         className="w-10 h-10 md:w-14 md:h-14 rounded-full bg-gradient-to-tr from-wedding-pink-500 to-wedding-gold-500 shadow-wedding-pink-500/30 shadow-2xl group transition-transform hover:scale-110 active:scale-95"
         onPress={() => setIsOpen(!isOpen)}
       >
-        <Badge content="" color="success" shape="circle" placement="top-right" className="border-2 border-white dark:border-zinc-900 min-w-0 h-2.5 w-2.5">
-           <HeartFilledIcon className={`text-white w-4 h-4 md:w-6 md:h-6 transition-transform duration-500 ${isOpen ? "rotate-180" : ""}`} />
+        <Badge
+          className="border-2 border-white dark:border-zinc-900 min-w-0 h-2.5 w-2.5"
+          color="success"
+          content=""
+          placement="top-right"
+          shape="circle"
+        >
+          <HeartFilledIcon
+            className={`text-white w-4 h-4 md:w-6 md:h-6 transition-transform duration-500 ${isOpen ? "rotate-180" : ""}`}
+          />
         </Badge>
       </Button>
     </div>

package/components/CountdownTimer.tsx

@@ -3,9 +3,10 @@
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
-import { fontMono, fontCursive } from "@/config/fonts";
 import { HeartFilledIcon } from "./icons";
 
+import { fontMono, fontCursive } from "@/config/fonts";
+
 interface TimeLeft {
   days: number;
   hours: number;
@@ -13,7 +14,12 @@ interface TimeLeft {
   seconds: number;
 }
 
-type TimerPhase = "BEFORE_WEDDING" | "WEDDING_DAY" | "BEFORE_RECEPTION" | "RECEPTION_DAY" | "POST_EVENT";
+type TimerPhase =
+  | "BEFORE_WEDDING"
+  | "WEDDING_DAY"
+  | "BEFORE_RECEPTION"
+  | "RECEPTION_DAY"
+  | "POST_EVENT";
 
 export default function CountdownTimer() {
   const [timeLeft, setTimeLeft] = useState<TimeLeft | null>(null);
@@ -27,7 +33,7 @@ export default function CountdownTimer() {
 
     const calculateTimeLeft = () => {
       const now = new Date().getTime();
-      
+
       let currentPhase: TimerPhase = "BEFORE_WEDDING";
       let targetDate = weddingStart;
 
@@ -47,7 +53,10 @@ export default function CountdownTimer() {
 
       setPhase(currentPhase);
 
-      if (currentPhase === "BEFORE_WEDDING" || currentPhase === "BEFORE_RECEPTION") {
+      if (
+        currentPhase === "BEFORE_WEDDING" ||
+        currentPhase === "BEFORE_RECEPTION"
+      ) {
         const difference = targetDate - now;
 
         setTimeLeft({
@@ -92,7 +101,8 @@ export default function CountdownTimer() {
   return (
     <div className="flex flex-col items-center gap-6 py-8">
       <AnimatePresence mode="wait">
-        {(phase === "BEFORE_WEDDING" || phase === "BEFORE_RECEPTION") && timeLeft ? (
+        {(phase === "BEFORE_WEDDING" || phase === "BEFORE_RECEPTION") &&
+        timeLeft ? (
           <motion.div
             key="countdown"
             animate={{ opacity: 1, scale: 1 }}
@@ -101,23 +111,31 @@ export default function CountdownTimer() {
             initial={{ opacity: 0, scale: 0.9 }}
           >
             <TimeUnit label="Days" value={timeLeft.days} />
-            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">:</div>
+            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">
+              :
+            </div>
             <TimeUnit label="Hours" value={timeLeft.hours} />
-            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">:</div>
+            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">
+              :
+            </div>
             <TimeUnit label="Mins" value={timeLeft.minutes} />
-            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">:</div>
+            <div className="text-wedding-gold-400 text-3xl md:text-5xl font-light mb-6">
+              :
+            </div>
             <TimeUnit label="Secs" value={timeLeft.seconds} />
           </motion.div>
         ) : (
           <motion.div
             key="celebration"
             animate={{ opacity: 1, y: 0 }}
-            className="flex flex-col items-center gap-4 bg-gradient-to-br from-wedding-pink-500 to-wedding-gold-500 p-8 rounded-[40px] shadow-2xl text-white"
+            className="flex flex-col items-center gap-2 bg-white/30 dark:bg-black/20 backdrop-blur-md px-8 md:px-16 py-6 rounded-[40px] border border-wedding-gold-200/50 dark:border-wedding-gold-800/50 shadow-xl overflow-visible"
             exit={{ opacity: 0, y: 20 }}
             initial={{ opacity: 0, y: 20 }}
           >
-            <HeartFilledIcon className="w-12 h-12 animate-beat text-white" />
-            <h2 className={`${fontCursive.className} text-4xl md:text-5xl text-center`}>
+            <HeartFilledIcon className="w-12 h-12 animate-beat text-wedding-pink-500" />
+            <h2
+              className={`${fontCursive.className} text-4xl md:text-6xl text-center bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 bg-clip-text text-transparent leading-[1.6] py-12 px-4 overflow-visible`}
+            >
               {phase === "WEDDING_DAY" && "Today is our Wedding Day!"}
               {phase === "RECEPTION_DAY" && "Today is our Reception!"}
               {phase === "POST_EVENT" && "Just Married!"}
@@ -126,12 +144,16 @@ export default function CountdownTimer() {
         )}
       </AnimatePresence>
 
-      <p className={`${fontCursive.className} text-2xl text-wedding-gold-600 dark:text-wedding-gold-400`}>
-        {phase === "BEFORE_WEDDING" && "Until we say \"I Do\""}
+      <p
+        className={`${fontCursive.className} text-2xl text-wedding-gold-600 dark:text-wedding-gold-400`}
+      >
+        {" "}
+        {phase === "BEFORE_WEDDING" && 'Until we say "I Do"'}
         {phase === "BEFORE_RECEPTION" && "Until the Grand Reception"}
         {phase === "POST_EVENT" && "Happily Ever After"}
-        {(phase === "WEDDING_DAY" || phase === "RECEPTION_DAY") && "The Celebration Continues..."}
+        {(phase === "WEDDING_DAY" || phase === "RECEPTION_DAY") &&
+          "The Celebration Continues..."}
       </p>
     </div>
   );
-}
+}

package/components/Gallery.tsx

@@ -155,7 +155,7 @@ const images = [
   },
 ];
 
-const pwImages = Array.from({ length: 32 }, (_, i) => {
+const pwImages = Array.from({ length: 57 }, (_, i) => {
   const num = String(i + 1).padStart(3, "0");
 
   return {

package/components/LiveVideos.tsx

@@ -13,26 +13,36 @@ const fadeInUp = {
 };
 
 const LiveVideos = () => {
-  const [weddingStatus, setWeddingStatus] = useState({ show: false, isLive: false });
-  const [receptionStatus, setReceptionStatus] = useState({ show: false, isLive: false });
+  const [weddingStatus, setWeddingStatus] = useState({
+    show: false,
+    isLive: false,
+  });
+  const [receptionStatus, setReceptionStatus] = useState({
+    show: false,
+    isLive: false,
+  });
 
   useEffect(() => {
     const today = new Date();
     // Normalize today to start of day for accurate comparison
-    const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-    
+    const startOfToday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate(),
+    );
+
     // Dates from CountdownTimer: Wedding Jan 23, Reception Jan 25 (2026)
     const weddingDate = new Date(2026, 0, 23);
     const receptionDate = new Date(2026, 0, 25);
 
     setWeddingStatus({
       show: startOfToday >= weddingDate,
-      isLive: startOfToday.getTime() === weddingDate.getTime()
+      isLive: startOfToday.getTime() === weddingDate.getTime(),
     });
 
     setReceptionStatus({
       show: startOfToday >= receptionDate,
-      isLive: startOfToday.getTime() === receptionDate.getTime()
+      isLive: startOfToday.getTime() === receptionDate.getTime(),
     });
   }, []);
 
@@ -41,16 +51,16 @@ const LiveVideos = () => {
       {/* Background with subtle animation */}
       <div className="absolute inset-0 bg-gradient-to-br from-wedding-pink-50/80 via-white to-wedding-gold-50/50 dark:from-wedding-pink-950/20 dark:via-black dark:to-wedding-gold-950/10 -z-10" />
       <div className="absolute top-0 left-0 w-full h-full bg-[url('/corner1-01.svg')] opacity-[0.03] dark:opacity-[0.05] bg-cover bg-center pointer-events-none" />
-      
+
       {/* Animated glowing rings */}
       <div className="absolute w-32 h-32 md:w-40 md:h-40 rounded-full border border-wedding-pink-200/30 dark:border-wedding-pink-500/10 animate-[ping_3s_infinite]" />
       <div className="absolute w-24 h-24 md:w-32 md:h-32 rounded-full border border-wedding-gold-200/30 dark:border-wedding-gold-500/10 animate-[ping_4s_infinite]" />
 
-      <motion.div 
+      <motion.div
         className="relative z-10 flex flex-col items-center"
         initial={{ opacity: 0, scale: 0.9 }}
-        whileInView={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.5 }}
+        whileInView={{ opacity: 1, scale: 1 }}
       >
         <div className="w-16 h-16 md:w-20 md:h-20 mb-4 md:mb-6 rounded-full bg-white dark:bg-zinc-900 shadow-xl flex items-center justify-center border border-wedding-pink-100 dark:border-wedding-pink-900 group-hover:scale-110 transition-transform duration-500">
           <svg
@@ -68,19 +78,21 @@ const LiveVideos = () => {
           </svg>
         </div>
 
-        <h4 className={`${fontCursive.className} text-2xl md:text-4xl text-wedding-gold-600 dark:text-wedding-gold-400 mb-2 md:mb-3`}>
+        <h4
+          className={`${fontCursive.className} text-2xl md:text-4xl text-wedding-gold-600 dark:text-wedding-gold-400 mb-2 md:mb-3`}
+        >
           {title} Stream
         </h4>
-        
+
         <div className="h-px w-16 md:w-24 bg-gradient-to-r from-transparent via-wedding-pink-200 dark:via-wedding-pink-800 to-transparent mb-3 md:mb-4" />
-        
+
         <p className="text-default-600 dark:text-gray-300 max-w-[240px] md:max-w-sm mx-auto leading-relaxed text-sm md:text-base">
           Our hearts are filled with joy as we prepare for our big day.
         </p>
         <p className="mt-2 font-bold text-wedding-pink-600 dark:text-wedding-pink-400 tracking-wide uppercase text-[10px] md:text-xs">
           Available on {date}
         </p>
-        
+
         <div className="mt-6 md:mt-8 px-4 md:px-6 py-1.5 md:py-2 rounded-full border border-wedding-gold-200 dark:border-wedding-gold-800 bg-white/50 dark:bg-black/20 backdrop-blur-sm text-[9px] md:text-[10px] uppercase tracking-[0.2em] text-default-500 font-bold">
           Reserved for Guests
         </div>
@@ -117,7 +129,7 @@ const LiveVideos = () => {
                 The Wedding
               </h3>
             </div>
-            
+
             {weddingStatus.show ? (
               <div className="w-full aspect-video rounded-2xl overflow-hidden shadow-2xl border-2 md:border-4 border-white dark:border-white/10 hover:scale-[1.01] transition-transform duration-500">
                 <iframe
@@ -170,4 +182,4 @@ const LiveVideos = () => {
   );
 };
 
-export default LiveVideos;
+export default LiveVideos;

package/components/OurStory.tsx

@@ -152,7 +152,7 @@ export default function OurStorySection() {
         </p>
 
         <p className={`${fontCursive.className} text-right text-3xl mt-4`}>
-          -- Titas
+          -- Groom
         </p>
       </div>
     </section>

package/components/SchemaMarkup.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+export const SchemaMarkup = () => {
+  const weddingSchema = {
+    "@context": "https://schema.org",
+    "@type": "Event",
+    "name": "The Wedding of Titas and Sukanya",
+    "startDate": "2026-01-23T18:00",
+    "endDate": "2026-01-23T23:59",
+    "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+    "eventStatus": "https://schema.org/EventScheduled",
+    "location": {
+      "@type": "Place",
+      "name": "Anandamayee Bhawan",
+      "address": {
+        "@type": "PostalAddress",
+        "addressLocality": "Serampore",
+        "addressRegion": "West Bengal",
+        "addressCountry": "IN"
+      }
+    },
+    "image": [
+      "https://www.titas-sukanya-for.life/invite.jpeg",
+      "https://www.titas-sukanya-for.life/pw/020.jpg"
+    ],
+    "description": "Join us in celebrating the wedding of Titas and Sukanya. A journey of love beginning in Serampore.",
+    "organizer": {
+      "@type": "Person",
+      "name": "Titas Mallick"
+    },
+    "performer": {
+      "@type": "Person",
+      "name": "Titas and Sukanya"
+    }
+  };
+
+  const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://www.titas-sukanya-for.life/"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Our Story",
+        "item": "https://www.titas-sukanya-for.life/couple"
+      },
+      {
+        "@type": "ListItem",
+        "position": 3,
+        "name": "Gallery",
+        "item": "https://www.titas-sukanya-for.life/memories"
+      }
+    ]
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(weddingSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+    </>
+  );
+};