import { FaXTwitter } from "react-icons/fa6";
import { GoArrowUpRight } from "react-icons/go";


const Footer = () => {
  return (
    <>
    <div className='w-full h-[60vh] bg-[#0E0E0E] text-white px-14 flex flex-col justify-between'>
        <div className="flex justify-between mt-[8vh]">
            <div>
                <p className=' text-3xl'>Relax. We&apos;ve got you.</p>
                <button className="mt-[1.5vw] px-6 py-4 border text-xl rounded-lg hover:bg-[#FAF8F3] hover:text-black hover:transition-transform duration-500">Take a seat</button>
            </div>
            <div className="flex gap-[5vw] text-xl">
                <div className="flex flex-col ">
                    <a href="">Home</a>
                    <a href="">Work</a>
                    <a href="">About</a>
                    <a href="">Services & Models</a>
                    <a href="">Contact</a>
                </div>
                <div className="flex flex-col">
                    <a href="" className="flex"><FaXTwitter/><GoArrowUpRight className="text-md"/></a>
                    <a href="" className="flex">Instagram <GoArrowUpRight className="text-md"/></a>
                    <a href="" className="flex">LinkedIn <GoArrowUpRight className="text-md"/></a>
                </div>
            </div>
        </div>
        <div className="flex justify-between ">
            <div className="text-xl">
                <p>San Diego—California</p>
                <p>Paris—France </p>
            </div>
            <div className="flex gap-[5vw] text-xl">
                <div className="flex flex-col">biz@rejouice.com</div>
                <div className="flex flex-col">©2023 legal</div>
            </div>
        </div>
    </div>
    <div className="preloader w-full bg-[#0E0E0E] text-[#FAF8F3] flex justify-center items-center text-center">
        <h1 className="texts-container leading-none tracking-tighter font-semibold">
            <span className="text-[24vw]">r</span>
            <span className="text-[24vw]">e</span>
            <span className="text-[18vw]">J</span>
            <span className="text-[18vw]">O</span>
            <span className="text-[18vw]">U</span>
            <span className="text-[18vw]">I</span>
            <span className="text-[18vw]">C</span>
            <span className="text-[24vw]">e</span>
        </h1>
    </div>
    </>
  )
}

export default Footer