Done

src/App.jsx

@@ -1,9 +1,43 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <h1>LAB | React Training</h1>
+
+      <IdCard
+        lastName="García"
+        firstName="Juan"
+        gender="masculino"
+        height={180}
+        birth={new Date("1990-03-15")}
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+
+      <IdCard
+        lastName="Martínez"
+        firstName="Ana"
+        gender="femenino"
+        height={165}
+        birth={new Date("1992-08-22")}
+        picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+      <Greetings lang="es">María</Greetings>
+      <Greetings lang="en">John</Greetings>
+
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+      <BoxColor r={0} g={0} b={255} />
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+function BoxColor({ r, g, b }) {
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+  const textColor = luminance > 186 ? "black" : "white";
+
+  const divStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`,
+    color: textColor,
+    padding: "20px",
+    margin: "10px 0",
+    borderRadius: "5px",
+    textAlign: "center"
+  };
+
+  return (
+    <div style={divStyle}>
+      rgb({r}, {g}, {b})
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+function Greetings({ lang, children }) {
+  const greetings = {
+    de: "Hallo",
+    en: "Hello",
+    es: "Hola",
+    fr: "Bonjour",
+  };
+
+  const greetingText = greetings[lang] || "Hello";
+
+  return <div className="greeting">{greetingText} {children}</div>;
+}
+
+export default Greetings;

src/components/IdCard.css

@@ -0,0 +1,50 @@
+.IdCard {
+  display: flex;
+  align-items: center;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  padding: 16px 20px;
+  margin: 16px auto;
+  max-width: 500px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
+}
+
+.IdCard img {
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  object-fit: cover;
+  margin-right: 20px;
+  border: 2px solid #ccc;
+}
+
+.IdCard-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.IdCard-info p {
+  margin: 4px 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.IdCard-info strong {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+/* Responsivo */
+@media (max-width: 400px) {
+  .IdCard {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .IdCard img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+}

src/components/IdCard.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./IdCard.css";
+
+function IdCard({ firstName, lastName, gender, height, birth, picture }) {
+  return (
+    <div className="IdCard">
+      <img src={picture} alt={`${firstName} ${lastName}`} />
+      <div className="IdCard-info">
+        <p><strong>Nombre:</strong> {firstName}</p>
+        <p><strong>Apellido:</strong> {lastName}</p>
+        <p><strong>Género:</strong> {gender}</p>
+        <p><strong>Altura:</strong> {height} cm</p>
+        <p><strong>Fecha de nacimiento:</strong> {birth.toLocaleDateString("es-ES")}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/random.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Random({ min, max }) {
+  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <div className="Random">
+      <p>Random value between {min} and {max} =&gt; {randomNumber}</p>
+    </div>
+  );
+}
+
+export default Random;