MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: MetatroncubeSoftwareSolutions:main
Branches Tags
MetatroncubeSoftwareSolutions:main
MetatroncubeSoftwareSolutions:team
MetatroncubeSoftwareSolutions:demo
..
compare: MetatroncubeSoftwareSolutions:demo
Branches Tags
MetatroncubeSoftwareSolutions:main
MetatroncubeSoftwareSolutions:team
MetatroncubeSoftwareSolutions:demo

No commits in common. "main" and "demo" have entirely different histories.
main ... demo

410 changed files with 23104 additions and 37450 deletions
Show Stats Expand all files Collapse all files

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

@ -1,93 +0,0 @@
'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>
);
}

97
app/(event)/photo-gallery/page.jsx
View File

@ -1,10 +1,93 @@
export const metadata = { 'use client';
title: "Community Photo Gallery | View Our Memories", import Countdown from '@/components/elements/Countdown';
description: "Browse photos from Tamil cultural events and community programs in Waterloo Region.", import Layout from "@/components/layout/Layout";
}; import { memoryData } from '@/utility/constant.utils';
import Link from "next/link";
import PhotoGallerySection from "@/components/events/PhotoGallerySection"; import { useState } from 'react';
export default function Memories() { export default function Memories() {
return <PhotoGallerySection />; 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-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>
);
} }

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

@ -1,142 +1,122 @@
'use client'; 'use client';
import Layout from '@/components/layout/Layout'; import Layout from '@/components/layout/Layout';
import axios from 'axios'; import { memoryData } from '@/utility/constant.utils';
import Link from 'next/link'; import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import { useEffect, useState, useCallback } from 'react'; import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox"; import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/styles.css";
interface EventImage { interface EventData {
id: string; image: string;
src: string; title: string;
title?: string; desc?: string;
description?: string; date: string;
slug: string;
link?: string;
gallery?: string[];
} }
export default function SingleGallery() { export default function SingleGallery() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const eventId = searchParams.get('id'); const slug = searchParams.get('slug');
const router = useRouter();
const [eventImages, setEventImages] = useState<EventImage[]>([]); // Flatten all events into a single array
const [open, setOpen] = useState(false); const allEvents: EventData[] = Object.values(memoryData).flat();
const [currentIndex, setCurrentIndex] = useState(0);
const getEventGallery = useCallback(async () => { // Match event by slug
try { const matchedEvent = allEvents.find(event => event.slug === slug);
const res = await axios.get( const galleryImages: string[] = matchedEvent?.gallery || [];
`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]);
useEffect(() => { const [open, setOpen] = useState<boolean>(false);
if (eventId) { const [currentIndex, setCurrentIndex] = useState<number>(0);
getEventGallery();
}
}, [eventId, getEventGallery]);
const handleImageClick = (index: number) => { const handleImageClick = (index: number) => {
setCurrentIndex(index); setCurrentIndex(index);
setOpen(true); setOpen(true);
}; };
return ( return (
<Layout headerStyle={1} footerStyle={1}> <>
{/* Header Section */} <Layout headerStyle={1} footerStyle={1}>
<div {/* Header Section */}
className="inner-page-header" <div
style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery.webp)' }} className="inner-page-header"
> style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
<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>
{/* 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 d-flex justify-content-between align-items-center">
<h2 className="text-anime-style-3 mb-0">Photos Gallery</h2>
<button
onClick={() => router.back()}
className="vl-btn3"
style={{ padding: '10px 16px' }}
> >
Back <div className="container">
</button> <div className="row">
</div> <div className="col-lg-6 m-auto">
</div> <div className="heading1 text-center">
</div> <h1>Recent Memories</h1>
<div className="space20" />
<div className="row gx-5"> <Link href="/">
<div className="col-lg-12"> Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
<div className="row mt-4"> </Link>
{eventImages.map((image, index) => ( </div>
<div </div>
key={image.id} </div>
className="col-lg-3 col-md-6 mb-4"
data-aos="zoom-in"
data-aos-duration={1000}
>
<div className="blog4-boxarea">
<div
className="img1"
style={{ cursor: 'pointer' }}
onClick={() => handleImageClick(index)}
>
<img
src={image.src}
alt={image.title || `gallery-${index}`}
loading="lazy"
style={{ width: '100%', height: 'auto' }}
/>
</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">
{matchedEvent?.title || "Photos Gallery"}
<p>{matchedEvent?.desc}</p>
</h2>
</div>
</div>
</div>
{eventImages.length === 0 && ( <div className="row gx-5">
<div className="col-12 text-center mt-5"> <div className="col-lg-12">
<p className="text-muted">No images found for this event.</p> <div className="row mt-4">
</div> {galleryImages.map((src: string, index: number) => (
)} <div
</div> key={index}
</div> className="col-lg-3 col-md-6 mb-4"
</div> data-aos="zoom-in"
</div> data-aos-duration={1000}
</div> >
<div className="blog4-boxarea">
<div
className="img1"
style={{ cursor: 'pointer' }}
onClick={() => handleImageClick(index)}
>
<img
src={src}
alt={`gallery-${index}`}
loading="lazy"
style={{ width: '100%', height: 'auto' }}
/>
</div>
</div>
</div>
))}
{/* Lightbox */} {galleryImages.length === 0 && (
<Lightbox <div className="col-12 text-center mt-5">
open={open} <p className="text-muted">No images found for this event.</p>
close={() => setOpen(false)} </div>
index={currentIndex} )}
slides={eventImages.map((img) => ({ src: img.src, title: img.title }))} </div>
/> </div>
</Layout> </div>
); </div>
</div>
<Lightbox
open={open}
close={() => setOpen(false)}
index={currentIndex}
slides={galleryImages.map((src) => ({ src }))}
/>
</Layout>
</>
);
} }

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

@ -1,31 +0,0 @@
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} />;
}

17
app/(event)/upcoming-event/page.jsx
View File

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

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

@ -1,238 +0,0 @@
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;

42
app/about/association/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -19,25 +13,25 @@ export default function Association() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/association-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/association-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Association</h1> <h1>Association</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<Section1 />
<Section2 />
<Section3 />
</div> </div>
<Section1 />
<Section2 />
<Section3 />
</div>
</Layout> </Layout>
</> </>
) )

12
app/about/committee/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 Layout from "@/components/layout/Layout";
import Section1 from "@/components/about/committee/Section1"; // adjust path if needed import Section1 from "@/components/about/committee/Section1"; // adjust path if needed
@ -14,8 +8,8 @@ export default function CommitteePage() {
<div className="inner-page-header" style={{ backgroundImage: "url(/assets/img/about/banner/committee-banner.webp)" }}> <div className="inner-page-header" style={{ backgroundImage: "url(/assets/img/about/banner/committee-banner.webp)" }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Committee</h1> <h1>Committee</h1>
<div className="space20" /> <div className="space20" />
<a href="/">Home <i className="fa-solid fa-angle-right" /> <span>Committee</span></a> <a href="/">Home <i className="fa-solid fa-angle-right" /> <span>Committee</span></a>

30
app/about/constitution/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,22 +11,22 @@ export default function Constitution() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/constitution-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/constitution-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Constitution</h1> <h1>Constitution</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<Section1 />
<Section1 /> </div>
</div>
</Layout> </Layout>
</> </>

30
app/about/mission/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,22 +11,22 @@ export default function Mission() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/mission-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/mission-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Mission</h1> <h1>Mission</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<Section1 />
<Section1 /> </div>
</div>
</Layout> </Layout>
</> </>

14
app/about/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 CountUp from 'react-countup'
import Countdown from '@/components/elements/Countdown' import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -21,8 +15,8 @@ export default function About() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/about-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/about/banner/about-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>About Us</h1> <h1>About Us</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About Us</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About Us</span></Link>
@ -33,7 +27,7 @@ export default function About() {
</div> </div>
{/*===== HERO AREA ENDS =======*/} {/*===== HERO AREA ENDS =======*/}
<AboutUs /> <AboutUs />
</div> </div>

4
app/blog-single/page.tsx
View File

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

4
app/blog/page.tsx
View File

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

120
app/community/badminton-club/BadmintonClubClient.tsx
View File

@ -1,120 +0,0 @@
'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>
</>
);
}

127
app/community/badminton-club/page.tsx
View File

@ -1,12 +1,123 @@
import type { Metadata } from "next" 'use client';
export const metadata: Metadata = { import Layout from '@/components/layout/Layout';
title: "Tamil Badminton Club | Play With Us", import { communitySubmenuData } from '@/utility/constant.utils';
description: "Play, train, and compete with the Tamil Badminton Club in Waterloo Region.", import Link from 'next/link';
}; import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import BadmintonClubClient from "./BadmintonClubClient"; export default function CricketClub() {
export default function BadmintonClubPage() { const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12);
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>
</>
);
} }

30
app/community/business-directory/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,22 +11,22 @@ export default function BusinessDirectory() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/business-directory-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/business-directory-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Business Directory</h1> <h1>Business Directory</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>About</span></Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<Section1 />
<Section1 /> </div>
</div>
</Layout> </Layout>
</> </>

121
app/community/cambridge-tamil-school/TamilSchoolClient.tsx
View File

@ -1,121 +0,0 @@
'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>Cambridge Tamil School</h1>
<div className="space20" />
<Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right mx-2" />
<span>Cambridge 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">
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>
<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>
</>
);
}

12
app/community/cambridge-tamil-school/page.tsx
View File

@ -1,12 +0,0 @@
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 />;
}

107
app/community/cricket-club/CricketClubClient.tsx
View File

@ -1,107 +0,0 @@
'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>
</>
);
}

114
app/community/cricket-club/page.tsx
View File

@ -1,12 +1,110 @@
import type { Metadata } from "next" 'use client';
export const metadata: Metadata = { import Layout from '@/components/layout/Layout';
title: "Tamil Cricket Club | Join the Team", import { communitySubmenuData } from '@/utility/constant.utils';
description: "Join the Tamil Cricket Club and enjoy sports and teamwork in Waterloo.", import Link from 'next/link';
}; import { useState } from 'react';
import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';
import CricketClubClient from "./CricketClubClient"; export default function CricketClub() {
export default function CricketClubPage() { const galleryImages = communitySubmenuData.filter(img => +img.id >= 5 && +img.id <= 8);
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>
</>
);
} }

150
app/community/global-relief-fund/GlobalReliefFundClient.tsx
View File

@ -1,150 +0,0 @@
'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>
</>
);
}

157
app/community/global-relief-fund/page.tsx
View File

@ -1,12 +1,153 @@
import type { Metadata } from "next" 'use client';
export const metadata: Metadata = { import Layout from '@/components/layout/Layout';
title: "Global Relief Fund | Support Humanitarian Causes", import { communitySubmenuData } from '@/utility/constant.utils';
description: "Support global relief efforts and humanitarian causes led by the Tamil community.", import Link from 'next/link';
}; import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import GlobalReliefFundClient from "./GlobalReliefFundClient"; export default function GlobalReliefFund() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
export default function GlobalReliefFundPage() { const [open, setOpen] = useState(false);
return <GlobalReliefFundClient />; 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)',
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>
</>
);
} }

12
app/community/kitchener-tamil-school/page.tsx
View File

@ -1,12 +0,0 @@
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 />;
}

14
app/community/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 CountUp from 'react-countup'
import Countdown from '@/components/elements/Countdown' import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -21,8 +15,8 @@ export default function CommunityPage() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/community-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/community-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Community</h1> <h1>Community</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Community</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Community</span></Link>
@ -33,7 +27,7 @@ export default function CommunityPage() {
</div> </div>
{/*===== HERO AREA ENDS =======*/} {/*===== HERO AREA ENDS =======*/}
<Community /> <Community />
</div> </div>

66
app/community/recipes/page.tsx
View File

@ -1,9 +1,3 @@
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" import Layout from "@/components/layout/Layout"
@ -19,8 +13,8 @@ export default function Recipes() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/recipes/recipes-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/community/recipes/recipes-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-6 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Recipes</h1> <h1>Recipes</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Recipes</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Recipes</span></Link>
@ -34,37 +28,37 @@ export default function Recipes() {
<div className="bloginner-section-area sp4"> <div className="bloginner-section-area sp4">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
{recipesList.map((post) => ( {recipesList.map((post) => (
<div key={post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}> <div key= {post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<div className="blog4-boxarea"> <div className="blog4-boxarea">
<div className="img1"> <div className="img1">
<img src={post.image} alt={post.title} /> <img src={post.image} alt={post.title} />
</div> </div>
<div className="content-area"> <div className="content-area">
<ul> <ul>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link> <Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
</li> </li>
<li> <li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link> <Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link>
</li> </li>
</ul> </ul>
<div className="space20" /> <div className="space20" />
<Link href={`/community/single-recipes?slug=${post?.slug}`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post?.title}</Link> <Link href={`/community/single-recipes?slug=${post?.slug}`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post?.title}</Link>
<div className="space24" /> <div className="space24" />
<Link href={`/community/single-recipes?slug=${post?.slug}`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link> <Link href={`/community/single-recipes?slug=${post?.slug}`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow"> <div className="arrow">
<Link href={`/community/single-recipes?slug=${post?.slug}`}><i className="fa-solid fa-arrow-right" /></Link> <Link href={`/community/single-recipes?slug=${post?.slug}`}><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
)) ))
} }
</div> </div>
{/* <div className="space30" /> */} <div className="space30" />
{/* <div className="pagination-area"> {/* <div className="pagination-area">
<nav aria-label="Page navigation example"> <nav aria-label="Page navigation example">
<ul className="pagination"> <ul className="pagination">
<li className="page-item"> <li className="page-item">
@ -84,9 +78,9 @@ export default function Recipes() {
</ul> </ul>
</nav> </nav>
</div> */} </div> */}
</div>
</div> </div>
</div> </div>
</div>
</Layout> </Layout>
</> </>

4
app/community/single-recipes/page.tsx
View File

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

27
app/community/kitchener-tamil-school/TamilSchoolClient.tsx → app/community/tamil-school/page.tsx
View File

@ -7,9 +7,9 @@ import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox"; import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/styles.css";
export default function TamilSchoolClient() { export default function CricketClub() {
const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 13 && +img.id <= 20); const galleryImages = communitySubmenuData.filter(img => +img.id >= 13 && +img.id <= 20);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0); const [index, setIndex] = useState(0);
@ -21,17 +21,20 @@ export default function TamilSchoolClient() {
className="inner-page-header" className="inner-page-header"
style={{ style={{
backgroundImage: 'url(/assets/img/community/tamil-school/school-banner.webp)', backgroundImage: 'url(/assets/img/community/tamil-school/school-banner.webp)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}} }}
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-6 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Kitchener Tamil School</h1> <h1>Tamil School</h1>
<div className="space20" /> <div className="space20" />
<Link href="/" className="text-decoration-none"> <Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right mx-2" /> Home <i className="fa-solid fa-angle-right mx-2" />
<span>Kitchener Tamil School</span> <span>Tamil School</span>
</Link> </Link>
</div> </div>
</div> </div>
@ -45,17 +48,17 @@ export default function TamilSchoolClient() {
<div className="col-lg-12 m-auto"> <div className="col-lg-12 m-auto">
<div className="event2-header heading5 space-margin60"> <div className="event2-header heading5 space-margin60">
<h2 className="text-anime-style-3"> <h2 className="text-anime-style-3">
Kitchener Tamil School Waterloo Region Tamil School
</h2> </h2>
<div className="space24" /> <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" /> <div className="space24" />
<p>The first Tamil Variety show & Social Hour was held on December 5th, 1987 at Keatsway Public School, Waterloo.</p> <p>The first Tamil Variety show & Social Hour was held on December 5th, 1987 at Keatsway Public School, Waterloo.</p>
<div className="space24" /> <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" /> <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> <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>
@ -63,8 +66,8 @@ export default function TamilSchoolClient() {
<div className="space24" /> <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> <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> <p>The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</p>
</div> </div>
@ -73,7 +76,7 @@ export default function TamilSchoolClient() {
<div className="row gx-4 gy-4 mt-4"> <div className="row gx-4 gy-4 mt-4">
{galleryImages.length > 0 ? ( {galleryImages.length > 0 ? (
galleryImages.map((img: any, i: number) => ( galleryImages.map((img, i) => (
<div <div
key={img.id} key={img.id}
className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12" className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"

4
app/contact copy/page.tsx
View File

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

258
app/contact/page.tsx
View File

@ -1,12 +1,256 @@
import type { Metadata } from "next" "use client";
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";
export const metadata: Metadata = { interface FormData {
title: "Contact Tamil Culture Waterloo | Connect With Us", name: string;
description: "Contact Tamil Culture Waterloo for events, membership, volunteering, and community support in Waterloo, Ontario.", phone: string;
}; email: string;
subject: string;
message: string;
}
import ContactSection from "@/components/contact/ContactSection"; interface FormErrors {
name?: string;
phone?: string;
email?: string;
subject?: string;
message?: string;
captcha?: string;
}
export default function Contact() { export default function Contact() {
return <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-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>
);
} }

4
app/event-schedule/page.tsx
View File

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

4
app/event-single/page.tsx
View File

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

4
app/event/page.tsx
View File

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

4
app/faq/page.tsx
View File

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

4
app/food/page.tsx
View File

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

4
app/heritage-language/page.tsx
View File

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

4
app/memories/page.tsx
View File

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

4
app/online/christmas/page.tsx
View File

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

23
app/page.tsx
View File

@ -1,7 +1,4 @@
import type { Metadata } from "next"
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import Popup from '@/components/layout/Popup' import Popup from '@/components/layout/Popup'
import Section1 from '@/components/sections/home9/section1' import Section1 from '@/components/sections/home9/section1'
import Section2 from '@/components/sections/home3/section2' import Section2 from '@/components/sections/home3/section2'
@ -32,11 +29,6 @@ import AdSectionFive from "@/components/home/AdSectionFive"
import HeritageLanguage from "@/components/heritage-language/heritage-language" import HeritageLanguage from "@/components/heritage-language/heritage-language"
import Food from "@/components/community/food/food" 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() { export default function Home() {
return ( return (
@ -46,23 +38,18 @@ export default function Home() {
<AboutSection /> <AboutSection />
<AdSectionOne /> <AdSectionOne />
<ArtAndCultureSection /> <ArtAndCultureSection />
<HomeWhyChooseUs />
<AdSectionThree />
<HomeUpcomingEvent />
{/* <HeritageLanguage /> */} {/* <HeritageLanguage /> */}
{/* <Food /> */} {/* <Food /> */}
{/* <HomeSlogan /> */} <HomeSlogan />
<HomeCommunitySection /> <HomeCommunitySection />
<AdSectionFive />
<HomeUpcomingEvent />
<HomeWhyChooseUs />
{/* <Section7 /> */} {/* <Section7 /> */}
{/* <FoodSection /> */} {/* <FoodSection /> */}
<AdSectionFive /> <AdSectionThree />
<HomePhotoGallerySection /> <HomePhotoGallerySection />
{/* <HaritageAndLanguage /> {/* <HaritageAndLanguage />
<AdSectionFour /> <AdSectionFour />

4
app/pricing-plan/page.tsx
View File

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

42
app/register/christmas/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/community-picnic/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/membership-2024/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/membership-2025/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/membership-2026/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/performance/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/registration-form/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/sponsor/page.jsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/sports-day/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/tamil-new-year/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/thai-pongal-2025/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

42
app/register/volunteer/page.tsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

4
app/speakers-single/page.tsx
View File

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

4
app/speakers/page.tsx
View File

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

4
app/tamil-culture-post/page.tsx
View File

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

4
app/tamil-culture/page.tsx
View File

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

12
app/tamil-culture/tamil-festivals/christian-festivals/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/christian-festivals/Section1" import Section1 from "@/components/tamilculture/tamil-festivals/christian-festivals/Section1"
import Link from "next/link" import Link from "next/link"
@ -18,8 +12,8 @@ export default function ChristianFestivals() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/christian-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/christian-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Christian Festivals</h1> <h1>Christian Festivals</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Christian Festivals</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Christian Festivals</span></Link>

14
app/tamil-culture/tamil-festivals/hindu-festivals/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section1" import Section1 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section1"
import Section2 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section2" import Section2 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section2"
@ -19,8 +13,8 @@ export default function HinduFestivals() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/hindu-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/hindu-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Hindu Festivals</h1> <h1>Hindu Festivals</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Hindu Festivals </span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Hindu Festivals </span></Link>
@ -32,7 +26,7 @@ export default function HinduFestivals() {
{/*===== HERO AREA ENDS =======*/} {/*===== HERO AREA ENDS =======*/}
<Section1 /> <Section1 />
<Section2 /> <Section2 />
</div> </div>

15
app/tamil-culture/tamil-festivals/muslim-festivals/page.tsx
View File

@ -1,16 +1,7 @@
import type { Metadata } from "next" 'use client'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/muslim-festivals/Section1" import Section1 from "@/components/tamilculture/tamil-festivals/muslim-festivals/Section1"
import Link from "next/link" 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() { export default function MuslimFestivals() {
return ( return (
@ -21,8 +12,8 @@ export default function MuslimFestivals() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/muslim-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/muslim-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Muslim Festivals </h1> <h1>Muslim Festivals </h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Muslim Festivals </span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Muslim Festivals </span></Link>

12
app/tamil-culture/tamil-festivals/page.tsx
View File

@ -1,10 +1,4 @@
import type { Metadata } from "next" 'use client'
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 Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/Section1" import Section1 from "@/components/tamilculture/tamil-festivals/Section1"
import Link from "next/link" import Link from "next/link"
@ -18,8 +12,8 @@ export default function TamilFestivals() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/tamil-festivals-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-festivals-banner/tamil-festivals-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Tamil Festivals</h1> <h1>Tamil Festivals</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Festivals</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Festivals</span></Link>

9
app/tamil-culture/tamil-language/page.jsx
View File

@ -1,8 +1,3 @@
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 Countdown from '@/components/elements/Countdown';
import Layout from "@/components/layout/Layout"; import Layout from "@/components/layout/Layout";
import { tamilculture } from '@/utility/constant.utils'; import { tamilculture } from '@/utility/constant.utils';
@ -20,8 +15,8 @@ export default function Tamilculture() {
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-6 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>TAMIL LANGUAGE</h1> <h1>TAMIL LANGUAGE</h1>
<div className="space20" /> <div className="space20" />
<Link href="/"> <Link href="/">

7
app/tamil-culture/tamil-language/tamil-language-data/page.tsx
View File

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

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

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -19,22 +13,22 @@ export default function BridalMekeup() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/bridal-makeup-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/bridal-makeup-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Bridal Make Up</h1> <h1>Bridal Make Up</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
<Section2 />
</div> </div>
</div>
<Section1 />
<Section2 />
</div>
</Layout> </Layout>
</> </>
) )

32
app/tamil-culture/tamil-wedding-custom/catholic-wedding/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -16,21 +10,21 @@ export default function CatholicWedding() {
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-catholic-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-catholic-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Tamil Catholic Weddings</h1> <h1>Tamil Catholic Weddings</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
</div> </div>
</div>
<Section1 />
</div>
</Layout> </Layout>
</> </>
) )

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

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,22 +11,22 @@ export default function CityStyle() {
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/city-wedding-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/city-wedding-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Marriage – City Style</h1> <h1>Marriage – City Style</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
<Section2 />
</div> </div>
</div>
<Section1 />
<Section2 />
</div>
</Layout> </Layout>
</> </>
) )

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

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -20,23 +14,23 @@ export default function HinduWedding() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/hindu-wedding-rituals-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/hindu-wedding-rituals-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Hindu Wedding Rituals</h1> <h1>Hindu Wedding Rituals</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
<Section2 />
<Section3 />
</div> </div>
</div>
<Section1 />
<Section2 />
<Section3 />
</div>
</Layout> </Layout>
</> </>
) )

17
app/tamil-culture/tamil-wedding-custom/page.tsx
View File

@ -1,17 +1,8 @@
import type { Metadata } from "next" 'use client'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import TamilCultureSection from "@/components/tamilculture/culturehome/TamilCultureSection" import TamilCultureSection from "@/components/tamilculture/culturehome/TamilCultureSection"
import Section1 from "@/components/tamilculture/tamil-wedding-custom/Section1" import Section1 from "@/components/tamilculture/tamil-wedding-custom/Section1"
import Link from "next/link" 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() { export default function TamilWeddingCustom() {
return ( return (
@ -22,8 +13,8 @@ export default function TamilWeddingCustom() {
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding/tamil-wedding-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding/tamil-wedding-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-4 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>Tamil Wedding & Custom</h1> <h1>Tamil Wedding & Custom</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Wedding & Custom</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Wedding & Custom</span></Link>
@ -34,7 +25,7 @@ export default function TamilWeddingCustom() {
</div> </div>
{/*===== HERO AREA ENDS =======*/} {/*===== HERO AREA ENDS =======*/}
<Section1 /> <Section1 />
</div> </div>

32
app/tamil-culture/tamil-wedding-custom/protestant-wedding/page.tsx
View File

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,21 +11,21 @@ export default function ProtestantWedding() {
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-protestant-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/tamil-protestant-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>A Tamil Protestant Wedding</h1> <h1>A Tamil Protestant Wedding</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
</div> </div>
</div>
<Section1 />
</div>
</Layout> </Layout>
</> </>
) )

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

@ -1,9 +1,3 @@
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 Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
@ -17,22 +11,22 @@ export default function StoryOfSaree() {
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
<div> <div>
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/saree-banner.webp)' }}> <div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/tamil-wedding-custom/saree-banner.webp)' }}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-5 m-auto">
<div className="heading1"> <div className="heading1 text-center">
<h1>The Story Of The Saree</h1> <h1>The Story Of The Saree</h1>
<div className="space20" /> <div className="space20" />
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link> <Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Tamil Culture</span></Link>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> <Section1 />
<Section2 />
</div> </div>
</div>
<Section1 />
<Section2 />
</div>
</Layout> </Layout>
</> </>
) )

2
components/about/association/Section1.tsx
View File

@ -32,7 +32,7 @@ export default function Section1() {
</div> </div>
</div> </div>
<div className="col-lg-6 order-1 order-lg-2 mb-5"> <div className="col-lg-6 order-1 order-lg-2 mb-5">
<div className="about6-header heading2 colored-text"> <div className="about6-header heading9 colored-text">
{/* <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" /> */}
<h2 className="text-anime-style-3">Association</h2> <h2 className="text-anime-style-3">Association</h2>

2
components/about/association/Section2.tsx
View File

@ -10,7 +10,7 @@ export default function Section2() {
<div className="row align-items-center"> <div className="row align-items-center">
{/* TEXT - NOW ON THE LEFT */} {/* TEXT - NOW ON THE LEFT */}
<div className="col-lg-6"> <div className="col-lg-6">
<div className="about6-header heading2 colored-text"> <div className="about6-header heading9 colored-text">
<div className="space16" /> <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, <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,

2
components/about/association/Section3.tsx
View File

@ -10,7 +10,7 @@ export default function Section3() {
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-12"> <div className="col-lg-12">
<div className="about6-header1 heading2 colored-text"> <div className="about6-header1 heading9 colored-text">
{/* <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" />
<h2 className="text-anime-style-3">Why Attend the Marketing Summit Event “2025”</h2> */} <h2 className="text-anime-style-3">Why Attend the Marketing Summit Event “2025”</h2> */}

6
components/about/committee/Section1.jsx
View File

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

5022
components/about/constitution/Section1.tsx
View File

File diff suppressed because it is too large Load Diff

2
components/businessdirectory/Section1.jsx
View File

@ -98,4 +98,4 @@ export default function Section1() {
</div> </div>
</> </>
); );
} }

13
components/common/BootstrapInit.jsx
View File

@ -1,13 +0,0 @@
"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;
}

26
components/common/ClientLayout.tsx
View File

@ -3,7 +3,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import Preloader from '@/app/loading'; import Preloader from '@/app/loading';
import ScrollToTop from 'react-scroll-to-top';
export default function ClientLayout({ children }: { children: React.ReactNode }) { export default function ClientLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname(); const pathname = usePathname();
@ -32,30 +31,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
return ( return (
<> <>
{isLoading && <Preloader fadeOut={fadeOut} />} {isLoading && <Preloader fadeOut={fadeOut} />}
{!isLoading && ( {!isLoading && children}
<>
{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"
/>
</>
)}
</> </>
); );
} }

256
components/contact/ContactSection.tsx
View File

@ -1,256 +0,0 @@
'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>
);
}

125
components/events/PhotoGallerySection.jsx
View File

@ -1,125 +0,0 @@
'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>
);
}

784
components/events/UpcomingEventData.jsx
View File

@ -1,271 +1,571 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import moment from "moment";
import { useState } from "react" import { useState } from "react"
import { events } from "@/utility/constant.utils"; // <-- import the events array here
export default function UpcomingEventData() { export default function UpcomingEventData() {
const [currentMonth, setCurrentMonth] = useState(moment()); const [isTab, setIsTab] = useState(1)
const handleTab = (i) => {
// Get start and end of current month setIsTab(i)
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 ( return (
<div className="event3-section-area sp4"> <>
<div className="container">
<div className="row"> <div className="event3-section-area sp4">
<div className="col-lg-6 m-auto"> <div className="container">
<div className="event2-header heading5 text-center space-margin60"> <div className="row">
<h2 className="text-anime-style-3">Events</h2> <div className="col-lg-6 m-auto">
<div className="event2-header heading5 text-center space-margin60">
{/* <h5>Event Schedule</h5> */}
<div className="space18" />
<h2 className="text-anime-style-3">Upcoming Events</h2>
</div>
</div> </div>
</div> </div>
</div> <div className="row">
<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" }}> <div className="tab-content" id="pills-tabContent">
<thead> <div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
<tr> <div className="event-widget-area">
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => ( <div className="row">
<th key={index} className="text-center"> <div className="col-lg-1" />
{day} <div className="col-lg-10 m-auto">
</th> <div className="event2-boxarea box1">
))} <h1 className="active">01</h1>
</tr> <div className="row align-items-center">
</thead> <div className="col-lg-5">
<tbody> <div className="img1">
{Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => ( <img src="/assets/img/event/upcoming-event/thai-pongal.webp" alt="" />
<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> </div>
) : ( </div>
"" <div className="col-lg-1" />
)} <div className="col-lg-6">
</td> <div className="content-area">
); <ul>
})} <li>
</tr> <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:30 PM - Sun Jan-14<span> | </span></Link>
))} </li>
</tbody> <li>
</table> <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada</Link>
</div> </li>
</ul>
<div className="col-lg-9" data-aos="fade-up" data-aos-duration={1000}> <div className="space20" />
<div className="tab-content" id="pills-tabContent"> <Link href="#" className="head">Thai Pongal 2024</Link>
<div className={"tab-pane fade show active tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}> <div className="space24" />
<div className="event-widget-area"> <p>Holy Family Croatian Roman Catholic Parish Hall</p>
{events.map((event, idx) => { {/* <div className="author-area">
const isEven = (idx + 1) % 2 === 0; <div className="autho-name-area">
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 d-flex flex-wrap align-items-center">
<h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
{!isEven ? (
<>
<div className="col-lg-5">
<div className="img1"> <div className="img1">
<img src={event.image} alt={event.title} /> <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> </div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="col-lg-1" />
<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"> <div className="img1">
<img src={event.image} alt={event.title} /> <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>
</> </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>
})} <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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</>
) )
} }

154
components/events/UpcomingEventSinglePage.jsx
View File

@ -1,154 +0,0 @@
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>
);
}

40
components/home/AboutSection.tsx
View File

@ -31,19 +31,18 @@ export default function AboutSection() {
</div> </div>
</div> </div>
</div> */} </div> */}
<div className="img2"> <div className="about3-images">
<img src="/assets/img/home/about/about.webp" alt="" style={{ width: "100%" }} /> {/* <img src="/assets/img/all-images/about/about-img10.png" alt="" className="about-img10 aniamtion-key-1" /> */}
</div>
{/* <div className="about3-images">
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}> <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
<img src="/assets/img/home/about/big-circle.webp" alt="" /> <img src="/assets/img/home/about/big-circle.webp" alt="" />
</div> </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}> <div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
<img src="/assets/img/home/about/small-circle-2.webp" alt="" /> <img src="/assets/img/home/about/small-circle-2.webp" alt="" />
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
@ -52,25 +51,12 @@ export default function AboutSection() {
{/* <div className="space18" /> */} {/* <div className="space18" /> */}
<h2 className="text-anime-style-3">Welcome to TCA website</h2> <h2 className="text-anime-style-3">Welcome to TCA website</h2>
<div className="space18" /> <div className="space18" />
<p data-aos="fade-left" data-aos-duration={900}> <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>
Learn Tamil Arts, Culture and Heritage and events in and around Waterloo – Guelph Region in the province of Ontario, Canada.
</p>
<div className="space8" /> <div className="space8" />
<p data-aos="fade-left" data-aos-duration={900}> <p data-aos="fade-left" data-aos-duration={900}>The website has a wealth of information that would interest you.</p>
The website has a wealth of information that would interest you. <div className="space8" />
</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="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>
<div className="space12" /> <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-area" data-aos="fade-left" data-aos-duration={1000}>
<div className="counter-box"> <div className="counter-box">
<h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3> <h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3>
@ -96,11 +82,11 @@ export default function AboutSection() {
</div> </div>
</div> </div>
</div> </div>
<div className='col-2 ad-banner'> <div className='col-lg-2'>
<div className="memory-boxarea pl-3"> <div className="memory-boxarea pl-3">
<div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} > <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
<img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{ height: "500px", width: "100%" }} /> <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" style={{height:"500px"}}/>
</div> </div>
</div> </div>
</div> </div>

2
components/home/AdSectionFive.tsx
View File

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

2
components/home/AdSectionOne.tsx
View File

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

2
components/home/AdSectionThree.tsx
View File

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

8
components/home/ArtsAndCultureSection.tsx
View File

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

148
components/home/HeroBanner.tsx
View File

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

54
components/home/HomeCommunitySection.tsx
View File

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

143
components/home/HomePhotoGallerySection.tsx
View File

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

343
components/home/HomeUpcomingEvent.tsx
View File

@ -1,169 +1,241 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import { useState } from "react" import { useState } from "react"
import { events } from "@/utility/constant.utils" // import your events array
export default function HomeUpcomingEvent() { export default function HomeUpcomingEvent() {
const [isTab, setIsTab] = useState(1) const [isTab, setIsTab] = useState(1)
const handleTab = (i: number) => { const handleTab = (i: number) => {
setIsTab(i) setIsTab(i)
} }
// Take only the first 3 events
const displayEvents = events.slice(0, 3) as any[];
return ( return (
<> <>
<div className="event3-section-area"> <div className="event3-section-area sp4">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-12 m-auto"> <div className="col-lg-12 m-auto">
<div className="event2-header heading5 space-margin60"> <div className="event2-header heading5 space-margin60">
<h2 className="text-anime-style-3">Events</h2> {/* <h5>Event Schedule</h5>
<div className="space18" /> */}
<h2 className="text-anime-style-3">Upcoming Events</h2>
</div> </div>
</div> </div>
</div> </div>
<div className="row gx-5"> <div className="row gx-5">
<div className="col-lg-10" data-aos="fade-up" data-aos-duration={1000}> <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="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={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"> <div className="event-widget-area">
<div className="row">
{displayEvents.map((event, idx) => { <div className="col-lg-12 m-auto">
const buttonHref = event.url || event.link || "#"; <div className="event2-boxarea box1">
const isExternalButton = /^https?:\/\//.test(buttonHref); <h1 className="active">01</h1>
<div className="row align-items-center">
return ( <div className="col-lg-5">
<div key={event.id}> <div className="img1">
{idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />} <img src="/assets/img/home/upcoming-events/upcoming-events-1.webp" alt="" />
<div className="row">
<div className="col-lg-12 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
<div className="row align-items-center">
{/* Alternating layout */}
{idx % 2 === 0 ? (
<>
<div className="col-lg-5">
<div className="img1">
<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={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={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={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 1,
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 || "purchase ticket"}</span>
</Link>
</div>
</div>
</div>
</>
) : (
<>
<div className="col-lg-6 order-2 order-lg-1">
<div className="content-area">
<ul>
<li>
<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={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={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 1,
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 || "purchase ticket"}</span>
</Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5 order-1 order-lg-2">
<div className="img1">
<img src={event.image} alt={event.title} />
</div>
</div>
</>
)}
</div> </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="" />5: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">purchase ticket</span></Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) </div>
})} </div>
<div className="space48" />
<div className="row">
<div className="col-lg-12 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="space20" />
<p>Christ Lutheran Church , Waterloo, ON.</p>
{/* <div className="space24" />
<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 className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/home/upcoming-events/upcoming-events-2.webp" alt="" />
</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>
</div> </div>
</div> </div>
@ -171,6 +243,9 @@ export default function HomeUpcomingEvent() {
<div className="memory-boxarea pl-3"> <div className="memory-boxarea pl-3">
<div className="img1" data-aos="zoom-in" data-aos-duration={1000} > <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="/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> </div>
</div> </div>

8
components/home/HomeWhyChooseus.tsx
View File

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

139
components/layout/MobileMenu.tsx
View File

@ -1,22 +1,13 @@
'use client' 'use client'
import { useState } from 'react'; import { useState } from 'react';
import Link from 'next/link' import Link from 'next/link'
import { events } from "@/utility/constant.utils";
export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) { export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
const [isAccordion, setIsAccordion] = useState<number | null>(null); const [isAccordion, setIsAccordion] = useState(1)
const upcomingEvents = events.filter((event: any) => event.link);
const handleAccordion = (key: any) => { const handleAccordion = (key: any) => {
setIsAccordion(prevState => prevState === key ? null : key) setIsAccordion(prevState => prevState === key ? null : key)
} }
const [subAccordion, setSubAccordion] = useState<number | null>(null)
const handleSubAccordion = (key: number) => {
setSubAccordion(prevState => prevState === key ? null : key)
}
return ( return (
<> <>
<div className="mobile-header mobile-haeder1 d-block d-lg-none"> <div className="mobile-header mobile-haeder1 d-block d-lg-none">
@ -24,7 +15,7 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
<div className="col-12"> <div className="col-12">
<div className="mobile-header-elements"> <div className="mobile-header-elements">
<div className="mobile-logo"> <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>
<div className="mobile-nav-icon dots-menu" onClick={handleMobileMenu}> <div className="mobile-nav-icon dots-menu" onClick={handleMobileMenu}>
<i className="fa-solid fa-bars-staggered" /> <i className="fa-solid fa-bars-staggered" />
@ -59,103 +50,59 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
<li className="hash-has-sub"><Link href="/index10" className="hash-nav">Home Ten</Link></li> <li className="hash-has-sub"><Link href="/index10" className="hash-nav">Home Ten</Link></li>
</ul> */} </ul> */}
</li> </li>
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 1 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(1)}><em /></span> <li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 3 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(3)}><em /></span>
<Link href="/about" className="hash-nav">About </Link> <Link href="/about" className="hash-nav">About</Link>
<ul className={`sub-menu ${isAccordion == 1 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 1 ? "block" : "none"}` }}> <ul className={`sub-menu ${isAccordion == 3 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 3 ? "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/association" className="hash-nav">Association</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/mission" className="hash-nav">Mission</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/constitution" className="hash-nav">Constitution</Link></li>
<li className="hash-has-sub"><Link href="/about/committee" className="hash-nav">Committee</Link></li> <li className="hash-has-sub"><Link href="/about/committee" className="hash-nav">Committee</Link></li>
</ul> </ul>
</li> </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> <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> <Link href="/tamil-culture" className="hash-nav">Tamil Culture</Link>
<ul className={`sub-menu ${isAccordion == 6 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 6 ? "block" : "none"}` }}>
<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>
<li className="hash-has-sub"> <li className="hash-has-sub"><Link href="/tamil-culture/tamil-wedding-custom" className="hash-nav">Tamil Wedding & Custom</Link></li>
<span <li className="hash-has-sub"><Link href="/tamil-culture/tamil-language" className="hash-nav">Tamil Language</Link></li>
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> </ul>
</li> </li>
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 4 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(4)}><em /></span> <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> <Link href="/community" className="hash-nav">Community</Link>
<ul className={`sub-menu ${isAccordion == 4 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 4 ? "block" : "none"}` }}> <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/business-directory" className="hash-nav">Business Directory</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/recipes" className="hash-nav">Recipes</Link></li>
<li className="hash-has-sub"><Link href="/community/global-relief-fund" className="hash-nav">Global Relief Fund</Link></li> <li className="hash-has-sub"><Link href="/community/global-relief-fund" className="hash-nav">Global Relief Fund</Link></li>
</ul> </ul>
</li> </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> <li className="hash-has-sub"><Link href="/contact" className="hash-nav">Contact</Link></li>
</ul> </ul>
@ -198,16 +145,16 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
<div className="social-links-mobile-menu"> <div className="social-links-mobile-menu">
<ul> <ul>
<li> <li>
<Link href="/"><i className="fa-brands fa-facebook-f" /></Link> <Link href="/#"><i className="fa-brands fa-facebook-f" /></Link>
</li> </li>
<li> <li>
<Link href="/"><i className="fa-brands fa-instagram" /></Link> <Link href="/#"><i className="fa-brands fa-instagram" /></Link>
</li> </li>
<li> <li>
<Link href="/"><i className="fa-brands fa-linkedin-in" /></Link> <Link href="//#"><i className="fa-brands fa-linkedin-in" /></Link>
</li> </li>
<li> <li>
<Link href="/"><i className="fa-brands fa-youtube" /></Link> <Link href="/#"><i className="fa-brands fa-youtube" /></Link>
</li> </li>
</ul> </ul>
</div> </div>

22
components/layout/footer/Footer1.tsx
View File

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

160
components/layout/header/Header1.tsx
View File

@ -1,60 +1,11 @@
"use client"; import Link from 'next/link'
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) { export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
const [mobileMenu, setMobileMenu] = useState(false);
const upcomingEvents = events.filter((event: any) => event.link);
return ( return (
<> <>
<header> <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="container">
<div className="row"> <div className="row">
<div className="col-lg-12"> <div className="col-lg-12">
@ -197,6 +148,27 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
<li><Link href="/about/committee">Committee</Link></li> <li><Link href="/about/committee">Committee</Link></li>
</ul> </ul>
</li> </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"> <li className="dropdown">
<Link href="/tamil-culture"> <Link href="/tamil-culture">
Tamil Culture <i className="fa-solid fa-angle-down" /> Tamil Culture <i className="fa-solid fa-angle-down" />
@ -234,60 +206,15 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
</li> </li>
</ul> </ul>
</li> </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> <li>
<Link href="/community">Community <i className="fa-solid fa-angle-down" /></Link> <Link href="/community">Community <i className="fa-solid fa-angle-down" /></Link>
<ul className="dropdown-padding"> <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/business-directory">Business Directory</Link></li>
<li><Link href="/community/kitchener-tamil-school">Kitchener Tamil School</Link></li> <li><Link href="/community/tamil-school">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> <li><Link href="/community/global-relief-fund">Global Relief Fund</Link></li>
</ul> </ul>
@ -315,7 +242,14 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
<li><Link href="/blog-single">Blog Details</Link></li> <li><Link href="/blog-single">Blog Details</Link></li>
</ul> </ul>
</li> */} </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> {/* <li>
<Link href="/#">Pages <i className="fa-solid fa-angle-down" /></Link> <Link href="/#">Pages <i className="fa-solid fa-angle-down" /></Link>
<ul className="dropdown-padding"> <ul className="dropdown-padding">
@ -326,29 +260,11 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
</ul> </ul>
</li> */} </li> */}
<li> <li>
<Link href="/contact">Contact</Link> <Link href="/contact">Contact</Link>
</li> </li>
</ul> </ul>
</div> </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}> {/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
<a><img src="/assets/img/icons/search1.svg" alt="" /></a> <a><img src="/assets/img/icons/search1.svg" alt="" /></a>
</div> */} </div> */}
@ -359,12 +275,12 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
<li> <li>
<Link href="/#"><i className="fa-brands fa-instagram" /></Link> <Link href="/#"><i className="fa-brands fa-instagram" /></Link>
</li> </li>
{/* <li> <li>
<Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link> <Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link>
</li> </li>
<li> <li>
<Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link> <Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link>
</li> */} </li>
</ul> </ul>
</div> </div>
{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}> {/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>

12
components/online/christmas/Section1.jsx
View File

@ -17,7 +17,7 @@ export default function Section1() {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="h-100 w-100"> <div className="h-100 w-100">
<div className="row h-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"> <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>
</div> */} </div>
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="about6-header heading9"> <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"> <div className="img right-img">
<img src="/assets/img/online/christmas-year-end/christmas-1.webp" alt="" /> <img src="/assets/img/online/christmas-year-end/christmas-1.webp" alt="" />
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

12
components/online/communitypicnic/Section1.jsx
View File

@ -17,7 +17,7 @@ export default function Section1() {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="h-100 w-100"> <div className="h-100 w-100">
<div className="row h-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"> <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>
</div> */} </div>
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="about6-header heading9"> <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"> <div className="img right-img">
<img src="/assets/img/online/community-picnic/picnic-1.webp" alt="" /> <img src="/assets/img/online/community-picnic/picnic-1.webp" alt="" />
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

12
components/online/membership2024/Section1.tsx
View File

@ -17,7 +17,7 @@ export default function Section1() {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div <div
style={{ style={{
position: "relative", position: "relative",
@ -41,20 +41,20 @@ export default function Section1() {
scrolling="no" scrolling="no"
></iframe> ></iframe>
</div> </div>
</div> */} </div>
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="about6-header heading9"> <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"> <div className="img right-img">
<img src="/assets/img/online/membership-2024/section1.webp" alt="" /> <img src="/assets/img/online/membership-2024/section1.webp" alt="" />
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

12
components/online/membership2025/Section1.jsx
View File

@ -17,7 +17,7 @@ export default function Section1() {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div <div
style={{ style={{
position: "relative", position: "relative",
@ -49,20 +49,20 @@ export default function Section1() {
></iframe> ></iframe>
</div> </div>
</div> */} </div>
{/* <div className="col-lg-6"> <div className="col-lg-6">
<div className="about6-header heading9"> <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"> <div className="img right-img">
<img src="/assets/img/online/membership-2025/membership-2025-1.webp"alt="" /> <img src="/assets/img/online/membership-2025/membership-2025-1.webp"alt="" />
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

63
components/online/membership2026/Section1.jsx
View File

@ -1,63 +0,0 @@
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>
</>
)
}

42
components/online/membership2026/Section2.jsx
View File

@ -1,42 +0,0 @@
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>
</>
)
}

44
components/online/membership2026/Section3.jsx
View File

@ -1,44 +0,0 @@
'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>
);
}

Some files were not shown because too many files have changed in this diff Show More