Tamil language and Tamil weding images updated

This commit is contained in:
akash 2025-08-22 19:30:36 +05:30
commit 220d29c374
20 changed files with 295 additions and 679 deletions

View File

@ -3,124 +3,128 @@ import Link from 'next/link'
import moment from "moment"; import moment from "moment";
import { useState } from "react" import { useState } from "react"
export default function UpcomingEventData() { export default function UpcomingEventData() {
const [isTab, setIsTab] = useState(1)
const handleTab = (i) => {
setIsTab(i)
}
const [currentMonth, setCurrentMonth] = useState(moment()); const [currentMonth, setCurrentMonth] = useState(moment());
// Events normalized with YYYY-MM-DD format
const events = [ const events = [
{ {
id: 1, id: 1,
date: "Sun Jan-14", date: "2024-01-14",
time: "05:30 PM", time: "05:30 PM",
title: "Thai Pongal 2024", title: "Thai Pongal 2024",
location: "Holy Family Croatian Roman Catholic Parish Hall, Kitchener, Canada",
image: "/assets/img/event/upcoming-event/thai-pongal.webp",
url: "#", url: "#",
}, },
{ {
id: 2,
id: 2, date: "2024-04-14",
date: "Apr 14, 2024", title: "AGM",
title: "AGM", location: "Christ Lutheran Church, Waterloo, ON",
url: "#", image: "/assets/img/event/upcoming-event/agm.webp",
}, url: "#",
},
{
id: 3,
date: "Jun 22-23, 2024",
title: "KW Multicultural Festival",
url: "#",
},
{
id: 4,
date: "Sun Jul 7, 2024",
time: "10:00 AM",
title: "TCA Picnic Potlock",
url: "#",
},
{
id: 5,
date: "Jul 27-28, 2024",
title: "South Asian Family Sports Day",
url: "#",
},
{
id: 6,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{
id: 7,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{ {
id: 8, id: 3,
date: "Sat Oct 26, 2024", date: "2024-06-22",
time: "1.00 PM-4.30 PM", title: "KW Multicultural Festival",
title: "TCA WPL Deepavali Celebrations", location: "Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON",
url: "#", image: "/assets/img/event/upcoming-event/kw.webp",
}, url: "#",
},
{ {
id: 9, id: 4,
date: "Sat Dec 21, 2024", date: "2024-07-07",
time: "05:00 PM-09:00 PM", time: "10:00 AM",
title: "RIM Park", title: "TCA Picnic Potlock",
url: "#", location: "Pinehurst Lake Sutor Shelter, Ayr, ON",
}, image: "/assets/img/event/upcoming-event/picnic.webp",
url: "#",
},
{
id: 5,
date: "2024-07-27",
title: "South Asian Family Sports Day",
location: "Waterloo Park, Waterloo, ON",
image: "/assets/img/event/upcoming-event/sports.webp",
url: "#",
},
{
id: 6,
date: "2023-08-23",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
location: "Conestoga College WC 241, Doon Campus, Ontario",
image: "/assets/img/event/upcoming-event/workshop.webp",
url: "#",
},
{
id: 7,
date: "2023-08-23",
time: "06:30-08:30 PM",
title: "Tamil Cultural Nite",
location: "Doon Campus, Ontario (TBA)",
image: "/assets/img/event/upcoming-event/cultural.webp",
url: "#",
},
{
id: 8,
date: "2024-10-26",
time: "1.00 PM-4.30 PM",
title: "TCA WPL Deepavali Celebrations",
location: "Waterloo Public Library, John M. Harper Branch",
image: "/assets/img/event/upcoming-event/deepavali.webp",
url: "#",
},
{
id: 9,
date: "2024-12-21",
time: "05:00 PM-09:00 PM",
title: "Christmas & 2024 Year End Celebration",
location: "RIM Park, 2001 University Ave E, Waterloo, ON",
image: "/assets/img/event/upcoming-event/christmas.webp",
url: "#",
},
];
// Get start and end of current month
];
// Get the start and end of the current month
const startOfMonth = currentMonth.clone().startOf("month"); const startOfMonth = currentMonth.clone().startOf("month");
const endOfMonth = currentMonth.clone().endOf("month"); const endOfMonth = currentMonth.clone().endOf("month");
// Generate the calendar days // Generate calendar days
const daysInMonth = []; const daysInMonth = [];
for (let i = 0; i < startOfMonth.day(); i++) { for (let i = 0; i < startOfMonth.day(); i++) {
daysInMonth.push(null); // Adding null for empty days before the start of the month daysInMonth.push(null);
} }
for (let i = 1; i <= endOfMonth.date(); i++) { for (let i = 1; i <= endOfMonth.date(); i++) {
daysInMonth.push(moment(currentMonth).date(i)); daysInMonth.push(moment(currentMonth).date(i));
} }
// Function to check if a date has an event // Get events for a given date
const getEventForDate = (date) => { const getEventForDate = (date) => {
const dateString = date?.format("YYYY-MM-DD"); const dateString = date?.format("YYYY-MM-DD");
return events.filter(event => event.date === dateString); return events.filter(event => event.date === dateString);
}; };
// Function to navigate to the next/previous month // Navigate months
const handleMonthChange = (direction) => { const handleMonthChange = (direction) => {
setCurrentMonth(currentMonth.clone().add(direction, "months")); setCurrentMonth(currentMonth.clone().add(direction, "months"));
}; };
return ( return (
<> <div className="event3-section-area sp4">
<div className="container">
<div className="event3-section-area sp4"> <div className="row">
<div className="container"> <div className="col-lg-6 m-auto">
<div className="row"> <div className="event2-header heading5 text-center space-margin60">
<div className="col-lg-6 m-auto"> <h2 className="text-anime-style-3">Upcoming Events</h2>
<div className="event2-header heading5 text-center space-margin60">
{/* <h5>Event Schedule</h5> */}
<div className="space18" />
<h2 className="text-anime-style-3">Upcoming Events</h2>
</div>
</div> </div>
</div> </div>
<div className="row"> </div>
<div className="col-12 col-lg-4"> <div className="row">
{/* Calendar (left side) */}
<div className="col-12 col-lg-3">
<div className="d-flex justify-content-between align-items-center"> <div className="d-flex justify-content-between align-items-center">
<button <button
className="vl-btn4" className="vl-btn4"
@ -152,591 +156,165 @@ export default function UpcomingEventData() {
<tbody> <tbody>
{Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => ( {Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
<tr key={rowIndex}> <tr key={rowIndex}>
{daysInMonth.slice(rowIndex * 7, (rowIndex + 1) * 7).map((day, index) => ( {daysInMonth
<td .slice(rowIndex * 7, (rowIndex + 1) * 7)
key={index} .map((day, index) => {
style={{ const eventList = getEventForDate(day);
cursor: day ? "default" : "not-allowed", return (
backgroundColor: getEventForDate(day).length > 0 ? "#eac768" : "white", // Highlight event dates <td
}} key={index}
> style={{
{day ? ( cursor: day ? "default" : "not-allowed",
<div style={{ width: "100%", height: "100%" }}> backgroundColor: eventList.length > 0 ? "#ce2029" : "white",
{/* Align day number to the right */} color: eventList.length > 0 ? "white" : "black",
<span className="text-end d-block">{day.date()}</span> }}
title={
{/* Display event names if present */} eventList.length > 0
{/* {getEventForDate(day).map((event, eventIndex) => ( ? eventList.map(e => e.title).join("\n")
<div : ""
key={eventIndex} }
className="text-sm text-white p-1 text-center mt-1" >
onClick={() => handleEventClick(event.id)} // Add click handler {day ? (
style={{ <div style={{ width: "100%", height: "100%" }}>
backgroundColor: "#007BFF", // Highlight event with a blue color <span className="text-end d-block">{day.date()}</span>
borderRadius: "5px",
cursor: "pointer"
}}
>
{event.title}
</div> </div>
))} */} ) : (
</div> ""
) : ( )}
"" </td>
)} );
</td> })}
))}
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="col-lg-8" data-aos="fade-up" data-aos-duration={1000}>
<div className="tab-content" id="pills-tabContent">
<div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
<div className="event-widget-area"> <div className="col-lg-9" data-aos="fade-up" data-aos-duration={1000}>
<div className="row"> <div className="tab-content" id="pills-tabContent">
<div className={"tab-pane fade show active tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
<div className="col-lg-1" /> <div className="event-widget-area">
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">01</h1>
<div className="row align-items-center">
<div className="col-lg-5"> {events.map((event, idx) => {
<div className="img1"> const isEven = (idx + 1) % 2 === 0; // check even/odd index
<img src="/assets/img/event/upcoming-event/thai-pongal.webp" alt="" />
</div> return (
</div> <div key={event.id} className="mb-5">
<div className="col-lg-1" /> <div className="row align-items-center">
<div className="col-lg-6"> <div className="col-lg-1" />
<div className="content-area"> <div className="col-lg-10 m-auto">
<ul> <div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
<li> <h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:30 PM - Sun Jan-14<span> | </span></Link>
</li> {/* First Event (Odd): Image Left | Even Event: Image Right */}
<li> {!isEven ? (
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada</Link> <>
</li> {/* IMAGE LEFT */}
</ul> <div className="col-lg-5">
<div className="space20" />
<Link href="#" className="head">Thai Pongal 2024</Link>
<div className="space24" />
<p>Holy Family Croatian Roman Catholic Parish Hall</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1"> <div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" /> <img src={event.image} alt={event.title} />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div> </div>
</div> </div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1"> <div className="col-lg-1" />
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div> {/* CONTENT RIGHT */}
<div className="text"> <div className="col-lg-6">
<Link href="/speakers">Alexys Archer</Link> <div className="content-area">
<div className="space8" /> <ul>
<p>WP Developer</p> <li>
<span>
<img src="/assets/img/icons/clock1.svg" alt="" />{" "}
{event.time ? `${event.time} - ` : ""}
{moment(event.date).format("ddd, MMM DD, YYYY")}
</span>
</li>
<li>
<span>
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
{event.location}
</span>
</li>
</ul>
<div className="space20" />
<Link href={event.url || "#"} className="head">
{event.title}
</Link>
<div className="space24" />
<p>{event.location}</p>
<div className="space24" />
<div className="btn-area1">
<Link href={event.url || "#"} className="vl-btn3">
<span className="demo">Online Tickets</span>
</Link>
</div>
</div> </div>
</div> </div>
</div> */} </>
<div className="space24" /> ) : (
<div className="btn-area1"> <>
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link> {/* CONTENT LEFT */}
</div> <div className="col-lg-6">
</div> <div className="content-area">
<ul>
<li>
<span>
<img src="/assets/img/icons/clock1.svg" alt="" />{" "}
{event.time ? `${event.time} - ` : ""}
{moment(event.date).format("ddd, MMM DD, YYYY")}
</span>
</li>
<li>
<span>
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
{event.location}
</span>
</li>
</ul>
<div className="space20" />
<Link href={event.url || "#"} className="head">
{event.title}
</Link>
<div className="space24" />
<p>{event.location}</p>
<div className="space24" />
<div className="btn-area1">
<Link href={event.url || "#"} className="vl-btn3">
<span className="demo">Online Tickets</span>
</Link>
</div>
</div>
</div>
<div className="col-lg-1" />
{/* IMAGE RIGHT */}
<div className="col-lg-5">
<div className="img1">
<img src={event.image} alt={event.title} />
</div>
</div>
</>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> );
<div className="space48" /> })}
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">02</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Apr 14, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Christ Lutheran Church , Waterloo, ON</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head"> AGM</Link>
<div className="space24" />
<p>Christ Lutheran Church , Waterloo, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/agm.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">03</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/kw.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jun 22-23, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">KW Multicultural Festival</Link>
<div className="space24" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">04</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />10:00 AM - Sun Jul 7, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Pinehurst Lake Conservation Ayr, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">TCA Picnic Potlock</Link>
<div className="space24" />
<p>Pinehurst Lake Sutor Shelter, Ayr, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/picnic.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">05</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/sports.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jul 27-28, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Park, Waterloo, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">South Asian Family Sports Day</Link>
<div className="space24" />
<p>MEMBERS ONLY</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">06</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30-08:30 PM - Aug 23, 2023<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Ontario</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Conestoga College Workshop</Link>
<div className="space24" />
<p>Conestoga College WC 241</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/workshop.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">07</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/cultural.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30 AM-08:30 PM - Aug 23, 2023<span> | </span></Link>
</li>
<li className="break-on-xl">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Ontario</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Tamil Cultural Nite</Link>
<div className="space24" />
<p>TBA</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">08</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />1.00 PM-4.30 PM - Sat Oct 26, 2024<span> | </span></Link>
</li>
<li className="break-on-xl">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Public Library</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">TCA WPL Deepavali Celebrations</Link>
<div className="space24" />
<p>John M. Harper Branch 500 Fischer-Hallman Rd N, Waterloo, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/deepavali.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">09</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/christmas.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:00 PM-09:00 PM - Sat Dec 21, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />RIM Park</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Christmas & 2024 Year End Celebration</Link>
<div className="space24" />
<p>2001 University Ave E, Waterloo, ON N2K 4K4</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</>
) )
} }

View File

@ -32,9 +32,9 @@ export default function AboutSection() {
</div> </div>
</div> */} </div> */}
<div className="img2"> <div className="img2">
<img src="/assets/img/home/about/about.webp" alt="" /> <img src="/assets/img/home/about/about.webp" alt="" style={{ width: "100%" }} />
</div> </div>
{/* <div className="about3-images"> {/* <div className="about3-images">
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}> <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
<img src="/assets/img/home/about/big-circle.webp" alt="" /> <img src="/assets/img/home/about/big-circle.webp" alt="" />
@ -52,12 +52,25 @@ export default function AboutSection() {
{/* <div className="space18" /> */} {/* <div className="space18" /> */}
<h2 className="text-anime-style-3">Welcome to TCA website</h2> <h2 className="text-anime-style-3">Welcome to TCA website</h2>
<div className="space18" /> <div className="space18" />
<p data-aos="fade-left" data-aos-duration={900}>Learn Tamil Arts, Culture and Heritage and events in and around Waterloo Guelph Region in the province of Ontario, Canada.</p> <p data-aos="fade-left" data-aos-duration={900}>
Learn Tamil Arts, Culture and Heritage and events in and around Waterloo Guelph Region in the province of Ontario, Canada.
</p>
<div className="space8" /> <div className="space8" />
<p data-aos="fade-left" data-aos-duration={900}>The website has a wealth of information that would interest you.</p> <p data-aos="fade-left" data-aos-duration={900}>
<div className="space8" /> The website has a wealth of information that would interest you.
<p data-aos="fade-left" data-aos-duration={900}>Our main goal is to expose local Tamil culture to others and also for next generation of Canadians to understand who we are in the cultural mosaic.</p> </p>
<div className="space8" />
<p data-aos="fade-left" data-aos-duration={900}>
Our main goal is to expose local Tamil culture to others and also for next generation of Canadians to understand who we are in the cultural mosaic.
</p>
<div className="space12" /> <div className="space12" />
<p data-aos="fade-left" data-aos-duration={900}>
We strive to bring together the Tamil community through festivals, workshops, and cultural activities. Our events showcase traditional dance, music, literature, and cuisine to celebrate Tamil heritage. By participating, you become part of preserving and promoting Tamil identity for future generations.
</p>
{/* <div className="counter-area" data-aos="fade-left" data-aos-duration={1000}> {/* <div className="counter-area" data-aos="fade-left" data-aos-duration={1000}>
<div className="counter-box"> <div className="counter-box">
<h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3> <h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3>
@ -87,7 +100,7 @@ export default function AboutSection() {
<div className="memory-boxarea pl-3"> <div className="memory-boxarea pl-3">
<div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} > <div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} >
<img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{height:"270px", width:"100%"}}/> <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{ height: "500px", width: "100%" }} />
</div> </div>
</div> </div>
</div> </div>

View File

@ -44,7 +44,7 @@ export default function HomePhotoGallerySection() {
setGalleryImages(formatted); setGalleryImages(formatted);
// Unique years, sorted latest first // Unique years, sorted latest first
const uniqueYears:any = [...new Set(eventsData.map((event: any) => event.year))] const uniqueYears: any = [...new Set(eventsData.map((event: any) => event.year))]
setYears(uniqueYears); setYears(uniqueYears);
@ -62,9 +62,9 @@ export default function HomePhotoGallerySection() {
// Filter images by active year // Filter images by active year
const filteredImages = galleryImages.filter((img) => img.year === activeYear) const filteredImages = galleryImages.filter((img) => img.year === activeYear)
console.log("filteredImages", filteredImages)
console.log("filteredImages", filteredImages)
const handleImageClick = (index: number) => { const handleImageClick = (index: number) => {
const actualIndex = galleryImages.findIndex( const actualIndex = galleryImages.findIndex(
@ -103,12 +103,12 @@ export default function HomePhotoGallerySection() {
<div className="row gx-5"> <div className="row gx-5">
<div className="col-lg-10"> <div className="col-lg-10">
<div className="row mt-4"> <div className="row mt-4">
{filteredImages.slice(0, 8).map((img:any, index) => ( {filteredImages.slice(0, 8).map((img: any, index) => (
<div <div
key={index} key={index}
className="col-lg-3 col-md-6 mb-4" className="col-lg-3 col-md-6 mb-4"
data-aos="zoom-in" data-aos="zoom-in"
data-aos-duration={ 1000} data-aos-duration={1000}
> >
<div className="blog4-boxarea"> <div className="blog4-boxarea">
<div <div
@ -135,6 +135,16 @@ export default function HomePhotoGallerySection() {
</p> </p>
</div> </div>
)} )}
<div
className="btn-area1 text-center"
data-aos="fade-left"
data-aos-duration={1200}
>
<Link href="/photo-gallery" className="vl-btn3">
Go To Gallery
</Link>
</div>
</div> </div>
</div> </div>
@ -154,18 +164,10 @@ export default function HomePhotoGallerySection() {
</div> </div>
</div> </div>
<div className="col-lg-12"> {/* <div className="col-lg-12">
<div className="space32" /> <div className="space32" />
<div
className="btn-area1 text-center" </div> */}
data-aos="fade-left"
data-aos-duration={1200}
>
<Link href="/photo-gallery" className="vl-btn3">
Go To Gallery
</Link>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -60,13 +60,13 @@ export default function HomeWhyChooseUs() {
</div> */} </div> */}
<div className="icons-box"> <div className="icons-box">
<div className="icons"> <div className="icons">
<img src="/assets/img/home/membership-benifits/icon-01.webp" alt="" /> <img src="/assets/img/icons/mem1.png" alt="" />
</div> </div>
<p> Networking Opportunities</p> <p> Networking Opportunities</p>
</div> </div>
<div className="icons-box"> <div className="icons-box">
<div className="icons"> <div className="icons">
<img src="/assets/img/home/membership-benifits/icon-02.webp" alt="" /> <img src="/assets/img/icons/mem2.png" alt="" />
</div> </div>
<p>Interactive Workshops & Panels</p> <p>Interactive Workshops & Panels</p>
</div> </div>

View File

@ -64,10 +64,10 @@ export default function Footer1() {
7890</Link> 7890</Link>
</li> */} </li> */}
<li> <li>
<Link href="/#"><img src="/assets/img/home/location.webp" alt="" />P.O. Box No:25068, Kitchener, <br />Ontario, N2A 4A5, Canada.</Link> <Link href="/#"><img src="/assets/img/icons/location.png" alt="" />P.O. Box No:25068, Kitchener, <br />Ontario, N2A 4A5, Canada.</Link>
</li> </li>
<li> <li>
<Link href="mailto:mail@tamilculturewaterloo.org"><img src="/assets/img/home/mail.webp" alt="" />mail@tamilculturewaterloo.org</Link> <Link href="mailto:mail@tamilculturewaterloo.org"><img src="/assets/img/icons/mail.png" alt="" />mail@tamilculturewaterloo.org</Link>
</li> </li>
{/* <li> {/* <li>
<Link href="/#"> <img src="/assets/img/icons/world1.svg" alt="" />eventifyevent.com</Link> <Link href="/#"> <img src="/assets/img/icons/world1.svg" alt="" />eventifyevent.com</Link>
@ -140,7 +140,7 @@ export default function Footer1() {
<p> <p>
Copyright {new Date().getFullYear()} © TamilCultureAssociation. Powered by{' '} Copyright {new Date().getFullYear()} © TamilCultureAssociation. Powered by{' '}
<a <a
style={{ color: "#fff" }} style={{ color: "#ce2029" }}
href="https://metatroncubesolutions.com/" href="https://metatroncubesolutions.com/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

View File

@ -22555,7 +22555,7 @@ html {
} }
.about2-section-area .about2-header .others-boxarea .icons-box .icons img { .about2-section-area .about2-header .others-boxarea .icons-box .icons img {
filter: brightness(0) invert(1); /* filter: brightness(0) invert(1); */
transition: all 0.4s; transition: all 0.4s;
} }
@ -26008,7 +26008,7 @@ html {
.event6-section-area .event6-widget-boxarea { .event6-section-area .event6-widget-boxarea {
position: relative; position: relative;
z-index: 1; z-index: 1;
background: #ce2029; background: #ffde14;
border-radius: 8px; border-radius: 8px;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

After

Width:  |  Height:  |  Size: 409 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 279 KiB

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 329 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 675 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 702 B

View File

@ -21,7 +21,7 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 5px solid #ccc; border: 5px solid #ccc;
border-top: 5px solid #000000cf; border-top: 5px solid #000;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@ -47,3 +47,26 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.calendar-table th, .calendar-table td {
width: 14.2%;
height: 80px;
}
.calendar-cell {
position: relative;
transition: 0.2s;
}
.calendar-cell:hover {
background: #f0f0f0;
}
.calendar-cell.selected {
background: #eac768 !important;
font-weight: bold;
border: 2px solid #d4a017;
}
.event-dot {
width: 8px;
height: 8px;
background: #e74c3c;
border-radius: 50%;
margin: 3px auto 0;
}