147 lines
3.8 KiB
JavaScript
147 lines
3.8 KiB
JavaScript
import Link from "next/link";
|
|
import Slider from "react-slick";
|
|
import { sliderProps } from "@/utility/sliderProps";
|
|
|
|
const menuItems = [
|
|
{
|
|
id: 1,
|
|
name: "Soups",
|
|
image: "/assets/images/home/popular-items/soups.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Appetizers",
|
|
image: "/assets/images/home/popular-items/veg-appetizer.webp",
|
|
badge: "",
|
|
|
|
},
|
|
|
|
{
|
|
id: 3,
|
|
name: "Idly",
|
|
image: "/assets/images/home/popular-items/idly.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Dosa",
|
|
image: "/assets/images/home/popular-items/dosa.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Uttappam",
|
|
image: "/assets/images/home/popular-items/uttapam.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "Poori & Parotta",
|
|
image: "/assets/images/home/popular-items/breads.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "Hakka Flavours",
|
|
image: "/assets/images/home/popular-items/hakka.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "Egg Delights",
|
|
image: "/assets/images/home/popular-items/egg.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "Veg Rice",
|
|
image: "/assets/images/home/popular-items/veg-rice.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 9,
|
|
name: "Biryani",
|
|
image: "/assets/images/home/popular-items/biryani.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 11,
|
|
name: "Curry",
|
|
image: "/assets/images/home/popular-items/curry.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 12,
|
|
name: "Desserts",
|
|
image: "/assets/images/home/popular-items/dessert.webp",
|
|
badge: "",
|
|
|
|
},
|
|
{
|
|
id: 12,
|
|
name: "Beverages",
|
|
image: "/assets/images/home/popular-items/beverages.webp",
|
|
badge: "",
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const MenuCategory = () => {
|
|
return (
|
|
<section className="pizza-area pt-100 rpb-70 pb-130 rpb-100 rel z-1">
|
|
<div className="container">
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-12">
|
|
<div
|
|
className="section-title text-center mb-50"
|
|
data-aos="fade-up"
|
|
data-aos-duration={1500}
|
|
data-aos-offset={50}
|
|
>
|
|
<span className="sub-title mb-5">popular item</span>
|
|
<h2>POPULAR DISHES</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Slider {...sliderProps.pizzaActive} className="pizza-active">
|
|
{menuItems.map((item, index) => (
|
|
<div
|
|
className="product-item"
|
|
key={item.id}
|
|
data-aos="fade-up"
|
|
data-aos-delay={50 * (index + 1)}
|
|
data-aos-duration={1500}
|
|
data-aos-offset={50}
|
|
>
|
|
<div className="image">
|
|
<img src={item.image} alt={item.name} />
|
|
{item.badge && <span className="pizza-badge">{item.badge}</span>}
|
|
</div>
|
|
<div className="content">
|
|
<h5>
|
|
{item.name}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default MenuCategory;
|