Untitled

import { PrimaryButton } from "./components/buttons";
import { InputComp } from "./components/inputs";






const SignupPage=()=>{
    return <div className="flex w-screen h-screen">
        <div className="w-[40%] bg-blue-700 flex justify-center items-center">
            <img src="slide1.svg"  className='w-[70%]' alt="" />
        </div>
        <div className="flex justify-start flex-col  w-[60%] p-5 px-8 gap-7 font-sans">
            <div>
               <p className="text-lg font-bold  text-gray-900">
               Company Logo
               </p>
            </div>

            <div className="flex justify-start flex-col gap-2">
                <p className="text-md font-semibold">
            Welcome Here !
                </p>
                <p className="text-sm">
                Create your account to get started with our service
                </p>
            </div>

            <div className="grid grid-cols-2 w-[90%] gap-5">
                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable className='text-xs'>Firm Name</lable>
                <input type="text" name="name" className="px-2 py-1 outline-blue-700   rounded-md border-[1px] border-gray-300"  />
                </div>

                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable  className='text-xs'>Last Name</lable>
                <input type="text" name="name" className="px-2 py-1 outline-blue-700   rounded-md border-[1px] border-gray-300"  />
                </div>

                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable  className='text-xs'>Email</lable>
                <input type="email" name="name" className="px-2 py-1 outline-blue-700   rounded-md border-[1px] border-gray-300"  />
                </div>

                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable  className='text-xs'>Phone Number</lable>
                <input type="text" name="name" className="px-2 py-1 outline-blue-700   rounded-md border-[1px] border-gray-300"  />
                </div>

                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable  className='text-xs'>Password</lable>
                <input type="password" name="name" className="px-2 py-1 outline-[1px] outline-blue-700   rounded-md border-[1px] border-gray-300 "  />
                </div>

                <div className="flex flex-col gap-2 font-sans text-sm text-gray-700 font-semibold">
                    <lable  className='text-xs'>Confirm Password</lable>
                <input type="password" name="name" className="px-2 py-1 outline-blue-700  rounded-md border-[1px] border-gray-300"  />
                </div>

            </div>
            <div className="flex gap-3 flex-col">
            <div className="flex justify-start items-center gap-2 ">

            <input type="checkbox" name="check1" id="one" /> <p className="font-sans text-xs text-gray-400">I agree to the <a href="#" className="text-blue-500 hover:underline">Terms of Service</a></p>
            </div>

            <div className="flex justify-start items-center gap-2 ">

            <input type="checkbox" name="check1" id="one" /> <p className="font-sans text-xs text-gray-400">I want to receive the <a href="#" className="text-blue-500 hover:underline">Newsletter</a></p>
            </div>
            </div>
            <div className="w-1/2">
            <PrimaryButton>Create Account</PrimaryButton>
            </div>
            <p className="text-sm font-semibold font-sans text-gray-500">
            Alredy have an account ? <a className="text-blue-500 hover:underline" href="#">Signin</a>
            </p>
        </div>
</div>
}


export default SignupPage;