having issues with react router 6... added some css

ClientApp/src/App.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
 import logo from './images/logo.svg'
+import git from './images/GitHubSmall.png'
+import { Route, Routes } from 'react-router'
+import { Landing } from './pages/Landing'
 
 export function App() {
   return (
@@ -9,10 +12,15 @@ export function App() {
         <h1>Bike Check</h1>
         <div className="SignIn">Sign In</div>
       </header>
+      <Routes>
+        <Route path="/" element={<Landing />} />
+      </Routes>
       <footer>
         <div className="footer">
           <p>Created by <a href="http://www.amheiser.me">Nicholas Amheiser</a></p>
-          <p>Github repository: <a href="https://github.com/Amheisern"></a>github image</p>
+          <p>Github repository: <a href="https://github.com/Amheisern">
+            <img src={git} className="git" alt="git" />
+            </a></p>
         </div>
       </footer>
     </div>

ClientApp/src/index.scss

@@ -1,5 +1,23 @@
 :root {
   font: 16px / 1 sans-serif;
+
+/* SCSS RGB */
+$smitten: rgba(205, 51, 130, 1);
+$battleship-grey: rgba(128, 130, 123, 1);
+$white: rgba(253, 253, 253, 1);
+$black-olive: rgba(67, 69, 65, 1);
+$rich-black-fogra-39: rgba(10, 10, 9, 1);
+
+/* SCSS Gradient */
+$gradient-top: linear-gradient(0deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-right: linear-gradient(90deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-bottom: linear-gradient(180deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-left: linear-gradient(270deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-top-right: linear-gradient(45deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-bottom-right: linear-gradient(135deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-top-left: linear-gradient(225deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-bottom-left: linear-gradient(315deg, #cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
+$gradient-radial: radial-gradient(#cd3382ff, #80827bff, #fdfdfdff, #434541ff, #0a0a09ff);
 
 }
 

ClientApp/src/main.tsx

@@ -2,10 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.scss'
 import { App } from './App'
+import { BrowserRouter as Router } from 'react-router-dom'
 
 ReactDOM.render(
   <React.StrictMode>
+    <Router>
     <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById('root')
 )

ClientApp/src/pages/Landing.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+
+export function Landing() {
+  return (
+    <>
+      <div>
+      </div>
+    </>
+  )
+}

package.json

@@ -1,4 +1,7 @@
 {
   "name": "BikeCheck",
-  "private": "true"
+  "private": "true",
+  "dependencies": {
+    "react-router-dom": "^6.3.0"
+  }
 }