diff --git a/.vscode/settings.json b/.vscode/settings.json index d83b5ba6c..4e885c756 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,11 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" + }, + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ], + "[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..a87d148a9 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": { diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx new file mode 100644 index 000000000..3c7954312 --- /dev/null +++ b/src/js/components/Card.jsx @@ -0,0 +1,31 @@ + +export const Card = ({raza, img, descripcion})=> { + + return ( + +
+
+ Imagen 1 + + +
+
{raza}
+

+ {descripcion} +

+
+ + +
+ Find Out More! +
+
+
+ + + + ) +} + + + diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx new file mode 100644 index 000000000..5d60396e3 --- /dev/null +++ b/src/js/components/Footer.jsx @@ -0,0 +1,15 @@ +export const Footer =()=>{ + + return(
+ +
+
Marco Cebrian
+

Copyright , your Website 2018.

+ +
+ +
) +} + + + diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 74bc8d768..f2e6055ba 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -2,27 +2,69 @@ 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 = () => { + const perros = [ + { + raza: "Labrador Retriever", + img: "https://media.istockphoto.com/id/122286715/es/foto/labrador-blanco-sobre-un-fondo-blanco.jpg?s=2048x2048&w=is&k=20&c=lqzjhPrzZo0Eaxc0uFNWyHYTAIMm10VgmkCKerUv4dM=", + descripcion: "Perro amable, inteligente y muy sociable. Ideal para familias y trabajos de asistencia." + }, + { + raza: "Pastor Alemán", + img: "https://images.unsplash.com/photo-1621951714491-3cde56a9cadf?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cGVycm8lMjBwYXN0b3IlMjBhbGVtJUMzJUExbnxlbnwwfHwwfHx8MA%3D%3D", + descripcion: "Raza fuerte, obediente y protectora. Conocida por su papel en trabajos policiales y de rescate." + }, + { + raza: "Golden Retriever", + img: "https://images.unsplash.com/photo-1633722715463-d30f4f325e24?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Z29sZGVuJTIwcmV0cmlldmVyfGVufDB8fDB8fHww", + descripcion: "Muy cariñoso y paciente, excelente compañero para familias y actividades al aire libre." + }, + { + raza: "Bulldog Francés", + img: "https://www.purina.es/sites/default/files/2021-02/BREED%20Hero_0051_french_bulldog.jpg", + descripcion: "Pequeño, simpático y tranquilo. Perfecto para espacios reducidos y vida urbana." + }, + { + raza: "Husky Siberiano", + img: "https://images.dog.ceo/breeds/husky/n02110185_1469.jpg", + descripcion: "Energético, independiente y muy resistente. Destaca por su bello pelaje y ojos llamativos." + }, + { + raza: "Beagle", + img: "https://images.dog.ceo/breeds/beagle/n02088364_11136.jpg", + descripcion: "Curioso, amigable y con un gran olfato. Excelente perro de compañía y rastreo." + } +]; return ( -
- +
+ + +
+ {perros.map((perro)=>( + + + ))} +
-

Hello Rigo!

-

- -

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

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

+
+
+ + ); }; -export default Home; \ No newline at end of file +export default Home; + + + diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx new file mode 100644 index 000000000..4ef8f5dbe --- /dev/null +++ b/src/js/components/Jumbotron.jsx @@ -0,0 +1,27 @@ +//header +export const Jumbotron = () => { + + return ( + +
+
+

A Warm Welcome!!!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, eligendi, in quo sunt possimus...

+ Call to Action!! +
+
+ + + + + + + + + + ) +} + + + + diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx new file mode 100644 index 000000000..17db20c57 --- /dev/null +++ b/src/js/components/Navbar.jsx @@ -0,0 +1,33 @@ +export const Navbar = () => { + + return() + +} + + + + +