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

Community All Pages Responsive added

Browse Source
This commit is contained in:
akashluca-l 2025-07-03 14:08:12 +05:30
parent 53adeb5aa9
commit 85e1ed578c
7 changed files with 538 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,12 @@
import Layout from '@/components/layout/Layout'; import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils'; import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link'; import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } 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";
export default function CricketClub() { export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12); const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -20,10 +17,15 @@ export default function CricketClub() {
return ( return (
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div <div
className="inner-page-header" className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }} style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
@ -31,15 +33,18 @@ export default function CricketClub() {
<div className="heading1 text-center"> <div className="heading1 text-center">
<h1>Badminton Club</h1> <h1>Badminton Club</h1>
<div className="space20" /> <div className="space20" />
<Link href="/"> <Link href="/" className="text-white text-decoration-none">
Home <i className="fa-solid fa-angle-right" /> <span>Badminton Club</span> Home <i className="fa-solid fa-angle-right mx-2" />
<span>Badminton Club</span>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bloginner-section-area sp1">
{/* Description Section */}
<div className="bloginner-section-area sp1 py-5">
<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">
@ -48,53 +53,55 @@ export default function CricketClub() {
Badminton Club Cambridge Badminton Club Cambridge
</h2> </h2>
<div className="space24" /> <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> <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" /> <div className="space24" />
<p> <p className='mb-2'><strong>2022/23 Badminton Membership Fee:</strong></p>
2022/23 Badminton Membership Fee: <p>Single $106.00</p>
</p> <p>Family $157.00</p>
<p>
Single $106.00
</p>
<p>
Family $157.00
</p>
<div className="space24" /> <div className="space24" />
<p> <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) 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>
<p>
<p>The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board. 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> More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="row gx-4 gy-4 mt-4">
<div className="row gx-5"> {galleryImages.length > 0 ? (
<div className="col-lg-12"> galleryImages.map((img, i) => (
<div className="row mt-4">
{galleryImages.map((img, i) => (
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
<div <div
className="memory-boxarea pl-3" className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
style={{ cursor: "pointer" }} key={img.id}
onClick={() => { onClick={() => {
setIndex(i); setIndex(i);
setOpen(true); setOpen(true);
}} }}
style={{ cursor: 'pointer' }}
> >
<div className="image" data-aos="zoom-in" data-aos-duration={1000}> <div className="memory-boxarea rounded overflow-hidden h-100">
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} /> <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>
</div> </div>
))} ))
) : (
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5"> <div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p> <p className="text-muted">No images found for this event.</p>
</div> </div>
@ -102,9 +109,8 @@ export default function CricketClub() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
{/* Lightbox Viewer */}
<Lightbox <Lightbox
open={open} open={open}
close={() => setOpen(false)} close={() => setOpen(false)}

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

@ -3,15 +3,12 @@
import Layout from '@/components/layout/Layout'; import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils'; import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link'; import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } 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';
export default function CricketClub() { export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4); const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -20,63 +17,84 @@ export default function CricketClub() {
return ( return (
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div <div
className="inner-page-header" className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }} style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-6 m-auto"> <div className="col-lg-6 m-auto">
<div className="heading1 text-center"> <div className="heading1 text-center">
<h1>Cricket Club</h1> <h1 className="mb-3">Cricket Club</h1>
<div className="space20" /> <Link href="/" className="text-decoration-none">
<Link href="/"> Home <i className="fa-solid fa-angle-right mx-2" />
Home <i className="fa-solid fa-angle-right" /> <span>Community</span> <span>Community</span>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bloginner-section-area sp1">
<div className="bloginner-section-area sp1 py-5">
<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"> <h2 className="text-anime-style-3 fw-bold">Tamil Cricket Club Waterloo</h2>
Tamil Cricket Club Waterloo <div className="space24" />
</h2> <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 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.
The club is primarily supported by Tamil Cultural Association of Waterloo Region. More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a></p>
</div> </div>
</div> </div>
</div> </div>
<div className="row gx-4 gy-4">
<div className="row gx-5"> {galleryImages.length > 0 ? (
<div className="col-lg-12"> galleryImages.map((img, i) => (
<div className="row mt-4">
{galleryImages.map((img, i) => (
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
<div <div
className="memory-boxarea pl-3" key={img.id}
style={{ cursor: "pointer" }} className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
onClick={() => { onClick={() => {
setIndex(i); setIndex(i);
setOpen(true); setOpen(true);
}} }}
style={{ cursor: 'pointer' }}
> >
<div className="image" data-aos="zoom-in" data-aos-duration={1000}> <div className="memory-boxarea rounded overflow-hidden h-100">
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} /> <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>
</div> </div>
))} ))
) : (
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5"> <div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p> <p className="text-muted">No images found for this event.</p>
</div> </div>
@ -84,15 +102,8 @@ export default function CricketClub() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<Lightbox <Lightbox open={open} close={() => setOpen(false)} slides={galleryImages} index={index} />
open={open}
close={() => setOpen(false)}
slides={galleryImages}
index={index}
/>
</Layout> </Layout>
</> </>
); );

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

@ -3,13 +3,10 @@
import Layout from '@/components/layout/Layout'; import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils'; import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link'; import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } 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";
export default function GlobalReliefFund() { export default function GlobalReliefFund() {
// Show only images with id 1 to 4 // Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4); const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
@ -20,71 +17,121 @@ export default function GlobalReliefFund() {
return ( return (
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div <div
className="inner-page-header" className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }} style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-6 m-auto"> <div className="col-lg-6 m-auto">
<div className="heading1 text-center"> <div className="heading1 text-center text-white">
<h1>TCA Global Relief Fund</h1> <h1>TCA Global Relief Fund</h1>
<div className="space20" /> <div className="space20" />
<Link href="/"> <Link href="/" className="text-white text-decoration-none">
Home <i className="fa-solid fa-angle-right" /> <span>Community</span> Home <i className="fa-solid fa-angle-right mx-2" />
<span>Community</span>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bloginner-section-area sp1">
<div className="bloginner-section-area sp1 py-5 bg-light">
<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"> <h2 className="text-anime-style-3">TCA Global Relief Fund</h2>
TCA Global Relief Fund
</h2>
<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 individual in Canada, Sri Lanka and India.</p>
<div className="space20" /> <div className="space20" />
<div className='ps-4'> <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> <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> <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> <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> <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> <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> <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> <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> <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> </div>
</div> </div>
<div className="row gx-5"> <div className="row gx-4 gy-4 mt-4">
<div className="col-lg-12"> {galleryImages.length > 0 ? (
<div className="row mt-4"> galleryImages.map((img, i) => (
{galleryImages.map((img, i) => (
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
<div <div
className="memory-boxarea pl-3" key={img.id}
style={{ cursor: "pointer" }} className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
onClick={() => { onClick={() => {
setIndex(i); setIndex(i);
setOpen(true); setOpen(true);
}} }}
style={{ cursor: 'pointer' }}
> >
<div className="image" data-aos="zoom-in" data-aos-duration={1000}> <div className="memory-boxarea shadow-sm rounded overflow-hidden h-100">
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} /> <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>
</div> </div>
))} ))
) : (
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5"> <div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p> <p className="text-muted">No images found for this event.</p>
</div> </div>
@ -92,8 +139,7 @@ export default function GlobalReliefFund() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<Lightbox <Lightbox
open={open} open={open}

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

@ -3,15 +3,12 @@
import Layout from '@/components/layout/Layout'; import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils'; import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link'; import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } 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";
export default function CricketClub() { export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +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);
@ -20,10 +17,14 @@ export default function CricketClub() {
return ( return (
<> <>
<Layout headerStyle={1} footerStyle={1}> <Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div <div
className="inner-page-header" className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }} style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
> >
<div className="container"> <div className="container">
<div className="row"> <div className="row">
@ -31,15 +32,17 @@ export default function CricketClub() {
<div className="heading1 text-center"> <div className="heading1 text-center">
<h1>Tamil School</h1> <h1>Tamil School</h1>
<div className="space20" /> <div className="space20" />
<Link href="/"> <Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right" /> <span>Tamil School</span> Home <i className="fa-solid fa-angle-right mx-2" />
<span>Tamil School</span>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bloginner-section-area sp1">
<div className="bloginner-section-area sp1 py-5">
<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">
@ -49,55 +52,58 @@ export default function CricketClub() {
</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, down town 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" />
<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>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>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" /> <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 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>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 Covid19 pandemic in the Province. Virtual and in house classes are conducted by Mrs. Suharmini Shrishankar.</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>
<div className="space24" /> <p>The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</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
The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</p>
</div> </div>
</div> </div>
</div> </div>
<div className="row gx-4 gy-4 mt-4">
<div className="row gx-5"> {galleryImages.length > 0 ? (
<div className="col-lg-12"> galleryImages.map((img, i) => (
<div className="row mt-4">
{galleryImages.map((img, i) => (
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
<div <div
className="memory-boxarea pl-3" key={img.id}
style={{ cursor: "pointer" }} className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
onClick={() => { onClick={() => {
setIndex(i); setIndex(i);
setOpen(true); setOpen(true);
}} }}
style={{ cursor: 'pointer' }}
> >
<div className="image mb-4" data-aos="zoom-in" data-aos-duration={1000}> <div className="memory-boxarea rounded overflow-hidden h-100">
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} /> <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>
</div> </div>
))} ))
) : (
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5"> <div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p> <p className="text-muted">No images found for this event.</p>
</div> </div>
@ -105,8 +111,6 @@ export default function CricketClub() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<Lightbox <Lightbox
open={open} open={open}

63
components/businessdirectory/Section1.jsx
View File

@ -1,9 +1,11 @@
'use client' 'use client';
import React, { useState } from "react"; import React, { useState } from "react";
import {directoryData} from "@/utility/constant.utils" import { directoryData } from "@/utility/constant.utils";
export default function Section1() { export default function Section1() {
const categories = Object.keys(directoryData); const categories = Object.keys(directoryData);
const [selectedCategory, setSelectedCategory] = useState(categories[0]); const [selectedCategory, setSelectedCategory] = useState(categories[0]);
const tableHeaders = [ const tableHeaders = [
"Services", "Services",
"Name", "Name",
@ -14,26 +16,30 @@ const categories = Object.keys(directoryData);
]; ];
return ( return (
<> <>
{/*===== BLOG AREA STARTS =======*/}
<div className="blog-details-section sp1"> <div className="blog-details-section sp1">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-3">
<div className="col-lg-3 mb-4">
<div className="space30 d-lg-none d-block" /> <div className="space30 d-lg-none d-block" />
<div className="blog-auhtor-details"> <div className="blog-auhtor-details">
<div className="blog-categories"> <div className="blog-categories">
<h3>Business Directory</h3> <h3 className="mb-3">Business Directory</h3>
<div className="space12" /> <div className="space12" />
<ul> <ul className="list-unstyled">
{categories.map((cat) => ( {categories.map((cat) => (
<li key={cat}> <li key={cat} className="mb-2">
<button <button
className={`category-btn${selectedCategory === cat ? " active" : ""}`} className={`category-btn w-100 text-start ${selectedCategory === cat
? "active"
: "bg-white text-dark"
}`}
onClick={() => setSelectedCategory(cat)} onClick={() => setSelectedCategory(cat)}
> >
{cat}<span><i className="fa-solid fa-angle-right" /></span> <span>{cat}</span>
<i className="fa-solid fa-angle-right" />
</button> </button>
</li> </li>
))} ))}
@ -41,38 +47,40 @@ const categories = Object.keys(directoryData);
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-9">
<div className="col-lg-9">
<div className="schedule-section-area sp10"> <div className="schedule-section-area sp10">
<div className="container"> <div className="table-responsive shadow-sm rounded">
<div className="row"> <table className="table table-bordered table-striped align-middle mb-0">
<div className="col-lg-11 m-auto"> <thead className="table-dark">
<div className="schedule">
<table>
<thead>
<tr> <tr>
{tableHeaders.map((header) => ( {tableHeaders.map((header) => (
<th key={header}>{header}</th> <th key={header} className="text-nowrap">{header}</th>
))} ))}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{(directoryData[selectedCategory] || []).length === 0 ? ( {(directoryData[selectedCategory] || []).length === 0 ? (
<tr> <tr>
<td colSpan={6} style={{ textAlign: "center" }}> <td colSpan={6} className="text-center py-4 text-muted">
No data available for this category. No data available for this category.
</td> </td>
</tr> </tr>
) : ( ) : (
directoryData[selectedCategory].map((row, idx) => ( directoryData[selectedCategory].map((row, idx) => (
<tr key={idx}> <tr key={idx}>
<td>{row.services}</td> <td style={{ minWidth: 120 }}>{row.services}</td>
<td>{row.name}</td> <td style={{ minWidth: 120 }}>{row.name}</td>
<td>{row.phone}</td> <td style={{ whiteSpace: "nowrap" }}>{row.phone}</td>
<td>{row.serviceArea}</td> <td>{row.serviceArea}</td>
<td>{row.location}</td> <td>{row.location}</td>
<td> <td>
<a href={row.website} target="_blank" rel="noopener noreferrer"> <a
href={row.website}
target="_blank"
rel="noopener noreferrer"
>
Website Website
</a> </a>
</td> </td>
@ -84,15 +92,10 @@ const categories = Object.keys(directoryData);
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{/*===== BLOG AREA ENDS =======*/}
</> </>
) );
} }

84
public/assets/css/main.css
View File

@ -794,7 +794,8 @@ Location:
line-height: 18px; line-height: 18px;
text-transform: uppercase; text-transform: uppercase;
border-radius: 6px; border-radius: 6px;
background: rgb(55 46 46 / 10%);; background: rgb(55 46 46 / 10%);
;
padding: 9px 10px; padding: 9px 10px;
display: inline-block; display: inline-block;
} }
@ -808,6 +809,7 @@ Location:
line-height: 52px; line-height: 52px;
letter-spacing: -0.88px; letter-spacing: -0.88px;
} }
.head4 h2 { .head4 h2 {
color: var(--ztc-text-text-2); color: var(--ztc-text-text-2);
font-family: var(--grotesk); font-family: var(--grotesk);
@ -2058,7 +2060,7 @@ Location:
} }
.pricing-plan-section-area-data .pricing-boxarea .ticket-box p { .pricing-plan-section-area-data .pricing-boxarea .ticket-box p {
color: var(--ztc-text-text-1); color: var(--ztc-text-text-1);
font-family: var(--figtree); font-family: var(--figtree);
font-size: var(--ztc-font-size-font-s18); font-size: var(--ztc-font-size-font-s18);
font-style: normal; font-style: normal;
@ -4400,10 +4402,11 @@ color: var(--ztc-text-text-1);
z-index: 1; z-index: 1;
padding: 270px 0 270px; padding: 270px 0 270px;
} }
@media(max-width:1440px) { @media(max-width:1440px) {
.hero9-slider-area { .hero9-slider-area {
padding: 200px 0 200px; padding: 200px 0 200px;
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -6699,6 +6702,8 @@ color: var(--ztc-text-text-1);
} }
.blog-details-section .blog-auhtor-details h3 { .blog-details-section .blog-auhtor-details h3 {
display: flex;
justify-content: center;
color: var(--ztc-text-text-2); color: var(--ztc-text-text-2);
font-family: var(--grotesk); font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s24); font-size: var(--ztc-font-size-font-s24);
@ -6743,7 +6748,7 @@ color: var(--ztc-text-text-1);
.blog-details-section .blog-auhtor-details .blog-categories { .blog-details-section .blog-auhtor-details .blog-categories {
border-radius: 8px; border-radius: 8px;
background: #F1F1F1; background: #F1F1F1;
padding: 28px 24px; padding: 28px 10px;
} }
.blog-details-section .blog-auhtor-details .blog-categories ul li a { .blog-details-section .blog-auhtor-details .blog-categories ul li a {
@ -6762,6 +6767,7 @@ color: var(--ztc-text-text-1);
margin-top: 16px; margin-top: 16px;
transition: all 0.4s; transition: all 0.4s;
} }
.blog-details-section .blog-auhtor-details .blog-categories ul li a:hover { .blog-details-section .blog-auhtor-details .blog-categories ul li a:hover {
background: var(--ztc-bg-bg-3); background: var(--ztc-bg-bg-3);
transition: all 0.4s; transition: all 0.4s;
@ -6790,8 +6796,9 @@ color: var(--ztc-text-text-1);
padding: 20px; padding: 20px;
margin-top: 16px; margin-top: 16px;
transition: all 0.4s; transition: all 0.4s;
width:100%; width: 100%;
} }
.blog-details-section .blog-auhtor-details .blog-categories ul li .category-btn.active { .blog-details-section .blog-auhtor-details .blog-categories ul li .category-btn.active {
background: var(--ztc-bg-bg-15); background: var(--ztc-bg-bg-15);
color: var(--ztc-text-text-1, #222); color: var(--ztc-text-text-1, #222);
@ -6991,7 +6998,8 @@ color: var(--ztc-text-text-1);
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 100px 0px 32px; padding: 100px 0px 32px;
overflow: hidden; /* ensure pseudo-element doesn’t overflow */ overflow: hidden;
/* ensure pseudo-element doesn’t overflow */
} }
.footer1-sertion-area::before { .footer1-sertion-area::before {
@ -7104,7 +7112,7 @@ color: var(--ztc-text-text-1);
} }
.footer1-sertion-area .link-content2 h3 { .footer1-sertion-area .link-content2 h3 {
color:#fff; color: #fff;
font-family: var(--grotesk); font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s24); font-size: var(--ztc-font-size-font-s24);
font-style: normal; font-style: normal;
@ -10075,13 +10083,13 @@ html {
font-size: var(--ztc-font-size-font-s12) !important; font-size: var(--ztc-font-size-font-s12) !important;
} }
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a { .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a {
transition: all 0.4s; transition: all 0.4s;
color: var(--ztc-text-text-15) !important; color: var(--ztc-text-text-15) !important;
font-weight: var(--ztc-weight-medium); font-weight: var(--ztc-weight-medium);
} }
.homepage1-body .header-area.homepage1.sticky .header-elements .main-menu > ul > li:hover > a { .homepage1-body .header-area.homepage1.sticky .header-elements .main-menu>ul>li:hover>a {
color: #fff !important; color: #fff !important;
} }
@ -12442,7 +12450,7 @@ html {
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
transition: all 0.4s; transition: all 0.4s;
} }
@ -12675,7 +12683,7 @@ html {
.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li .tp-submenu { .homepage7-body .header-area.homepage7 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -12696,7 +12704,7 @@ html {
.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li ul.dropdown-padding { .homepage7-body .header-area.homepage7 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -12827,7 +12835,7 @@ html {
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
background: var(--ztc-text-text-2); background: var(--ztc-text-text-2);
transition: all 0.4s; transition: all 0.4s;
border-bottom: 1px solid var(--ztc-text-text-2); border-bottom: 1px solid var(--ztc-text-text-2);
@ -13135,7 +13143,7 @@ html {
.homepage8-body .header-area.homepage8 .header-elements .main-menu ul li .tp-submenu { .homepage8-body .header-area.homepage8 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -13155,7 +13163,7 @@ html {
.homepage8-body .header-area.homepage8 .header-elements .main-menu ul li ul.dropdown-padding { .homepage8-body .header-area.homepage8 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -13266,7 +13274,7 @@ html {
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
background: var(--ztc-text-text-2); background: var(--ztc-text-text-2);
transition: all 0.4s; transition: all 0.4s;
} }
@ -13534,7 +13542,7 @@ html {
.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li .tp-submenu { .homepage9-body .header-area.homepage9 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -13554,7 +13562,7 @@ html {
.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li ul.dropdown-padding { .homepage9-body .header-area.homepage9 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -13689,7 +13697,7 @@ html {
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
background: var(--ztc-text-text-2); background: var(--ztc-text-text-2);
transition: all 0.4s; transition: all 0.4s;
} }
@ -13935,7 +13943,7 @@ html {
.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li .tp-submenu { .homepage10-body .header-area.homepage10 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -13955,7 +13963,7 @@ html {
.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li ul.dropdown-padding { .homepage10-body .header-area.homepage10 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
@ -14090,7 +14098,7 @@ html {
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */ /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: var(--ztc-bg-bg-2); background: var(--ztc-bg-bg-2);
transition: all 0.4s; transition: all 0.4s;
@ -20148,15 +20156,18 @@ html {
.cta1-section-area .cta1-main-boxarea ul li a { .cta1-section-area .cta1-main-boxarea ul li a {
line-height: 32px; line-height: 32px;
} }
.about6-header ul li a{
.about6-header ul li a {
line-height: 32px; line-height: 32px;
}
} }
}
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.cta1-section-area .cta1-main-boxarea ul li a { .cta1-section-area .cta1-main-boxarea ul li a {
line-height: 32px; line-height: 32px;
} }
.about6-header ul li a{
.about6-header ul li a {
line-height: 32px; line-height: 32px;
} }
} }
@ -20164,9 +20175,10 @@ html {
.cta1-section-area .cta1-main-boxarea ul li a img { .cta1-section-area .cta1-main-boxarea ul li a img {
margin: -6px 6px 0 0; margin: -6px 6px 0 0;
} }
.about6-header ul li a img{
.about6-header ul li a img {
margin: -6px 6px 0 0; margin: -6px 6px 0 0;
} }
.cta2-section-area { .cta2-section-area {
position: relative; position: relative;
@ -22630,11 +22642,11 @@ html {
z-index: 1; z-index: 1;
} }
.about6-bg{ .about6-bg {
background:#f4b6b9; background: #f4b6b9;
} }
.heading-center{ .heading-center {
padding-bottom: 20px; padding-bottom: 20px;
text-align: center; text-align: center;
} }
@ -25226,7 +25238,7 @@ html {
.schedule-section-area td { .schedule-section-area td {
border: 1px solid rgba(26, 23, 25, 0.1); border: 1px solid rgba(26, 23, 25, 0.1);
background: #FFF; background: #FFF;
padding: 38px; padding: 38px 30px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
@ -25241,7 +25253,7 @@ html {
font-weight: var(--ztc-weight-bold); font-weight: var(--ztc-weight-bold);
line-height: 24px; line-height: 24px;
letter-spacing: -0.48px; letter-spacing: -0.48px;
padding: 18px 0; padding: 30px 0;
} }
.schedule-section-area td { .schedule-section-area td {
@ -25876,7 +25888,7 @@ html {
.event6-section-area .event6-widget-boxarea .content-area .btn-area1 a:hover img { .event6-section-area .event6-widget-boxarea .content-area .btn-area1 a:hover img {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
color:#ed1b24; color: #ed1b24;
} }
.event6-section-area .event6-widget-boxarea2 { .event6-section-area .event6-widget-boxarea2 {
@ -28143,13 +28155,13 @@ html {
font-size: 16px !important; font-size: 16px !important;
} }
.source-label{ .source-label {
color: #0d6efd; color: #0d6efd;
} }
.gallery-btn{ .gallery-btn {
font-size: 18px; font-size: 18px;
font-weight:600; font-weight: 600;
padding: 10px 15px; padding: 10px 15px;
} }

2
public/assets/css/vendor/bootstrap.min.css vendored
View File

@ -2116,7 +2116,7 @@ progress {
} }
.table-striped>tbody>tr:nth-of-type(odd)>* { .table-striped>tbody>tr:nth-of-type(odd)>* {
--bs-table-accent-bg: var(--bs-table-striped-bg); /* --bs-table-accent-bg: var(--bs-table-striped-bg); */
color: var(--bs-table-striped-color) color: var(--bs-table-striped-color)
} }