@titas_mallick/wedding-site-gen 1.0.0

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

@@ -0,0 +1,462 @@
+"use client";
+
+import { useEffect, useState, use } from "react";
+import { getFirestore, doc, getDoc, addDoc, collection, serverTimestamp } from "firebase/firestore";
+import {
+  Card,
+  CardBody,
+  Divider,
+  Tabs,
+  Tab,
+  Button,
+  Spinner,
+  Accordion,
+  AccordionItem,
+  Input,
+  RadioGroup,
+  Radio,
+  addToast,
+} from "@heroui/react";
+import { Link } from "@heroui/link";
+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";
+
+export default function InvitationPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = use(params);
+
+  const [guest, setGuest] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  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 [rsvpLoading, setRsvpLoading] = useState(false);
+  const [hasRSVPed, setHasRSVPed] = useState(false);
+
+  const handleRSVP = async () => {
+    if (rsvpData.captcha.trim() !== "10") {
+      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,
+        ...rsvpData,
+        timestamp: serverTimestamp(),
+      });
+      setHasRSVPed(true);
+      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" });
+    } finally {
+      setRsvpLoading(false);
+    }
+  };
+
+  const translateContent = async () => {
+    // ... rest of translation logic remains same
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const db = getFirestore(firebaseApp());
+        const docRef = doc(db, "invitation", slug);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+          const guestData = docSnap.data();
+          setGuest(guestData);
+        } else {
+          setNotFound(true);
+        }
+      } catch (error) {
+        setNotFound(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (slug) fetchData();
+  }, [slug]);
+
+  const events: any = {
+    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 renderEventDetails = (event: any) => (
+    <div className="pt-4 md:pt-8 grid md:grid-cols-2 gap-6 md:gap-8 text-left animate-in fade-in slide-in-from-bottom-4 duration-500">
+      {/* Details */}
+      <div className="space-y-6 bg-default-50 dark:bg-default-100/10 p-6 rounded-2xl border border-default-100 dark:border-default-700">
+        <div className="flex items-start gap-4">
+          <CalendarIcon className="w-6 h-6 text-wedding-pink-500 mt-1" />
+          <div>
+            <p className="font-bold text-default-800 dark:text-white">Date</p>
+            <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>
+            <p className="font-bold text-default-800 dark:text-white">Time</p>
+            <p className="text-default-600 dark:text-gray-300">{event.time}</p>
+          </div>
+        </div>
+
+        <div className="flex items-start gap-4">
+          <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-500 text-sm mt-1">{event.direction}</p>
+          </div>
+        </div>
+
+        <Button
+          as={Link}
+          href={event.mapHref}
+          isExternal
+          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"
+          startContent={<MapPinIcon className="w-4 h-4" />}
+        >
+          Open in Google Maps
+        </Button>
+      </div>
+
+      {/* 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`}
+          className="w-full h-full"
+          src={event.map}
+          loading="lazy"
+          allowFullScreen
+        ></iframe>
+      </div>
+    </div>
+  );
+
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Spinner color="danger" size="lg" />
+      </div>
+    );
+  }
+
+  if (notFound) {
+    return (
+      <div className="flex h-screen flex-col items-center justify-center gap-4 text-center">
+        <h1 className={`${fontCursive.className} text-4xl text-default-800`}>
+          Invitation Not Found
+        </h1>
+        <p className="text-default-600">
+          We couldn&apos;t find an invitation for this link.
+        </p>
+        <Button as={Link} color="primary" href="/" variant="flat">
+          Return Home
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen w-full py-10 px-4 flex items-center justify-center">
+      <motion.div
+        animate={{ opacity: 1, scale: 1 }}
+        className="w-full max-w-3xl"
+        initial={{ opacity: 0, scale: 0.95 }}
+        transition={{ duration: 0.8 }}
+      >
+        <Card className="w-full bg-white/90 dark:bg-black/80 backdrop-blur-xl border border-wedding-gold-200 dark:border-wedding-gold-800 shadow-2xl overflow-visible">
+          {/* Header Section */}
+          <div className="relative h-40 md:h-64 bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 rounded-t-xl overflow-hidden">
+            <div className="absolute inset-0 bg-[url('/corner1-01.svg')] opacity-20 bg-cover bg-center mix-blend-overlay" />
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-white p-4 text-center">
+              <p
+                className={`${fontCursive.className} text-4xl md:text-7xl font-bold drop-shadow-md px-2`}
+              >
+                Titas & Sukanya
+              </p>
+              <p
+                className={`${fontMono.className} mt-2 md:mt-4 text-[10px] md:text-base uppercase tracking-widest opacity-90 px-4`}
+              >
+                Request the honor of your presence
+              </p>
+            </div>
+            {/* Translation Button */}
+            <Button
+              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>
+          </div>
+
+          <CardBody className="px-4 py-8 md:px-12 md:py-14 text-center">
+            {/* Guest Personalization */}
+            <div className="mb-8 md:mb-10">
+              <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}
+                {guest.invitedGuests > 1 && (
+                  <span className="text-xl md:text-3xl ml-2">{translatedData ? "& পরিবার" : "& Family"}</span>
+                )}
+                ,
+              </p>
+
+              <div
+                className={`${fontSans.className} text-base md:text-xl text-default-700 dark:text-gray-200 leading-relaxed space-y-4 md:space-y-6 max-w-2xl mx-auto`}
+              >
+                <p>
+                  {translatedData ? (
+                    <>
+                      {translatedData.welcomeNote || `${translatedData.familySide === "bride" ? "কনে" : "বর"}-র পক্ষ থেকে একজন প্রিয় ${translatedData.relation} হিসেবে আপনার উপস্থিতি আমাদের কাছে অনেক গুরুত্বপূর্ণ।`}
+                    </>
+                  ) : (
+                    <>
+                      As a cherished {guest.relation.toLowerCase()} from the{" "}
+                      <span className="font-semibold text-wedding-gold-600 dark:text-wedding-gold-400">
+                        {guest.familySide === "bride" ? "Bride's" : "Groom's"}
+                      </span>{" "}
+                      side, your presence would mean the world to us as we begin
+                      this beautiful new chapter.
+                    </>
+                  )}
+                </p>
+                <p>
+                  {translatedData ? "আমরা আপনাকে নিম্নলিখিত অনুষ্ঠানে যোগ দেওয়ার জন্য সাদর আমন্ত্রণ জানাচ্ছি:" : `We warmly invite you to join us for the following celebration${guest.invitedFor.length > 1 ? "s" : ""}:`}
+                </p>
+              </div>
+            </div>
+
+            {/* Event Tabs / Accordion */}
+            <div className="w-full">
+              {/* Desktop Tabs */}
+              <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",
+                    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"
+                  }}
+                >
+                  {guest.invitedFor.map((eventKey: string) => (
+                    <Tab key={eventKey} title={events[eventKey].title}>
+                      {renderEventDetails(events[eventKey])}
+                    </Tab>
+                  ))}
+                </Tabs>
+              </div>
+
+              {/* Mobile Accordion */}
+              <div className="md:hidden text-left">
+                <Accordion 
+                  variant="splitted" 
+                  selectionMode="multiple"
+                  defaultExpandedKeys={guest.invitedFor}
+                  className="px-0"
+                >
+                  {guest.invitedFor.map((eventKey: string) => (
+                    <AccordionItem
+                      key={eventKey}
+                      aria-label={events[eventKey].title}
+                      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>
+                  ))}
+                </Accordion>
+              </div>
+            </div>
+
+            <Divider className="my-10 opacity-50" />
+
+            {/* RSVP Section */}
+            <div className="mb-10 px-0 md:px-10">
+              <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"
+                  >
+                    <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>
+                  </motion.div>
+                ) : !showRSVP ? (
+                  <Button 
+                    onPress={() => setShowRSVP(true)}
+                    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"
+                  >
+                    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"
+                  >
+                    <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>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-6 md:gap-8">
+                      <RadioGroup
+                        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" }}
+                      >
+                        <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>
+                      </RadioGroup>
+
+                      {rsvpData.attending === "yes" && (
+                        <RadioGroup
+                          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" }}
+                        >
+                          <Radio value="non-veg" classNames={{ label: "text-sm" }}>Non-Vegetarian</Radio>
+                          <Radio value="veg" classNames={{ label: "text-sm" }}>Vegetarian</Radio>
+                        </RadioGroup>
+                      )}
+                    </div>
+
+                    <div className="space-y-5 md:space-y-6">
+                      <Input 
+                        label="Number of Guests" 
+                        type="number" 
+                        variant="bordered"
+                        labelPlacement="outside-top"
+                        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"
+                        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" }}
+                      />
+                      
+                      <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 
+                          isRequired
+                          label="How many years have we been together?" 
+                          placeholder="Answer in numbers"
+                          variant="underlined"
+                          labelPlacement="outside-top"
+                          value={rsvpData.captcha}
+                          onChange={(e) => setRsvpData({ ...rsvpData, captcha: e.target.value })}
+                          classNames={{ label: "text-[10px] md:text-xs", input: "font-bold outline-none" }}
+                        />
+                      </div>
+
+                      <Button 
+                        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>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            <Divider className="my-8 md:my-10 opacity-50" />
+            <div className="space-y-6">
+              <p
+                className={`${fontCursive.className} text-3xl md:text-4xl text-default-800 dark:text-white`}
+              >
+                With Love & Anticipation,
+              </p>
+              <div className="flex flex-col sm:flex-row justify-center gap-3 md:gap-4">
+                <Button
+                  as={Link}
+                  className="bg-wedding-gold-500 text-white shadow-lg hover:bg-wedding-gold-600 font-semibold w-full sm:w-auto"
+                  href="/couple"
+                  size="lg"
+                >
+                  Meet the Couple
+                </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"
+                  href="/sagun"
+                  size="lg"
+                  variant="bordered"
+                >
+                  Send Wishes
+                </Button>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </motion.div>
+    </div>
+  );
+}

package/app/invitation/maker/auth.js

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Input,
+  addToast,
+  Chip,
+} from "@heroui/react";
+import firebaseApp from "@/config/firebase";
+import {
+  getAuth,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+} from "firebase/auth";
+
+const Auth = ({ userSet }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [credentials, setCredentials] = useState({
+    username: "",
+    password: "",
+  });
+  const [user, setUser] = useState(null);
+
+  const auth = getAuth(firebaseApp());
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user || null);
+      userSet(user || null);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setCredentials((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await signInWithEmailAndPassword(
+        auth,
+        credentials.username,
+        credentials.password
+      );
+      setCredentials({ username: "", password: "" });
+      setModalOpen(false);
+      addToast({
+        title: "Signed in",
+        description: "You have been signed in successfully.",
+        color: "success",
+        variant: "solid",
+        radius: "lg",
+        closeIcon: true,
+        timeout: 2000,
+      });
+    } catch (error) {
+      addToast({
+        title: "Sign-in failed",
+        description: "Invalid username or password.",
+        color: "danger",
+        variant: "solid",
+        radius: "lg",
+        closeIcon: true,
+        timeout: 2000,
+      });
+    }
+  };
+
+  const handleSignOut = async () => {
+    try {
+      await signOut(auth);
+      userSet(null);
+      addToast({
+        title: "Signed out",
+        description: "You have been signed out successfully.",
+        color: "danger",
+        variant: "solid",
+        radius: "lg",
+        closeIcon: true,
+        timeout: 2000,
+      });
+    } catch (error) {
+      console.error("❌ Sign-out error:", error.message);
+    }
+  };
+
+  return (
+    <>
+      <section className="flex items-center justify-between p-4 rounded-lg">
+        {!user ? (
+          <Button color="primary" onPress={() => setModalOpen(true)}>
+            Sign In
+          </Button>
+        ) : (
+          <Button color="danger" onPress={handleSignOut}>
+            Sign Out
+          </Button>
+        )}
+        <Chip color={user ? "success" : "danger"}>
+          {user ? (
+            <>
+              Signed in as <strong className="ml-1">{user.email}</strong>
+            </>
+          ) : (
+            "Not signed in"
+          )}
+        </Chip>
+      </section>
+
+      <Modal isOpen={modalOpen} onOpenChange={setModalOpen} backdrop="blur">
+        <ModalContent>
+          <form onSubmit={handleSubmit}>
+            <ModalHeader className="text-xl">Sign In</ModalHeader>
+            <ModalBody className="gap-4">
+              <Input
+                isRequired
+                name="username"
+                label="Username"
+                labelPlacement="outside-top"
+                placeholder="Enter your username"
+                value={credentials.username}
+                onChange={handleChange}
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+              <Input
+                isRequired
+                type="password"
+                name="password"
+                label="Password"
+                labelPlacement="outside-top"
+                placeholder="Enter your password"
+                value={credentials.password}
+                onChange={handleChange}
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="light" onPress={() => setModalOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default Auth;