add bootstrap, add sass, update markup

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
@@ -24,6 +26,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "sass-embedded": "^1.81.0",
     "vite": "^5.4.8"
   }
 }

src/About.jsx

@@ -5,7 +5,9 @@ function About() {
       <div>
         <h1>About</h1>
         <div className="card">
-          <p>Welcome to the about page...</p>
+          <div className="card-body">
+            <p>Welcome to the about page...</p>
+          </div>
         </div>
       </div>
     </>

src/App.jsx

@@ -1,9 +1,10 @@
 import { Route, Routes } from 'react-router-dom';
-import './App.css'
+import './App.scss'
 import Navbar from './Navbar'
 import Home from './Home'
 import About from './About'
 import Contact from './Contact'
+import Footer from './Footer'
 
 function App() {
 
@@ -15,6 +16,7 @@ function App() {
          <Route path='/about' element={<About/>} />
          <Route path='/contact' element={<Contact/>} />
        </Routes>
+       <Footer />
     </>
   )
 }

src/App.css → src/App.scss

@@ -1,5 +1,8 @@
+@import "bootstrap/scss/bootstrap";
+$enable-shadows: true;
+
 body {
-    background-color: #222;
+    background-color: #ddd;
 }
 
 #root {
@@ -35,15 +38,21 @@ body {
   }
 }
 
-.card {
-  padding: 2em;
-}
-
 .read-the-docs {
   color: #888;
 }
 
-Nav li {
-  display: inline;
-  margin: 0 1em;
+
+//nav
+Nav {
+  z-index: 1000;
+  position: relative;
+}
+
+//font
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin-top: 50px;
 }

src/Contact.jsx

@@ -5,7 +5,9 @@ function Contact() {
       <div>
         <h1>Contact</h1>
         <div className="card">
-          <p>Contact us...</p>
+          <div className="card-body">
+            <p>Contact us...</p>
+          </div>
         </div>
       </div>
     </>

src/Footer.jsx

@@ -0,0 +1,12 @@
+function Footer() {
+
+  return (
+    <>
+      <div className="py-5">
+        <p className="text-center w-100 d-block m-4">&copy; 2024 Anyone</p>
+      </div>
+    </>
+  )
+}
+
+export default Footer

src/Home.jsx

@@ -11,9 +11,11 @@ function App() {
       </div>
       <h1>Hello!</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
+        <div className="card-body">
+          <button className="btn btn-lg btn-primary" onClick={() => setCount((count) => count + 1)}>
+            count is {count}
+          </button>
+        </div>
       </div>
     </>
   )

src/Navbar.jsx

@@ -2,19 +2,46 @@ import { Link } from "react-router-dom";
 
 const Navbar = () => {
   return (
-    <nav>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/about">About</Link>
-        </li>
-        <li>
-          <Link to="/contact">Contact</Link>
-        </li>
-      </ul>
+    <nav className="navbar navbar-expand-lg bg-body-tertiary">
+        <div className="container-fluid">
+          <a className="navbar-brand" href="#">Navbar</a>
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+              <li className="nav-item">
+                <Link className="nav-link" to="/">Home</Link>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link" to="/about">About</Link>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link" to="/contact">Contact</Link>
+              </li>
+              <li className="nav-item dropdown">
+                <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  Dropdown
+                </a>
+                <ul className="dropdown-menu">
+                  <li><a className="dropdown-item" href="#">Action</a></li>
+                  <li><a className="dropdown-item" href="#">Another action</a></li>
+                  <li><hr className="dropdown-divider"></hr></li>
+                  <li><a className="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link disabled" aria-disabled="true">Disabled</a>
+              </li>
+            </ul>
+            <form className="d-flex" role="search">
+              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
+              <button className="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+      </div>
     </nav>
+
   );
 }
 

src/index.scss

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  display: flex;
+  place-items: top;
+  min-height: 100vh;
+}

src/main.jsx

@@ -1,8 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
+import * as bootstrap from 'bootstrap'
 import App from './App.jsx'
-import './index.css'
+import './index.scss'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>