diff --git a/index.html b/index.html index 62cb9bc4f..70fe3b26b 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,15 @@ - + - Hello Rigo with Vanilla.js + ESLO|AGENCIA PEDAGÓGICA +
+ + 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/img/ESLO.ico b/src/img/ESLO.ico new file mode 100644 index 000000000..1696aec97 Binary files /dev/null and b/src/img/ESLO.ico differ diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx new file mode 100644 index 000000000..1ec0342fa --- /dev/null +++ b/src/js/components/Card.jsx @@ -0,0 +1,22 @@ +import React from "react"; + +const Card = (props) => { + return( + +
+
+
+ imagen +
+
{props.packagesNamesProps}
+

{props.packagesDescriptionProps}

+ Más Información +
+
+
+
+ + ) +}; + +export default Card; \ No newline at end of file diff --git a/src/js/components/CardFinal.jsx b/src/js/components/CardFinal.jsx new file mode 100644 index 000000000..ebb4d922e --- /dev/null +++ b/src/js/components/CardFinal.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import Card from "../components/Card.jsx"; + +const CardFinal = () => { + let cardInformation = [ + {urlImageCard: "https://www.ecoportal.net/wp-content/uploads/2019/04/simientes.jpg", + packagesNames: "Paquete: Semilla", + packagesDescription: "Transforma tu idea en el esqueleto profesional de un curso[...]" + }, + {urlImageCard: "https://cdn77.pressenza.com/wp-content/uploads/2025/01/crecimiento-freepik-1-820x442.jpg", + packagesNames: "Paquete: Crecimiento", + packagesDescription: "Dale vida a tu estructura con actividades para tus estudiantes[...]" + }, + {urlImageCard: "https://mexico.unir.net/wp-content/uploads/sites/6/2024/12/funciones-docente-universidad.jpg", + packagesNames: "Paquete: Potencial", + packagesDescription: "Refuerza el aprendizaje de tus alumnos con recursos clave[...]" + }, + {urlImageCard: "https://www.agustinmedina.com/wp-content/uploads/676767.jpeg", + packagesNames: "Paquete: Éxito", + packagesDescription: "El paquete todo incluido para un curso de alto impacto y calidad[...]" + } + ] + return( + cardInformation.map((item, index, array) =>{ + return ( +
+ +
+ ) + }) + ) +} + +export default CardFinal; \ No newline at end of file diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx new file mode 100644 index 000000000..12e784b72 --- /dev/null +++ b/src/js/components/Footer.jsx @@ -0,0 +1,30 @@ +import React from "react"; + +const Footer = () => { + return ( +
+
+
+
+

Copyright © ESLO 2025

+
+
+ +
+
+ eslo.edu +
+
+ +
+
+ Eslo Educa +
+
+
+
+ + ) +}; + +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..2bf51f230 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -2,26 +2,42 @@ import React from "react"; //include images into your bundle import rigoImage from "../../img/rigo-baby.jpg"; +import Navbar from "../components/Navbar.jsx"; +import Jumbotron from "../components/Jumbotron.jsx"; +import CardFinal from "../components/CardFinal.jsx"; +import Footer from "../components/Footer.jsx"; //create your first component const Home = () => { return ( -
- - -

Hello Rigo!

-

- -

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

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

+
+ + + + + +
+
+
+ +
+
+
+ + + + + +
+ + + + + + + + ); }; diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx new file mode 100644 index 000000000..e1970bca8 --- /dev/null +++ b/src/js/components/Jumbotron.jsx @@ -0,0 +1,23 @@ +import React from "react"; + +const Jumbotron = () => { + return ( +
+
+
+
+
+
+

¿QUIÉNES SOMOS?


+

En ESLO somos una agencia de orientación y diseño de procesos de aprendizaje en entornos particulares y diversas comunidades de aprendizaje. Nuestro compromiso es innovar, analizar y proponer estretegías de aprendizajes con propósito y valor duradero, ofreciendo siempre resultados garantizados a nuestros colaboradores.

+ Contáctanos +
+
+
+
+
+
+ ) +}; + +export default Jumbotron; \ No newline at end of file diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx new file mode 100644 index 000000000..4d8f5f893 --- /dev/null +++ b/src/js/components/Navbar.jsx @@ -0,0 +1,32 @@ +import React from "react"; + +const Navbar = () => { + return ( + + ) +}; + +export default Navbar; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 50716eb70..d7ca2b7bc 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,11 +1,24 @@ -/* +body{ + background-color: rgb(232, 167, 3); +} - You can write your own styles here... - - - ...Or you can use the import command to include - other sylesheets into your bunde as well, e.j: - - import 'relative/path/to/stylesheet.scss'; +.bgImage{ + background-image: url(https://integratec.com/blog/imagenes/trabajo-equipo-productividad.webp); + background-size: cover; +} -*/ +.bgInfo{ + background-color: rgba(0, 0, 0, 0.813); +} + +.marginCopyright{ + margin-left: 38rem; +} + +.anchorsNavbar:hover{ +background-color: rgba(245, 189, 20, 0.83); +} + +.anchorsFooter:hover{ + background-color: rgba(240, 248, 255, 0.269); +}