updated the upcoming events on the site and fixed the menu with the latest events.

app/(event)/upcoming-event/[slug]/page.jsx

@@ -0,0 +1,31 @@
+import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage";
+import { events } from "@/utility/constant.utils";
+
+const getEvent = (slug) => events.find((event) => event.slug === slug);
+
+export function generateStaticParams() {
+    return events
+        .filter((event) => event.slug)
+        .map((event) => ({
+            slug: event.slug,
+        }));
+}
+
+export async function generateMetadata({ params }) {
+    const event = getEvent(params.slug);
+
+    if (!event) {
+        return {
+            title: "Upcoming Event | Tamil Culture Waterloo",
+        };
+    }
+
+    return {
+        title: `${event.title} | Tamil Culture Waterloo`,
+        description: event.desc || `Details for ${event.title}.`,
+    };
+}
+
+export default function Page({ params }) {
+    return <UpcomingEventSinglePage slug={params.slug} />;
+}

components/events/UpcomingEventData.jsx

@@ -33,11 +33,11 @@ export default function UpcomingEventData() {
 
     const formatEventDate = (dateStr) => {
         if (!dateStr) return "";
-        const m = moment(dateStr);
+
-        if (m.isValid()) {
+        return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
-            return m.format("ddd, MMM DD, YYYY");
+            const m = moment(date, "YYYY-MM-DD", true);
-        }
+            return m.isValid() ? m.format("ddd, MMM DD, YYYY") : date;
-        return dateStr;
+        });
     };
 
     // Navigate months
@@ -129,6 +129,8 @@ export default function UpcomingEventData() {
                                 <div className="event-widget-area">
                                     {events.map((event, idx) => {
                                         const isEven = (idx + 1) % 2 === 0;
+                                        const buttonHref = event.url || event.link || "#";
+                                        const isExternalButton = /^https?:\/\//.test(buttonHref);
 
                                         return (
                                             <div key={event.id} className="mb-5">
@@ -184,7 +186,11 @@ export default function UpcomingEventData() {
 
                                                                             <div className="space24" />
                                                                             <div className="btn-area1">
-                                                                                <Link href={event.url || "#"} className="vl-btn3" target='_blank'>
+                                                                                <Link
+                                                                                    href={buttonHref}
+                                                                                    className="vl-btn3"
+                                                                                    {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                >
                                                                                     <span className="demo">{event.btnText || "Online Tickets"}</span>
                                                                                 </Link>
                                                                             </div>
@@ -228,7 +234,11 @@ export default function UpcomingEventData() {
                                                                             </p>
                                                                             <div className="space24" />
                                                                             <div className="btn-area1">
-                                                                                <Link href={event.url || "#"} className="vl-btn3" target='_blank'>
+                                                                                <Link
+                                                                                    href={buttonHref}
+                                                                                    className="vl-btn3"
+                                                                                    {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                >
                                                                                     <span className="demo">{event.btnText || "Online Tickets"}</span>
                                                                                 </Link>
                                                                             </div>

components/events/UpcomingEventSinglePage.jsx

@@ -0,0 +1,150 @@
+import Layout from "@/components/layout/Layout";
+import Link from "next/link";
+import moment from "moment";
+import { events } from "@/utility/constant.utils";
+
+const formatEventDate = (dateStr) => {
+    if (!dateStr) return "Details will be announced";
+
+    return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
+        const m = moment(date, "YYYY-MM-DD", true);
+        return m.isValid() ? m.format("MMM D, YYYY") : date;
+    });
+};
+
+export default function UpcomingEventSinglePage({ slug }) {
+    const event = events.find((item) => item.slug === slug);
+
+    if (!event) {
+        return null;
+    }
+
+    const eventDate = formatEventDate(event.date);
+    const eventLocation = event.location || "Venue will be confirmed";
+
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <div>
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: "url(/assets/img/event/upcoming-event/upcoming-events-banner.webp)",
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>{event.title}</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" />{" "}
+                                        <span>{event.title}</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="blog-details-section sp4 pb-4 mb-4">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12">
+                                <div className="blog-deatils-content heading2">
+                                    <div className="about2-header heading4 text-center">
+                                        <h2 className="text-anime-style-3">{event.title}</h2>
+                                        <div className="space16" />
+                                        <p>{event.desc || "More details will be updated soon."}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="about6-section-area sp4 pt-0">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-6 order-2 order-lg-1">
+                                <div
+                                    className="img text-center"
+                                    style={{
+                                        background: "#f8f8f8",
+                                        borderRadius: "8px",
+                                        padding: "24px",
+                                    }}
+                                >
+                                    <img
+                                        src={event.image}
+                                        alt={event.title}
+                                        style={{
+                                            width: "100%",
+                                            maxWidth: "420px",
+                                            height: "auto",
+                                            objectFit: "contain",
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                            <div className="col-lg-6 order-1 order-lg-2 mb-5">
+                                <div className="about2-header heading4">
+                                    <h3 className="text-anime-style-3">Event Details</h3>
+                                    <div className="space16" />
+                                    <div className="about6-header heading9 space-margin60 mb-4">
+                                        <ul>
+                                            <li>Date: {eventDate}</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Venue: {eventLocation}</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Time: Details will be announced</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Admission: Details will be announced</li>
+                                        </ul>
+                                        <div className="space18" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="pricing-lan-section-area sp4 pt-0">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-10 m-auto">
+                                <div className="mission">
+                                    <div className="heading2 mb-4">
+                                        <h3>Additional Information</h3>
+                                    </div>
+                                    <ul className="list-unstyled">
+                                        <li className="d-flex mb-3">
+                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                            <span>Program details will be updated as they are confirmed.</span>
+                                        </li>
+                                        <li className="d-flex mb-3">
+                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                            <span>Registration or ticket information will be added here when available.</span>
+                                        </li>
+                                        <li className="d-flex mb-3">
+                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                            <span>Please check back closer to the event date for final details.</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

components/home/HomeUpcomingEvent.tsx

@@ -30,16 +30,20 @@ export default function HomeUpcomingEvent() {
                                 <div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
                                     <div className="event-widget-area">
 
-                                        {displayEvents.map((event, idx) => (
+                                        {displayEvents.map((event, idx) => {
-                                            <div key={event.id}>
+                                            const buttonHref = event.url || event.link || "#";
-                                                {idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />}
+                                            const isExternalButton = /^https?:\/\//.test(buttonHref);
-                                                <div className="row">
+
-                                                    <div className="col-lg-12 m-auto">
+                                            return (
-                                                        <div className="event2-boxarea box1">
+                                                <div key={event.id}>
-                                                            <h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
+                                                    {idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />}
-                                                            <div className="row align-items-center">
+                                                    <div className="row">
-                                                                {/* Alternating layout */}
+                                                        <div className="col-lg-12 m-auto">
-                                                                {idx % 2 === 0 ? (
+                                                            <div className="event2-boxarea box1">
+                                                                <h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
+                                                                <div className="row align-items-center">
+                                                                    {/* Alternating layout */}
+                                                                    {idx % 2 === 0 ? (
                                                                     <>
                                                                         <div className="col-lg-5">
                                                                             <div className="img1">
@@ -82,7 +86,11 @@ export default function HomeUpcomingEvent() {
                                                                                 </p>
                                                                                 <div className="space24" />
                                                                                 <div className="btn-area1">
-                                                                                    <Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
+                                                                                    <Link
+                                                                                        href={buttonHref}
+                                                                                        className="vl-btn3"
+                                                                                        {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                    >
                                                                                         <span className="demo">{event.btnText || "purchase ticket"}</span>
                                                                                     </Link>
                                                                                 </div>
@@ -127,7 +135,11 @@ export default function HomeUpcomingEvent() {
                                                                                 </p>
                                                                                 <div className="space24" />
                                                                                 <div className="btn-area1">
-                                                                                    <Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
+                                                                                    <Link
+                                                                                        href={buttonHref}
+                                                                                        className="vl-btn3"
+                                                                                        {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                    >
                                                                                         <span className="demo">{event.btnText || "purchase ticket"}</span>
                                                                                     </Link>
                                                                                 </div>
@@ -143,11 +155,12 @@ export default function HomeUpcomingEvent() {
                                                                     </>
                                                                 )}
                                                             </div>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                            )
-                                        ))}
+                                        })}
 
                                     </div>
                                 </div>

components/layout/MobileMenu.tsx

@@ -1,9 +1,11 @@
 'use client'
 import { useState } from 'react';
 import Link from 'next/link'
+import { events } from "@/utility/constant.utils";
 
 export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 	const [isAccordion, setIsAccordion] = useState<number | null>(null);
+	const upcomingEvents = events.filter((event: any) => event.link);
 
 	const handleAccordion = (key: any) => {
 		setIsAccordion(prevState => prevState === key ? null : key)
@@ -110,11 +112,13 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 										Upcoming Event
 									</Link>
 									<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
-										<li>
+										{upcomingEvents.map((event: any) => (
-											<Link href="/upcoming-event/tamil-cultural-nite-2025" className="hash-nav">
+											<li key={event.id}>
-												Tamil Cultural Nite 2025
+												<Link href={event.link} className="hash-nav">
-											</Link>
+													{event.title}
-										</li>
+												</Link>
+											</li>
+										))}
 									</ul>
 								</li>
 								<li>

components/layout/header/Header1.tsx

@@ -4,12 +4,14 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Autoplay, Pagination } from "swiper/modules";
+import { events } from "@/utility/constant.utils";
 import "swiper/css";
 import "swiper/css/pagination";
 
 export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
 
 	const [mobileMenu, setMobileMenu] = useState(false);
+	const upcomingEvents = events.filter((event: any) => event.link);
 
 	return (
 		<>
@@ -240,11 +242,13 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 															Upcoming Event <i className="fa-solid fa-angle-down" />
 														</Link>
 														<ul className="submenu">
-															<li>
+															{upcomingEvents.map((event: any) => (
-																<Link href="/upcoming-event/tamil-cultural-nite-2025">
+																<li key={event.id}>
-																	Tamil Cultural Nite 2025
+																	<Link href={event.link}>
-																</Link>
+																		{event.title}
-															</li>
+																	</Link>
+																</li>
+															))}
 														</ul>
 													</li>
 													<li><Link href="/photo-gallery">Photos Gallery</Link></li>

utility/constant.utils.js

@@ -4727,98 +4727,94 @@ export const heritageLanguage = [
 export const events = [
   {
     id: 1,
-    date: "2026-01-24",
+    slug: "kw-multicultural-festival-2026",
-    title: "TCA Thai Pongal and Tamil Heritage Month Celebration 2026",
-    location: "Rim Park, Waterloo",
-    image: "/assets/img/pongal-2026.png",
-    url: "#",
-    btnText: "View Event"
-  },
-  {
-    id: 4,
-    date: "2026-04-12",
-    title: "AGM and Tamil New Year Celebrations",
-    location: " Laurel Hights PS, Waterloo",
-    image: "/assets/img/event/upcoming-event/tamil-new-year.webp",
-    link: "/upcoming-event/tamil-cultural-nite-2025",
-    btnText: "purchase ticket"
-  },
-  {
-    id: 1,
-    date: "2026-04-25",
-    time: "10:30 AM. Saturday",
-    title: "Earth Day Cleanup",
-    location: "RIM Park Baseball area",
-    image: "/assets/img/event/upcoming-event/earth-day-cleanup.webp",
-    url: "#",
-    btnText: "purchase ticket"
-  },
-  {
-    id: 2,
     date: "2026-06-20 and 2026-06-21",
     title: "KW Multicultural Festival",
     location: "Victoria Park, Kitchener",
     image: "/assets/img/event/upcoming-event/multicultural-festival.webp",
-    url: "#",
+    link: "/upcoming-event/kw-multicultural-festival-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/kw-multicultural-festival-2026",
+    desc: "KW Multicultural Festival will take place on Jun 20-21, 2026 at Victoria Park, Kitchener. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
-    id: 3,
+    id: 2,
+    slug: "family-picnic-2026",
     date: "2026-07-11",
     title: "Family Picnic",
     location: "Pinehurst, Ayr",
     image: "/assets/img/event/upcoming-event/family-picnic.webp",
-    url: "#",
+    link: "/upcoming-event/family-picnic-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/family-picnic-2026",
+    desc: "Family Picnic will take place on Jul 11, 2026 at Pinehurst, Ayr. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
-    id: 4,
+    id: 3,
+    slug: "sports-day-2026",
     date: "2026-07-25 and 2026-07-26",
     title: "Sports Day",
     location: "Waterloo Park",
     image: "/assets/img/event/upcoming-event/sports-day.webp",
-    url: "#",
+    link: "/upcoming-event/sports-day-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/sports-day-2026",
+    desc: "Sports Day will take place on Jul 25-26, 2026 at Waterloo Park. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
-    id: 5,
+    id: 4,
+    slug: "tree-planting-fall-2025",
     date: "Will be announced by City",
-    title: "Tree Planting (Fall 2025) ",
+    title: "Tree Planting (Fall 2025)",
     image: "/assets/img/event/upcoming-event/tree-planting.webp",
-    url: "#",
+    link: "/upcoming-event/tree-planting-fall-2025",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/tree-planting-fall-2025",
+    desc: "Tree Planting details will be announced by the City. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
     id: 5,
+    slug: "kalai-vizha-2026",
     date: "Oct 2026 (Date and Venue will be confirmed)",
     title: "Kalai Vizha",
     image: "/assets/img/event/upcoming-event/kalai-vizha.webp",
-    url: "#",
+    link: "/upcoming-event/kalai-vizha-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/kalai-vizha-2026",
+    desc: "Kalai Vizha is planned for Oct 2026. Date and venue will be confirmed soon.",
+    btnText: "Details Coming Soon"
   },
   {
     id: 6,
-    date: "2026-11-4 (Proposed)",
+    slug: "wpl-tca-deepavali-festival-2026",
+    date: "2026-11-04 (Proposed)",
     title: "WPL & TCA Deepavali Festival",
     image: "/assets/img/event/upcoming-event/deepavali-fest.webp",
-    url: "#",
+    link: "/upcoming-event/wpl-tca-deepavali-festival-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/wpl-tca-deepavali-festival-2026",
+    desc: "WPL & TCA Deepavali Festival is proposed for Nov 4, 2026. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
     id: 7,
+    slug: "year-end-celebration-2026",
     date: "2026-12-05",
     title: "Year-End Celebration",
     image: "/assets/img/event/upcoming-event/year-end-celebration.webp",
-    url: "#",
+    link: "/upcoming-event/year-end-celebration-2026",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/year-end-celebration-2026",
+    desc: "Year-End Celebration will take place on Dec 5, 2026. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   },
   {
     id: 8,
+    slug: "pongal-tamil-heritage-month-celebration-2027",
     date: "2027-01-17",
     title: "Pongal and Tamil Heritage Month Celebration",
     image: "/assets/img/event/upcoming-event/pongal.webp",
-    url: "#",
+    link: "/upcoming-event/pongal-tamil-heritage-month-celebration-2027",
-    btnText: "purchase ticket"
+    url: "/upcoming-event/pongal-tamil-heritage-month-celebration-2027",
+    desc: "Pongal and Tamil Heritage Month Celebration will take place on Jan 17, 2027. More details will be updated soon.",
+    btnText: "Details Coming Soon"
   }
 ];