moi branch creation

resources/js/components/App.js

@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Example from "./Example";
+import AboutUs from "./aboutUs/AboutUs.js";
+import UserProfiles from "./userProfiles/UserProfiles.js";
+import UserCard from "./userCard/UserCard.js";
+
 
 function App() {
     return (
         <div className="container">
-            <Button />
+            <AboutUs />
+            <UserProfiles />
+            <UserCard />
+
+
         </div>
     );
 }

resources/js/components/aboutUs/AboutUs.css

@@ -0,0 +1,26 @@
+h2 {
+    color:#16C79A;
+}
+
+.aboutUs-container {
+    display: flex;
+    margin: auto;
+    flex-direction: column;
+    align-items: center;
+    width: 750px;
+}
+
+.aboutUs-container p {
+    text-align: center !important;
+    font-size: 20px;
+}
+
+@media screen and (max-width: 768px)  { 
+    .abotUs-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-wrap: wrap;
+        margin: 30px;
+    } 
+}

resources/js/components/aboutUs/AboutUs.js

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./AboutUs.css";
+
+function AboutUs() {
+    return (
+        <div className="aboutUs-container">
+                <h2>Sobre nosotros</h2>
+                <p>PERSEO, cuenta con más de 20 años de experiencia en el sector de Recursos humanos, conectado a los mejores candidatos con empresas punteras del sector TIC.
+
+                Si eres <b>candidato</b> en búsqueda activa de trabajo, no dudes en registrar tu perfil en nuestra plataforma, así las empresas podrán valorar tu candidatura para las posiciones vacantes.
+
+                Si eres <b>empresa</b>, registrate con nostros para poder encontra el mejor candidato para tu proyecto.</p>            
+        </div>
+    );
+};
+
+export default AboutUs;

resources/js/components/userCard/UserCard.js

@@ -0,0 +1,37 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./UserCard.css";
+
+function UserCard() {
+    return (
+        <div className="userCard-Container">
+            <div className="userCard-Container__top">
+                <img src="../assets/lorena.png"/>
+                <div className="userCard-Container__data">
+                    <span>Lorena Criado</span>
+                    <span>[email protected]</span>
+                    <span>Front-End</span>
+                    <span>HTML, CSS, JavaScript, React</span>
+                </div>
+
+
+            </div>  
+
+            <div className="userCard-Container__bottom">
+                <div className="userCard-Container__text1">
+                    <h3>Experiencia laboral</h3>
+                    <p>5</p>
+                </div>
+                <div className="userCard-Container__text2">
+                    <h3>Experiencia académica</h3>
+                    <p>Front-End developer, CSS, Ract y JavaScript</p>
+                </div>                
+            </div>  
+
+
+
+        </div>
+    );
+};
+
+export default UserCard;

resources/js/components/userProfiles/UserProfiles.css

@@ -0,0 +1,40 @@
+
+h2 {
+    margin-top: 50px;
+    color:#16C79A;
+}
+
+.userProfiles-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.userCards-container {
+    display: flex;
+
+}
+
+.userCards {
+width: 290px;
+height: 416px;
+margin-left: 20px;
+margin-right: 20px;
+}
+
+img {
+    width: 290px;
+    height: 303px;
+}
+
+p {
+    font-size: 20px;
+    text-align: left !important;
+    margin: 0px;
+}
+
+h3 {
+    margin: 0px;
+    color:#16C79A;
+}

resources/js/components/userProfiles/UserProfiles.js

@@ -0,0 +1,33 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./UserProfiles.css";
+
+function UserProfiles() {
+    return (
+        <div className="userProfiles-container">
+            <h2>Programadores en búsqueda de empleo</h2>
+            <div className="userCards-container">
+                <div className="userCards">
+                    <img src="../assets/moi.png"/>
+                    <h3>Moises Mena</h3>
+                    <p>Front-End developer, CSS, Ract y JavaScript</p>
+                </div>
+
+                <div className="userCards">
+                    <img src="../assets/lorena.png"/>
+                    <h3>Lorena Criado</h3>
+                    <p>Front-End developer, CSS, Ract y JavaScript</p>
+                </div>
+
+                <div className="userCards">
+                    <img src="../assets/vanessa.png"/>
+                    <h3>Vanessa Poppe</h3>
+                    <p>Front-End developer, CSS, Ract y JavaScript</p>
+                </div>
+            </div>
+
+        </div>
+    );
+};
+
+export default UserProfiles;