diff --git a/src/components/Contents/DentistaSection.css b/src/components/Contents/DentistaSection.css new file mode 100644 index 0000000..dea4b51 --- /dev/null +++ b/src/components/Contents/DentistaSection.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Contents/DentistaSection.jsx b/src/components/Contents/DentistaSection.jsx new file mode 100644 index 0000000..6d432b6 --- /dev/null +++ b/src/components/Contents/DentistaSection.jsx @@ -0,0 +1,76 @@ +import React from 'react' +import './DentistaSection.css' + + +const DentistaSection = () => { + return ( +
+
+
+
+

Dentista

+ Aqui puedes encontrar los distintos servicios que ofrecemos en Dentista +
+ +
+
+ Mas Servicios +
+
+
+ + +
+
+
+ +
+
+

Limpieza Dental

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Brackets

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Blanqueamiento dental

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Extración de muelas del juicio

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+ + +
+
+ ) +} + +export default DentistaSection \ No newline at end of file diff --git a/src/components/Contents/SpaSection.css b/src/components/Contents/SpaSection.css new file mode 100644 index 0000000..2bb5e02 --- /dev/null +++ b/src/components/Contents/SpaSection.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Contents/SpaSection.jsx b/src/components/Contents/SpaSection.jsx new file mode 100644 index 0000000..aa68e44 --- /dev/null +++ b/src/components/Contents/SpaSection.jsx @@ -0,0 +1,75 @@ +import React from 'react' +import './SpaSection.css' + +const SpaSection = () => { + return ( +
+
+
+
+

SPA

+ Aqui puedes encontrar los distintos servicios que ofrecemos en SPA +
+ +
+
+ Mas Servicios +
+
+
+ + +
+
+
+ +
+
+

Hidroterapia

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Masaje

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Yoga y meditación

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+
+ +
+
+

Saunas y baños de vapor

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. +
Reservar
+
+
+ +
+ + +
+
+ ) +} + +export default SpaSection \ No newline at end of file diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx index 50efdc2..ff1af6c 100644 --- a/src/components/footer/Footer.jsx +++ b/src/components/footer/Footer.jsx @@ -4,6 +4,7 @@ import logo from '../../assets/logo.png' const Footer = () => { return ( +
+
) } diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 268cce7..1cd2438 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -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; } diff --git a/src/main.jsx b/src/main.jsx index 4c1d1cc..6582fa6 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -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( - ); @@ -21,5 +17,3 @@ createRoot(document.getElementById('root')).render( -{/* */} -{/* */} diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx index 5e78b3d..fb38b2b 100644 --- a/src/pages/Login/LoginPage.jsx +++ b/src/pages/Login/LoginPage.jsx @@ -15,7 +15,7 @@ const LoginPage = () => {
- + ir a inicio
@@ -27,14 +27,14 @@ const LoginPage = () => {

Bienvenido de nuevo

-

Introduce tu email y contraseña para acceder a tu cuenta

+

Introduce tu usuario y contraseña para acceder a tu cuenta

- - + + - +
Recordar conexión
Olvide mi contraseña
diff --git a/src/pages/landingPage/LandingPage.jsx b/src/pages/landingPage/LandingPage.jsx index 14e32c9..0998021 100644 --- a/src/pages/landingPage/LandingPage.jsx +++ b/src/pages/landingPage/LandingPage.jsx @@ -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 = () => {
- - - -
-
-
- + + + +