crovadmin/AGENDA_DIGITAL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

primer commit

Browse Source
This commit is contained in:
Christopher Ulloa 2025-01-28 17:16:59 -07:00
commit 535919640a
42 changed files with 5621 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/App.css Normal file
View File

@ -0,0 +1,3 @@
.App-container {
display: flex;
}

17
src/App.jsx Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/assets/fondo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/login-img.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

0
src/components/Calendar/Calendar.css Normal file
View File

35
src/components/Calendar/Calendario.jsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

@ -0,0 +1,3 @@
.calendar-page-container {
display: flex;
}

13
src/pages/CalendarPage/CalendarPage.jsx Normal file
View 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
View File

@ -0,0 +1,3 @@
.dashboard-page-container {
display: flex;
}

13
src/pages/DashboardPage/DashboardPage.jsx Normal file
View 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
View File

@ -0,0 +1,3 @@
.Date-page-container {
display: flex;
}

13
src/pages/DatePage/DatePage.jsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})