import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import Image from "next/image.js";
const Offers = () => {
  return (
    <section className="offers-session">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="offers-wrapper">
              <div className="row align-items-center">
                <div className="col-md-2">
                  <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">What Zango </div>
                        <h2>Offers</h2>
                      </div>
                    </motion.div>
                  </div>
                </div>
                <div className="col-md-4">
                  <div className="offers-session-item">
                    <div className="head">
                      <div className="img">
                        <span className="image-container">
                          <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
                        </span>
                      </div>
                      <div className="title">Instant confirmation</div>
                    </div>
                    <div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
                  </div>
                </div>
                <div className="col-md-3">
                  <div className="offers-session-item">
                    <div className="head">
                      <div className="img">
                        <span className="image-container">
                          <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
                        </span>
                      </div>
                      <div className="title">Instant confirmation</div>
                    </div>
                    <div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
                  </div>
                </div>
                <div className="col-md-3">
                  <div className="offers-session-item last">
                    <div className="head">
                      <div className="img">
                        <span className="image-container">
                          <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
                        </span>
                      </div>
                      <div className="title">Instant confirmation</div>
                    </div>
                    <div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Offers;