@titas_mallick/wedding-site-gen 1.0.0

package/components/hero.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { Button } from "@heroui/button";
+
+import ImportantNews from "./importantNews";
+import CertificatePage from "./certificate";
+import WeddingCard from "./weddingcard";
+import { HeartFilledIcon } from "./icons";
+import Updates from "./updates";
+import CountdownTimer from "./CountdownTimer";
+import LiveVideos from "./LiveVideos";
+
+import { fontCursive, fontMono } from "@/config/fonts";
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true },
+  transition: { duration: 0.8 },
+};
+
+const Herohome = () => {
+  return (
+    <div className="flex flex-col gap-16 md:gap-32 pb-20 overflow-hidden">
+      {/* Latest Update Bar */}
+      <div className="mt-8">
+        <Updates />
+      </div>
+
+      {/* 1. Hero Banner */}
+      <section className="relative min-h-[50vh] md:min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
+        {/* Abstract Background Element */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-wedding-pink-100/30 dark:bg-wedding-pink-900/10 rounded-full blur-[100px] pointer-events-none" />
+
+        <motion.div
+          {...fadeInUp}
+          className={`${fontCursive.className} text-6xl md:text-8xl lg:text-9xl leading-tight z-10`}
+        >
+          <span className="block text-default-800 dark:text-default-900">
+            A Journey of
+          </span>
+          <span className="block mt-2 bg-gradient-to-r from-wedding-pink-400 via-purple-400 to-wedding-gold-400 bg-clip-text text-transparent drop-shadow-[0_0_15px_rgba(236,72,153,0.3)] dark:drop-shadow-[0_0_20px_rgba(236,72,153,0.5)]">
+            Forever
+          </span>
+          <span className="block text-default-800 dark:text-default-900 mt-4">
+            Begins.
+          </span>
+        </motion.div>
+
+        <motion.p
+          animate={{ opacity: 1 }}
+          className="mt-8 text-lg md:text-xl text-default-500 uppercase tracking-[0.2em] font-light"
+          initial={{ opacity: 0 }}
+          transition={{ delay: 1, duration: 1 }}
+        >
+          Titas & Sukanya
+        </motion.p>
+      </section>
+
+      {/* Countdown Section */}
+      <section className="container mx-auto px-4">
+        <motion.div {...fadeInUp}>
+          <CountdownTimer />
+        </motion.div>
+      </section>
+
+      {/* 2. The Invitation */}
+      <section className="container mx-auto px-4">
+        <motion.div {...fadeInUp}>
+          <div className="text-center mb-10">
+            <h2
+              className={`${fontCursive.className} text-4xl text-wedding-gold-600 dark:text-wedding-gold-400`}
+            >
+              The Invitation
+            </h2>
+          </div>
+          <div className="relative z-10">
+            <WeddingCard />
+            {/* <WeddingCard2 /> */}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Live Videos Section */}
+      <LiveVideos />
+
+      {/* 3. The Couple Intro */}
+      <section className="relative py-20 bg-wedding-pink-50/50 dark:bg-white/5 rounded-3xl mx-4 md:mx-0">
+        <motion.div
+          {...fadeInUp}
+          className="container mx-auto px-4 flex flex-col items-center text-center max-w-4xl"
+        >
+          <HeartFilledIcon className="text-wedding-pink-500 w-12 h-12 mb-6" />
+
+          <p
+            className={`${fontMono.className} text-lg md:text-xl leading-relaxed text-default-600 dark:text-white`}
+          >
+            From college classmates to soulmates, our journey of ten beautiful
+            years has been filled with shared laughter, quiet strength, and a
+            deep love for the mountains. Now, we are ready to write the next
+            chapter as one.
+          </p>
+
+          <Button
+            as={Link}
+            className="mt-10 bg-wedding-pink-500 text-white font-medium shadow-lg hover:bg-wedding-pink-600 hover:shadow-wedding-pink-500/30 transition-all transform hover:-translate-y-1"
+            href="/couple"
+            radius="full"
+            size="lg"
+          >
+            Read Our Story
+          </Button>
+        </motion.div>
+      </section>
+
+      {/* 4. Important News / Events */}
+      <section>
+        <ImportantNews />
+      </section>
+
+      {/* 5. Official Record */}
+      <section className="container mx-auto px-4 pb-10">
+        <motion.div
+          {...fadeInUp}
+          className="opacity-90 hover:opacity-100 transition-opacity"
+        >
+          <CertificatePage />
+        </motion.div>
+      </section>
+    </div>
+  );
+};
+
+export default Herohome;

package/components/icons.tsx

@@ -0,0 +1,283 @@
+import * as React from "react";
+
+import { IconSvgProps } from "@/types";
+
+export const Logo: React.FC<IconSvgProps> = ({
+  size = 36,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 32 32"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M16 4C9.925 4 5 8.925 5 14s4.925 10 11 10c4.25 0 7.975-2.5 9.5-6.5 1.525 4 5.25 6.5 9.5 6.5 6.075 0 11-4.925 11-10s-4.925-10-11-10c-4.25 0-7.975 2.5-9.5 6.5C23.975 6.5 20.25 4 16 4z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const DiscordIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const TwitterIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const GithubIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const MoonFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+export const HeartFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    />
+  </svg>
+);
+
+export const CalendarIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M8 2v4m8-4v4m-12 4h16m-16 4h16m-16 4h16M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+    />
+  </svg>
+);
+
+export const MapPinIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M12 21s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 7.2c0 7.3-8 11.8-8 11.8z"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+    />
+    <circle
+      cx="12"
+      cy="10"
+      fill="none"
+      r="3"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+    />
+  </svg>
+);
+
+export const ClockIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <circle
+      cx="12"
+      cy="12"
+      fill="none"
+      r="10"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+    />
+    <polyline
+      fill="none"
+      points="12 6 12 12 16 14"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+    />
+  </svg>
+);
+
+export const SearchIcon = (props: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+);

package/components/importantNews.js

@@ -0,0 +1,168 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardBody, Button, Link } from "@heroui/react";
+import { CalendarIcon, ClockIcon, MapPinIcon } from "./icons";
+import { useEffect, useState } from "react";
+
+export default function ImportantNews() {
+  const [currentDate, setCurrentDate] = useState(null);
+
+  useEffect(() => {
+    setCurrentDate(new Date());
+  }, []);
+
+  const events = {
+    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 parseDate = (dateStr) => {
+    // Remove ordinal suffixes (st, nd, rd, th) from the day
+    const cleanedDate = dateStr.replace(/(\d+)(st|nd|rd|th)/, "$1");
+    return new Date(cleanedDate);
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center font-sans my-12 px-4">
+      <motion.div
+        className="w-full max-w-6xl"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+      >
+        <Card className="relative w-full rounded-3xl overflow-hidden shadow-2xl border border-white/20 dark:border-white/10 bg-white/80 dark:bg-black/80 backdrop-blur-xl">
+          {/* Decorative background gradients */}
+          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-900 dark:via-purple-900 dark:to-indigo-900" />
+          <div className="absolute -top-24 -right-24 w-64 h-64 bg-pink-100/50 dark:bg-pink-900/20 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-blue-100/50 dark:bg-blue-900/20 rounded-full blur-3xl pointer-events-none" />
+
+          <CardBody className="p-8 md:p-12 relative z-10">
+            {/* Header */}
+            <div className="text-center mb-12">
+              <motion.span 
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                transition={{ delay: 0.2 }}
+                className="inline-block px-3 py-1 rounded-full bg-pink-50 dark:bg-pink-900/30 text-pink-600 dark:text-pink-300 text-xs font-bold tracking-widest uppercase mb-3 border border-pink-100 dark:border-pink-800"
+              >
+                Save The Dates
+              </motion.span>
+              <h1 className="text-3xl md:text-5xl font-bold font-serif bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-4">
+                Wedding Events
+              </h1>
+              <p className="text-gray-500 dark:text-gray-400 text-sm md:text-base max-w-2xl mx-auto italic leading-relaxed">
+                &quot;We invite you to share in our joy at the following events as we begin our new journey together.&quot;
+              </p>
+            </div>
+
+            {/* Events Grid */}
+            <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
+              {Object.entries(events).map(([key, event], index) => {
+                const eventDate = parseDate(event.date);
+                // Set time to end of day to consider event active today
+                eventDate.setHours(23, 59, 59, 999);
+                const isPast = currentDate ? currentDate > eventDate : false;
+
+                return (
+                <motion.div
+                  key={key}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: index * 0.1 + 0.3 }}
+                  className={`group relative flex flex-col items-center bg-white dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 
+                    ${isPast 
+                      ? "opacity-60 grayscale hover:opacity-80 hover:grayscale-0" 
+                      : "hover:shadow-xl hover:shadow-pink-500/10 dark:hover:shadow-pink-500/5 hover:-translate-y-1"
+                    }`}
+                >
+                  {isPast && (
+                    <div className="absolute top-4 right-4 bg-gray-100 dark:bg-gray-800 text-gray-500 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider border border-gray-200 dark:border-gray-700">
+                      Completed
+                    </div>
+                  )}
+
+                  <div className={`absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-pink-200 dark:via-pink-800 to-transparent transition-opacity ${isPast ? 'opacity-0' : 'opacity-0 group-hover:opacity-100'}`} />
+                  
+                  <h3 className="font-serif font-bold text-xl text-gray-800 dark:text-gray-100 mb-6 text-center">
+                    {event.title}
+                  </h3>
+
+                  <div className="w-full space-y-4 flex-grow">
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <CalendarIcon className="w-5 h-5 text-pink-500 mt-0.5 shrink-0" />
+                      <div>
+                        <p className="font-semibold">{event.date}</p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <ClockIcon className="w-5 h-5 text-purple-500 mt-0.5 shrink-0" />
+                      <p>{event.time}</p>
+                    </div>
+
+                    <div className="flex items-start gap-3 text-gray-600 dark:text-gray-300">
+                      <MapPinIcon className="w-5 h-5 text-indigo-500 mt-0.5 shrink-0" />
+                      <div>
+                        <p className="font-medium">{event.venue}</p>
+                        <p className="text-xs text-gray-400 mt-0.5">{event.direction}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Button
+                    as={Link}
+                    href={event.mapHref}
+                    isExternal
+                    className={`mt-8 w-full font-medium shadow-sm border
+                      ${isPast 
+                        ? "bg-gray-100 dark:bg-gray-800 text-gray-400 border-gray-200 dark:border-gray-700 cursor-not-allowed" 
+                        : "bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/40 dark:hover:to-purple-900/40 text-pink-700 dark:text-pink-300 border-pink-100 dark:border-pink-800/50"
+                      }`}
+                    variant="flat"
+                    isDisabled={isPast}
+                    endContent={
+                      <MapPinIcon className="w-4 h-4 opacity-50" />
+                    }
+                  >
+                    {isPast ? "Event Concluded" : "View Map"}
+                  </Button>
+                </motion.div>
+              );})}
+            </div>
+          </CardBody>
+        </Card>
+      </motion.div>
+    </div>
+  );
+}
+
+
+

package/components/navbar.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Navbar as HeroUINavbar,
+  NavbarContent,
+  NavbarMenu,
+  NavbarMenuToggle,
+  NavbarBrand,
+  NavbarItem,
+  NavbarMenuItem,
+} from "@heroui/navbar";
+import { Button } from "@heroui/button";
+import { Link } from "@heroui/link";
+import { link as linkStyles } from "@heroui/theme";
+import NextLink from "next/link";
+import clsx from "clsx";
+import { useState } from "react";
+
+import { siteConfig } from "@/config/site";
+import { ThemeSwitch } from "@/components/theme-switch";
+import { HeartFilledIcon } from "@/components/icons";
+import { fontCursive } from "@/config/fonts";
+
+export const Navbar = () => {
+  const [, setIsMenuOpen] = useState(false);
+
+  return (
+    <HeroUINavbar
+      className="bg-wedding-cream/80 dark:bg-black/80 backdrop-blur-md"
+      maxWidth="xl"
+      position="sticky"
+      onMenuOpenChange={setIsMenuOpen}
+    >
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+        <NavbarBrand as="li" className="gap-3 max-w-fit">
+          <NextLink className="flex justify-start items-center gap-1" href="/">
+            <p
+              className={`${fontCursive.className} font-bold text-2xl md:text-3xl text-wedding-pink-600 dark:text-wedding-pink-400`}
+            >
+              T & S
+            </p>
+          </NextLink>
+        </NavbarBrand>
+        <ul className="hidden lg:flex gap-4 justify-start ml-4">
+          {siteConfig.navItems.map((item) => (
+            <NavbarItem key={item.href}>
+              <NextLink
+                className={clsx(
+                  linkStyles({ color: "foreground" }),
+                  "data-[active=true]:text-wedding-pink-500 data-[active=true]:font-medium hover:text-wedding-pink-500 transition-colors",
+                )}
+                color="foreground"
+                href={item.href}
+              >
+                {item.label}
+              </NextLink>
+            </NavbarItem>
+          ))}
+        </ul>
+      </NavbarContent>
+
+      <NavbarContent
+        className="hidden sm:flex basis-1/5 sm:basis-full"
+        justify="end"
+      >
+        <NavbarItem className="hidden sm:flex gap-2">
+          <ThemeSwitch />
+        </NavbarItem>
+        <NavbarItem className="hidden md:flex">
+          <Button
+            as={Link}
+            className="text-sm font-normal bg-wedding-pink-100 text-wedding-pink-700 hover:bg-wedding-pink-200 dark:bg-wedding-pink-900/30 dark:text-wedding-pink-200 dark:hover:bg-wedding-pink-900/50"
+            href={"/sagun"}
+            startContent={<HeartFilledIcon className="text-wedding-pink-500" />}
+            variant="flat"
+          >
+            Send Wishes
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
+        <ThemeSwitch />
+        <NavbarMenuToggle />
+      </NavbarContent>
+
+      <NavbarMenu>
+        <div className="mx-4 mt-8 flex flex-col gap-4">
+          {siteConfig.navMenuItems.map((item, index) => (
+            <NavbarMenuItem key={`${item}-${index}`}>
+              <Link
+                className="w-full text-lg py-2 hover:text-wedding-pink-500"
+                color="foreground"
+                href={item.href}
+                size="lg"
+                onPress={() => setIsMenuOpen(false)}
+              >
+                {item.label}
+              </Link>
+            </NavbarMenuItem>
+          ))}
+        </div>
+      </NavbarMenu>
+    </HeroUINavbar>
+  );
+};