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 { useState } from "react"
export default function UpcomingEventData() {
const [isTab, setIsTab] = useState(1)
const handleTab = (i) => {
setIsTab(i)
}
const [currentMonth, setCurrentMonth] = useState(moment());
// Events normalized with YYYY-MM-DD format
const events = [
{
id: 1,
date: "Sun Jan-14",
date: "2024-01-14",
time: "05:30 PM",
title: "Thai Pongal 2024",
location: "Holy Family Croatian Roman Catholic Parish Hall, Kitchener, Canada",
image: "/assets/img/event/upcoming-event/thai-pongal.webp",
url: "#",
},
{
id: 2,
date: "Apr 14, 2024",
title: "AGM",
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: 2,
date: "2024-04-14",
title: "AGM",
location: "Christ Lutheran Church, Waterloo, ON",
image: "/assets/img/event/upcoming-event/agm.webp",
url: "#",
},
{
id: 8,
date: "Sat Oct 26, 2024",
time: "1.00 PM-4.30 PM",
title: "TCA WPL Deepavali Celebrations",
url: "#",
},
id: 3,
date: "2024-06-22",
title: "KW Multicultural Festival",
location: "Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON",
image: "/assets/img/event/upcoming-event/kw.webp",
url: "#",
},
{
id: 9,
date: "Sat Dec 21, 2024",
time: "05:00 PM-09:00 PM",
title: "RIM Park",
url: "#",
},
id: 4,
date: "2024-07-07",
time: "10:00 AM",
title: "TCA Picnic Potlock",
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 the start and end of the current month
// Get start and end of current month
const startOfMonth = currentMonth.clone().startOf("month");
const endOfMonth = currentMonth.clone().endOf("month");
// Generate the calendar days
// Generate calendar days
const daysInMonth = [];
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++) {
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 dateString = date?.format("YYYY-MM-DD");
return events.filter(event => event.date === dateString);
};
// Function to navigate to the next/previous month
// Navigate months
const handleMonthChange = (direction) => {
setCurrentMonth(currentMonth.clone().add(direction, "months"));
};
return (
<>
<div className="event3-section-area sp4">
<div className="container">
<div className="row">
<div className="col-lg-6 m-auto">
<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 className="event3-section-area sp4">
<div className="container">
<div className="row">
<div className="col-lg-6 m-auto">
<div className="event2-header heading5 text-center space-margin60">
<h2 className="text-anime-style-3">Upcoming Events</h2>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-4">
</div>
<div className="row">
{/* Calendar (left side) */}
<div className="col-12 col-lg-3">
<div className="d-flex justify-content-between align-items-center">
<button
className="vl-btn4"
@ -152,591 +156,165 @@ export default function UpcomingEventData() {
<tbody>
{Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
<tr key={rowIndex}>
{daysInMonth.slice(rowIndex * 7, (rowIndex + 1) * 7).map((day, index) => (
<td
key={index}
style={{
cursor: day ? "default" : "not-allowed",
backgroundColor: getEventForDate(day).length > 0 ? "#eac768" : "white", // Highlight event dates
}}
>
{day ? (
<div style={{ width: "100%", height: "100%" }}>
{/* Align day number to the right */}
<span className="text-end d-block">{day.date()}</span>
{/* Display event names if present */}
{/* {getEventForDate(day).map((event, eventIndex) => (
<div
key={eventIndex}
className="text-sm text-white p-1 text-center mt-1"
onClick={() => handleEventClick(event.id)} // Add click handler
style={{
backgroundColor: "#007BFF", // Highlight event with a blue color
borderRadius: "5px",
cursor: "pointer"
}}
>
{event.title}
{daysInMonth
.slice(rowIndex * 7, (rowIndex + 1) * 7)
.map((day, index) => {
const eventList = getEventForDate(day);
return (
<td
key={index}
style={{
cursor: day ? "default" : "not-allowed",
backgroundColor: eventList.length > 0 ? "#ce2029" : "white",
color: eventList.length > 0 ? "white" : "black",
}}
title={
eventList.length > 0
? eventList.map(e => e.title).join("\n")
: ""
}
>
{day ? (
<div style={{ width: "100%", height: "100%" }}>
<span className="text-end d-block">{day.date()}</span>
</div>
))} */}
</div>
) : (
""
)}
</td>
))}
) : (
""
)}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</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="row">
<div className="col-lg-1" />
<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">
<div className="img1">
<img src="/assets/img/event/upcoming-event/thai-pongal.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:30 PM - Sun Jan-14<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada</Link>
</li>
</ul>
<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="col-lg-9" data-aos="fade-up" data-aos-duration={1000}>
<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="event-widget-area">
{events.map((event, idx) => {
const isEven = (idx + 1) % 2 === 0; // check even/odd index
return (
<div key={event.id} className="mb-5">
<div className="row align-items-center">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
<h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
{/* First Event (Odd): Image Left | Even Event: Image Right */}
{!isEven ? (
<>
{/* IMAGE LEFT */}
<div className="col-lg-5">
<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>
<img src={event.image} alt={event.title} />
</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 className="col-lg-1" />
{/* CONTENT RIGHT */}
<div className="col-lg-6">
<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> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</>
) : (
<>
{/* CONTENT LEFT */}
<div className="col-lg-6">
<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 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>
)
}

View File

@ -32,9 +32,9 @@ export default function AboutSection() {
</div>
</div> */}
<div className="img2">
<img src="/assets/img/home/about/about.webp" alt="" />
</div>
{/* <div className="about3-images">
<img src="/assets/img/home/about/about.webp" alt="" style={{ width: "100%" }} />
</div>
{/* <div className="about3-images">
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
<img src="/assets/img/home/about/big-circle.webp" alt="" />
@ -52,12 +52,25 @@ export default function AboutSection() {
{/* <div className="space18" /> */}
<h2 className="text-anime-style-3">Welcome to TCA website</h2>
<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" />
<p data-aos="fade-left" data-aos-duration={900}>The website has a wealth of information that would interest you.</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>
<p data-aos="fade-left" data-aos-duration={900}>
The website has a wealth of information that would interest you.
</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" />
<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-box">
<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="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>

View File

@ -44,7 +44,7 @@ export default function HomePhotoGallerySection() {
setGalleryImages(formatted);
// 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);
@ -64,7 +64,7 @@ export default function HomePhotoGallerySection() {
const filteredImages = galleryImages.filter((img) => img.year === activeYear)
console.log("filteredImages", filteredImages)
console.log("filteredImages", filteredImages)
const handleImageClick = (index: number) => {
const actualIndex = galleryImages.findIndex(
@ -103,12 +103,12 @@ export default function HomePhotoGallerySection() {
<div className="row gx-5">
<div className="col-lg-10">
<div className="row mt-4">
{filteredImages.slice(0, 8).map((img:any, index) => (
{filteredImages.slice(0, 8).map((img: any, index) => (
<div
key={index}
className="col-lg-3 col-md-6 mb-4"
data-aos="zoom-in"
data-aos-duration={ 1000}
data-aos-duration={1000}
>
<div className="blog4-boxarea">
<div
@ -135,6 +135,16 @@ export default function HomePhotoGallerySection() {
</p>
</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>
@ -154,18 +164,10 @@ export default function HomePhotoGallerySection() {
</div>
</div>
<div className="col-lg-12">
{/* <div className="col-lg-12">
<div className="space32" />
<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>
</div>

View File

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

View File

@ -64,10 +64,10 @@ export default function Footer1() {
7890</Link>
</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>
<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>
<Link href="/#"> <img src="/assets/img/icons/world1.svg" alt="" />eventifyevent.com</Link>
@ -140,7 +140,7 @@ export default function Footer1() {
<p>
Copyright {new Date().getFullYear()} © TamilCultureAssociation. Powered by{' '}
<a
style={{ color: "#fff" }}
style={{ color: "#ce2029" }}
href="https://metatroncubesolutions.com/"
target="_blank"
rel="noopener noreferrer"

View File

@ -22555,7 +22555,7 @@ html {
}
.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;
}
@ -26008,7 +26008,7 @@ html {
.event6-section-area .event6-widget-boxarea {
position: relative;
z-index: 1;
background: #ce2029;
background: #ffde14;
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;
height: 40px;
border: 5px solid #ccc;
border-top: 5px solid #000000cf;
border-top: 5px solid #000;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@ -47,3 +47,26 @@
opacity: 0;
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;
}