From 7559aaf54628e2e62208b2de7ce2b915c73c3dcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9nesis=20Falc=C3=B3n?= <genesisfalcon15@gmail.com>
Date: Fri, 6 Feb 2026 23:41:14 +0100
Subject: [PATCH] genesi-react

---
 .vscode/settings.json        |  3 ++
 package-lock.json            |  7 ++++
 src/js/components/Card.jsx   | 22 ++++++++++++
 src/js/components/Footer.jsx | 18 ++++++++++
 src/js/components/Home.jsx   | 69 +++++++++++++++++++++++++++---------
 5 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 src/js/components/Card.jsx
 create mode 100644 src/js/components/Footer.jsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d83b5ba6c..b4cb7ea09 100644
--- 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"
     }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..928aff12f 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": {
@@ -7118,6 +7121,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7295,6 +7299,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -11373,6 +11378,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -12537,6 +12543,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
       "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx
new file mode 100644
index 000000000..ca70ab9b6
--- /dev/null
+++ b/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;
diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx
new file mode 100644
index 000000000..911d15e94
--- /dev/null
+++ b/src/js/components/Footer.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+
+        <footer className="py-5 bg-dark mt-auto">
+            <div className="col-12 col-md-4 text-md-start">
+                <div className="container">
+                    <p className="m-0 text-align:center text-white">
+                        Copyright &copy; Genesis Falcon
+                    </p>
+
+                </div>
+            </div>
+        </footer>
+    );
+};
+export default Footer;
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..18a682ed1 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,26 +1,61 @@
 import React from "react";
+//// aqui el import de navbar//
+/// aqui el jumbotrom////
+
+
+
+
+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 = () => {
 	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>
+			{/* aqui va el navbar y el jumbotrom*/}
+
+
+
+
+
+
+
+
+			<div className="container mt-5">
+				<div className="row">
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta uno"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Dos"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Tres"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Cuatro"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+				</div>
+			</div>
+			<Footer />
+
+
+
+
+
 		</div>
 	);
 };