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

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

@ -3,15 +3,12 @@
import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12);
const [open, setOpen] = useState(false);
@ -20,10 +17,15 @@ export default function CricketClub() {
return (
<>
<Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div
className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
>
<div className="container">
<div className="row">
@ -31,15 +33,18 @@ export default function CricketClub() {
<div className="heading1 text-center">
<h1>Badminton Club</h1>
<div className="space20" />
<Link href="/">
Home <i className="fa-solid fa-angle-right" /> <span>Badminton Club</span>
<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>
<div className="bloginner-section-area sp1">
{/* Description Section */}
<div className="bloginner-section-area sp1 py-5">
<div className="container">
<div className="row">
<div className="col-lg-12 m-auto">
@ -48,63 +53,64 @@ export default function CricketClub() {
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>
2022/23 Badminton Membership Fee:
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>
Single $106.00
</p>
<p>
Family $157.00
</p>
<div className="space24" />
<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.
<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-5">
<div className="col-lg-12">
<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 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="memory-boxarea pl-3"
style={{ cursor: "pointer" }}
onClick={() => {
setIndex(i);
setOpen(true);
}}
className="image"
data-aos="zoom-in"
data-aos-duration={1000}
style={{ borderRadius: 8 }}
>
<div className="image" data-aos="zoom-in" data-aos-duration={1000}>
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
</div>
<img
src={img.src}
alt={img.alt}
className="img-fluid w-100"
style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
/>
</div>
</div>
))}
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p>
</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>
</div>
{/* Lightbox Viewer */}
<Lightbox
open={open}
close={() => setOpen(false)}

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

@ -3,97 +3,108 @@
import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';
export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);
return (
<>
<Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div
className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
>
<div className="container">
<div className="row">
<div className="col-lg-6 m-auto">
<div className="heading1 text-center">
<h1>Cricket Club</h1>
<div className="space20" />
<Link href="/">
Home <i className="fa-solid fa-angle-right" /> <span>Community</span>
</Link>
</div>
</div>
</div>
</div>
const galleryImages = communitySubmenuData.filter(img => +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/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
>
<div className="container">
<div className="row">
<div className="col-lg-6 m-auto">
<div className="heading1 text-center">
<h1 className="mb-3">Cricket Club</h1>
<Link href="/" className="text-decoration-none">
Home <i className="fa-solid fa-angle-right mx-2" />
<span>Community</span>
</Link>
</div>
<div className="bloginner-section-area sp1">
<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">
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.
</div>
</div>
</div>
</div>
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 className="row gx-5">
<div className="col-lg-12">
<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
className="memory-boxarea pl-3"
style={{ cursor: "pointer" }}
onClick={() => {
setIndex(i);
setOpen(true);
}}
>
<div className="image" data-aos="zoom-in" data-aos-duration={1000}>
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
</div>
</div>
</div>
))}
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p>
</div>
)}
</div>
</div>
</div>
</div>
<div className="bloginner-section-area sp1 py-5">
<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>
<Lightbox
open={open}
close={() => setOpen(false)}
slides={galleryImages}
index={index}
/>
</Layout>
</>
);
<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>
</>
);
}

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

@ -3,13 +3,10 @@
import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
export default function GlobalReliefFund() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
@ -20,81 +17,130 @@ export default function GlobalReliefFund() {
return (
<>
<Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div
className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
>
<div className="container">
<div className="row">
<div className="col-lg-6 m-auto">
<div className="heading1 text-center">
<div className="heading1 text-center text-white">
<h1>TCA Global Relief Fund</h1>
<div className="space20" />
<Link href="/">
Home <i className="fa-solid fa-angle-right" /> <span>Community</span>
<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 sp1">
<div className="bloginner-section-area sp1 py-5 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="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>
<h2 className="text-anime-style-3">TCA Global Relief Fund</h2>
<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>2. Indian Rupees of 25,000 donated to burnt victim in Trichy, South India.</p>
<p>3. Project Hope fundraising in 2008 for Ramakrishna Mission school library, Batticaloa, Sri Lanka. Raised $2032.00</p>
<p>4. Donated funds and food items to St. John’s Soup Kitchen, Kitchener</p>
<p>5. Gifted educational materials to school children in Jaffna and Killinochchi, Sri Lanka in 2021. Facilitated by YMCA Jaffna.</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>
<p>7. Toronto Tamil Chair campaign to establish a Tamil chair at University of Toronto. Raised funds amounting to $2400 in 2021</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="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-5">
<div className="col-lg-12">
<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 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="memory-boxarea pl-3"
style={{ cursor: "pointer" }}
onClick={() => {
setIndex(i);
setOpen(true);
}}
className="image"
data-aos="zoom-in"
data-aos-duration={1000}
style={{ borderRadius: 8 }}
>
<div className="image" data-aos="zoom-in" data-aos-duration={1000}>
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
</div>
<img
src={img.src}
alt={img.alt}
className="img-fluid w-100"
style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
/>
</div>
</div>
))}
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p>
</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>
</div>
<Lightbox
open={open}
close={() => setOpen(false)}

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

@ -3,15 +3,12 @@
import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
export default function CricketClub() {
// Show only images with id 1 to 4
const galleryImages = communitySubmenuData.filter(img => +img.id >= 13 && +img.id <= 20);
const [open, setOpen] = useState(false);
@ -20,10 +17,14 @@ export default function CricketClub() {
return (
<>
<Layout headerStyle={1} footerStyle={1}>
{/* Header Section */}
<div
className="inner-page-header"
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
style={{
backgroundImage: 'url(/assets/img/bg/header-bg11.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '100px 0',
}}
>
<div className="container">
<div className="row">
@ -31,15 +32,17 @@ export default function CricketClub() {
<div className="heading1 text-center">
<h1>Tamil School</h1>
<div className="space20" />
<Link href="/">
Home <i className="fa-solid fa-angle-right" /> <span>Tamil School</span>
<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 sp1">
<div className="bloginner-section-area sp1 py-5">
<div className="container">
<div className="row">
<div className="col-lg-12 m-auto">
@ -49,61 +52,62 @@ export default function CricketClub() {
</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, 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" />
<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>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" />
<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" />
<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>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>
<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-5">
<div className="col-lg-12">
<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 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="memory-boxarea pl-3"
style={{ cursor: "pointer" }}
onClick={() => {
setIndex(i);
setOpen(true);
}}
className="image mb-2"
data-aos="zoom-in"
data-aos-duration={1000}
style={{ borderRadius: 8 }}
>
<div className="image mb-4" data-aos="zoom-in" data-aos-duration={1000}>
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
</div>
<img
src={img.src}
alt={img.alt}
className="img-fluid w-100"
style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
/>
</div>
</div>
))}
{galleryImages.length === 0 && (
<div className="col-12 text-center mt-5">
<p className="text-muted">No images found for this event.</p>
</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>
</div>

173
components/businessdirectory/Section1.jsx
View File

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

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

@ -794,7 +794,8 @@ Location:
line-height: 18px;
text-transform: uppercase;
border-radius: 6px;
background: rgb(55 46 46 / 10%);;
background: rgb(55 46 46 / 10%);
;
padding: 9px 10px;
display: inline-block;
}
@ -808,6 +809,7 @@ Location:
line-height: 52px;
letter-spacing: -0.88px;
}
.head4 h2 {
color: var(--ztc-text-text-2);
font-family: var(--grotesk);
@ -2049,22 +2051,22 @@ Location:
.pricing-plan-section-area-data .pricing-boxarea {
border-radius: 8px;
background: var(--ztc-text-text-15);
position: relative;
z-index: 1;
text-align: center;
padding: 28px;
margin-bottom: 30px;
background: var(--ztc-text-text-15);
position: relative;
z-index: 1;
text-align: center;
padding: 28px;
margin-bottom: 30px;
}
.pricing-plan-section-area-data .pricing-boxarea .ticket-box p {
color: var(--ztc-text-text-1);
font-family: var(--figtree);
font-size: var(--ztc-font-size-font-s18);
font-style: normal;
font-weight: var(--ztc-weight-semibold);
line-height: 18px;
text-transform: uppercase;
color: var(--ztc-text-text-1);
font-family: var(--figtree);
font-size: var(--ztc-font-size-font-s18);
font-style: normal;
font-weight: var(--ztc-weight-semibold);
line-height: 18px;
text-transform: uppercase;
}
.pricing-plan-section-area-data .pricing-boxarea .ticket-box h3 {
@ -2086,10 +2088,10 @@ color: var(--ztc-text-text-1);
}
.pricing-plan-section-area-data .pricing-boxarea .ticket-box .progress-inner {
background-color: var(--ztc-text-text-5);
height: 100%;
border-radius: 20px;
transition: width 0.4s ease;
background-color: var(--ztc-text-text-5);
height: 100%;
border-radius: 20px;
transition: width 0.4s ease;
}
.pricing-plan-section-area-data .pricing-boxarea.box2 {
@ -4400,10 +4402,11 @@ color: var(--ztc-text-text-1);
z-index: 1;
padding: 270px 0 270px;
}
@media(max-width:1440px) {
.hero9-slider-area {
padding: 200px 0 200px;
}
padding: 200px 0 200px;
}
}
@media (max-width: 767px) {
@ -6699,6 +6702,8 @@ color: var(--ztc-text-text-1);
}
.blog-details-section .blog-auhtor-details h3 {
display: flex;
justify-content: center;
color: var(--ztc-text-text-2);
font-family: var(--grotesk);
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 {
border-radius: 8px;
background: #F1F1F1;
padding: 28px 24px;
padding: 28px 10px;
}
.blog-details-section .blog-auhtor-details .blog-categories ul li a {
@ -6762,6 +6767,7 @@ color: var(--ztc-text-text-1);
margin-top: 16px;
transition: all 0.4s;
}
.blog-details-section .blog-auhtor-details .blog-categories ul li a:hover {
background: var(--ztc-bg-bg-3);
transition: all 0.4s;
@ -6790,11 +6796,12 @@ color: var(--ztc-text-text-1);
padding: 20px;
margin-top: 16px;
transition: all 0.4s;
width:100%;
width: 100%;
}
.blog-details-section .blog-auhtor-details .blog-categories ul li .category-btn.active {
background: var(--ztc-bg-bg-15);
color: var(--ztc-text-text-1, #222);
background: var(--ztc-bg-bg-15);
color: var(--ztc-text-text-1, #222);
}
@ -6988,21 +6995,22 @@ color: var(--ztc-text-text-1);
/*============= BLOG CSS AREA ENDS ===============*/
/*============= FOOTER CSS AREA ===============*/
.footer1-sertion-area {
position: relative;
z-index: 1;
padding: 100px 0px 32px;
overflow: hidden; /* ensure pseudo-element doesn’t overflow */
position: relative;
z-index: 1;
padding: 100px 0px 32px;
overflow: hidden;
/* ensure pseudo-element doesn’t overflow */
}
.footer1-sertion-area::before {
content: "";
position: absolute;
inset: 0;
background-image: url(/_next/static/media/bg-tamil.8e6ece32.webp);
background-size: cover;
background-position: center;
transform: rotate(180deg);
z-index: -1;
content: "";
position: absolute;
inset: 0;
background-image: url(/_next/static/media/bg-tamil.8e6ece32.webp);
background-size: cover;
background-position: center;
transform: rotate(180deg);
z-index: -1;
}
@ -7104,7 +7112,7 @@ color: var(--ztc-text-text-1);
}
.footer1-sertion-area .link-content2 h3 {
color:#fff;
color: #fff;
font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s24);
font-style: normal;
@ -9712,49 +9720,49 @@ html {
}
.dropdown {
position: relative;
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
z-index: 1000;
min-width: 200px;
border-radius: 5px;
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
z-index: 1000;
min-width: 200px;
border-radius: 5px;
}
.dropdown:hover .dropdown-menu {
display: block;
display: block;
}
/* Submenu inside dropdown */
.dropdown-submenu {
position: relative;
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 0;
left: 100%;
background: white;
list-style: none;
padding: 10px;
margin: 0;
border: 1px solid #ddd;
min-width: 270px;
border-radius: 7px;
display: none;
position: absolute;
top: 0;
left: 100%;
background: white;
list-style: none;
padding: 10px;
margin: 0;
border: 1px solid #ddd;
min-width: 270px;
border-radius: 7px;
}
.dropdown-submenu:hover .submenu {
display: block;
display: block;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu {
@ -10075,14 +10083,14 @@ html {
font-size: var(--ztc-font-size-font-s12) !important;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a {
transition: all 0.4s;
color: var(--ztc-text-text-15) !important;
font-weight: var(--ztc-weight-medium);
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a {
transition: all 0.4s;
color: var(--ztc-text-text-15) !important;
font-weight: var(--ztc-weight-medium);
}
.homepage1-body .header-area.homepage1.sticky .header-elements .main-menu > ul > li:hover > a {
color: #fff !important;
.homepage1-body .header-area.homepage1.sticky .header-elements .main-menu>ul>li:hover>a {
color: #fff !important;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu {
@ -12442,7 +12450,7 @@ html {
animation-duration: 1s;
-webkit-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);
transition: all 0.4s;
}
@ -12675,7 +12683,7 @@ html {
.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -12696,7 +12704,7 @@ html {
.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -12827,7 +12835,7 @@ html {
animation-duration: 1s;
-webkit-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);
transition: all 0.4s;
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 {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -13155,7 +13163,7 @@ html {
.homepage8-body .header-area.homepage8 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -13266,7 +13274,7 @@ html {
animation-duration: 1s;
-webkit-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);
transition: all 0.4s;
}
@ -13534,7 +13542,7 @@ html {
.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -13554,7 +13562,7 @@ html {
.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -13689,7 +13697,7 @@ html {
animation-duration: 1s;
-webkit-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);
transition: all 0.4s;
}
@ -13935,7 +13943,7 @@ html {
.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li .tp-submenu {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -13955,7 +13963,7 @@ html {
.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li ul.dropdown-padding {
visibility: hidden;
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;
background: var(--ztc-text-text-1);
top: 201.3%;
@ -14090,7 +14098,7 @@ html {
animation-duration: 1s;
-webkit-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);
background: var(--ztc-bg-bg-2);
transition: all 0.4s;
@ -15027,12 +15035,12 @@ html {
/*============= CHOOSE CSS AREA ENDS ===============*/
/*============= TIMER CSS AREA STARTS ===============*/
.others-timer-area {
position: relative;
z-index: 1;
background-image: url(../img/home/bg-tamil.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
background-image: url(../img/home/bg-tamil.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@ -20148,15 +20156,18 @@ html {
.cta1-section-area .cta1-main-boxarea ul li a {
line-height: 32px;
}
.about6-header ul li a{
.about6-header ul li a {
line-height: 32px;
}
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cta1-section-area .cta1-main-boxarea ul li a {
line-height: 32px;
}
.about6-header ul li a{
.about6-header ul li a {
line-height: 32px;
}
}
@ -20164,9 +20175,10 @@ html {
.cta1-section-area .cta1-main-boxarea ul li a img {
margin: -6px 6px 0 0;
}
.about6-header ul li a img{
.about6-header ul li a img {
margin: -6px 6px 0 0;
}
}
.cta2-section-area {
position: relative;
@ -22630,11 +22642,11 @@ html {
z-index: 1;
}
.about6-bg{
background:#f4b6b9;
.about6-bg {
background: #f4b6b9;
}
.heading-center{
.heading-center {
padding-bottom: 20px;
text-align: center;
}
@ -22666,9 +22678,9 @@ html {
}
@media (max-width: 768px) {
.right-img {
display: none;
}
.right-img {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
@ -25226,7 +25238,7 @@ html {
.schedule-section-area td {
border: 1px solid rgba(26, 23, 25, 0.1);
background: #FFF;
padding: 38px;
padding: 38px 30px;
text-align: center;
vertical-align: middle;
}
@ -25241,7 +25253,7 @@ html {
font-weight: var(--ztc-weight-bold);
line-height: 24px;
letter-spacing: -0.48px;
padding: 18px 0;
padding: 30px 0;
}
.schedule-section-area td {
@ -25876,7 +25888,7 @@ html {
.event6-section-area .event6-widget-boxarea .content-area .btn-area1 a:hover img {
filter: brightness(0) invert(1);
color:#ed1b24;
color: #ed1b24;
}
.event6-section-area .event6-widget-boxarea2 {
@ -27158,10 +27170,10 @@ html {
}
@media (max-width: 768px) {
.event-img {
padding-left: 0 !important;
padding-right: 0 !important;
}
.event-img {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 767px) {
@ -28088,68 +28100,68 @@ html {
}
.dot-list {
list-style-type: disc;
list-style-position: outside;
padding-left: 25px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
list-style-type: disc;
list-style-position: outside;
padding-left: 25px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dot-list li {
list-style-type: disc !important;
display: list-item !important;
color: var(--ztc-text-text-3);
font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s18);
font-style: normal;
font-weight: var(--ztc-weight-medium);
line-height: 26px;
list-style-type: disc !important;
display: list-item !important;
color: var(--ztc-text-text-3);
font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s18);
font-style: normal;
font-weight: var(--ztc-weight-medium);
line-height: 26px;
}
.social-icons {
display: flex;
gap: 14px;
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: 14px;
padding: 0;
margin: 0;
list-style: none;
}
.social-icons li {
width: 40px;
height: 40px;
background-color: #E8E8E8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #E8E8E8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons li i {
font-size: 16px;
line-height: 1;
display: inline-block;
vertical-align: middle;
font-size: 16px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.social-icons li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
height: 100%;
line-height: 1 !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
height: 100%;
line-height: 1 !important;
font-size: 16px !important;
}
.source-label{
color: #0d6efd;
.source-label {
color: #0d6efd;
}
.gallery-btn{
.gallery-btn {
font-size: 18px;
font-weight:600;
font-weight: 600;
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)>* {
--bs-table-accent-bg: var(--bs-table-striped-bg);
/* --bs-table-accent-bg: var(--bs-table-striped-bg); */
color: var(--bs-table-striped-color)
}