139 lines
4.6 KiB
JavaScript
139 lines
4.6 KiB
JavaScript
import Link from "next/link";
|
|
import Slider from "react-slick";
|
|
import { sliderProps } from "@/utility/sliderProps";
|
|
|
|
const CategorySection = () => {
|
|
const CategoryData = [
|
|
{
|
|
id: 1,
|
|
title: "Soups & Salads",
|
|
image: "/assets/images/home/category/salads.webp",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Veg Appetizers",
|
|
image: "/assets/images/home/category/veg-appetizer.webp",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Non - Veg Appetizers",
|
|
image: "/assets/images/home/category/chicken-appetizer.webp",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Egg Delights",
|
|
image: "/assets/images/home/category/egg.webp",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "DOSA",
|
|
image: "/assets/images/home/category/dosa.webp",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "IDLY",
|
|
image: "/assets/images/home/category/idly.webp",
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "Uttapam",
|
|
image: "/assets/images/home/category/uthappam.webp",
|
|
},
|
|
{
|
|
id: 8,
|
|
title: "Indian Breads",
|
|
image: "/assets/images/home/category/indian-breads.webp",
|
|
},
|
|
{
|
|
id: 9,
|
|
title: "Tandoori Breads",
|
|
image: "/assets/images/home/category/tandoor-breads.webp",
|
|
},
|
|
{
|
|
id: 10,
|
|
title: "Hakka",
|
|
image: "/assets/images/home/category/hakka.webp",
|
|
},
|
|
{
|
|
id: 11,
|
|
title: "Veg Biryani",
|
|
image: "/assets/images/home/category/veg-biryani.webp",
|
|
},
|
|
{
|
|
id: 12,
|
|
title: "Veg Curry",
|
|
image: "/assets/images/home/category/veg-curry.webp",
|
|
},
|
|
{
|
|
id: 13,
|
|
title: "NON - Veg Biryani",
|
|
image: "/assets/images/home/category/nonveg-biryani.webp",
|
|
},
|
|
{
|
|
id: 14,
|
|
title: "NON - Veg Curry",
|
|
image: "/assets/images/home/category/nv-curry.webp",
|
|
},
|
|
{
|
|
id: 15,
|
|
title: "Deserts",
|
|
image: "/assets/images/home/category/dessert.webp",
|
|
},
|
|
{
|
|
id: 16,
|
|
title: "Beverages",
|
|
image: "/assets/images/home/category/beverages.webp",
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="related-products-area pt-130 rpt-100 pb-100 rpb-70 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">South Indian And North Indian</span>
|
|
<h2>POPULAR DISHES</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Slider {...sliderProps.categorySlider}>
|
|
{CategoryData.map((cat) => (
|
|
<div key={cat.id} className="px-2">
|
|
<div className="product-item-two">
|
|
<div className="image">
|
|
<img src={cat.image} alt={cat.title} />
|
|
</div>
|
|
<div className="content" style={{ backgroundColor: "#ffb936" }}>
|
|
<h5>{cat.title}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
<div className="testimonials-shapes">
|
|
<div className="shape one">
|
|
<img src="/assets/images/home/popular-menu/right.webp" alt="Shape" style={{ width: "50%" }} />
|
|
</div>
|
|
{/* <div className="shape two">
|
|
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
|
|
</div>
|
|
<div className="shape three">
|
|
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
|
|
</div> */}
|
|
<div className="shape four">
|
|
<img src="/assets/images/home/popular-menu/left.webp" alt="Shape" style={{ width: "50%" }} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CategorySection;
|