import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
  return (
    <>
      <div className="page-title-area">
        <div className="banner-bg">
          <span className="image-container hide-on-mobile">
            <Image layout="fill" className="image img-fluid" alt="" src="/images/banner/contact-us.png" />
          </span>
          <span className="image-container hide-on-desktop">
            <Image layout="fill" className="image img-fluid" alt="" src="/images/banner/contact-us-m.png" />
          </span>
        </div>
        <div className="d-table">
          <div className="d-table-cell">
            <div className="page-title-item">
              <div className="container-fluid">
                <div className="row">
                  <div className="col-12">
                    <motion.div variants={fadeIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                      <h1>CONTACT US</h1>
                    </motion.div>
                  </div>
                </div>
              </div>
              {/* <ul>
              <li>
                <Link href={homePageUrl}>{homePageText}</Link>
              </li>
              <li className="active">{activePageText}</li>
            </ul> */}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default PageBanner;