tamil school pages added

app/(event)/photo-gallery/page copy.jsx

@@ -0,0 +1,93 @@
+'use client';
+import Countdown from '@/components/elements/Countdown';
+import Layout from "@/components/layout/Layout";
+import { memoryData } from '@/utility/constant.utils';
+import Link from "next/link";
+import { useState } from 'react';
+
+export default function Memories() {
+    const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
+    const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year
+
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <div>
+                {/* Header Section */}
+                <div
+                    className="inner-page-header"
+                    style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Recent Memories</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Memory Section */}
+                <div className="memory-inner-section-area blog-details-section sp4">
+                    <div className="container">
+                        <div className="row gx-5">
+                            {/* Left Column: Year Tabs */}
+                            <div className="col-lg-3 mb-4 mb-lg-0">
+                                <div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
+                                    <div className="blog-categories">
+                                        <ul className="list-unstyled">
+                                            {years.map((year) => (
+                                                <li key={year}>
+                                                    <button
+                                                        onClick={() => setSelectedYear(year)}
+                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
+                                                    >
+                                                        Years {year}
+                                                    </button>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Right Column: Gallery */}
+                            <div className="col-lg-9">
+                                {/* <div className="heading12 mb-4 border-bottom pb-2">
+                                    <h2 className="text-center">📷 Memories of {selectedYear}</h2>
+                                </div> */}
+
+                                <div className="row justify-content-start">
+                                    {memoryData[selectedYear]?.map((event, idx) => (
+                                        <div className="col-lg-4 col-md-6 mb-4" key={idx}>
+                                            <div className="memory3-boxarea">
+                                                <div className="img1">
+                                                    <img src={event.image} alt={event.title} />
+                                                </div>
+                                                <div className="content-area">
+                                                    <p>{event.date}</p>
+                                                    <div className="space12" />
+                                                    <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
+                                                    <div className="plus">
+                                                        <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
+                                                            <i className="fa-solid fa-plus" />
+                                                        </Link>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

app/(event)/photo-gallery/page.jsx

@@ -1,93 +1,10 @@
-'use client';
+export const metadata = {
-import Countdown from '@/components/elements/Countdown';
+  title: "Community Photo Gallery | View Our Memories",
-import Layout from "@/components/layout/Layout";
+  description: "Browse photos from Tamil cultural events and community programs in Waterloo Region.",
-import { memoryData } from '@/utility/constant.utils';
+};
-import Link from "next/link";
+
-import { useState } from 'react';
+import PhotoGallerySection from "@/components/events/PhotoGallerySection";
 
 export default function Memories() {
-    const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
+  return <PhotoGallerySection />;
-    const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year
-
-    return (
-        <Layout headerStyle={1} footerStyle={1}>
-            <div>
-                {/* Header Section */}
-                <div
-                    className="inner-page-header"
-                    style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
-                >
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-6 m-auto">
-                                <div className="heading1 text-center">
-                                    <h1>Recent Memories</h1>
-                                    <div className="space20" />
-                                    <Link href="/">
-                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
-                                    </Link>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Memory Section */}
-                <div className="memory-inner-section-area blog-details-section sp4">
-                    <div className="container">
-                        <div className="row gx-5">
-                            {/* Left Column: Year Tabs */}
-                            <div className="col-lg-3 mb-4 mb-lg-0">
-                                <div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
-                                    <div className="blog-categories">
-                                        <ul className="list-unstyled">
-                                            {years.map((year) => (
-                                                <li key={year}>
-                                                    <button
-                                                        onClick={() => setSelectedYear(year)}
-                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
-                                                    >
-                                                        Years {year}
-                                                    </button>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Right Column: Gallery */}
-                            <div className="col-lg-9">
-                                {/* <div className="heading12 mb-4 border-bottom pb-2">
-                                    <h2 className="text-center">📷 Memories of {selectedYear}</h2>
-                                </div> */}
-
-                                <div className="row justify-content-start">
-                                    {memoryData[selectedYear]?.map((event, idx) => (
-                                        <div className="col-lg-4 col-md-6 mb-4" key={idx}>
-                                            <div className="memory3-boxarea">
-                                                <div className="img1">
-                                                    <img src={event.image} alt={event.title} />
-                                                </div>
-                                                <div className="content-area">
-                                                    <p>{event.date}</p>
-                                                    <div className="space12" />
-                                                    <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
-                                                    <div className="plus">
-                                                        <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
-                                                            <i className="fa-solid fa-plus" />
-                                                        </Link>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
 }

app/(event)/photo-gallery/single-gallery/page.tsx

@@ -1,36 +1,51 @@
 'use client';
 
 import Layout from '@/components/layout/Layout';
-import { memoryData } from '@/utility/constant.utils';
+import axios from 'axios';
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-interface EventData {
+interface EventImage {
-    image: string;
+  id: string;
-    title: string;
+  src: string;
-    desc?: string;
+  title?: string;
-    date: string;
+  description?: string;
-    slug: string;
-    link?: string;
-    gallery?: string[];
 }
 
 export default function SingleGallery() {
   const searchParams = useSearchParams();
-    const slug = searchParams.get('slug');
+  const eventId = searchParams.get('id');
+  const router = useRouter();
 
-    // Flatten all events into a single array
+  const [eventImages, setEventImages] = useState<EventImage[]>([]);
-    const allEvents: EventData[] = Object.values(memoryData).flat();
+  const [open, setOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-    // Match event by slug
+  const getEventGallery = useCallback(async () => {
-    const matchedEvent = allEvents.find(event => event.slug === slug);
+    try {
-    const galleryImages: string[] = matchedEvent?.gallery || [];
+      const res = await axios.get(
+        `https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
+      );
+      const formatted = res.data?.data?.map((img: any) => ({
+        id: img.id,
+        src: img.imageurl,
+        title: img?.title || '',
+        description: img?.description || '',
+      }));
+      setEventImages(formatted || []);
+    } catch (error) {
+      console.log("Error fetching event images", error);
+    }
+  }, [eventId]);
 
-    const [open, setOpen] = useState<boolean>(false);
+  useEffect(() => {
-    const [currentIndex, setCurrentIndex] = useState<number>(0);
+    if (eventId) {
+      getEventGallery();
+    }
+  }, [eventId, getEventGallery]);
 
   const handleImageClick = (index: number) => {
     setCurrentIndex(index);
@@ -38,17 +53,16 @@ export default function SingleGallery() {
   };
 
   return (
-        <>
     <Layout headerStyle={1} footerStyle={1}>
       {/* Header Section */}
       <div
         className="inner-page-header"
-                    style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
+        style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery.webp)' }}
       >
         <div className="container">
           <div className="row">
-                            <div className="col-lg-6 m-auto">
+            <div className="col-lg-12 m-auto">
-                                <div className="heading1 text-center">
+              <div className="heading1">
                 <h1>Recent Memories</h1>
                 <div className="space20" />
                 <Link href="/">
@@ -59,15 +73,21 @@ export default function SingleGallery() {
           </div>
         </div>
       </div>
+
+      {/* Gallery Section */}
       <div className="bloginner-section-area sp4">
         <div className="container">
           <div className="row">
             <div className="col-lg-12 m-auto">
-                                <div className="event2-header heading5 space-margin60">
+              <div className="event2-header heading5 space-margin60 d-flex justify-content-between align-items-center">
-                                    <h2 className="text-anime-style-3">
+                <h2 className="text-anime-style-3 mb-0">Photos Gallery</h2>
-                                        {matchedEvent?.title || "Photos Gallery"}
+                <button
-                                        <p>{matchedEvent?.desc}</p>
+                  onClick={() => router.back()}
-                                    </h2>
+                  className="vl-btn3"
+                  style={{ padding: '10px 16px' }}
+                >
+                  Back
+                </button>
               </div>
             </div>
           </div>
@@ -75,9 +95,9 @@ export default function SingleGallery() {
           <div className="row gx-5">
             <div className="col-lg-12">
               <div className="row mt-4">
-                                    {galleryImages.map((src: string, index: number) => (
+                {eventImages.map((image, index) => (
                   <div
-                                            key={index}
+                    key={image.id}
                     className="col-lg-3 col-md-6 mb-4"
                     data-aos="zoom-in"
                     data-aos-duration={1000}
@@ -89,8 +109,8 @@ export default function SingleGallery() {
                         onClick={() => handleImageClick(index)}
                       >
                         <img
-                                                        src={src}
+                          src={image.src}
-                                                        alt={`gallery-${index}`}
+                          alt={image.title || `gallery-${index}`}
                           loading="lazy"
                           style={{ width: '100%', height: 'auto' }}
                         />
@@ -99,7 +119,7 @@ export default function SingleGallery() {
                   </div>
                 ))}
 
-                                    {galleryImages.length === 0 && (
+                {eventImages.length === 0 && (
                   <div className="col-12 text-center mt-5">
                     <p className="text-muted">No images found for this event.</p>
                   </div>
@@ -110,13 +130,13 @@ export default function SingleGallery() {
         </div>
       </div>
 
+      {/* Lightbox */}
       <Lightbox
         open={open}
         close={() => setOpen(false)}
         index={currentIndex}
-                    slides={galleryImages.map((src) => ({ src }))}
+        slides={eventImages.map((img) => ({ src: img.src, title: img.title }))}
       />
     </Layout>
-        </>
   );
 }

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} />;
+}

app/(event)/upcoming-event/page.jsx

@@ -1,9 +1,10 @@
-'use client';
+export const metadata = {
-import Countdown from '@/components/elements/Countdown';
+    title: "Upcoming Community Events | Join Us",
+    description: "Stay updated on upcoming Tamil cultural events and community gatherings in Waterloo, Ontario.",
+};
+
 import Layout from "@/components/layout/Layout";
-import { memoryData } from '@/utility/constant.utils';
 import Link from "next/link";
-import { useState } from 'react';
 import UpcomingEventData from '../../../components/events/UpcomingEventData';
 
 export default function Memories() {
@@ -18,8 +19,8 @@ export default function Memories() {
                 >
                     <div className="container">
                         <div className="row">
-                            <div className="col-lg-6 m-auto">
+                            <div className="col-lg-12 m-auto">
-                                <div className="heading1 text-center">
+                                <div className="heading1">
                                     <h1>Upcoming Events</h1>
                                     <div className="space20" />
                                     <Link href="/">

app/(event)/upcoming-event/tamil-cultural-nite-2025/page.jsx

@@ -0,0 +1,238 @@
+export const metadata = {
+    title: "Tamil Cultural Nite 2025 | Book & Participate",
+    description: "Join Tamil Cultural Nite 2025 in Waterloo for performances, music, and community celebration.",
+};
+
+import Layout from "@/components/layout/Layout"
+import PageLoader from "@/components/common-component/PageLoader";
+import Link from "next/link"
+import { Suspense } from "react";
+
+const Page = () => {
+    return (
+        <>
+            <div>
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: `url('/assets/img/nite/tami-cultural-banner.webp')`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Tamil Cultural Nite 2025</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" />{" "}
+                                        <span>Tamil Cultural Nite 2025</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/*===== RECIPE DETAILS START =====*/}
+                <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">
+
+                                    {/* Banner / Poster Image */}
+                                    <div className="img1">
+                                        <img
+                                            src="/assets/img/nite/1526.webp"
+                                            alt="Tamil Cultural Nite 2025 Banner"
+                                            className="img-fluid rounded"
+                                        />
+                                    </div>
+
+                                    <div className="space32" />
+                                    <div className="about2-header heading4 text-center">
+                                        <div>
+                                            <span className="texture">20th Annual</span>
+                                        </div>
+                                        <h2 className="text-anime-style-3">Tamil Cultural Nite 2025</h2>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div className="about6-section-area sp4 pt-0">
+                    <div className="container">
+
+                        <div className="row">
+
+                            <div className="col-lg-6 order-2 order-lg-1">
+                                <div className="img">
+                                    <img src="/assets/img/nite/tamil-cultural-night-1.webp" alt="" />
+                                </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">Tamil Cultural Association of Waterloo Region proudly presents</h3>
+
+                                    <div className="space16" />
+
+                                    <div className="about6-header heading9 mb-3">
+                                        {/* <span className="texture">20th Annual</span> */}
+                                        <p className="textured">Tamil Cultural Nite Performing Arts festival</p>
+                                        <div className="space18" />
+                                    </div>
+                                    <div className="about6-header heading9 space-margin60 mb-4">
+                                        <ul>
+                                            <li>Date: Saturday, October 25, 2025</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Time: 6:00 pm to 10:00 p.m</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Venue: Humanities Theater, University of Waterloo
+                                                200 University Avenue, Waterloo, ON.</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        <ul>
+                                            <li>Tickets: $20, 15, 10</li>
+                                        </ul>
+                                        <div className="space18" />
+                                    </div>
+                                    <div className="btn-area1">
+                                        <Link
+                                            href="https://secure1.tixhub.com/waterloo/online/b_otix.asp?cboPerformances=877&cboEvent=422&width=1903"
+                                            legacyBehavior
+                                        >
+                                            <a className="vl-btn2" target="_blank" rel="noopener noreferrer">
+                                                <span className="demo">
+                                                    Book Now <i className="fa-solid fa-arrow-right" />
+                                                </span>
+                                            </a>
+                                        </Link>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="pricing-lan-section-area sp4 pt-0">
+                    <div className="container">
+                        <div className="about6-section-area">
+                            <div className="container">
+                                <div className="row align-items-center">
+
+                                    <div className="col-lg-6 order-1 order-lg-2 mb-5">
+                                        <div className="row">
+                                            <div className="col-lg-12 m-auto">
+                                                <div className="heading2 mb-4">
+                                                    <h3 >
+                                                        Humanities Theater Box office information:
+                                                    </h3>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div className="mission">
+                                            {/* <div className="space16" /> */}
+                                            <ul className="list-unstyled">
+                                                <li className="d-flex mb-3">
+                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                                    <span>
+                                                        Tickets can be purchased online, by phone (519-888-4908), or in person. There is an online convenience fee of $2.26/per ticket or a phone convenience fee of $1.13 per ticket (on top of the final price).
+                                                    </span>
+                                                </li>
+                                                <li className="d-flex mb-3">
+                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                                    <span>
+                                                        The Box Office accepts Visa, MasterCard, American Express, Visa Debit, MasterCard Debit, and cash. The same methods of payment are accepted online except for cash.
+                                                    </span>
+                                                </li>
+                                                <li className="d-flex mb-3">
+                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                                    <span>
+                                                        Babes in arms 18 months and under do not require a ticket. No strollers or infant car seat carriers allowed in the theatre. They can be stored in coat check room if needed.
+                                                    </span>
+                                                </li>
+                                                <li className="d-flex mb-3">
+                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                                    <span>
+                                                        Box office is open Monday to Friday from 1pm until 5 pm.
+                                                    </span>
+                                                </li>
+                                                <li className="d-flex mb-3">
+                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
+                                                    <span>
+                                                        For accessible seating please contact the box office.
+                                                    </span>
+                                                </li>
+                                            </ul>
+                                            {/* <div className="about6-header heading9 space-margin60 mb-4">
+                                                <p className="texture">More info: </p>
+                                                <ul>
+                                                    <li> Shyamala Ram: 519-897-6975</li>
+                                                </ul>
+                                                <div className="space16" />
+                                                <ul>
+                                                    <li>Shanthi Durai: 519-589-9641
+                                                    </li>
+                                                </ul>
+                                                <div className="space18" />
+
+                                            </div> */}
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6 order-2 order-lg-2">
+                                        <div className="img">
+                                            <img src="/assets/img/nite/tamil-cultural-night-2.webp" alt="" />
+                                        </div>
+
+
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div className="col-lg-12 text-center">
+                    <div className="img">
+                        <img src="/assets/img/nite/welcome.png" alt="" />
+                    </div>
+
+
+
+                </div >
+
+            </div>
+        </>
+    );
+};
+
+const RecipePage = () => {
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <Suspense fallback={<PageLoader />}>
+                <Page />
+            </Suspense>
+        </Layout>
+    );
+};
+
+export default RecipePage;

app/about/association/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil Cultural Association | Get to Know Us",
+	description: "Discover our association, leadership structure, and how we support Tamil culture and unity in Waterloo, Ontario.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -16,8 +22,8 @@ export default function Association() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/association-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Association</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>

app/about/committee/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Meet Our Committee Members | Community Leaders",
+  description: "Meet the dedicated committee members leading Tamil Culture Waterloo and organizing community initiatives.",
+};
+
 import Layout from "@/components/layout/Layout";
 import Section1 from "@/components/about/committee/Section1"; // adjust path if needed
 
@@ -8,8 +14,8 @@ export default function CommitteePage() {
       <div className="inner-page-header" style={{ backgroundImage: "url(/assets/img/about/banner/committee-banner.webp)" }}>
         <div className="container">
           <div className="row">
-            <div className="col-lg-5 m-auto">
+            <div className="col-lg-12 m-auto">
-              <div className="heading1 text-center">
+              <div className="heading1">
                 <h1>Committee</h1>
                 <div className="space20" />
                 <a href="/">Home <i className="fa-solid fa-angle-right" /> <span>Committee</span></a>

app/about/constitution/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Constitution & Governance | Read Our Principles",
+	description: "Read the constitution outlining governance, values, and operational principles of our Tamil cultural association.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function Constitution() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/constitution-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-									<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-										<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Constitution</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>

app/about/mission/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Our Mission & Vision | Discover Our Purpose",
+	description: "Explore our mission and vision to preserve Tamil culture and strengthen community connections in Waterloo Region.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function Mission() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/mission-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-									<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-										<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Mission</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>

app/about/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "About Tamil Culture Waterloo | Learn Our Story",
+	description: "Learn about Tamil Culture Waterloo, our history, values, and role in serving the Tamil community in Waterloo Region.",
+};
+
 import CountUp from 'react-countup'
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -15,8 +21,8 @@ export default function About() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/about-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>About Us</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About Us</span></Link>

app/blog-single/page.tsx

@@ -21,8 +21,8 @@ export default function BlogSingle() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg14.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Blog Details</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Blog Details</span></Link>

app/blog/page.tsx

@@ -13,8 +13,8 @@ export default function Blog() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg13.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Our Blog</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Our Blog</span></Link>

app/community/badminton-club/BadmintonClubClient.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import Layout from '@/components/layout/Layout';
+import { communitySubmenuData } from '@/utility/constant.utils';
+import Link from 'next/link';
+import { useState } from 'react';
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+export default function BadmintonClubClient() {
+
+    const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 9 && +img.id <= 12);
+
+    const [open, setOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <>
+            <Layout headerStyle={1} footerStyle={1}>
+
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: 'url(/assets/img/community/badminton/badminton-club-banner.webp)',
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Badminton Club</h1>
+                                    <div className="space20" />
+                                    <Link href="/" className="text-white text-decoration-none">
+                                        Home <i className="fa-solid fa-angle-right mx-2" />
+                                        <span>Badminton Club</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Description Section */}
+                <div className="bloginner-section-area sp4">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="event2-header heading5 space-margin60">
+                                    <h2 className="text-anime-style-3">
+                                        Badminton Club Cambridge
+                                    </h2>
+                                    <div className="space24" />
+                                    <p>
+                                        Waterloo region's Tamil Badminton Club was started in 2019. It is held on Friday at 6:30 – 9:30pm, William G Davis Public School, 530 Langs Drive, Cambridge, Ontario. Membership is open to members of Tamil Cultural Association of Waterloo Region only.
+                                    </p>
+                                    <div className="space24" />
+                                    <p className='mb-2'><strong>2022/23 Badminton Membership Fee:</strong></p>
+                                    <p>Single $106.00</p>
+                                    <p>Family $157.00</p>
+                                    <div className="space24" />
+                                    <p>
+                                        A Badminton club member has to obtain TCA membership prior to joining the club. Membership includes Court fee and Insurance. Fall/Winter season only. (Sep.23/22 To May 26/23)
+                                    </p>
+                                    <p>
+                                        The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.
+                                        More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="row gx-4 gy-4 mt-4">
+                            {galleryImages.length > 0 ? (
+                                galleryImages.map((img: any, i: number) => (
+                                    <div
+                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
+                                        key={img.id}
+                                        onClick={() => {
+                                            setIndex(i);
+                                            setOpen(true);
+                                        }}
+                                        style={{ cursor: 'pointer' }}
+                                    >
+                                        <div className="memory-boxarea rounded overflow-hidden h-100">
+                                            <div
+                                                className="image"
+                                                data-aos="zoom-in"
+                                                data-aos-duration={1000}
+                                                style={{ borderRadius: 8 }}
+                                            >
+                                                <img
+                                                    src={img.src}
+                                                    alt={img.alt}
+                                                    className="img-fluid w-100"
+                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="col-12 text-center mt-5">
+                                    <p className="text-muted">No images found for this event.</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Lightbox Viewer */}
+                <Lightbox
+                    open={open}
+                    close={() => setOpen(false)}
+                    slides={galleryImages}
+                    index={index}
+                />
+            </Layout>
+        </>
+    );
+}

app/community/badminton-club/page.tsx

@@ -1,123 +1,12 @@
-'use client';
+import type { Metadata } from "next"
 
-import Layout from '@/components/layout/Layout';
+export const metadata: Metadata = {
-import { communitySubmenuData } from '@/utility/constant.utils';
+    title: "Tamil Badminton Club | Play With Us",
-import Link from 'next/link';
+    description: "Play, train, and compete with the Tamil Badminton Club in Waterloo Region.",
-import { useState } from 'react';
+};
-import Lightbox from "yet-another-react-lightbox";
-import "yet-another-react-lightbox/styles.css";
 
-export default function CricketClub() {
+import BadmintonClubClient from "./BadmintonClubClient";
 
-    const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12);
+export default function BadmintonClubPage() {
-
+    return <BadmintonClubClient />;
-    const [open, setOpen] = useState(false);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <>
-            <Layout headerStyle={1} footerStyle={1}>
-
-                <div
-                    className="inner-page-header"
-                    style={{
-                        backgroundImage: 'url(/assets/img/community/badminton/badminton-club-banner.webp)',
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center',
-                        padding: '100px 0',
-                    }}
-                >
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-6 m-auto">
-                                <div className="heading1 text-center">
-                                    <h1>Badminton Club</h1>
-                                    <div className="space20" />
-                                    <Link href="/" className="text-white text-decoration-none">
-                                        Home <i className="fa-solid fa-angle-right mx-2" />
-                                        <span>Badminton Club</span>
-                                    </Link>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Description Section */}
-                <div className="bloginner-section-area sp4">
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-12 m-auto">
-                                <div className="event2-header heading5 space-margin60">
-                                    <h2 className="text-anime-style-3">
-                                        Badminton Club Cambridge
-                                    </h2>
-                                    <div className="space24" />
-                                    <p>
-                                        Waterloo region’s Tamil Badminton Club was started in 2019. It is held on Friday at 6:30 – 9:30pm, William G Davis Public School, 530 Langs Drive, Cambridge, Ontario. Membership is open to members of Tamil Cultural Association of Waterloo Region only.
-                                    </p>
-                                    <div className="space24" />
-                                    <p className='mb-2'><strong>2022/23 Badminton Membership Fee:</strong></p>
-                                    <p>Single $106.00</p>
-                                    <p>Family $157.00</p>
-                                    <div className="space24" />
-                                    <p>
-                                        A Badminton club member has to obtain TCA membership prior to joining the club. Membership includes Court fee and Insurance. Fall/Winter season only. (Sep.23/22 To May 26/23)
-                                    </p>
-                                    <p>
-                                        The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.
-                                        More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="row gx-4 gy-4 mt-4">
-                            {galleryImages.length > 0 ? (
-                                galleryImages.map((img, i) => (
-                                    <div
-                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
-                                        key={img.id}
-                                        onClick={() => {
-                                            setIndex(i);
-                                            setOpen(true);
-                                        }}
-                                        style={{ cursor: 'pointer' }}
-                                    >
-                                        <div className="memory-boxarea rounded overflow-hidden h-100">
-                                            <div
-                                                className="image"
-                                                data-aos="zoom-in"
-                                                data-aos-duration={1000}
-                                                style={{ borderRadius: 8 }}
-                                            >
-                                                <img
-                                                    src={img.src}
-                                                    alt={img.alt}
-                                                    className="img-fluid w-100"
-                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))
-                            ) : (
-                                <div className="col-12 text-center mt-5">
-                                    <p className="text-muted">No images found for this event.</p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-
-                {/* Lightbox Viewer */}
-                <Lightbox
-                    open={open}
-                    close={() => setOpen(false)}
-                    slides={galleryImages}
-                    index={index}
-                />
-            </Layout>
-        </>
-    );
 }

app/community/business-directory/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil Business Directory | Support Local Businesses",
+	description: "Explore Tamil-owned businesses and support local entrepreneurs in Waterloo.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function BusinessDirectory() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/business-directory-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-									<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-										<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Business Directory</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>

app/community/cambridge-tamil-school/TamilSchoolClient.tsx

@@ -7,9 +7,9 @@ import { useState } from 'react';
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-export default function CricketClub() {
+export default function TamilSchoolClient() {
 
-    const galleryImages = communitySubmenuData.filter(img => +img.id >= 13 && +img.id <= 20);
+    const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 13 && +img.id <= 20);
 
     const [open, setOpen] = useState(false);
     const [index, setIndex] = useState(0);
@@ -21,20 +21,17 @@ export default function CricketClub() {
                     className="inner-page-header"
                     style={{
                         backgroundImage: 'url(/assets/img/community/tamil-school/school-banner.webp)',
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center',
-                        padding: '100px 0',
                     }}
                 >
                     <div className="container">
                         <div className="row">
-                            <div className="col-lg-6 m-auto">
+                            <div className="col-lg-12 m-auto">
-                                <div className="heading1 text-center">
+                                <div className="heading1">
-                                    <h1>Tamil School</h1>
+                                    <h1>Cambridge Tamil School</h1>
                                     <div className="space20" />
                                     <Link href="/" className="text-decoration-none">
                                         Home <i className="fa-solid fa-angle-right mx-2" />
-                                        <span>Tamil School</span>
+                                        <span>Cambridge Tamil School</span>
                                     </Link>
                                 </div>
                             </div>
@@ -48,17 +45,17 @@ export default function CricketClub() {
                             <div className="col-lg-12 m-auto">
                                 <div className="event2-header heading5 space-margin60">
                                     <h2 className="text-anime-style-3">
-                                        Waterloo Region Tamil School
+                                        Cambridge Tamil School
                                     </h2>
 
                                     <div className="space24" />
-                                    <p>Waterloo region’s first Tamil language class was started in 1987 with the support of Late Mr. Marcil Francis, Late Prof. Pala Kannappan, Prof. Selvakumar and Mrs. Pushpa Seevaratnam. It was held at Victoria Public School, downtown Kitchener.</p>
+                                    <p>Waterloo region's first Tamil language class was started in 1987 with the support of Late Mr. Marcil Francis, Late Prof. Pala Kannappan, Prof. Selvakumar and Mrs. Pushpa Seevaratnam. It was held at Victoria Public School, downtown Kitchener.</p>
 
                                     <div className="space24" />
                                     <p>The first Tamil Variety show & Social Hour was held on December 5th, 1987 at Keatsway Public School, Waterloo.</p>
 
                                     <div className="space24" />
-                                    <p>Tamil Class was re-activated in 2000 at St. John’s School, Guelph under the ILP program. Mrs. Padhmini Swaminathan was the first teacher. In the following year it was moved to St. Peter’s School, Guelph and successive teachers were Shayamala Navam, Dharini Sivakumar and Shanthi Rajan. Classes discontinued in 2005 due to lack of student participation.</p>
+                                    <p>Tamil Class was re-activated in 2000 at St. John's School, Guelph under the ILP program. Mrs. Padhmini Swaminathan was the first teacher. In the following year it was moved to St. Peter's School, Guelph and successive teachers were Shayamala Navam, Dharini Sivakumar and Shanthi Rajan. Classes discontinued in 2005 due to lack of student participation.</p>
 
                                     <div className="space24" />
                                     <p>In 2011, Waterloo District School board in conjunction with Tamil Cultural Association recommenced the Tamil class at Hespler Public School, Cambridge. Mrs. E. Kunamalar was the teacher.</p>
@@ -66,8 +63,8 @@ export default function CricketClub() {
                                     <div className="space24" />
                                     <p>In the year 2020/21, as per instructions from Ontario Ministry of Education, Waterloo Tamil school switched to an online portal. This was due to Covid-19 pandemic in the Province. Virtual and in-house classes are conducted by Mrs. Suharmini Shrishankar.</p>
 
-                                    <div className="space24" />
+                                    {/* <div className="space24" />
-                                    <p>October 2022, Waterloo school board recommenced live Tamil class at 555 Ellis Rd, Cambridge, ON N3C 4K2. It is held on Saturday at 9.00am</p>
+                                    <p>October 2022, Waterloo school board recommenced live Tamil class at 555 Ellis Rd, Cambridge, ON N3C 4K2. It is held on Saturday at 9.00am</p> */}
 
                                     <p>The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</p>
                                 </div>
@@ -76,7 +73,7 @@ export default function CricketClub() {
 
                         <div className="row gx-4 gy-4 mt-4">
                             {galleryImages.length > 0 ? (
-                                galleryImages.map((img, i) => (
+                                galleryImages.map((img: any, i: number) => (
                                     <div
                                         key={img.id}
                                         className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"

app/community/cambridge-tamil-school/page.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Tamil Language School | Enroll Your Child",
+    description: "Learn about Tamil language education programs for children in Waterloo Region.",
+};
+
+import TamilSchoolClient from "./TamilSchoolClient";
+
+export default function TamilSchoolPage() {
+    return <TamilSchoolClient />;
+}

app/community/cricket-club/CricketClubClient.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import Layout from '@/components/layout/Layout';
+import { communitySubmenuData } from '@/utility/constant.utils';
+import Link from 'next/link';
+import { useState } from 'react';
+import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
+
+export default function CricketClubClient() {
+
+    const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 5 && +img.id <= 8);
+
+    const [open, setOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <>
+            <Layout headerStyle={1} footerStyle={1}>
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: 'url(/assets/img/community/cricket-club/cricket-club-banner.webp)',
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1 className="mb-3">Cricket Club</h1>
+                                    <Link href="/" className="text-decoration-none">
+                                        Home <i className="fa-solid fa-angle-right mx-2" />
+                                        <span>Community</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bloginner-section-area sp4">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="event2-header heading5 space-margin60">
+                                    <h2 className="text-anime-style-3 fw-bold">Tamil Cricket Club Waterloo</h2>
+                                    <div className="space24" />
+                                    <p>
+                                        Waterloo region's Tamil Cricket Club was started in 2018. Venue: Waterloo Park,
+                                        Waterloo, Ontario Canada. Spring/Summer season only. Membership is for Tamil Cultural
+                                        Association of Waterloo Region only.
+                                        <br />
+                                        <br />
+                                        The club is primarily supported by Tamil Cultural Association of Waterloo Region.
+                                        More info:{' '}
+                                        <a href="mailto:mail@tca.srika.in" className="text-primary">
+                                            mail@tca.srika.in
+                                        </a>
+                                    </p>
+                                    <div className="space24" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="row gx-4 gy-4">
+                            {galleryImages.length > 0 ? (
+                                galleryImages.map((img: any, i: number) => (
+                                    <div
+                                        key={img.id}
+                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
+                                        onClick={() => {
+                                            setIndex(i);
+                                            setOpen(true);
+                                        }}
+                                        style={{ cursor: 'pointer' }}
+                                    >
+                                        <div className="memory-boxarea rounded overflow-hidden h-100">
+                                            <div
+                                                className="image"
+                                                data-aos="zoom-in"
+                                                data-aos-duration={1000}
+                                                style={{ borderRadius: 8 }}
+                                            >
+                                                <img
+                                                    src={img.src}
+                                                    alt={img.alt}
+                                                    className="img-fluid w-100"
+                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="col-12 text-center mt-5">
+                                    <p className="text-muted">No images found for this event.</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <Lightbox open={open} close={() => setOpen(false)} slides={galleryImages} index={index} />
+            </Layout>
+        </>
+    );
+}

app/community/cricket-club/page.tsx

@@ -1,110 +1,12 @@
-'use client';
+import type { Metadata } from "next"
 
-import Layout from '@/components/layout/Layout';
+export const metadata: Metadata = {
-import { communitySubmenuData } from '@/utility/constant.utils';
+  title: "Tamil Cricket Club | Join the Team",
-import Link from 'next/link';
+  description: "Join the Tamil Cricket Club and enjoy sports and teamwork in Waterloo.",
-import { useState } from 'react';
+};
-import Lightbox from 'yet-another-react-lightbox';
-import 'yet-another-react-lightbox/styles.css';
 
-export default function CricketClub() {
+import CricketClubClient from "./CricketClubClient";
 
-  const galleryImages = communitySubmenuData.filter(img => +img.id >= 5 && +img.id <= 8);
+export default function CricketClubPage() {
-
+  return <CricketClubClient />;
-  const [open, setOpen] = useState(false);
-  const [index, setIndex] = useState(0);
-
-  return (
-    <>
-      <Layout headerStyle={1} footerStyle={1}>
-        <div
-          className="inner-page-header"
-          style={{
-            backgroundImage: 'url(/assets/img/community/cricket-club/cricket-club-banner.webp)',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            padding: '100px 0',
-          }}
-        >
-          <div className="container">
-            <div className="row">
-              <div className="col-lg-6 m-auto">
-                <div className="heading1 text-center">
-                  <h1 className="mb-3">Cricket Club</h1>
-                  <Link href="/" className="text-decoration-none">
-                    Home <i className="fa-solid fa-angle-right mx-2" />
-                    <span>Community</span>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="bloginner-section-area sp4">
-          <div className="container">
-            <div className="row">
-              <div className="col-lg-12 m-auto">
-                <div className="event2-header heading5 space-margin60">
-                  <h2 className="text-anime-style-3 fw-bold">Tamil Cricket Club Waterloo</h2>
-                  <div className="space24" />
-                  <p>
-                    Waterloo region’s Tamil Cricket Club was started in 2018. Venue: Waterloo Park,
-                    Waterloo, Ontario Canada. Spring/Summer season only. Membership is for Tamil Cultural
-                    Association of Waterloo Region only.
-                    <br />
-                    <br />
-                    The club is primarily supported by Tamil Cultural Association of Waterloo Region.
-                    More info:{' '}
-                    <a href="mailto:mail@tca.srika.in" className="text-primary">
-                      mail@tca.srika.in
-                    </a>
-                  </p>
-                  <div className="space24" />
-                </div>
-              </div>
-            </div>
-
-            <div className="row gx-4 gy-4">
-              {galleryImages.length > 0 ? (
-                galleryImages.map((img, i) => (
-                  <div
-                    key={img.id}
-                    className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
-                    onClick={() => {
-                      setIndex(i);
-                      setOpen(true);
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    <div className="memory-boxarea rounded overflow-hidden h-100">
-                      <div
-                        className="image"
-                        data-aos="zoom-in"
-                        data-aos-duration={1000}
-                        style={{ borderRadius: 8 }}
-                      >
-                        <img
-                          src={img.src}
-                          alt={img.alt}
-                          className="img-fluid w-100"
-                          style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <div className="col-12 text-center mt-5">
-                  <p className="text-muted">No images found for this event.</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <Lightbox open={open} close={() => setOpen(false)} slides={galleryImages} index={index} />
-      </Layout>
-    </>
-  );
 }

app/community/global-relief-fund/GlobalReliefFundClient.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import Layout from '@/components/layout/Layout';
+import { communitySubmenuData } from '@/utility/constant.utils';
+import Link from 'next/link';
+import { useState } from 'react';
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+export default function GlobalReliefFundClient() {
+    // Show only images with id 1 to 4
+    const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 1 && +img.id <= 4);
+
+    const [open, setOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <>
+            <Layout headerStyle={1} footerStyle={1}>
+
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: 'url(/assets/img/community/fund/fund-banner.webp)',
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1 text-white">
+                                    <h1>TCA Global Relief Fund</h1>
+                                    <div className="space20" />
+                                    <Link href="/" className="text-white text-decoration-none">
+                                        Home <i className="fa-solid fa-angle-right mx-2" />
+                                        <span>Community</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div className="bloginner-section-area sp4 bg-light">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="event2-header heading5 space-margin60">
+                                    <h2 className="text-anime-style-3">TCA Global Relief Fund</h2>
+                                    <div className="space20" />
+                                    <div className="space20" />
+                                    <div className='row'>
+                                        <div className='col-lg-5 d-flex align-items-center'>
+                                            <div className="about6-header heading9">
+
+                                                <img
+                                                    src="/assets/img/all-images/community/global-fund.jpg"
+                                                    alt=""
+                                                // style={{ height: "550px", width: "650px"}}
+                                                />
+
+
+                                            </div>
+                                        </div>
+                                        <div className='col-lg-7'>
+                                            <div className="space24" />
+                                            <p>
+                                                Tamil Cultural Association established a global relief fund in 2000 to support financially as well as in-kind support to under privileged communities or individuals in Canada, Sri Lanka and India.
+                                            </p>
+                                            <div className="space20" />
+                                            <div className="ps-4">
+                                                <p>1. A consignment of cloths were shipped through Trico freight to Nunavil Children's Orphanage in Jaffna, Sri Lanka. </p>
+                                                <div className="space10" />
+                                                <p>2. Indian Rupees of 25,000 donated to burnt victim in Trichy, South India.</p>
+                                                <div className="space10" />
+
+                                                <p>3. Project Hope fundraising in 2008 for Ramakrishna Mission school library, Batticaloa, Sri Lanka. Raised $2032.00</p>
+                                                <div className="space10" />
+
+                                                <p>4. Donated funds and food items to St. John's Soup Kitchen, Kitchener</p>
+                                                <div className="space10" />
+
+                                                <p>5. Gifted educational materials to school children in Jaffna and Killinochchi, Sri Lanka in 2021. Facilitated by YMCA Jaffna.</p>
+                                                <div className="space10" />
+
+                                                <p>6. Dry ration food kits were donated to Indian upcountry community in Nuwara Eliya and Kegalle district in 2021. Funds raised $3300</p>
+                                                <div className="space10" />
+
+                                                <p>7. Toronto Tamil Chair campaign to establish a Tamil chair at University of Toronto. Raised funds amounting to $2400 in 2021</p>
+                                                <div className="space10" />
+
+                                                <p>8. Raised funds and donated dry food to Waterloo Region Food bank in 2022. It was part of Tamil Heritage month.</p>
+                                                <div className="space10" />
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="row gx-4 gy-4 mt-4">
+                            {galleryImages.length > 0 ? (
+                                galleryImages.map((img: any, i: number) => (
+                                    <div
+                                        key={img.id}
+                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
+                                        onClick={() => {
+                                            setIndex(i);
+                                            setOpen(true);
+                                        }}
+                                        style={{ cursor: 'pointer' }}
+                                    >
+                                        <div className="memory-boxarea shadow-sm rounded overflow-hidden h-100">
+                                            <div
+                                                className="image"
+                                                data-aos="zoom-in"
+                                                data-aos-duration={1000}
+                                                style={{ borderRadius: 8 }}
+                                            >
+                                                <img
+                                                    src={img.src}
+                                                    alt={img.alt}
+                                                    className="img-fluid w-100"
+                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="col-12 text-center mt-5">
+                                    <p className="text-muted">No images found for this event.</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+
+                <Lightbox
+                    open={open}
+                    close={() => setOpen(false)}
+                    slides={galleryImages}
+                    index={index}
+                />
+            </Layout>
+        </>
+    );
+}

app/community/global-relief-fund/page.tsx

@@ -1,153 +1,12 @@
-'use client';
+import type { Metadata } from "next"
 
-import Layout from '@/components/layout/Layout';
+export const metadata: Metadata = {
-import { communitySubmenuData } from '@/utility/constant.utils';
+    title: "Global Relief Fund | Support Humanitarian Causes",
-import Link from 'next/link';
+    description: "Support global relief efforts and humanitarian causes led by the Tamil community.",
-import { useState } from 'react';
+};
-import Lightbox from "yet-another-react-lightbox";
-import "yet-another-react-lightbox/styles.css";
 
-export default function GlobalReliefFund() {
+import GlobalReliefFundClient from "./GlobalReliefFundClient";
-    // Show only images with id 1 to 4
-    const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
 
-    const [open, setOpen] = useState(false);
+export default function GlobalReliefFundPage() {
-    const [index, setIndex] = useState(0);
+    return <GlobalReliefFundClient />;
-
-    return (
-        <>
-            <Layout headerStyle={1} footerStyle={1}>
-
-                <div
-                    className="inner-page-header"
-                    style={{
-                        backgroundImage: 'url(/assets/img/community/fund/fund-banner.webp)',
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center',
-                        padding: '100px 0',
-                    }}
-                >
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-6 m-auto">
-                                <div className="heading1 text-center text-white">
-                                    <h1>TCA Global Relief Fund</h1>
-                                    <div className="space20" />
-                                    <Link href="/" className="text-white text-decoration-none">
-                                        Home <i className="fa-solid fa-angle-right mx-2" />
-                                        <span>Community</span>
-                                    </Link>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-
-                <div className="bloginner-section-area sp4 bg-light">
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-12 m-auto">
-                                <div className="event2-header heading5 space-margin60">
-                                    <h2 className="text-anime-style-3">TCA Global Relief Fund</h2>
-                                    <div className="space20" />
-                                    <div className="space20" />
-                                    <div className='row'>
-                                        <div className='col-lg-5 d-flex align-items-center'>
-                                            <div className="about6-header heading9">
-
-                                                <img
-                                                    src="/assets/img/all-images/community/global-fund.jpg"
-                                                    alt=""
-                                                    // style={{ height: "550px", width: "650px"}}
-                                                />
-
-
-                                            </div>
-                                        </div>
-                                        <div className='col-lg-7'>
-                                            <div className="space24" />
-                                            <p>
-                                                Tamil Cultural Association established a global relief fund in 2000 to support financially as well as in-kind support to under privileged communities or individuals in Canada, Sri Lanka and India.
-                                            </p>
-                                            <div className="space20" />
-                                            <div className="ps-4">
-                                                <p>1. A consignment of cloths were shipped through Trico freight to Nunavil Children’s Orphanage in Jaffna, Sri Lanka. </p>
-                                                <div className="space10" />
-                                                <p>2. Indian Rupees of 25,000 donated to burnt victim in Trichy, South India.</p>
-                                                <div className="space10" />
-
-                                                <p>3. Project Hope fundraising in 2008 for Ramakrishna Mission school library, Batticaloa, Sri Lanka. Raised $2032.00</p>
-                                                <div className="space10" />
-
-                                                <p>4. Donated funds and food items to St. John’s Soup Kitchen, Kitchener</p>
-                                                <div className="space10" />
-
-                                                <p>5. Gifted educational materials to school children in Jaffna and Killinochchi, Sri Lanka in 2021. Facilitated by YMCA Jaffna.</p>
-                                                <div className="space10" />
-
-                                                <p>6. Dry ration food kits were donated to Indian upcountry community in Nuwara Eliya and Kegalle district in 2021. Funds raised $3300</p>
-                                                <div className="space10" />
-
-                                                <p>7. Toronto Tamil Chair campaign to establish a Tamil chair at University of Toronto. Raised funds amounting to $2400 in 2021</p>
-                                                <div className="space10" />
-
-                                                <p>8. Raised funds and donated dry food to Waterloo Region Food bank in 2022. It was part of Tamil Heritage month.</p>
-                                                <div className="space10" />
-
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="row gx-4 gy-4 mt-4">
-                            {galleryImages.length > 0 ? (
-                                galleryImages.map((img, i) => (
-                                    <div
-                                        key={img.id}
-                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
-                                        onClick={() => {
-                                            setIndex(i);
-                                            setOpen(true);
-                                        }}
-                                        style={{ cursor: 'pointer' }}
-                                    >
-                                        <div className="memory-boxarea shadow-sm rounded overflow-hidden h-100">
-                                            <div
-                                                className="image"
-                                                data-aos="zoom-in"
-                                                data-aos-duration={1000}
-                                                style={{ borderRadius: 8 }}
-                                            >
-                                                <img
-                                                    src={img.src}
-                                                    alt={img.alt}
-                                                    className="img-fluid w-100"
-                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))
-                            ) : (
-                                <div className="col-12 text-center mt-5">
-                                    <p className="text-muted">No images found for this event.</p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-
-
-                <Lightbox
-                    open={open}
-                    close={() => setOpen(false)}
-                    slides={galleryImages}
-                    index={index}
-                />
-            </Layout>
-        </>
-    );
 }

app/community/kitchener-tamil-school/TamilSchoolClient.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import Layout from '@/components/layout/Layout';
+import { communitySubmenuData } from '@/utility/constant.utils';
+import Link from 'next/link';
+import { useState } from 'react';
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+export default function TamilSchoolClient() {
+
+    const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 13 && +img.id <= 20);
+
+    const [open, setOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <>
+            <Layout headerStyle={1} footerStyle={1}>
+                <div
+                    className="inner-page-header"
+                    style={{
+                        backgroundImage: 'url(/assets/img/community/tamil-school/school-banner.webp)',
+                    }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Kitchener Tamil School</h1>
+                                    <div className="space20" />
+                                    <Link href="/" className="text-decoration-none">
+                                        Home <i className="fa-solid fa-angle-right mx-2" />
+                                        <span>Kitchener Tamil School</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bloginner-section-area sp4">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="event2-header heading5 space-margin60">
+                                    <h2 className="text-anime-style-3">
+                                        Kitchener Tamil School
+                                    </h2>
+
+                                    <div className="space24" />
+                                    <p>Waterloo region's first Tamil language class was started in 1987 with the support of Late Mr. Marcil Francis, Late Prof. Pala Kannappan, Prof. Selvakumar and Mrs. Pushpa Seevaratnam. It was held at Victoria Public School, downtown Kitchener.</p>
+
+                                    <div className="space24" />
+                                    <p>The first Tamil Variety show & Social Hour was held on December 5th, 1987 at Keatsway Public School, Waterloo.</p>
+
+                                    <div className="space24" />
+                                    <p>Tamil Class was re-activated in 2000 at St. John's School, Guelph under the ILP program. Mrs. Padhmini Swaminathan was the first teacher. In the following year it was moved to St. Peter's School, Guelph and successive teachers were Shayamala Navam, Dharini Sivakumar and Shanthi Rajan. Classes discontinued in 2005 due to lack of student participation.</p>
+
+                                    <div className="space24" />
+                                    <p>In 2011, Waterloo District School board in conjunction with Tamil Cultural Association recommenced the Tamil class at Hespler Public School, Cambridge. Mrs. E. Kunamalar was the teacher.</p>
+
+                                    <div className="space24" />
+                                    <p>In the year 2020/21, as per instructions from Ontario Ministry of Education, Waterloo Tamil school switched to an online portal. This was due to Covid-19 pandemic in the Province. Virtual and in-house classes are conducted by Mrs. Suharmini Shrishankar.</p>
+
+                                    {/* <div className="space24" />
+                                    <p>October 2022, Waterloo school board recommenced live Tamil class at 555 Ellis Rd, Cambridge, ON N3C 4K2. It is held on Saturday at 9.00am</p> */}
+
+                                    <p>The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="row gx-4 gy-4 mt-4">
+                            {galleryImages.length > 0 ? (
+                                galleryImages.map((img: any, i: number) => (
+                                    <div
+                                        key={img.id}
+                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
+                                        onClick={() => {
+                                            setIndex(i);
+                                            setOpen(true);
+                                        }}
+                                        style={{ cursor: 'pointer' }}
+                                    >
+                                        <div className="memory-boxarea rounded overflow-hidden h-100">
+                                            <div
+                                                className="image mb-2"
+                                                data-aos="zoom-in"
+                                                data-aos-duration={1000}
+                                                style={{ borderRadius: 8 }}
+                                            >
+                                                <img
+                                                    src={img.src}
+                                                    alt={img.alt}
+                                                    className="img-fluid w-100"
+                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="col-12 text-center mt-5">
+                                    <p className="text-muted">No images found for this event.</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <Lightbox
+                    open={open}
+                    close={() => setOpen(false)}
+                    slides={galleryImages}
+                    index={index}
+                />
+            </Layout>
+        </>
+    );
+}

app/community/kitchener-tamil-school/page.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Tamil Language School | Enroll Your Child",
+    description: "Learn about Tamil language education programs for children in Waterloo Region.",
+};
+
+import TamilSchoolClient from "./TamilSchoolClient";
+
+export default function TamilSchoolPage() {
+    return <TamilSchoolClient />;
+}

app/community/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil Community Programs | Get Involved",
+	description: "Discover Tamil community programs, initiatives, and social activities in Waterloo Region.",
+};
+
 import CountUp from 'react-countup'
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -15,8 +21,8 @@ export default function CommunityPage() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/community-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Community</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Community</span></Link>

app/community/recipes/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Traditional Tamil Recipes | Explore & Cook",
+	description: "Explore traditional Tamil recipes and home-style dishes shared by the community.",
+};
 
 
 import Layout from "@/components/layout/Layout"
@@ -13,8 +19,8 @@ export default function Recipes() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/recipes/recipes-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Recipes</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Recipes</span></Link>
@@ -57,7 +63,7 @@ export default function Recipes() {
 								))
 								}
 							</div>
-								<div className="space30" />
+							{/* <div className="space30" /> */}
 							{/* <div className="pagination-area">
 									<nav aria-label="Page navigation example">
 										<ul className="pagination">

app/community/single-recipes/page.tsx

@@ -34,8 +34,8 @@ const Page = () => {
 					>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>{post?.title || "Recipes"}</h1>
 										<div className="space20" />
 										<Link href="/">

app/contact copy/page.tsx

@@ -12,8 +12,8 @@ export default function Contact() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg12.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Contact Us</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Contact Us</span></Link>

app/contact/page.tsx

@@ -1,256 +1,12 @@
-"use client";
+import type { Metadata } from "next"
-import Countdown from '@/components/elements/Countdown';
-import Layout from "@/components/layout/Layout";
-import Link from "next/link";
-import { useState, useEffect, ChangeEvent, FormEvent } from "react";
-import ReCAPTCHA from "react-google-recaptcha";
-import axios from "axios";
 
-interface FormData {
+export const metadata: Metadata = {
-	name: string;
+	title: "Contact Tamil Culture Waterloo | Connect With Us",
-	phone: string;
+	description: "Contact Tamil Culture Waterloo for events, membership, volunteering, and community support in Waterloo, Ontario.",
-	email: string;
+};
-	subject: string;
-	message: string;
-}
 
-interface FormErrors {
+import ContactSection from "@/components/contact/ContactSection";
-	name?: string;
-	phone?: string;
-	email?: string;
-	subject?: string;
-	message?: string;
-	captcha?: string;
-}
 
 export default function Contact() {
-	const [formData, setFormData] = useState<FormData>({
+	return <ContactSection />;
-		name: "",
-		phone: "",
-		email: "",
-		subject: "",
-		message: "",
-	});
-
-	const [captchaToken, setCaptchaToken] = useState<string | null>(null);
-	const [formErrors, setFormErrors] = useState<FormErrors>({});
-	const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({
-		show: false,
-		type: "",
-		message: "",
-	});
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-		const { name, value } = e.target;
-		setFormData((prev) => ({ ...prev, [name]: value }));
-	};
-
-	const handleCaptchaChange = (token: string | null) => {
-		setCaptchaToken(token);
-	};
-
-	const handleSubmit = async (e: FormEvent) => {
-		e.preventDefault();
-
-		const errors: FormErrors = {};
-		if (!formData.name.trim()) errors.name = "Name is required.";
-		if (!formData.phone.trim()) errors.phone = "Phone number is required.";
-		if (!formData.email.trim()) errors.email = "Email is required.";
-		if (!formData.subject.trim()) errors.subject = "Subject is required.";
-		if (!formData.message.trim()) errors.message = "Message is required.";
-		if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
-
-		setFormErrors(errors);
-		if (Object.keys(errors).length > 0) return;
-
-		const emailData = {
-			...formData,
-			message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
-			to: "mail@tamilculturewaterloo.org",
-			senderName: "Tamil Culture Waterloo Contact Page",
-			recaptchaToken: captchaToken,
-		};
-
-		try {
-			const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
-				headers: { "Content-Type": "application/json" },
-			});
-
-			setAlert({
-				show: true,
-				type: "success",
-				message: res?.data?.message || "Message sent successfully!",
-			});
-
-			setFormData({ name: "", phone: "", email: "", subject: "", message: "" });
-			setCaptchaToken(null);
-			setFormErrors({});
-		} catch {
-			setAlert({
-				show: true,
-				type: "danger",
-				message: "Failed to send message. Please try again later.",
-			});
-		}
-	};
-
-useEffect(() => {
-	if (alert.show) {
-		const timer = setTimeout(() => {
-			setAlert(prev => ({ ...prev, show: false }));
-		}, 5000);
-		return () => clearTimeout(timer);
-	}
-}, [alert.show]);
-
-
-	return (
-		<Layout headerStyle={1} footerStyle={1}>
-			<div>
-				<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/all-images/contact/contact-banner.webp)' }}>
-					<div className="container">
-						<div className="row">
-							<div className="col-lg-6 m-auto">
-								<div className="heading1 text-center">
-									<h1>Contact Us</h1>
-									<div className="space20" />
-									<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Contact Us</span></Link>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div className="space80" />
-				<div className="contact-bg-section">
-					<div className="container">
-						<div className="row">
-							<div className="col-lg-6 col-md-6">
-								<div className="contact-boxarea2 mb-2" data-aos="zoom-in" data-aos-duration={900}>
-									<div className="icons">
-										<img src="/assets/img/icons/mail1.svg" alt="" />
-									</div>
-									<div className="text">
-										<h5>Email</h5>
-										<div className="space14" />
-										<Link href="mailto:mail@tamilculturewaterloo.org">mail@tamilculturewaterloo.org</Link>
-									</div>
-								</div>
-							</div>
-									<div className="col-lg-6 col-md-6">
-								<div className="contact-boxarea2" data-aos="zoom-in" data-aos-duration={900}>
-									<div className="icons">
-										<img src="/assets/img/icons/location1.svg" alt="" />
-									</div>
-									<div className="text">
-										<h5>Location</h5>
-										<div className="space14" />
-										<Link href="mailto:mail@tamilculturewaterloo.org">P.O. Box No:25068, Kitchener, Ontario, N2A 4A5, Canada.</Link>
-									</div>
-								</div>
-							</div>
-							{/* <div className="col-lg-4 col-md-6">
-								<div className="contact-boxarea3" data-aos="zoom-in" data-aos-duration={1000}>
-									<div className="icons">
-										<img src="/assets/img/icons/phn1.svg" alt="" />
-									</div>
-									<div className="text">
-										<h5>Call Us</h5>
-										<div className="space14" />
-										<Link href="tel:+11234567890">+1 123 456 7890</Link>
-									</div>
-								</div>
-							</div> */}
-						</div>
-					</div>
-				</div>
-
-				<div className="contact-inner-section sp4">
-					<div className="container">
-						<div className="row">
-							<div className="col-lg-6" data-aos="zoom-in" data-aos-duration={1000}>
-								<div className="contact4-boxarea">
-									<h3 className="text-anime-style-3">Get In Touch Now</h3>
-									<div className="space8" />
-									<form onSubmit={handleSubmit}>
-										{alert.show && (
-											<div className={`alert alert-${alert.type}`}>{alert.message}</div>
-										)}
-										<div className="row">
-											<div className="col-lg-6 col-md-6">
-												<div className="input-area">
-													<input type="text" name="name" placeholder="Name" value={formData.name} onChange={handleChange} />
-													{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
-												</div>
-											</div>
-											<div className="col-lg-6 col-md-6">
-												<div className="input-area">
-													<input type="text" name="phone" placeholder="Phone" value={formData.phone} onChange={handleChange} />
-													{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
-												</div>
-											</div>
-											<div className="col-lg-12 col-md-6">
-												<div className="input-area">
-													<input type="email" name="email" placeholder="Email" value={formData.email} onChange={handleChange} />
-													{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
-												</div>
-											</div>
-											<div className="col-lg-12 col-md-6">
-												<div className="input-area">
-													<input type="text" name="subject" placeholder="Subjects" value={formData.subject} onChange={handleChange} />
-													{formErrors.subject && <small className="text-danger">{formErrors.subject}</small>}
-												</div>
-											</div>
-											<div className="col-lg-12">
-												<div className="input-area">
-													<textarea name="message" placeholder="Message" value={formData.message} onChange={handleChange} />
-													{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
-												</div>
-											</div>
-											<div className="col-lg-12 mt-2">
-												<ReCAPTCHA
-													sitekey="6Lea8ZYrAAAAAHaghaLjDx_K084IFATZby7Rzqhl"
-													onChange={handleCaptchaChange}
-												/>
-												{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
-											</div>
-											<div className="col-lg-12">
-												<div className="space24" />
-												<div className="input-area text-end">
-													<button type="submit" className="vl-btn1">Submit Now</button>
-												</div>
-											</div>
-										</div>
-									</form>
-								</div>
-							</div>
-							<div className="col-lg-6">
-								<div className="img1 image-anime">
-									<img
-										src="/assets/img/all-images/contact/contact-1.webp"
-										alt=""
-										style={{ border: 0, width: '100%', height: '620px' }}
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div className="contact2-section">
-					<div className="mapouter">
-						<div className="gmap_canvas">
-							<iframe
-								src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.0622283957745!2d-80.39731242413884!3d43.434476063108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf3cd7b1f3f11%3A0xc93e0b894c6a8b15!2sKitchener%2C%20ON%20N2A%204A5%2C%20Canada!5e0!3m2!1sen!2sin!4v1720000000000!5m2!1sen!2sin"
-								style={{ border: 0, width: '100%', height: '450px' }}
-								allowFullScreen
-								loading="lazy"
-								referrerPolicy="no-referrer-when-downgrade"
-							></iframe>
-						</div>
-					</div>
-				</div>
-			</div>
-		</Layout>
-	);
 }

app/event-schedule/page.tsx

@@ -12,8 +12,8 @@ export default function EventSchedule() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg10.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Event Schedule</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Event Schedule</span></Link>

app/event-single/page.tsx

@@ -16,8 +16,8 @@ export default function EventSingle() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg9.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Event single</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Event single</span></Link>

app/event/page.tsx

@@ -12,8 +12,8 @@ export default function Event() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg8.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Event List</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Event List</span></Link>

app/faq/page.tsx

@@ -21,8 +21,8 @@ const handleAccordion = (key: any) => {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg15.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-9 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Frequently Asked Question</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Frequently Asked Question</span></Link>

app/food/page.tsx

@@ -31,8 +31,8 @@ const Page = () => {
 				<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
 					<div className="container">
 						<div className="row">
-							<div className="col-lg-6 m-auto">
+							<div className="col-lg-12 m-auto">
-								<div className="heading1 text-center">
+								<div className="heading1">
 									<h1>{post?.title}</h1>
 									<div className="space20" />
 									<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>

app/heritage-language/page.tsx

@@ -31,8 +31,8 @@ const Page = () => {
 				<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
 					<div className="container">
 						<div className="row">
-							<div className="col-lg-6 m-auto">
+							<div className="col-lg-12 m-auto">
-								<div className="heading1 text-center">
+								<div className="heading1">
 									<h1>{post?.title}</h1>
 									<div className="space20" />
 									<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>

app/memories/page.tsx

@@ -12,8 +12,8 @@ export default function Memories() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Recent Memories</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span></Link>

app/online/christmas/page.tsx

@@ -14,8 +14,8 @@ export default function christmas() {
 						<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/christmas.webp)' }}>
 										<div className="container">
 											<div className="row">
-												<div className="col-lg-5 m-auto">
+												<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+													<div className="heading1">
 														<h1>Christmas & 2024 Year End Celebrations</h1>
 														<div className="space20" />
 														<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>

app/page.tsx

@@ -1,4 +1,7 @@
+import type { Metadata } from "next"
 import Layout from "@/components/layout/Layout"
+
+
 import Popup from '@/components/layout/Popup'
 import Section1 from '@/components/sections/home9/section1'
 import Section2 from '@/components/sections/home3/section2'
@@ -29,6 +32,11 @@ import AdSectionFive from "@/components/home/AdSectionFive"
 import HeritageLanguage from "@/components/heritage-language/heritage-language"
 import Food from "@/components/community/food/food"
 
+export const metadata: Metadata = {
+  title: "Tamil Culture Waterloo |Join Our Community",
+  description: "Celebrating Tamil heritage in Waterloo, Ontario through culture, events, and community programs. Join Tamil families and stay connected locally.",
+};
+
 export default function Home() {
 
 	return (
@@ -38,18 +46,23 @@ export default function Home() {
 				<AboutSection />
 				<AdSectionOne />
 				<ArtAndCultureSection />
+				<HomeWhyChooseUs />
+				<AdSectionThree />
+				
+				<HomeUpcomingEvent />
+				
+
 				{/* <HeritageLanguage /> */}
 				{/* <Food /> */}
-				<HomeSlogan />
+				{/* <HomeSlogan /> */}
 
 				<HomeCommunitySection />
 			
-				<AdSectionFive />
+				
-				<HomeUpcomingEvent />
+				
-				<HomeWhyChooseUs />
 				{/* <Section7 /> */}
 				{/* <FoodSection /> */}
-				<AdSectionThree />
+				<AdSectionFive />
 				<HomePhotoGallerySection />
 				{/* <HaritageAndLanguage />
 				<AdSectionFour />

app/pricing-plan/page.tsx

@@ -12,8 +12,8 @@ export default function PricingPlan() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg16.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-9 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Pricing Plan</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Pricing Plan</span></Link>

app/register/christmas/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Christmas Celebration Registration | Celebrate With Us",
+	description: "Register for Christmas celebrations with the Tamil community in Waterloo Region.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/christmas/Section1"
+import Section2 from "@/components/online/christmas/Section2"
+import Section3 from "@/components/online/christmas/Section3"
+import Link from "next/link"
+export default function christmas() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/christmas.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Christmas & 2024 <br /> Year End Celebrations</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/community-picnic/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Community Picnic Registration | Register Now",
+	description: "Register for the community picnic and enjoy family-friendly activities in Waterloo.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/communitypicnic/Section1"
+import Section2 from "@/components/online/communitypicnic/Section2"
+import Section3 from "@/components/online/communitypicnic/Section3"
+import Link from "next/link"
+export default function communitypicnic() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/picnic.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>TCA Community Picnic 2024</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/membership-2024/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Membership Registration 2024 | Sign Up Today",
+	description: "Sign up for 2024 membership and support Tamil culture in Waterloo Region.",
+};
+
+import Countdown from '@/components/elements/Countdown'
+import Layout from "@/components/layout/Layout"
+import Link from "next/link"
+import Section1 from "@/components/online/membership2024/Section1"
+import Section2 from "@/components/online/membership2024/Section2"
+import Section3 from "@/components/online/membership2024/Section3"
+export default function Membership2024() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/membership-2024.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Membership 2024</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/membership-2025/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Membership Registration 2025 | Join the Community",
+	description: "Join as a 2025 member and participate in Tamil cultural, social, and family events.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/membership2025/Section1"
+import Section2 from "@/components/online/membership2025/Section2"
+import Section3 from "@/components/online/membership2025/Section3"
+import Link from "next/link"
+export default function membership2025() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/membership-2025.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Membership 2025</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/membership-2026/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Membership Registration 2026 | Become a Member",
+	description: "Register for 2026 membership and stay connected with Tamil community activities in Waterloo.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/membership2026/Section1"
+import Section2 from "@/components/online/membership2026/Section2"
+import Section3 from "@/components/online/membership2026/Section3"
+import Link from "next/link"
+export default function membership2026() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/membership-2026.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Membership 2026</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/performance/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Cultural Performance Registration | Apply Now",
+	description: "Apply to perform at Tamil cultural events and showcase your talent on stage.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/performance/Section1"
+import Section2 from "@/components/online/performance/Section2"
+import Section3 from "@/components/online/performance/Section3"
+import Link from "next/link"
+export default function performance() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/ppr.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Program Performance Registration</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/registration-form/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Event Registration Form | Register Online",
+	description: "Complete the event registration form to participate in upcoming community programs.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/registrationform/Section1"
+import Section2 from "@/components/online/registrationform/Section2"
+import Section3 from "@/components/online/registrationform/Section3"
+import Link from "next/link"
+export default function registrationform() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/whatsapp-group.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>WhatsApp Group</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/sponsor/page.jsx

@@ -0,0 +1,42 @@
+export const metadata = {
+    title: "Sponsorship Registration | Support Our Community",
+    description: "Become a sponsor and support Tamil cultural programs and community initiatives.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/sponsor/Section1"
+import Section2 from "@/components/online/sponsor/Section2"
+import Section3 from "@/components/online/sponsor/Section3"
+import Section4 from "@/components/online/sponsor/Section4"
+import Link from "next/link"
+export default function sponsor() {
+
+    return (
+        <>
+
+            <Layout headerStyle={1} footerStyle={1}>
+                <div>
+                    <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/sponsor.webp)' }}>
+                        <div className="container">
+                            <div className="row">
+                                <div className="col-lg-12 m-auto">
+                                    <div className="heading1">
+                                        <h1>Sponsorship Opportunities</h1>
+                                        <div className="space20" />
+                                        <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Section1 />
+                    <Section2 />
+                    <Section3 />
+                    <Section4 />
+                </div>
+
+            </Layout>
+        </>
+    )
+}

app/register/sports-day/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Sports Day Registration | Participate Today",
+	description: "Sign up for Sports Day and participate in fun, fitness, and team spirit events.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/sportsday/Section1"
+import Section2 from "@/components/online/sportsday/Section2"
+import Section3 from "@/components/online/sportsday/Section3"
+import Link from "next/link"
+export default function sportsday() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/sports-day.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Sports Day</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/tamil-new-year/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil New Year Event Registration | Join the Fest",
+	description: "Celebrate Tamil New Year with community events, rituals, and cultural programs.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/tamilnewyear/Section1"
+import Section2 from "@/components/online/tamilnewyear/Section2"
+import Section3 from "@/components/online/tamilnewyear/Section3"
+import Link from "next/link"
+export default function tamilnewyear() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/tamil-new-yr.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>TAMIL NEW YEAR</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/thai-pongal-2025/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Thai Pongal 2025 Registration | Celebrate Together",
+	description: "Register for Thai Pongal 2025 celebrations and enjoy Tamil traditions in Waterloo.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/thaipongal2025/Section1"
+import Section2 from "@/components/online/thaipongal2025/Section2"
+import Section3 from "@/components/online/thaipongal2025/Section3"
+import Link from "next/link"
+export default function membership2025() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/pongal.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>THAI PONGAL</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/register/volunteer/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Volunteer Registration | Serve the Community",
+	description: "Volunteer with us and contribute your time to support the Tamil community in Waterloo.",
+};
+
+import Layout from "@/components/layout/Layout"
+import Section1 from "@/components/online/volunteer/Section1"
+import Section2 from "@/components/online/volunteer/Section2"
+import Section3 from "@/components/online/volunteer/Section3"
+import Link from "next/link"
+export default function volunteer() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/online/banners/event-volunteer.webp)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-12 m-auto">
+									<div className="heading1">
+										<h1>Event Volunteers</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Online</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Section1 />
+					<Section2 />
+					<Section3 />
+				</div>
+
+			</Layout>
+		</>
+	)
+}

app/speakers-single/page.tsx

@@ -12,8 +12,8 @@ export default function SpeakersSingle() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg7.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>speakers Details</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Speakers Details</span></Link>

app/speakers/page.tsx

@@ -12,8 +12,8 @@ export default function Speakers() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg6.png)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Our Speakers</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Our Speakers</span></Link>

app/tamil-culture-post/page.tsx

@@ -31,8 +31,8 @@ const Page = () => {
 					<div className="inner-page-header" style={{ backgroundImage: `url(${post.bannerImage})` }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>{post?.title}</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>

app/tamil-culture/page.tsx

@@ -13,8 +13,8 @@ export default function TamilCulture() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-culture-banner/tamil-culture-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Tamil Culture</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-festivals/christian-festivals/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Christian Festivals Among Tamils | Faith & Heritage",
+	description: "Learn how Christian Tamil festivals are celebrated in Waterloo with faith, tradition, and community spirit.",
+};
+
 import Layout from "@/components/layout/Layout"
 import Section1 from "@/components/tamilculture/tamil-festivals/christian-festivals/Section1"
 import Link from "next/link"
@@ -12,8 +18,8 @@ export default function ChristianFestivals() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/christian-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Christian Festivals</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Christian Festivals</span></Link>

app/tamil-culture/tamil-festivals/hindu-festivals/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Hindu Festivals in Tamil Culture | Learn & Celebrate",
+	description: "Learn about Hindu festivals observed by Tamil families and communities in Waterloo Region.",
+};
+
 import Layout from "@/components/layout/Layout"
 import Section1 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section1"
 import Section2 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section2"
@@ -13,8 +19,8 @@ export default function HinduFestivals() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/hindu-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Hindu Festivals</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Hindu Festivals  </span></Link>

app/tamil-culture/tamil-festivals/muslim-festivals/page.tsx

@@ -1,7 +1,16 @@
-'use client'
+import type { Metadata } from "next"
+
+
 import Layout from "@/components/layout/Layout"
 import Section1 from "@/components/tamilculture/tamil-festivals/muslim-festivals/Section1"
 import Link from "next/link"
+
+export const metadata: Metadata = {
+	title: "Muslim Festivals in Tamil Community | Cultural Unity",
+	description: "Discover Muslim festivals celebrated within the Tamil community, promoting unity and shared heritage.",
+};
+
+
 export default function MuslimFestivals() {
 
 	return (
@@ -12,8 +21,8 @@ export default function MuslimFestivals() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/muslim-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Muslim Festivals  </h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Muslim Festivals  </span></Link>

app/tamil-culture/tamil-festivals/page.tsx

@@ -1,4 +1,10 @@
-'use client'
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil Festivals & Traditions | Explore Our Culture",
+	description: "Explore Tamil festivals celebrated in Waterloo, Ontario, and learn their cultural meaning and traditions.",
+};
+
 import Layout from "@/components/layout/Layout"
 import Section1 from "@/components/tamilculture/tamil-festivals/Section1"
 import Link from "next/link"
@@ -12,8 +18,8 @@ export default function TamilFestivals() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/tamil-festivals-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Tamil Festivals</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Festivals</span></Link>

app/tamil-culture/tamil-language/page.jsx

@@ -1,3 +1,8 @@
+export const metadata = {
+    title: "Tamil Language History & Culture | Learn Tamil",
+    description: "Explore the history, richness, and global significance of the Tamil language.",
+};
+
 import Countdown from '@/components/elements/Countdown';
 import Layout from "@/components/layout/Layout";
 import { tamilculture } from '@/utility/constant.utils';
@@ -15,8 +20,8 @@ export default function Tamilculture() {
                 >
                     <div className="container">
                         <div className="row">
-                            <div className="col-lg-6 m-auto">
+                            <div className="col-lg-12 m-auto">
-                                <div className="heading1 text-center">
+                                <div className="heading1">
                                     <h1>TAMIL LANGUAGE</h1>
                                     <div className="space20" />
                                     <Link href="/">

app/tamil-culture/tamil-language/tamil-language-data/page.tsx

@@ -38,13 +38,12 @@ export default function TamilLanguageData() {
       >
         <div className="container">
           <div className="row">
-            <div className="col-lg-6 m-auto">
+            <div className="col-lg-12 m-auto">
-              <div className="heading1 text-center">
+              <div className="heading1">
                 <h1>TAMIL LANGUAGE</h1>
                 <div className="space20" />
                 <Link href="/">
-                  Home <i className="fa-solid fa-angle-right" />{' '}
+                  Home <i className="fa-solid fa-angle-right" /> <span>TAMIL LANGUAGE</span>
-                  <span>TAMIL LANGUAGE</span>
                 </Link>
               </div>
             </div>

app/tamil-culture/tamil-wedding-custom/bridal-makeup/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Tamil Bridal Makeup Traditions | Explore Styles",
+	description: "Explore traditional and modern Tamil bridal makeup styles and cultural beauty practices.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -16,8 +22,8 @@ export default function BridalMekeup() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/bridal-makeup-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Bridal Make Up</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-wedding-custom/catholic-wedding/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Catholic Tamil Wedding Customs | Cultural Insights",
+	description: "Learn about Catholic Tamil wedding customs practiced by families in the community.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -13,8 +19,8 @@ export default function CatholicWedding() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-catholic-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Tamil Catholic Weddings</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-wedding-custom/city-style/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Modern City Style Tamil Weddings | View Trends",
+	description: "Discover modern city-style Tamil weddings blending tradition with contemporary trends.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function CityStyle() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/city-wedding-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Marriage – City Style</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-wedding-custom/hindu-wedding-rituals/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Hindu Wedding Rituals | Understand Sacred Customs",
+	description: "Learn the meaning behind Hindu Tamil wedding rituals and sacred marriage traditions.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -17,8 +23,8 @@ export default function HinduWedding() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/hindu-wedding-rituals-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Hindu Wedding Rituals</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-wedding-custom/page.tsx

@@ -1,8 +1,17 @@
-'use client'
+import type { Metadata } from "next"
+
+
 import Layout from "@/components/layout/Layout"
 import TamilCultureSection from "@/components/tamilculture/culturehome/TamilCultureSection"
 import Section1 from "@/components/tamilculture/tamil-wedding-custom/Section1"
 import Link from "next/link"
+
+export const metadata: Metadata = {
+	title: "Traditional Tamil Wedding Customs | Learn Traditions",
+	description: "Understand traditional Tamil wedding customs and rituals followed by families across generations.",
+};
+
+
 export default function TamilWeddingCustom() {
 
 	return (
@@ -13,8 +22,8 @@ export default function TamilWeddingCustom() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding/tamil-wedding-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-4 m-auto">
+								<div className="col-lg-12 m-auto">
-									<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>Tamil Wedding & Custom</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Wedding & Custom</span></Link>

app/tamil-culture/tamil-wedding-custom/protestant-wedding/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+	title: "Protestant Tamil Wedding Traditions | Learn More",
+	description: "Explore Protestant Tamil wedding traditions and their cultural and religious significance.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function ProtestantWedding() {
 					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-protestant-banner.webp)' }}>
 						<div className="container">
 							<div className="row">
-												<div className="col-lg-5 m-auto">
+								<div className="col-lg-12 m-auto">
-													<div className="heading1 text-center">
+									<div className="heading1">
 										<h1>A Tamil Protestant Wedding</h1>
 										<div className="space20" />
 										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

app/tamil-culture/tamil-wedding-custom/story-of-saree/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Story of the Saree | Discover Tamil Heritage",
+    description: "Learn the story, history, and cultural importance of the saree in Tamil heritage.",
+};
 
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
@@ -14,8 +20,8 @@ export default function StoryOfSaree() {
                     <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/saree-banner.webp)' }}>
                         <div className="container">
                             <div className="row">
-                                                <div className="col-lg-5 m-auto">
+                                <div className="col-lg-12 m-auto">
-                                                    <div className="heading1 text-center">
+                                    <div className="heading1">
                                         <h1>The Story Of The Saree</h1>
                                         <div className="space20" />
                                         <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>

components/about/association/Section1.tsx

@@ -32,7 +32,7 @@ export default function Section1() {
                                     </div>
                                 </div>
                                 <div className="col-lg-6 order-1 order-lg-2 mb-5">
-                                    <div className="about6-header heading9 colored-text">
+                                    <div className="about6-header heading2 colored-text">
                                         {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
                                         {/* <div className="space20" /> */}
                                         <h2 className="text-anime-style-3">Association</h2>

components/about/association/Section2.tsx

@@ -10,7 +10,7 @@ export default function Section2() {
                     <div className="row align-items-center">
                         {/* TEXT - NOW ON THE LEFT */}
                         <div className="col-lg-6">
-                            <div className="about6-header heading9 colored-text">
+                            <div className="about6-header heading2 colored-text">
 
                                 <div className="space16" />
                                 <p data-aos="fade-left" data-aos-duration={900}>Over the years, the association has donated goods and services to Nunnavil Children’s Centre, Jaffna., Ind.; Rs 25,000 to fire victims in <span>Trichy, South India</span>.; cash donation to <span>Ramakrishna Mission children’s Library – Batticaloa, Sri Lanka,  St. John’s Soup Kitchen in Kitchener, Canadian Red Cross Tsunami fund for Sri Lanka and India, Rotary Club of Cambridge, St. Mary’s Hospital</span> and <span>Grand River Hospital</span> in Kitchener, <span>Cambridge Memorial Hospital</span>, Cambridge, <span>Operation Christmas Child Shoe box program, Flood victims in Chennai India</span>, Covid19 PPE/Mask donation to <span>CMH cambridge</span>, Food for needy during Covid19 to <span>upcountry tea estate community in Sri Lanka,

components/about/association/Section3.tsx

@@ -10,7 +10,7 @@ export default function Section3() {
                             <div className="row align-items-center">
                                 
                                 <div className="col-lg-12">
-                                    <div className="about6-header1 heading9 colored-text">
+                                    <div className="about6-header1 heading2 colored-text">
                                         {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
                                         {/* <div className="space20" />
                                         <h2 className="text-anime-style-3">Why Attend the Marketing Summit Event “2025”</h2> */}

components/about/committee/Section1.jsx

@@ -36,7 +36,7 @@ export default function Section1() {
             </div>
 
             <div className="col-lg-9">
-              <div className="team-sperkers-section-area sp1">
+              <div className="team-sperkers-section-area">
                 <div className="container">
                   <div className="row">
                     <div className="col-lg-11 m-auto">
@@ -62,7 +62,9 @@ export default function Section1() {
                                         </div>
                                       </div>
                                       <div className="content-area">
-                                       <Link href="/speakers-single">{member.name}</Link> 
+                                        <h5 style={{ fontWeight: "bold" }}>
+                                          {member.name}
+                                        </h5>
                                         <div className="space6" />
                                         <p>{member.post}</p>
                                       </div>

components/common/BootstrapInit.jsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function BootstrapInit() {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      require("bootstrap/dist/js/bootstrap.bundle.min.js");
+    }
+  }, []);
+
+  return null;
+}

components/common/ClientLayout.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import Preloader from '@/app/loading';
+import ScrollToTop from 'react-scroll-to-top';
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -31,7 +32,30 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
   return (
     <>
       {isLoading && <Preloader fadeOut={fadeOut} />}
-      {!isLoading && children}
+      {!isLoading && (
+        <>
+          {children}
+
+          {/* Scroll to Top Button */}
+          <ScrollToTop
+            smooth
+            color="#ffffffff"
+            style={{
+              background: '#ce2029',
+              borderRadius: '50%',
+              boxShadow: '0 4px 6px rgba(0,0,0,0.2)',
+              padding: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            svgPath="M222.138,91.475l-89.6-89.6c-2.5-2.5-6.551-2.5-9.051,0l-89.6,89.6c-2.5,2.5-2.5,6.551,0,9.051
+                      s6.744,2.5,9.244,0L122,21.85V249.6c0,3.535,2.466,6.4,6,6.4s6-2.865,6-6.4V21.85l78.881,78.676
+                      c1.25,1.25,2.992,1.875,4.629,1.875s3.326-0.625,4.576-1.875
+                      C224.586,98.025,224.638,93.975,222.138,91.475z"
+          />
+        </>
+      )}
     </>
   );
 }

components/contact/ContactSection.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import Layout from "@/components/layout/Layout";
+import Link from "next/link";
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
+
+interface FormData {
+    name: string;
+    phone: string;
+    email: string;
+    subject: string;
+    message: string;
+}
+
+interface FormErrors {
+    name?: string;
+    phone?: string;
+    email?: string;
+    subject?: string;
+    message?: string;
+    captcha?: string;
+}
+
+export default function ContactSection() {
+    const [formData, setFormData] = useState<FormData>({
+        name: "",
+        phone: "",
+        email: "",
+        subject: "",
+        message: "",
+    });
+
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+    const [formErrors, setFormErrors] = useState<FormErrors>({});
+    const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({
+        show: false,
+        type: "",
+        message: "",
+    });
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleCaptchaChange = (token: string | null) => {
+        setCaptchaToken(token);
+    };
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+
+        const errors: FormErrors = {};
+        if (!formData.name.trim()) errors.name = "Name is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone number is required.";
+        if (!formData.email.trim()) errors.email = "Email is required.";
+        if (!formData.subject.trim()) errors.subject = "Subject is required.";
+        if (!formData.message.trim()) errors.message = "Message is required.";
+        if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+
+        setFormErrors(errors);
+        if (Object.keys(errors).length > 0) return;
+
+        const emailData = {
+            ...formData,
+            message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
+            to: "mail@tamilculturewaterloo.org",
+            senderName: "Tamil Culture Waterloo Contact Page",
+            recaptchaToken: captchaToken,
+        };
+
+        try {
+            const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
+                headers: { "Content-Type": "application/json" },
+            });
+
+            setAlert({
+                show: true,
+                type: "success",
+                message: res?.data?.message || "Message sent successfully!",
+            });
+
+            setFormData({ name: "", phone: "", email: "", subject: "", message: "" });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch {
+            setAlert({
+                show: true,
+                type: "danger",
+                message: "Failed to send message. Please try again later.",
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (alert.show) {
+            const timer = setTimeout(() => {
+                setAlert(prev => ({ ...prev, show: false }));
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [alert.show]);
+
+
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <div>
+                <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/all-images/contact/contact-banner.webp)' }}>
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Contact Us</h1>
+                                    <div className="space20" />
+                                    <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Contact Us</span></Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space80" />
+                <div className="contact-bg-section">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-6 col-md-6">
+                                <div className="contact-boxarea3 mb-2" data-aos="zoom-in" data-aos-duration={900}>
+                                    <div className="icons">
+                                        <img src="/assets/img/icons/mail1.svg" alt="" />
+                                    </div>
+                                    <div className="text">
+                                        <h5>Email</h5>
+                                        <div className="space14" />
+                                        <Link href="mailto:mail@tamilculturewaterloo.org">mail@tamilculturewaterloo.org</Link>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-lg-6 col-md-6">
+                                <div className="contact-boxarea2" data-aos="zoom-in" data-aos-duration={900}>
+                                    <div className="icons">
+                                        <img src="/assets/img/icons/location1.svg" alt="" />
+                                    </div>
+                                    <div className="text">
+                                        <h5>Location</h5>
+                                        <div className="space14" />
+                                        <Link href="mailto:mail@tamilculturewaterloo.org">P.O. Box No:25068, Kitchener, Ontario, N2A 4A5, Canada.</Link>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* <div className="col-lg-4 col-md-6">
+								<div className="contact-boxarea3" data-aos="zoom-in" data-aos-duration={1000}>
+									<div className="icons">
+										<img src="/assets/img/icons/phn1.svg" alt="" />
+									</div>
+									<div className="text">
+										<h5>Call Us</h5>
+										<div className="space14" />
+										<Link href="tel:+11234567890">+1 123 456 7890</Link>
+									</div>
+								</div>
+							</div> */}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="contact-inner-section sp4">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-6" data-aos="zoom-in" data-aos-duration={1000}>
+                                <div className="contact4-boxarea">
+                                    <h3 className="text-anime-style-3">Get In Touch Now</h3>
+                                    <div className="space8" />
+                                    <form onSubmit={handleSubmit}>
+                                        {alert.show && (
+                                            <div className={`alert alert-${alert.type}`}>{alert.message}</div>
+                                        )}
+                                        <div className="row">
+                                            <div className="col-lg-6 col-md-6">
+                                                <div className="input-area">
+                                                    <input type="text" name="name" placeholder="Name" value={formData.name} onChange={handleChange} />
+                                                    {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-6 col-md-6">
+                                                <div className="input-area">
+                                                    <input type="text" name="phone" placeholder="Phone" value={formData.phone} onChange={handleChange} />
+                                                    {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-12 col-md-6">
+                                                <div className="input-area">
+                                                    <input type="email" name="email" placeholder="Email" value={formData.email} onChange={handleChange} />
+                                                    {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-12 col-md-6">
+                                                <div className="input-area">
+                                                    <input type="text" name="subject" placeholder="Subjects" value={formData.subject} onChange={handleChange} />
+                                                    {formErrors.subject && <small className="text-danger">{formErrors.subject}</small>}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-12">
+                                                <div className="input-area">
+                                                    <textarea name="message" placeholder="Message" value={formData.message} onChange={handleChange} />
+                                                    {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-12 mt-2">
+                                                <ReCAPTCHA
+                                                    sitekey="6Lea8ZYrAAAAAHaghaLjDx_K084IFATZby7Rzqhl"
+                                                    onChange={handleCaptchaChange}
+                                                />
+                                                {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                                            </div>
+                                            <div className="col-lg-12">
+                                                <div className="space24" />
+                                                <div className="input-area text-end">
+                                                    <button type="submit" className="vl-btn1">Submit Now</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                            <div className="col-lg-6">
+                                <div className="img1 image-anime">
+                                    <img
+                                        src="/assets/img/all-images/contact/contact-1.webp"
+                                        alt=""
+                                        style={{ border: 0, width: '100%', height: '620px' }}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="contact2-section">
+                    <div className="mapouter">
+                        <div className="gmap_canvas">
+                            <iframe
+                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.0622283957745!2d-80.39731242413884!3d43.434476063108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf3cd7b1f3f11%3A0xc93e0b894c6a8b15!2sKitchener%2C%20ON%20N2A%204A5%2C%20Canada!5e0!3m2!1sen!2sin!4v1720000000000!5m2!1sen!2sin"
+                                style={{ border: 0, width: '100%', height: '450px' }}
+                                allowFullScreen
+                                loading="lazy"
+                                referrerPolicy="no-referrer-when-downgrade"
+                            ></iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

components/events/PhotoGallerySection.jsx

@@ -0,0 +1,125 @@
+'use client';
+import axios from 'axios';
+import Layout from "@/components/layout/Layout";
+import Link from "next/link";
+import { useState, useEffect } from 'react';
+
+export default function PhotoGallerySection() {
+    const [selectedYear, setSelectedYear] = useState('');
+    const [events, setEvents] = useState([]);
+    const [years, setYears] = useState([]);
+
+    useEffect(() => {
+        getEvents();
+    }, []);
+
+    const getEvents = async () => {
+        try {
+            const eventRes = await axios.get(
+                'https://api.tamilculturewaterloo.org/api/events/'
+            );
+
+            const eventsData = eventRes?.data?.data || [];
+            setEvents(eventsData);
+
+            // Extract unique years & sort (latest first)
+            const uniqueYears = [...new Set(eventsData.map(event => event.year))].sort((a, b) => b - a);
+            setYears(uniqueYears);
+
+            // Default to latest year immediately
+            if (uniqueYears.length > 0) {
+                setSelectedYear(uniqueYears[0]);
+            }
+        } catch (error) {
+            console.log("error fetching data", error);
+        }
+    };
+
+    // Filter events by selected year
+    const filteredEvents = events.filter(event => event.year === selectedYear);
+
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <div>
+                {/* Header Section */}
+                <div
+                    className="inner-page-header"
+                    style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12 m-auto">
+                                <div className="heading1">
+                                    <h1>Recent Memories</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Memory Section */}
+                <div className="memory-inner-section-area blog-details-section sp4">
+                    <div className="container">
+                        <div className="row gx-5">
+                            {/* Left Column: Year Tabs */}
+                            <div className="col-lg-3 mb-4 mb-lg-0">
+                                <div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
+                                    <div className="blog-categories">
+                                        <ul className="list-unstyled">
+                                            {years.map((year) => (
+                                                <li key={year}>
+                                                    <button
+                                                        onClick={() => setSelectedYear(year)}
+                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year ? 'active' : ''}`}
+                                                    >
+                                                        Year {year}
+                                                    </button>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Right Column: Gallery */}
+                            <div className="col-lg-9">
+                                <div className="row justify-content-start">
+                                    {filteredEvents.map((event, idx) => (
+                                        <div className="col-lg-4 col-md-6 mb-4" key={idx}>
+                                            <div className="memory3-boxarea">
+                                                <div className="img1">
+                                                    <img src={event.eventimageurl} alt={event.eventtitle} />
+                                                </div>
+                                                <div className="content-area">
+                                                    <p>{event.eventdate}</p>
+                                                    <div className="space12" />
+                                                    <Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
+                                                        {event.eventtitle}
+                                                    </Link>
+                                                    <div className="plus">
+                                                        <Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
+                                                            <i className="fa-solid fa-plus" />
+                                                        </Link>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                    {filteredEvents.length === 0 && (
+                                        <div className="col-12 text-center">
+                                            <p>No events found for {selectedYear}</p>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

components/events/UpcomingEventData.jsx

@@ -1,571 +1,271 @@
 'use client'
 import Link from 'next/link'
+import moment from "moment";
 import { useState } from "react"
+import { events } from "@/utility/constant.utils"; // <-- import the events array here
 
 export default function UpcomingEventData() {
-    const [isTab, setIsTab] = useState(1)
+    const [currentMonth, setCurrentMonth] = useState(moment());
-    const handleTab = (i) => {
-        setIsTab(i)
-    }
-    return (
-        <>
 
+    // Get start and end of current month
+    const startOfMonth = currentMonth.clone().startOf("month");
+    const endOfMonth = currentMonth.clone().endOf("month");
+
+    // Generate calendar days
+    const daysInMonth = [];
+    for (let i = 0; i < startOfMonth.day(); i++) {
+        daysInMonth.push(null);
+    }
+    for (let i = 1; i <= endOfMonth.date(); i++) {
+        daysInMonth.push(moment(currentMonth).date(i));
+    }
+
+    // Get events for a given date
+    const getEventForDate = (date) => {
+        if (!date) return [];
+        const dateString = date.format("YYYY-MM-DD");
+        const dateStringDMY = date.format("DD/MM/YYYY");
+        return events.filter(event => {
+            if (!event.date) return false;
+            return event.date === dateString || event.date.includes(dateString) || event.date.includes(dateStringDMY);
+        });
+    };
+
+    const formatEventDate = (dateStr) => {
+        if (!dateStr) return "";
+
+        return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
+            const m = moment(date, "YYYY-MM-DD", true);
+            return m.isValid() ? m.format("ddd, MMM DD, YYYY") : date;
+        });
+    };
+
+    // Navigate months
+    const handleMonthChange = (direction) => {
+        setCurrentMonth(currentMonth.clone().add(direction, "months"));
+    };
+
+    return (
         <div className="event3-section-area sp4">
             <div className="container">
                 <div className="row">
                     <div className="col-lg-6 m-auto">
                         <div className="event2-header heading5 text-center space-margin60">
-                                {/* <h5>Event Schedule</h5> */}
+                            <h2 className="text-anime-style-3">Events</h2>
-                                <div className="space18" />
-                                <h2 className="text-anime-style-3">Upcoming Events</h2>
                         </div>
                     </div>
                 </div>
                 <div className="row">
-                        <div className="col-lg-12" data-aos="fade-up" data-aos-duration={1000}>
+                    {/* Calendar (left side) */}
+                    <div className="col-12 col-lg-3">
+                        <div className="d-flex justify-content-between align-items-center">
+                            <button
+                                className="vl-btn4"
+                                onClick={() => handleMonthChange(-1)}
+                            >
+                                Prev
+                            </button>
+                            <span className="mx-3 fw-700">
+                                {currentMonth.format("MMMM YYYY")}
+                            </span>
+                            <button
+                                className="vl-btn4"
+                                onClick={() => handleMonthChange(1)}
+                            >
+                                Next
+                            </button>
+                        </div>
 
+                        <table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}>
+                            <thead>
+                                <tr>
+                                    {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
+                                        <th key={index} className="text-center">
+                                            {day}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
+                                    <tr key={rowIndex}>
+                                        {daysInMonth
+                                            .slice(rowIndex * 7, (rowIndex + 1) * 7)
+                                            .map((day, index) => {
+                                                const eventList = getEventForDate(day);
+                                                return (
+                                                    <td
+                                                        key={index}
+                                                        style={{
+                                                            cursor: day ? "default" : "not-allowed",
+                                                            backgroundColor: eventList.length > 0 ? "#ce2029" : "white",
+                                                            color: eventList.length > 0 ? "white" : "black",
+                                                        }}
+                                                        title={
+                                                            eventList.length > 0
+                                                                ? eventList.map(e => e.title).join("\n")
+                                                                : ""
+                                                        }
+                                                    >
+                                                        {day ? (
+                                                            <div style={{ width: "100%", height: "100%" }}>
+                                                                <span className="text-end d-block">{day.date()}</span>
+                                                            </div>
+                                                        ) : (
+                                                            ""
+                                                        )}
+                                                    </td>
+                                                );
+                                            })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div className="col-lg-9" data-aos="fade-up" data-aos-duration={1000}>
                         <div className="tab-content" id="pills-tabContent">
-                                <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={"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">
-                                        <div className="row">
+                                    {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">
+                                                <div className="row align-items-center">
                                                     <div className="col-lg-1" />
                                                     <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
+                                                        <div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
-                                                    <h1 className="active">01</h1>
+                                                            <h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
-                                                    <div className="row align-items-center">
+
+                                                            {!isEven ? (
+                                                                <>
                                                                     <div className="col-lg-5">
                                                                         <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/thai-pongal.webp" alt="" />
+                                                                            <img src={event.image} alt={event.title} />
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:30 PM - Sun Jan-14<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">Thai Pongal 2024</Link>
-                                                                <div className="space24" />
-                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space48" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">02</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Apr 14, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Christ Lutheran Church , Waterloo, ON</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head"> AGM</Link>
-                                                                <div className="space24" />
-                                                                <p>Christ Lutheran Church , Waterloo, ON</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                            <div className="space30 d-lg-none d-block" />
-                                                        </div>
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/agm.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">03</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/kw.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jun 22-23, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener, ON.</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">KW Multicultural Festival</Link>
-                                                                <div className="space24" />
-                                                                <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">04</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />10:00 AM - Sun Jul 7, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Pinehurst Lake Conservation – Ayr, ON.</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">TCA Picnic – Potlock</Link>
-                                                                <div className="space24" />
-                                                                <p>Pinehurst Lake – Sutor Shelter, Ayr, ON</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
-                                                                </div>
-                                                            </div>
-                                                            <div className="space30 d-lg-none d-block" />
-                                                        </div>
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/picnic.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">05</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/sports.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jul 27-28, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Park, Waterloo, ON.</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">South Asian Family Sports Day</Link>
-                                                                <div className="space24" />
-                                                                <p>MEMBERS ONLY</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">06</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30-08:30 PM - Aug 23, 2023<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Kitchener, Ontario</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">Conestoga College Workshop</Link>
-                                                                <div className="space24" />
-                                                                <p>Conestoga College – WC 241</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                            <div className="space30 d-lg-none d-block" />
-                                                        </div>
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/workshop.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">07</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/cultural.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30 AM-08:30 PM - Aug 23, 2023<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Kitchener, Ontario</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">Tamil Cultural Nite</Link>
-                                                                <div className="space24" />
-                                                                <p>TBA</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">08</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />1.00 PM-4.30 PM - Sat Oct 26, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                    <img src="/assets/img/icons/location1.svg" alt="" />Waterloo Public Library
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">TCA – WPL Deepavali Celebrations</Link>
-                                                                <div className="space24" />
-                                                                <p>John M. Harper Branch 500 Fischer-Hallman Rd N, Waterloo, ON</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                            <div className="space30 d-lg-none d-block" />
-                                                        </div>
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/deepavali.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space30" />
-                                        <div className="row">
-                                            <div className="col-lg-1" />
-                                            <div className="col-lg-10 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">09</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/event/upcoming-event/christmas.webp" alt="" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:00 PM-09:00 PM - Sat Dec 21, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />RIM Park</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">Christmas & 2024 Year End Celebration</Link>
-                                                                <div className="space24" />
-                                                                <p>2001 University Ave E, Waterloo, ON N2K 4K4</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
                                                                         </div>
                                                                     </div>
 
-                            </div>
+                                                                    <div className="col-lg-1" />
-                        </div>
-                    </div>
-                </div>
-            </div>
 
+                                                                    <div className="col-lg-6">
+                                                                        <div className="content-area">
+                                                                            <ul>
+                                                                                <li>
+                                                                                    <span className='d-flex g-3 metered-data'>
+                                                                                        <img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
+                                                                                        {event.time ? `${event.time} - ` : ""}
+                                                                                        {formatEventDate(event.date)}
+                                                                                    </span>
+                                                                                </li>
+                                                                                {event.location && event.location.trim() && (
+                                                                                    <li>
+                                                                                        <span className='d-flex g-3 metered-data'>
+                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{" "}
+                                                                                            {event.location}
+                                                                                        </span>
+                                                                                    </li>
+                                                                                )}
+                                                                            </ul>
+                                                                            <div className="space20" />
+                                                                            <Link href={event.link || "#"} className="head">{event.title}</Link>
+                                                                            <div className="space24" />
+                                                                            <p
+                                                                                style={{
+                                                                                    display: '-webkit-box',
+                                                                                    WebkitLineClamp: 2,
+                                                                                    WebkitBoxOrient: 'vertical',
+                                                                                    overflow: 'hidden',
+                                                                                    textOverflow: 'ellipsis',
+                                                                                }}
+                                                                            >
+                                                                                {event.desc}
+                                                                            </p>
+
+                                                                            <div className="space24" />
+                                                                            <div className="btn-area1">
+                                                                                <Link
+                                                                                    href={buttonHref}
+                                                                                    className="vl-btn3"
+                                                                                    {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                >
+                                                                                    <span className="demo">{event.btnText || "Online Tickets"}</span>
+                                                                                </Link>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
                                                                 </>
+                                                            ) : (
+                                                                <>
+                                                                    <div className="col-lg-6">
+                                                                        <div className="content-area">
+                                                                            <ul>
+                                                                                <li>
+                                                                                    <span className='d-flex g-3 metered-data'>
+                                                                                        <img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
+                                                                                        {event.time ? `${event.time} - ` : ""}
+                                                                                        {formatEventDate(event.date)}
+                                                                                    </span>
+                                                                                </li>
+                                                                                {event.location && event.location.trim() && (
+                                                                                    <li>
+                                                                                        <span className='d-flex g-3 metered-data'>
+                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{" "}
+                                                                                            {event.location}
+                                                                                        </span>
+                                                                                    </li>
+                                                                                )}
+                                                                            </ul>
+                                                                            <div className="space20" />
+                                                                            <Link href={event.link || "#"} className="head">{event.title}</Link>
+                                                                            <div className="space24" />
+                                                                            <p
+                                                                                style={{
+                                                                                    display: '-webkit-box',
+                                                                                    WebkitLineClamp: 2,
+                                                                                    WebkitBoxOrient: 'vertical',
+                                                                                    overflow: 'hidden',
+                                                                                    textOverflow: 'ellipsis',
+                                                                                }}
+                                                                            >
+                                                                                {event.desc}
+                                                                            </p>
+                                                                            <div className="space24" />
+                                                                            <div className="btn-area1">
+                                                                                <Link
+                                                                                    href={buttonHref}
+                                                                                    className="vl-btn3"
+                                                                                    {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                >
+                                                                                    <span className="demo">{event.btnText || "Online Tickets"}</span>
+                                                                                </Link>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div className="col-lg-1" />
+
+                                                                    <div className="col-lg-5">
+                                                                        <div className="img1">
+                                                                            <img src={event.image} alt={event.title} />
+                                                                        </div>
+                                                                    </div>
+                                                                </>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     )
 }

components/events/UpcomingEventSinglePage.jsx

@@ -0,0 +1,154 @@
+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: {event.time || "Details will be announced"}</li>
+                                        </ul>
+                                        <div className="space18" />
+                                        {event.admission && (
+                                            <>
+                                                <ul>
+                                                    <li>Admission: {event.admission}</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/AboutSection.tsx

@@ -31,18 +31,19 @@ export default function AboutSection() {
                                                 </div>
                                             </div>
                                         </div> */}
-                                        	<div className="about3-images">
+                                        <div className="img2">
-								{/* <img src="/assets/img/all-images/about/about-img10.png" alt="" className="about-img10 aniamtion-key-1" /> */}
+                                            <img src="/assets/img/home/about/about.webp" alt="" style={{ width: "100%" }} />
+                                        </div>
+                                        {/* <div className="about3-images">
+								
 								<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
 									<img src="/assets/img/home/about/big-circle.webp" alt="" />
 								</div>
-								{/* <div className="img2" data-aos="zoom-in" data-aos-duration={1100}>
+								
-									<img src="/assets/img/home/about/small-circle-1.webp" alt="" />
-								</div> */}
 								<div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
 									<img src="/assets/img/home/about/small-circle-2.webp" alt="" />
 								</div>
-							</div>
+							</div> */}
                                     </div>
                                 </div>
                                 <div className="col-lg-6">
@@ -51,12 +52,25 @@ export default function AboutSection() {
                                         {/* <div className="space18" /> */}
                                         <h2 className="text-anime-style-3">Welcome to TCA website</h2>
                                         <div className="space18" />
-                                        <p data-aos="fade-left" data-aos-duration={900}>Learn Tamil Arts, Culture and Heritage and events in and around Waterloo – Guelph Region in the province of Ontario, Canada.</p>
+                                        <p data-aos="fade-left" data-aos-duration={900}>
+                                            Learn Tamil Arts, Culture and Heritage and events in and around Waterloo – Guelph Region in the province of Ontario, Canada.
+                                        </p>
+
                                         <div className="space8" />
-                                        <p data-aos="fade-left" data-aos-duration={900}>The website has a wealth of information that would interest you.</p>
+                                        <p data-aos="fade-left" data-aos-duration={900}>
+                                            The website has a wealth of information that would interest you.
+                                        </p>
+
                                         <div className="space8" />
-                                        <p data-aos="fade-left" data-aos-duration={900}>Our main goal is to expose local Tamil culture to others and also for next generation of Canadians to understand who we are in the cultural mosaic.</p>
+                                        <p data-aos="fade-left" data-aos-duration={900}>
+                                            Our main goal is to expose local Tamil culture to others and also for next generation of Canadians to understand who we are in the cultural mosaic.
+                                        </p>
+
                                         <div className="space12" />
+                                        <p data-aos="fade-left" data-aos-duration={900}>
+                                            We strive to bring together the Tamil community through festivals, workshops, and cultural activities. Our events showcase traditional dance, music, literature, and cuisine to celebrate Tamil heritage. By participating, you become part of preserving and promoting Tamil identity for future generations.
+                                        </p>
+
                                         {/* <div className="counter-area" data-aos="fade-left" data-aos-duration={1000}>
                                             <div className="counter-box">
                                                 <h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3>
@@ -82,11 +96,11 @@ export default function AboutSection() {
                                 </div>
                             </div>
                         </div>
-                        <div className='col-lg-2'>
+                        <div className='col-2 ad-banner'>
                             <div className="memory-boxarea pl-3">
 
-                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
+                                <div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" style={{height:"500px"}}/>
+                                    <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{ height: "500px", width: "100%" }} />
                                 </div>
                             </div>
                         </div>

components/home/AdSectionFive.tsx

@@ -46,7 +46,7 @@ export default function AdSectionFive() {
                             <div className="memory-boxarea pl-3">
 
                                 <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{height:"270px", width:"100%"}}/>
+                                    <img src="/assets/img/home/ad-banner/ad2.webp" alt="" style={{height:"270px", width:"100%"}}/>
                                 </div>
                             </div>
                         </div>

components/home/AdSectionOne.tsx

@@ -46,7 +46,7 @@ export default function AdSectionOne() {
                             <div className="memory-boxarea pl-3">
 
                                 <div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{height:"270px", width:"100%"}}/>
+                                    <img src="/assets/img/home/ad-banner/ad2.webp" alt="" style={{height:"270px", width:"100%"}}/>
                                 </div>
                             </div>
                         </div>

components/home/AdSectionThree.tsx

@@ -46,7 +46,7 @@ export default function AdSectionThree() {
                             <div className="memory-boxarea pl-3">
 
                                 <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{ height: "270px", width: "100%" }} />
+                                    <img src="/assets/img/home/ad-banner/ad2.webp" alt="" style={{ height: "270px", width: "100%" }} />
                                 </div>
                             </div>
                         </div>

components/home/ArtsAndCultureSection.tsx

@@ -54,8 +54,8 @@ export default function ArtAndCultureSection() {
             <div className="col-lg-12 memory-slider-area">
               <Swiper
                 modules={[Autoplay, Navigation]}
-                slidesPerView={3}
+                slidesPerView={4}
-                spaceBetween={30}
+                spaceBetween={10}
                 autoplay={{ delay: 2500, disableOnInteraction: false }}
                 loop={true}
                 onSwiper={(swiper) => (swiperRef.current = swiper)}
@@ -66,7 +66,7 @@ export default function ArtAndCultureSection() {
                   767: { slidesPerView: 2, spaceBetween: 30 },
                   991: { slidesPerView: 2, spaceBetween: 30 },
                   1199: { slidesPerView: 3, spaceBetween: 30 },
-                  1350: { slidesPerView: 3, spaceBetween: 30 },
+                  1350: { slidesPerView: 4, spaceBetween: 10 },
                 }}
                 className="owl-carousel"
               >
@@ -107,7 +107,7 @@ export default function ArtAndCultureSection() {
           <div className='col-lg-2 ad-banner'>
             <div className="memory-boxarea pl-3">
               <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
-                <img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
+                <img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "390px", width: "100%" }} />
               </div>
             </div>
           </div>

components/home/HeroBanner.tsx

@@ -14,53 +14,91 @@ export default function HomeHeroBanner() {
         // {
         //     title: 'World Music Events 2025',
         //     date: 'SERVING',
-        //     location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
+        //     location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
         //     bgImage: '/assets/img/home/banner/banner-1.webp',
         //     image: '/assets/img/all-images/hero/hero-img11.png',
         // },
         {
-            title: "Grace moves with every beat <br />Tradition meets bass",
+            // title: 'Tamil Cultural Nite 2025',
-            date: 'SERVING',
+            // date: 'SERVING',
-            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
+            // location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
-            bgImage: '/assets/img/home/banner/banner-2.webp',
+            bgImage: '/assets/img/home/banner/banner.webp',
-            image: '/assets/img/all-images/hero/hero-img12.png',
+            mobileBgImage: '/assets/img/home/banner/mobile-banner.jpeg',
+            // image: '/assets/img/all-images/hero/hero-img12.png',
+            // buttonText: "Book Now",
+            // buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
         },
         {
-            title: "Crafted with tradition’s hands <br />Feel the rhythm of our roots",
+            title: 'Tamil Cultural Nite 2025',
             date: 'SERVING',
-            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
+            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
-            bgImage: '/assets/img/home/banner/banner-3.webp',
+            bgImage: '/assets/img/home/banner/hero-banner-3.webp',
             image: '/assets/img/all-images/hero/hero-img12.png',
+            buttonText: "Book Now",
+            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
         },
         {
-            title: 'Lighting hearts across globe <br />A blend of sound & spirit',
+            title: "Tamil Cultural Nite 2025",
             date: 'SERVING',
-            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
+            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
-            bgImage: '/assets/img/home/banner/banner-4.webp',
+            bgImage: '/assets/img/home/banner/hero-banner-1.webp',
             image: '/assets/img/all-images/hero/hero-img12.png',
+            buttonText: "Book Now",
+            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
         },
         {
-            title: ' Rooted in timeless wisdom <br />Echoes of legacy in drop',
+            title: "Tamil Cultural Nite 2025",
             date: 'SERVING',
-            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
+            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
-            bgImage: '/assets/img/home/banner/banner-5.webp',
+            bgImage: '/assets/img/home/banner/hero-banner-2.webp',
             image: '/assets/img/all-images/hero/hero-img12.png',
+            buttonText: "Book Now",
+            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
+        },
+
+        {
+            title: 'Tamil Cultural Nite 2025',
+            date: 'SERVING',
+            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
+            bgImage: '/assets/img/home/banner/hero-banner-5.webp',
+            image: '/assets/img/all-images/hero/hero-img12.png',
+            buttonText: "Book Now",
+            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
         },
     ];
 
     return (
+        <>
+            <style dangerouslySetInnerHTML={{__html: `
+                @media (max-width: 600px) {
+                    .hero-container-first {
+                        padding-top: 200px !important;
+                    }
+                }
+                ${slideData.map((slide, index) => slide.mobileBgImage ? `
+                @media (max-width: 600px) {
+                    .mobile-bg-slide-${index} {
+                        background-image: url('${slide.mobileBgImage}') !important;
+                        background-position: top center !important;
+                        background-size: 100% 93% !important;
+                        padding-top: 172px !important;
+                        top: 29px !important;
+                        position: relative !important;
+                    }
+                }` : '').join('\n')}
+            `}} />
         <Swiper
             modules={[Autoplay, Navigation, Pagination]}
             slidesPerView={1}
             loop={true}
-            autoplay={{ delay: 2000 }}
+            autoplay={{ delay: 5000 }}
             navigation
-            pagination={{ clickable: true }}
+        // pagination={{ clickable: true }} 
         >
             {slideData.map((slide, index) => (
                 <SwiperSlide key={index}>
                     <div
-                        className="hero9-slider-area"
+                        className={"hero9-slider-area " + (slide.mobileBgImage ? "mobile-bg-slide-" + index : "")}
                         style={{
                             backgroundImage: `url(${slide.bgImage})`,
                             backgroundRepeat: 'no-repeat',
@@ -68,60 +106,56 @@ export default function HomeHeroBanner() {
                             backgroundPosition: 'center bottom',
                         }}
                     >
-                        <div className="container">
+                        <div className={`container ${index === 0 ? 'hero-container-first' : ''}`} style={index === 0 ? { paddingTop: '180px' } : {}}>
                             <div className="row align-items-center">
                                 <div className="col-lg-7">
                                     <div className="hero8-header">
+                                        {slide.title && (
+                                            <>
                                                 <h5>
-                                            {/* <img src="/assets/img/icons/sub-logo1.svg" alt="" /> */}
                                                     Where Culture Meets the Beat
                                                 </h5>
                                                 <div className="space16" />
-                                        <h1 className="text-anime-style-3"dangerouslySetInnerHTML={{ __html: slide.title || ''}}></h1>
+                                                <h1 className="text-anime-style-3" dangerouslySetInnerHTML={{ __html: slide.title }}></h1>
+                                            </>
+                                        )}
                                         <div className="space32" />
+                                        {slide.buttonLink && slide.buttonText && (
                                             <div className="btn-area1">
-                                            <Link href="/contact" className="vl-btn9">
+                                                <Link href={slide.buttonLink} className="vl-btn9">
-                                                <span className="demo">Buy Tickets Now!</span>
+                                                    <span className="demo">{slide.buttonText}</span>
                                                 </Link>
-                                            {/* <Link href="/event-schedule" className="vl-btn9 btn2">
+                                            </div>
-                                                <span className="demo">Schedules</span>
+                                        )}
-                                            </Link> */}
                                     </div>
                                 </div>
                             </div>
-                                {/* <div className="col-lg-5">
+                            {(slide.date || slide.location) && (
-                                    <div className="img1">
-                                        <img src={slide.image} alt="" />
-                                    </div>
-                                </div> */}
-                            </div>
                                 <div className="row">
                                     <div className="col-lg-12">
                                         <div className="timer-bg-area">
-                                        <div className="row" >
+                                            <div className="row d-flex justify-content-center align-items-center" >
-                                            {/* <div className="col-lg-7">
+                                                <div className="col-lg-12 text-center d-flex justify-content-center align-items-center">
-                                                <div className="timer-btn-area">
-                                                    <Countdown style={1} />
-                                                </div>
-                                            </div> */}
-                                            <div className="col-lg-12 text-center">
                                                     <div className="heading12">
-                                                    <h3>{slide.date}</h3>
+                                                        {slide.date && <h3>{slide.date}</h3>}
-                                                    <div className="space16" />
+                                                        {slide.location && (
                                                             <p>
                                                                 <img src="/assets/img/icons/location1.svg" alt="" />
                                                                 {slide.location}
                                                             </p>
+                                                        )}
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                            )}
                         </div>
                     </div>
                 </SwiperSlide>
             ))}
         </Swiper>
+        </>
     );
 }

components/home/HomeCommunitySection.tsx

@@ -32,30 +32,30 @@ export default function HomeCommunitySection() {
                                         </div>
                                     </div>
                                 </div>
-                                <div className="col-lg-4 col-md-6">
+                                {/* <div className="col-lg-4 col-md-6">
                                     <div className="team10-widget-boxarea2">
                                         <div className="img1 image-anime">
                                             <img src="/assets/img/home/community/cricket.webp" alt="" />
                                         </div>
                                         <div className="text-area">
                                             <Link href="community/cricket-club">Cricket Club</Link>
-                                            {/* <div className="space16" /> */}
+                                            <div className="space16" />
-                                            {/* <p>Cybersecurity Expert</p> */}
+                                            <p>Cybersecurity Expert</p>
                                         </div>
                                     </div>
-                                </div>
+                                </div> */}
-                                <div className="col-lg-4 col-md-6">
+                                {/* <div className="col-lg-4 col-md-6">
                                     <div className="team10-widget-boxarea2">
                                         <div className="img1 image-anime">
                                              <img src="/assets/img/home/community/badminton.webp" alt="" />
                                         </div>
                                         <div className="text-area">
                                             <Link href="/community/badminton-club">Badminton Club</Link>
-                                            {/* <div className="space16" /> */}
+                                            <div className="space16" />
-                                            {/* <p>Branding</p> */}
+                                            <p>Branding</p>
-                                        </div>
                                         </div>
                                     </div>
+                                </div> */}
                                 <div className="col-lg-4 col-md-6">
                                     <div className="team10-widget-boxarea2">
                                         <div className="img1 image-anime">
@@ -68,18 +68,6 @@ export default function HomeCommunitySection() {
                                         </div>
                                     </div>
                                 </div>
-                                <div className="col-lg-4 col-md-6">
-                                    <div className="team10-widget-boxarea2">
-                                        <div className="img1 image-anime">
-                                             <img src="/assets/img/home/community/tamil-school.webp" alt="" />
-                                        </div>
-                                        <div className="text-area">
-                                            <Link href="/community/tamil-school">Tamil School</Link>
-                                            {/* <div className="space16" /> */}
-                                            {/* <p>GreenTech Innovations</p> */}
-                                        </div>
-                                    </div>
-                                </div>
                                 <div className="col-lg-4 col-md-6">
                                     <div className="team10-widget-boxarea2">
                                         <div className="img1 image-anime">
@@ -116,13 +104,37 @@ export default function HomeCommunitySection() {
                                         </div>
                                     </div>
                                 </div> */}
+                                <div className="col-lg-4 col-md-6">
+                                    <div className="team10-widget-boxarea2">
+                                        <div className="img1 image-anime">
+                                             <img src="/assets/img/home/community/tamil-school.webp" alt="" />
+                                        </div>
+                                        <div className="text-area">
+                                            <Link href="/community/kitchener-tamil-school"> Kitchener Tamil School</Link>
+                                            {/* <div className="space16" /> */}
+                                            {/* <p>GreenTech Innovations</p> */}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="col-lg-4 col-md-6">
+                                    <div className="team10-widget-boxarea2">
+                                        <div className="img1 image-anime">
+                                             <img src="/assets/img/home/community/tamil-school.webp" alt="" />
+                                        </div>
+                                        <div className="text-area">
+                                            <Link href="/community/cambridge-tamil-school">Cambridge Tamil School</Link>
+                                            {/* <div className="space16" /> */}
+                                            {/* <p>GreenTech Innovations</p> */}
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
                         <div className='col-2 ad-banner'>
                             <div className="memory-boxarea pl-3">
                                 <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="/assets/img/home/ad-banner/TCA-Web-Banner-Large.jpg" alt="" style={{height:"830px"}} />
+                                    <img src="/assets/img/home/ad-banner/TCA-Web-Banner-Large.webp" alt="" style={{height:"830px"}} />
                                 </div>
                             </div>
                         </div>

components/home/HomePhotoGallerySection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
@@ -13,68 +14,101 @@ interface GalleryImage {
 }
 
 export default function HomePhotoGallerySection() {
-    const galleryImages: GalleryImage[] = [
+    const [galleryImages, setGalleryImages] = useState<GalleryImage[]>([]);
-        { src: "/assets/img/home/photos-gallery/christmas.webp", delay: 800, year: 2025 },
+    const [years, setYears] = useState<number[]>([]);
-        { src: "/assets/img/home/photos-gallery/m-g.webp", delay: 1000, year: 2025 },
+    const [activeYear, setActiveYear] = useState<number | null>(null);
-        { src: "/assets/img/home/photos-gallery/thai-pongal.webp", delay: 1000, year: 2004 },
-        { src: "/assets/img/home/photos-gallery/multicultural.webp", delay: 1000, year: 2023 },
-        { src: "/assets/img/home/photos-gallery/sports.webp", delay: 1000, year: 2024 },
-        { src: "/assets/img/home/photos-gallery/tamil-new-yr.webp", delay: 1000, year: 2022 },
-
-        { src: "/assets/img/home/photos-gallery/kw.webp", delay: 1200, year: 1989 },
-        { src: "/assets/img/home/photos-gallery/tamil-heritage.webp", delay: 800, year: 2025 },
-    ];
-
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const [activeTab, setActiveTab] = useState<'All' | number>('All');
 
-    const years = Array.from(new Set(galleryImages.map(img => img.year))).sort((a, b) => b - a);
+    useEffect(() => {
-    const tabs: (number | 'All')[] = ['All', ...years];
+        getEvents();
+    }, []);
 
-    const filteredImages = activeTab === 'All'
+    const getEvents = async () => {
-        ? galleryImages
+        try {
-        : galleryImages.filter(img => img.year === activeTab);
+            const eventRes = await axios.get(
+                'https://api.tamilculturewaterloo.org/api/events/'
+            );
+
+            const eventsData = eventRes?.data?.data || [];
+
+            // Extract images with year (flattened array)
+            const formatted = eventsData.map((img: any) => ({
+                id: img.id,
+                src: img.eventimageurl,
+                title: img?.eventtitle || '',
+                description: img?.eventdescription || '',
+                year: img?.year
+            }));
+
+            setGalleryImages(formatted);
+
+            // Unique years, sorted latest first
+            const uniqueYears: any = [...new Set(eventsData.map((event: any) => event.year))]
+
+            setYears(uniqueYears);
+
+            // Set latest year as default tab
+            if (uniqueYears.length > 0) {
+                setActiveYear(uniqueYears[0]);
+            }
+        } catch (error) {
+            console.log("Error fetching event images:", error);
+        }
+    };
+
+    console.log("activeYear", activeYear)
+    console.log("galleryImages", galleryImages)
+
+    // Filter images by active year
+    const filteredImages = galleryImages.filter((img) => img.year === activeYear)
+
+
+    console.log("filteredImages", filteredImages)
 
     const handleImageClick = (index: number) => {
-        const actualIndex = galleryImages.findIndex(img => img.src === filteredImages[index].src);
+        const actualIndex = galleryImages.findIndex(
+            (img) => img.src === filteredImages[index].src
+        );
         setCurrentIndex(actualIndex);
         setOpen(true);
     };
 
     return (
         <>
-            <div className="bloginner-section-area sp3">
+            <div className="bloginner-section-area sp4">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12 m-auto">
                             <div className="event2-header heading5 space-margin60">
                                 <h2 className="text-anime-style-3">Photos Gallery</h2>
 
-                                {/* Tabs */}
+                                {/* Year Tabs */}
                                 <div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
-                                    {tabs.map((tab, i) => (
+                                    {years.map((year) => (
                                         <button
-                                            key={i}
+                                            key={year}
-                                            className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`}
+                                            className={`btn btn-sm gallery-btn ${activeYear === year ? 'btn-primary' : 'btn-outline-primary'
-                                            onClick={() => setActiveTab(tab)}
+                                                }`}
+                                            onClick={() => setActiveYear(year)}
                                         >
-                                            {tab === 'All' ? 'All' : tab}
+                                            {year}
                                         </button>
                                     ))}
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className='row gx-5'>
+
-                        <div className='col-lg-10'>
+                    <div className="row gx-5">
+                        <div className="col-lg-10">
                             <div className="row mt-4">
-                                {filteredImages.slice(0, 8).map((img, index) => (
+                                {filteredImages.slice(0, 8).map((img: any, index) => (
                                     <div
                                         key={index}
-                                        className="col-lg-3 col-md-6"
+                                        className="col-lg-3 col-md-6 mb-4"
                                         data-aos="zoom-in"
-                                        data-aos-duration={img.delay || 1000}
+                                        data-aos-duration={1000}
                                     >
                                         <div className="blog4-boxarea">
                                             <div
@@ -88,36 +122,53 @@ export default function HomePhotoGallerySection() {
                                                     loading="lazy"
                                                     style={{ width: '100%', height: 'auto' }}
                                                 />
+                                                <h3>{img?.eventtitle}</h3>
                                             </div>
                                         </div>
                                     </div>
                                 ))}
+
                                 {filteredImages.length === 0 && (
                                     <div className="col-12 text-center mt-5">
-                                        <p className="text-muted">No images found for selected year.</p>
+                                        <p className="text-muted">
+                                            No images found for {activeYear}.
+                                        </p>
                                     </div>
                                 )}
+
+                                <div
+                                    className="btn-area1 text-center"
+                                    data-aos="fade-left"
+                                    data-aos-duration={1200}
+                                >
+                                    <Link href="/photo-gallery" className="vl-btn3">
+                                        Go To Gallery
+                                    </Link>
                                 </div>
                             </div>
-                        <div className='col-lg-2 ad-banner'>
+                        </div>
+
+                        <div className="col-lg-2 ad-banner">
                             <div className="memory-boxarea pl-3">
+                                <div
+                                    className="img1"
+                                    data-aos="zoom-in"
+                                    data-aos-duration={1000}
+                                >
+                                    <img
+                                        src="/assets/img/home/ad-banner/photo-gallery-ad.webp"
+                                        alt=""
+                                        className="mb-5"
+                                    />
+                                </div>
+                            </div>
+                        </div>
 
-                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
+                        {/* <div className="col-lg-12">
-                                    <img src="/assets/img/home/ad-banner/photo-gallery-ad.webp" alt="" className='mb-5' />
-                                    {/* <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/> */}
-
-                                </div>
-                            </div>
-                        </div>
-                        <div className='col-lg-12'>
                             <div className="space32" />
-                            <div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}>
-                                <Link href="/photo-gallery" className="vl-btn3">know More</Link>
-                            </div>
-                        </div>
                            
+                        </div> */}
                     </div>
-
                 </div>
             </div>
 

components/home/HomeUpcomingEvent.tsx

@@ -1,70 +1,53 @@
 'use client'
 import Link from 'next/link'
 import { useState } from "react"
+import { events } from "@/utility/constant.utils" // import your events array
 
 export default function HomeUpcomingEvent() {
     const [isTab, setIsTab] = useState(1)
     const handleTab = (i: number) => {
         setIsTab(i)
     }
+
+    // Take only the first 3 events
+    const displayEvents = events.slice(0, 3) as any[];
+
     return (
         <>
 
-            <div className="event3-section-area sp4">
+            <div className="event3-section-area">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12 m-auto">
                             <div className="event2-header heading5 space-margin60">
-                                {/* <h5>Event Schedule</h5>
+                                <h2 className="text-anime-style-3">Events</h2>
-                                <div className="space18" /> */}
-                                <h2 className="text-anime-style-3">Upcoming Events</h2>
                             </div>
                         </div>
                     </div>
                     <div className="row gx-5">
                         <div className="col-lg-10" data-aos="fade-up" data-aos-duration={1000}>
-                            {/* <div className="tabs-button space-margin60">
-                                <ul className="nav nav-pills" id="pills-tab" role="tablist">
-                                    <li className="nav-item" onClick={() => handleTab(1)}>
-                                        <button className={isTab == 1 ? "nav-link active" : "nav-link"} id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
-                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /></span>
-                                            <span className="pl-8">
-                                                <span className="day">Day One</span>
-                                                <span className="date">May 25, 2024</span>
-                                            </span>
-                                        </button>
-                                    </li>
-                                    <li className="nav-item" onClick={() => handleTab(2)}>
-                                        <button className={isTab == 2 ? "nav-link active" : "nav-link"} id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
-                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /></span>
-                                            <span className="pl-8">
-                                                <span className="day">Day Two</span>
-                                                <span className="date">May 26, 2024</span>
-                                            </span>
-                                        </button>
-                                    </li>
-                                    <li className="nav-item" onClick={() => handleTab(3)}>
-                                        <button className={isTab == 3 ? "nav-link m-0 active" : "nav-link m-0"} id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
-                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /> </span>
-                                            <span className="pl-8">
-                                                <span className="day">Day Three</span>
-                                                <span className="date">May 27, 2024</span>
-                                            </span>
-                                        </button>
-                                    </li>
-                                </ul>
-                            </div> */}
                             <div className="tab-content" id="pills-tabContent">
                                 <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) => {
+                                            const buttonHref = event.url || event.link || "#";
+                                            const isExternalButton = /^https?:\/\//.test(buttonHref);
+
+                                            return (
+                                                <div key={event.id}>
+                                                    {idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />}
                                                     <div className="row">
                                                         <div className="col-lg-12 m-auto">
                                                             <div className="event2-boxarea box1">
-                                                    <h1 className="active">01</h1>
+                                                                <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">
-                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-1.webp" alt="" />
+                                                                                <img src={event.image} alt={event.title} />
                                                                             </div>
                                                                         </div>
                                                                         <div className="col-lg-1" />
@@ -72,170 +55,115 @@ export default function HomeUpcomingEvent() {
                                                                             <div className="content-area">
                                                                                 <ul>
                                                                                     <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />5:30 PM - Sun Jan - 14 <span> | </span></Link>
+                                                                                        <Link href={event.url || "#"}>
+                                                                                            <span className='d-flex g-3 metered-data align-items-end'>
+                                                                                                <img src="/assets/img/icons/clock1.svg" alt="" />
+                                                                                                {event.time ? event.time + " - " : ""}{event.date}<span> | </span>
+                                                                                            </span>
+                                                                                        </Link>
                                                                                     </li>
                                                                                     <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada </Link>
+                                                                                        <Link href={event.url || "#"}>
+                                                                                            <span className='d-flex g-3 metered-data align-items-end'>                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
+                                                                                            </span>
+
+                                                                                        </Link>
                                                                                     </li>
                                                                                 </ul>
                                                                                 <div className="space20" />
-                                                                <Link href="#" className="head">Thai Pongal 2024</Link>
+                                                                                <Link href={event.link || "#"} className="head">{event.title}</Link>
                                                                                 <div className="space24" />
-                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
+                                                                                <p
-                                                                {/* <div className="author-area">
+                                                                                    style={{
-                                                                    <div className="autho-name-area">
+                                                                                        display: '-webkit-box',
-                                                                        <div className="img1">
+                                                                                        WebkitLineClamp: 1,
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
+                                                                                        WebkitBoxOrient: 'vertical',
-                                                                        </div>
+                                                                                        overflow: 'hidden',
-                                                                        <div className="text">
+                                                                                        textOverflow: 'ellipsis',
-                                                                            <Link href="/speakers">Alex Roberton</Link>
+                                                                                    }}
-                                                                            <div className="space8" />
+                                                                                >
-                                                                            <p>UI/UX Designer</p>
+                                                                                    {event.desc}
-                                                                        </div>
+                                                                                </p>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
                                                                                 <div className="space24" />
                                                                                 <div className="btn-area1">
-                                                                    <Link href="#" className="vl-btn3"><span className="demo">purchase ticket</span></Link>
+                                                                                    <Link
+                                                                                        href={buttonHref}
+                                                                                        className="vl-btn3"
+                                                                                        {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                    >
+                                                                                        <span className="demo">{event.btnText || "purchase ticket"}</span>
+                                                                                    </Link>
                                                                                 </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="space48" />
-                                        <div className="row">
 
-                                            <div className="col-lg-12 m-auto">
+                                                                            </div>
-                                                <div className="event2-boxarea box1">
+                                                                        </div>
-                                                    <h1 className="active">02</h1>
+                                                                    </>
-                                                    <div className="row align-items-center">
+                                                                ) : (
-                                                        <div className="col-lg-6">
+                                                                    <>
+                                                                        <div className="col-lg-6 order-2 order-lg-1">
                                                                             <div className="content-area">
                                                                                 <ul>
                                                                                     <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Apr 14, 2024<span> | </span></Link>
+                                                                                        <Link href={event.url || "#"}>
+                                                                                            <span className='d-flex g-3 metered-data align-items-end'>
+                                                                                                <img src="/assets/img/icons/clock1.svg" alt="" />
+                                                                                                {event.time ? event.time + " - " : ""}{event.date}<span> | </span>
+                                                                                            </span>
+                                                                                        </Link>
                                                                                     </li>
                                                                                     <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Christ Lutheran Church , Waterloo, ON. </Link>
+                                                                                        <Link href={event.url || "#"}>
+                                                                                            <span className='d-flex g-3 metered-data align-items-end'>                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
+                                                                                            </span>
+
+                                                                                        </Link>
                                                                                     </li>
                                                                                 </ul>
                                                                                 <div className="space20" />
-                                                                <Link href="#" className="head">AGM</Link>
+                                                                                <Link href={event.link || "#"} className="head">{event.title}</Link>
-                                                                <div className="space20" />
+                                                                                <div className="space24" />
-                                                                <p>Christ Lutheran Church , Waterloo, ON.</p>
+                                                                                <p
-                                                                {/* <div className="space24" />
+                                                                                    style={{
-                                                                <div className="author-area">
+                                                                                        display: '-webkit-box',
-                                                                    <div className="autho-name-area">
+                                                                                        WebkitLineClamp: 1,
-                                                                        <div className="img1">
+                                                                                        WebkitBoxOrient: 'vertical',
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
+                                                                                        overflow: 'hidden',
-                                                                        </div>
+                                                                                        textOverflow: 'ellipsis',
-                                                                        <div className="text">
+                                                                                    }}
-                                                                            <Link href="/speakers">Alex Roberton</Link>
+                                                                                >
-                                                                            <div className="space8" />
+                                                                                    {event.desc}
-                                                                            <p>UI/UX Designer</p>
+                                                                                </p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
                                                                                 <div className="space24" />
                                                                                 <div className="btn-area1">
-                                                                    <Link href="#" className="vl-btn3"><span className="demo">purchase ticket</span></Link>
+                                                                                    <Link
+                                                                                        href={buttonHref}
+                                                                                        className="vl-btn3"
+                                                                                        {...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                                                                                    >
+                                                                                        <span className="demo">{event.btnText || "purchase ticket"}</span>
+                                                                                    </Link>
                                                                                 </div>
+
                                                                             </div>
                                                                             <div className="space30 d-lg-none d-block" />
                                                                         </div>
-                                                        <div className="col-lg-5">
+                                                                        <div className="col-lg-5 order-1 order-lg-2">
                                                                             <div className="img1">
-                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-2.webp" alt="" />
+                                                                                <img src={event.image} alt={event.title} />
+                                                                            </div>
+                                                                        </div>
+                                                                    </>
+                                                                )}
                                                             </div>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                        </div>
+                                            )
-                                        <div className="space30" />
+                                        })}
-                                        <div className="row">
 
-                                            <div className="col-lg-12 m-auto">
-                                                <div className="event2-boxarea box1">
-                                                    <h1 className="active">03</h1>
-                                                    <div className="row align-items-center">
-                                                        <div className="col-lg-5">
-                                                            <div className="img1">
-                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-3.webp" alt="" />
                                     </div>
                                 </div>
-                                                        <div className="col-lg-1" />
-                                                        <div className="col-lg-6">
-                                                            <div className="content-area">
-                                                                <ul>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jun 22-23, 2024<span> | </span></Link>
-                                                                    </li>
-                                                                    <li>
-                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener.</Link>
-                                                                    </li>
-                                                                </ul>
-                                                                <div className="space20" />
-                                                                <Link href="#" className="head">KW Multicultural Festival</Link>
-                                                                <div className="space24" />
-                                                                <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
-                                                                {/* <div className="author-area">
-                                                                    <div className="autho-name-area">
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alex Roberton</Link>
-                                                                            <div className="space8" />
-                                                                            <p>UI/UX Designer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
-                                                                        <div className="img1">
-                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
-                                                                        </div>
-                                                                        <div className="text">
-                                                                            <Link href="/speakers">Alexys Archer</Link>
-                                                                            <div className="space8" />
-                                                                            <p>WP Developer</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div> */}
-                                                                <div className="space24" />
-                                                                <div className="btn-area1">
-                                                                    <Link href="#" className="vl-btn3"><span className="demo">purchase ticket</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
                             </div>
                         </div>
 
@@ -243,9 +171,6 @@ export default function HomeUpcomingEvent() {
                             <div className="memory-boxarea pl-3">
                                 <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
                                     <img src="/assets/img/home/ad-banner/upcoming-events-ad.webp" alt="" className='mb-3' />
-                                    {/* <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" className='mb-3' />
-                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" /> */}
-
                                 </div>
                             </div>
                         </div>

components/home/HomeWhyChooseus.tsx

@@ -7,12 +7,12 @@ export default function HomeWhyChooseUs() {
 		<>
 
 			<div className="about2-section-area others-timer-area sp4">
-				<img src="/assets/img/elements/elements13.png" alt="" className="elements12" />
+				{/* <img src="/assets/img/elements/elements13.png" alt="" className="elements12" /> */}
 				<div className="container">
 					<div className="row align-items-center">
 						<div className="col-lg-6">
 							<div className="about-images-area">
-								<img src="/assets/img/elements/elements14.png" alt="" className="elements14" />
+								{/* <img src="/assets/img/elements/elements14.png" alt="" className="elements14" /> */}
 								<div className="row align-items-center">
 									<div className="col-lg-6 col-md-6">
 										<div className="img1 image-anime reveal">
@@ -60,13 +60,13 @@ export default function HomeWhyChooseUs() {
 									</div> */}
 									<div className="icons-box">
 										<div className="icons">
-											<img src="/assets/img/home/membership-benifits/icon-01.webp" alt="" />
+											<img src="/assets/img/icons/mem1.png" alt="" />
 										</div>
 										<p> Networking Opportunities</p>
 									</div>
 									<div className="icons-box">
 										<div className="icons">
-											<img src="/assets/img/home/membership-benifits/icon-02.webp" alt="" />
+											<img src="/assets/img/icons/mem2.png" alt="" />
 										</div>
 										<p>Interactive Workshops & Panels</p>
 									</div>

components/layout/MobileMenu.tsx

@@ -1,13 +1,22 @@
 '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(1)
+	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)
 	}
+
+	const [subAccordion, setSubAccordion] = useState<number | null>(null)
+
+	const handleSubAccordion = (key: number) => {
+		setSubAccordion(prevState => prevState === key ? null : key)
+	}
+
 	return (
 		<>
 			<div className="mobile-header mobile-haeder1 d-block d-lg-none">
@@ -15,7 +24,7 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 					<div className="col-12">
 						<div className="mobile-header-elements">
 							<div className="mobile-logo">
-								<Link href="//"><img src="/assets/img/logo-tca.png" alt="" /></Link>
+								<Link href="/"><img src="/assets/img/logo-tca.png" alt="" /></Link>
 							</div>
 							<div className="mobile-nav-icon dots-menu" onClick={handleMobileMenu}>
 								<i className="fa-solid fa-bars-staggered" />
@@ -50,59 +59,103 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 								<li className="hash-has-sub"><Link href="/index10" className="hash-nav">Home Ten</Link></li>
 							</ul> */}
 						</li>
-						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 3 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(3)}><em /></span>
+						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 1 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(1)}><em /></span>
 							<Link href="/about" className="hash-nav">About </Link>
-							<ul className={`sub-menu ${isAccordion == 3 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 3 ? "block" : "none"}` }}>
+							<ul className={`sub-menu ${isAccordion == 1 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 1 ? "block" : "none"}` }}>
 								<li className="hash-has-sub"><Link href="/about/association" className="hash-nav">Association</Link></li>
-								<li className="hash-has-sub"><Link href="/about/mission" className="hash-nav">Mission</Link></li>
+								<li className="hash-has-sub"><Link href="/about/mission" className="hash-nav">Misssion</Link></li>
 								<li className="hash-has-sub"><Link href="/about/constitution" className="hash-nav">Constitution</Link></li>
 								<li className="hash-has-sub"><Link href="/about/committee" className="hash-nav">Committee</Link></li>
 							</ul>
 						</li>
-						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
-							<Link href="#" className="hash-nav">Online</Link>
-							<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>
-								<li className="hash-has-sub"><Link href="/online/membership-2024" className="hash-nav">Membership - 2024</Link></li>
-								<li className="hash-has-sub"><Link href="/online/membership-2025" className="hash-nav">Membership - 2025</Link></li>
-								<li className="hash-has-sub"><Link href="/online/thai-pongal-2025" className="hash-nav">Thai Pongal</Link></li>
-								<li className="hash-has-sub"><Link href="/online/tamil-new-year" className="hash-nav">Tamil New Year</Link></li>
-								<li className="hash-has-sub"><Link href="/online/community-picnic" className="hash-nav">Community Picnic</Link></li>
-								<li className="hash-has-sub"><Link href="/online/sports-day" className="hash-nav">Sports Day</Link></li>
-								<li className="hash-has-sub"><Link href="/online/kalai-vizha" className="hash-nav">Kalai Vizha</Link></li>
-								<li className="hash-has-sub"><Link href="/online/christmas" className="hash-nav">Christmas & Year End</Link></li>
-								<li className="hash-has-sub"><Link href="/online/performance" className="hash-nav">Program Performance Registration</Link></li>
-								<li className="hash-has-sub"><Link href="/online/sponsor" className="hash-nav">Sponsor</Link></li>
-								<li className="hash-has-sub"><Link href="/online/registration-form" className="hash-nav">Whatsapp Form</Link></li>
-								<li className="hash-has-sub"><Link href="/online/volunteer" className="hash-nav">Volunteer</Link></li>
-								{/* <li className="hash-has-sub"><Link href="/speakers-single" className="hash-nav">Speakers Details</Link></li> */}
-							</ul>
-						</li>
 						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 6 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(6)}><em /></span>
 							<Link href="/tamil-culture" className="hash-nav">Tamil Culture</Link>
-							<ul className={`sub-menu ${isAccordion == 6 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 6 ? "block" : "none"}` }}>
+
-								<li className="hash-has-sub"><Link href="/tamil-culture/tamil-festivals" className="hash-nav">Tamil Festivals</Link></li>
+							<ul className={`sub-menu ${isAccordion == 6 ? "open-sub" : ""}`} style={{ display: isAccordion == 6 ? "block" : "none" }}>
-								<li className="hash-has-sub"><Link href="/tamil-culture/tamil-wedding-custom" className="hash-nav">Tamil Wedding & Custom</Link></li>
+								<li className="hash-has-sub">
-								<li className="hash-has-sub"><Link href="/tamil-culture/tamil-language" className="hash-nav">Tamil Language</Link></li>
+									<span
+										className={`submenu-button ${subAccordion === 1 ? "submenu-opened" : ""}`}
+										onClick={() => handleSubAccordion(1)}
+									><em /></span>
+									<Link href="/tamil-culture/tamil-festivals" className="hash-nav">Tamil Festivals</Link>
+									<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
+										<li><Link href="/tamil-culture/tamil-festivals/hindu-festivals" className="hash-nav">Hindu Festivals</Link></li>
+										<li><Link href="/tamil-culture/tamil-festivals/muslim-festivals" className="hash-nav">Muslim Festivals</Link></li>
+										<li><Link href="/tamil-culture/tamil-festivals/christian-festivals" className="hash-nav">Christian Festivals</Link></li>
+									</ul>
+								</li>
+								<li className="hash-has-sub">
+									<span
+										className={`submenu-button ${subAccordion === 2 ? "submenu-opened" : ""}`}
+										onClick={() => handleSubAccordion(2)}
+									><em /></span>
+									<Link href="/tamil-culture/tamil-wedding-custom" className="hash-nav">Tamil Wedding & Custom</Link>
+									<ul className={`sub-menu ${subAccordion === 2 ? "open-sub" : ""}`} style={{ display: subAccordion === 2 ? "block" : "none" }}>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/hindu-wedding-rituals" className="hash-nav">Hindu Wedding Rituals</Link></li>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/protestant-wedding" className="hash-nav">A Tamil Protestant Wedding</Link></li>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/catholic-wedding" className="hash-nav">Tamil Catholic Weddings</Link></li>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/city-style" className="hash-nav">Marriage – City Style</Link></li>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/bridal-makeup" className="hash-nav">Bridal Make Up</Link></li>
+										<li><Link href="/tamil-culture/tamil-wedding-custom/story-of-saree" className="hash-nav">The Story Of The Saree</Link></li>
+									</ul>
+								</li>
+								<li className="hash-has-sub">
+									<Link href="/tamil-culture/tamil-language" className="hash-nav">Tamil Language</Link>
+								</li>
+							</ul>
+						</li>
+						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
+							<Link href="#" className="hash-nav">Events</Link>
+							<ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}>
+								<li className={`hash-has-sub ${subAccordion === 1 ? "open-sub" : ""}`}>
+									<Link href="/upcoming-event" className="hash-nav" onClick={() => setSubAccordion(subAccordion === 1 ? 0 : 1)}>
+										Upcoming Event
+									</Link>
+									<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
+										{upcomingEvents.map((event: any) => (
+											<li key={event.id}>
+												<Link href={event.link} className="hash-nav">
+													{event.title}
+												</Link>
+											</li>
+										))}
+									</ul>
+								</li>
+								<li>
+									<Link href="/photo-gallery" className="hash-nav">Photos Gallery</Link>
+								</li>
+							</ul>
+						</li>
+						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
+							<Link href="#" className="hash-nav">Registration	</Link>
+							<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>
+								<li className="hash-has-sub"><Link href="/register/membership-2026" className="hash-nav">Membership - 2026</Link></li>
+								{/* <li className="hash-has-sub"><Link href="/register/membership-2025" className="hash-nav">Membership - 2025</Link></li>
+								<li className="hash-has-sub"><Link href="/register/membership-2024" className="hash-nav">Membership - 2024</Link></li> */}
+								<li className="hash-has-sub"><Link href="/register/thai-pongal-2025" className="hash-nav">Thai Pongal</Link></li>
+								<li className="hash-has-sub"><Link href="/register/tamil-new-year" className="hash-nav">Tamil New Year</Link></li>
+								<li className="hash-has-sub"><Link href="/register/community-picnic" className="hash-nav">Community Picnic</Link></li>
+								<li className="hash-has-sub"><Link href="/register/sports-day" className="hash-nav">Sports Day</Link></li>
+								{/* <li className="hash-has-sub"><Link href="/register/kalai-vizha" className="hash-nav">Kalai Vizha</Link></li> */}
+								<li className="hash-has-sub"><Link href="/register/christmas" className="hash-nav">Christmas & Year End</Link></li>
+								<li className="hash-has-sub"><Link href="/register/performance" className="hash-nav">Program Performance Registration</Link></li>
+								<li className="hash-has-sub"><Link href="/register/sponsor" className="hash-nav">Sponsor</Link></li>
+								<li className="hash-has-sub"><Link href="/register/registration-form" className="hash-nav">Whatsapp Form</Link></li>
+								<li className="hash-has-sub"><Link href="/register/volunteer" className="hash-nav">Volunteer</Link></li>
+								{/* <li className="hash-has-sub"><Link href="/speakers-single" className="hash-nav">Speakers Details</Link></li> */}
 							</ul>
 						</li>
 						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 4 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(4)}><em /></span>
 							<Link href="/community" className="hash-nav">Community</Link>
 							<ul className={`sub-menu ${isAccordion == 4 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 4 ? "block" : "none"}` }}>
-								<li className="hash-has-sub"><Link href="/community/recipes" className="hash-nav">Recipes</Link></li>
+								{/* <li className="hash-has-sub"><Link href="/community/recipes" className="hash-nav">Recipes</Link></li> */}
-								<li className="hash-has-sub"><Link href="/community/cricket-club" className="hash-nav">Cricket Club</Link></li>
+								{/* <li className="hash-has-sub"><Link href="/community/cricket-club" className="hash-nav">Cricket Club</Link></li>
-								<li className="hash-has-sub"><Link href="/community/badminton-club" className="hash-nav">Badminton Club</Link></li>
+								<li className="hash-has-sub"><Link href="/community/badminton-club" className="hash-nav">Badminton Club</Link></li> */}
 								<li className="hash-has-sub"><Link href="/community/business-directory" className="hash-nav">Business Directory</Link></li>
-								<li className="hash-has-sub"><Link href="/community/recipes" className="hash-nav">Recipes</Link></li>
+								<li className="hash-has-sub"><Link href="/community/tamil-school" className="hash-nav">Tamil School</Link></li>
 								<li className="hash-has-sub"><Link href="/community/global-relief-fund" className="hash-nav">Global Relief Fund</Link></li>
 							</ul>
 						</li>
-						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
-							<Link href="#" className="hash-nav">Events</Link>
-							<ul className={`sub-menu ${isAccordion == 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 5 ? "block" : "none"}` }}>
-								<li className="hash-has-sub"><Link href="/upcoming-event" className="hash-nav">Upcoming Event</Link></li>
-								<li className="hash-has-sub"><Link href="/photo-gallery" className="hash-nav">Photos Gallery</Link></li>
-							</ul>
-						</li>
 						<li className="hash-has-sub"><Link href="/contact" className="hash-nav">Contact</Link></li>
 					</ul>
 
@@ -145,16 +198,16 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 									<div className="social-links-mobile-menu">
 										<ul>
 											<li>
-												<Link href="/#"><i className="fa-brands fa-facebook-f" /></Link>
+												<Link href="/"><i className="fa-brands fa-facebook-f" /></Link>
 											</li>
 											<li>
-												<Link href="/#"><i className="fa-brands fa-instagram" /></Link>
+												<Link href="/"><i className="fa-brands fa-instagram" /></Link>
 											</li>
 											<li>
-												<Link href="//#"><i className="fa-brands fa-linkedin-in" /></Link>
+												<Link href="/"><i className="fa-brands fa-linkedin-in" /></Link>
 											</li>
 											<li>
-												<Link href="/#"><i className="fa-brands fa-youtube" /></Link>
+												<Link href="/"><i className="fa-brands fa-youtube" /></Link>
 											</li>
 										</ul>
 									</div>

components/layout/footer/Footer1.tsx

@@ -32,22 +32,26 @@ export default function Footer1() {
 						</div>
 						<div className="col-lg-2 col-md-6">
 							<div className="link-content">
-								<h3>Association</h3>
+								<h3>Quick Links</h3>
 								<ul>
 									<li><Link href="/">Home</Link></li>
 									<li><Link href="/about">About Us</Link></li>
+									<li><Link href="/tamil-culture">Tamil Culture</Link></li>
+									<li><Link href="/upcoming-event">UpComing Event</Link></li>
 									<li><Link href="/contact">Contact Us</Link></li>
 								</ul>
 							</div>
 						</div>
 						<div className="col-lg-2 col-md-6">
 							<div className="link-content quick-links-section">
-								<h3>Quick Links</h3>
+								<h3>Community</h3>
 								<ul>
-									<li><Link href="/tamil-culture">Tamil Culture</Link></li>
+									{/* <li><Link href="/community/recipes">Recipes</Link></li> */}
-									<li><Link href="/community">Community</Link></li>
+									{/* <li><Link href="/community/cricket-club">Cricket Club</Link></li>
-									<li><Link href="/upcoming-event">UpComing Event</Link></li>
+									<li><Link href="/community/badminton-club">Badminton Club</Link></li> */}
-									{/* <li><Link href="/photo-gallery">Photo Gallery</Link></li> */}
+									<li><Link href="/community/business-directory">Business Directory</Link></li>
+									<li><Link href="/community/tamil-school">Tamil School</Link></li>
+									<li><Link href="/community/global-relief-fund">Global Relief Fund</Link></li>
 								</ul>
 							</div>
 						</div>
@@ -60,7 +64,7 @@ export default function Footer1() {
 											7890</Link>
 									</li> */}
 									<li>
-										<Link href="/#"><img src="/assets/img/home/location.webp" alt="" />P.O. Box No:25068, Kitchener, <br />Ontario, N2A 4A5, Canada.</Link>
+										<Link href="/#"><img src="/assets/img/icons/location2.svg" alt="" />P.O. Box No:25068, Kitchener, <br />Ontario, N2A 4A5, Canada.</Link>
 									</li>
 									<li>
 										<Link href="mailto:mail@tamilculturewaterloo.org"><img src="/assets/img/home/mail.webp" alt="" />mail@tamilculturewaterloo.org</Link>
@@ -136,7 +140,7 @@ export default function Footer1() {
 								<p>
 									Copyright {new Date().getFullYear()} © TamilCultureAssociation. Powered by{' '}
 									<a
-										style={{ color: "#fff" }}
+										style={{ color: "#ffde14" }}
 										href="https://metatroncubesolutions.com/"
 										target="_blank"
 										rel="noopener noreferrer"

components/layout/header/Header1.tsx

@@ -1,11 +1,60 @@
-import Link from 'next/link'
+"use client";
 
+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 (
 		<>
 			<header>
-				<div className={`header-area homepage1 header header-sticky d-none d-lg-block ${scroll ? 'sticky' : ''}`} id="header">
+
+				<div className="header-top py-3" style={{ backgroundColor: '#000000ff' }}>
+					<div className="container-fluid">
+						<Swiper
+							loop={true}
+							spaceBetween={30}
+							slidesPerView={1}
+							speed={2000}
+							autoplay={{ delay: 5000, disableOnInteraction: false }}
+							modules={[Autoplay]}
+							className="mySwiper"
+						>
+							<SwiperSlide>
+								<div className="text-center" style={{ color: 'white' }}>
+									தமிழ் பண்பாட்டு சங்கம்
+								</div>
+							</SwiperSlide>
+							<SwiperSlide>
+								<div className="text-center" style={{ color: 'white' }}>
+									Tamil Culture Association
+								</div>
+							</SwiperSlide>
+							<SwiperSlide>
+								<div className="text-center" style={{ color: 'white' }}>
+									Association culturelle tamoule
+								</div>
+							</SwiperSlide>
+						</Swiper>
+
+					</div>
+				</div>
+
+
+				<div
+					className={`header-area homepage1 header header-sticky d-none d-lg-block ${scroll ? 'sticky' : ''}`}
+					id="header"
+					style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }}
+				>
+
 					<div className="container">
 						<div className="row">
 							<div className="col-lg-12">
@@ -148,27 +197,6 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 													<li><Link href="/about/committee">Committee</Link></li>
 												</ul>
 											</li>
-											<li>
-												<Link href="#">Online <i className="fa-solid fa-angle-down" /></Link>
-												<ul className="dropdown-padding">
-													<li><Link href="/online/membership-2024">Membership - 2024</Link></li>
-													<li><Link href="/online/membership-2025">Membership - 2025</Link></li>
-													<li><Link href="/online/thai-pongal-2025">Thai Pongal</Link></li>
-													<li><Link href="/online/tamil-new-year">Tamil New Year</Link></li>
-													<li><Link href="/online/community-picnic">Community Picnic</Link></li>
-													<li><Link href="/online/sports-day">Sports Day</Link></li>
-													<li><Link href="/online/kalai-vizha">Kalai Vizha</Link></li>
-													<li><Link href="/online/christmas">Christmas & Year End</Link></li>
-													<li><Link href="/online/performance">Program Performance Registration</Link></li>
-													<li><Link href="/online/sponsor">Sponsor</Link></li>
-													<li><Link href="/online/registration-form">Whatsapp Form</Link></li>
-													<li><Link href="/online/volunteer">Volunteer</Link></li>
-
-													{/* <li><Link href="/online/thai-pongal">Thai Pongal</Link></li>	
-													<li><Link href="/online/tamil-newyear">Tamil New Year</Link></li>	 */}
-												</ul>
-											</li>
-
 											<li className="dropdown">
 												<Link href="/tamil-culture">
 													Tamil Culture <i className="fa-solid fa-angle-down" />
@@ -206,15 +234,60 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 													</li>
 												</ul>
 											</li>
+											<li>
+												<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
+												<ul className="dropdown-padding">
+													<li className="dropdown-submenu">
+														<Link href="/upcoming-event">
+															Upcoming Event <i className="fa-solid fa-angle-down" />
+														</Link>
+														<ul className="submenu">
+															{upcomingEvents.map((event: any) => (
+																<li key={event.id}>
+																	<Link href={event.link}>
+																		{event.title}
+																	</Link>
+																</li>
+															))}
+														</ul>
+													</li>
+													<li><Link href="/photo-gallery">Photos Gallery</Link></li>
+												</ul>
+											</li>
+
+											<li>
+												<Link href="#">Registration <i className="fa-solid fa-angle-down" /></Link>
+												<ul className="dropdown-padding">
+													<li><Link href="/register/membership-2026">Membership - 2026</Link></li>
+													{/* <li><Link href="/register/membership-2025">Membership - 2025</Link></li>
+													<li><Link href="/register/membership-2024">Membership - 2024</Link></li> */}
+													<li><Link href="/register/thai-pongal-2025">Thai Pongal</Link></li>
+													<li><Link href="/register/tamil-new-year">Tamil New Year</Link></li>
+													<li><Link href="/register/community-picnic">Community Picnic</Link></li>
+													<li><Link href="/register/sports-day">Sports Day</Link></li>
+													{/* <li><Link href="/register/kalai-vizha">Kalai Vizha</Link></li> */}
+													<li><Link href="/register/christmas">Christmas & Year End</Link></li>
+													<li><Link href="/register/performance">Program Performance Registration</Link></li>
+													<li><Link href="/register/sponsor">Sponsor</Link></li>
+													<li><Link href="/register/registration-form">Whatsapp Form</Link></li>
+													<li><Link href="/register/volunteer">Volunteer</Link></li>
+
+													{/* <li><Link href="/register/thai-pongal">Thai Pongal</Link></li>	
+													<li><Link href="/register/tamil-newyear">Tamil New Year</Link></li>	 */}
+												</ul>
+											</li>
+
+
 
 											<li>
 												<Link href="/community">Community <i className="fa-solid fa-angle-down" /></Link>
 												<ul className="dropdown-padding">
-													<li><Link href="/community/recipes">Recipes</Link></li>
+													{/* <li><Link href="/community/recipes">Recipes</Link></li> */}
-													<li><Link href="/community/cricket-club">Cricket Club</Link></li>
+													{/* <li><Link href="/community/cricket-club">Cricket Club</Link></li>
-													<li><Link href="/community/badminton-club">Badminton Club</Link></li>
+													<li><Link href="/community/badminton-club">Badminton Club</Link></li> */}
 													<li><Link href="/community/business-directory">Business Directory</Link></li>
-													<li><Link href="/community/tamil-school">Tamil School</Link></li>
+													<li><Link href="/community/kitchener-tamil-school">Kitchener Tamil School</Link></li>
+													<li><Link href="/community/cambridge-tamil-school">Cambridge Tamil School</Link></li>
 													<li><Link href="/community/global-relief-fund">Global Relief Fund</Link></li>
 
 												</ul>
@@ -242,14 +315,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 													<li><Link href="/blog-single">Blog Details</Link></li>
 												</ul>
 											</li> */}
-											<li>
-												<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
-												<ul className="dropdown-padding">
-													<li><Link href="/upcoming-event">Upcoming Event</Link></li>
-													<li><Link href="/photo-gallery">Photos Gallery</Link></li>
 
-												</ul>
-											</li>
 											{/* <li>
 												<Link href="/#">Pages <i className="fa-solid fa-angle-down" /></Link>
 												<ul className="dropdown-padding">
@@ -262,9 +328,27 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 											<li>
 												<Link href="/contact">Contact</Link>
 											</li>
+
 										</ul>
 									</div>
-									<div className="btn-area">
+
+									<div className="btn-area1" style={{ marginTop: '10px' }}>
+										<Link
+											href="/register/membership-2026"
+											className="vl-btn9"
+											style={{
+												fontSize: '18px',
+												padding: '13px 13px',
+												display: 'inline-block',
+												backgroundColor: '#ffde14',
+												color: 'black'
+											}}
+										>
+											<span className="demo">Membership</span>
+										</Link>
+									</div>
+
+									<div className="btn-area social-icons">
 										{/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
 											<a><img src="/assets/img/icons/search1.svg" alt="" /></a>
 										</div> */}
@@ -275,12 +359,12 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 											<li>
 												<Link href="/#"><i className="fa-brands fa-instagram" /></Link>
 											</li>
-											<li>
+											{/* <li>
 												<Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link>
 											</li>
 											<li>
 												<Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link>
-											</li>
+											</li> */}
 										</ul>
 									</div>
 									{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>

components/online/christmas/Section1.jsx

@@ -17,7 +17,7 @@ export default function Section1() {
             </div>
           </div>
           <div className="row">
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="h-100 w-100">
                 <div className="row h-100">
                   <div className="flex_column av-cx34h4-a8d3062fb9de0a0faadd0da67fb825e0 av_one_half avia-builder-el-0 el_before_av_one_half avia-builder-el-first first flex_column_div av-zero-column-padding h-100">
@@ -59,21 +59,21 @@ export default function Section1() {
                   </div>
                 </div>
               </div>
-            </div>
+            </div> */}
 
 
 
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="about6-header heading9">
-                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5>
-                {/* <div className="space20" /> */}
+                <div className="space20" />
 
                 <div className="img right-img">
                   <img src="/assets/img/online/christmas-year-end/christmas-1.webp" alt="" />
                 </div>
 
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

components/online/communitypicnic/Section1.jsx

@@ -17,7 +17,7 @@ export default function Section1() {
             </div>
           </div>
           <div className="row">
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="h-100 w-100">
                 <div className="row h-100">
                   <div className="flex_column av-cx34h4-a8d3062fb9de0a0faadd0da67fb825e0 av_one_half avia-builder-el-0 el_before_av_one_half avia-builder-el-first first flex_column_div av-zero-column-padding h-100">
@@ -58,22 +58,22 @@ export default function Section1() {
                   </div>
                 </div>
               </div>
-            </div>
+            </div> */}
 
 
 
 
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="about6-header heading9">
-                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5>
-                {/* <div className="space20" /> */}
+                <div className="space20" />
 
                 <div className="img right-img">
                   <img src="/assets/img/online/community-picnic/picnic-1.webp" alt="" />
                 </div>
 
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

components/online/membership2024/Section1.tsx

@@ -17,7 +17,7 @@ export default function Section1() {
                         </div>
                     </div>
                     <div className="row">
-                        <div className="col-lg-6">
+                        {/* <div className="col-lg-6">
                             <div
                                 style={{
                                     position: "relative",
@@ -41,20 +41,20 @@ export default function Section1() {
                                     scrolling="no"
                                 ></iframe>
                             </div>
-                        </div>
+                        </div> */}
 
 
 
-                        <div className="col-lg-6">
+                        {/* <div className="col-lg-6">
                             <div className="about6-header heading9">
-                                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                                <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5>
-                                {/* <div className="space20" /> */}
+                                <div className="space20" />
 
                                 <div className="img right-img">
                                     <img src="/assets/img/online/membership-2024/section1.webp" alt="" />
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
                     </div>
                 </div>
             </div>

components/online/membership2025/Section1.jsx

@@ -17,7 +17,7 @@ export default function Section1() {
             </div>
           </div>
           <div className="row">
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div
                 style={{
                   position: "relative",
@@ -49,20 +49,20 @@ export default function Section1() {
                 ></iframe>
 
               </div>
-            </div>
+            </div> */}
 
 
 
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="about6-header heading9">
-                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5>
-                {/* <div className="space20" /> */}
+                <div className="space20" />
 
                 <div className="img right-img">
                   <img src="/assets/img/online/membership-2025/membership-2025-1.webp"alt="" />
                 </div>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

components/online/membership2026/Section1.jsx

@@ -0,0 +1,63 @@
+
+import Link from 'next/link'
+
+export default function Section1() {
+  return (
+    <>
+
+      <div className="about6-section-area sp4">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="event2-header heading5 space-margin60 text-center ">
+                <h2>Annual Membership-2026</h2>
+                <div className="space18" />
+                <p>By Tamil Cultural Association of Waterloo Region</p>
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-lg-6">
+              <div
+                style={{
+                  position: "relative",
+                  width: "100%",
+                  height: "auto",   
+                  overflow: "visible",     
+                }}
+              >
+                <iframe
+                  title="Donation form powered by Zeffy"
+                  className='annual-membership'
+                  src="https://www.zeffy.com/en-CA/ticketing/tca-annual-membership--2026"
+                  style={{
+                    width: "100%",
+                    height: "1250px",  
+                    border: "0",
+                  }}
+                  allow="payment *"
+                />
+              </div>
+
+            </div>
+
+
+
+            <div className="col-lg-6">
+              <div className="about6-header heading9">
+                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                {/* <div className="space20" /> */}
+
+                <div className="img right-img">
+                  <img src="/assets/img/online/membership-2026/membership-2026-1.webp" alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </>
+  )
+}

components/online/membership2026/Section2.jsx

@@ -0,0 +1,42 @@
+
+import Link from 'next/link'
+
+export default function Section2() {
+    return (
+        <>
+
+            <div className="about6-section-area">
+                <div className="container">
+
+                    <div className="row">
+                        <div className="col-lg-6 order-2 order-lg-1">
+                            <div className="img">
+                                <img src="/assets/img/online/membership-2026/membership-2026-2.webp" alt="" />
+                            </div>
+                        </div>
+                        <div className="col-lg-6 order-1 order-lg-2 mb-5">
+                            <div className="about6-header heading9 space-margin60 mb-4">
+                                <p>Thank you very much for joining the TCA family. With this membership you and your family are opening yourselves up to a series of programs and services offered by us. As members you will also receive admission to some free events and discounts on tickets. Community volunteer and networking will be part of the package.</p>
+                                <div className="space18" />
+                                <p>Please note that our memberships are renewable each year during the month of January.  The membership fee covers the calendar year, January 01 to December 31. We invite you to purchase your membership in the month of January to get the most value. Membership card is also available for print.  The fee for your family membership or single person is $20 . Student under 18 is $15.</p>
+                                <div className="space18" />
+
+                                <ul>
+                                    <li>Membership Period:  January 1st to December 31st.</li>
+                                </ul>
+                                <div className="space18" />
+                                <p>Tamil Cultural Association of Waterloo Region is registered non profit community organisation.  Ontario Corporation # 1509837. It was established in 1989 in the region of Waterloo, Ontario, Canada.  Visit our website for more information.</p>
+
+                                <div className="space18" />
+                                <ul>
+                                    <li> Note: Zeffy is a third party Canadian payment platform. Accessing will be subjected to Zeffy’s terms and conditions policy.</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

components/online/membership2026/Section3.jsx

@@ -0,0 +1,44 @@
+'use client'
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import { images } from "@/utility/constant.utils";
+import { useState } from "react";
+
+export default function Section3() {
+  // Show only images with id 1 to 4
+  const selectedImages = images.filter(img => +img.id >= 49 && +img.id <= 52);
+
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <div className="about6-section-area sp4">
+      <div className="container-fluid">
+        <div className="row align-items-center">
+          {selectedImages.map((img, i) => (
+            <div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
+              <div
+                className="memory-boxarea pl-3"
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  setIndex(i);
+                  setOpen(true);
+                }}
+              >
+                <div className="image" data-aos="zoom-in" data-aos-duration={1000}>
+                  <img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Lightbox
+          open={open}
+          close={() => setOpen(false)}
+          slides={selectedImages}
+          index={index}
+        />
+      </div>
+    </div>
+  );
+}

components/online/performance/Section1.jsx

@@ -17,7 +17,7 @@ export default function Section1() {
             </div>
           </div>
           <div className="row">
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="h-100 w-100">
                 <div className="row h-100">
                   <div className="flex_column av-cx34h4-a8d3062fb9de0a0faadd0da67fb825e0 av_one_half avia-builder-el-0 el_before_av_one_half avia-builder-el-first first flex_column_div av-zero-column-padding h-100">
@@ -58,21 +58,21 @@ export default function Section1() {
                   </div>
                 </div>
               </div>
-            </div>
+            </div> */}
 
 
 
-            <div className="col-lg-6">
+            {/* <div className="col-lg-6">
               <div className="about6-header heading9">
-                {/* <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5> */}
+                <h5 data-aos="fade-left" data-aos-duration={700}><img src="/assets/img/icons/sub-logo1.svg" alt="" />About Summit</h5>
-                {/* <div className="space20" /> */}
+                <div className="space20" />
 
                 <div className="img right-img">
                   <img src="/assets/img/online/program-performance-registration/ppr-1.webp" alt="" />
                 </div>
 
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>