From 0d924903e52487a3a7a96966ba62ea4be4f66ffb Mon Sep 17 00:00:00 2001
From: AndyLJ01 <andylinjl@gmail.com>
Date: Fri, 13 Feb 2026 09:28:12 +0000
Subject: [PATCH 1/2] 	new file:   src/js/components/navbar.jsx

---
 package-lock.json            |  3 +++
 src/js/components/Home.jsx   |  5 +++--
 src/js/components/navbar.jsx | 11 +++++++++++
 src/js/main.jsx              |  1 +
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/js/components/navbar.jsx

diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..a87d148a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "vite": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..d6a4ce0b1 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import navbar from "./navbar";
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
 
@@ -8,8 +8,9 @@ const Home = () => {
 	return (
 		<div className="text-center">
             
-
+           
 			<h1 className="text-center mt-5">Hello Rigo!</h1>
+			<navbar/>
 			<p>
 				<img src={rigoImage} />
 			</p>
diff --git a/src/js/components/navbar.jsx b/src/js/components/navbar.jsx
new file mode 100644
index 000000000..60a592527
--- /dev/null
+++ b/src/js/components/navbar.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function navbar() {
+  return (
+    <div>
+      <h1>HOLA MUUUUNDO</h1>
+    </div>
+  )
+}
+
+export default navbar
diff --git a/src/js/main.jsx b/src/js/main.jsx
index 14662105b..95982d9b8 100644
--- a/src/js/main.jsx
+++ b/src/js/main.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
+
 //Bootstrap
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap"

From 208a2e4a5424788956829e387bb4632739071d3d Mon Sep 17 00:00:00 2001
From: AndyLJ01 <andylinjl@gmail.com>
Date: Fri, 20 Feb 2026 06:56:50 +0000
Subject: [PATCH 2/2] NavBar

---
 src/js/components/Home.jsx   | 18 ++--------
 src/js/components/Navbar.jsx | 64 ++++++++++++++++++++++++++++++++++++
 src/js/components/navbar.jsx | 11 -------
 3 files changed, 66 insertions(+), 27 deletions(-)
 create mode 100644 src/js/components/Navbar.jsx
 delete mode 100644 src/js/components/navbar.jsx

diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index d6a4ce0b1..f7971e980 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import navbar from "./navbar";
+import Navbar from "./Navbar";
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
 
@@ -7,21 +7,7 @@ import rigoImage from "../../img/rigo-baby.jpg";
 const Home = () => {
 	return (
 		<div className="text-center">
-            
-           
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<navbar/>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
+			<Navbar/>
 		</div>
 	);
 };
diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx
new file mode 100644
index 000000000..bf9ee6874
--- /dev/null
+++ b/src/js/components/Navbar.jsx
@@ -0,0 +1,64 @@
+import React from 'react'
+
+function Navbar() {
+  return (
+    <div className='bg-dark p-3 '>
+      
+  <nav class="d-flex justify-content-between align-items-center d-none d-md-flex">
+    <ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Start Bootstrap</a>
+  </li>
+    </ul>
+      <ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary  " href="#">About</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Services</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Contact</a>
+  </li>
+</ul>
+</nav>
+
+
+<nav class="navbar navbar-dark bg-dark d-md-none">
+  <div class="container-fluid">
+    <div>
+      <a class="navbar-brand" href="#">Start Bootstrap</a>
+    </div>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
+</nav>
+
+<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
+  <div class="bg-dark p-4 ">
+<ul class="nav flex-column align-items-start">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary  " href="#">About</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Services</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Contact</a>
+  </li>
+</ul>
+  </div>
+</div>
+
+    </div>
+  )
+}
+
+export default Navbar
diff --git a/src/js/components/navbar.jsx b/src/js/components/navbar.jsx
deleted file mode 100644
index 60a592527..000000000
--- a/src/js/components/navbar.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-function navbar() {
-  return (
-    <div>
-      <h1>HOLA MUUUUNDO</h1>
-    </div>
-  )
-}
-
-export default navbar