sidenav

src/components/Button/TertiaryButton.js

@@ -6,12 +6,25 @@ const TertiaryButton = ({ children }) => <StyledButton>{children}</StyledButton>
 
 const StyledButton = styled.button`
   display: flex;
+  border: 2px solid blue;
   justify-content: center;
   align-items: center;
   text-align: center;
-  border: none;
+  padding: 1rem 7rem;
+  border-radius: 2rem;
   background-color: transparent;
+  color: blue; /* Set the default text color */
   cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+
+  & >.grey{
+    color: white;
+  }
+
+  &:hover {
+    background-color: grey;
+    color: white;
+  }
 `;
 
 TertiaryButton.propTypes = {

src/components/Img/Img.js

@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import React from 'react';
 
-const Img = ({ src, alt, className }) => <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
+const Img = ({ src, alt, className }) => {
+return <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
+}
 
 const Imgg = styled.img`
 width: 100%;

src/components/Link/Link.js

@@ -16,6 +16,7 @@ export const InternalNavLink = styled(RouterLink)`
 
 export const ButtonLink = styled(RouterLink)`
   text-decoration: none;
+  font-size: rem;
   color: grey;
   font-weight: 500;
 `;

src/layout/LandingPage/LandingPageLayout.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 // import Footer from './footer/Footer';
-import { Header } from './header/Header';
+import Header  from './header/Header';
 
 const LandingPageLayout = () => {
   // eslint-disable-next-line arrow-body-style

src/layout/LandingPage/header/Header.js

@@ -9,8 +9,8 @@ import AuthNav from '../nav/AuthNav';
 const Header = () => (
   <StyledHeader>
     <NavContainer>
-      <Nav />
-      <AuthNav />
+      {/* <Nav /> */}
+      {/* <AuthNav /> */}
     </NavContainer>
   </StyledHeader>
 );
@@ -19,22 +19,20 @@ const StyledHeader = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: white;
-  // position: fixed;
-  // top: -1rem;
+  background-color: #FFD700;
   gap: 5rem;
   width: 100%;
 `;
 
 const NavContainer = styled.header`
   display: flex;
   width: 100%;
-  border: 1px solid blue;
+  // border: 1px solid blue;
   justify-content: space-between;
   align-items: center;
   // gap: 14rem;
   // right: 8rem;
-  background-color: white;
+  background-color: 3FFD700;
 `;
 
 export default Header;

src/layout/LandingPage/nav/AuthNav.js

@@ -13,15 +13,22 @@ const AuthNav = () => (
     </ButtonLink>
 
     <ButtonLink to={`${ACCOUNT}/${SIGNUP}`}>
-      <TertiaryButton>Sign Up</TertiaryButton>
+      <TertiaryButton className="grey">Sign Up</TertiaryButton>
     </ButtonLink>
   </Container>
 );
 
 const Container = styled.div`
-  border: 2px solid green;
+  // border: 2px solid green;
   display: flex;
   gap: 2rem;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  margin-left: 2rem;
+  // padding-left: -2rem;
+  padding-right: -5rem;
+  justify-content: center;
+  // margin-left: 8rem;
 `;
 
 export default AuthNav;

src/layout/LandingPage/nav/Nav.js

@@ -16,9 +16,8 @@ const Nav = () => (
 );
 
 const StyledNav = styled.div`
-  border: 2px solid blue;
+  // border: 2px solid blue;
   display: flex;
-  // flex-direction: column;
   gap: 2rem;
   font-weight: 400;
 `;

src/layout/UsersDashboard/UsersDashboardLayout.js

@@ -31,7 +31,7 @@ const Container = styled.div`
   width: 100vw;
   /* border: 2px solid red; */
   overflow: scroll;
-  background-color: black;
+  background-color: #FFD700;
 `;
 
 const Section = styled.section`

src/layout/UsersDashboard/sideNav/Nav.js

@@ -34,7 +34,7 @@ const Container = styled.nav`
 
   flex-direction: column;
   gap: 3.8rem;
-  position: sticky;
+//   position: fixed;
   top: 0;
 
   & > a > div {

src/layout/UsersDashboard/sideNav/navConfig.js

@@ -1,11 +1,10 @@
-// import FourCubes from '../../../components/Icons/FourCubes';
-// import JobsIcon from '../../../components/Icons/JobsIcon';
-// import PlaneIcon from '../../../components/Icons/PlaneIcon';
-// import SettingsIcon from '../../../components/Icons/SettingsIcon';
 import {
   RESERVED_CARS,
   MY_RESERVATIONS,
   USERDASHBOARDHOME,
+  ADD_NEW_CAR,
+  DELETE_RESERVATION,
+  CONTACT
 } from '../../../routes/routeConstants';
 
 const navConfig = [
@@ -26,6 +25,24 @@ const navConfig = [
     path: RESERVED_CARS,
     // icon: PlaneIcon(),
   },
+
+  {
+    title: 'Add New Cars',
+    path: ADD_NEW_CAR,
+    // icon: PlaneIcon(),
+  },
+
+  {
+    title: 'Delete Reservation',
+    path: DELETE_RESERVATION,
+    // icon: PlaneIcon(),
+  },
+
+  {
+    title: 'Contact',
+    path: CONTACT,
+    // icon: PlaneIcon(),
+  },
 ];
 
 export default navConfig;

src/pages/LandingPage/AddNewCar/AddNewCar.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AddNewCar = () => <p>Add New Car</p>;
+
+export default AddNewCar;

src/pages/LandingPage/Contact/Contact.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Contact = () => <p>Contact</p>;
+
+export default Contact;

src/pages/LandingPage/DeleteReservation/DeleteReservation.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DeleteReservation = () => <p>Delete Reservation</p>;
+
+export default DeleteReservation;

src/pages/LandingPage/Home/Home.js

@@ -1,5 +1,48 @@
 import React from 'react';
+import styled from '@emotion/styled';
+import Img from '../../../components/Img/Img';
+import AuthNav from '../../../layout/LandingPage/nav/AuthNav';
 
-const Home = () => <p> Home Page </p>;
+const Home = () => (
+  <Container>
+    <BigText>
+      <Image>
+        <Img src="/static/img/bicycle.jpg" alt='Bicycle'/>
+      </Image>
+      <Paragraph>THE NEW VESPA TRIDENT</Paragraph>
+      <Auth>
+        <AuthNav />
+      </Auth>
+    </BigText>
+  </Container>
+)
 
 export default Home;
+
+const Container = styled.div`
+  background-color: #FFD700;
+  border: 1px solid #FFD700;
+`;
+
+const BigText = styled.div`
+  margin-left: 30rem;
+  margin-top: 20rem;
+  margin-bottom: 3rem;
+`;
+
+const Paragraph = styled.p`
+  font-size: 3rem;
+  margin-top: -3rem;
+`;
+
+const Image = styled.div`
+  width: 50%;
+`;
+
+const Auth = styled.div`
+  margin-top: 1rem;
+  margin-left: -29rem;
+  margin-bottom: 7.2rem;
+  border: 1px solid #FFD700;
+  padding-left: -20rem;
+`;

src/pages/UserDashboard/DashboardHome.js

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 const DashboardHome = () => {
   return (
     <Container>
-
+      Hello
     </Container>
   );
 };
@@ -16,5 +16,6 @@ const Container = styled.section`
   /* border: 2px solid green; */
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+//   margin-left: 15rem;
+//   gap: 2rem;
 `;

src/routes/routeConstants.js

@@ -8,6 +8,9 @@ export const FORGOT_PASSWORD = 'forgot-password';
 export const HOME = '/';
 export const MY_RESERVATIONS = 'my-reservations';
 export const RESERVED_CARS = 'reserved-cars';
+export const ADD_NEW_CAR = 'add-new-car';
+export const DELETE_RESERVATION = 'delete-reservation';
+export const CONTACT = 'contact'
 export const ITEMS = 'cars';
 export const ITEMS_DETAILS = 'item-detals';
 export const USERDASHBOARDHOME = 'home';

src/routes/routes.js

@@ -19,10 +19,16 @@ import {
   RESERVED_CARS,
   USERDASHBOARDHOME,
   USERS_DASHBOARD,
+  ADD_NEW_CAR,
+  DELETE_RESERVATION,
+  CONTACT,
   NOTFOUND,
 } from './routeConstants';
 import UsersDashboardLayout from '../layout/UsersDashboard/UsersDashboardLayout';
 import DashboardHome from '../pages/UserDashboard/DashboardHome';
+import AddNewCar from '../pages/LandingPage/AddNewCar/AddNewCar';
+import DeleteReservation from '../pages/LandingPage/DeleteReservation/DeleteReservation';
+import Contact from '../pages/LandingPage/Contact/Contact';
 
 export default function Router() {
   return useRoutes([
@@ -31,8 +37,6 @@ export default function Router() {
       element: <LandingPageLayout />,
       children: [
         { path: HOME, element: <Home /> },
-        { path: MY_RESERVATIONS, element: <MyReservations /> },
-        { path: RESERVED_CARS, element: <Reserved /> },
       ],
     },
 
@@ -42,6 +46,11 @@ export default function Router() {
       children: [
         { path: USERS_DASHBOARD, element: <Navigate to={USERDASHBOARDHOME} /> },
         { path: USERDASHBOARDHOME, element: <DashboardHome /> },
+        { path: MY_RESERVATIONS, element: <MyReservations /> },
+        { path: RESERVED_CARS, element: <Reserved /> },
+        { path: ADD_NEW_CAR, element: <AddNewCar /> },
+        { path: DELETE_RESERVATION, element: <DeleteReservation /> },
+        { path: CONTACT, element: <Contact /> },
 
         { path: NOTFOUND, element: <NotFound404 /> },
         { path: '*', element: <Navigate to={`/${NOTFOUND}`} replace /> },