shivas-dosa/components/home/PopularMenu.js

import Link from "next/link";
import { sliderProps } from "@/utility/sliderProps";

const menuData = [
  [
    {
      name: "Veg Biryani",
      desc: "Aromatic premium and flavor ...",
      price: "$13.99",
      image: "/assets/images/home/popular-menu/veg-biryani.webp",
    },
    {
      name: "Rose Milk",
      desc: "Tamil Nadu style Specially blended...",
      price: "$6.99",
      image: "/assets/images/home/popular-menu/beverages.webp",
    },
    {
      name: "Special Curd Rice",
      desc: "Steamed rice mixed with...",
      price: "$11.99",
      image: "/assets/images/home/popular-menu/special-curd-rice.webp",
    },
    {
      name: "Kuzhi Paniyaram(7pcs)",
      desc: "Rice and Lentil Basils with...",
      price: "$11.99",
      image: "/assets/images/home/popular-menu/paniyaram.webp",
    },
    {
      name: "Pakoda Tamilnadu style",
      desc: "Loosely Fried Savory Lentil, Onion...",
      price: "$9.99",
      image: "/assets/images/home/popular-menu/onion-pakoda.webp",
    },
  ],
  [
    {
      name: "Cheese Omelette(SET OF 2PCS)",
      desc: "South Indian Style",
      price: "$11.99",
      image: "/assets/images/home/popular-menu/omelette.webp",
    },
    {
      name: "Medhu Vada(6PCS)",
      desc: "A Snackable Savory Donut ..",
      price: "$7.99",
      image: "/assets/images/home/popular-menu/medhu-vada.webp",
    },
    {
      name: "Jain Special Veg Masala Uttapam",
      desc: "Masala Uttapam spread with...",
      price: "$13.99",
      image: "/assets/images/home/popular-menu/jain-special-veg-masala-uthappam.webp",
    },
    {
      name: "Fish 65",
      desc: "Marinated and Deep Fried...",
      price: "$15.99",
      image: "/assets/images/home/popular-menu/fish-65.webp",
    },
    {
      name: "Chicken Fried Rice",
      desc: "Fried rice with a Combination...",
      price: "$14.99",
      image: "/assets/images/home/popular-menu/chicken-rice.webp",
    },
  ],
  [
    {
      name: "Chicken Noodles",
      desc: "Noodles with Local Flavor...",
      price: "$14.99",
      image: "/assets/images/home/popular-menu/chicken-noodles.webp",
    },
    {
      name: "Manchurian Chicken",
      desc: "Boneless Chicken Sauteed...",
      price: "$14.99",
      image: "/assets/images/home/popular-menu/chicken-manchurian-gravy.webp",
    },
    {
      name: "Ambur Chicken Biryani",
      desc: "Traditional Ambur-style chicken bir..",
      price: "$14.99",
      image: "/assets/images/home/popular-menu/chicken-biryani.webp",
    },
    {
      name: "Chicken 65",
      desc: "Boneless Chicken Chunks...",
      price: "$12.99",
      image: "/assets/images/home/popular-menu/chicken-65.webp",
    },
    {
      name: "Plain Dosa",
      desc: "The Original Plain Dosa",
      price: "$9.99",
      image: "/assets/images/home/popular-items/dosa.webp",
    },
  ],
];

const PopularMenu = () => {
  return (
    <section className="popular-menu-area rpt-85 pt-100 pb-100 rpb-70 rel z-1">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-xl-7 col-lg-8">
            <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 menu</span>
              <h2>From Authentic Indian Kitchen</h2>
            </div>
          </div>
        </div>

        <div className="row justify-content-center">
          {menuData.map((column, colIndex) => (
            <div
              key={colIndex}
              className={`col-xl-4 col-lg-6 z-${3 - colIndex}`}
              data-aos="fade-up"
              data-aos-delay={colIndex * 50}
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              {column.map((item, itemIndex) => (
                <div
                  className={`food-item ${itemIndex === column.length - 1 ? "mb-30" : ""}`}
                  key={itemIndex}
                >
                  <div className="content">
                    <div className="name-desc">
                      <h5>{item.name}</h5>
                      <p>{item.desc}</p>
                    </div>
                    <div className="price">
                      <span>{item.price}</span>
                    </div>
                  </div>
                  <div className="image">
                    <img src={item.image} alt={item.name} />
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default PopularMenu;