images updated
This commit is contained in:
commit
53aad1dc31
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 115 KiB |
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user