 
import { Link } from "react-router-dom";
import { Swiper, SwiperSlide } from "swiper/react";
// import Swiper css
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation } from "swiper/modules";




 

export default function ProjectHomeOne() {
  return (
    <section className="mtproject__area pt-120 pb-70 p-relative fix" id="mtproject__onepage">
      <div className="container-fluid px-0">
        <div className="mt-section-content mb-50 text-center">
          <h2 className="mt-section-title">We elevate your brand’s <br />
            barding derations</h2>
        </div>
        <Swiper
          slidesPerView={5}
          spaceBetween={24}
          navigation={{
            nextEl: ".mtproject-arrow-left",
            prevEl: ".mtproject-arrow-right",
          }}
          modules={[Navigation]}
          breakpoints={{
            1781: {
              slidesPerView: 4,
            },
            1199: {
              slidesPerView: 4,
            },
            991: {
              slidesPerView: 3,
            },
            767: {
              slidesPerView: 2,
            },
            550: {
              slidesPerView: 2,
            },
            0: {
              slidesPerView: 1,
            },
          }}
          className="swiper mtproject__active">

          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-1.jpg" alt="" />
                  <h3 className="mtproject__rotade">Crafting Iconic Spaces</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Crafting Iconic Spaces</Link>
                  </h3>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-2.jpg" alt="" />
                  <h3 className="mtproject__rotade">Innovative Designs</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Innovative Designs</Link></h3>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-3.jpg" alt="" />
                  <h3 className="mtproject__rotade">Architectural Excellence</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Architectural Excellence</Link>
                  </h3>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-4.jpg" alt="" />
                  <h3 className="mtproject__rotade">Innovative Designs</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Innovative Designs</Link></h3>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-3.jpg" alt="" />
                  <h3 className="mtproject__rotade">Crafting Iconic Spaces</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Crafting Iconic Spaces</Link>
                  </h3>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className="mtproject__wrapper p-relative">
              <div className="mtproject__thumb ">
                <Link to="/portfolio-details">
                  <img src="assets/img/project/project-1-2.jpg" alt="" />
                  <h3 className="mtproject__rotade">Pushing Boundaries</h3>
                </Link>
                <div className="mtproject__content">
                  <span>Architecture</span>
                  <h3 className="mtproject__title"><Link to="/portfolio-details">Pushing Boundaries</Link></h3>
                </div>
              </div>
            </div>
          </SwiperSlide>


        </Swiper>
      </div>
    </section>
  )
}
