2026-03-09 19:08:36 +05:30

151 lines
8.0 KiB
TypeScript

'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>
</>
);
}