141 lines
6.8 KiB
TypeScript
141 lines
6.8 KiB
TypeScript
'use client';
|
||
|
||
import Countdown from '@/components/elements/Countdown';
|
||
import Link from 'next/link';
|
||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
|
||
|
||
import 'swiper/css';
|
||
import 'swiper/css/navigation';
|
||
import 'swiper/css/pagination';
|
||
|
||
export default function HomeHeroBanner() {
|
||
const slideData = [
|
||
// {
|
||
// title: 'World Music Events 2025',
|
||
// date: 'SERVING',
|
||
// location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
// bgImage: '/assets/img/home/banner/banner-1.webp',
|
||
// image: '/assets/img/all-images/hero/hero-img11.png',
|
||
// },
|
||
{
|
||
// title: 'Tamil Cultural Nite 2025',
|
||
// date: 'SERVING',
|
||
// location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/banner.webp',
|
||
// image: '/assets/img/all-images/hero/hero-img12.png',
|
||
// buttonText: "Book Now",
|
||
// buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
|
||
},
|
||
{
|
||
title: 'Tamil Cultural Nite 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/hero-banner-3.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
buttonText: "Book Now",
|
||
buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
|
||
},
|
||
{
|
||
title: "Tamil Cultural Nite 2025",
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/hero-banner-1.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
buttonText: "Book Now",
|
||
buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
|
||
},
|
||
{
|
||
title: "Tamil Cultural Nite 2025",
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/hero-banner-2.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
buttonText: "Book Now",
|
||
buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
|
||
},
|
||
|
||
{
|
||
title: 'Tamil Cultural Nite 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/hero-banner-5.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
buttonText: "Book Now",
|
||
buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Swiper
|
||
modules={[Autoplay, Navigation, Pagination]}
|
||
slidesPerView={1}
|
||
loop={true}
|
||
autoplay={{ delay: 5000 }}
|
||
navigation
|
||
// pagination={{ clickable: true }}
|
||
>
|
||
{slideData.map((slide, index) => (
|
||
<SwiperSlide key={index}>
|
||
<div
|
||
className="hero9-slider-area"
|
||
style={{
|
||
backgroundImage: `url(${slide.bgImage})`,
|
||
backgroundRepeat: 'no-repeat',
|
||
backgroundSize: 'cover',
|
||
backgroundPosition: 'center bottom',
|
||
}}
|
||
>
|
||
<div className="container" style={index === 0 ? { paddingTop: '180px' } : {}}>
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-7">
|
||
<div className="hero8-header">
|
||
{slide.title && (
|
||
<>
|
||
<h5>
|
||
Where Culture Meets the Beat
|
||
</h5>
|
||
<div className="space16" />
|
||
<h1 className="text-anime-style-3" dangerouslySetInnerHTML={{ __html: slide.title }}></h1>
|
||
</>
|
||
)}
|
||
<div className="space32" />
|
||
{slide.buttonLink && slide.buttonText && (
|
||
<div className="btn-area1">
|
||
<Link href={slide.buttonLink} className="vl-btn9">
|
||
<span className="demo">{slide.buttonText}</span>
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{(slide.date || slide.location) && (
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="timer-bg-area">
|
||
<div className="row d-flex justify-content-center align-items-center" >
|
||
<div className="col-lg-12 text-center d-flex justify-content-center align-items-center">
|
||
<div className="heading12">
|
||
{slide.date && <h3>{slide.date}</h3>}
|
||
{slide.location && (
|
||
<p>
|
||
<img src="/assets/img/icons/location1.svg" alt="" />
|
||
{slide.location}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
);
|
||
}
|