implemented the landing page with relative routes

src/App.jsx

@@ -2,6 +2,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import { Home, Layout, List, ManageList } from './views';
 
+import LandingPage from './views/LandingPage'; //Import my LandingPage
+
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
@@ -43,7 +45,8 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
-				<Route path="/" element={<Layout />}>
+				<Route path="/" element={<LandingPage />} /> {/* Landing page root */}
+				<Route path="/app" element={<Layout />}>
 					<Route
 						index
 						element={
@@ -57,15 +60,17 @@ export function App() {
 						}
 					/>
 					<Route
-						path="/list"
+						path="list" //change to relative path
 						element={<List data={data} listPath={listPath} />}
 					/>
 					<Route
-						path="/manage-list"
+						path="manage-list" //changed to relative path
 						element={<ManageList listPath={listPath} user={user} data={data} />}
 					/>
 				</Route>
 			</Routes>
 		</Router>
 	);
 }
+
+export default App;

src/views/LandingPage.css

@@ -0,0 +1,14 @@
+.landing-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	margin: 0;
+	padding: 20px;
+	box-sizing: border-box;
+}
+
+p {
+	margin: 0;
+}

src/views/LandingPage.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './LandingPage.css';
+
+const LandingPage = () => {
+	return (
+		<div className="landing-container">
+			<h1> Welcome to Our Landing Page!</h1>
+			<p>Your Journey Starts here.</p>
+		</div>
+	);
+};
+export default LandingPage;