"use client";
import AboutUs from "@/components/AboutUs";
import Counter from "@/components/Counter";
import AboutSection from "@/components/home/AboutSection";
import BlogSection from "@/components/home/BlogSection";
import CategorySection from "@/components/home/CategorySection";
import DosaOfferSection from "@/components/home/DosaOfferSection";
import HeroBanner from "@/components/home/HeroBanner";
import MealsOfferSection from "@/components/home/MealsOfferScetion";
import HomeOfferCard from "@/components/home/OfferCard";
import PopularMenu from "@/components/home/PopularMenu";
import InstagramArea from "@/components/InstagramArea";
import OfferCard from "@/components/OfferCard";
import Testimonial from "@/components/Testimonial";
import { TestimonialSlider2 } from "@/components/TestimonialSlider";
import WellFoodLayout from "@/layout/WellFoodLayout";
import Link from "next/link";
const page = () => {
  return (
    <WellFoodLayout>
      {/* Hero Area Start */}
      <HeroBanner />
      {/* Hero Area End */}

      {/* About Us Area start */}
      <AboutSection />
      {/* About Us Area end */}

      {/* Offer Card Area start */}
      {/* <HomeOfferCard /> */}
      {/* Offer Card Area end */}

      {/* Counter Four Area start */}
      <div
        className="counter-area-four bgs-cover pt-100"
        style={{ backgroundImage: "url(/assets/images/home/bg-image.jpg)" }}
      >
        <div className="container">
          <div className="row justify-content-end">
            <div className="col-xl-7 col-lg-9">
              <div className="row no-gap">

                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item style-four bgc-secondary counter-text-wrap"
                    data-aos="fade-down"
                    data-aos-delay={50}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <span
                      className="count-text plus"
                      data-speed={3000}
                      data-stop={20}
                    >
                      <Counter end={20} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Experience Chefs</h6>
                  </div>
                </div>
                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item text-white style-four counter-text-wrap"
                    data-aos="fade-up"
                    data-aos-duration={1500}
                    data-aos-offset={50} style={{ backgroundColor: "#222222" }}
                  >
                    <span
                      className="count-text k-plus"
                      data-speed={3000}
                      data-stop={2}
                    >
                      <Counter end={2} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave-white.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Happy Customers</h6>
                  </div>
                </div>
                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item style-four bgc-primary counter-text-wrap"
                    data-aos="fade-down"
                    data-aos-delay={100}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <span
                      className="count-text plus"
                      data-speed={3000}
                      data-stop={40}
                    >
                      <Counter end={40} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Favorite Dishes</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Counter Four Area end */}

      {/* category start */}
      <CategorySection />
      {/* category end */}

      {/* Special Offer Area start */}
      <MealsOfferSection />
      {/* Special Offer Area end */}

      {/* Popular Menu Area start */}
      <PopularMenu />
      {/* Popular Menu Area end */}

      {/* Special Offer Area start */}
      <DosaOfferSection />
      {/* Special Offer Area end */}

      {/* Testimonials Two Area start */}
      <Testimonial />
      {/* Testimonials Two Area end */}


      {/* Blog Area start */}
      <BlogSection />
      {/* Blog Area end */}

      <InstagramArea />

    </WellFoodLayout>
  );
};
export default page;