import React from "react";
import { useNavigate } from "react-router-dom";

const Landing = () => {

   const navigate = useNavigate()

   const handleNavigation = () => {
      navigate("/login")
   }

   return (
      <>
         <div className="w-full h-screen p-5 overflow-hidden">
            <div className="w-1/2 h-screen flex flex-col items-center justify-center relative top-10">
               <div className="w-full h-1/3 pl-10">
                  <p className="text-3xl font-bold text-(--text-maj)">School Fee Management System</p>
                  <p className="font-semibold text-(--text-main)">Using us is much more better</p>
               </div>
               <div className="w-full h-1/3 p-5 relative -top-20 flex flex-col pl-10 justify-evenly">
                  <p className="font-light text-(--text-main)">
                     This is the system which came to solve the fee payment issues which used traditional ways.
                     It is available to anyone who wants to use this. It is Free,
                     <span className="text-(--text-maj) font-semibold"> Welcome to the New World</span>
                  </p>

                  <button
                     onClick={handleNavigation}
                     className="w-50 h-12 bg-(--bg-maj) rounded-full font-semibold text-(--bg-main) hover:bg-transparent hover:border-2 hover:border-(--bg-maj) hover:text-(--text-main)">
                     Get Started
                  </button>
               </div>
            </div>
         </div>
      </>
   )
}

export default Landing