277 lines
12 KiB
JavaScript
277 lines
12 KiB
JavaScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { GalleryImages } from "../../../utils/constant.utils";
|
||
|
||
const AvaniAvittam = () => {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [imageSrc, setImageSrc] = useState("");
|
||
|
||
const openLightbox = (src) => {
|
||
setImageSrc(src);
|
||
setIsOpen(true);
|
||
};
|
||
|
||
const closeLightbox = () => {
|
||
setIsOpen(false);
|
||
setImageSrc("");
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* Event Details Section */}
|
||
<section className="faq-area-2 space-top">
|
||
<div className="container">
|
||
<div className="row justify-content-center">
|
||
<div className="col-xl-12">
|
||
<div className="title-area text-center">
|
||
<span className="sub-title">UPCOMING EVENT</span>
|
||
<h2 className="sec-title">Sri Murugan Temple of Waterloo Region</h2>
|
||
<h3 className="h3 text-theme mb-30">AVANI AVITTAM</h3>
|
||
|
||
<div
|
||
className="event-details-card p-3 p-md-5"
|
||
style={{
|
||
boxShadow: "0 0 20px rgba(0,0,0,0.05)",
|
||
borderRadius: "15px",
|
||
backgroundImage: `url("/assets/img/events/avani/avani-avittam-section-1.webp")`,
|
||
backgroundSize: "cover",
|
||
backgroundPosition: "center",
|
||
backgroundRepeat: "no-repeat",
|
||
}}
|
||
>
|
||
|
||
<div className="date-time-box mb-4">
|
||
<h4 className="fw-bold" style={{ color: "#D4AF37" }}>
|
||
THURSDAY, AUGUST 27TH
|
||
</h4>
|
||
<h5 className="h5 text-white">07:00 AM – 08:30 AM</h5>
|
||
</div>
|
||
|
||
<p className="fst-italic mb-4 text-white">
|
||
"Join us for the sacred Avani Avittam / Jandhyala Pournima (Yajurveda Upakarma) ceremony."
|
||
</p>
|
||
|
||
<div
|
||
className="schedule-list text-start mx-auto text-white"
|
||
style={{ maxWidth: "500px" }}
|
||
>
|
||
<div className="d-flex justify-content-between border-bottom py-2">
|
||
<span className="fw-bold">07:00 AM</span>
|
||
<span>UPAKARMA CEREMONY</span>
|
||
</div>
|
||
|
||
<div className="d-flex justify-content-between border-bottom py-2">
|
||
<span className="fw-bold">CEREMONY BY</span>
|
||
<span>SRI VISHNU DATTA</span>
|
||
</div>
|
||
|
||
<div className="d-flex justify-content-between border-bottom py-2">
|
||
<span className="fw-bold">MATERIALS</span>
|
||
<span>UPAVITHAM / POONAL PROVIDED</span>
|
||
</div>
|
||
|
||
<div className="d-flex justify-content-between py-2">
|
||
<span className="fw-bold">REGISTRATION</span>
|
||
<span>REQUIRED</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="location-info mt-4 pt-4 border-top">
|
||
<span
|
||
className="d-inline-block px-3 py-1 mb-3 fw-bold text-white rounded-pill"
|
||
style={{ backgroundColor: "#D4AF37" }}
|
||
>
|
||
NEW LOCATION
|
||
</span>
|
||
|
||
<h5 className="h5 mb-2 text-white">
|
||
Sri Murugan Temple of Waterloo Region & Community Centre
|
||
</h5>
|
||
|
||
<p className="mb-0 text-white">935 Frederick St,</p>
|
||
<p className="mb-0 text-white">Kitchener, ON N2B 1V5</p>
|
||
<p className="mb-0 text-white">Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* The Glory of Thai Poosam */}
|
||
<section className="faq-area-2 space">
|
||
<div className="container">
|
||
<div className="row gx-60 flex-row-reverse">
|
||
<div className="col-xl-6">
|
||
<div className="title-area">
|
||
<span className="sub-title">GLORY</span>
|
||
<h2 className="sec-title">The Glory of Avani Avittam</h2>
|
||
<p className="sec-text">
|
||
In the month of Sravana, when the moon rises full over the sky, something quietly stirs in every household that carries the sacred thread — the memory of a vow made long ago. Avani Avittam, also called Jandhyala Pournima, is the day the Yajur Upakarma is performed, when the old Yagnopavitam is set aside and a new one tied with mantras passed down through generations of teachers and students. It is considered essential that this ritual be observed without fail each year, as it is believed to cleanse past shortcomings and open the way for divine blessings to follow.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-xl-6">
|
||
<div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
|
||
<img
|
||
src="/assets/img/events/avani/1.webp"
|
||
alt="The Glory of Thai Poosam"
|
||
style={{ width: "515px", height: "auto" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Spiritual Significance of the Festival */}
|
||
<section className="faq-area-2 space-bottom">
|
||
<div className="container">
|
||
<div className="row gx-60">
|
||
<div className="col-xl-6">
|
||
<div className="title-area">
|
||
<span className="sub-title">DEVOTION</span>
|
||
<h2 className="sec-title">Spiritual Significance of the Festival</h2>
|
||
<p className="sec-text">
|
||
There is something deeply personal about this day — it asks you to pause and account for the year gone by. Through Prarthana and quiet reflection, devotees acknowledge the lapses in their daily rites and seek prayaschitta, a gentle correction rather than a punishment. The day also turns hearts toward gratitude — Deva-Rishi Tarpanam and Pitru Tarpanam are offered to the sages and ancestors whose teachings and sacrifices made this path possible, a simple gesture that says, we remember you, we carry your knowledge forward.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-xl-6">
|
||
<div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
|
||
<img
|
||
src="/assets/img/events/avani/2.webp"
|
||
style={{ width: "515px", height: "auto" }}
|
||
alt="Spiritual Significance of Thai Poosam"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Rituals and Offerings to Lord Murugan */}
|
||
<section className="faq-area-2 space-bottom">
|
||
<div className="container">
|
||
<div className="row gx-60 flex-row-reverse">
|
||
<div className="col-xl-6">
|
||
<div className="title-area">
|
||
<span className="sub-title">RITUALS</span>
|
||
<h2 className="sec-title">Rituals and Offerings</h2>
|
||
<p className="sec-text">
|
||
The ceremony unfolds in careful stages, each one older than memory. It begins with Samitadanam and the Mahasankalpam, a formal declaration of intent, before Kamokarshit Japam is recited to purify one's karmic account. Then comes the heart of the day — the Yagnopaveetha Dharanam, when the new sacred thread is worn for the first time, followed by Kandarishi Tarpanam and finally Vedarambham, marking a renewed beginning of Vedic learning. For young Brahmacharis performing their first Upakarma, this sequence carries special weight — it is their first true step into a lifelong practice.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-xl-6">
|
||
<div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
|
||
<img
|
||
src="/assets/img/events/avani/3.webp"
|
||
alt="Rituals and Offerings"
|
||
style={{ width: "515px", height: "auto" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Divine Blessings and Devotee Experience */}
|
||
<section className="faq-area-2 space-bottom">
|
||
<div className="container">
|
||
<div className="row gx-60">
|
||
<div className="col-xl-6">
|
||
<div className="title-area">
|
||
<span className="sub-title">BLESSINGS</span>
|
||
<h2 className="sec-title">Divine Blessings and Devotee Experience</h2>
|
||
<p className="sec-text">
|
||
Those who gather for Avani Avittam often speak of a shared sense of belonging that grows stronger each year. While the rites can be performed at home, coming together at a temple or community hall is considered far more meaningful — it strengthens the bonds between families, keeps ancient traditions alive for the next generation, and turns individual devotion into a shared act of dharma. The renewed thread, worn quietly through the year ahead, becomes a reminder of both a personal vow and a wider community that continues to hold these traditions close.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-xl-6">
|
||
<div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
|
||
<img
|
||
src="/assets/img/events/avani/4.webp"
|
||
style={{ width: "515px", height: "auto" }}
|
||
alt="Divine Blessings and Devotee Experience"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Gallery Section */}
|
||
<div className="portfolio-area-1 space-bottom">
|
||
<div className="container">
|
||
<div className="row justify-content-center">
|
||
<div className="col-lg-5">
|
||
<div className="title-area text-center">
|
||
<h2 className="sec-title">Gallery</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row gy-30 gx-30">
|
||
{GalleryImages.slice(0, 6).map((image, index) => (
|
||
<div key={index} className="col-lg-4 col-md-6">
|
||
<div className="portfolio-card image-container">
|
||
<div className="portfolio-card-thumb">
|
||
<img
|
||
src={image.src}
|
||
alt="Gallery"
|
||
onClick={() => openLightbox(image.src)}
|
||
style={{ cursor: "pointer" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{isOpen && (
|
||
<div className="custom-modal_popup">
|
||
<span className="close-button" onClick={closeLightbox}>
|
||
×
|
||
</span>
|
||
<img src={imageSrc} alt="Fullsize" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Registration Section */}
|
||
<section className="faq-area-2 space-bottom">
|
||
<div className="container">
|
||
<div className="row gx-60">
|
||
<div className="col-xl-12">
|
||
<div className="title-area">
|
||
<span className="sub-title">Registration</span>
|
||
<h2 className="sec-title">Avani Avittam</h2>
|
||
</div>
|
||
<div>
|
||
<iframe
|
||
title="Annual Membership form powered by Zeffy"
|
||
className="avani-avittam-iframe"
|
||
src="https://www.zeffy.com/en-CA/ticketing/avani-avittam-jandhyala-pournima--2026"
|
||
allowPaymentRequest
|
||
allowTransparency="true"
|
||
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default AvaniAvittam;
|