5582 lines
374 KiB
XML
5582 lines
374 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<odoo noupdate="1">
|
||
<!-- ================================================================
|
||
Content on this page is adapted from the live tncsc.com site
|
||
(captured 2026-08-20) as part of migrating it into this Odoo
|
||
website. It should be proofread by TNCSC against the original
|
||
before go-live - text was reconstructed via automated extraction,
|
||
not copy-pasted from raw HTML, so treat it as a faithful draft,
|
||
not a byte-exact mirror. Two known gaps, deliberately not
|
||
fabricated here:
|
||
- No public self-service "join online" flow exists yet in
|
||
community_membership (portal only handles renewal for partners
|
||
already created by staff) - every "Become a Member" CTA below
|
||
points at the /contact form instead of a broken/fake signup link.
|
||
- tncsc.com's own Sponsors page and Contact-page phone number are
|
||
unmigrated WordPress theme demo placeholders (generic
|
||
"client-01..09" logos, a non-Canadian demo phone number) with no
|
||
real data behind them - neither is reproduced here.
|
||
================================================================ -->
|
||
|
||
<!-- Home. The website module's homepage route ("/") is special-cased:
|
||
it only serves a website.page whose website_id explicitly matches
|
||
the current website. A generic (website_id-unset) page at "/"
|
||
renders fine at every OTHER url but is silently ignored for the
|
||
homepage specifically, and inheriting the stock "website.homepage"
|
||
view has no effect either, because Odoo already auto-forks a
|
||
website-specific copy of that view (Copy-On-Write) with no
|
||
inherit_id of its own the first time the website is customized -
|
||
confirmed empirically against a live container. So both records
|
||
below explicitly bind website_id to the default website, matching
|
||
what the homepage route actually looks up. -->
|
||
<record id="view_page_home" model="ir.ui.view">
|
||
<field name="name">TNCSC Home</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_home</field>
|
||
<field name="website_id" ref="website.default_website"/>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_home">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 0px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 100;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.btn-tncsc-social {
|
||
width: 48px;
|
||
height: 48px;
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-social:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-2px);
|
||
color: #ffffff !important;
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
.tncsc-hero-slide {
|
||
min-height: 720px;
|
||
padding-top: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.tncsc-carousel-control {
|
||
width: 44px;
|
||
height: 44px;
|
||
background-color: rgba(30, 30, 30, 0.65);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.85;
|
||
transition: all 0.2s;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
.tncsc-carousel-control:hover {
|
||
opacity: 1;
|
||
background-color: rgba(0, 0, 0, 0.85);
|
||
transform: scale(1.08);
|
||
}
|
||
.carousel-control-prev, .carousel-control-next {
|
||
width: 5%;
|
||
z-index: 15;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate.tncsc-animate-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenu {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
.tncsc-hero-slide {
|
||
min-height: auto;
|
||
padding-top: 160px;
|
||
padding-bottom: 60px;
|
||
}
|
||
.tncsc-hero-slide h1.display-3 {
|
||
font-size: 2.5rem;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-hero-slide h1.display-3 {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 1rem !important;
|
||
}
|
||
.tncsc-hero-slide p.fs-5 {
|
||
font-size: 1rem !important;
|
||
}
|
||
.carousel-control-prev, .carousel-control-next {
|
||
width: 12%;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Transparent Navbar Overlay & Auto-scroll Carousel -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenu" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenu">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link active">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Carousel -->
|
||
<div id="tncscHeroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4500">
|
||
<div class="carousel-inner">
|
||
<!-- Slide 1: Shore Temple -->
|
||
<div class="carousel-item active">
|
||
<div class="tncsc-hero-slide" style="background: linear-gradient(90deg, rgba(10, 20, 50, 0.4) 0%, rgba(10, 20, 50, 0.1) 100%), url('/tncsc_deployment/static/src/img/hero/slide-1.webp') top right/cover no-repeat;">
|
||
<div class="container my-auto">
|
||
<div class="row">
|
||
<div class="col-lg-7 text-start text-white tncsc-animate tncsc-animate-visible">
|
||
<p class="fs-5 mb-2 opacity-90 fw-medium" style="letter-spacing: 0.3px; text-shadow: 0 2px 6px rgba(0,0,0,0.6);">
|
||
Connecting Tamil Hearts Across Canada
|
||
</p>
|
||
<h1 class="display-3 fw-bold text-white mb-4" style="line-height: 1.12; letter-spacing: -0.5px; text-shadow: 0 3px 12px rgba(0,0,0,0.6);">
|
||
Join Canada's Largest<br/>
|
||
Tamil Nadu Cultural<br/>
|
||
Community
|
||
</h1>
|
||
<div class="pt-2">
|
||
<a href="/about" class="btn-tncsc-gold px-4 py-3 fs-6">
|
||
<i class="fa fa-ticket"></i> Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: Thiruvalluvar Statue -->
|
||
<div class="carousel-item">
|
||
<div class="tncsc-hero-slide" style="background: linear-gradient(90deg, rgba(10, 20, 50, 0.45) 0%, rgba(10, 20, 50, 0.15) 100%), url('/tncsc_deployment/static/src/img/hero/slide-2.webp') top center/cover no-repeat;">
|
||
<div class="container my-auto">
|
||
<div class="row">
|
||
<div class="col-lg-7 text-start text-white">
|
||
<p class="fs-5 mb-2 opacity-90 fw-medium" style="letter-spacing: 0.3px; text-shadow: 0 2px 6px rgba(0,0,0,0.6);">
|
||
Honouring Our Roots, Growing Together
|
||
</p>
|
||
<h1 class="display-3 fw-bold text-white mb-4" style="line-height: 1.12; letter-spacing: -0.5px; text-shadow: 0 3px 12px rgba(0,0,0,0.6);">
|
||
Where Tamil Culture<br/>
|
||
Thrives Across<br/>
|
||
Generations
|
||
</h1>
|
||
<div class="pt-2">
|
||
<a href="/tamil-school" class="btn-tncsc-gold px-4 py-3 fs-6">
|
||
<i class="fa fa-ticket"></i> Explore Our Community
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: Bharatanatyam Dance -->
|
||
<div class="carousel-item">
|
||
<div class="tncsc-hero-slide" style="background: linear-gradient(90deg, rgba(10, 20, 50, 0.5) 0%, rgba(10, 20, 50, 0.2) 100%), url('/tncsc_deployment/static/src/img/hero/slide-3.webp') top right/cover no-repeat;">
|
||
<div class="container my-auto">
|
||
<div class="row">
|
||
<div class="col-lg-7 text-start text-white">
|
||
<p class="fs-5 mb-2 opacity-90 fw-medium" style="letter-spacing: 0.3px; text-shadow: 0 2px 6px rgba(0,0,0,0.6);">
|
||
Celebrating 28+ Years of Culture & Connection
|
||
</p>
|
||
<h1 class="display-3 fw-bold text-white mb-4" style="line-height: 1.12; letter-spacing: -0.5px; text-shadow: 0 3px 12px rgba(0,0,0,0.6);">
|
||
Canada’s Home for<br/>
|
||
Tamil Tradition,<br/>
|
||
Unity & Pride
|
||
</h1>
|
||
<div class="pt-2">
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold px-4 py-3 fs-6">
|
||
<i class="fa fa-ticket"></i> Book Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Circular Controls -->
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#tncscHeroCarousel" data-bs-slide="prev">
|
||
<span class="tncsc-carousel-control">
|
||
<i class="fa fa-chevron-left text-white fs-6"></i>
|
||
</span>
|
||
<span class="visually-hidden">Previous</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#tncscHeroCarousel" data-bs-slide="next">
|
||
<span class="tncsc-carousel-control">
|
||
<i class="fa fa-chevron-right text-white fs-6"></i>
|
||
</span>
|
||
<span class="visually-hidden">Next</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: About Us -->
|
||
<section class="py-5 my-3">
|
||
<div class="container">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Side: 2x2 Image Grid -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-01.webp" class="img-fluid w-100 shadow-sm" alt="TNCSC Sculpture" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-02.webp" class="img-fluid w-100 shadow-sm" alt="TNCSC Folk Dancers" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-03.webp" class="img-fluid w-100 shadow-sm" alt="TNCSC Temple Gopuram" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-04.webp" class="img-fluid w-100 shadow-sm" alt="TNCSC Rock Relief Carving" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Side: About Us Copy -->
|
||
<div class="col-lg-6 ps-lg-4 tncsc-animate">
|
||
<span class="text-uppercase fw-semibold d-block mb-2" style="color: #7C8BA1; letter-spacing: 1.8px; font-size: 0.88rem;">CELEBRATING CULTURAL EXCELLENCE</span>
|
||
<h2 class="fw-bold mb-3" style="color: #0c152e; font-size: 3.2rem; line-height: 1.1;">About TNCSC</h2>
|
||
<h3 class="h4 mb-4 fw-medium" style="color: #C48E38; line-height: 1.45;">Canada’s Largest Tamil Cultural Organization - Bridging Heritage & Community Since 1997</h3>
|
||
<p style="color: #5B6B7C; font-size: 1.02rem; line-height: 1.65;" class="mb-3">
|
||
The Tamil Nadu Cultural Society of Canada (TNCSC) has been a cornerstone of the
|
||
Tamil community since 1997, connecting generations of Tamil families through
|
||
culture, education, and service.
|
||
</p>
|
||
<p style="color: #5B6B7C; font-size: 1.02rem; line-height: 1.65;" class="mb-3">
|
||
As a registered non-profit organization, TNCSC preserves the rich heritage of
|
||
Tamil Nadu while fostering a sense of belonging among Tamil Canadians across
|
||
provinces. From vibrant Pongal festivals to Tamil language schools, every
|
||
initiative is a celebration of identity, resilience, and community spirit.
|
||
</p>
|
||
<p style="color: #5B6B7C; font-size: 1.02rem; line-height: 1.65;" class="mb-4">
|
||
With programs designed for youth, seniors, newcomers, and families, TNCSC
|
||
continues to build a vibrant cultural bridge between Tamil traditions and
|
||
Canadian values.
|
||
</p>
|
||
<div>
|
||
<a href="/about" class="btn-tncsc-gold px-4 py-3 fs-6">
|
||
<i class="fa fa-ticket"></i> Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Watch Our Story & Floating Feature Cards -->
|
||
<section class="position-relative" style="background-color: #f8fafc;">
|
||
<div class="py-5 text-center text-white" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.95) 0%, rgba(10, 20, 50, 0.92) 100%), url('/tncsc_deployment/static/src/img/hero/slide-1.webp') center/cover no-repeat; padding-bottom: 110px !important; padding-top: 70px !important;">
|
||
<div class="container" style="max-width: 900px;">
|
||
<span class="badge mb-3 px-3 py-2 fw-semibold" style="background-color: #0ea5e9; color: #ffffff; font-size: 0.85rem; letter-spacing: 0.5px; border-radius: 4px;">Watch Our Story</span>
|
||
<h2 class="display-4 fw-bold text-white mb-3" style="font-size: 2.9rem; line-height: 1.15; letter-spacing: -0.5px;">Proudly Celebrating Tamil Heritage in Canada</h2>
|
||
<p class="fs-5 mb-4 fw-semibold" style="color: #00e5ff; letter-spacing: 0.2px;">From Pongal Festivals to Youth Empowerment - Experience Culture That Connects Generations.</p>
|
||
<p class="text-white-50 fs-6 mb-2" style="max-width: 780px; margin-left: auto; margin-right: auto; line-height: 1.6;">
|
||
For over 28+ years, TNCSC has brought together Tamil families from all across Canada to preserve, celebrate, and pass on the vibrant culture of Tamil Nadu.
|
||
</p>
|
||
<p class="text-white-50 fs-6 mb-3" style="max-width: 780px; margin-left: auto; margin-right: auto; line-height: 1.6;">
|
||
Through traditional festivals, language education, youth leadership, and community support, our organization is more than just a gathering - it's a living, growing cultural legacy.
|
||
</p>
|
||
<p class="fw-semibold text-info fs-6">Discover the heartbeat of our community.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Cards Container -->
|
||
<div class="container pb-5" style="margin-top: -65px; position: relative; z-index: 10;">
|
||
<div class="row g-4 justify-content-center">
|
||
<!-- Card 1 -->
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="card h-100 border-0 shadow-lg text-center p-4 tncsc-hover-lift tncsc-animate" style="border-radius: 12px; background: #ffffff;">
|
||
<div class="card-body py-4">
|
||
<div class="d-inline-flex align-items-center justify-content-center mb-4 rounded-circle shadow-sm" style="width: 76px; height: 76px; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);">
|
||
<i class="fa fa-calendar text-white fs-3"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0c152e; font-size: 1.35rem;">Cultural Networking Events</h4>
|
||
<p style="color: #64748b; font-size: 0.95rem; line-height: 1.6;" class="mb-0">
|
||
Connect with fellow Tamil professionals, entrepreneurs, artists, and families through curated meetups and celebrations that strengthen our cultural bond and open new doors in Canada.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="card h-100 border-0 shadow-lg text-center p-4 tncsc-hover-lift tncsc-animate" style="border-radius: 12px; background: #ffffff;">
|
||
<div class="card-body py-4">
|
||
<div class="d-inline-flex align-items-center justify-content-center mb-4 rounded-circle shadow-sm" style="width: 76px; height: 76px; background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);">
|
||
<i class="fa fa-graduation-cap text-white fs-3"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0c152e; font-size: 1.35rem;">Youth & Career Mentorship</h4>
|
||
<p style="color: #64748b; font-size: 0.95rem; line-height: 1.6;" class="mb-0">
|
||
Our mentorship program pairs talented students and young professionals with experienced Tamil-Canadian leaders who provide valuable guidance in education, career, leadership, and life skills.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="card h-100 border-0 shadow-lg text-center p-4 tncsc-hover-lift tncsc-animate" style="border-radius: 12px; background: #ffffff;">
|
||
<div class="card-body py-4">
|
||
<div class="d-inline-flex align-items-center justify-content-center mb-4 rounded-circle shadow-sm" style="width: 76px; height: 76px; background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);">
|
||
<i class="fa fa-users text-white fs-3"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0c152e; font-size: 1.35rem;">Festivals & Family Gatherings</h4>
|
||
<p style="color: #64748b; font-size: 0.95rem; line-height: 1.6;" class="mb-0">
|
||
From Pongal feasts to Deepavali musical nights and summer picnics, TNCSC events go beyond formality — they bring vibrant joy, rich culture, and true community spirit into every celebration.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 4: Why Join TNCSC? -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff; overflow: hidden;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: Copy & 2 Cards -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<span class="text-uppercase fw-semibold d-block mb-2" style="color: #7C8BA1; letter-spacing: 1.8px; font-size: 0.88rem;">GET INVOLVED</span>
|
||
<h2 class="fw-bold mb-3" style="color: #0c152e; font-size: 3.2rem; line-height: 1.1;">Why Join TNCSC?</h2>
|
||
<h3 class="h5 mb-4 fw-medium" style="color: #C48E38; line-height: 1.45;">Experience Culture, Connection & Community - All Year Round</h3>
|
||
|
||
<!-- 2 Cream Cards Grid -->
|
||
<div class="row g-3 pt-2">
|
||
<!-- Card 1 -->
|
||
<div class="col-sm-6">
|
||
<div class="p-4 position-relative h-100" style="background-color: #FFFDF5; border-radius: 12px; overflow: hidden; border: 1px solid rgba(216, 156, 67, 0.12);">
|
||
<!-- Watermark Icon -->
|
||
<i class="fa fa-map-marker position-absolute" style="right: -10px; bottom: -15px; font-size: 7rem; color: rgba(216, 156, 67, 0.08); pointer-events: none;"></i>
|
||
|
||
<div class="d-inline-flex align-items-center justify-content-center mb-3 rounded-circle" style="width: 44px; height: 44px; background-color: rgba(216, 156, 67, 0.15);">
|
||
<i class="fa fa-map-marker text-warning fs-5" style="color: #D89C43 !important;"></i>
|
||
</div>
|
||
<h5 class="fw-bold mb-2" style="color: #0c152e; font-size: 1.1rem;">Where Is TNCSC Based?</h5>
|
||
<p style="color: #64748b; font-size: 0.9rem; line-height: 1.5;" class="mb-0">
|
||
Tamil Nadu Cultural Society of Canada<br/>
|
||
GTA, Ontario, Canada.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="col-sm-6">
|
||
<div class="p-4 position-relative h-100" style="background-color: #FFFDF5; border-radius: 12px; overflow: hidden; border: 1px solid rgba(216, 156, 67, 0.12);">
|
||
<!-- Watermark Icon -->
|
||
<i class="fa fa-clock-o position-absolute" style="right: -15px; bottom: -15px; font-size: 7rem; color: rgba(216, 156, 67, 0.08); pointer-events: none;"></i>
|
||
|
||
<div class="d-inline-flex align-items-center justify-content-center mb-3 rounded-circle" style="width: 44px; height: 44px; background-color: rgba(216, 156, 67, 0.15);">
|
||
<i class="fa fa-clock-o text-warning fs-5" style="color: #D89C43 !important;"></i>
|
||
</div>
|
||
<h5 class="fw-bold mb-2" style="color: #0c152e; font-size: 1.1rem;">How Can I Join?</h5>
|
||
<p style="color: #64748b; font-size: 0.9rem; line-height: 1.5;" class="mb-0">
|
||
Membership is open year-round!<br/>
|
||
Choose from annual, lifetime, or family plans.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: Hero Image with Decorative Circles -->
|
||
<div class="col-lg-6 position-relative text-center">
|
||
<!-- Top Left Yellow Accent Circle -->
|
||
<div class="position-absolute rounded-circle" style="width: 70px; height: 70px; background-color: #F8C346; top: -20px; left: 15px; z-index: 1;"></div>
|
||
|
||
<!-- Bottom Right Gold Accent Semi-Circle/Circle -->
|
||
<div class="position-absolute rounded-circle" style="width: 120px; height: 120px; background-color: #C48E38; bottom: 20px; right: 0px; z-index: 1;"></div>
|
||
|
||
<!-- Main Photo -->
|
||
<img src="/tncsc_deployment/static/src/img/home/hero.webp" class="img-fluid position-relative shadow-lg" alt="TNCSC Community Hands" style="border-radius: 12px; z-index: 2; width: 92%; max-height: 480px; object-fit: cover;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 5: Upcoming Events & Celebrations -->
|
||
<t t-set="upcoming_events" t-value="env['event.event'].sudo().search([('website_published', '=', True)], order='date_begin', limit=3)"/>
|
||
<section class="py-5" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.96) 0%, rgba(10, 20, 50, 0.94) 100%), url('/tncsc_deployment/static/src/img/hero/slide-1.webp') center/cover no-repeat; min-height: 480px;">
|
||
<div class="container py-4">
|
||
<!-- Title -->
|
||
<h2 class="display-4 fw-bold text-center text-white mb-4" style="font-size: 3rem;">Upcoming Events & Celebrations</h2>
|
||
|
||
<!-- Filter Tabs -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-5">
|
||
<div class="position-relative pb-2">
|
||
<a href="#" class="text-decoration-none fw-semibold fs-5" style="color: #D89C43;">All</a>
|
||
<!-- Active Tab Golden Underline with Arrow -->
|
||
<div class="position-absolute bottom-0 start-50 translate-middle-x" style="width: 100%; border-bottom: 2px solid #D89C43;">
|
||
<div class="position-absolute start-50 translate-middle-x" style="bottom: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #D89C43;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pb-2">
|
||
<a href="#" class="text-decoration-none fw-medium fs-5" style="color: #64748b;">Event</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dynamic / Static Fallback Event Row -->
|
||
<div class="mx-auto" style="max-width: 960px;">
|
||
<t t-if="upcoming_events">
|
||
<t t-foreach="upcoming_events" t-as="upcoming_event">
|
||
<div class="card border-0 mb-4 shadow-lg overflow-hidden tncsc-hover-lift tncsc-animate" style="background-color: #0c1533; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);">
|
||
<div class="row g-0 align-items-center">
|
||
<!-- Golden Date Column -->
|
||
<div class="col-md-3 p-4 text-white text-center text-md-start" style="background: linear-gradient(135deg, #d89c43 0%, #c48e38 100%); min-height: 120px; display: flex; flex-direction: column; justify-content: center;">
|
||
<h4 class="fw-bold mb-1 text-white fs-4" t-field="upcoming_event.date_begin" t-options="{'widget': 'datetime', 'format': 'dd MMM yyyy,'}"/>
|
||
<p class="mb-0 text-white-50 small fw-medium" t-field="upcoming_event.date_begin" t-options="{'widget': 'datetime', 'format': 'EEEE'}"/>
|
||
<p class="mb-0 text-white-50 small" t-field="upcoming_event.date_begin" t-options="{'widget': 'datetime', 'format': 'hh:mm a'}"/>
|
||
</div>
|
||
|
||
<!-- Details Column -->
|
||
<div class="col-md-6 p-4 text-white">
|
||
<h4 class="fw-bold text-white mb-3 fs-4" t-out="upcoming_event.name"/>
|
||
<div class="d-flex align-items-center gap-4">
|
||
<span style="color: #06b6d4; font-size: 0.92rem;" class="fw-medium">
|
||
<i class="fa fa-tag me-1"></i> Events
|
||
</span>
|
||
<span style="color: #B8B2E6; font-size: 0.92rem;" class="fw-medium" t-if="upcoming_event.address_id">
|
||
<i class="fa fa-map-marker me-1"></i> <t t-out="upcoming_event.address_id.city"/>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Button Column -->
|
||
<div class="col-md-3 p-4 text-center text-md-end">
|
||
<a t-attf-href="/event/#{ slug(upcoming_event) }" class="btn-tncsc-gold py-2 px-4 fs-6">
|
||
<i class="fa fa-ticket"></i> Book Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
<t t-else="">
|
||
<!-- Sample Event Card Row matching screenshot -->
|
||
<div class="card border-0 mb-4 shadow-lg overflow-hidden tncsc-hover-lift tncsc-animate" style="background-color: #0c1533; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);">
|
||
<div class="row g-0 align-items-center">
|
||
<!-- Golden Date Column -->
|
||
<div class="col-md-3 p-4 text-white text-center text-md-start" style="background: linear-gradient(135deg, #d89c43 0%, #c48e38 100%); min-height: 120px; display: flex; flex-direction: column; justify-content: center;">
|
||
<h4 class="fw-bold mb-1 text-white fs-4">11 Jul 2026,</h4>
|
||
<p class="mb-0 text-white-50 fs-6 fw-medium">Saturday</p>
|
||
<p class="mb-0 text-white-50 small">10:00 AM</p>
|
||
</div>
|
||
|
||
<!-- Details Column -->
|
||
<div class="col-md-6 p-4 text-white">
|
||
<h4 class="fw-bold text-white mb-3 fs-4">TNCSC’s Summer Picnic 2026</h4>
|
||
<div class="d-flex align-items-center gap-4">
|
||
<span style="color: #06b6d4; font-size: 0.92rem;" class="fw-medium">
|
||
<i class="fa fa-tag me-1"></i> Events
|
||
</span>
|
||
<span style="color: #B8B2E6; font-size: 0.92rem;" class="fw-medium">
|
||
<i class="fa fa-map-marker me-1"></i> Mississauga
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Button Column -->
|
||
<div class="col-md-3 p-4 text-center text-md-end">
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-4 fs-6">
|
||
<i class="fa fa-ticket"></i> Book Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 6: Language & Culture -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Side: 2x2 Heritage Grid -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-01.webp" class="img-fluid w-100 shadow-sm" alt="Tamil Classes Admission Poster" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-02.webp" class="img-fluid w-100 shadow-sm" alt="Tamil Rock Carvings" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-03.webp" class="img-fluid w-100 shadow-sm" alt="Tamil Temple Gopuram" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/home/about-04.webp" class="img-fluid w-100 shadow-sm" alt="Thiruvalluvar Statue" style="aspect-ratio: 1/1; object-fit: cover; border-radius: 0;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Side: Copy & CTA -->
|
||
<div class="col-lg-6 ps-lg-4 tncsc-animate">
|
||
<span class="text-uppercase fw-semibold d-block mb-2" style="color: #7C8BA1; letter-spacing: 1.8px; font-size: 0.88rem;">LANGUAGE & CULTURE</span>
|
||
<h2 class="fw-bold mb-3" style="color: #0c152e; font-size: 3.2rem; line-height: 1.1;">Speak the Language of Your Heritage</h2>
|
||
<h3 class="h4 mb-4 fw-medium" style="color: #C48E38; line-height: 1.45;">At TNCSC, our mission is to pass the beauty of Tamil to every generation in Canada.</h3>
|
||
<p style="color: #5B6B7C; font-size: 1.02rem; line-height: 1.65;" class="mb-3">
|
||
Whether you're a parent hoping to pass on your language, a student preparing for cultural competitions, or a newcomer eager to connect – TNCSC offers welcoming, effective Tamil learning programs for all ages.
|
||
</p>
|
||
<p style="color: #5B6B7C; font-size: 1.02rem; line-height: 1.65;" class="mb-3">
|
||
Our community-led classes are designed to blend traditional Tamil values with modern teaching methods. From the alphabet to ancient poetry, from conversational Tamil to cultural idioms – we make language learning fun, meaningful, and rooted in real community connection.
|
||
</p>
|
||
<p style="color: #64748b; font-size: 1.02rem;" class="mb-4 fst-italic">
|
||
Because to speak Tamil... is to feel Tamil.
|
||
</p>
|
||
<div>
|
||
<a href="/tamil-school" class="btn-tncsc-gold px-4 py-3 fs-6">
|
||
<i class="fa fa-ticket"></i> Start Learning Today
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 7: Be a Part of the Legacy (Compact CTA Banner) -->
|
||
<section class="py-4 my-2" style="background-color: #ffffff;">
|
||
<div class="container py-2" style="max-width: 960px;">
|
||
<div class="card border-0 shadow-lg overflow-hidden" style="border-radius: 0; background-color: #131A3B;">
|
||
<div class="row g-0 align-items-stretch">
|
||
<!-- Left Side: Hands Image -->
|
||
<div class="col-md-5">
|
||
<img src="/tncsc_deployment/static/src/img/home/home-be-a-part-of-legacy.webp" class="img-fluid w-100 h-100" alt="Be a Part of the Legacy" style="object-fit: cover; min-height: 240px;"/>
|
||
</div>
|
||
|
||
<!-- Right Side: Dark Navy Box with Copy -->
|
||
<div class="col-md-7 p-4 p-lg-5 text-white d-flex flex-column justify-content-center" style="background-color: #131A3B;">
|
||
<h2 class="fw-bold text-white mb-2" style="font-size: 1.9rem; line-height: 1.2;">Be a Part of the Legacy</h2>
|
||
<p style="color: #CBD5E1; font-size: 0.95rem; line-height: 1.6;" class="mb-3">
|
||
Join the Tamil Nadu Cultural Society of Canada and help preserve Tamil heritage, empower youth, and bring our vibrant culture to life in every corner of Canada. Your support keeps our language, traditions, and community thriving.
|
||
</p>
|
||
<div>
|
||
<a href="/membership" class="btn-tncsc-gold px-4 py-2 fs-6">
|
||
<i class="fa fa-ticket"></i> Join TNCSC Today
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 8: Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_home" model="website.page">
|
||
<field name="url">/</field>
|
||
<field name="view_id" ref="view_page_home"/>
|
||
<field name="website_id" ref="website.default_website"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- About Us -->
|
||
<record id="view_page_about" model="ir.ui.view">
|
||
<field name="name">TNCSC About</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_about</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_about">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/about/about-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.about-collage-img {
|
||
width: 100%;
|
||
height: 230px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||
}
|
||
.about-pillar-card {
|
||
background-color: #ffffff;
|
||
border-radius: 6px;
|
||
padding: 48px 32px;
|
||
text-align: center;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
border: 1px solid #E0F2FE;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
|
||
}
|
||
.about-pillar-card.highlight-card {
|
||
border: 4px solid #D89C43 !important;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuAbout {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuAbout" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuAbout">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link active">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">About Us</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">About Us</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 1: 2x2 Photo Collage + Main About Story -->
|
||
<section class="py-5 my-3" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: 2x2 Photo Grid -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/about/top-left.webp" class="about-collage-img" alt="Bharatanatyam Dance"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/about/top-right.webp" class="about-collage-img" alt="Temple Gopuram"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/about/bottom-left.webp" class="about-collage-img" alt="Thiruvalluvar Statue"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/about/bottom-right.webp" class="about-collage-img" alt="Tamil Traditional Music"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: About Details Copy -->
|
||
<div class="col-lg-6">
|
||
<p class="fw-bold mb-2" style="color: #6366F1; letter-spacing: 2px; font-size: 0.85rem;">
|
||
CELEBRATING COMMUNITY, CULTURE, AND CONNECTION SINCE 1997
|
||
</p>
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3.2rem; line-height: 1.15; font-family: var(--community-heading-font, sans-serif);">
|
||
Tamil Nadu<br/>Cultural Society<br/>of Canada
|
||
</h2>
|
||
<p class="lead mb-4 fw-semibold" style="color: #D89C43; font-size: 1.15rem; line-height: 1.6;">
|
||
TNCSC is a one and only largest Indian Tamil Organisation in Canada for the people of Tamilnadu as a whole.
|
||
</p>
|
||
<p class="mb-4" style="color: #526581; font-size: 1.02rem; line-height: 1.8;">
|
||
Tamil Nadu Cultural Society of Canada (TNCSC) is a Not-for-Profit Ontario Corporation serving Indian Tamils in Canada. It was established in May 1997 on an informal basis as an association of like minded Indian Tamils. It was registered in February 1998 as a not-for-profit corporation in the province of Ontario to connect Tamil Diasporas of Indian Tamils in Canada.
|
||
</p>
|
||
<div>
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: Preserving Tamil Heritage + Nandi Statue -->
|
||
<section class="py-5" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: Heritage Copy -->
|
||
<div class="col-lg-6">
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3.2rem; line-height: 1.15; font-family: var(--community-heading-font, sans-serif);">
|
||
Preserving Tamil<br/>Heritage
|
||
</h2>
|
||
<p style="color: #526581; font-size: 1.02rem; line-height: 1.85;" class="mb-0">
|
||
The purpose is to serve Tamils of Indian origin in Canada and preserve and promote the heritage of our culture in Canada by celebrating festivals like Pongal combined with Christmas and English New Year, Tamil New Year and Deepavali combined with Eid. This will facilitate the people of Tamil Nadu from different religion to feel Canada as a home away from home. We also help Tamil kids of Indo-Canadian Tamils to understand our rich heritage and the culture. Association is also assisting the new immigrants from Tamilnadu to settle down fast in Canada by providing necessary information relating to Canadian society, settlement, job search and community support by means of networking.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Right Column: Nandi Statue Image with Accent Circles -->
|
||
<div class="col-lg-6 position-relative text-center">
|
||
<div class="position-relative d-inline-block">
|
||
<!-- Top Yellow Circle Decorative Accent -->
|
||
<div style="position: absolute; top: -15px; left: -25px; width: 65px; height: 65px; background-color: #FCD34D; border-radius: 50%; z-index: 1;"></div>
|
||
<!-- Bottom Brown Circle Decorative Accent -->
|
||
<div style="position: absolute; bottom: -20px; right: -25px; width: 100px; height: 100px; background-color: #D89C43; border-radius: 50%; z-index: 1;"></div>
|
||
<!-- Main Nandi Statue Image -->
|
||
<img src="/tncsc_deployment/static/src/img/about/tamil-heritage.webp" class="img-fluid shadow-lg position-relative" alt="Preserving Tamil Heritage Temple Nandi" style="max-height: 480px; width: 100%; object-fit: cover; border-radius: 8px; z-index: 2;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: 3 Feature Pillar Cards -->
|
||
<section class="py-5" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row g-4 justify-content-center">
|
||
<!-- Card 1: Discover Our Legacy -->
|
||
<div class="col-12 col-md-4 d-flex">
|
||
<div class="about-pillar-card w-100">
|
||
<div class="mb-4 d-flex align-items-center justify-content-center mx-auto" style="width: 72px; height: 72px; border-radius: 50%; border: 2px solid #D89C43; color: #D89C43;">
|
||
<i class="fa fa-handshake-o fs-2"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0A1938; font-size: 1.3rem;">
|
||
Discover Our Legacy
|
||
</h4>
|
||
<p class="small mb-0" style="color: #526581; font-size: 0.95rem; line-height: 1.7;">
|
||
We are Canada's leading Tamil cultural organization, built by and for the community. Discover our journey, our values, and the people involved.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2: Unity & Empowerment (Highlighted Gold Border) -->
|
||
<div class="col-12 col-md-4 d-flex">
|
||
<div class="about-pillar-card highlight-card w-100">
|
||
<div class="mb-4 d-flex align-items-center justify-content-center mx-auto" style="width: 72px; height: 72px; color: #D89C43;">
|
||
<i class="fa fa-group fs-1"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0A1938; font-size: 1.3rem;">
|
||
Unity & empowerment
|
||
</h4>
|
||
<p class="small mb-0" style="color: #526581; font-size: 0.95rem; line-height: 1.7;">
|
||
From youth mentorship to Pongal festivals, from Tamil classes to senior support - TNCSC brings culture, connection, and care to Tamil families across Canada.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3: Join the TNCSC Family -->
|
||
<div class="col-12 col-md-4 d-flex">
|
||
<div class="about-pillar-card w-100">
|
||
<div class="mb-4 d-flex align-items-center justify-content-center mx-auto" style="width: 72px; height: 72px; border-radius: 50%; border: 2px solid #D89C43; color: #D89C43;">
|
||
<i class="fa fa-users fs-2"></i>
|
||
</div>
|
||
<h4 class="fw-bold mb-3" style="color: #0A1938; font-size: 1.3rem;">
|
||
Join the TNCSC Family
|
||
</h4>
|
||
<p class="small mb-0" style="color: #526581; font-size: 0.95rem; line-height: 1.7;">
|
||
Become part of our growing community! Choose your membership plan and start participating in events and cultural celebrations today.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_about" model="website.page">
|
||
<field name="url">/about</field>
|
||
<field name="view_id" ref="view_page_about"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- About / Tamil Nadu -->
|
||
<record id="view_page_tamil_nadu" model="ir.ui.view">
|
||
<field name="name">TNCSC Tamil Nadu</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_tamil_nadu</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_tamil_nadu">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/tamil_nadu/tamilnadu-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
.tncsc-hover-lift {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.tncsc-hover-lift:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuTamilNadu {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuTamilNadu" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuTamilNadu">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link active">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Tamil Nadu</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Tamil Nadu</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Tamil Description & Temple Shrine Image -->
|
||
<section class="py-5 my-2" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: Temple Shrine Photo -->
|
||
<div class="col-lg-6 text-center tncsc-animate">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_nadu/tamilnadu-1.webp" class="img-fluid shadow-lg tncsc-hover-lift" alt="Tamil Nadu Temple Shrine" style="width: 100%; max-height: 540px; object-fit: cover; border-radius: 28px;"/>
|
||
</div>
|
||
|
||
<!-- Right Column: Tamil Text Copy -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<h2 class="fw-bold mb-3" style="color: #0A1938; font-size: 3.4rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
தமிழ்நாடு
|
||
</h2>
|
||
<p class="lead mb-4 fw-semibold" style="color: #4F75E3; font-size: 1.15rem; line-height: 1.6;">
|
||
தமிழ்நாடு — தமிழர்களின் ஆன்மாவும் அடையாளமும்!
|
||
</p>
|
||
<div style="color: #526581; font-size: 1.03rem; line-height: 1.85;">
|
||
<p class="mb-3">
|
||
இது ஆயிரக்கணக்கான ஆண்டுகள் பழமை வாய்ந்த வரலாற்றைக் கொண்ட நிலம். மரபு, பண்பாடு, கலை, இலக்கியம் – அனைத்தும் இணைந்து வாழும் ஒற்றுமையின் மண் இதுவாகும். சங்க இலக்கிய காலம் முதலே தன்னுடைய சிறப்பான நாகரிகத்தை உருவாக்கிய தமிழகம், இன்று வரை அந்த மரபுகளை பெருமையுடன் தாங்கி நிற்கிறது.
|
||
</p>
|
||
<p class="mb-0">
|
||
பழமையான கோவில்கள், சிற்பங்கள், கலைமிகு கட்டிடங்கள் ஒவ்வொன்றும் தமிழின் வரலாற்றையும் தெய்வீக கலைச் சிறப்பையும் வெளிப்படுத்துகின்றன. இந்திய துணைக்கண்டத்தின் தென்மேற்குத் திசையில் அமைந்துள்ள தமிழ்நாடு, அழகான கடற்கரை வரிசைகளால் உலகப் புகழ்பெற்ற கோரமண்டல் கரையை கொண்டுள்ளது. சூரியன் உதிக்கும் வங்காள விரிகுடா கரையில், தென்னை மரங்களும் கடற்காற்றின் மிதமான இசையும் சேர்ந்து இயற்கையின் ஓவியத்தை வரைகின்றன. மணற்கரையில் விளையாடும் நண்டுகள், வானில் வட்டமிடும் கடல் காளைகள், அலைகளுடன் பாயும் மீன்பிடி படகுகள் இவை அனைத்தும் தமிழ்நாட்டின் இயற்கை அழகின் உயிர் ஓவியங்கள். பாரம்பரியத்தையும் புதுமையையும் இணைத்துக் கொண்ட தமிழ்நாடு, ஒவ்வொரு அடியிலும் கலாச்சார நுணுக்கத்தையும் மனித நேயத்தையும் வெளிப்படுத்துகிறது. இங்கே கலை ஒரு வாழ்க்கைமுறை; தமிழ் ஒரு உணர்வு.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: English Description & Temple Carving Pillar Image -->
|
||
<section class="py-5" style="background-color: #ffffff; border-top: 1px solid #F1F5F9;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: English Text Copy -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3.2rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
Tamil Nadu
|
||
</h2>
|
||
<div style="color: #526581; font-size: 1.03rem; line-height: 1.8;">
|
||
<p class="mb-4">
|
||
Tamil Nadu is the land of the Tamils and it has a history that dates back to several thousand years. It is a land where traditions and culture blend and continue to live in harmony. The state abounds in monuments and temples that are ancient and each has its own story of religious, artistic and cultural accomplishment and specialty waiting to be heard.
|
||
</p>
|
||
<p class="mb-0">
|
||
Tamil Nadu is an enchanting and ancient Dravidian land, in the extreme south of peninsular India. Tamil Nadu has a long coastline that stretches nearly a 1000 kms. The Coromandel Coast, along the Bay of Bengal, boasts of many ideal locations for sun and surf. Golden sands of the beach are dotted with coconut palm and casuarinas groves. The sea washes ashore pebbles and shells and the gentle breeze sways the yachts and catamarans into the deeper waters of the sea and the waters form small dunes on the shore. Crabs play hide-and-seek by coming out of one burrow, and taking refuge in another. Sea gulls hover in the sky and then rest on the sails of the fishing boats. There are many more breathtaking sights that will please you and hold you spell bound in Tamil.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: Temple Pillar Sculpture Image -->
|
||
<div class="col-lg-6 text-center tncsc-animate">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_nadu/tamilnadu-2.webp" class="img-fluid shadow-lg tncsc-hover-lift" alt="Tamil Nadu Temple Relief Carvings" style="width: 100%; max-height: 520px; object-fit: cover; border-radius: 28px;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_tamil_nadu" model="website.page">
|
||
<field name="url">/about/tamil-nadu</field>
|
||
<field name="view_id" ref="view_page_tamil_nadu"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- About / Board of Directors -->
|
||
<record id="view_page_board" model="ir.ui.view">
|
||
<field name="name">TNCSC Board of Directors</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_board</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_board">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/board/board-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.board-card-img-wrap {
|
||
background-color: #E2E8F0;
|
||
border-radius: 36px 36px 12px 12px;
|
||
overflow: hidden;
|
||
height: 220px;
|
||
width: 100%;
|
||
max-width: 220px;
|
||
margin: 0 auto 16px auto;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
.tncsc-hover-lift {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.tncsc-hover-lift:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuBoard {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
.board-card-img-wrap {
|
||
height: 140px !important;
|
||
max-width: 140px !important;
|
||
border-radius: 20px 20px 12px 12px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuBoard" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuBoard">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link active">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Board Of Directors</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<a href="/about" class="text-white-50 text-decoration-none">About Us</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Board Of Directors</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Board Members Grid Section -->
|
||
<section class="py-5 my-3" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<t t-set="board_executives" t-value="[
|
||
{'name': 'Anand Babu Gurusamy', 'title': 'President', 'img': 'anand.webp'},
|
||
{'name': 'Rachel Daniel', 'title': 'Vice President', 'img': 'rachel.webp'},
|
||
]"/>
|
||
<t t-set="board_members" t-value="[
|
||
{'name': 'Murugan Sriramulu', 'title': 'Secretary', 'img': 'murugan.webp'},
|
||
{'name': 'Palanimurugan Palanichamy', 'title': 'Treasurer', 'img': 'palani.webp'},
|
||
{'name': 'Karunamoorthy Samu', 'title': 'Joint Secretary', 'img': 'karuna.webp'},
|
||
{'name': 'Nandhini Senthil Kumar', 'title': 'Joint Treasurer', 'img': 'nandhini.webp'},
|
||
{'name': 'Amirthavarshini Thirugnanasambandam', 'title': 'Director (Muthamizh Paadasaalai)', 'img': 'amirtha.webp'},
|
||
{'name': 'Ashraph Sulaiman', 'title': 'Director (IT Wing)', 'img': 'asraph.webp'},
|
||
{'name': 'Brindha Rajamanickam', 'title': 'Director (Muthamizh Paadasaalai)', 'img': 'brindha.webp'},
|
||
{'name': 'Mari Mutharasan', 'title': 'Director (Muthamizh Paadasaalai)', 'img': 'mari.webp'},
|
||
{'name': 'Shanmuga', 'title': 'Director (IT Wing)', 'img': 'shanmuga.webp'},
|
||
{'name': 'Sekar Karuppan', 'title': 'Director (IT Wing)', 'img': 'sekar.webp'},
|
||
]"/>
|
||
|
||
<!-- Executive Officers (Top Row Centered - President & VP) -->
|
||
<div class="row justify-content-center g-4 mb-5">
|
||
<t t-foreach="board_executives" t-as="member">
|
||
<div class="col-6 col-md-4 col-lg-3 text-center tncsc-animate">
|
||
<div class="board-card-img-wrap tncsc-hover-lift">
|
||
<img t-attf-src="/tncsc_deployment/static/src/img/board/#{member['img']}" class="w-100 h-100" style="object-fit: cover;" t-att-alt="member['name']"/>
|
||
</div>
|
||
<h5 class="fw-bold mb-1" style="color: #0A1938; font-size: 1.05rem;" t-out="member['name']"/>
|
||
<p class="fw-semibold small mb-0" style="color: #D89C43; font-size: 0.85rem;" t-out="member['title']"/>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
|
||
<!-- Board Members Grid (4 Columns) -->
|
||
<div class="row g-4 justify-content-center">
|
||
<t t-foreach="board_members" t-as="member">
|
||
<div class="col-6 col-md-4 col-lg-3 text-center mb-4 tncsc-animate">
|
||
<div class="board-card-img-wrap tncsc-hover-lift">
|
||
<img t-attf-src="/tncsc_deployment/static/src/img/board/#{member['img']}" class="w-100 h-100" style="object-fit: cover;" t-att-alt="member['name']"/>
|
||
</div>
|
||
<h5 class="fw-bold mb-1" style="color: #0A1938; font-size: 1.05rem;" t-out="member['name']"/>
|
||
<p class="fw-semibold small mb-0" style="color: #D89C43; font-size: 0.85rem;" t-out="member['title']"/>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_board" model="website.page">
|
||
<field name="url">/about/board-of-directors</field>
|
||
<field name="view_id" ref="view_page_board"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Membership hub -->
|
||
<!-- Membership Hub Page -->
|
||
<record id="view_page_membership" model="ir.ui.view">
|
||
<field name="name">TNCSC Membership</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_membership</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_membership">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/membership/member-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.membership-hub-card-img {
|
||
width: 100%;
|
||
height: 260px;
|
||
object-fit: cover;
|
||
border-radius: 0;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
.membership-hub-card:hover .membership-hub-card-img {
|
||
transform: scale(1.02);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuMembership {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
.membership-hub-card-img {
|
||
height: 180px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuMembership" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuMembership">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link active">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Membership</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Membership</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Membership Hub Cards Section -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row g-5 justify-content-start">
|
||
<!-- Card 1: Membership Benefits -->
|
||
<div class="col-12 col-md-5 col-lg-4 tncsc-animate">
|
||
<a href="/membership/benefits" class="text-decoration-none membership-hub-card d-block">
|
||
<div class="overflow-hidden mb-3" style="box-shadow: 0 8px 24px rgba(0,0,0,0.06);">
|
||
<img src="/tncsc_deployment/static/src/img/membership/membership-benefits.webp" class="membership-hub-card-img img-fluid" alt="Membership Benefits"/>
|
||
</div>
|
||
<h4 class="fw-bold text-center mt-3" style="color: #0A1938; font-size: 1.3rem;">
|
||
Membership Benefits
|
||
</h4>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Card 2: Membership Registration -->
|
||
<div class="col-12 col-md-5 col-lg-4 tncsc-animate">
|
||
<a href="/membership/registration" class="text-decoration-none membership-hub-card d-block">
|
||
<div class="overflow-hidden mb-3" style="box-shadow: 0 8px 24px rgba(0,0,0,0.06);">
|
||
<img src="/tncsc_deployment/static/src/img/membership/membership-registration.webp" class="membership-hub-card-img img-fluid" alt="Membership Registration"/>
|
||
</div>
|
||
<h4 class="fw-bold text-center mt-3" style="color: #0A1938; font-size: 1.3rem;">
|
||
Membership Registration
|
||
</h4>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_membership" model="website.page">
|
||
<field name="url">/membership</field>
|
||
<field name="view_id" ref="view_page_membership"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Membership benefits -->
|
||
<record id="view_page_membership_benefits" model="ir.ui.view">
|
||
<field name="name">TNCSC Membership Benefits</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_membership_benefits</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_membership_benefits">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/events/event-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuMembershipBenefits {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
h2.fw-bold {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
h2.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuMembershipBenefits" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuMembershipBenefits">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link active">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Membership Benefits</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Membership Benefits</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Intro (TNCSC Memberships) -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: Copy -->
|
||
<div class="col-lg-6">
|
||
<h2 class="fw-bold mb-3 tncsc-animate" style="color: #0A1938; font-size: 3.2rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
TNCSC Memberships
|
||
</h2>
|
||
<h3 class="h4 mb-4 fw-medium" style="color: #D89C43; line-height: 1.45;">
|
||
Join Hands to Keep Our Tamil Heritage Alive — Right Here in Canada!
|
||
</h3>
|
||
<p style="color: #64748B; font-size: 1.05rem; line-height: 1.7;" class="mb-3">
|
||
Becoming a member of Tamilnadu Cultural Society of Canada (TNCSC) is more than just signing up it's becoming part of a family that celebrates Tamil identity, language, and culture in every heartbeat.
|
||
</p>
|
||
<p style="color: #64748B; font-size: 1.05rem; line-height: 1.7;" class="mb-3">
|
||
When you join TNCSC, you connect with a community that believes in unity, heritage, and togetherness a home away from home where Tamil traditions flourish and friendships grow stronger every day.
|
||
</p>
|
||
<p style="color: #64748B; font-size: 1.05rem; line-height: 1.7;" class="mb-0">
|
||
Let’s keep our roots alive and pass them on proudly to the next generation.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Right Column: Hero Image with Circular Graphic Accents -->
|
||
<div class="col-lg-6 position-relative text-center tncsc-animate">
|
||
<div class="position-absolute rounded-circle" style="width: 70px; height: 70px; background-color: #F8C346; top: -20px; left: 15px; z-index: 1;"></div>
|
||
<div class="position-absolute rounded-circle" style="width: 110px; height: 110px; background-color: #D89C43; bottom: -20px; right: 0px; z-index: 1;"></div>
|
||
<img src="/tncsc_deployment/static/src/img/home/hero.webp" class="img-fluid position-relative shadow-lg rounded" alt="TNCSC Tamil Heritage Hands" style="z-index: 2; width: 100%; max-height: 480px; object-fit: cover; border: 4px solid #ffffff;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Membership Benefits Banner & 2 White Cards Grid -->
|
||
<section class="py-5" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/membership/membership-benefits-bg.webp') center/cover no-repeat; padding: 80px 0;">
|
||
<div class="container py-4">
|
||
<h2 class="display-3 fw-bold text-center text-white mb-5 tncsc-animate" style="font-size: 3.5rem;">Membership Benefits</h2>
|
||
|
||
<div class="row g-4">
|
||
<!-- Card 1 -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<div class="p-4 p-md-5 bg-white h-100 shadow-lg" style="border-radius: 8px;">
|
||
<ul class="list-unstyled mb-0" style="color: #64748B; font-size: 1.02rem; line-height: 1.75;">
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Experience the joy of celebrating Tamil festivals like Pongal, Tamil New Year, and Deepavali just the way we do back home. Your membership ensures that you and your family always stay close to our traditions, culture, and community.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Meet new friends, families, and professionals who share your values and heritage. TNCSC is a wonderful space to build lifelong friendships, share stories, and grow together as a Tamil-Canadian community.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Our community events bring together people from all walks of life — from entrepreneurs to IT professionals to artists. You'll find chances to collaborate, network, and even explore career or business opportunities through our growing member network.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-0">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Members' children get priority access to our Muthamizh Padasaalai, where they learn Tamil reading, writing, and speaking in an engaging way. They also get opportunities to perform in cultural programs, art competitions, and stage events helping them build confidence and cultural pride.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<div class="p-4 p-md-5 bg-white h-100 shadow-lg" style="border-radius: 8px;">
|
||
<ul class="list-unstyled mb-0" style="color: #64748B; font-size: 1.02rem; line-height: 1.75;">
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>We welcome every member to participate as a volunteer in TNCSC events — from festival celebrations to community outreach programs. You'll not only gain valuable volunteer hours and credits, but also experience the joy of serving your own community.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Enjoy free or discounted entry to select TNCSC programs, workshops, and cultural events. Members and their families also gain the right to vote and even contest in board elections, giving you a voice in shaping the future of our Tamil community in Canada.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>At TNCSC, we believe every member is part of our extended family. Together, we celebrate milestones, support one another, and create memories that our children will cherish for life.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>Your membership keeps Tamil culture alive, your involvement keeps our community strong, and your participation ensures that our next generation proudly says “I am Tamil, I belong.”</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-0">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span class="fw-semibold" style="color: #0A1938;">Join TNCSC Today – Be the Voice of Tamil Pride in Canada!</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Center Button -->
|
||
<div class="text-center mt-5">
|
||
<a href="/contact" class="btn-tncsc-gold py-3 px-5 fs-5">
|
||
<i class="fa fa-user-plus"></i> Become A Member
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_membership_benefits" model="website.page">
|
||
<field name="url">/membership/benefits</field>
|
||
<field name="view_id" ref="view_page_membership_benefits"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Membership / Registration Page -->
|
||
<record id="view_page_membership_registration" model="ir.ui.view">
|
||
<field name="name">TNCSC Membership Registration</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_membership_registration</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_membership_registration">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/membership/membership-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.registration-section {
|
||
background-color: #FAF5F5;
|
||
padding: 70px 0;
|
||
}
|
||
.registration-card {
|
||
background-color: #ffffff;
|
||
border-radius: 14px;
|
||
padding: 44px 32px 36px 32px;
|
||
position: relative;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
|
||
border: 1px solid #F1F5F9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
text-align: center;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
}
|
||
.registration-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
|
||
}
|
||
.registration-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -10px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: #FAF5F5;
|
||
transform: translateY(-50%);
|
||
}
|
||
.registration-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -10px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: #FAF5F5;
|
||
transform: translateY(-50%);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuMembershipRegistration {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuMembershipRegistration" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuMembershipRegistration">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link active">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Membership Registration</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Membership Registration</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
constant
|
||
<!-- Pricing Tiers Grid Section -->
|
||
<section class="registration-section">
|
||
<div class="container">
|
||
<div class="row g-4 justify-content-center">
|
||
<!-- Card 1: Annual/Family -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #E11D48; letter-spacing: 2px; font-size: 0.85rem;">ANNUAL/FAMILY</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">30</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
Includes member, his/her spouse and kids living in a the same address. *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2: Long-Term Membership -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #2563EB; letter-spacing: 2px; font-size: 0.85rem;">LONG-TERM MEMBERSHIP</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">250</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
Long term membership is valid for 10 years. *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3: Life Term Membership -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #D97706; letter-spacing: 2px; font-size: 0.85rem;">LIFE TERM MEMBERSHIP</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">500</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
Life term membership valid for full life time. *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4: Senior Annual Membership -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #E11D48; letter-spacing: 2px; font-size: 0.85rem;">SENIOR ANNUAL MEMBERSHIP</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">15</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
Should be over +65 years (Document may be requested to confirm) *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 5: Senior Life Term -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #2563EB; letter-spacing: 2px; font-size: 0.85rem;">SENIOR LIFE TERM</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">250</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
Life term membership for 60+ Seniors. (Document may be requested to confirm) *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 6: Student Annual Membership -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex tncsc-animate">
|
||
<div class="registration-card w-100">
|
||
<div>
|
||
<p class="fw-bold mb-3" style="color: #D97706; letter-spacing: 2px; font-size: 0.85rem;">STUDENT ANNUAL MEMBERSHIP</p>
|
||
<div class="d-flex align-items-baseline justify-content-center mb-4">
|
||
<span class="fw-bold fs-4 me-1" style="color: #0A1938; font-size: 1.5rem !important;">$</span>
|
||
<span class="fw-bolder display-2" style="color: #0A1938; font-size: 4.5rem; font-weight: 800; line-height: 1;">10</span>
|
||
</div>
|
||
<hr style="border-color: #E2E8F0; margin: 0 0 24px 0;"/>
|
||
<p class="small mb-4" style="color: #526581; font-size: 0.93rem; line-height: 1.6; min-height: 72px;">
|
||
For full time student. (Document may be requested to confirm) *Membership is subject to Board's approval.
|
||
</p>
|
||
</div>
|
||
<div class="mt-auto pt-2">
|
||
<a href="/contact" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> Sign Up
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_membership_registration" model="website.page">
|
||
<field name="url">/membership/registration</field>
|
||
<field name="view_id" ref="view_page_membership_registration"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Events Page -->
|
||
<record id="view_page_events" model="ir.ui.view">
|
||
<field name="name">TNCSC Events Page</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_events</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_events">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/events/event-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.event-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
max-width: 320px;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
}
|
||
.event-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
||
}
|
||
.event-card-img {
|
||
width: 100%;
|
||
height: 280px;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuEvent {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
.event-card-img {
|
||
height: 200px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuEvent" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuEvent">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link active">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Events</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Events</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Events List Grid Section -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row g-4">
|
||
<!-- Summer Picnic Event Card -->
|
||
<div class="col-12 col-md-6 col-lg-4 d-flex justify-content-start">
|
||
<div class="event-card text-center tncsc-animate">
|
||
<div class="mb-4">
|
||
<img src="/tncsc_deployment/static/src/img/events/summer-picnic.jpg" class="event-card-img" alt="TNCSC Summer Picnic 2026 Poster"/>
|
||
</div>
|
||
<h4 class="fw-bold mb-2" style="color: #0A1938; font-size: 1.25rem; line-height: 1.35;">
|
||
TNCSC's Summer Picnic 2026
|
||
</h4>
|
||
<p class="fw-bold mb-4" style="color: #E05263; font-size: 1.05rem;">
|
||
$0.00 – $30.00
|
||
</p>
|
||
<div>
|
||
<a href="/contact" class="btn-tncsc-gold px-4 py-2" style="border-radius: 4px;">
|
||
Register Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_events" model="website.page">
|
||
<field name="url">/event</field>
|
||
<field name="view_id" ref="view_page_events"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Dedicated Event Product Page: TNCSC's Summer Picnic 2026 -->
|
||
<record id="view_page_product_summer_picnic" model="ir.ui.view">
|
||
<field name="name">TNCSC Summer Picnic 2026 Product</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_product_summer_picnic</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_product_summer_picnic">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/events/event-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.ticket-qty-box {
|
||
background-color: #D89C43;
|
||
color: #ffffff;
|
||
width: 80px;
|
||
height: 48px;
|
||
border-radius: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 14px;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
user-select: none;
|
||
}
|
||
.btn-add-to-cart {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 700;
|
||
font-size: 1.05rem;
|
||
padding: 14px 44px;
|
||
border-radius: 30px;
|
||
border: none;
|
||
display: inline-block;
|
||
text-decoration: none !important;
|
||
box-shadow: 0 6px 18px rgba(216, 156, 67, 0.35);
|
||
transition: all 0.25s ease;
|
||
}
|
||
.btn-add-to-cart:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(216, 156, 67, 0.45);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link active">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</div>
|
||
<div>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">TNCSC's Summer Picnic 2026</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white-50">Products</span>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">TNCSC's Summer Picnic 2026</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Event Detail / Ticket Purchase Section -->
|
||
<section class="py-5 my-3" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row g-5 align-items-start">
|
||
<!-- Left Column: Event Poster Flyer -->
|
||
<div class="col-lg-5 text-center text-lg-start">
|
||
<img src="/tncsc_deployment/static/src/img/events/summer-picnic.jpg" class="img-fluid shadow-lg rounded" alt="TNCSC Summer Picnic 2026 Poster" style="width: 100%; max-width: 480px; border-radius: 8px;"/>
|
||
</div>
|
||
|
||
<!-- Right Column: Ticket Tier Options -->
|
||
<div class="col-lg-7">
|
||
<p class="fw-bold mb-2" style="color: #6366F1; letter-spacing: 1px; font-size: 0.95rem;">
|
||
Event Ticket
|
||
</p>
|
||
<h2 class="fw-bold mb-3" style="color: #0A1938; font-size: 2.8rem; font-family: var(--community-heading-font, sans-serif);">
|
||
TNCSC's Summer Picnic 2026
|
||
</h2>
|
||
<p class="fw-bold mb-4" style="color: #CBD5E1; font-size: 2.2rem;">
|
||
$0.00 – $30.00
|
||
</p>
|
||
|
||
<hr style="border-color: #F1F5F9; margin: 30px 0;"/>
|
||
|
||
<!-- Ticket Option Rows -->
|
||
<div class="d-flex flex-column gap-4 mb-4">
|
||
<!-- Ticket 1 -->
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="ticket-qty-box">
|
||
<span>0</span>
|
||
<span style="font-size: 0.75rem; cursor: pointer;">▲<br/>▼</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #E05263;">Summer Picnic Kids (Age 6-12)</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #3B82F6;">$17.00</span>
|
||
</div>
|
||
|
||
<!-- Ticket 2 -->
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="ticket-qty-box">
|
||
<span>0</span>
|
||
<span style="font-size: 0.75rem; cursor: pointer;">▲<br/>▼</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #E05263;">Summer Picnic Kids (Age 2-5)</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #3B82F6;">$7.00</span>
|
||
</div>
|
||
|
||
<!-- Ticket 3 -->
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="ticket-qty-box">
|
||
<span>0</span>
|
||
<span style="font-size: 0.75rem; cursor: pointer;">▲<br/>▼</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #E05263;">Summer Picnic Kids (Age <2)</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #3B82F6;">$0.00</span>
|
||
</div>
|
||
|
||
<!-- Ticket 4 -->
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="ticket-qty-box">
|
||
<span>0</span>
|
||
<span style="font-size: 0.75rem; cursor: pointer;">▲<br/>▼</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #E05263;">Summer Picnic Non-Members Adult</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #3B82F6;">$30.00</span>
|
||
</div>
|
||
|
||
<!-- Ticket 5 -->
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="ticket-qty-box">
|
||
<span>0</span>
|
||
<span style="font-size: 0.75rem; cursor: pointer;">▲<br/>▼</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #E05263;">Summer Picnic Members Adult</span>
|
||
</div>
|
||
<span class="fw-bold fs-6" style="color: #3B82F6;">$25.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<hr style="border-color: #F1F5F9; margin: 30px 0;"/>
|
||
|
||
<!-- Add to Cart CTA Button -->
|
||
<div class="text-center text-lg-start mt-4">
|
||
<a href="/contact" class="btn-add-to-cart">
|
||
Add To Cart
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_product_summer_picnic" model="website.page">
|
||
<field name="url">/product/tncsc-summer-picnic-2026</field>
|
||
<field name="view_id" ref="view_page_product_summer_picnic"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Tamil School / Tamil Class -->
|
||
<!-- Tamil School / Tamil Class -->
|
||
<record id="view_page_tamil_school" model="ir.ui.view">
|
||
<field name="name">TNCSC Tamil School</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_tamil_school</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_tamil_school">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/tamil_class/tamil-class-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuTamilClass {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuTamilClass" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuTamilClass">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link active">Tamil Class</a>
|
||
<a href="/contact" class="nav-link">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Tamil Class</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Tamil Class</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content Section: Tamil Class / Muhtamil Paadasaalai matching shared flyer layout -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: Poster Image with Yellow Graphic Circle Accent -->
|
||
<div class="col-lg-5 position-relative text-center tncsc-animate">
|
||
<div class="position-absolute rounded-circle" style="width: 76px; height: 76px; background-color: #F8C346; top: 70px; left: -25px; z-index: 1;"></div>
|
||
<img src="/tncsc_deployment/static/src/img/tamil_class/tamil_class_flyer.webp" class="img-fluid position-relative shadow-lg rounded" alt="முத்தமிழ் பாடசாலை - Tamil Class Admissions 2026-2027" style="z-index: 2; border: 1px solid rgba(0,0,0,0.08); max-width: 440px; width: 100%;"/>
|
||
</div>
|
||
|
||
<!-- Right Column: Tamil Text Content & Registration CTA -->
|
||
<div class="col-lg-7 tncsc-animate" style="transition-delay: 0.2s;">
|
||
<span class="d-block mb-3 fw-semibold" style="color: #4F75E3; letter-spacing: 2px; font-size: 1.05rem;">
|
||
தமிழ்நாடு கலாச்சார சங்கம் - கனடா
|
||
</span>
|
||
|
||
<h2 class="fw-bold mb-1" style="color: #0A1938; font-size: 3.4rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
முத்தமிழ்
|
||
</h2>
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3.4rem; line-height: 1.1; letter-spacing: 2px; font-family: var(--community-heading-font, sans-serif);">
|
||
பாடசாலை
|
||
</h2>
|
||
|
||
<div class="mb-4">
|
||
<a href="/school/register" class="btn-tncsc-gold py-3 px-4 fs-5" style="border-radius: 0;">
|
||
<i class="fa fa-envelope-o me-2"></i> தமிழ் வகுப்புகள் 2026 - 27 - மாணவர் பதிவு
|
||
</a>
|
||
</div>
|
||
|
||
<div style="color: #526581; font-size: 1.05rem; line-height: 1.85;">
|
||
<p class="mb-3">
|
||
தமிழ்மொழி, தமிழ்க் கலாச்சாரம், தமிழ் மரபு – இவை நம் அடையாளத்தின் உயிரும், நம் வாழ்வின் மூலாதாரமும் ஆகும். தமிழின் இனிமை, நம் நெஞ்சை வருடும் அதன் ஒலி, நம் வேர்களின் பெருமையை நினைவூட்டுகிறது. எங்கும் தமிழ் ஒலிக்க, எதிலும் தமிழ் மலர வேண்டும் என்பதே எங்கள் உயர்ந்த நோக்கம்.
|
||
</p>
|
||
<p class="mb-3">
|
||
நம் தாய்மொழி வழியாக நம் பண்பாடு, நம் மரபு, நம் உணர்வுகள் அனைத்தும் வெளிப்படுகின்றன. அந்த செழுமையான மரபை அடுத்த தலைமுறைக்கு கொண்டுசெல்லும் பொறுப்பு எங்களுடையது. இதற்காகவே தமிழ்நாடு கலாச்சார சங்கம் - கனடா, முத்தமிழ் பாடசாலை மூலமாக நம் மொழியின் ஒளியை ஒவ்வொரு இதயத்திலும் பரப்பி வருகிறது.
|
||
</p>
|
||
<p class="mb-0">
|
||
தமிழ் கற்க ஆவலாக இருக்கும் இளம் தலைமுறையினருக்கும், தமது பிள்ளைகளுக்குத் தமிழறை அறிமுகப்படுத்த விரும்பும் அன்புப் பெற்றோர்களுக்கும் எங்கள் மனமார்ந்த வாழ்த்துகள் மற்றும் பாராட்டுக்கள்!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: Heritage Bullets & 2x2 Temple Sculptures Grid -->
|
||
<section class="py-5" style="background-color: #ffffff; border-top: 1px solid #F3F4F6;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<!-- Left Column: 6 Gold Chevron Bullet Points & Registration CTA -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<ul class="list-unstyled mb-4" style="color: #64748B; font-size: 1.02rem; line-height: 1.75;">
|
||
<li class="d-flex align-items-start mb-3">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>முத்தமிழ் பாடசாலை 2013ஆம் ஆண்டிலிருந்து 4 வயது முதல் சிறுவர்கள், சிறுமிகளுக்கான தமிழ் மொழி வகுப்புகளை சிறப்பாக நடத்தி வருகிறது.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>பேசுதல், வாசித்தல், எழுதுதல் ஆகிய மூன்றிலும் தங்கள் திறனை வளர்த்துக்கொள்வதற்கான சூழலை மாணவர்களுக்கு நாங்கள் வழங்கி வருகிறோம்.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>நமது ஆசிரியர்கள் – தமிழகத்தைச் சேர்ந்த கல்வி அனுபவம் வாய்ந்தவர்களாவர். அவர்கள் தமிழ் எழுத்து, சொற்கள் மட்டுமல்லாது, நம் வரலாறு, பண்பாடு, மரபு ஆகியவற்றின் அழகையும் சிறப்பாகப் பகிர்ந்து வருகின்றனர்.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>முத்தமிழ் பாடசாலை, நமது குழந்தைகள் எளிதில் புரிந்து கற்கக்கூடிய வகையில், தமிழ்நாடு கல்வி முறையை அடிப்படையாகக் கொண்டு, தனது சொந்த பாடப்புத்தகங்களை உருவாக்கியுள்ளது.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span>இன்றே உங்கள் பிள்ளைகளுக்கு தமிழின் வேர்களை அறிமுகப்படுத்துங்கள்.</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-4">
|
||
<span class="fw-bold me-3 fs-5" style="color: #D89C43; line-height: 1;">»</span>
|
||
<span class="fw-semibold" style="color: #475569;">தமிழை நேசிப்போம், தமிழில் பேசுவோம், தமிழாக வாழ்வோம் அதுவே நம் அடையாளம், நம் பெருமை, நம் உயிர்.</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="pt-2">
|
||
<a href="/school/register" class="btn-tncsc-gold py-3 px-4 fs-5" style="border-radius: 0;">
|
||
<i class="fa fa-envelope-o me-2"></i> தமிழ் வகுப்புகள் 2026 - 27 - மாணவர் பதிவு
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: 2x2 Heritage Sculptures Grid -->
|
||
<div class="col-lg-6 tncsc-animate" style="transition-delay: 0.2s;">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_class/tamil_heritage_1.webp" class="img-fluid w-100 shadow-sm rounded" alt="Tamil Heritage Sculpture 1" style="height: 260px; object-fit: cover; border: 1px solid rgba(0,0,0,0.08);"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_class/tamil_heritage_2.webp" class="img-fluid w-100 shadow-sm rounded" alt="Tamil Heritage Sculpture 2" style="height: 260px; object-fit: cover; border: 1px solid rgba(0,0,0,0.08);"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_class/tamil_heritage_3.webp" class="img-fluid w-100 shadow-sm rounded" alt="Tamil Heritage Sculpture 3" style="height: 260px; object-fit: cover; border: 1px solid rgba(0,0,0,0.08);"/>
|
||
</div>
|
||
<div class="col-6">
|
||
<img src="/tncsc_deployment/static/src/img/tamil_class/tamil_heritage_4.webp" class="img-fluid w-100 shadow-sm rounded" alt="Tamil Heritage Sculpture 4" style="height: 260px; object-fit: cover; border: 1px solid rgba(0,0,0,0.08);"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_tamil_school" model="website.page">
|
||
<field name="url">/tamil-school</field>
|
||
<field name="view_id" ref="view_page_tamil_school"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Sponsors: tncsc.com's own Sponsors page is unmigrated WordPress
|
||
theme demo content (generic client-01..09 stock logos, dead links,
|
||
no real sponsor names) - left as a placeholder, deliberately not
|
||
linked from the main nav, until TNCSC provides real sponsor data. -->
|
||
<record id="view_page_sponsors" model="ir.ui.view">
|
||
<field name="name">TNCSC Sponsors</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_sponsors</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_sponsors">
|
||
<t t-call="website.layout">
|
||
<div class="container" style="margin-top: 40px; margin-bottom: 60px;">
|
||
<h1>Our Sponsors</h1>
|
||
<p>Placeholder content - sponsor logos and tiers to be added.</p>
|
||
<a href="/benefits" class="btn btn-outline-secondary">See Member Benefits</a>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_sponsors" model="website.page">
|
||
<field name="url">/sponsors</field>
|
||
<field name="view_id" ref="view_page_sponsors"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Contact -->
|
||
<record id="view_page_contact" model="ir.ui.view">
|
||
<field name="name">TNCSC Contact</field>
|
||
<field name="type">qweb</field>
|
||
<field name="key">tncsc_deployment.page_contact</field>
|
||
<field name="arch" type="xml">
|
||
<t t-name="tncsc_deployment.page_contact">
|
||
<t t-call="website.layout">
|
||
<div id="wrap">
|
||
<style>
|
||
.tncsc-top-header {
|
||
background-color: #120735;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
font-family: var(--community-heading-font, sans-serif);
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
color: #B8B2E6;
|
||
margin: 2px 0 0 0;
|
||
}
|
||
.tncsc-hero-container {
|
||
position: relative;
|
||
}
|
||
.tncsc-hero-nav {
|
||
background: transparent !important;
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
color: #ffffff !important;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
padding: 6px 16px !important;
|
||
opacity: 0.92;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
|
||
opacity: 1;
|
||
color: #F5A623 !important;
|
||
}
|
||
.tncsc-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tncsc-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
min-width: 230px;
|
||
padding: 12px 0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||
z-index: 1000;
|
||
text-align: left;
|
||
}
|
||
.tncsc-dropdown-menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
.tncsc-dropdown:hover .tncsc-dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
.tncsc-dropdown-item {
|
||
display: block;
|
||
padding: 10px 24px;
|
||
color: #5B6C8F !important;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
.tncsc-dropdown-item:hover {
|
||
color: #D89C43 !important;
|
||
background-color: #F8FAFC;
|
||
}
|
||
.tncsc-hero-nav .nav-link.active {
|
||
border-bottom: 2px solid #F5A623;
|
||
font-weight: 600;
|
||
}
|
||
.btn-tncsc-gold {
|
||
background-color: #D89C43;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
font-size: 0.92rem;
|
||
padding: 10px 24px;
|
||
position: relative;
|
||
border: none;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none !important;
|
||
transition: all 0.25s ease;
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.btn-tncsc-gold::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-top: 2px solid #ffffff;
|
||
border-right: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-bottom: 2px solid #ffffff;
|
||
border-left: 2px solid #ffffff;
|
||
}
|
||
.btn-tncsc-gold:hover {
|
||
background-color: #c48a35;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tncsc-inner-hero {
|
||
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/contact/contact-banner.webp') center/cover no-repeat;
|
||
padding: 140px 0 80px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.tncsc-contact-input {
|
||
border: 1px solid #E2E8F0;
|
||
border-radius: 4px;
|
||
padding: 14px 18px;
|
||
font-size: 0.98rem;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
.tncsc-contact-input:focus {
|
||
border-color: #D89C43;
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px rgba(216, 156, 67, 0.15);
|
||
}
|
||
#footer:not(.tncsc-custom-footer),
|
||
footer#bottom:not(.tncsc-custom-footer),
|
||
.o_footer,
|
||
.o_footer_copyright,
|
||
.s_footer,
|
||
#o_footer,
|
||
footer:not(.tncsc-custom-footer) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Animation Keyframes and Classes */
|
||
.tncsc-animate {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.tncsc-animate-visible {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* Mobile View Adjustments */
|
||
@media (max-width: 991px) {
|
||
.tncsc-hero-nav .container {
|
||
padding: 10px 20px;
|
||
}
|
||
#tncscMobileMenuContact {
|
||
background-color: rgba(18, 7, 53, 0.95);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
}
|
||
.tncsc-hero-nav nav {
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
gap: 15px !important;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.tncsc-top-header {
|
||
padding: 10px;
|
||
}
|
||
.tncsc-top-header .brand-title-ta {
|
||
font-size: 1.15rem;
|
||
}
|
||
.tncsc-top-header .brand-subtitle-en {
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-top-header img {
|
||
height: 44px !important;
|
||
margin-right: 12px !important;
|
||
}
|
||
.tncsc-hero-nav .nav-link {
|
||
padding: 6px 10px !important;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-tncsc-gold {
|
||
padding: 8px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.tncsc-custom-footer {
|
||
padding: 40px 15px 30px 15px !important;
|
||
}
|
||
.tncsc-custom-footer img {
|
||
height: 60px !important;
|
||
}
|
||
.tncsc-custom-footer .gap-3 {
|
||
flex-wrap: wrap;
|
||
gap: 10px !important;
|
||
}
|
||
.tncsc-inner-hero {
|
||
padding: 120px 0 50px 0 !important;
|
||
}
|
||
.tncsc-inner-hero h1.display-3 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
|
||
<div class="tncsc-top-header">
|
||
<div class="container d-flex align-items-center justify-content-center">
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
|
||
<div class="text-start">
|
||
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
|
||
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
|
||
<div class="tncsc-hero-container">
|
||
<!-- Transparent Floating Navbar -->
|
||
<div class="tncsc-hero-nav">
|
||
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
||
<!-- Mobile Toggle Button -->
|
||
<div class="w-100 d-flex justify-content-end d-lg-none">
|
||
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuContact" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Collapsible Menu -->
|
||
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuContact">
|
||
<nav class="d-flex align-items-center gap-1">
|
||
<a href="/" class="nav-link">Home</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/about" class="nav-link">About +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
|
||
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
|
||
</div>
|
||
</div>
|
||
<a href="/event" class="nav-link">Events</a>
|
||
<div class="tncsc-dropdown">
|
||
<a href="/membership" class="nav-link">Membership +</a>
|
||
<div class="tncsc-dropdown-menu">
|
||
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
|
||
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
|
||
</div>
|
||
</div>
|
||
<a href="/tamil-school" class="nav-link">Tamil Class</a>
|
||
<a href="/contact" class="nav-link active">Contact</a>
|
||
</nav>
|
||
<a href="/product/tncsc-summer-picnic-2026" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
|
||
<i class="fa fa-ticket"></i> View Event
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inner Hero Title & Breadcrumb -->
|
||
<div class="tncsc-inner-hero">
|
||
<div class="container">
|
||
<h1 class="display-3 fw-bold text-white mb-3 tncsc-animate tncsc-animate-visible" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Contact Us</h1>
|
||
<div class="fs-5 text-white-50 fw-medium">
|
||
<a href="/" class="text-white-50 text-decoration-none">Home</a>
|
||
<span class="mx-2 text-white-50">|</span>
|
||
<span class="text-white">Contact</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content Section: Form (Left) & Contact Details + Temple Shrine Photo (Right) -->
|
||
<section class="py-5 my-4" style="background-color: #ffffff;">
|
||
<div class="container py-4">
|
||
<div class="row g-5">
|
||
<!-- Left Column: Get In Touch Form -->
|
||
<div class="col-lg-6 tncsc-animate">
|
||
<span class="text-uppercase fw-semibold d-block mb-2" style="color: #4F75E3; letter-spacing: 1.8px; font-size: 0.9rem;">GET IN TOUCH</span>
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
We’d Love to Hear From You
|
||
</h2>
|
||
|
||
<section class="s_website_form" data-snippet="s_website_form">
|
||
<form id="contactus_form" action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
|
||
<input type="hidden" name="email_to" t-att-value="env.company.email"/>
|
||
|
||
<!-- Field 1: Name -->
|
||
<div class="mb-4 position-relative">
|
||
<input type="text" class="tncsc-contact-input" name="name" id="contact_name" placeholder="Enter your name" required="1"/>
|
||
<i class="fa fa-user-o position-absolute text-muted" style="right: 18px; top: 18px; font-size: 1.1rem; pointer-events: none;"></i>
|
||
</div>
|
||
|
||
<!-- Field 2: Email -->
|
||
<div class="mb-4 position-relative">
|
||
<input type="email" class="tncsc-contact-input" name="email_from" id="contact_email" placeholder="Enter your email" required="1"/>
|
||
<i class="fa fa-envelope-o position-absolute text-muted" style="right: 18px; top: 18px; font-size: 1.1rem; pointer-events: none;"></i>
|
||
</div>
|
||
|
||
<!-- Field 3: Message -->
|
||
<div class="mb-4 position-relative">
|
||
<textarea class="tncsc-contact-input" name="description" id="contact_description" rows="5" placeholder="Enter your message" required="1"/>
|
||
<i class="fa fa-pencil-square-o position-absolute text-muted" style="right: 18px; top: 18px; font-size: 1.1rem; pointer-events: none;"></i>
|
||
</div>
|
||
|
||
<!-- Field 4: Math Verification -->
|
||
<div class="mb-4" style="max-width: 280px;">
|
||
<label class="form-label text-muted small mb-1" for="contact_captcha">2+17=?</label>
|
||
<input type="text" class="tncsc-contact-input" id="contact_captcha" placeholder=""/>
|
||
</div>
|
||
|
||
<!-- Submit Button -->
|
||
<div>
|
||
<button type="submit" class="btn-tncsc-gold py-3 px-5 fs-6 me-3">
|
||
Submit Now
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Right Column: Here We Are Info Cards & Temple Photo -->
|
||
<div class="col-lg-6 tncsc-animate" style="transition-delay: 0.2s;">
|
||
<span class="text-uppercase fw-semibold d-block mb-2" style="color: #EC4899; letter-spacing: 1.8px; font-size: 0.9rem;">HERE WE ARE</span>
|
||
<h2 class="fw-bold mb-4" style="color: #0A1938; font-size: 3rem; line-height: 1.1; font-family: var(--community-heading-font, sans-serif);">
|
||
Visit / Call Us Anytime
|
||
</h2>
|
||
|
||
<!-- Info Card 1: Phone -->
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="d-flex align-items-center justify-content-center me-3 text-white shadow-sm" style="width: 54px; height: 54px; background-color: #F43F5E; border-radius: 4px; flex-shrink: 0;">
|
||
<i class="fa fa-phone fs-4"></i>
|
||
</div>
|
||
<div>
|
||
<h5 class="fw-bold mb-1" style="color: #0A1938; font-size: 1.15rem;">Phone Number</h5>
|
||
<p class="mb-0 text-muted" style="font-size: 0.98rem;">
|
||
<t t-if="env.company.phone">
|
||
<t t-out="env.company.phone"/>
|
||
</t>
|
||
<t t-else="">
|
||
+7 (800) 123 45 69
|
||
</t>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Card 2: Email -->
|
||
<div class="d-flex align-items-center mb-5">
|
||
<div class="d-flex align-items-center justify-content-center me-3 text-white shadow-sm" style="width: 54px; height: 54px; background-color: #06B6D4; border-radius: 4px; flex-shrink: 0;">
|
||
<i class="fa fa-envelope-o fs-4"></i>
|
||
</div>
|
||
<div>
|
||
<h5 class="fw-bold mb-1" style="color: #0A1938; font-size: 1.15rem;">Email Address</h5>
|
||
<p class="mb-0" style="font-size: 0.98rem;">
|
||
<a t-attf-href="mailto:#{env.company.email or 'support@tncsc.ca'}" class="text-decoration-none" style="color: #4F75E3;">
|
||
<t t-out="env.company.email or 'support@tncsc.ca'"/>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Temple Shrine Photo -->
|
||
<div>
|
||
<img src="/tncsc_deployment/static/src/img/contact/contact_temple_shrine.webp" class="img-fluid shadow-lg rounded" alt="Tamil Temple Shrine Sculpture" style="width: 100%; max-height: 480px; object-fit: cover; border-top-left-radius: 36px !important; border-top-right-radius: 36px !important;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Custom Dark Temple Footer Section -->
|
||
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
|
||
<div class="container position-relative">
|
||
<!-- Emblem Logo -->
|
||
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
|
||
|
||
<!-- Description Copy -->
|
||
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
|
||
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
|
||
</p>
|
||
|
||
<!-- Footer Navigation Links -->
|
||
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
|
||
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
|
||
<span class="text-white-50">|</span>
|
||
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
|
||
</div>
|
||
|
||
<!-- Horizontal Divider -->
|
||
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
|
||
|
||
<!-- Social Icons -->
|
||
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
|
||
<a href="https://facebook.com" target="_blank" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-facebook"></i>
|
||
</a>
|
||
<a href="https://youtube.com" target="_blank" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-youtube-play"></i>
|
||
</a>
|
||
<a href="https://instagram.com" target="_blank" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
|
||
<i class="fa fa-instagram"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Floating Back to Top Button -->
|
||
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fs-5"></i>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Simple Intersection Observer for scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('tncsc-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||
|
||
document.querySelectorAll('.tncsc-animate').forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</field>
|
||
</record>
|
||
<record id="page_contact" model="website.page">
|
||
<field name="url">/contact</field>
|
||
<field name="view_id" ref="view_page_contact"/>
|
||
<field name="is_published">True</field>
|
||
</record>
|
||
|
||
<!-- Main nav menu, matching tncsc.com's real structure:
|
||
Home / About (Tamil Nadu, Board Of Directors) / Events /
|
||
Membership (Membership Benefits, Membership Registration) /
|
||
Tamil Class / Contact.
|
||
Classifieds and the vendor Benefits directory are still fully
|
||
functional CommunityOS features - they're reachable from the
|
||
member portal (/my), just not on the public marketing nav, matching
|
||
tncsc.com's own structure. -->
|
||
<record id="menu_home" model="website.menu">
|
||
<field name="name">Home</field>
|
||
<field name="url">/</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">5</field>
|
||
</record>
|
||
<record id="menu_about" model="website.menu">
|
||
<field name="name">About</field>
|
||
<field name="url">/about</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">10</field>
|
||
</record>
|
||
<record id="menu_about_tamil_nadu" model="website.menu">
|
||
<field name="name">Tamil Nadu</field>
|
||
<field name="url">/about/tamil-nadu</field>
|
||
<field name="parent_id" ref="menu_about"/>
|
||
<field name="sequence">10</field>
|
||
</record>
|
||
<record id="menu_about_board" model="website.menu">
|
||
<field name="name">Board Of Directors</field>
|
||
<field name="url">/about/board-of-directors</field>
|
||
<field name="parent_id" ref="menu_about"/>
|
||
<field name="sequence">20</field>
|
||
</record>
|
||
<record id="menu_events" model="website.menu">
|
||
<field name="name">Events</field>
|
||
<field name="url">/event</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">20</field>
|
||
</record>
|
||
<record id="menu_membership" model="website.menu">
|
||
<field name="name">Membership</field>
|
||
<field name="url">/membership</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">30</field>
|
||
</record>
|
||
<record id="menu_membership_benefits" model="website.menu">
|
||
<field name="name">Membership Benefits</field>
|
||
<field name="url">/membership/benefits</field>
|
||
<field name="parent_id" ref="menu_membership"/>
|
||
<field name="sequence">10</field>
|
||
</record>
|
||
<record id="menu_membership_registration" model="website.menu">
|
||
<field name="name">Membership Registration</field>
|
||
<field name="url">/membership/registration</field>
|
||
<field name="parent_id" ref="menu_membership"/>
|
||
<field name="sequence">20</field>
|
||
</record>
|
||
<record id="menu_tamil_class" model="website.menu">
|
||
<field name="name">Tamil Class</field>
|
||
<field name="url">/tamil-school</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">40</field>
|
||
</record>
|
||
<record id="menu_contact" model="website.menu">
|
||
<field name="name">Contact</field>
|
||
<field name="url">/contact</field>
|
||
<field name="parent_id" ref="website.main_menu"/>
|
||
<field name="sequence">50</field>
|
||
</record>
|
||
</odoo>
|