@titas_mallick/wedding-site-gen 1.0.0

package/.eslintignore

@@ -0,0 +1,20 @@
+.now/*
+*.css
+.changeset
+dist
+esm/*
+public/*
+tests/*
+scripts/*
+*.config.js
+.DS_Store
+node_modules
+coverage
+.next
+build
+!.commitlintrc.cjs
+!.lintstagedrc.cjs
+!jest.config.js
+!plopfile.js
+!react-shim.js
+!tsup.config.ts

package/.eslintrc.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc.json",
+  "env": {
+    "browser": false,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@next/next/recommended"
+  ],
+  "plugins": ["react", "unused-imports", "import", "@typescript-eslint", "jsx-a11y", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-console": "warn",
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/interactive-supports-focus": "warn",
+    "prettier/prettier": "warn",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "after-used",
+        "ignoreRestSiblings": false,
+        "argsIgnorePattern": "^_.*?$"
+      }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "type",
+          "builtin",
+          "object",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always"
+      }
+    ],
+    "react/self-closing-comp": "warn",
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
+    "padding-line-between-statements": [
+      "warn",
+      {"blankLine": "always", "prev": "*", "next": "return"},
+      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      }
+    ]
+  }
+}

package/.recover

@@ -0,0 +1,9 @@
+NEXT_PUBLIC_PROJECTID=wedding-forever-titas-sukanya
+NEXT_PUBLIC_STORAGEBUCKET=wedding-forever-titas-sukanya.firebasestorage.app
+NEXT_PUBLIC_SENDERID=167546706421
+NEXT_PUBLIC_APPID=1:167546706421:web:3d30acd2d93399e38a28bc
+NEXT_PUBLIC_MEASUREMENTID=G-85Y3N7H008
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=3030842520057Cg*
+NEXT_PUBLIC_APIKEY=AIzaSyBdy2511gv-oTpNdxgTj6KBWVwzHCLsMs8
+NEXT_PUBLIC_AUTHDOMAIN=wedding-forever-titas-sukanya.firebaseapp.com
+NEXT_PUBLIC_GEMINI_API_KEY=AIzaSyD07qoS5JyslAJLKZ0xKZKCiuj5H5d_oSw

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Next UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# Titas & Sukanya's Wedding: A Modern AI-Powered Platform
+
+A comprehensive, interactive, and intelligent web application built for the wedding of Titas and Sukanya. This platform serves as a digital invitation hub, a real-time event assistant, and a collaborative memory wall.
+
+## ✨ Core Features
+
+### 🤖 AI-Powered Intelligence
+- **Wedding Concierge (Gemini 2.5-flash)**: A sitewide floating chatbot that answers guest queries about venues, schedules, and the couple's 10-year journey.
+- **Smart Bengali Translation**: Instantly translates invitation details into elegant, formal Bengali script for guests.
+- **AI Content Refinement**: An admin tool to polish rough updates into poetic, wedding-appropriate announcements.
+- **Sentiment Wall**: Automatically summarizes guest wishes into a beautiful "Collective Blessing" using AI analysis.
+
+### 📸 Interactive Guest Experience
+- **Digital Guestbook**: Allows guests to upload photos directly from their devices. Features client-side compression/resizing and an immersive lightbox gallery.
+- **Reception Playlist**: A real-time queue where guests can request songs for the reception party.
+- **Live RSVP System**: Secure confirm-attendance form with food preferences and guest counts.
+- **Travel & Stay Guide**: Dynamic, venue-aware guide with heritage highlights, hotel recommendations, and "Bengali 101."
+
+### 🎥 Broadcast & Display
+- **OBS Broadcast Overlay**: A dedicated `/updates/overlay` route designed for venue video walls. Features a real-time clock, QR codes, and a chroma-key ready green background.
+- **Live Countdown**: High-impact, animated timer counting down to the wedding on January 23, 2026.
+
+## 🚀 Tech Stack
+
+- **Framework**: Next.js (App Router)
+- **UI Components**: HeroUI (formerly NextUI)
+- **Animations**: Framer Motion
+- **Database & Auth**: Firebase (Firestore & Authentication)
+- **AI Model**: Google Gemini 2.5-flash
+- **Image Hosting**: Cloudinary (Unsigned Uploads)
+- **Analytics**: Vercel Analytics
+
+## 🛠️ Setup & Maintenance
+
+### 1. Environment Variables
+Create a `.env.local` file with the following keys:
+
+```bash
+# Firebase Client Config
+NEXT_PUBLIC_APIKEY=
+NEXT_PUBLIC_AUTHDOMAIN=
+NEXT_PUBLIC_PROJECTID=
+NEXT_PUBLIC_STORAGEBUCKET=
+NEXT_PUBLIC_SENDERID=
+NEXT_PUBLIC_APPID=
+NEXT_PUBLIC_MEASUREMENTID=
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
+
+# Google Gemini AI
+NEXT_PUBLIC_GEMINI_API_KEY=
+
+# Cloudinary Config
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
+NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET= # Should be an 'Unsigned' preset
+```
+
+### 2. Admin Access
+The email **`titas@titas.titas`** is hardcoded as the primary administrator. When logged in with this account:
+- **Guestbook**: A delete button appears on all guest photos.
+- **Song Requests**: "Mark as Played" and "Delete" controls are enabled in the queue.
+- **Updates**: Ability to post and refine messages via AI.
+
+### 3. Cloudinary Configuration
+To enable guest uploads:
+1. Create a Cloudinary account.
+2. Go to **Settings > Upload**.
+3. Create an **Unsigned Upload Preset** named `wedding`.
+4. Update the `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` in `.env.local`.
+
+### 4. OBS Overlay Setup
+- **URL**: `https://your-domain.com/updates/overlay`
+- **Recommended Res**: 1920x1080
+- **Filter**: Add a **Chroma Key** filter in OBS and select **Green** to remove the background.
+
+## 📁 Project Structure Highlights
+- `/app/invitation/[slug]`: The core personalized guest experience.
+- `/app/updates/maker`: Admin dashboard for news and announcements.
+- `/app/song-requests`: Consolidated guest form and admin queue.
+- `/app/guestbook`: Real-time masonry gallery with Cloudinary integration.
+- `/components/ConciergeBot.tsx`: The sitewide AI assistant component.
+
+## 📜 License
+This project is private and intended for the wedding of Titas Mallick & Sukanya Saha.

package/app/Neo-Lucentism/layout.tsx

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

package/app/Neo-Lucentism/page.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardBody, Divider } from "@heroui/react";
+
+import { fontCursive, fontSans, fontMono } from "@/config/fonts";
+import {
+  HeartFilledIcon,
+  SunFilledIcon,
+  MoonFilledIcon,
+} from "@/components/icons";
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true },
+  transition: { duration: 0.8 },
+};
+
+const tenets = [
+  {
+    title: "Light in the Void",
+    desc: "The universe is silent and indifferent — this is freedom. Meaning is ours to create.",
+    icon: <SunFilledIcon className="text-wedding-gold-500 w-6 h-6" />,
+  },
+  {
+    title: "Presence Over Promise",
+    desc: "There is no afterlife. The present moment is sacred enough.",
+    icon: <MoonFilledIcon className="text-indigo-400 w-6 h-6" />,
+  },
+  {
+    title: "Compassion Without Karma",
+    desc: "Kindness is not transactional. It is our natural responsibility.",
+    icon: <HeartFilledIcon className="text-wedding-pink-500 w-6 h-6" />,
+  },
+  {
+    title: "Mindfulness Without Myth",
+    desc: "We seek awareness, not awakening. Lucidity is the goal, not enlightenment.",
+    icon: <div className="w-6 h-6 rounded-full border-2 border-default-400" />,
+  },
+  {
+    title: "Reason with Reverence",
+    desc: "Science and logic illuminate reality — but so do stillness and art.",
+    icon: (
+      <div className="w-6 h-6 rotate-45 border-2 border-wedding-gold-400" />
+    ),
+  },
+  {
+    title: "Impermanence as Inspiration",
+    desc: "Nothing lasts — and that makes everything matter more.",
+    icon: <div className="w-6 h-6 border-b-2 border-default-500" />,
+  },
+];
+
+export default function NeoLucentismPage() {
+  return (
+    <div className="w-full min-h-screen pb-20 overflow-hidden">
+      {/* Hero Section */}
+      <section className="relative py-24 md:py-32 px-4 flex flex-col items-center text-center">
+        {/* Celestial background elements */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-indigo-500/10 dark:bg-indigo-900/10 rounded-full blur-[120px] pointer-events-none" />
+        <div className="absolute top-40 left-1/4 w-2 h-2 bg-wedding-gold-400 rounded-full animate-pulse" />
+        <div className="absolute bottom-40 right-1/4 w-1.5 h-1.5 bg-wedding-pink-400 rounded-full animate-pulse delay-700" />
+
+        <motion.div {...fadeInUp} className="relative z-10">
+          <h1
+            className={`${fontCursive.className} text-6xl md:text-8xl lg:text-9xl bg-gradient-to-r from-indigo-500 via-purple-500 to-wedding-gold-500 bg-clip-text text-transparent mb-8 py-4 leading-normal`}
+          >
+            Neo-Lucentism
+          </h1>
+          <p className="text-default-500 dark:text-default-400 text-xl md:text-2xl italic max-w-2xl mx-auto font-light">
+            &quot;We are lights in the void — brief, brilliant, and free.&quot;
+          </p>
+        </motion.div>
+      </section>
+
+      {/* Intro Text */}
+      <section className="container mx-auto max-w-4xl px-6 mb-24">
+        <motion.div
+          {...fadeInUp}
+          className={`${fontSans.className} text-lg md:text-xl leading-relaxed text-default-800 dark:text-white text-center border-y border-default-100 dark:border-white/10 py-12`}
+        >
+          Neo-Lucentism is a secular spiritual philosophy that embraces the
+          absence of divine purpose as an invitation to create beauty, kindness,
+          and meaning in the fleeting space between birth and death. It draws
+          from humanism, secular Buddhism, and optimistic nihilism.
+        </motion.div>
+      </section>
+
+      {/* Tenets Grid */}
+      <section className="container mx-auto max-w-6xl px-4 mb-32">
+        <h2
+          className={`${fontMono.className} text-center text-3xl mb-16 uppercase tracking-widest text-default-400`}
+        >
+          The Core Tenets
+        </h2>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {tenets.map((tenet, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 20 }}
+              transition={{ delay: idx * 0.1 }}
+              viewport={{ once: true }}
+              whileInView={{ opacity: 1, y: 0 }}
+            >
+              <Card className="h-full bg-white/50 dark:bg-white/5 backdrop-blur-md border border-default-100 dark:border-white/10 hover:-translate-y-2 transition-transform duration-500 shadow-xl">
+                <CardBody className="p-8 flex flex-col items-center text-center">
+                  <div className="mb-6 p-4 rounded-full bg-default-50 dark:bg-white/5 shadow-inner">
+                    {tenet.icon}
+                  </div>
+                  <h3
+                    className={`${fontSans.className} text-xl font-bold mb-4 text-default-900 dark:text-white`}
+                  >
+                    {idx + 1}. {tenet.title}
+                  </h3>
+                  <p className="text-default-600 dark:text-gray-300">
+                    {tenet.desc}
+                  </p>
+                </CardBody>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </section>
+
+      {/* Practices & Ethics */}
+      <section className="bg-default-50 dark:bg-white/5 py-24 px-4 relative">
+        <div className="container mx-auto max-w-5xl grid md:grid-cols-2 gap-16">
+          <motion.div {...fadeInUp}>
+            <h2
+              className={`${fontSans.className} text-3xl font-bold mb-8 text-indigo-600 dark:text-indigo-400`}
+            >
+              Lucent Practices
+            </h2>
+            <ul className="space-y-6">
+              {[
+                "Begin your day with 2 minutes of silence or intentional breath.",
+                "Reflect on impermanence — everything you experience is passing.",
+                "Read or engage with one meaningful idea per day.",
+                "Speak with clarity and compassion, even in disagreement.",
+                "Offer kindness without needing a reason or reward.",
+                "Create something — even a thought, a poem, a gesture.",
+              ].map((item, i) => (
+                <li
+                  key={i}
+                  className="flex gap-4 items-start text-default-700 dark:text-white text-lg"
+                >
+                  <span className="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 flex-shrink-0 flex items-center justify-center text-xs font-bold mt-1">
+                    {i + 1}
+                  </span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+
+          <motion.div {...fadeInUp} transition={{ delay: 0.2 }}>
+            <h2
+              className={`${fontSans.className} text-3xl font-bold mb-8 text-wedding-pink-600 dark:text-wedding-pink-400`}
+            >
+              Ethical Code
+            </h2>
+            <div className="space-y-10">
+              <div>
+                <h3 className="uppercase tracking-widest text-xs font-bold text-default-400 mb-4">
+                  What to Do
+                </h3>
+                <ul className="space-y-4">
+                  {[
+                    "Act with empathy, not ego.",
+                    "Be present with your sensations, emotions, and thoughts.",
+                    "Question beliefs — including your own — with kindness.",
+                    "Respect the silence between things. Practice mindful pauses.",
+                    "Use reason and evidence while staying humble in knowledge.",
+                  ].map((item, i) => (
+                    <li
+                      key={i}
+                      className="flex gap-3 items-center text-default-700 dark:text-white"
+                    >
+                      <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <Divider className="opacity-50" />
+              <div>
+                <h3 className="uppercase tracking-widest text-xs font-bold text-default-400 mb-4">
+                  What Not to Do
+                </h3>
+                <ul className="space-y-4">
+                  {[
+                    "Do not claim certainty over the unknowable.",
+                    "Do not seek salvation, judgment, or cosmic reward.",
+                    "Do not harm in the name of truth, logic, or freedom.",
+                    "Do not use Lucentism to divide or dominate.",
+                  ].map((item, i) => (
+                    <li
+                      key={i}
+                      className="flex gap-3 items-center text-default-700 dark:text-white"
+                    >
+                      <div className="w-1.5 h-1.5 rounded-full bg-red-500" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* How to Follow */}
+      <section className="container mx-auto max-w-4xl px-6 py-32 text-center">
+        <motion.div {...fadeInUp}>
+          <h2
+            className={`${fontSans.className} text-4xl font-bold mb-8 text-default-900 dark:text-white`}
+          >
+            Following the Light
+          </h2>
+          <p className="text-default-600 dark:text-gray-300 text-lg mb-12">
+            You do not need rituals, temples, or dogma. To follow Lucentism is
+            to live with awareness, compassion, and clarity. Connect with others
+            not as followers, but as fellow lights in the void.
+          </p>
+          <div className="inline-flex flex-wrap justify-center gap-4">
+            <div className="px-6 py-3 rounded-full bg-white dark:bg-white/5 border border-default-200 dark:border-white/10 text-default-700 dark:text-white font-medium">
+              Daily Awareness
+            </div>
+            <div className="px-6 py-3 rounded-full bg-white dark:bg-white/5 border border-default-200 dark:border-white/10 text-default-700 dark:text-white font-medium">
+              Radical Kindness
+            </div>
+            <div className="px-6 py-3 rounded-full bg-white dark:bg-white/5 border border-default-200 dark:border-white/10 text-default-700 dark:text-white font-medium">
+              Lucid Creation
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Closing Creed */}
+      <footer className="container mx-auto max-w-4xl px-6 py-20 border-t border-default-100 dark:border-white/10">
+        <motion.div
+          className="text-center"
+          initial={{ opacity: 0 }}
+          transition={{ duration: 1.5 }}
+          whileInView={{ opacity: 1 }}
+        >
+          <p
+            className={`${fontCursive.className} text-3xl md:text-4xl lg:text-5xl text-default-800 dark:text-white italic leading-relaxed`}
+          >
+            &quot;There is no plan. There is no judge. <br />
+            We are the brief awareness of the universe — and that is
+            enough.&quot;
+          </p>
+        </motion.div>
+      </footer>
+    </div>
+  );
+}

package/app/couple/layout.tsx

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

package/app/couple/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardBody, CardFooter, Image, Button } from "@heroui/react";
+import { Link } from "@heroui/link";
+
+import { fontCursive } from "@/config/fonts";
+import OurStorySection from "@/components/OurStory";
+import { HeartFilledIcon } from "@/components/icons";
+
+export default function CouplePage() {
+  return (
+    <div className="min-h-screen pb-20">
+      {/* Header */}
+      <section className="relative py-20 text-center px-4 overflow-hidden">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-wedding-pink-100/40 dark:bg-wedding-pink-900/10 rounded-full blur-[120px] pointer-events-none" />
+
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="relative z-10"
+          initial={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.8 }}
+        >
+          <h1
+            className={`${fontCursive.className} text-6xl md:text-8xl bg-gradient-to-r from-wedding-pink-600 to-wedding-gold-600 bg-clip-text text-transparent mb-6 py-4 leading-normal`}
+          >
+            The Couple
+          </h1>
+          <p className="text-default-500 dark:text-default-400 text-lg uppercase tracking-widest">
+            Two Souls, One Heart
+          </p>
+        </motion.div>
+      </section>
+
+      {/* Profile Cards */}
+      <section className="container mx-auto px-4 max-w-6xl mb-20">
+        <div className="grid md:grid-cols-2 gap-8 md:gap-16">
+          {/* Bride Profile */}
+          <motion.div
+            className="flex flex-col items-center"
+            initial={{ opacity: 0, x: -50 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            whileInView={{ opacity: 1, x: 0 }}
+          >
+            <Card className="w-full aspect-[3/4] max-w-md border-none shadow-2xl overflow-visible group">
+              <CardBody className="p-0 overflow-hidden rounded-2xl relative">
+                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
+                <Image
+                  removeWrapper
+                  alt="Sukanya"
+                  className="z-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
+                  src="/bride.jpg"
+                />
+                <div className="absolute bottom-0 left-0 right-0 p-6 z-20 text-white">
+                  <h3 className={`${fontCursive.className} text-4xl mb-1`}>
+                    Sukanya
+                  </h3>
+                  <p className="text-white/80 font-medium">The Bride</p>
+                </div>
+              </CardBody>
+              <CardFooter className="flex-col items-start pt-6 px-4 pb-4">
+                <p className="italic text-default-500 mb-4">
+                  &quot;Grace in her smile, strength in her soul.&quot;
+                </p>
+                <div className="w-full flex justify-between items-center">
+                  <p className="text-sm font-semibold text-wedding-pink-600 dark:text-wedding-pink-400">
+                    Biology Teacher
+                  </p>
+                  <Button
+                    as={Link}
+                    className="font-medium"
+                    color="danger"
+                    href="/sukanya"
+                    size="sm"
+                    variant="light"
+                  >
+                    Know More
+                  </Button>
+                </div>
+              </CardFooter>
+            </Card>
+          </motion.div>
+
+          {/* Groom Profile */}
+          <motion.div
+            className="flex flex-col items-center"
+            initial={{ opacity: 0, x: 50 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            whileInView={{ opacity: 1, x: 0 }}
+          >
+            <Card className="w-full aspect-[3/4] max-w-md border-none shadow-2xl overflow-visible group">
+              <CardBody className="p-0 overflow-hidden rounded-2xl relative">
+                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
+                <Image
+                  removeWrapper
+                  alt="Titas"
+                  className="z-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
+                  src="/groom.jpg"
+                />
+                <div className="absolute bottom-0 left-0 right-0 p-6 z-20 text-white">
+                  <h3 className={`${fontCursive.className} text-4xl mb-1`}>
+                    Titas
+                  </h3>
+                  <p className="text-white/80 font-medium">The Groom</p>
+                </div>
+              </CardBody>
+              <CardFooter className="flex-col items-start pt-6 px-4 pb-4">
+                <p className="italic text-default-500 mb-4">
+                  &quot;Steady and kind, he leads with heart.&quot;
+                </p>
+                <div className="w-full flex justify-between items-center">
+                  <p className="text-sm font-semibold text-wedding-pink-600 dark:text-wedding-pink-400">
+                    Biology Teacher
+                  </p>
+                  <Button
+                    as={Link}
+                    className="font-medium"
+                    color="danger"
+                    href="/titas"
+                    size="sm"
+                    variant="light"
+                  >
+                    Know More
+                  </Button>
+                </div>
+              </CardFooter>
+            </Card>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Our Story Section */}
+      <section className="relative">
+        <div className="absolute inset-0 bg-wedding-pink-50/50 dark:bg-wedding-pink-900/5 skew-y-3 transform origin-top-left -z-10" />
+        <OurStorySection />
+      </section>
+
+      {/* Navigation Links */}
+      <section className="container mx-auto px-4 mt-16 text-center">
+        <div className="flex flex-wrap justify-center gap-4">
+          <Button
+            as={Link}
+            className="bg-wedding-pink-100 text-wedding-pink-700 font-semibold shadow-md hover:bg-wedding-pink-200 dark:bg-wedding-pink-900/40 dark:text-wedding-pink-200"
+            href="/memories"
+            size="lg"
+            startContent={<HeartFilledIcon className="text-wedding-pink-500" />}
+          >
+            Our Memories
+          </Button>
+          <Button
+            as={Link}
+            className="bg-wedding-gold-100 text-wedding-gold-800 font-semibold shadow-md hover:bg-wedding-gold-200 dark:bg-wedding-gold-500 dark:text-black dark:hover:bg-wedding-gold-400"
+            href="/mark-the-dates"
+            size="lg"
+          >
+            Mark the Dates
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}