114 lines
4.4 KiB
JavaScript
114 lines
4.4 KiB
JavaScript
import Link from "next/link";
|
|
import Slider from "react-slick";
|
|
import { sliderProps } from "@/utility/sliderProps";
|
|
|
|
const HeroBanner = () => {
|
|
const heroSlides = [
|
|
{
|
|
title: "Welcome to Shivas Dosa Restaurant",
|
|
subtitle: "Start price Only $25",
|
|
description:
|
|
"Truly Authentic South Indian Cuisine",
|
|
image: "/assets/images/banner/4.webp",
|
|
btnText: "Know More"
|
|
},
|
|
{
|
|
title: "Quality Food and Dinning Experience",
|
|
subtitle: "Burger combo only $15",
|
|
description:
|
|
"Taking you back to Home",
|
|
image: "/assets/images/banner/2.webp",
|
|
btnText: "Dine in Menu"
|
|
},
|
|
{
|
|
title: "Weekend Specials",
|
|
subtitle: "Pizza deals from $10",
|
|
description:
|
|
"Our Extensive South Indian Menu",
|
|
image: "/assets/images/banner/3.webp",
|
|
btnText: "Dine in Menu"
|
|
},
|
|
{
|
|
title: "Real Taste, Real South Cuisine",
|
|
subtitle: "Pizza deals from $10",
|
|
description:
|
|
"More than 125 Menu Items - Special options for Veg, Non-veg, Vegan, Jain, Halal and Svami Narayan Foods",
|
|
image: "/assets/images/banner/1.webp",
|
|
btnText: "Dine in Menu"
|
|
},
|
|
{
|
|
title: "Undertake Customize Catering Orders",
|
|
subtitle: "Pizza deals from $10",
|
|
description:
|
|
"Customize Menu items as per Customer's Request",
|
|
image: "/assets/images/banner/5.webp",
|
|
btnText: "Contact Us"
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
className="hero-area hero-banner bgs-cover pt-180 rpt-150 pb-100 rel z-1"
|
|
style={{
|
|
backgroundImage: "url(/assets/images/background/hero.jpg)"
|
|
}}
|
|
>
|
|
<Slider {...sliderProps.heroBanner} className="hero-slider container">
|
|
{heroSlides.map((slide, idx) => (
|
|
<div className="row align-items-center d-flex" key={idx}>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="hero-content text-white"
|
|
data-aos="fade-left"
|
|
data-aos-duration={1500}
|
|
data-aos-offset={50}
|
|
>
|
|
{/* <span className="sub-title mb-35">
|
|
<i className="far fa-hamburger" /> {slide.subtitle}
|
|
</span> */}
|
|
<h1>{slide.title}</h1>
|
|
<p>{slide.description}</p>
|
|
<Link href="/menu" className="theme-btn">
|
|
View All Menu <i className="far fa-arrow-alt-right" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-lg-6"
|
|
data-aos="fade-right"
|
|
data-aos-duration={1500}
|
|
data-aos-offset={50}
|
|
>
|
|
<div className="hero-images rmt-60">
|
|
<img src={slide.image} alt="Hero" />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
|
|
{/* Static Background Shapes */}
|
|
<div className="hero-shapes">
|
|
{/* <div className="shape one">
|
|
<img src="/assets/images/shapes/hero-shape1.png" alt="Shape 1" />
|
|
</div> */}
|
|
<div className="shape two">
|
|
<img src="/assets/images/shapes/hero-shape2.png" alt="Shape 2" />
|
|
</div>
|
|
<div className="shape three">
|
|
<img src="/assets/images/shapes/hero-shape3.png" alt="Shape 3" />
|
|
</div>
|
|
<div className="shape four">
|
|
<img src="/assets/images/shapes/hero-shape4.png" alt="Shape 4" />
|
|
</div>
|
|
<div className="shape five">
|
|
<img src="/assets/images/shapes/hero-shape5.png" alt="Shape 5" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HeroBanner;
|