128 lines
5.9 KiB
TypeScript
128 lines
5.9 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 SINCE 1989',
|
||
// bgImage: '/assets/img/home/banner/banner-1.webp',
|
||
// image: '/assets/img/all-images/hero/hero-img11.png',
|
||
// },
|
||
{
|
||
title: 'Global DJ Tour 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/banner-2.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
},
|
||
{
|
||
title: 'Global DJ Tour 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/banner-3.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
},
|
||
{
|
||
title: 'Global DJ Tour 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/banner-4.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
},
|
||
{
|
||
title: 'Global DJ Tour 2025',
|
||
date: 'SERVING',
|
||
location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
|
||
bgImage: '/assets/img/home/banner/banner-5.webp',
|
||
image: '/assets/img/all-images/hero/hero-img12.png',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Swiper
|
||
modules={[Autoplay, Navigation, Pagination]}
|
||
slidesPerView={1}
|
||
loop={true}
|
||
autoplay={{ delay: 2000 }}
|
||
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">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-7">
|
||
<div className="hero8-header">
|
||
<h5>
|
||
{/* <img src="/assets/img/icons/sub-logo1.svg" alt="" /> */}
|
||
WE ARE COMING FOR
|
||
</h5>
|
||
<div className="space16" />
|
||
<h1 className="text-anime-style-3">{slide.title}</h1>
|
||
<div className="space32" />
|
||
<div className="btn-area1">
|
||
<Link href="/contact" className="vl-btn9">
|
||
<span className="demo">Buy Tickets Now!</span>
|
||
</Link>
|
||
{/* <Link href="/event-schedule" className="vl-btn9 btn2">
|
||
<span className="demo">Schedules</span>
|
||
</Link> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* <div className="col-lg-5">
|
||
<div className="img1">
|
||
<img src={slide.image} alt="" />
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="timer-bg-area">
|
||
<div className="row" >
|
||
{/* <div className="col-lg-7">
|
||
<div className="timer-btn-area">
|
||
<Countdown style={1} />
|
||
</div>
|
||
</div> */}
|
||
<div className="col-lg-12 text-center">
|
||
<div className="heading12">
|
||
<h3>{slide.date}</h3>
|
||
<div className="space16" />
|
||
<p>
|
||
<img src="/assets/img/icons/location1.svg" alt="" />
|
||
{slide.location}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
);
|
||
}
|