@titas_mallick/wedding-site-gen 1.0.0

package/components/Gallery.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import { Card, CardHeader, CardFooter, Image } from "@heroui/react";
+
+import { fontSans, fontCursive } from "@/config/fonts";
+
+const images = [
+  {
+    src: "/Images/1.jpg",
+    alt: "In tuition back in 2016",
+    description: "One of our first pictures together.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/2.jpg",
+    alt: "Getting slightly close together",
+    description: "Tried makeing a film together back then, but it was a flop.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/3.jpg",
+    alt: "Our College Days",
+    description: "Hazy, but beautiful memories.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/4.jpg",
+    alt: "Our College Excursion",
+    description: "Something happened that day, did not know it was love.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/5.jpg",
+    alt: "Getting back from the Excursion",
+    description: "I may have fallen for her till then.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/6.jpg",
+    alt: "In Kolakham",
+    description:
+      "This picture has so many stories attatched to it. Maybe one day.",
+    width: 1200,
+    height: 800,
+    label: "2016",
+  },
+  {
+    src: "/Images/7.jpg",
+    alt: "Last few days of college",
+    description: "We were still not sure about our feelings.",
+    width: 1200,
+    height: 800,
+    label: "2017",
+  },
+  {
+    src: "/Images/8.jpg",
+    alt: "College ended in a blink",
+    description: "We were sure about our feelings, but not about our future.",
+    width: 1200,
+    height: 800,
+    label: "2017",
+  },
+  {
+    src: "/Images/9.jpg",
+    alt: "University Days",
+    description:
+      "The days of our lives were getting busier, but we were still together.",
+    width: 1200,
+    height: 800,
+    label: "2018",
+  },
+  {
+    src: "/Images/9b.jpg",
+    alt: "We were sure about our future",
+    description: "We knew now a common path leads to the destination.",
+    width: 1200,
+    height: 800,
+    label: "2018",
+  },
+  {
+    src: "/Images/11.jpg",
+    alt: "Eventually, the university days ended",
+    description: "We grew together, and so did our love.",
+    width: 1200,
+    height: 800,
+    label: "2019",
+  },
+  {
+    src: "/Images/12.jpg",
+    alt: "We never counted the days",
+    description: "We just lived them.",
+    width: 1200,
+    height: 800,
+    label: "2020",
+  },
+  {
+    src: "/Images/13.jpg",
+    alt: "Our FoodyCouple days",
+    description: "Belive us or not, we were famous online for a while.",
+    width: 1200,
+    height: 800,
+    label: "2021",
+  },
+  {
+    src: "/Images/14.jpg",
+    alt: "Our exploration days began",
+    description:
+      "We had entered a new phase of the relationship, one which gets pleased by the mountains and seas.",
+    width: 1200,
+    height: 800,
+    label: "2021",
+  },
+  {
+    src: "/Images/15.jpg",
+    alt: "The buzz of the city",
+    description: "Kolkata, a major city that nourishes our love.",
+    width: 1200,
+    height: 800,
+    label: "2022",
+  },
+  {
+    src: "/Images/16.jpg",
+    alt: "Ahh, the mountains",
+    description: "Another part of the story begins here.",
+    width: 1200,
+    height: 800,
+    label: "2023",
+  },
+  {
+    src: "/Images/17.jpg",
+    alt: "We were full blown mountain-holics",
+    description: "Once we started, we could not stop.",
+    width: 1200,
+    height: 800,
+    label: "2024",
+  },
+  {
+    src: "/Images/18.jpg",
+    alt: "The Proposal",
+    description:
+      "After all the adventures, we finally decided to take the next step.",
+    width: 1200,
+    height: 800,
+    label: "2025",
+  },
+];
+
+const pwImages = Array.from({ length: 32 }, (_, i) => {
+  const num = String(i + 1).padStart(3, "0");
+
+  return {
+    src: `/pw/${num}.jpg`,
+    alt: `Memory ${num}`,
+    description: `A cherished moment number ${num}.`,
+    width: 1200,
+    height: 800,
+    label: "Pre-Wedding",
+  };
+});
+
+export default function Gallery() {
+  return (
+    <div className="container mx-auto max-w-7xl px-4">
+      <div className="max-w-3xl mx-auto mb-16 text-center">
+        <p
+          className={`${fontSans.className} text-lg md:text-xl leading-relaxed text-default-800 dark:text-gray-100`}
+        >
+          This is our journey from 2016 into the unfolding future. Fueled by a
+          quiet juvenoia, we found ourselves drawn more to the nostalgia of the
+          past than the immediacy of the present — choosing frames that echo
+          where we began rather than where we stand.
+        </p>
+      </div>
+
+      {/* Pre-Wedding Video */}
+      <section className="w-full py-10 flex flex-col items-center gap-8 mb-16">
+        <h3
+          className={`${fontCursive.className} text-4xl md:text-5xl text-center text-wedding-gold-600 dark:text-wedding-gold-400`}
+        >
+          Our Pre-Wedding Video
+        </h3>
+        <div className="w-full max-w-4xl aspect-video rounded-2xl overflow-hidden shadow-2xl border-4 border-white dark:border-white/10">
+          <iframe
+            allowFullScreen
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            className="w-full h-full"
+            referrerPolicy="strict-origin-when-cross-origin"
+            src="https://www.youtube.com/embed/a_RV8HevyBE"
+            title="... For . Life"
+          />
+        </div>
+      </section>
+
+      {/* Pre-Wedding Photos */}
+      <section className="mb-20">
+        <div className="flex items-center justify-center mb-10">
+          <h3
+            className={`${fontCursive.className} text-4xl md:text-5xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+          >
+            The Pre-Wedding
+          </h3>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {pwImages.map((img, index) => (
+            <Card
+              key={index}
+              className="w-full aspect-[4/5] border-none shadow-lg hover:shadow-xl transition-shadow duration-300"
+            >
+              <CardHeader className="absolute z-10 top-2 left-2 flex-col items-start p-0">
+                <div className="bg-black/40 backdrop-blur-md px-3 py-1 rounded-lg">
+                  <p className="text-tiny text-white/90 uppercase font-bold tracking-wider">
+                    {img.label}
+                  </p>
+                </div>
+              </CardHeader>
+
+              <Image
+                removeWrapper
+                alt={img.alt}
+                className="z-0 w-full h-full object-cover hover:scale-105 transition-transform duration-700"
+                src={img.src}
+              />
+
+              <CardFooter className="absolute bottom-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent w-full p-4 pt-12">
+                <p
+                  className={`${fontSans.className} text-white/90 text-sm font-medium`}
+                >
+                  {img.description}
+                </p>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* The Memories */}
+      <section className="mb-20">
+        <div className="flex items-center justify-center mb-10">
+          <h3
+            className={`${fontCursive.className} text-4xl md:text-5xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+          >
+            The Memories
+          </h3>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {images.map((img, index) => (
+            <Card
+              key={index}
+              className="w-full aspect-[4/5] border-none shadow-lg hover:shadow-xl transition-shadow duration-300"
+            >
+              <CardHeader className="absolute z-10 top-2 left-2 flex-col items-start p-0">
+                <div className="bg-black/40 backdrop-blur-md px-3 py-1 rounded-lg">
+                  <p className="text-tiny text-white/90 uppercase font-bold tracking-wider">
+                    {img.label}
+                  </p>
+                </div>
+              </CardHeader>
+
+              <Image
+                removeWrapper
+                alt={img.alt}
+                className="z-0 w-full h-full object-cover hover:scale-105 transition-transform duration-700"
+                src={img.src}
+              />
+
+              <CardFooter className="absolute bottom-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent w-full p-4 pt-12 text-left">
+                <div>
+                  <h4 className="text-white font-bold text-lg mb-1 drop-shadow-md">
+                    {img.alt}
+                  </h4>
+                  <p className={`${fontSans.className} text-white/80 text-sm`}>
+                    {img.description}
+                  </p>
+                </div>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Videos Section */}
+      <section className="grid md:grid-cols-2 gap-8 mb-20">
+        <div className="flex flex-col items-center gap-6">
+          <h3
+            className={`${fontCursive.className} text-3xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+          >
+            The Proposal
+          </h3>
+          <div className="w-full aspect-video rounded-xl overflow-hidden shadow-lg border border-default-200 dark:border-default-800">
+            <iframe
+              allowFullScreen
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              className="w-full h-full"
+              referrerPolicy="strict-origin-when-cross-origin"
+              src="https://www.youtube.com/embed/F1fJ9kvXvPQ"
+              title="And... I asked Her..."
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center gap-6">
+          <h3
+            className={`${fontCursive.className} text-3xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+          >
+            Our Theme Song
+          </h3>
+          <div className="w-full aspect-video rounded-xl overflow-hidden shadow-lg border border-default-200 dark:border-default-800">
+            <iframe
+              allowFullScreen
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              className="w-full h-full"
+              referrerPolicy="strict-origin-when-cross-origin"
+              src="https://www.youtube.com/embed/mzrBfpUExVM"
+              title="... For . Life"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Travel Diary */}
+      <section className="w-full pb-10">
+        <h3
+          className={`${fontCursive.className} text-4xl md:text-5xl text-center mb-10 text-wedding-gold-600 dark:text-wedding-gold-400`}
+        >
+          Our Travel Diary
+        </h3>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[
+            "https://www.youtube.com/embed/-LY7GQCjsJo",
+            "https://www.youtube.com/embed/pY8kd0KWLGo",
+            "https://www.youtube.com/embed/EoH4BgPsaRo",
+            "https://www.youtube.com/embed/8vvfKYIVdBw",
+            "https://www.youtube.com/embed/aSB7BP9rlC4",
+            "https://www.youtube.com/embed/5I9YNmre_0Q",
+            "https://www.youtube.com/embed/l_vWvQVCZdk",
+            "https://www.youtube.com/embed/qDuK8hCnvzc",
+            "https://www.youtube.com/embed/gF_q7YOFN1c",
+            "https://www.youtube.com/embed/4Yo80j89xvE",
+            "https://www.youtube.com/embed/UMkCb9lCY_M",
+            "https://www.youtube.com/embed/X-U-rSav8_s",
+            "https://www.youtube.com/embed/GUslhHpDtYs",
+          ].map((src, index) => (
+            <div
+              key={index}
+              className="aspect-video rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-default-100 dark:border-default-800"
+            >
+              <iframe
+                allowFullScreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                className="w-full h-full"
+                referrerPolicy="strict-origin-when-cross-origin"
+                src={src}
+                title={`Travel Video ${index + 1}`}
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/components/LiveVideos.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+import { fontCursive } from "@/config/fonts";
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true },
+  transition: { duration: 0.8 },
+};
+
+const LiveVideos = () => {
+  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());
+    
+    // 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()
+    });
+
+    setReceptionStatus({
+      show: startOfToday >= receptionDate,
+      isLive: startOfToday.getTime() === receptionDate.getTime()
+    });
+  }, []);
+
+  const VideoFallback = ({ title, date }: { title: string; date: string }) => (
+    <div className="group relative w-full aspect-square md:aspect-video rounded-[1.5rem] md:rounded-[2rem] overflow-hidden flex flex-col items-center justify-center p-6 md:p-8 text-center border border-wedding-pink-100 dark:border-white/10 shadow-xl transition-all duration-500 hover:shadow-2xl">
+      {/* 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 
+        className="relative z-10 flex flex-col items-center"
+        initial={{ opacity: 0, scale: 0.9 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <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
+            className="w-8 h-8 md:w-10 md:h-10 text-wedding-pink-500 animate-pulse"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+            />
+          </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`}>
+          {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>
+      </motion.div>
+    </div>
+  );
+
+  return (
+    <section className="container mx-auto px-4">
+      <motion.div {...fadeInUp}>
+        <div className="text-center mb-12">
+          <h2
+            className={`${fontCursive.className} text-5xl md:text-6xl text-wedding-gold-600 dark:text-wedding-gold-400`}
+          >
+            Live Feed
+          </h2>
+          <p className="mt-4 text-default-500 italic">
+            Witness our special moments from wherever you are
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-16 max-w-4xl mx-auto">
+          {/* Wedding Video Section */}
+          <div className="flex flex-col items-center gap-6 w-full">
+            <div className="flex flex-col items-center gap-2">
+              {weddingStatus.isLive && (
+                <span className="px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full animate-pulse uppercase tracking-wider">
+                  Live Now
+                </span>
+              )}
+              <h3
+                className={`${fontCursive.className} text-4xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+              >
+                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
+                  allowFullScreen
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  className="w-full h-full"
+                  referrerPolicy="strict-origin-when-cross-origin"
+                  src="https://www.youtube.com/embed/lKZoK6F5b3I"
+                  title="Wedding Live Stream"
+                />
+              </div>
+            ) : (
+              <VideoFallback date="January 23, 2026" title="Wedding" />
+            )}
+          </div>
+
+          {/* Reception Video Section */}
+          <div className="flex flex-col items-center gap-6 w-full">
+            <div className="flex flex-col items-center gap-2">
+              {receptionStatus.isLive && (
+                <span className="px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full animate-pulse uppercase tracking-wider">
+                  Live Now
+                </span>
+              )}
+              <h3
+                className={`${fontCursive.className} text-4xl text-center text-wedding-pink-600 dark:text-wedding-pink-400`}
+              >
+                The Reception
+              </h3>
+            </div>
+
+            {receptionStatus.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
+                  allowFullScreen
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  className="w-full h-full"
+                  referrerPolicy="strict-origin-when-cross-origin"
+                  src="https://www.youtube.com/embed/bE2fxBPD5NU"
+                  title="Reception Live Stream"
+                />
+              </div>
+            ) : (
+              <VideoFallback date="January 25, 2026" title="Reception" />
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
+
+export default LiveVideos;