import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import ban1 from "../../../assets/images/ban1.jpg";
import ban2 from "../../../assets/images/ban2.png";
import Image from "next/image";
import "swiper/css";

const HeroSection = () => {
  return (
    <div className="xs:px-3 lg:px-20 mt-10">
      <Swiper className="mySwiper ">
        <SwiperSlide>
          <div className="rounded-2xl overflow-hidden ">
            <Image
              src={ban1}
              className="object-cover xs:h-[200px] lg:h-auto "
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          {" "}
          <div className="rounded-2xl overflow-hidden">
            <Image
              src={ban2}
              className="object-cover xs:h-[200px] lg:h-auto "
            />
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
  );
};

export default HeroSection;
