Rama cristhian

.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"
     }
 }

src/js/components/Card.jsx

@@ -0,0 +1,14 @@
+const Card = () => {
+    return (
+        <div className="ms-auto d-flex flex-column justify-content-center gap-3" style={{ width: "18rem" }}>
+            <img src="https://fastly.picsum.photos/id/44/200/300.jpg?hmac=XVdwVrJGHwXEzGWC6cZoztYj9nazQEbeWv9VrPmoqps" alt="paisaje" />
+                <div className="card-body">
+                    <h5 className="card-title text-center">Card title</h5>
+                    <p className="card-text text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta accusamus tempora inventore in earum. Fugiat similique soluta amet illum sint asperiores nisi, dolore neque est a autem deleniti. Accusamus, consequatur.</p>
+                    <a href="#" className="btn btn-primary d-block mx-auto">Find Out More!</a>
+                </div>
+        </div>
+    );
+}
+
+export default Card;

src/js/components/Footer.jsx

@@ -0,0 +1,11 @@
+const footer =() =>{
+    return (
+   <footer className="bg-dark text-white text-center py-4 mt-5">
+           Copyright©  - Your website 2025
+        </footer>
+
+    )    
+  }
+
+
+export default footer;

src/js/components/Home.jsx

@@ -1,27 +1,31 @@
 import React from "react";
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
+import Navbar from "./Navbar";
+import Jumbotron from "./Jumbotron";
+import Footer from "./Footer";
+import Card from "./Card";
 
-//create your first component
 const Home = () => {
 	return (
-		<div className="text-center">
-
+		<>
+			<header>
+				<Navbar />
+			</header>
 
-			<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">
+				<Jumbotron />
+			<div className="row">
+				<Card />
+				<Card />	
+				<Card />
+				<Card />	
+			</div>
+			</div>
+
+			<footer>
+				<Footer />
+			</footer>
+		</>
 	);
 };
 

src/js/components/Jumbotron.jsx

@@ -0,0 +1,22 @@
+const Jumbotron = () => {
+    return (
+        <div className="jumbotron">
+            <div className="bg-light py-5">
+                <div className="container px-3 px-md-5">
+                    <h1 className="display-4 text-center text-md-start">A Warm Welcome!</h1>
+                    <p className="lead text-center text-md-start">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi alias quia consequatur minima!
+                        Nemo maiores in dolores fugiat quas fugit dolore provident tempore beatae ducimus dolor tenetur,
+                        consequatur dolorem atque?
+                    </p>
+                    <div className="d-flex justify-content-center justify-content-md-start">
+                        <a className="btn btn-primary btn-lg" href="#" role="button">Call to action!</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    );
+}
+
+export default Jumbotron;

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 text-white" href="#">Start Bootstrap</a>
+
+        <button className="navbar-toggler border border-white" 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 ms-auto mb-2 mb-lg-0 ">
+            <li className="nav-item">
+              <a className="nav-link active text-white" aria-current="page" href="#">Home</a>
+            </li>
+            <li className="nav-item ">
+              <a className="nav-link active text-white-50" aria-current="page" href="#">About</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link active text-white-50" aria-current="page" href="#">Services</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link active text-white-50" aria-current="page" href="#">Contact</a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar;