first commit

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/App.css

@@ -1,8 +1,12 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
+  --white: #ffffff;
+  --gray--one: #F4FAFE;
+  --gray--two: #9798A9;
+  --gray--three: #3E416D;
 }
 
 .logo {
@@ -39,3 +43,78 @@
 .read-the-docs {
   color: #888;
 }
+
+.background-image-login {
+  background-image: url('assets/login-background.png');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+}
+
+.login-container__card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white);
+  width: 40vw;
+  height: calc(40vh - 20px);
+  border-radius:10px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: space-around;
+  justify-content: center;
+  align-items: stretch;
+  gap: 1.5rem;
+}
+
+.login-title {
+  display: flex; 
+  padding-left: calc(10% - 10px);
+  width: 80%;
+}
+
+.login-user, .login-password {
+  background-color: var(--gray--one);
+  color: var(--gray--two);
+  border: var(--gray--one);
+  width: 80%;
+  height: 2rem;
+  padding: 0.5rem;
+}
+
+.login-user:valid, .login-password:valid {
+  background-color: var(--white);
+  color: var(--gray--three);
+  border: var(--gray--three);
+  padding: 0.5rem;
+}
+
+.login-container__top, .login-container__bottom {
+  display: flex;
+  height: 30vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-container__center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-end;
+  justify-content: center;
+  align-items: center;
+  height: 40vh;
+}
+
+.login-container__center__left, .login-container__center__right {
+  width: 25vw;
+}
+
+.login__logo {
+  height: 6rem;
+}

src/App.tsx

@@ -1,5 +1,7 @@
 import reactLogo from './assets/react.svg'
 import './App.css'
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
 
 function App() {
 

src/components/Login.tsx

@@ -0,0 +1,31 @@
+import '../App.css'
+
+function Login() {
+
+  return (
+    <div className="Login">
+      <div className="main">
+        <div className="login-container background-image-login">
+          <div className="login-container__top">
+            <img className='login__logo' src="src/assets/larnu_logo.png" alt="" />
+          </div>
+          <div className="login-container__center">
+            <div className="login-container__center__left"></div>
+            <div className="login-container__card">
+              <h3 className='login-title'>Hola, terrícola</h3>
+              <form action="post" className='login-form'>
+                <input type="text" name='login-user' className='login-user' placeholder='Usuario...' required />
+                <input type="password" name="login-password" className='login-password' placeholder='Contraseña...' required />
+                <button type='submit'>Ingresar</button>
+              </form>
+            </div>
+            <div className="login-container__center__right"></div>
+          </div>
+          <div className="login-container__bottom"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Login

src/index.css

@@ -67,4 +67,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}

src/main.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import App from './App'
 import './index.css'
+import Login from './components/Login'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<App />} />
+      <Route path="login" element={<Login />} />
+    </Routes>
+  </BrowserRouter>
 )