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

ingresar login , mostrar tarjetas clinica dental y SPA

Browse Source
This commit is contained in:
Christopher Ulloa 2025-01-29 14:42:11 -07:00
parent 535919640a
commit f1ceade514
10 changed files with 424 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/Contents/DentistaSection.css Normal file
View File

@ -0,0 +1,122 @@
.dentista-section-header {
display: flex;
justify-content: space-between;
}
.dentista-section-container {
display: flex;
justify-content: center;
height: 600px;
margin: 3rem;
}
.dentista-div-container {
background-color: #FBFBFB;
border-radius: 24px;
width: 85%;
height: 100%;
padding: 2.5rem;
}
.dentista-button {
background-color: #131313;
border-radius: 6px;
color: #f5f5f5;
padding: 13px 15px 13px 15px;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
}
.dentista-section-tittle h2 {
font-size: 2.6rem;
font-weight: 800;
color: #131313;
margin-bottom: 10px;
}
.dentista-section-tittle span {
font-size: 1rem;
font-weight: 500;
color: #737373;
}
.dentista-card-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5rem;
gap: 2rem;
}
.dentista-card-one {
border: 0.5px #D9D9D9 solid;
border-radius: 8px;
}
.dentista-card-img-one {
width: 100%;
height: 200px;
background-image: url("https://www.implantesdentalesmm.com/wp-content/uploads/limpieza-dental.jpg");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.dentista-card-img-two {
width: 100%;
height: 200px;
background-image: url("https://clinicascliladent.com/wp-content/uploads/2021/04/Imagen1-1024x683.jpg");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.dentista-card-img-three {
width: 100%;
height: 200px;
background-image: url("https://carlossaizsmile.com/wp-content/uploads/2023/12/blanqueamiento-dental-con-laser-scaled.jpg");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.dentista-card-img-four {
width: 100%;
height: 200px;
background-image: url("https://staticnew-prod.topdoctors.mx/files/Image/large/21c2ae4cfca0f880cb2d50d4def932ff.jpg");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.dentista-card-content-one {
padding: 1rem;
}
.dentista-card-content-one h3 {
font-size: 1.1rem;
padding-bottom: 10px;
font-weight: 600;
color: #131313;
}
.dentista-card-content-one span {
color: #737373;
font-size: 1rem;
font-weight: 500;
}
.dentista-button-one {
margin-top: 10px;
color: #131313;
font-weight: 500;
border: 0.5px #D9D9D9 solid;
width: 80px;
padding: 3px 0 3px 12px;
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}

76
src/components/Contents/DentistaSection.jsx Normal file
View File

@ -0,0 +1,76 @@
import React from 'react'
import './DentistaSection.css'
const DentistaSection = () => {
return (
<section className='dentista-section-container'>
<div className='dentista-div-container'>
<div className='dentista-section-header'>
<div className='dentista-section-tittle'>
<h2>Dentista</h2>
<span>Aqui puedes encontrar los distintos servicios que ofrecemos en Dentista</span>
</div>
<div className='dentista-section-button'>
<div className='dentista-button'>
<span>Mas Servicios</span>
</div>
</div>
</div>
<div className='dentista-card-container'>
<div className='dentista-card-one'>
<div className='dentista-card-img-one'>
</div>
<div className='dentista-card-content-one'>
<h3>Limpieza Dental</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='dentista-button-one'>Reservar</div>
</div>
</div>
<div className='dentista-card-one'>
<div className='dentista-card-img-two'>
</div>
<div className='dentista-card-content-one'>
<h3>Brackets</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='dentista-button-one'>Reservar</div>
</div>
</div>
<div className='dentista-card-one'>
<div className='dentista-card-img-three'>
</div>
<div className='dentista-card-content-one'>
<h3>Blanqueamiento dental</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='dentista-button-one'>Reservar</div>
</div>
</div>
<div className='dentista-card-one'>
<div className='dentista-card-img-four'>
</div>
<div className='dentista-card-content-one'>
<h3>Extración de muelas del juicio</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='dentista-button-one'>Reservar</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default DentistaSection

122
src/components/Contents/SpaSection.css Normal file
View File

@ -0,0 +1,122 @@
.spa-section-header {
display: flex;
justify-content: space-between;
}
.spa-section-container {
display: flex;
justify-content: center;
height: 600px;
margin: 3rem;
}
.spa-div-container {
background-color: #FBFBFB;
border-radius: 24px;
width: 85%;
height: 100%;
padding: 2.5rem;
}
.spa-button {
background-color: #131313;
border-radius: 6px;
color: #f5f5f5;
padding: 13px 15px 13px 15px;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
}
.spa-section-tittle h2 {
font-size: 2.6rem;
font-weight: 800;
color: #131313;
margin-bottom: 10px;
}
.spa-section-tittle span {
font-size: 1rem;
font-weight: 500;
color: #737373;
}
.spa-card-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5rem;
gap: 2rem;
}
.spa-card-one {
border: 0.5px #D9D9D9 solid;
border-radius: 8px;
}
.spa-card-img-one {
width: 100%;
height: 200px;
background-image: url("https://image-tc.galaxy.tf/wijpeg-7kxanuivyujmo3z2rm7i1snkf/cabina-spa_wide.jpg?rotate=0&crop=0%2C188%2C1800%2C1012&width=2100");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.spa-card-img-two {
width: 100%;
height: 200px;
background-image: url("https://cdn.prod.website-files.com/661e87b5aaf2b41a57be1cc4/6646edaf382783ffd032b63d_64dbbb80824441fc71eb925b_raphael-lovaski-cJwl8182Mjs-unsplash.webp");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.spa-card-img-three {
width: 100%;
height: 200px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8xGS1S41G2SHQsBl-9WqsGosRIXkgfMsrm_3XEdNk1WS5N2sphaq8qFPkFftoQYID8RM&usqp=CAU");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.spa-card-img-four {
width: 100%;
height: 200px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ41vuvzkSL_yiib4YjcBb9GBlZEOmZ4XadYw&s");
background-size: cover;
background-position: center;
border-radius: 8px 8px 0 0;
}
.spa-card-content-one {
padding: 1rem;
}
.spa-card-content-one h3 {
font-size: 1.1rem;
padding-bottom: 10px;
font-weight: 600;
color: #131313;
}
.spa-card-content-one span {
color: #737373;
font-size: 1rem;
font-weight: 500;
}
.spa-button-one {
margin-top: 10px;
color: #131313;
font-weight: 500;
border: 0.5px #D9D9D9 solid;
width: 80px;
padding: 3px 0 3px 12px;
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}

75
src/components/Contents/SpaSection.jsx Normal file
View File

@ -0,0 +1,75 @@
import React from 'react'
import './SpaSection.css'
const SpaSection = () => {
return (
<section className='spa-section-container'>
<div className='spa-div-container'>
<div className='spa-section-header'>
<div className='spa-section-tittle'>
<h2>SPA</h2>
<span>Aqui puedes encontrar los distintos servicios que ofrecemos en SPA</span>
</div>
<div className='spa-section-button'>
<div className='spa-button'>
<span>Mas Servicios</span>
</div>
</div>
</div>
<div className='spa-card-container'>
<div className='spa-card-one'>
<div className='spa-card-img-one'>
</div>
<div className='spa-card-content-one'>
<h3>Hidroterapia</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='spa-button-one'>Reservar</div>
</div>
</div>
<div className='spa-card-one'>
<div className='spa-card-img-two'>
</div>
<div className='spa-card-content-one'>
<h3>Masaje</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='spa-button-one'>Reservar</div>
</div>
</div>
<div className='spa-card-one'>
<div className='spa-card-img-three'>
</div>
<div className='spa-card-content-one'>
<h3>Yoga y meditación</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='spa-button-one'>Reservar</div>
</div>
</div>
<div className='spa-card-one'>
<div className='spa-card-img-four'>
</div>
<div className='spa-card-content-one'>
<h3>Saunas y baños de vapor</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
<div className='spa-button-one'>Reservar</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default SpaSection

2
src/components/footer/Footer.jsx
View File

@ -4,6 +4,7 @@ import logo from '../../assets/logo.png'
const Footer = () => {
return (
<section className='footer-container'>
<div className='footer'>
<nav className='nav-footer'>
<ul>
@ -28,6 +29,7 @@ const Footer = () => {
</div>
</div>
</div>
</section>
)
}

16
src/components/footer/footer.css
View File

@ -1,8 +1,16 @@
.footer-container {
width: 100%;
height: 5%;
/* border: 1px red solid; */
display: flex;
align-items: center;
justify-content: center;
}
.footer {
max-width: 100%;
height: 25%;
margin: 2rem 4rem 2rem 4rem;
width: 80%;
margin: 0rem 0rem 2rem 0rem;
border: 1px #FBFBFB solid;
padding: 3rem;
border-radius: 16px;
@ -22,7 +30,7 @@
.nav-footer ul li {
cursor: pointer;
font-size: 1.2rem;
font-size: 1.1rem;
font-weight: 500;
}

6
src/main.jsx
View File

@ -1,9 +1,6 @@
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';
@ -11,7 +8,6 @@ createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<AppRoutes/>
<LandingPage/>
</BrowserRouter>
</StrictMode>
);
@ -21,5 +17,3 @@ createRoot(document.getElementById('root')).render(
{/* <App /> */}
{/* <LoginPage/> */}

10
src/pages/Login/LoginPage.jsx
View File

@ -15,7 +15,7 @@ const LoginPage = () => {
<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"/>
<path d="M20 12H4M4 12L10 18M4 12L10 6" stroke="#737373" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>ir a inicio</span>
</div>
@ -27,14 +27,14 @@ const LoginPage = () => {
<div className='login-content-container'>
<div>
<h3>Bienvenido de nuevo</h3>
<p>Introduce tu email y contraseña para acceder a tu cuenta</p>
<p>Introduce tu usuario 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="">Usuario</label>
<input type="text" placeholder='introduce tu usuario*'/>
<label htmlFor="">Contraseña</label>
<input type="text" placeholder='introduce tu contraseña'/>
<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>

14
src/pages/landingPage/LandingPage.jsx
View File

@ -4,7 +4,8 @@ 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'
import SpaSection from '../../components/Contents/SpaSection'
import DentistaSection from '../../components/Contents/DentistaSection'
const LandingPage = () => {
return (
@ -24,13 +25,10 @@ const LandingPage = () => {
</div>
</section>
<section>
<Footer/>
</section>
<SpaSection/>
<DentistaSection/>
<Footer/>
</>
)

5
src/routes/AppRoutes.jsx
View File

@ -3,11 +3,14 @@ import DashboardPage from '../pages/DashboardPage/DashboardPage';
import CalendarPage from '../pages/CalendarPage/CalendarPage';
import DatePage from '../pages/DatePage/DatePage';
import LoginPage from '../pages/Login/LoginPage';
import LandingPage from '../pages/landingPage/LandingPage';
const AppRoutes = () => {
return (
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="/calendar" element={<CalendarPage />} />
<Route path="/date" element={<DatePage />} />