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

new meta tags are updated

Browse Source
This commit is contained in:
akash 2026-03-09 19:08:36 +05:30
parent 36de60897d
commit 2a15b0fb13
48 changed files with 1458 additions and 1180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -4,7 +4,7 @@ import Layout from '@/components/layout/Layout';
import axios from 'axios';
import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useState, useCallback } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
@ -24,13 +24,7 @@ export default function SingleGallery() {
const [open, setOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
if (eventId) {
getEventGallery();
}
}, [eventId]);
const getEventGallery = async () => {
const getEventGallery = useCallback(async () => {
try {
const res = await axios.get(
`https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
@ -45,7 +39,13 @@ export default function SingleGallery() {
} catch (error) {
console.log("Error fetching event images", error);
}
};
}, [eventId]);
useEffect(() => {
if (eventId) {
getEventGallery();
}
}, [eventId, getEventGallery]);
const handleImageClick = (index: number) => {
setCurrentIndex(index);

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

@ -1,9 +1,10 @@
'use client';
import Countdown from '@/components/elements/Countdown';
export const metadata = {
title: "Upcoming Community Events | Join Us",
description: "Stay updated on upcoming Tamil cultural events and community gatherings in Waterloo, Ontario.",
};
import Layout from "@/components/layout/Layout";
import { memoryData } from '@/utility/constant.utils';
import Link from "next/link";
import { useState } from 'react';
import UpcomingEventData from '../../../components/events/UpcomingEventData';
export default function Memories() {

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

@ -1,4 +1,8 @@
'use client'
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"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Tamil Cultural Association | Get to Know Us",
description: "Discover our association, leadership structure, and how we support Tamil culture and unity in Waterloo, Ontario.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"
@ -31,7 +37,7 @@ export default function Association() {
<Section1 />
<Section2 />
<Section3 />
</div>
</div>
</Layout>
</>
)

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

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Meet Our Committee Members | Community Leaders",
description: "Meet the dedicated committee members leading Tamil Culture Waterloo and organizing community initiatives.",
};
import Layout from "@/components/layout/Layout";
import Section1 from "@/components/about/committee/Section1"; // adjust path if needed

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Constitution & Governance | Read Our Principles",
description: "Read the constitution outlining governance, values, and operational principles of our Tamil cultural association.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Our Mission & Vision | Discover Our Purpose",
description: "Explore our mission and vision to preserve Tamil culture and strengthen community connections in Waterloo Region.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

8
app/about/page.tsx
View File

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "About Tamil Culture Waterloo | Learn Our Story",
description: "Learn about Tamil Culture Waterloo, our history, values, and role in serving the Tamil community in Waterloo Region.",
};
import CountUp from 'react-countup'
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

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

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

@ -1,120 +1,12 @@
'use client';
import type { Metadata } from "next"
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 const metadata: Metadata = {
title: "Tamil Badminton Club | Play With Us",
description: "Play, train, and compete with the Tamil Badminton Club in Waterloo Region.",
};
export default function CricketClub() {
import BadmintonClubClient from "./BadmintonClubClient";
const galleryImages = communitySubmenuData.filter(img => +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, 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>
</>
);
export default function BadmintonClubPage() {
return <BadmintonClubClient />;
}

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Tamil Business Directory | Support Local Businesses",
description: "Explore Tamil-owned businesses and support local entrepreneurs in Waterloo.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

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

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

@ -1,107 +1,12 @@
'use client';
import type { Metadata } from "next"
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 const metadata: Metadata = {
title: "Tamil Cricket Club | Join the Team",
description: "Join the Tamil Cricket Club and enjoy sports and teamwork in Waterloo.",
};
export default function CricketClub() {
import CricketClubClient from "./CricketClubClient";
const galleryImages = communitySubmenuData.filter(img => +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, 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>
</>
);
export default function CricketClubPage() {
return <CricketClubClient />;
}

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

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

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

@ -1,150 +1,12 @@
'use client';
import type { Metadata } from "next"
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 const metadata: Metadata = {
title: "Global Relief Fund | Support Humanitarian Causes",
description: "Support global relief efforts and humanitarian causes led by the Tamil community.",
};
export default function GlobalReliefFund() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
import GlobalReliefFundClient from "./GlobalReliefFundClient";
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, 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>
</>
);
export default function GlobalReliefFundPage() {
return <GlobalReliefFundClient />;
}

8
app/community/page.tsx
View File

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Tamil Community Programs | Get Involved",
description: "Discover Tamil community programs, initiatives, and social activities in Waterloo Region.",
};
import CountUp from 'react-countup'
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Traditional Tamil Recipes | Explore & Cook",
description: "Explore traditional Tamil recipes and home-style dishes shared by the community.",
};
import Layout from "@/components/layout/Layout"
@ -30,7 +36,7 @@ export default function Recipes() {
<div className="row">
{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="img1">
<img src={post.image} alt={post.title} />

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

@ -0,0 +1,121 @@
'use client';
import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
export default function TamilSchoolClient() {
const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 13 && +img.id <= 20);
const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);
return (
<>
<Layout headerStyle={1} footerStyle={1}>
<div
className="inner-page-header"
style={{
backgroundImage: 'url(/assets/img/community/tamil-school/school-banner.webp)',
}}
>
<div className="container">
<div className="row">
<div className="col-lg-12 m-auto">
<div className="heading1">
<h1>Tamil School</h1>
<div className="space20" />
<Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right mx-2" />
<span>Tamil School</span>
</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">
Waterloo Region 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>
</>
);
}

125
app/community/tamil-school/page.tsx
View File

@ -1,121 +1,12 @@
'use client';
import type { Metadata } from "next"
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 const metadata: Metadata = {
title: "Tamil Language School | Enroll Your Child",
description: "Learn about Tamil language education programs for children in Waterloo Region.",
};
export default function CricketClub() {
import TamilSchoolClient from "./TamilSchoolClient";
const galleryImages = communitySubmenuData.filter(img => +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>Tamil School</h1>
<div className="space20" />
<Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right mx-2" />
<span>Tamil School</span>
</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">
Waterloo Region 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, 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 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>
</>
);
export default function TamilSchoolPage() {
return <TamilSchoolClient />;
}

258
app/contact/page.tsx
View File

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

8
app/page.tsx
View File

@ -1,4 +1,7 @@
import type { Metadata } from "next"
import Layout from "@/components/layout/Layout"
import Popup from '@/components/layout/Popup'
import Section1 from '@/components/sections/home9/section1'
import Section2 from '@/components/sections/home3/section2'
@ -29,6 +32,11 @@ import AdSectionFive from "@/components/home/AdSectionFive"
import HeritageLanguage from "@/components/heritage-language/heritage-language"
import Food from "@/components/community/food/food"
export const metadata: Metadata = {
title: "Tamil Culture Waterloo |Join Our Community",
description: "Celebrating Tamil heritage in Waterloo, Ontario through culture, events, and community programs. Join Tamil families and stay connected locally.",
};
export default function Home() {
return (

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

@ -1,3 +1,9 @@
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"
@ -16,7 +22,7 @@ export default function christmas() {
<div className="row">
<div className="col-lg-12 m-auto">
<div className="heading1">
<h1>Christmas & 2024 <br/> Year End Celebrations</h1>
<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>

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,7 @@
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"

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

@ -1,3 +1,9 @@
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"
@ -27,7 +33,7 @@ export default function sportsday() {
<Section1 />
<Section2 />
<Section3/>
<Section3 />
</div>
</Layout>

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,3 +1,9 @@
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"

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

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Christian Festivals Among Tamils | Faith & Heritage",
description: "Learn how Christian Tamil festivals are celebrated in Waterloo with faith, tradition, and community spirit.",
};
import Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/christian-festivals/Section1"
import Link from "next/link"

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

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Hindu Festivals in Tamil Culture | Learn & Celebrate",
description: "Learn about Hindu festivals observed by Tamil families and communities in Waterloo Region.",
};
import Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section1"
import Section2 from "@/components/tamilculture/tamil-festivals/hindu-festivals/Section2"

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

@ -1,7 +1,16 @@
'use client'
import type { Metadata } from "next"
import Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/muslim-festivals/Section1"
import Link from "next/link"
export const metadata: Metadata = {
title: "Muslim Festivals in Tamil Community | Cultural Unity",
description: "Discover Muslim festivals celebrated within the Tamil community, promoting unity and shared heritage.",
};
export default function MuslimFestivals() {
return (

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

@ -1,4 +1,10 @@
'use client'
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Tamil Festivals & Traditions | Explore Our Culture",
description: "Explore Tamil festivals celebrated in Waterloo, Ontario, and learn their cultural meaning and traditions.",
};
import Layout from "@/components/layout/Layout"
import Section1 from "@/components/tamilculture/tamil-festivals/Section1"
import Link from "next/link"

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

@ -1,3 +1,8 @@
export const metadata = {
title: "Tamil Language History & Culture | Learn Tamil",
description: "Explore the history, richness, and global significance of the Tamil language.",
};
import Countdown from '@/components/elements/Countdown';
import Layout from "@/components/layout/Layout";
import { tamilculture } from '@/utility/constant.utils';

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Tamil Bridal Makeup Traditions | Explore Styles",
description: "Explore traditional and modern Tamil bridal makeup styles and cultural beauty practices.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Catholic Tamil Wedding Customs | Cultural Insights",
description: "Learn about Catholic Tamil wedding customs practiced by families in the community.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Modern City Style Tamil Weddings | View Trends",
description: "Discover modern city-style Tamil weddings blending tradition with contemporary trends.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Hindu Wedding Rituals | Understand Sacred Customs",
description: "Learn the meaning behind Hindu Tamil wedding rituals and sacred marriage traditions.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,8 +1,17 @@
'use client'
import type { Metadata } from "next"
import Layout from "@/components/layout/Layout"
import TamilCultureSection from "@/components/tamilculture/culturehome/TamilCultureSection"
import Section1 from "@/components/tamilculture/tamil-wedding-custom/Section1"
import Link from "next/link"
export const metadata: Metadata = {
title: "Traditional Tamil Wedding Customs | Learn Traditions",
description: "Understand traditional Tamil wedding customs and rituals followed by families across generations.",
};
export default function TamilWeddingCustom() {
return (

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Protestant Tamil Wedding Traditions | Learn More",
description: "Explore Protestant Tamil wedding traditions and their cultural and religious significance.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

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

@ -1,3 +1,9 @@
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Story of the Saree | Discover Tamil Heritage",
description: "Learn the story, history, and cultural importance of the saree in Tamil heritage.",
};
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"

256
components/contact/ContactSection.tsx Normal file
View File

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

125
components/events/PhotoGallerySection.jsx Normal file
View File

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