167 lines
9.1 KiB
JavaScript
167 lines
9.1 KiB
JavaScript
|
||
'use client'
|
||
import Link from "next/link"
|
||
import { Autoplay, Navigation, Pagination } from "swiper/modules"
|
||
import { Swiper, SwiperSlide } from "swiper/react"
|
||
|
||
const swiperOptions = {
|
||
modules: [Autoplay, Pagination, Navigation],
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
// autoplay: {
|
||
// delay: 2500,
|
||
// disableOnInteraction: false,
|
||
// },
|
||
loop: true,
|
||
|
||
// Navigation
|
||
navigation: {
|
||
nextEl: '.h1n',
|
||
prevEl: '.h1p',
|
||
},
|
||
|
||
// Pagination
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
|
||
|
||
|
||
}
|
||
|
||
export default function Banner() {
|
||
return (
|
||
<>
|
||
|
||
{/* Banner Section */}
|
||
<section className="banner-section">
|
||
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/main-slider/pattern-1.png)' }} ></div>
|
||
<Swiper {...swiperOptions} className="main-slider-carousel ">
|
||
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide">
|
||
<div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-1.webp)' }} ></div>
|
||
<div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-1.webp)' }} ></div>
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
|
||
{/* Content Column */}
|
||
<div className="content-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<h1><span className="first-letter">Sip. Savor. </span><span className="second-letter">Smile.</span></h1>
|
||
<div className="text"> Welcome to Sixty5Street - where every bite brings you the vibrant taste of global street food. From fiery wings and loaded fries to shawarma, dosas, and milkshakes, we serve crave-worthy meals made fresh, fast, and full of attitude.</div>
|
||
<div className="btns-box">
|
||
<Link href="#menu" className="theme-btn btn-style-one clearfix"><span className="icon"></span>View Menu</Link>
|
||
</div>
|
||
{/* <div className="icons-box">
|
||
<img src="/assets/images/main-slider/icons.png" alt="" />
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Image Column */}
|
||
<div className="image-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<div className="icon-layer-three"
|
||
// style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }}
|
||
></div>
|
||
<div className="image">
|
||
<img src="/assets/images/banner/banner-1.webp" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide">
|
||
<div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-2.webp)' }} ></div>
|
||
<div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-2.webp)' }} ></div>
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
|
||
{/* Content Column */}
|
||
<div className="content-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<h1><span className="first-letter">Big Street </span><span className="second-letter">Taste</span></h1>
|
||
<div className="text">Subtext:
|
||
Sink your teeth into juicy wings and loaded combos that bring the heat. Pick your style - BBQ, Buffalo, Garlic Parm, Hot Honey and level up your meal with fries and a pop.
|
||
</div>
|
||
<div className="btns-box">
|
||
<Link href="#menu" className="theme-btn btn-style-one clearfix"><span className="icon"></span>View Menu</Link>
|
||
</div>
|
||
{/* <div className="icons-box">
|
||
<img src="/assets/images/main-slider/icons.png" alt="" />
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Image Column */}
|
||
<div className="image-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<div className="icon-layer-three"
|
||
// style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }}
|
||
></div>
|
||
<div className="image">
|
||
<img src="/assets/images/banner/banner-2.webp" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
{/* Slide */}
|
||
<SwiperSlide>
|
||
<div className="slide style-two">
|
||
<div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-3.webp)' }} ></div>
|
||
<div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-3.webp)' }} ></div>
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
|
||
{/* Content Column */}
|
||
<div className="content-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<h1><span className="first-letter">Dosas to </span><span className="second-letter">Drinks</span></h1>
|
||
<div className="text"> Pair your favorite street bites with crispy snacks and creamy milkshakes. Whether it’s a cheesy dosa, spicy kothu, or a chilled Badham Royal shake, the street never tasted so good.</div>
|
||
<div className="btns-box">
|
||
<Link href="#menu" className="theme-btn btn-style-one clearfix"><span className="icon"></span>View Menu</Link>
|
||
</div>
|
||
{/* <div className="icons-box">
|
||
<img src="/assets/images/main-slider/icons.png" alt="" />
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Image Column */}
|
||
<div className="image-column col-lg-6 col-md-12 col-sm-12">
|
||
<div className="inner-column">
|
||
<div className="icon-layer-three"
|
||
// style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }}
|
||
></div>
|
||
<div className="image">
|
||
<img src="/assets/images/banner/banner-3.webp" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
|
||
</section>
|
||
{/* End Banner Section */}
|
||
|
||
</>
|
||
)
|
||
}
|