@titas_mallick/wedding-site-gen 1.0.0

package/app/song-requests/page.tsx

@@ -0,0 +1,354 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { 
+  Card, 
+  CardBody, 
+  Input, 
+  Button, 
+  addToast, 
+  Divider, 
+  Spinner,
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Chip,
+  Tooltip,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from "@heroui/react";
+import { 
+  getFirestore, 
+  collection, 
+  addDoc, 
+  serverTimestamp, 
+  onSnapshot, 
+  query, 
+  orderBy, 
+  deleteDoc, 
+  doc, 
+  updateDoc 
+} from "firebase/firestore";
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import firebaseApp from "@/config/firebase";
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import { HeartFilledIcon } from "@/components/icons";
+
+const db = getFirestore(firebaseApp());
+const auth = getAuth(firebaseApp());
+
+export default function SongRequestsPage() {
+  const [formData, setFormData] = useState({ name: "", song: "", artist: "", captcha: "" });
+  const [loading, setLoading] = useState(false);
+  const [user, setUser] = useState<any>(null);
+  const [requests, setRequests] = useState<any[]>([]);
+  const [listLoading, setListLoading] = useState(true);
+
+  // Delete Confirmation States
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [requestToDelete, setRequestToDelete] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsubscribeAuth = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+    return () => unsubscribeAuth();
+  }, []);
+
+  useEffect(() => {
+    const q = query(collection(db, "song_requests"), orderBy("createdAt", "desc"));
+    const unsubscribeData = onSnapshot(q, (snapshot) => {
+      const data = snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+      setRequests(data);
+      setListLoading(false);
+    });
+    return () => unsubscribeData();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (formData.captcha.trim() !== "10") {
+      addToast({
+        title: "Security Check",
+        description: "Please answer the question correctly (Hint: 10 years!).",
+        color: "warning",
+      });
+      return;
+    }
+
+    if (!formData.name || !formData.song) return;
+
+    setLoading(true);
+    try {
+      await addDoc(collection(db, "song_requests"), {
+        ...formData,
+        status: "pending",
+        createdAt: serverTimestamp(),
+      });
+      setFormData({ name: "", song: "", artist: "", captcha: "" });
+      addToast({
+        title: "Song Requested!",
+        description: "We'll try our best to play your favorite track at the Reception.",
+        color: "success",
+      });
+    } catch (err) {
+      console.error("Song request error", err);
+      addToast({
+        title: "Error",
+        description: "Could not save your request. Please try again.",
+        color: "danger",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeleteClick = (id: string) => {
+    setRequestToDelete(id);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!requestToDelete) return;
+    try {
+      await deleteDoc(doc(db, "song_requests", requestToDelete));
+      addToast({ title: "Deleted", description: "Request removed.", color: "success" });
+    } catch (err) {
+      addToast({ title: "Error", color: "danger" });
+    } finally {
+      setIsDeleteModalOpen(false);
+      setRequestToDelete(null);
+    }
+  };
+
+  const toggleStatus = async (id: string, currentStatus: string) => {
+    try {
+      await updateDoc(doc(db, "song_requests", id), {
+        status: currentStatus === "played" ? "pending" : "played"
+      });
+      addToast({ title: "Status Updated", color: "success" });
+    } catch (err) {
+      addToast({ title: "Error", color: "danger" });
+    }
+  };
+
+  const isAdmin = user?.email === "titas@titas.titas";
+
+  return (
+    <div className="min-h-screen pb-20 pt-10 px-4 max-w-6xl mx-auto flex flex-col items-center">
+      {/* Header */}
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="text-center space-y-6 mb-12"
+      >
+        <div className="bg-wedding-pink-100 dark:bg-wedding-pink-900/30 p-4 rounded-full w-fit mx-auto">
+           <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-wedding-pink-500">
+              <path d="M9 18V5l12-2v13"></path>
+              <circle cx="6" cy="18" r="3"></circle>
+              <circle cx="18" cy="16" r="3"></circle>
+           </svg>
+        </div>
+        <h1 className={`${fontCursive.className} text-5xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400 py-2`}>
+          Reception Playlist
+        </h1>
+        <p className="text-default-500 max-w-xl mx-auto italic">
+          &quot;Music is the soul of our celebration. Tell us which song makes you want to hit the dance floor!&quot;
+        </p>
+      </motion.div>
+
+      <div className="grid lg:grid-cols-2 gap-12 w-full items-start">
+        {/* Left: Request Form */}
+        <Card className="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border border-wedding-gold-200 dark:border-wedding-gold-800 shadow-2xl p-6 md:p-8 rounded-[40px]">
+          <h2 className={`${fontSans.className} text-2xl font-bold mb-6 text-default-800 dark:text-white`}>Request a Song</h2>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <Input
+              isRequired
+              label="Your Name"
+              labelPlacement="outside-top"
+              placeholder="Who are we dancing with?"
+              variant="bordered"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              classNames={{
+                label: "text-wedding-pink-600 font-bold",
+                input: "outline-none",
+                inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
+              }}
+            />
+            <div className="grid md:grid-cols-2 gap-4">
+              <Input
+                isRequired
+                label="Song Title"
+                labelPlacement="outside-top"
+                placeholder="E.g. Kesariya"
+                variant="bordered"
+                value={formData.song}
+                onChange={(e) => setFormData({ ...formData, song: e.target.value })}
+                classNames={{
+                  label: "text-wedding-pink-600 font-bold",
+                  input: "outline-none",
+                  inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
+                }}
+              />
+              <Input
+                label="Artist (Optional)"
+                labelPlacement="outside-top"
+                placeholder="E.g. Arijit Singh"
+                variant="bordered"
+                value={formData.artist}
+                onChange={(e) => setFormData({ ...formData, artist: e.target.value })}
+                classNames={{
+                  label: "text-wedding-pink-600 font-bold",
+                  input: "outline-none",
+                  inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
+                }}
+              />
+            </div>
+
+            <Divider className="opacity-50" />
+
+            <div className="p-4 bg-wedding-pink-50 dark:bg-wedding-pink-900/10 rounded-2xl border border-wedding-pink-100 dark:border-wedding-pink-800/30">
+               <p className="text-[10px] font-bold text-wedding-pink-600 dark:text-wedding-pink-400 uppercase tracking-widest mb-2">Bot Protection</p>
+               <Input
+                isRequired
+                label="How many years have we been together?"
+                labelPlacement="outside-top"
+                placeholder="Answer in numbers"
+                variant="underlined"
+                value={formData.captcha}
+                onChange={(e) => setFormData({ ...formData, captcha: e.target.value })}
+                classNames={{
+                  label: "text-default-600 text-xs",
+                  input: "text-center font-bold text-xl outline-none",
+                }}
+              />
+            </div>
+
+            <Button 
+              type="submit"
+              isLoading={loading}
+              className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-black h-14 text-lg shadow-xl shadow-wedding-pink-500/20"
+            >
+              Submit Song Request
+            </Button>
+          </form>
+        </Card>
+
+        {/* Right: Requests Feed */}
+        <div className="space-y-6">
+          <div className="flex items-center justify-between px-2">
+            <h2 className={`${fontSans.className} text-2xl font-bold text-default-800 dark:text-white`}>The Queue</h2>
+            <Chip color="secondary" variant="flat" size="sm" className={fontMono.className}>
+              {requests.length} Total
+            </Chip>
+          </div>
+          
+          <div className="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
+            {listLoading ? (
+              <div className="flex justify-center py-10"><Spinner color="danger" /></div>
+            ) : requests.length === 0 ? (
+              <p className="text-center py-10 text-default-400 italic font-medium bg-default-50 dark:bg-zinc-900/30 rounded-3xl border border-dashed border-default-200">The playlist is waiting for your touch!</p>
+            ) : (
+              <AnimatePresence>
+                {requests.map((item, i) => (
+                  <motion.div
+                    key={item.id}
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: i * 0.05 }}
+                  >
+                    <Card className={`border ${item.status === 'played' ? 'bg-default-50/50 dark:bg-zinc-900/20 opacity-60' : 'bg-white dark:bg-zinc-900 shadow-lg'} transition-all`}>
+                      <CardBody className="p-4 flex flex-row items-center justify-between gap-4">
+                        <div className="flex items-center gap-4 flex-1 overflow-hidden">
+                          <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${item.status === 'played' ? 'bg-green-100 text-green-600' : 'bg-wedding-pink-100 text-wedding-pink-600'}`}>
+                            {item.status === 'played' ? (
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                            ) : (
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle></svg>
+                            )}
+                          </div>
+                          <div className="flex flex-col overflow-hidden">
+                            <p className={`font-bold truncate ${item.status === 'played' ? 'line-through text-default-400' : 'text-default-800 dark:text-white'}`}>{item.song}</p>
+                            <p className="text-xs text-default-500 truncate italic">{item.artist || 'Unknown Artist'} • Requested by {item.name}</p>
+                          </div>
+                        </div>
+
+                        {isAdmin && (
+                          <div className="flex gap-1">
+                            <Tooltip content={item.status === 'played' ? 'Mark Pending' : 'Mark Played'}>
+                              <Button isIconOnly size="sm" variant="flat" color={item.status === 'played' ? 'warning' : 'success'} onPress={() => toggleStatus(item.id, item.status)}>
+                                {item.status === 'played' ? '↺' : '✓'}
+                              </Button>
+                            </Tooltip>
+                            <Tooltip content="Delete">
+                              <Button isIconOnly size="sm" variant="flat" color="danger" onPress={() => handleDeleteClick(item.id)}>
+                                ✕
+                              </Button>
+                            </Tooltip>
+                          </div>
+                        )}
+                      </CardBody>
+                    </Card>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16 text-center text-default-400 space-y-2">
+         <HeartFilledIcon className="w-6 h-6 mx-auto text-wedding-pink-200" />
+         <p className={`${fontMono.className} text-[10px] uppercase tracking-widest`}>Let the music play</p>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      <Modal 
+        isOpen={isDeleteModalOpen} 
+        onOpenChange={setIsDeleteModalOpen}
+        backdrop="blur"
+        size="xs"
+        className="dark:bg-zinc-900 border border-default-100 dark:border-zinc-800"
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalBody className="pt-8 pb-4 text-center space-y-4">
+                <div className="w-16 h-16 bg-danger-50 dark:bg-danger-900/20 rounded-full flex items-center justify-center mx-auto text-danger animate-bounce">
+                   <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="3 6 5 6 21 6"></polyline>
+                      <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"></path>
+                   </svg>
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-default-900 dark:text-white">Delete Request?</h3>
+                  <p className="text-sm text-default-500 mt-2">Are you sure you want to remove this song from the queue?</p>
+                </div>
+              </ModalBody>
+              <ModalFooter className="flex-col gap-2 pb-8">
+                <Button color="danger" className="w-full font-bold h-12" onPress={handleConfirmDelete}>
+                  Yes, Remove Request
+                </Button>
+                <Button variant="flat" className="w-full font-semibold h-12" onPress={onClose}>
+                  Cancel
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}

package/app/sukanya/layout.tsx

@@ -0,0 +1,7 @@
+export default function SukanyaLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="w-full">{children}</div>;
+}

package/app/sukanya/page.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { Image, Button, Card, CardBody } from "@heroui/react";
+import { Link } from "@heroui/link";
+
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import { HeartFilledIcon } from "@/components/icons";
+
+export default function SukanyaPage() {
+  return (
+    <div className="w-full min-h-screen pb-20">
+      {/* Hero / Intro */}
+      <section className="relative py-16 md:py-24 px-4 bg-wedding-pink-50/50 dark:bg-wedding-pink-900/10 rounded-md">
+        <div className="container mx-auto max-w-6xl flex flex-col md:flex-row-reverse items-center gap-12">
+          {/* Image */}
+          <div className="w-full md:w-1/2 flex justify-center md:justify-start">
+            <div className="relative w-72 h-72 md:w-96 md:h-96">
+              <div className="absolute inset-0 bg-wedding-pink-200 dark:bg-wedding-pink-800 rounded-full blur-2xl opacity-50 transform translate-x-4 translate-y-4" />
+              <Image
+                alt="Sukanya Saha"
+                className="rounded-full object-cover w-full h-full border-4 border-white dark:border-default-100 shadow-2xl z-10"
+                src="/bride.jpg"
+              />
+            </div>
+          </div>
+
+          {/* Text */}
+          <div className="w-full md:w-1/2 text-center md:text-right space-y-6">
+            <h1
+              className={`${fontCursive.className} text-6xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400`}
+            >
+              Sukanya Saha
+            </h1>
+            <p
+              className={`${fontMono.className} text-xl md:text-2xl text-default-600 dark:text-white font-medium`}
+            >
+              Dedicated Educator &amp; Compassionate Mentor
+            </p>
+            <p
+              className={`${fontSans.className} text-lg text-default-700 dark:text-white leading-relaxed max-w-lg mx-auto md:ml-auto md:mr-0`}
+            >
+              A dedicated teacher with a strong academic background in Botany
+              and an unwavering passion for nurturing young learners.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Content Grid */}
+      <section className="container mx-auto max-w-5xl px-4 py-16 space-y-16">
+        {/* About */}
+        <div className="grid md:grid-cols-12 gap-8 items-start">
+          <div className="md:col-span-4">
+            <h2
+              className={`${fontCursive.className} text-4xl text-wedding-pink-500 dark:text-wedding-pink-400 md:text-right`}
+            >
+              The Journey
+            </h2>
+          </div>
+          <div className="md:col-span-8 space-y-4 text-default-700 dark:text-white text-lg leading-relaxed">
+            <p>
+              I strive to foster curiosity, empathy, and excellence in the
+              classroom. My academic journey began at{" "}
+              <strong>Serampore Girls High School</strong> and continued with
+              Botany Honours at <strong>Raja Peary Mohan College</strong>. I
+              earned my Master&apos;s from{" "}
+              <strong>Lady Brabourne College</strong>, building a deep research
+              orientation.
+            </p>
+            <p>
+              Currently, I am a school teacher at{" "}
+              <strong>Rishra Narayana School</strong> and a teaching partner at{" "}
+              <strong>EugenicsErudite</strong>, where I emphasize conceptual
+              clarity and moral growth.
+            </p>
+          </div>
+        </div>
+
+        {/* Philosophy */}
+        <div className="grid md:grid-cols-12 gap-8 items-start">
+          <div className="md:col-span-4">
+            <h2
+              className={`${fontCursive.className} text-4xl text-wedding-pink-500 dark:text-wedding-pink-400 md:text-right`}
+            >
+              My Philosophy
+            </h2>
+          </div>
+          <div className="md:col-span-8 space-y-4 text-default-700 dark:text-white text-lg leading-relaxed">
+            <p>
+              Education is the most powerful tool for personal and social
+              transformation. I design my lessons to balance structure with
+              exploration, encouraging students to think independently and act
+              ethically in an ever-changing world.
+            </p>
+          </div>
+        </div>
+
+        {/* Interests */}
+        <div className="grid md:grid-cols-12 gap-8 items-start">
+          <div className="md:col-span-4">
+            <h2
+              className={`${fontCursive.className} text-4xl text-wedding-pink-500 dark:text-wedding-pink-400 md:text-right`}
+            >
+              Beyond Work
+            </h2>
+          </div>
+          <div className="md:col-span-8 space-y-4 text-default-700 dark:text-white text-lg leading-relaxed">
+            <p>
+              I have a keen interest in Indian classical literature, nature
+              walks, and visual arts. I often find inspiration in the harmony
+              between traditional wisdom and modern scientific thought.
+            </p>
+            <p>
+              Outside the classroom, I enjoy exploring plant biology and
+              creating learner-friendly resources while staying connected to my
+              cultural roots.
+            </p>
+          </div>
+        </div>
+
+        {/* Partner / Values */}
+        <div className="grid md:grid-cols-12 gap-8 items-start">
+          <div className="md:col-span-4">
+            <h2
+              className={`${fontCursive.className} text-4xl text-wedding-pink-500 dark:text-wedding-pink-400 md:text-right`}
+            >
+              Love & Life
+            </h2>
+          </div>
+          <div className="md:col-span-8 space-y-6 text-default-700 dark:text-white text-lg leading-relaxed">
+            <p>
+              I believe that marriage is a space for mutual upliftment, calm
+              companionship, and respect for each other&apos;s individuality.
+              Simplicity and emotional well-being are the values that shape my
+              daily life.
+            </p>
+
+            <Card className="bg-wedding-pink-50 dark:bg-wedding-pink-900/20 border-none shadow-sm mt-6">
+              <CardBody className="flex flex-col md:flex-row items-center gap-6 p-6">
+                <HeartFilledIcon className="text-wedding-pink-500 w-12 h-12 flex-shrink-0" />
+                <div>
+                  <h3
+                    className={`${fontCursive.className} text-2xl text-wedding-pink-600 dark:text-wedding-pink-300 mb-2`}
+                  >
+                    My Partner
+                  </h3>
+                  <p className="text-default-600 dark:text-white text-sm mb-4">
+                    I found a partner in Titas—someone who is sincere,
+                    intellectually inclined, and my steady companion.
+                  </p>
+                  <Button
+                    as={Link}
+                    className="bg-wedding-gold-100 text-wedding-gold-700 font-semibold hover:bg-wedding-gold-200 dark:bg-wedding-gold-500 dark:text-black dark:hover:bg-wedding-gold-400"
+                    href="/titas"
+                    size="sm"
+                  >
+                    Meet Titas
+                  </Button>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/app/titas/layout.tsx

@@ -0,0 +1,7 @@
+export default function TitasLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="w-full">{children}</div>;
+}