import { motion } from "framer-motion";
import Link from "next/link";

const Hero = () => {
  return (
    <section className={`relative w-full h-screen mx-auto`}>
      <div className="flex justify-center lg:pt-[300px] xs:pt-[200px] xs:ml-5 lg:ml-0">
        {/* <div className="flex flex-col justify-center items-center">
          <div className="w-5 h-5 rounded-full bg-primary-100" />
          <div className="w-1 h-[200px] violet-gradient" />
        </div> */}

        <div className=" ml-1 text-center">
          <h1
            className={`font-black text-white lg:text-[200px] sm:text-[160px] xs:text-[140px] text-[40px] mb-0  `}
          >
            Briz
          </h1>
          <p
            className={`text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[40px]  text-white-100  xs:mt-[-50px] lg:mt-[-77px]`}
          >
            <small className="text-[30px]">"</small> harmonious Routine
            Management <small className="text-[30px]">"</small>
          </p>

          <Link href="/login">
            <div className="justify-center flex mt-5">
              <button className="btn btn-primary rounded-full px-20 py-4 ">
                get start{" "}
              </button>
            </div>
          </Link>
        </div>
      </div>

      {/* <ComputersCanvas /> */}

      <div className="absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center">
        <a href="#about">
          <div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
            <motion.div
              animate={{
                y: [0, 24, 0],
              }}
              transition={{
                duration: 1.5,
                repeat: Infinity,
                repeatType: "loop",
              }}
              className="w-3 h-3 rounded-full bg-secondary mb-1"
            />
          </div>
        </a>
      </div>
    </section>
  );
};

export default Hero;