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

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">
          <div className="flex w-full justify-center">
            <small className="text-[80px] mx-2 mt-[-30px] text-primary-300">
              "
            </small>
            <h1
              className={`font-black text-white lg:text-[60px] sm:text-[160px] xs:text-[140px] text-[40px] mb-0  space-x-6  text-center `}
              style={{ "word-spacing": "10px" }}
            >
              SIMPLE AND SMOOTH OPERATION
            </h1>
            <small className="text-[80px] mx-2 mt-[-30px] text-primary-300 ">
              "
            </small>
          </div>
          <p
            className={`text-gray-300 font-medium lg:text-[22px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[24px]  text-white-100  text-center  w-8/12 mx-auto  `}
          >
            A task and shift management solution for coffee shops that provides
            clear, trackable task management and monitoring of store operations.{" "}
          </p>

          <Link href="/app/login">
            <div className="justify-center flex mt-10">
              <button className="btn btn-primary rounded-full px-20 py-5 text-black text-lg font-bold ">
                Get started
              </button>
            </div>
          </Link>
        </div>
      </div>

      {/* <ComputersCanvas /> */}

      <div className="mt-[200px]">
        <p
          className={`opacity-60 text-white font-light lg:text-[20px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[24px]  text-white-100  text-center  w-8/12 mx-auto  `}
        >
          Brands that trust us and use BRIZ for their managing.
        </p>
        <div className=" p-5 relative overflow-hidden  w-10/12 mx-auto opacity-40 fade-mask">
          <MovingLogos />
        </div>
      </div>
    </section>
  );
};

export default Hero;