4GeeksAcademy · jeanAguiluz · Jan 8, 2026
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     }
 }
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/4geeks.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello Rigo with Vanilla.js</title>
+    <title>exercise landing page with react</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "bootstrap": "^5.2.2",
+    "bootstrap": "^5.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/js/App.jsx b/src/js/App.jsx
@@ -0,0 +1,7 @@
+import Home from "./components/Home";
+
+const App = () => {
+    return <Home />;
+};
+
+export default App;
diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx
@@ -0,0 +1,20 @@
+const Card = ({ image, title, description }) => {
+	return (
+		<div className="card h-100">
+			<img
+				src={image}
+				className="card-img-top"
+				style={{ height: "200px", objectFit: "cover" }}
+				alt={title}
+			/>
+			<div className="card-body text-center">
+				<h5 className="card-title">{title}</h5>
+				<p className="card-text">{description}</p>
+				<hr />
+				<button className="btn btn-primary">Find out More!</button>
+			</div>
+		</div>
+	);
+};
+
+export default Card;
diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+        <footer className="bg-dark text-white text-center py-4">
+            <div className="container">
+                <p> <small>Copyright &copy; Your Website {new Date().getFullYear()}</small></p> {/* Lo puse así para probar este de fecha. */}
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
@@ -1,28 +1,57 @@
-import React from "react";
+import Navbar from "./Navbar";
+import Jumbotron from "./Jumbotron";
+import Card from "./Card";
+import Footer from "./Footer";
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
+const cards = [
+	{
+		image: "https://picsum.photos/id/1077/900/900",
+		title: "sport",
+		description: "Sit et id aliqua in velit sint anim irure minim qui consequat. Voluptate aliquip amet.",
+	},
+	{
+		image: "https://picsum.photos/id/857/800/800",
+		title: "City",
+		description: "Sit et id aliqua in velit sint anim irure minim qui consequat. Voluptate aliquip amet.",
+	},
+	{
+		image: "https://picsum.photos/id/237/800/800",
+		title: "Puppy",
+		description: "Sit et id aliqua in velit sint anim irure minim qui consequat. Voluptate aliquip amet.",
+	},
+	{
+		image: "https://picsum.photos/id/822/800/800",
+		title: "Mother",
+		description: "Sit et id aliqua in velit sint anim irure minim qui consequat. Voluptate aliquip amet.",
+	}
+];
 
-//create your first component
 const Home = () => {
 	return (
-		<div className="text-center">
-
+		<>
+			<Navbar />
+			<Jumbotron />
 
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<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>
-		</div>
+			<div className="container my-5">
+				<div className="row">
+					{cards.map((item, index) => (
+						<div
+							key={index}
+							className="col-12 col-sm-6 col-md-4 col-lg-3 mb-4"
+						>
+							<Card
+								image={item.image}
+								title={item.title}
+								description={item.description}
+							/>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<Footer />
+		</>
 	);
 };
 
-export default Home;
+export default Home;
diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const Jumbotron = () => {
+    return (
+        <div className="mb-4 bg-light rounded-3 mx-5 mt-4">
+            <div className="container-fluid py-5 text-start">
+                <h1 className="display-5 fw-bold">A Warm Welcome!</h1>
+                <p className="col-md-8 fs-4">
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore facere distinctio voluptates quia officiis unde nobis neque veniam hic. Sequi totam laudantium, velit a quaerat deleniti blanditiis facere reiciendis cumque!
+                </p>
+                <button className="btn btn-primary btn-lg" type="button">
+                    Call to action!
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Jumbotron;
diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx
@@ -0,0 +1,36 @@
+const Navbar = () => {
+	return (
+		<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+			<div className="container">
+				<a className="navbar-brand" href="#">Start Bootstrap</a>
+				<button
+					className="navbar-toggler"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#navbarNav"
+				>
+					<span className="navbar-toggler-icon"></span>
+				</button>
+
+				<div className="collapse navbar-collapse" id="navbarNav">
+					<ul className="navbar-nav ms-auto">
+						<li className="nav-item">
+							<a className="nav-link active" href="#">Home</a>
+						</li>
+                        <li className="nav-item">
+							<a className="nav-link active" href="#">About</a>
+						</li>
+						<li className="nav-item">
+							<a className="nav-link" href="#">Services</a>
+						</li>
+						<li className="nav-item">
+							<a className="nav-link" href="#">Contact</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+	);
+};
+
+export default Navbar;
diff --git a/src/js/main.jsx b/src/js/main.jsx
@@ -1,18 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
 //Bootstrap
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap"
-
-// index.css'
-import '../styles/index.css'
-
-// components
-import Home from './components/Home';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <Home/>
-  </React.StrictMode>,
-)
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+import "./styles/index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);
diff --git a/src/styles/index.css → src/js/styles/index.css b/src/styles/index.css → src/js/styles/index.css
@@ -8,4 +8,4 @@
 
     import 'relative/path/to/stylesheet.scss';
 
-*/
+*/
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@

		import 'relative/path/to/stylesheet.scss';

		*/
		*/