@titas_mallick/wedding-site-gen 1.0.0

package/app/updates/maker/page.js

@@ -0,0 +1,323 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Textarea,
+  Button,
+  Card,
+  CardHeader,
+  CardBody,
+  addToast,
+  Chip,
+  Divider,
+} from "@heroui/react";
+import {
+  getFirestore,
+  collection,
+  addDoc,
+  serverTimestamp,
+} from "firebase/firestore";
+import { motion, AnimatePresence } from "framer-motion";
+import { getAuth, onAuthStateChanged, signOut } from "firebase/auth";
+
+import firebaseApp from "@/config/firebase";
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import { HeartFilledIcon } from "@/components/icons";
+import Auth from "../../invitation/maker/auth.js";
+
+const auth = getAuth(firebaseApp());
+const db = getFirestore(firebaseApp());
+
+const UpdateMaker = () => {
+  const [user, setUser] = useState(null);
+  const [text, setText] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isRefining, setIsRefining] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  const handleRefine = async () => {
+    if (!text.trim()) {
+      addToast({
+        title: "Nothing to refine",
+        description: "Please write something first.",
+        color: "warning",
+      });
+      return;
+    }
+
+    setIsRefining(true);
+    try {
+      const apiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
+      
+      if (!apiKey) {
+        throw new Error("Gemini API Key is missing. Please check your .env.local file and restart the server.");
+      }
+
+      const response = await fetch(
+        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            contents: [{
+              parts: [{
+                text: `Task: Rewrite the following wedding update message to be more elegant, heartwarming, and professional.
+                Context: This is for Titas and Sukanya's wedding.
+                Constraint 1: Output ONLY the refined message in PLAIN TEXT. 
+                Constraint 2: Do NOT use any Markdown formatting, bolding (**), or symbols.
+                Constraint 3: Do not include any introductory text, titles (like "For Titas and Sukanya:"), or quotes.
+
+                Message to rewrite: "${text}"`
+              }]
+            }],
+            generationConfig: {
+              maxOutputTokens: 300,
+              temperature: 0.7,
+            }
+          })
+        }
+      );
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw new Error(data.error.message || "API Error");
+      }
+
+      const refinedText = data.candidates?.[0]?.content?.parts?.[0]?.text?.trim();
+
+      if (refinedText) {
+        setText(refinedText);
+        addToast({
+          title: "Refined ✨",
+          description: "Message polished successfully!",
+          color: "success",
+          variant: "solid",
+        });
+      } else {
+        throw new Error("AI returned an empty response. Try rephrasing your input.");
+      }
+    } catch (err) {
+      console.error("AI Refinement error:", err);
+      addToast({
+        title: "Refinement Failed",
+        description: err.message || "An unexpected error occurred.",
+        color: "danger",
+      });
+    } finally {
+      setIsRefining(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (text.trim().length === 0 || text.length > 300) {
+      addToast({
+        title: "Invalid input",
+        description: "Please enter 1–300 characters.",
+        color: "warning",
+        variant: "solid",
+        radius: "lg",
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await addDoc(collection(db, "updates"), {
+        text: text.trim(),
+        createdAt: serverTimestamp(),
+        uid: user.uid,
+        email: user.email,
+      });
+      setText("");
+      addToast({
+        title: "Success",
+        description: "Your update has been shared with everyone!",
+        color: "success",
+        variant: "solid",
+        radius: "lg",
+      });
+    } catch (err) {
+      addToast({
+        title: "Error",
+        description: "Something went wrong. Please try again.",
+        color: "danger",
+        variant: "solid",
+        radius: "lg",
+      });
+    }
+    setLoading(false);
+  };
+
+  const handleSignOut = async () => {
+    try {
+      await signOut(auth);
+      setUser(null);
+      addToast({
+        title: "Signed Out",
+        description: "Session closed successfully.",
+        color: "default",
+        variant: "flat",
+        radius: "lg",
+      });
+    } catch (error) {
+      console.error("Sign out error", error);
+    }
+  };
+
+  return (
+    <div className="min-h-[80vh] flex flex-col items-center justify-center p-6 bg-gradient-to-b from-transparent to-wedding-pink-50/20">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="w-full max-w-xl"
+      >
+        <Card className="w-full bg-white/80 dark:bg-black/60 backdrop-blur-xl border border-wedding-gold-200 dark:border-wedding-gold-800 shadow-2xl overflow-visible">
+          {/* Decorative Top Border */}
+          <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-wedding-pink-500 via-wedding-gold-500 to-wedding-pink-500 rounded-t-xl" />
+
+          <CardHeader className="flex flex-col items-center pt-10 pb-4 text-center">
+            <motion.div
+              initial={{ rotate: -10, scale: 0 }}
+              animate={{ rotate: 0, scale: 1 }}
+              transition={{ type: "spring", damping: 10 }}
+              className="bg-wedding-pink-100 dark:bg-wedding-pink-900/30 p-4 rounded-full mb-4"
+            >
+              <HeartFilledIcon className="w-8 h-8 text-wedding-pink-500" />
+            </motion.div>
+            <h1 className={`${fontCursive.className} text-5xl md:text-6xl text-wedding-pink-600 dark:text-wedding-pink-400`}>
+              Post an Update
+            </h1>
+            <p className={`${fontMono.className} mt-2 text-xs uppercase tracking-widest text-default-500`}>
+              Share a moment with your guests
+            </p>
+          </CardHeader>
+
+          <Divider className="mx-8 w-auto opacity-50" />
+
+          <CardBody className="px-8 py-10">
+            <AnimatePresence mode="wait">
+              {user ? (
+                <motion.div
+                  key="editor"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
+                  className="space-y-6"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Chip
+                        variant="flat"
+                        color="warning"
+                        className="bg-wedding-gold-50 dark:bg-wedding-gold-900/20 text-wedding-gold-700 dark:text-wedding-gold-300"
+                        size="sm"
+                      >
+                        Admin: {user.email}
+                      </Chip>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="light"
+                      color="danger"
+                      className="font-semibold"
+                      onPress={handleSignOut}
+                    >
+                      Sign Out
+                    </Button>
+                  </div>
+
+                  <div className="relative">
+                    <Textarea
+                      label="Your Message"
+                      placeholder="What's happening?"
+                      variant="bordered"
+                      className="w-full"
+                      classNames={{
+                        input: "text-lg h-32 py-2 outline-none",
+                        label: "text-wedding-pink-600 font-semibold",
+                        inputWrapper: "border-wedding-gold-100 hover:border-wedding-gold-300 focus-within:!border-wedding-pink-500 transition-colors",
+                      }}
+                      maxLength={300}
+                      value={text}
+                      onChange={(e) => setText(e.target.value)}
+                    />
+                    <div className={`absolute bottom-2 right-3 text-xs font-mono ${text.length >= 280 ? 'text-danger' : 'text-default-400'}`}>
+                      {text.length}/300
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-3">
+                    <Button
+                      variant="flat"
+                      color="secondary"
+                      size="sm"
+                      className="w-fit self-end font-semibold bg-wedding-pink-50 dark:bg-wedding-pink-900/20 text-wedding-pink-600 dark:text-wedding-pink-400"
+                      onPress={handleRefine}
+                      isLoading={isRefining}
+                      startContent={!isRefining && <span>✨</span>}
+                    >
+                      Refine with AI
+                    </Button>
+
+                    <Button
+                      isLoading={loading}
+                      color="danger"
+                      size="lg"
+                      className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-bold shadow-lg hover:opacity-90 transition-opacity"
+                      onPress={handleSave}
+                      isDisabled={text.trim().length === 0 || isRefining}
+                    >
+                      Share Update
+                    </Button>
+                  </div>
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="login"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
+                  className="flex flex-col items-center gap-6"
+                >
+                  <p className="text-default-600 dark:text-gray-400 text-center font-medium italic">
+                    You need to be signed in to post updates to the timeline.
+                  </p>
+                  <div className="w-full border-2 border-dashed border-wedding-pink-100 dark:border-wedding-pink-900/30 rounded-2xl p-4 bg-default-50/50">
+                    <Auth userSet={setUser} />
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </CardBody>
+        </Card>
+      </motion.div>
+
+      {/* Helper links */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5 }}
+        className="mt-8 flex flex-wrap justify-center gap-4"
+      >
+        <Button
+          as="a"
+          href="/updates"
+          variant="light"
+          color="primary"
+          className="text-wedding-pink-600 hover:text-wedding-pink-700"
+        >
+          View Public Feed →
+        </Button>
+      </motion.div>
+    </div>
+  );
+};
+
+export default UpdateMaker;

package/app/updates/overlay/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  getFirestore,
+  collection,
+  onSnapshot,
+  query,
+  orderBy,
+  limit,
+} from "firebase/firestore";
+import { motion, AnimatePresence } from "framer-motion";
+
+import firebaseApp from "@/config/firebase";
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import { HeartFilledIcon } from "@/components/icons";
+
+const db = getFirestore(firebaseApp());
+
+export default function UpdateOverlay() {
+  const [latestUpdate, setLatestUpdate] = useState<any>(null);
+  const [time, setTime] = useState(new Date());
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+    const timer = setInterval(() => setTime(new Date()), 1000);
+    const q = query(
+      collection(db, "updates"),
+      orderBy("createdAt", "desc"),
+      limit(1)
+    );
+
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      if (!snapshot.empty) {
+        setLatestUpdate({
+          id: snapshot.docs[0].id,
+          ...snapshot.docs[0].data(),
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <div className="fixed inset-0 flex flex-col justify-between p-16 pointer-events-none">
+      {/* Global CSS for OBS Chroma Keying */}
+      <style jsx global>{`
+        nav, footer { display: none !important; }
+        main { 
+          padding: 0 !important; 
+          max-width: none !important; 
+          margin: 0 !important; 
+          background: #00ff00 !important; 
+        }
+        body { 
+          background: #00ff00 !important; 
+          overflow: hidden; 
+        }
+      `}</style>
+
+      {/* Top Bar: Clock & Brand */}
+      <div className="flex justify-between items-start">
+        <motion.div 
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="bg-[#18181b] border-2 border-wedding-pink-500 p-4 rounded-2xl"
+        >
+          <p className={`${fontMono.className} text-5xl font-black text-white tabular-nums tracking-tighter`}>
+            {hasMounted ? time.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "--:--:--"}
+          </p>
+          <p className={`${fontMono.className} text-wedding-gold-400 text-xs uppercase tracking-[0.3em] mt-1 font-bold`}>
+            Event Time
+          </p>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="bg-white p-3 rounded-2xl flex items-center gap-4 border-2 border-wedding-pink-500"
+        >
+          <div className="text-right">
+            <p className={`${fontCursive.className} text-2xl text-zinc-900`}>Follow Live</p>
+            <p className={`${fontSans.className} text-[9px] font-black text-wedding-pink-600 uppercase tracking-widest leading-none`}>Scan for Updates</p>
+          </div>
+          <img src="/pubqr.png" alt="QR Code" className="w-16 h-16 rounded-lg" />
+        </motion.div>
+      </div>
+
+      {/* Bottom Bar: Latest News */}
+      <AnimatePresence mode="wait">
+        {latestUpdate && (
+          <motion.div
+            key={latestUpdate.id}
+            initial={{ opacity: 0, y: 150 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 100 }}
+            transition={{ type: "spring", damping: 25, stiffness: 120 }}
+            className="w-full flex justify-center"
+          >
+            <div className="relative w-full max-w-5xl">
+              {/* Solid outline instead of glow */}
+              <div className="absolute -inset-1 border border-wedding-pink-500/20 rounded-[30px]" />
+              
+              <div className="relative bg-[#09090b] border-4 border-wedding-pink-500 rounded-[28px] p-6 md:p-8 flex items-center gap-8">
+                
+                <div className="flex-shrink-0 flex flex-col items-center gap-2">
+                  <div className="bg-wedding-pink-500 p-4 rounded-full">
+                    <HeartFilledIcon className="w-8 h-8 text-white" />
+                  </div>
+                  <span className={`${fontMono.className} text-[10px] uppercase tracking-[0.4em] text-wedding-gold-400 font-black`}>
+                    LIVE
+                  </span>
+                </div>
+
+                <div className="flex-1 space-y-2">
+                  <p className={`${fontCursive.className} text-4xl text-wedding-pink-400`}>
+                    Wedding News
+                  </p>
+                  <p className={`${fontSans.className} text-3xl md:text-4xl font-black text-white leading-tight tracking-tight`}>
+                    {latestUpdate.text}
+                  </p>
+                </div>
+
+                <div className="hidden lg:flex flex-col items-end justify-center border-l-2 border-zinc-800 pl-8 space-y-1">
+                  <p className={`${fontCursive.className} text-4xl text-wedding-gold-200`}>
+                    Titas & Sukanya
+                  </p>
+                  <p className={`${fontMono.className} text-[10px] uppercase tracking-[0.5em] text-zinc-500 font-bold`}>
+                    Jan 2026
+                  </p>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/app/updates/page.js

@@ -0,0 +1,207 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  getFirestore,
+  collection,
+  onSnapshot,
+  query,
+  orderBy,
+} from "firebase/firestore";
+import {
+  Spinner,
+  Divider,
+  Chip,
+  Card,
+  CardBody,
+  CardHeader,
+  Avatar,
+  Button,
+} from "@heroui/react";
+import { motion, AnimatePresence } from "framer-motion";
+
+import firebaseApp from "@/config/firebase";
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import { HeartFilledIcon, ClockIcon } from "@/components/icons";
+
+const db = getFirestore(firebaseApp());
+
+const formatDateTime = (timestamp) => {
+  if (!timestamp?.toDate) return "Just now";
+  const date = timestamp.toDate();
+  return date.toLocaleDateString("en-IN", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const timeAgo = (timestamp) => {
+  if (!timestamp?.toDate) return "Just now";
+  const now = new Date();
+  const diff = (now.getTime() - timestamp.toDate().getTime()) / 1000;
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+};
+
+const ExpandableText = ({ text, limit = 150 }) => {
+  const [expanded, setExpanded] = useState(false);
+  const toggle = () => setExpanded(!expanded);
+  const isLong = text.length > limit;
+  const displayText = expanded || !isLong ? text : text.slice(0, limit) + "...";
+
+  return (
+    <div className="space-y-2">
+      <p className={`${fontSans.className} text-default-700 dark:text-gray-200 leading-relaxed text-lg`}>
+        {displayText}
+      </p>
+      {isLong && (
+        <Button
+          size="sm"
+          variant="light"
+          color="danger"
+          onPress={toggle}
+          className="p-0 h-auto min-w-0 font-semibold"
+        >
+          {expanded ? "Show less" : "Read more"}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const UpdateFeed = () => {
+  const [updates, setUpdates] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const q = query(collection(db, "updates"), orderBy("createdAt", "desc"));
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const data = snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+      setUpdates(data);
+      setLoading(false);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <Spinner color="danger" size="lg" label="Loading latest updates..." />
+      </div>
+    );
+  }
+
+  if (updates.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[60vh] gap-4">
+        <HeartFilledIcon className="text-wedding-pink-200 w-16 h-16" />
+        <p className={`${fontCursive.className} text-3xl text-default-500`}>
+          No updates yet. Stay tuned!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12 space-y-12">
+      {/* Header */}
+      <div className="text-center space-y-4">
+        <motion.h1 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className={`${fontCursive.className} text-5xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400`}
+        >
+          Wedding Updates
+        </motion.h1>
+        <motion.p 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className={`${fontMono.className} text-sm uppercase tracking-[0.2em] text-default-500`}
+        >
+          The latest news from Titas & Sukanya
+        </motion.p>
+      </div>
+
+      <div className="space-y-8">
+        <AnimatePresence mode="popLayout">
+          {updates.map((update, index) => (
+            <motion.div
+              key={update.id}
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              layout
+            >
+              <Card 
+                className={`w-full overflow-hidden border ${
+                  index === 0 
+                    ? "border-wedding-gold-300 dark:border-wedding-gold-700 bg-wedding-gold-50/50 dark:bg-wedding-gold-900/10 shadow-xl" 
+                    : "border-default-100 dark:border-default-800 bg-white/60 dark:bg-black/40"
+                } backdrop-blur-md`}
+              >
+                {index === 0 && (
+                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-wedding-pink-500 via-wedding-gold-500 to-wedding-pink-500" />
+                )}
+                
+                <CardHeader className="flex gap-3 px-6 pt-6">
+                  <Avatar
+                    isBordered
+                    color={index === 0 ? "warning" : "danger"}
+                    radius="full"
+                    size="md"
+                    src={update.email === "titas@titas.titas" ? "/groom.jpg" : undefined}
+                    name={update.email === "titas@titas.titas" ? "T" : update.email?.charAt(0).toUpperCase()}
+                  />
+                  <div className="flex flex-col flex-1">
+                    <div className="flex items-center justify-between">
+                      <p className="text-md font-bold text-default-800 dark:text-white">
+                        {update.email === "titas@titas.titas" ? "Titas Mallick" : update.email}
+                      </p>
+                      {index === 0 && (
+                        <Chip
+                          size="sm"
+                          variant="shadow"
+                          color="warning"
+                          className="animate-pulse bg-wedding-gold-500 text-white"
+                        >
+                          LATEST
+                        </Chip>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1 text-xs text-default-500">
+                      <ClockIcon className="w-3 h-3" />
+                      <span>{formatDateTime(update.createdAt)}</span>
+                      <span className="mx-1">•</span>
+                      <span className="font-medium text-wedding-pink-500">{timeAgo(update.createdAt)}</span>
+                    </div>
+                  </div>
+                </CardHeader>
+
+                <CardBody className="px-6 py-4">
+                  <ExpandableText text={update.text} />
+                </CardBody>
+                
+                <Divider className="opacity-50" />
+                
+                <div className="px-6 py-3 flex items-center justify-end">
+                   <HeartFilledIcon className={`w-5 h-5 ${index === 0 ? "text-wedding-pink-500" : "text-wedding-pink-200"}`} />
+                </div>
+              </Card>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateFeed;