import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { useRouter } from "next/router.js";
const GiftAnExperience = () => {
  const router = useRouter();
  return (
    <>
      <section className="gift-an-experience-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="gift-an-experience-inner">
                <div className="row align-items-center">
                  <div className="col-md-6">
                  <motion.div variants={zoomIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                    <div className="content">
                      <div className="title">Gift An Experience For Any Occasion</div>
                      <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
                      <div>
                        <Button variant="primary" onClick={()=> {
                          router.push("/gift-card")
                        }}>Gift An Experience</Button>
                      </div>
                    </div>
                    </motion.div>
                  </div>
                  <div className="col-md-6">
                    <div className="img">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.webp" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default GiftAnExperience;