global relief fund updated

app/community/global-relief-fund/page.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+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);
+
+    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>TCA Global Relief Fund</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" /> <span>Community</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </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">
+                                        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='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>
+                                </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>
+
+                <Lightbox
+                    open={open}
+                    close={() => setOpen(false)}
+                    slides={galleryImages}
+                    index={index}
+                />
+            </Layout>
+        </>
+    );
+}