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 SignUpToExperienceOurPlatform = () => {
  const router = useRouter();
  return (
    <>
      <section className="signUp-to-experience-our-platform-session">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-md-8">
              <motion.div variants={zoomIn(0.4)} initial={"false"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                <div className="signUp-to-experience-our-platform">
                  <div className="title">Sign Up to Triplyst Experiences</div>
                  <div className="disc">Triplyst Experience is the ultimate online destination for you to discover and explore tons of things to do in New York City</div>
                  <div className="">
                    <Button
                      variant="primary"
                      onClick={() => {
                        router.push("/signup/user");
                      }}
                    >
                      Sign up
                    </Button>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default SignUpToExperienceOurPlatform;