Untitled

import { Locate } from "lucide-react"
import { PrimaryButton, SecondaryButton } from "./components/buttons"


export const LoginPage=()=>{

const handleClick=()=>{
    alert("clicked")
}
return(
    <div className="w-screen h-screen  flex  m-0 overflow-hidden ">
       
        <section className="w-full md:w-1/2 lg:w-1/2 flex justify-center items-center flex-col ">
           <div className="lg:w-[65%] w-[85%] sm:w-[65%]  ">
           <span className="my-5 text-lg flex justify- items-start gap-1"> <Locate size={20} color="blue" className="mt-1" />Company Logo</span>
            <p className="mb-7 mt-2 text-2xl text-gray-500">Log in to your account</p>
            <div className="flex flex-col justify-center items-start w-full my2">
                <label className="text-gray-500 text-xs text-pretty font-semibold" htmlFor="email">Your Email</label>
                <input className="px-5 py-1 placeholder:text-gray-300 placeholder:text-sm border-gray-300 rounded-md my-2 border outline-none w-full shadow" id="email" type="email" placeholder="Ex.james@bond.com"/>
            </div>
            <div className="flex flex-col justify-center items-start w-full my-2">
            <label className="text-gray-500 text-xs text-pretty font-semibold "  htmlFor="pass">Your Password</label>
            <input className="px-5 py-1 placeholder:text-gray-300 placeholder:text-sm border-gray-300 rounded-md my-2 border outline-none w-full shadow " id='pass' type="password" placeholder="password"/>
            </div>
            <div className="py-4 flex justify-between items-center ">
               <div className="flex gap-2">
                <input id="check" type="checkbox" /><label className="font-semibold text-xs text-gray-500" htmlFor="check">Remember Me</label>
                </div> 
                <PrimaryButton onClick={handleClick} >Login</PrimaryButton>
                
               {/* <button className="px-6 py-2 text-center bg-blue-700 text-white text-sm rounded-md m-0 shadow">Login</button> */}
            </div>
            <div className="flex justify-start text-xs text-gray-400 flex-col gap-2">
                <p>Don't have an account? <span className="text-blue-600">Create an account</span></p>
                <span className="text-blue-600">Forgot password?</span>
            </div>
           </div>
           <div className="flex justify-end md:hidden -mb-20 -mt-24  object-cover h-[23rem] w-full">
           <img src="bg2.svg" alt=""  className="h-full w-full object-cover"/>
           </div>
        </section>
        
        
        <section className="w-1/2 hidden  md:flex lg:flex relative">
      <div className="absolute left-14 top-0 w-[70%] h-full flex gap-10 flex-col justify-center items-start"> 
         <p className="text-lg text-white text-pretty">Our website offers simple and intuitive navigation. With a clear menu and quick links, you can easily find what you need on any device.</p>
         <p className="text-lg text-white text-pretty">Enjoy interactive content like videos and infographics that make browsing fun and informative. Our site keeps you engaged with dynamic features.</p>
         <p className="text-lg text-white text-pretty">Experience speedy load times thanks to our optimized design. Our site runs smoothly and quickly, even during peak traffic.</p>
         <p className="text-lg text-white text-pretty">Your data is safe with us. We use encryption and regular updates to protect your information and ensure secure browsing.</p>
         

         </div>
            <img className="object-cover w-full h-full" src="bg.svg" alt="logo"  />
        </section>
        
    </div>
)
}