From 5ec762b1e52df6383ff0f8f29aeeb41840316e90 Mon Sep 17 00:00:00 2001 From: Ayrush Verma Date: Wed, 26 Jun 2024 15:50:28 +0530 Subject: [PATCH 1/2] Added authorization pages --- index.html | 3 + src/App.jsx | 9 ++- src/components/autorization/CreateAccount.jsx | 69 +++++++++++++++++++ src/components/autorization/Login.jsx | 61 ++++++++++++++++ src/index.css | 2 +- tailwind.config.js | 4 +- 6 files changed, 143 insertions(+), 5 deletions(-) create mode 100644 src/components/autorization/CreateAccount.jsx create mode 100644 src/components/autorization/Login.jsx diff --git a/index.html b/index.html index 0c589ec..179f41f 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Vite + React + + +
diff --git a/src/App.jsx b/src/App.jsx index 6c34533..fa796c9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,8 @@ import { useState } from 'react' import TopOrg from './components/TopOrganization' import Header from './components/Header' import Hero from './components/Hero' +import CreateAccount from './components/autorization/CreateAccount' +import Login from './components/autorization/Login' function App() { @@ -9,9 +11,12 @@ function App() { return ( <> -
+ {/* */} + {/* */} + + {/*
- + */} ) } diff --git a/src/components/autorization/CreateAccount.jsx b/src/components/autorization/CreateAccount.jsx new file mode 100644 index 0000000..355153f --- /dev/null +++ b/src/components/autorization/CreateAccount.jsx @@ -0,0 +1,69 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; + +const ColorButton = styled(Button)(({ theme }) => ({ + color: theme.palette.getContrastText('#272342'), + backgroundColor: '#272342', + '&:hover': { + backgroundColor: '#272342', + }, +})); + +const CreateAccount = () => { + return ( +
+
+

Discover amezing
events.
Sign up for personalized
recommendations
today!

+
+
+

+ Create Account +

+
+ +
+ +
+
+ +
+
+ +
+ + +
+

Create Account

+

Already have an account? Log In

+
+
+ ); +}; + +export default CreateAccount; diff --git a/src/components/autorization/Login.jsx b/src/components/autorization/Login.jsx new file mode 100644 index 0000000..5ca28c8 --- /dev/null +++ b/src/components/autorization/Login.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; + +const ColorButton = styled(Button)(({ theme }) => ({ + color: theme.palette.getContrastText('#272342'), + backgroundColor: '#272342', + '&:hover': { + backgroundColor: '#272342', + }, +})); + +const Login = () => { + return ( +
+
+

Welcome back!
Login for personalized
recommendations
today!

+
+
+

+ Login +

+
+ +
+ +
+
+ +
+ + +
+

Login

+

Don't have an account? Sign up

+
+
+ ); +}; + +export default Login; diff --git a/src/index.css b/src/index.css index bd6213e..b5c61c9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js index 513995e..f0e2e00 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,12 +8,12 @@ export default { extend: { colors:{ "navbar":'#002C3E', - "body":'#F6F6F6', + "body":'#272342', "button":"#230c69" // "navbar":'', // "body":'#F6F6F6',#002C3E // "button":"#287094" - } + }, }, }, plugins: [], From df3e987363622913da6b59ad759d9ce2962d4708 Mon Sep 17 00:00:00 2001 From: Ayrush Verma Date: Wed, 26 Jun 2024 18:55:25 +0530 Subject: [PATCH 2/2] footer --- src/App.jsx | 5 ++- src/components/footer/Footer.jsx | 54 ++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/components/footer/Footer.jsx diff --git a/src/App.jsx b/src/App.jsx index fa796c9..8fc104d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,6 +4,7 @@ import Header from './components/Header' import Hero from './components/Hero' import CreateAccount from './components/autorization/CreateAccount' import Login from './components/autorization/Login' +import Footer from './components/footer/Footer' function App() { @@ -11,8 +12,10 @@ function App() { return ( <> - {/* */} {/* */} +