Blame view

components/about-us/OurPartners.js 3.7 KB
Ravindra Kanojiya committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
const OurPartners = () => {
  const ourPartnersData = [
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    }
  ];
  return (
    <section className="our-partners-session">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="head-btn">
              <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                <div className="head01">
                  <div className="title">Our</div>
                  <h2>Partners</h2>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12 position-relative">
            <Swiper
              slidesPerView={1}
              loop={false}
              spaceBetween={10}
              navigation={{ nextEl: ".arrow-left-op", prevEl: ".arrow-right-op" }}
              breakpoints={{
                640: {
                  slidesPerView: 1,
                  spaceBetween: 20,
                  autoplay: true
                },
                768: {
                  slidesPerView: 4,
                  spaceBetween: 40
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 40
                }
              }}
              modules={[Navigation, Autoplay]}
              className="mySwiper01 mySwiper02"
            >
              {ourPartnersData &&
                ourPartnersData.map((data, index) => {
                  return (
                    <SwiperSlide>
                      <motion.div
                        variants={zoomIn("left", 0.3)}
                        initial={"hidden"}
                        whileInView={"show"}
                        viewport={{ once: false, amount: 0.2 }}
                      >
                        <div className="our-partners-item">
                          <div className="img">
                            <span className="image-container">
                              <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
                            </span>
                          </div>
                        </div>
                      </motion.div>
                    </SwiperSlide>
                  );
                })}
            </Swiper>
            <div className="swiper-nav">
              <div className="navbutton d-flex justify-content-between ">
                <button className="arrow-right-op arrow">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                  </span>
                </button>
                <button className="arrow-left-op arrow">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OurPartners;