373 lines
16 KiB
TypeScript
373 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import React, { useState } from "react";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Autoplay, Pagination } from "swiper/modules";
|
||
import "swiper/css";
|
||
import "swiper/css/pagination";
|
||
|
||
export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
|
||
|
||
const [mobileMenu, setMobileMenu] = useState(false);
|
||
|
||
return (
|
||
<>
|
||
<header>
|
||
|
||
<div className="header-top py-3" style={{ backgroundColor: '#000000ff' }}>
|
||
<div className="container-fluid">
|
||
<Swiper
|
||
loop={true}
|
||
spaceBetween={30}
|
||
slidesPerView={1}
|
||
speed={2000}
|
||
autoplay={{ delay: 5000, disableOnInteraction: false }}
|
||
modules={[Autoplay]}
|
||
className="mySwiper"
|
||
>
|
||
<SwiperSlide>
|
||
<div className="text-center" style={{ color: 'white' }}>
|
||
தமிழ் பண்பாட்டு சங்கம்
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="text-center" style={{ color: 'white' }}>
|
||
Tamil Culture Association
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="text-center" style={{ color: 'white' }}>
|
||
Association culturelle tamoule
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div
|
||
className={`header-area homepage1 header header-sticky d-none d-lg-block ${scroll ? 'sticky' : ''}`}
|
||
id="header"
|
||
style={{ background: "#000000ff", borderTop: "1px solid #cbc5c5ff" }}
|
||
>
|
||
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="header-elements">
|
||
<div className="site-logo">
|
||
<Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link>
|
||
</div>
|
||
<div className="main-menu">
|
||
<ul>
|
||
<li>
|
||
<Link href="/#">Home</Link>
|
||
{/* <div className="tp-submenu">
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="all-images-menu">
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img1.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/">Eventify-Homepage 01</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img2.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index2">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index2">Eventify-Homepage 02</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img3.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index3">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index3">Eventify-Homepage 03</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img4.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index4">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index4">Eventify-Homepage 04</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb" style={{ margin: 0 }}>
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img5.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index5">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index5">Eventify-Homepage 05</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="all-images-menu">
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img6.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index6">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index6">Eventify-Homepage 06</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img7.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index7">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index7">Eventify-Homepage 07</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img8.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index8">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index8">Eventify-Homepage 08</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb">
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img9.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index9">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index9">Eventify-Homepage 09</Link>
|
||
</div>
|
||
</div>
|
||
<div className="homemenu-thumb" style={{ margin: 0 }}>
|
||
<div className="img1">
|
||
<img src="/assets/img/all-images/demo/demo-img10.png" alt="" />
|
||
</div>
|
||
<div className="homemenu-btn">
|
||
<Link className="vl-btn1" href="/index10">View Demo </Link>
|
||
</div>
|
||
<div className="homemenu-text">
|
||
<Link href="/index10">Eventify-Homepage 10</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
</li>
|
||
{/* <li><Link href="/about">About</Link></li> */}
|
||
<li>
|
||
<Link href="/about">About <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/about/association">Association</Link></li>
|
||
<li><Link href="/about/mission">Mission</Link></li>
|
||
<li><Link href="/about/constitution">Constitution</Link></li>
|
||
<li><Link href="/about/committee">Committee</Link></li>
|
||
</ul>
|
||
</li>
|
||
<li className="dropdown">
|
||
<Link href="/tamil-culture">
|
||
Tamil Culture <i className="fa-solid fa-angle-down" />
|
||
</Link>
|
||
<ul className="dropdown-menu, dropdown-padding">
|
||
{/* Tamil Festivals */}
|
||
<li className="dropdown-submenu">
|
||
<Link href="/tamil-culture/tamil-festivals">Tamil Festivals <i className="fa-solid fa-angle-down" />
|
||
</Link>
|
||
<ul className="submenu">
|
||
<li><Link href="/tamil-culture/tamil-festivals/hindu-festivals">Hindu Festivals</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-festivals/muslim-festivals">Muslim Festivals</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-festivals/christian-festivals">Christian Festivals</Link></li>
|
||
</ul>
|
||
</li>
|
||
|
||
{/* Tamil Wedding & Custom */}
|
||
<li className="dropdown-submenu">
|
||
<Link href="/tamil-culture/tamil-wedding-custom">
|
||
Tamil Wedding & Custom <i className="fa-solid fa-angle-down" />
|
||
</Link>
|
||
<ul className="submenu">
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/hindu-wedding-rituals">Hindu Wedding Rituals</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/protestant-wedding">A Tamil Protestant Wedding</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/catholic-wedding">Tamil Catholic Wedding</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/city-style">Marriage – City Style</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/bridal-makeup">Bridal Make Up</Link></li>
|
||
<li><Link href="/tamil-culture/tamil-wedding-custom/story-of-saree">The Story Of The Saree</Link></li>
|
||
</ul>
|
||
</li>
|
||
|
||
{/* Tamil Language */}
|
||
<li>
|
||
<Link href="/tamil-culture/tamil-language">Tamil Language</Link>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/upcoming-event">Upcoming Event</Link></li>
|
||
<li><Link href="/photo-gallery">Photos Gallery</Link></li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<Link href="#">Registration <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/register/membership-2024">Membership - 2024</Link></li>
|
||
<li><Link href="/register/membership-2025">Membership - 2025</Link></li>
|
||
<li><Link href="/register/thai-pongal-2025">Thai Pongal</Link></li>
|
||
<li><Link href="/register/tamil-new-year">Tamil New Year</Link></li>
|
||
<li><Link href="/register/community-picnic">Community Picnic</Link></li>
|
||
<li><Link href="/register/sports-day">Sports Day</Link></li>
|
||
<li><Link href="/register/kalai-vizha">Kalai Vizha</Link></li>
|
||
<li><Link href="/register/christmas">Christmas & Year End</Link></li>
|
||
<li><Link href="/register/performance">Program Performance Registration</Link></li>
|
||
<li><Link href="/register/sponsor">Sponsor</Link></li>
|
||
<li><Link href="/register/registration-form">Whatsapp Form</Link></li>
|
||
<li><Link href="/register/volunteer">Volunteer</Link></li>
|
||
|
||
{/* <li><Link href="/register/thai-pongal">Thai Pongal</Link></li>
|
||
<li><Link href="/register/tamil-newyear">Tamil New Year</Link></li> */}
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
<Link href="/community">Community <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/community/recipes">Recipes</Link></li>
|
||
<li><Link href="/community/cricket-club">Cricket Club</Link></li>
|
||
<li><Link href="/community/badminton-club">Badminton Club</Link></li>
|
||
<li><Link href="/community/business-directory">Business Directory</Link></li>
|
||
<li><Link href="/community/tamil-school">Tamil School</Link></li>
|
||
<li><Link href="/community/global-relief-fund">Global Relief Fund</Link></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
{/* <li>
|
||
<Link href="/#">Speakers <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/speakers">Speakers</Link></li>
|
||
<li><Link href="/speakers-single">Speakers Details</Link></li>
|
||
</ul>
|
||
</li> */}
|
||
{/* <li>
|
||
<Link href="/#">Schedule <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/event">Our Event</Link></li>
|
||
<li><Link href="/event-schedule">Event Schedule</Link></li>
|
||
<li><Link href="/event-single">Event Details</Link></li>
|
||
</ul>
|
||
</li> */}
|
||
{/* <li>
|
||
<Link href="/#">Blogs <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/blog">Our Blog</Link></li>
|
||
<li><Link href="/blog-single">Blog Details</Link></li>
|
||
</ul>
|
||
</li> */}
|
||
|
||
{/* <li>
|
||
<Link href="/#">Pages <i className="fa-solid fa-angle-down" /></Link>
|
||
<ul className="dropdown-padding">
|
||
<li><Link href="/memories">Our Memories</Link></li>
|
||
<li><Link href="/pricing-plan">Pricing Plan</Link></li>
|
||
<li><Link href="/faq">FAQ,s</Link></li>
|
||
<li><Link href="/contact">Contact Us</Link></li>
|
||
</ul>
|
||
</li> */}
|
||
<li>
|
||
<Link href="/contact">Contact</Link>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="btn-area1" style={{ marginTop: '10px' }}>
|
||
<Link
|
||
href="/register/membership-2025"
|
||
className="vl-btn9"
|
||
style={{
|
||
fontSize: '18px',
|
||
padding: '13px 13px',
|
||
display: 'inline-block',
|
||
backgroundColor: '#ffde14',
|
||
color: 'black'
|
||
}}
|
||
>
|
||
<span className="demo">Membership</span>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="btn-area social-icons">
|
||
{/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
|
||
<a><img src="/assets/img/icons/search1.svg" alt="" /></a>
|
||
</div> */}
|
||
<ul>
|
||
<li>
|
||
<Link href="/#"><i className="fa-brands fa-facebook-f" /></Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/#"><i className="fa-brands fa-instagram" /></Link>
|
||
</li>
|
||
{/* <li>
|
||
<Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link>
|
||
</li> */}
|
||
</ul>
|
||
</div>
|
||
{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>
|
||
<div className="tx-search-close tx-close" onClick={handleSearch}><i className="fa-solid fa-xmark" /></div>
|
||
<div className="header-search-container">
|
||
<form role="search" className="search-form">
|
||
<input type="search" className="search-field" placeholder="Search …" name="s" />
|
||
<button type="submit" className="search-submit"><img src="/assets/img/icons/search1.svg" alt="" /></button>
|
||
</form>
|
||
</div>
|
||
</div> */}
|
||
{isSearch && <div className="body-overlay active" onClick={handleSearch} />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
</>
|
||
)
|
||
}
|