import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Button } from "react-bootstrap";
import Image from "next/image.js";
const MissionVision = () => {
  return (
    <section className="mission-vision-session">
      <div className="container">
        <div className="row">
          <div className="col-md-8">
            <div className="row mb-3">
              <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">Let’s</div>
                      <h2>Make it easier for everyone to experience the world.</h2>
                    </div>
                  </motion.div>
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col-12">
                <div className="our-mission">
                  <div className="row mb-4">
                    <div className="col-2">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/our-mission.svg" />
                      </span>
                    </div>
                    <div className="col-10">
                      <div className="inner">
                        <div className="title">Our Mission</div>
                        <div className="disc">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud.{" "}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="row">
                    <div className="col-2">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/our-vision.svg" />
                      </span>
                    </div>
                    <div className="col-10">
                      <div className="inner">
                        <div className="title">Our Vision</div>
                        <div className="disc">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud.{" "}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-4">
            <div className="img-banner">
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/mission-vision-img.png" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MissionVision;