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

EN LANDING PAGE, UNA VEZ PRESIONADO EL BOTON AGENDAR MOSTRAR UN FORMULARIO PARA LLENAR LOS DATOS Y SELECCIONAR DIA Y HORA DE CITA

Browse Source
This commit is contained in:
Christopher Ulloa 2025-01-30 13:43:39 -07:00
parent f1ceade514
commit ab15b40e19
10 changed files with 169 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Contents/DentistaSection.jsx
View File

@ -1,5 +1,6 @@
import React from 'react'
import './DentistaSection.css'
import { Link } from 'react-router-dom';
const DentistaSection = () => {
@ -28,7 +29,7 @@ const DentistaSection = () => {
<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 className='dentista-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -39,7 +40,7 @@ const DentistaSection = () => {
<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 className='dentista-button-one'> <Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -50,7 +51,7 @@ const DentistaSection = () => {
<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 className='dentista-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -61,7 +62,7 @@ const DentistaSection = () => {
<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 className='dentista-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>

9
src/components/Contents/SpaSection.jsx
View File

@ -1,5 +1,6 @@
import React from 'react'
import './SpaSection.css'
import { Link } from 'react-router-dom'
const SpaSection = () => {
return (
@ -27,7 +28,7 @@ const SpaSection = () => {
<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 className='spa-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -38,7 +39,7 @@ const SpaSection = () => {
<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 className='spa-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -49,7 +50,7 @@ const SpaSection = () => {
<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 className='spa-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>
@ -60,7 +61,7 @@ const SpaSection = () => {
<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 className='spa-button-one'><Link to="/reservacion-dentista">Reservar</Link></div>
</div>
</div>

38
src/components/formReserv/FormReserv.css Normal file
View File

@ -0,0 +1,38 @@
.form-reserv-section {
width: 600px;
height: 550px;
border: 1px solid #D9D9D9;
border-radius: 1rem;
padding: 2rem;
background-color: #FFFF;
}
.form-reserv-tittle h2{
margin-bottom: 1.5rem;
font-size: 1.8rem;
font-weight: 600;
}
.form-reserv-container form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-reserv-container label {
font-size: 1.1rem;
font-weight: 600;
color: #131313;
}
.form-reserv-container input {
padding: 10px;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
background-color: #f5f5f5;
color: #737373;
}

28
src/components/formReserv/FormReserv.jsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react'
import './FormReserv.css'
const FormReserv = () => {
return (
<section className='form-reserv-section'>
<div className='form-reserv-tittle'>
<h2>Reserva tu cita</h2>
</div>
<div className='form-reserv-container'>
<form action="">
<label htmlFor="">Nombre Completo</label>
<input type="text" placeholder='Introduce tu nombre completo' />
<label htmlFor="">Email</label>
<input type="text" placeholder='Introduce tu Email' />
<label htmlFor="">Numero de telefono</label>
<input type="text" placeholder='Introduce tu numero de telefono' />
<label for="fecha">Selecciona una fecha</label>
<input type="date" id="fecha"/>
<label for="hora">Selecciona una hora</label>
<input type="time" id="hora"/>
</form>
</div>
</section>
)
}
export default FormReserv

44
src/components/formReserv/SendForm.css Normal file
View File

@ -0,0 +1,44 @@
.send-form-container {
border: 1px solid #D9D9D9;
background-color: #FFFF;
border-radius: 1rem;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
height: 30%;
}
.send-form-header {
display: flex;
gap: 12px;
}
.send-form-header img {
width: 100px;
height: auto;
border-radius: 8px;
}
.send-form-button-container{
display: flex;
align-items: center;
justify-content: center;
background-color: #131313;
color: #f5f5f5;
padding: 10px 6px 10px 6px;
border-radius: 6px;
font-weight: 500;
font-size: 1rem;
}
.send-form-content-container h3 {
font-size: 1.2rem;
font-weight: 600;
color: #131313;
}
.send-form-content-container p {
font-size: 1rem;
font-weight: 500;
color:#737373;
}

24
src/components/formReserv/SendForm.jsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react'
import './SendForm.css'
const SendForm = () => {
return (
<div className='send-form-container'>
<div className='send-form-header'>
<div>
<img src="https://dentistamedicasur.com.mx/wp-content/uploads/2015/06/dentista-medicasur-009-1030x687.jpg" alt="" />
</div>
<div className='send-form-content-container'>
<h3>Servicio de XOY</h3>
<span>$123</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
</div>
</div>
<div className='send-form-button-container'>
<div className='send-form-button'>Agendar Cita</div>
</div>
</div>
)
}
export default SendForm

6
src/pages/FormReservPage/FormReservPage.css Normal file
View File

@ -0,0 +1,6 @@
.form-reserv-page-container {
display: flex;
justify-content: center;
gap: 3rem;
margin: 2rem;
}

15
src/pages/FormReservPage/FormReservPage.jsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react'
import './FormReservPage.css'
import FormReserv from '../../components/formReserv/FormReserv'
import SendForm from '../../components/formReserv/SendForm'
const FormReservPage = () => {
return (
<section className='form-reserv-page-container'>
<FormReserv/>
<SendForm/>
</section>
)
}
export default FormReservPage

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

@ -6,6 +6,7 @@ import ImgHero from '../../components/Contents/imgHero'
import Footer from '../../components/footer/Footer'
import SpaSection from '../../components/Contents/SpaSection'
import DentistaSection from '../../components/Contents/DentistaSection'
import FormReservPage from '../FormReservPage/FormReservPage'
const LandingPage = () => {
return (
@ -29,6 +30,7 @@ const LandingPage = () => {
<SpaSection/>
<DentistaSection/>
<Footer/>
<FormReservPage/>
</>
)

2
src/routes/AppRoutes.jsx
View File

@ -4,6 +4,7 @@ import CalendarPage from '../pages/CalendarPage/CalendarPage';
import DatePage from '../pages/DatePage/DatePage';
import LoginPage from '../pages/Login/LoginPage';
import LandingPage from '../pages/landingPage/LandingPage';
import FormReservPage from '../pages/FormReservPage/FormReservPage';
const AppRoutes = () => {
return (
@ -15,6 +16,7 @@ const AppRoutes = () => {
<Route path="/calendar" element={<CalendarPage />} />
<Route path="/date" element={<DatePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/reservacion-dentista" element={<FormReservPage/>} />
</Routes>
);
};