Skip to content

Develop1 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IamAyrush wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Develop1 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ec762b
Added authorization pages
IamAyrush Jun 26, 2024
df3e987
footer
IamAyrush Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
Expand Down
12 changes: 10 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,24 @@ 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'
import Footer from './components/footer/Footer'


function App() {
const [count, setCount] = useState(0)

return (
<>
<Header/>
{/* <Login/> */}
<Footer/>
{/* <CreateAccount/> */}


{/* <Header/>
<Hero/>
<TopOrg/>
<TopOrg/> */}
</>
)
}
Expand Down
69 changes: 69 additions & 0 deletions src/components/autorization/CreateAccount.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="bg-body w-full h-[100vh] flex ">
<div className="hidden md:flex w-[40%]">
<p className="text-[2.2rem] text-white font-semibold mt-24 ml-12 ">Discover amezing <br />events. <br /> Sign up for personalized <br />recommendations <br /> today!</p>
</div>
<div className=" bg-white w-[100%] rounded-l-[2rem] md:w-[60%]">
<h1 className="text-3xl font-sens font-semibold text-center mt-16">
Create Account
</h1>
<div className="pt-10 flex md:justify-center ">
<Box
component="form"
sx={{
width: 500,
maxWidth: '100%',
}}
noValidate
autoComplete="off"
>
<div className="p-5">
<TextField fullWidth
id="outlined-password-input"
label="Full Name"
type="text"
autoComplete="current-password"
/>
</div>
<div className="p-5">
<TextField fullWidth
id="outlined-password-input"
label="E-mail Address"
type="text"
autoComplete="current-password"
/>
</div >
<div className="p-5">
<TextField fullWidth
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
</div>

</Box>
</div>
<div className="flex justify-center"><ColorButton variant="contained"> <h2 className="px-10 sm:px-36 py-2">Create Account</h2> </ColorButton></div>
<p className="flex justify-center p-5" >Already have an account? <b><a href="">Log In</a></b></p>
</div>
</div>
);
};

export default CreateAccount;
61 changes: 61 additions & 0 deletions src/components/autorization/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="bg-body w-full h-[100vh] flex ">
<div className="hidden md:flex w-[40%]">
<p className="text-[2.2rem] text-white font-semibold mt-24 ml-12 ">Welcome back! <br /> Login for personalized <br />recommendations <br /> today!</p>
</div>
<div className=" bg-white w-[100%] rounded-l-[2rem] md:w-[60%]">
<h1 className="text-3xl font-sens font-semibold text-center mt-16">
Login
</h1>
<div className="pt-10 flex md:justify-center ">
<Box
component="form"
sx={{
width: 500,
maxWidth: '100%',
}}
noValidate
autoComplete="off"
>
<div className="p-5">
<TextField fullWidth
id="outlined-password-input"
label="E-mail Address"
type="text"
autoComplete="current-password"
/>
</div >
<div className="p-5">
<TextField fullWidth
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
</div>

</Box>
</div>
<div className="flex justify-center"><ColorButton variant="contained"> <h2 className="px-10 sm:px-36 py-2">Login</h2> </ColorButton></div>
<p className="flex justify-center p-5" >Don't have an account? <b><a href="">Sign up</a></b></p>
</div>
</div>
);
};

export default Login;
54 changes: 54 additions & 0 deletions src/components/footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react'

function Footer() {
return (
<div>
<div className='bg-body w-full h-[100vh] md:h-[50vh] bottom-0 text-white flex' >
<div className=' w-[100%] md:w-[50%] md:flex md:ml-16 justify-center font-thin'>
<div className=' p-10' >
<p className='text-xl font-semibold mb-6'>Company info</p>
<p>About Us</p>
<p>Contact Us</p>
<p>Careers</p>
<p>FAQs</p>
<p>Terms of Service</p>
<p>Privacy Policy</p>
</div>
<div className=' p-10' >
<p className='text-xl font-semibold mb-6'>Help</p>
<p>Account Support</p>
<p>Event Ticketing</p>
<p>Listing Events</p>
<p>Ticketing Purches terms & Condition</p>
</div>
</div>
<div className='w-[100%] md:w-[50%] md:flex justify-center font-thin'>
<div className=' p-10' >
<p className='text-xl font-semibold mb-6'>Categories</p>
<p>Concerts & Gigs</p>
<p>Festivals & LifeStyle</p>
<p>Business & Newtworking</p>
<p>Food & Drinks</p>
<p>Performing Arts</p>
<p>Sports & Outdoors</p>
<p>Exhibitions</p>
</div>
<div className=' p-10' >
<p className='text-xl font-semibold mb-6'>Follow Us</p>
<p>Facebook</p>
<p>Instagram</p>
<p>Twitter</p>
<p>Youtube</p>
</div>
</div>
</div>
<div className='bg-body'>
<hr className='h-[0.1rem] bg-gray-900 w-3/4 flex justify-center ml-[10%]'/>
<p className='flex justify-center text-gray-300 p-4'>&copy;2024 Neighborly. All rights reserved. </p>

</div>
</div>
)
}

export default Footer
2 changes: 1 addition & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
4 changes: 2 additions & 2 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ export default {
extend: {
colors:{
"navbar":'#002C3E',
"body":'#F6F6F6',
"body":'#272342',
"button":"#230c69"
// "navbar":'',
// "body":'#F6F6F6',#002C3E
// "button":"#287094"
}
},
},
},
plugins: [],
Expand Down