Final (?)

.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/component/Card/Card.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Card = () => {
+    return (
+        <div className="card">
+            <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_194cbc48bb7%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_194cbc48bb7%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" className="card-img-top" alt="..." />
+            <div className="card-body text-center">
+                <h5 className="card-title ">Card title</h5>
+                <p className="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" className="btn btn-primary ">Go somewhere</a>
+            </div>
+        </div>
+    )
+}
+export default Card;

src/js/component/Footer/Footer.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+        <>
+            <footer className="bg-dark text-lg-start">
+                <div className="container p-3 text-center">
+                    <p className="mb-0 text-white">© 2025 TeamOne. Todos los derechos reservados.</p>
+                </div>
+            </footer>
+        </>
+    )
+}
+
+export default Footer; 

src/js/component/Jumbotron/Jumbotron.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Jumbotron = () => {
+    return (
+        <>
+            <div className="container">
+                <div className=" container-fluid py-5 bg-secondary-subtle rounded mt-5 ">
+                    <h1 className="display-5 fw-bold"> A warm welcome! </h1>
+                    <p className="col-md-8 fs-2 m-l-auto" style={{"text-align":"justify"}}>
+                        Lorem ipsum dolor sit amet, consectetur adispisicing elit, ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid smilique quaerat  narm nobis ilo aspernatur vitae fugia numquam repletiat
+                    </p>
+                    <button class="btn btn-primary btn-lg" type="button">Example button</button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Jumbotron;

src/js/component/Navbar/Navbar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const Navbar = () => {
+    return (
+        <nav className="navbar navbar-expand-lg bg-secondary ">
+            <div className="container-fluid d-flex ">
+                <a className="navbar-brand text-white " href="#" ><strong>Start Bootstrap</strong></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 text-lg-end text-start" 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="#"><strong>Home</strong></a>
+                        </li>
+                        <li className="nav-item">
+                            <a className="nav-link text-white" href="#">About</a>
+                        </li> <li className="nav-item">
+                            <a className="nav-link text-white" href="#">Service</a>
+                        </li> 
+                        <li className="nav-item">
+                            <a className="nav-link text-white" href="#">Contact</a>
+                        </li>
+
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Navbar;

src/js/index.js

@@ -6,7 +6,7 @@ import ReactDOM from "react-dom/client";
 import "../styles/index.css";
 
 //import your own components
-import Home from "./component/home.jsx";
+import Home from "../pages/home.jsx";
 
 //render your react application
 ReactDOM.createRoot(document.getElementById('app')).render(<Home/>);

src/pages/home.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Navbar from "../js/component/Navbar/Navbar";
+import Jumbotron from "../js/component/Jumbotron/Jumbotron";
+import Card from "../js/component/Card/Card";
+import Footer from "../js/component/Footer/Footer";
+
+//include images into your bundle
+//create your first component
+const Home = () => {
+
+	function repeatCards(count) {
+		let cards = []
+		for (let i = 0; i < count; i++) {
+			cards.push(
+				<>
+					<div key={i} className="col-12 col-md-6 col-lg-3 d-flex justify-content-center" >
+						<Card />
+					</div>
+				</>
+			)
+		}
+		return cards
+	}
+	return (
+		<>
+
+			<Navbar />
+
+			<div className="container">
+				<Jumbotron />
+
+				<div className="row justify-content-center mt-4 mb-4">
+					{repeatCards(4)}
+				</div>
+
+			</div>
+
+			<Footer />
+
+		</>
+	);
+};
+
+export default Home;
+