genesi-react

.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,22 @@
+import React from "react";
+
+const Card = (props) => {
+    const { image, title, description } = props;
+    return (
+
+        <div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
+            <div className="card h-100">
+                <img src={image} className="img-fluid w-100 mb-3" alt={title} style={{ height: "200px", objectFit: "cover" }} />
+                <div className="card-body text-center">
+                    <h2 className="card-title">{title}</h2>
+                    <p className="card-text">{description}</p>
+                </div>  {/*este div cierra h-100*/}
+                <div className="card-footer text-center bg-light border-top-0">
+                    <a href="#" className="btn btn-primary"> Find Out More!! </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Card;

src/js/components/Footer.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+        <div className="container-fluid bg-dark text-center p-4">
+            <p className="m-0 text-white">
+                Copyright © 2026 Jonathan Castañeda & Genesis Falcon
+            </p>
+        </div>
+
+
+    );
+};
+export default Footer;

src/js/components/Home.jsx

@@ -1,28 +1,66 @@
 import React from "react";
+import NavbarComponent from "./NavbarComponents";
+import Jumbotron from "./Jumbotron";
+import Card from "./Card";
+import Footer from "./Footer";
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
 
-//create your first component
 const Home = () => {
+
+	const cardsDatos = [
+
+		{
+			id: 1,
+			image: "https://placehold.co/500x325",
+			title: "Carta Uno",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 2,
+			image: "https://placehold.co/500x325",
+			title: "Carta Dos",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 3,
+			image: "https://placehold.co/500x325",
+			title: "Carta Tres",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 4,
+			image: "https://placehold.co/500x325",
+			title: "Carta Cuatro",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+	];
+
+
 	return (
 		<div className="text-center">
-
-
-			<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>
+			<NavbarComponent />
+
+			<div className="container mt-5">
+				<Jumbotron />
+				<div className="row">
+					{cardsDatos.map((card) => (
+						<Card
+							key={card.id}
+							image={card.image}
+							title={card.title}
+							description={card.description}
+						/>
+					))}
+				</div>
+			</div>
+			<Footer />
 		</div>
+
 	);
 };
 
-export default Home;
+export default Home;
+

src/js/components/Jumbotron.jsx

@@ -0,0 +1,13 @@
+function Jumbotron() {
+    return (
+        <div className="card text-bg-light bg mb-4 p-5 border-0" style={{ backgroundColor: "#dee2e675" }}>
+            <div className="card-body text-start">
+                <h1 className="card-title">A Warm Welcome!</h1>
+                <p className="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, iste porro inventore voluptatibus veniam, excepturi recusandae dolor aperiam deleniti quisquam sed labore quia? Culpa animi illo, ex distinctio amet explicabo.</p>
+                <a href="#" className="btn btn-primary btn-lg">Call to action!</a>
+            </div>
+        </div>
+    );
+}
+
+export default Jumbotron;

src/js/components/NavbarComponents.jsx

@@ -0,0 +1,38 @@
+function NavbarComponent () {
+                return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div className="container-fluid">
+        <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 d-flex justify-content-end" id="navbarNav">
+          <ul className="navbar-nav">
+            <li className="nav-item">
+              <a className="nav-link active" href="#">Home</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" 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 NavbarComponent;