-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1151eca
commit 9784dad
Showing
3 changed files
with
141 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,72 @@ | ||
import React from "react"; | ||
import loginImage from '../../assets/Home-Page-Assets/CuriousConnect.png'; | ||
|
||
// please call the signin component which is available in "/frontend/src/Components/common/SignIn.jsx" | ||
|
||
// this is root page | ||
const SignInPage = () => { | ||
return <div>SignInPage</div>; | ||
const SignIn = () => { | ||
return ( | ||
<div className="flex justify-center w-full h-full "> | ||
<div | ||
className="md:w-full bg-cover bg-blue-700 sm:block hidden" | ||
style={{ | ||
backgroundImage: `url(${loginImage})`, | ||
}} | ||
></div> | ||
<div className="flex bg-white rounded-lg shadow-lg border w-[2000px] h-[630px] "> | ||
|
||
|
||
<div className=" w-full mt-40 p-8 lg:w-1/2 "> | ||
|
||
|
||
<div class="flex flex-col items-center"> | ||
<p className="text-2xl text-gray-600 md:text-right lg:text-right sm:text-center font-bold">Sign in With</p> | ||
|
||
<p className="text-s text-gray-600 md:text-right md:ml-28 lg:text-right sm:text-center p-1"> | ||
Not have an account yet? <span className="text-black-700 font-bold ">Sign In</span> | ||
</p> | ||
<button | ||
className="bg-purple-700 text-white lg:ml-44 md:ml-52 w-full border border-solid max-w-xs font-bold shadow-sm rounded-lg py-3 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"> | ||
<div class="bg-white p-2 rounded-full"> | ||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-6 h-6"> | ||
<path fill="none" d="M0 0h24v24H0V0z"/> | ||
<path fill="#282828" d="M21.3 6H2.7C1.78 6 1 6.78 1 7.7v8.6c0 .92.78 1.7 1.7 1.7h18.6c.92 0 1.7-.78 1.7-1.7V7.7c0-.92-.78-1.7-1.7-1.7zm.7 10c0 .38-.32.7-.7.7H2.7c-.38 0-.7-.32-.7-.7V7.7c0-.38.32-.7.7-.7h18.6c.38 0 .7.32.7.7v8.6z"/> | ||
<path fill="#282828" d="M12 11.58l8.19-6.56c.34-.27.81-.27 1.15 0 .39.31.4.85.02 1.18L13.15 12l8.25 6.59c.38.32.37.87-.02 1.18-.16.13-.36.19-.55.19-.22 0-.43-.08-.6-.24L12 13.58l-7.19 5.75c-.17.14-.38.22-.6.22-.19 0-.39-.06-.55-.19-.39-.31-.4-.85-.02-1.18L10.85 12l-8.25-6.59c-.38-.32-.37-.87.02-1.18.34-.27.81-.27 1.15 0L12 11.58z"/> | ||
</svg> | ||
</div> | ||
<span class="ml-4"> | ||
Continue with E-mail | ||
</span> | ||
</button> | ||
</div> | ||
|
||
<div class="flex flex-col items-center "> | ||
<button | ||
className=" lg:ml-44 md:ml-52 w-full border border-dashed max-w-xs font-bold shadow-sm rounded-lg py-3 bg-white text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"> | ||
<div class="bg-white p-2 rounded-full"> | ||
<svg class="w-4" viewBox="0 0 533.5 544.3"> | ||
<path | ||
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" | ||
fill="#4285f4" /> | ||
<path | ||
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" | ||
fill="#34a853" /> | ||
<path | ||
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" | ||
fill="#fbbc04" /> | ||
<path | ||
d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" | ||
fill="#ea4335" /> | ||
</svg> | ||
</div> | ||
<span class="ml-4"> | ||
Sign In with Google | ||
</span> | ||
</button> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default SignInPage; | ||
export default SignIn; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,72 @@ | ||
import React from "react"; | ||
import loginImage from '../../assets/Home-Page-Assets/CuriousConnect.png'; | ||
|
||
const SignUpPage = () => { | ||
return <div>SignUp-Page</div>; | ||
}; | ||
|
||
export default SignUpPage; | ||
const SignUp = () => { | ||
return ( | ||
<div className="flex justify-center w-full h-full "> | ||
<div | ||
className="md:w-full bg-cover bg-blue-700 sm:block hidden" | ||
style={{ | ||
backgroundImage: `url(${loginImage})`, | ||
}} | ||
></div> | ||
<div className="flex bg-white rounded-lg shadow-lg border w-[2000px] h-[630px] "> | ||
|
||
|
||
<div className=" w-full mt-40 p-8 lg:w-1/2 "> | ||
|
||
|
||
<div class="flex flex-col items-center"> | ||
<p className="text-2xl text-gray-600 md:text-right lg:text-right sm:text-center font-bold">Sign Up With</p> | ||
|
||
<p className="text-s text-gray-600 md:text-right md:ml-28 lg:text-right sm:text-center p-1"> | ||
Not have an account yet? <span className="text-black-700 font-bold ">Sign Up</span> | ||
</p> | ||
<button | ||
className="bg-purple-700 text-white lg:ml-44 md:ml-52 w-full border border-solid max-w-xs font-bold shadow-sm rounded-lg py-3 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"> | ||
<div class="bg-white p-2 rounded-full"> | ||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-6 h-6"> | ||
<path fill="none" d="M0 0h24v24H0V0z"/> | ||
<path fill="#282828" d="M21.3 6H2.7C1.78 6 1 6.78 1 7.7v8.6c0 .92.78 1.7 1.7 1.7h18.6c.92 0 1.7-.78 1.7-1.7V7.7c0-.92-.78-1.7-1.7-1.7zm.7 10c0 .38-.32.7-.7.7H2.7c-.38 0-.7-.32-.7-.7V7.7c0-.38.32-.7.7-.7h18.6c.38 0 .7.32.7.7v8.6z"/> | ||
<path fill="#282828" d="M12 11.58l8.19-6.56c.34-.27.81-.27 1.15 0 .39.31.4.85.02 1.18L13.15 12l8.25 6.59c.38.32.37.87-.02 1.18-.16.13-.36.19-.55.19-.22 0-.43-.08-.6-.24L12 13.58l-7.19 5.75c-.17.14-.38.22-.6.22-.19 0-.39-.06-.55-.19-.39-.31-.4-.85-.02-1.18L10.85 12l-8.25-6.59c-.38-.32-.37-.87.02-1.18.34-.27.81-.27 1.15 0L12 11.58z"/> | ||
</svg> | ||
</div> | ||
<span class="ml-4"> | ||
Continue with E-mail | ||
</span> | ||
</button> | ||
</div> | ||
|
||
<div class="flex flex-col items-center "> | ||
<button | ||
className=" lg:ml-44 md:ml-52 w-full border border-dashed max-w-xs font-bold shadow-sm rounded-lg py-3 bg-white text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"> | ||
<div class="bg-white p-2 rounded-full"> | ||
<svg class="w-4" viewBox="0 0 533.5 544.3"> | ||
<path | ||
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" | ||
fill="#4285f4" /> | ||
<path | ||
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" | ||
fill="#34a853" /> | ||
<path | ||
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" | ||
fill="#fbbc04" /> | ||
<path | ||
d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" | ||
fill="#ea4335" /> | ||
</svg> | ||
</div> | ||
<span class="ml-4"> | ||
Sign In with Google | ||
</span> | ||
</button> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
export default SignUp; |