Home and Login pages design

src/components/Navbar.js

@@ -5,7 +5,7 @@ import styled from "styled-components";
 const NavMenu = styled.nav`
  position: sticky;
  text-align: center;
- padding-top: 2rem;
+ padding: 1rem 0;
 `;
 
 const LinkItem = styled(Link)`

src/pages/home.js

@@ -1,7 +1,21 @@
 import React from "react";
+import BackgroundImage from "../assets/images/surfing_wave.jpg";
+import styled from "styled-components";
 
-const home = () => {
- return <div></div>;
+const Container = styled.main`
+ height: 100vh;
+ width: 100vw;
+ background-image: url(${BackgroundImage});
+ background-size: cover;
+ background-position: center;
+ filter: grayscale(100%);
+ @media (min-width: 768px) {
+ background-position: right;
+ }
+`;
+
+const Home = () => {
+ return <Container></Container>;
 };
 
-export default home;
+export default Home;

src/pages/login.js

@@ -1,7 +1,29 @@
 import React from "react";
+import styled from "styled-components";
+import BackgroundImage from "../assets/images/surfing_wave.jpg";
+import LoginForm from "../components/login/LoginForm";
 
-const login = () => {
- return <div></div>;
+const HomePageContainer = styled.main`
+ height: 100vh;
+ width: 100vw;
+ background-image: url(${BackgroundImage});
+ background-size: cover;
+ background-position: right;
+`;
+const Content = styled.section`
+ background: rgba(30, 38, 65, 0.7);
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+const Login = () => {
+ return (
+ <HomePageContainer>
+ <Content></Content>
+ </HomePageContainer>
+ );
 };
 
-export default login;
+export default Login;