primer commit
This commit is contained in:
Christopher Ulloa
commit
535919640a
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
README.md
Normal file
8
README.md
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
38
eslint.config.js
Normal file
38
eslint.config.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4550
package-lock.json
generated
Normal file
4550
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "crov-citas",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-big-calendar": "^1.17.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.1.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.17.0",
|
||||||
|
"@types/react": "^18.3.18",
|
||||||
|
"@types/react-dom": "^18.3.5",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.17.0",
|
||||||
|
"eslint-plugin-react": "^7.37.2",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"vite": "^6.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
3
src/App.css
Normal file
3
src/App.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.App-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
17
src/App.jsx
Normal file
17
src/App.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import SideBar from './components/Side Bar/SideBar';
|
||||||
|
import AppRoutes from './routes/AppRoutes';
|
||||||
|
import './app.css'
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<div className='App-container'>
|
||||||
|
<SideBar />
|
||||||
|
<AppRoutes />
|
||||||
|
</div>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/calendarioImg.png
Normal file
BIN
src/assets/calendarioImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
src/assets/fondo.png
Normal file
BIN
src/assets/fondo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/login-img.jpg
Normal file
BIN
src/assets/login-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
0
src/components/Calendar/Calendar.css
Normal file
0
src/components/Calendar/Calendar.css
Normal file
35
src/components/Calendar/Calendario.jsx
Normal file
35
src/components/Calendar/Calendario.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Calendar, dayjsLocalizer } from 'react-big-calendar';
|
||||||
|
import "react-big-calendar/lib/css/react-big-calendar.css";
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/es';
|
||||||
|
|
||||||
|
dayjs.locale('es');
|
||||||
|
|
||||||
|
const Calendario = () => {
|
||||||
|
const localizer = dayjsLocalizer(dayjs); // Configuración del localizador
|
||||||
|
|
||||||
|
// Eventos iniciales (puedes dejarlos vacíos si no tienes eventos todavía)
|
||||||
|
|
||||||
|
|
||||||
|
const events = [
|
||||||
|
{
|
||||||
|
title: `limpieza dental`,
|
||||||
|
start: dayjs('2025-1-25T12:00:00').toDate(),
|
||||||
|
end: dayjs('2025-1-25T13:02:00').toDate(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Calendar
|
||||||
|
localizer={localizer} // Correcto: localizer
|
||||||
|
events={events} // Pasar eventos
|
||||||
|
views={['month', 'week', 'day']}
|
||||||
|
style={{ height: "800px", width: "1200px", margin: "auto" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calendario;
|
||||||
25
src/components/Contents/Content.jsx
Normal file
25
src/components/Contents/Content.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './content.css'
|
||||||
|
import PrimaryButton from '../../components/button/PrimaryButton'
|
||||||
|
|
||||||
|
const Content = () => {
|
||||||
|
return (
|
||||||
|
<div className='content-container'>
|
||||||
|
|
||||||
|
<div className='content-title'>
|
||||||
|
<h2>Simplificando la manera que</h2>
|
||||||
|
<h2>Administras tus citas</h2>
|
||||||
|
</div>
|
||||||
|
<div className='content-text'>
|
||||||
|
<p>Ideal para adaptarse a las necesidades especificas de tu negocio optimizando</p>
|
||||||
|
<p>la gestión de reservas de manera eficiente y facil</p>
|
||||||
|
</div>
|
||||||
|
<div className='prymary-button-landing-page'>
|
||||||
|
<PrimaryButton/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Content
|
||||||
13
src/components/Contents/ImgHero.jsx
Normal file
13
src/components/Contents/ImgHero.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Fondo from '../../assets/calendarioImg.png'
|
||||||
|
|
||||||
|
const imgHero = () => {
|
||||||
|
return (
|
||||||
|
<div className='img-hero-container'>
|
||||||
|
<img src={Fondo} alt="hero" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default imgHero
|
||||||
23
src/components/Contents/content.css
Normal file
23
src/components/Contents/content.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
* {
|
||||||
|
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #424242;
|
||||||
|
}
|
||||||
116
src/components/Side Bar/SideBar.css
Normal file
116
src/components/Side Bar/SideBar.css
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Roboto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container {
|
||||||
|
width: 250px;
|
||||||
|
height: calc(100vh - 20px);
|
||||||
|
border: 1.5px #E7E7E7 solid;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #F6F6F6;
|
||||||
|
padding: 0.9rem;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos para el sidebar Header */
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-img img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-img img:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: ease 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header .sidebar-bell:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: ease 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos para el sidebar general */
|
||||||
|
|
||||||
|
.sidebar-general-title h3{
|
||||||
|
color: #898989;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 1rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-general-links span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
margin: 0.9rem 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-top: 3px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-general-links a {
|
||||||
|
color: #5A5A5A;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-general-links span:hover {
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Estilos para el sidebar others */
|
||||||
|
|
||||||
|
|
||||||
|
.sidebar-others-links span:hover {
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-others-title h3{
|
||||||
|
color: #898989;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 1rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-others-links span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
margin: 0.9rem 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-others-links a {
|
||||||
|
color: #5A5A5A;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos activos para los links */
|
||||||
|
|
||||||
|
.active-link {
|
||||||
|
color: #131313;
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
19
src/components/Side Bar/SideBar.jsx
Normal file
19
src/components/Side Bar/SideBar.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import SideBarHeader from './SideBarHeader'
|
||||||
|
import SideBarGeneral from './SideBarGeneral'
|
||||||
|
import SidebarOthers from './SidebarOthers'
|
||||||
|
import './SideBar.css'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const SideBar = () => {
|
||||||
|
return (
|
||||||
|
<div className='sidebar-container'>
|
||||||
|
<SideBarHeader />
|
||||||
|
<SideBarGeneral />
|
||||||
|
<SidebarOthers/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBar
|
||||||
49
src/components/Side Bar/SideBarGeneral.jsx
Normal file
49
src/components/Side Bar/SideBarGeneral.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './SideBar.css'
|
||||||
|
import {Link, useLocation} from 'react-router-dom'
|
||||||
|
|
||||||
|
|
||||||
|
const SideBarGeneral = () => {
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
|
||||||
|
<section className='sidebar-general-container'>
|
||||||
|
|
||||||
|
<div className='sidebar-general-title'>
|
||||||
|
<h3>General</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='sidebar-general-links'>
|
||||||
|
<Link to='/dashboard' className={location.pathname === '/dashboard' ? 'active-link' : ''}>
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A1A1A1" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" class="icon icon-tabler icons-tabler-outline icon-ta</svg>bler-clipboard">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
|
||||||
|
Dashboard
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link to='/calendar' className={location.pathname === '/calendar' ? 'active-link' : ''}>
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#A1A1A1" class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week</svg>">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z" /><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z" /><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /></svg>
|
||||||
|
Calendario
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link to='/date' className={location.pathname === '/date' ? 'active-link' : ''}>
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A1A1A1" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-plus">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.5 21h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v5" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
|
||||||
|
Agregar Cita
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBarGeneral
|
||||||
20
src/components/Side Bar/SideBarHeader.jsx
Normal file
20
src/components/Side Bar/SideBarHeader.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import logo from '../../assets/logo.png'
|
||||||
|
|
||||||
|
const SideBarHeader = () => {
|
||||||
|
return (
|
||||||
|
<section className='sidebar-header'>
|
||||||
|
<div className='sidebar-img'>
|
||||||
|
<img src={logo} alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='sidebar-bell'>
|
||||||
|
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z" stroke="#A1A1A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBarHeader
|
||||||
34
src/components/Side Bar/SideBarOthers.jsx
Normal file
34
src/components/Side Bar/SideBarOthers.jsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const SideBarOthers = () => {
|
||||||
|
return (
|
||||||
|
<section className='sidebar-others-container'>
|
||||||
|
<div className='sidebar-others-title'>
|
||||||
|
<h3>Others</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='sidebar-others-links'>
|
||||||
|
<a href="">
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A1A1A1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-settings"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>
|
||||||
|
Configuracion
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A1A1A1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-help"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 17l0 .01" /><path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" /></svg>
|
||||||
|
Ayuda & Soporte
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#A1A1A1" class="icon icon-tabler icons-tabler-filled icon-tabler-toggle-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9a3 3 0 1 1 -3 3l.005 -.176a3 3 0 0 1 2.995 -2.824" /><path d="M16 5a7 7 0 0 1 0 14h-8a7 7 0 0 1 0 -14zm0 2h-8a5 5 0 1 0 0 10h8a5 5 0 0 0 0 -10" /></svg>
|
||||||
|
Modo oscuro
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBarOthers
|
||||||
11
src/components/button/PrimaryButton.css
Normal file
11
src/components/button/PrimaryButton.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.primary-button-container {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
color: #424242;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 0.8rem 2.2rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
12
src/components/button/PrimaryButton.jsx
Normal file
12
src/components/button/PrimaryButton.jsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './PrimaryButton.css'
|
||||||
|
|
||||||
|
const PrimaryButton = () => {
|
||||||
|
return (
|
||||||
|
<div className='primary-button-container'>
|
||||||
|
<h4>Empezar</h4>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PrimaryButton
|
||||||
34
src/components/footer/Footer.jsx
Normal file
34
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './footer.css'
|
||||||
|
import logo from '../../assets/logo.png'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div className='footer'>
|
||||||
|
<nav className='nav-footer'>
|
||||||
|
<ul>
|
||||||
|
<li>inicio</li>
|
||||||
|
<li>Nosotros</li>
|
||||||
|
<li><img src={logo} alt="logoImg" /></li>
|
||||||
|
<li>Precios</li>
|
||||||
|
<li>Registro</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div className='footer-icons'>
|
||||||
|
<div>
|
||||||
|
<h5>©Crov 2025. Derechos Reservados</h5>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-meta"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 10.174c1.766 -2.784 3.315 -4.174 4.648 -4.174c2 0 3.263 2.213 4 5.217c.704 2.869 .5 6.783 -2 6.783c-1.114 0 -2.648 -1.565 -4.148 -3.652a27.627 27.627 0 0 1 -2.5 -4.174z" /><path d="M12 10.174c-1.766 -2.784 -3.315 -4.174 -4.648 -4.174c-2 0 -3.263 2.213 -4 5.217c-.704 2.869 -.5 6.783 2 6.783c1.114 0 2.648 -1.565 4.148 -3.652c1 -1.391 1.833 -2.783 2.5 -4.174z" /></svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
47
src/components/footer/footer.css
Normal file
47
src/components/footer/footer.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
|
||||||
|
.footer {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
margin: 2rem 4rem 2rem 4rem;
|
||||||
|
border: 1px #FBFBFB solid;
|
||||||
|
padding: 3rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #FBFBFB;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-footer ul {
|
||||||
|
list-style: none;
|
||||||
|
gap: 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-footer ul li {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.nav-footer ul li img {
|
||||||
|
width: 150px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: space-between ;
|
||||||
|
border-top: 1px #131313 solid;
|
||||||
|
width: 80%;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-icons h5 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
39
src/components/header/Header.jsx
Normal file
39
src/components/header/Header.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './header.css'
|
||||||
|
import logo from '../../assets/logo.png'
|
||||||
|
import {Link} from 'react-router-dom'
|
||||||
|
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<header className='header'>
|
||||||
|
|
||||||
|
<div className='logo'>
|
||||||
|
<a href="">
|
||||||
|
<img src={logo} alt="logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>Inicio</li>
|
||||||
|
<li>Servicios</li>
|
||||||
|
<li>Dentista</li>
|
||||||
|
<li>SPA</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className='buttton'>
|
||||||
|
<Link to='/login'>
|
||||||
|
<h4>Acceder</h4>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
||||||
43
src/components/header/header.css
Normal file
43
src/components/header/header.css
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #2B2B2B;
|
||||||
|
color: #f5f5f5;
|
||||||
|
width: 600px;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 0 0.45rem 0 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: 'Helvetica Neue', Roboto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .buttton {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #2B2B2B;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'Helvetica Neue', Roboto;
|
||||||
|
}
|
||||||
25
src/main.jsx
Normal file
25
src/main.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import LoginPage from './pages/Login/LoginPage';
|
||||||
|
import LandingPage from './pages/landingPage/LandingPage'
|
||||||
|
import AppRoutes from './routes/AppRoutes';
|
||||||
|
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<AppRoutes/>
|
||||||
|
<LandingPage/>
|
||||||
|
</BrowserRouter>
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{/* <App /> */}
|
||||||
|
{/* <LoginPage/> */}
|
||||||
3
src/pages/CalendarPage/CalendarPage.css
Normal file
3
src/pages/CalendarPage/CalendarPage.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.calendar-page-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
13
src/pages/CalendarPage/CalendarPage.jsx
Normal file
13
src/pages/CalendarPage/CalendarPage.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Calendario from '../../components/Calendar/Calendario'
|
||||||
|
import './CalendarPage.css'
|
||||||
|
|
||||||
|
const CalendarPage = () => {
|
||||||
|
return (
|
||||||
|
<div className='calendar-page-container'>
|
||||||
|
<Calendario/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CalendarPage
|
||||||
3
src/pages/DashboardPage/DashboardPage.css
Normal file
3
src/pages/DashboardPage/DashboardPage.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.dashboard-page-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
13
src/pages/DashboardPage/DashboardPage.jsx
Normal file
13
src/pages/DashboardPage/DashboardPage.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import './DashboardPage.css'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const DashboardPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="dashboard-page-container">
|
||||||
|
<h1>Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DashboardPage
|
||||||
3
src/pages/DatePage/DatePage.css
Normal file
3
src/pages/DatePage/DatePage.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.Date-page-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
13
src/pages/DatePage/DatePage.jsx
Normal file
13
src/pages/DatePage/DatePage.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './DatePage.css'
|
||||||
|
import SideBar from "../../components/Side Bar/SideBar";
|
||||||
|
|
||||||
|
const DatePage = () => {
|
||||||
|
return (
|
||||||
|
<div className='Date-page-container'>
|
||||||
|
<h1>Date</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DatePage
|
||||||
135
src/pages/Login/LoginPage.css
Normal file
135
src/pages/Login/LoginPage.css
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.LoginPage-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Login-form-container {
|
||||||
|
/* border: 1px green solid; */
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-img-container {
|
||||||
|
/* border: 1px blue solid; */
|
||||||
|
margin: 1rem;
|
||||||
|
border-radius: 38px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: url('/src/assets/login-img.jpg') no-repeat center bottom / cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
/* border: 1px red solid; */
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header span{
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #737373;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-container-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
/* border: 1px blue solid; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-content-container {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
/* border: 1px rosybrown solid; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content-container h3 {
|
||||||
|
font-size: 2.6rem;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content-container p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #737373;
|
||||||
|
padding-bottom: 2.5rem ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content-container h3, p{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-formulario input{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-forgot-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 1.3rem 0 1.3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-formulario form label{
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #131313;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-formulario input{
|
||||||
|
margin: 13px 0 13px 0;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-color: #dddddd;
|
||||||
|
opacity: 50%;
|
||||||
|
border: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding:10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-forgot-container span {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #131313;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-formulario button {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #131313;
|
||||||
|
color: #f5f5f5;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
64
src/pages/Login/LoginPage.jsx
Normal file
64
src/pages/Login/LoginPage.jsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './LoginPage.css'
|
||||||
|
import imgLogo from '/src/assets/logo.png'
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
return (
|
||||||
|
<section className='LoginPage-container'>
|
||||||
|
|
||||||
|
<div className='Login-form-container'>
|
||||||
|
|
||||||
|
<div className='login-header'>
|
||||||
|
<div>
|
||||||
|
<img src={imgLogo} alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='span-container-icon'>
|
||||||
|
<svg width="22px" height="22px" viewBox="0 0 24 24" fill="#737373" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 12H4M4 12L10 18M4 12L10 6" stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<span>ir a inicio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className='login-content'>
|
||||||
|
|
||||||
|
<div className='login-content-container'>
|
||||||
|
<div>
|
||||||
|
<h3>Bienvenido de nuevo</h3>
|
||||||
|
<p>Introduce tu email y contraseña para acceder a tu cuenta</p>
|
||||||
|
</div>
|
||||||
|
<div className='login-formulario'>
|
||||||
|
<form action="">
|
||||||
|
<label htmlFor="">Email</label>
|
||||||
|
<input type="text" placeholder='introduce tu email'/>
|
||||||
|
<label htmlFor="">Contraseña</label>
|
||||||
|
<input type="text" placeholder='introduce tu contraseña'/>
|
||||||
|
<div className='login-forgot-container'>
|
||||||
|
<div> <span>Recordar conexión</span></div>
|
||||||
|
<div><span>Olvide mi contraseña</span></div>
|
||||||
|
</div>
|
||||||
|
<button>Iniciar sesión</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className='login-img-container'>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginPage
|
||||||
39
src/pages/landingPage/LandingPage.jsx
Normal file
39
src/pages/landingPage/LandingPage.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Header from '../../components/header/Header'
|
||||||
|
import './landingPage.css'
|
||||||
|
import Content from '../../components/Contents/Content'
|
||||||
|
import ImgHero from '../../components/Contents/imgHero'
|
||||||
|
import Footer from '../../components/footer/Footer'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
|
||||||
|
const LandingPage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<section className='Main-section-landing-page'>
|
||||||
|
<div className='header-landing-page'>
|
||||||
|
<Header/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='content-landing-page'>
|
||||||
|
<Content/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='img-hero-landing-page'>
|
||||||
|
<ImgHero/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<Footer/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LandingPage
|
||||||
79
src/pages/landingPage/landingPage.css
Normal file
79
src/pages/landingPage/landingPage.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header-landing-page {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Main-section-landing-page {
|
||||||
|
background: url('./src/assets/fondo.png') no-repeat center center / cover;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prymary-button-landing-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-hero-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-hero-container img {
|
||||||
|
width: 75%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-content-container {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
margin: 2rem 4rem 2rem 4rem;
|
||||||
|
border: 1px #FBFBFB solid;
|
||||||
|
padding: 6rem 10rem 6rem 10rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #FBFBFB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thrid-content-container {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
margin: 2rem 4rem 2rem 4rem;
|
||||||
|
border: 1px #FBFBFB solid;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #FBFBFB;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fourth-content-container{
|
||||||
|
max-width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
margin: 2rem 4rem 2rem 4rem;
|
||||||
|
border: 1px #FBFBFB solid;
|
||||||
|
padding: 3rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #FBFBFB;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden ;
|
||||||
|
background: url(../../assets/backgroundF.png) no-repeat center center/cover;
|
||||||
|
}
|
||||||
|
|
||||||
19
src/routes/AppRoutes.jsx
Normal file
19
src/routes/AppRoutes.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Routes, Route } from 'react-router-dom';
|
||||||
|
import DashboardPage from '../pages/DashboardPage/DashboardPage';
|
||||||
|
import CalendarPage from '../pages/CalendarPage/CalendarPage';
|
||||||
|
import DatePage from '../pages/DatePage/DatePage';
|
||||||
|
import LoginPage from '../pages/Login/LoginPage';
|
||||||
|
|
||||||
|
|
||||||
|
const AppRoutes = () => {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/dashboard" element={<DashboardPage />} />
|
||||||
|
<Route path="/calendar" element={<CalendarPage />} />
|
||||||
|
<Route path="/date" element={<DatePage />} />
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AppRoutes;
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user