From ad56a8f5281351cb2f34a644730eab9682075555 Mon Sep 17 00:00:00 2001 From: jeanAguiluz <103805152+jeanAguiluz@users.noreply.github.com> Date: Thu, 8 Jan 2026 15:35:28 +0000 Subject: [PATCH] layout terminado --- .vscode/settings.json | 3 ++ index.html | 2 +- package-lock.json | 11 ++++-- package.json | 2 +- src/js/App.jsx | 7 ++++ src/js/components/Card.jsx | 20 ++++++++++ src/js/components/Footer.jsx | 13 +++++++ src/js/components/Home.jsx | 69 +++++++++++++++++++++++---------- src/js/components/Jumbotron.jsx | 19 +++++++++ src/js/components/Navbar.jsx | 36 +++++++++++++++++ src/js/main.jsx | 26 ++++++------- src/{ => js}/styles/index.css | 2 +- 12 files changed, 168 insertions(+), 42 deletions(-) create mode 100644 src/js/App.jsx create mode 100644 src/js/components/Card.jsx create mode 100644 src/js/components/Footer.jsx create mode 100644 src/js/components/Jumbotron.jsx create mode 100644 src/js/components/Navbar.jsx rename src/{ => js}/styles/index.css (98%) 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/index.html b/index.html index 62cb9bc4f..84d2b56a9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Hello Rigo with Vanilla.js + exercise landing page with react
diff --git a/package-lock.json b/package-lock.json index d6b5fd56a..75c975b85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "project", "version": "0.0.0", "dependencies": { - "bootstrap": "^5.2.2", + "bootstrap": "^5.3.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -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": { @@ -5709,9 +5712,9 @@ } }, "node_modules/bootstrap": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", - "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "version": "5.3.8", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz", + "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==", "funding": [ { "type": "github", diff --git a/package.json b/package.json index 00c2157f5..4ea8f9777 100644 --- 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 new file mode 100644 index 000000000..45feb9469 --- /dev/null +++ b/src/js/App.jsx @@ -0,0 +1,7 @@ +import Home from "./components/Home"; + +const App = () => { + return ; +}; + +export default App; diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx new file mode 100644 index 000000000..dffe31cb7 --- /dev/null +++ b/src/js/components/Card.jsx @@ -0,0 +1,20 @@ +const Card = ({ image, title, description }) => { + return ( +
+ {title} +
+
{title}
+

{description}

+
+ +
+
+ ); +}; + +export default Card; diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx new file mode 100644 index 000000000..8edc59a96 --- /dev/null +++ b/src/js/components/Footer.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 74bc8d768..0dfb071a9 100644 --- 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 ( -
- + <> + + -

Hello Rigo!

-

- -

- - If you see this green button... bootstrap is working... - -

- Made by{" "} - 4Geeks Academy, with - love! -

-
+
+
+ {cards.map((item, index) => ( +
+ +
+ ))} +
+
+ +