import { MdArrowOutward } from "react-icons/md";
import {motion} from "framer-motion"



const boxSlide = {
    initial:{width: 0},
    animate:{width: "150px",  transition:{ease: [0.76, 0, 0.24, 1], duration: 1}},
  };


const Hero = () => {
    
  return (
    <div data-scroll data-scroll-speed="-0.3" className="w-full h-[90vh] bg-[#F1F1F1] pt-1">
        <div className="home-text mt-48 pl-16">
            <div className="flex justify-between">
                <h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">We create</h1>
                <div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-4">
                    <p className="text-xl font-semibold mb-4">W.</p>
                    <p className="home-text-2 [writing-mode:sideways-lr] text-sm">Site of the Day</p>
                </div> 
            </div>
            <div className="flex gap-2 -mt-12 items-center">
                <motion.p className="bg-[#B5D252] w-[150px] h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
                <h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
            </div>
            <h1 className="uppercase text-[150px] tracking-tight font-bold leading-none -mt-6">presentations</h1>
        </div>
        <div className="border-t-[1px] mt-36 border-[#b1b1b1]">
            <div className="flex justify-between px-16 mt-5 text-[21px]">
                <p>For public and private companies</p>
                <p>From the first pitch to IPO</p>
                <div className="flex gap-2 items-center cursor-pointer">
                    <p className="uppercase border border-[#202020] py-1 px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out">start the project</p>
                    <span className="p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-xl"/></span>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Hero