header y footer reactividad
This commit is contained in:
Christopher Ulloa
parent
4d22be7822
commit
bb695eca85
21
package-lock.json
generated
21
package-lock.json
generated
@ -12,7 +12,8 @@
|
||||
"react": "^18.3.1",
|
||||
"react-big-calendar": "^1.17.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.1.3"
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-scroll": "^1.9.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
@ -3212,6 +3213,11 @@
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@ -3717,6 +3723,19 @@
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scroll": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.2.tgz",
|
||||
"integrity": "sha512-+TX9qmQiTjE6o3rz3Uxzh2abEKwTxmOMv/HGfsYeQrpwNUj3Md9LSTsg0oMVK1+89o4+g6KkPPpDDJ2g8bg/aQ==",
|
||||
"dependencies": {
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"react": "^18.3.1",
|
||||
"react-big-calendar": "^1.17.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.1.3"
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-scroll": "^1.9.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
||||
@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
|
||||
|
||||
const SpaSection = () => {
|
||||
return (
|
||||
<section className='spa-section-container'>
|
||||
<section className='spa-section-container' id='spa-section'>
|
||||
<div className='spa-div-container'>
|
||||
<div className='spa-section-header'>
|
||||
<div className='spa-section-tittle'>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import React from 'react'
|
||||
import './footer.css'
|
||||
import logo from '../../assets/logo.png'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link as ScrollLink } from 'react-scroll';
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
@ -11,11 +14,23 @@ const Footer = () => {
|
||||
<img src={logo} alt="logoImg" />
|
||||
</div>
|
||||
<ul>
|
||||
<li>inicio</li>
|
||||
<li>Nosotros</li>
|
||||
<li><ScrollLink
|
||||
to="main-section"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
>
|
||||
Inicio
|
||||
</ScrollLink></li>
|
||||
<li><ScrollLink
|
||||
to="spa-section"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
>
|
||||
Servicios
|
||||
</ScrollLink></li>
|
||||
<li><img src={logo} alt="logoImg" /></li>
|
||||
<li>Precios</li>
|
||||
<li>Registro</li>
|
||||
<li><Link to='/Servicios-dentista'>Dentista</Link></li>
|
||||
<li><Link to='/Servicios-spa'>SPA</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className='footer-icons'>
|
||||
|
||||
@ -34,6 +34,11 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-footer ul li a {
|
||||
color: #131313;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-footer ul li img {
|
||||
width: 150px;
|
||||
@ -64,6 +69,9 @@
|
||||
width: 100px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-footer ul {
|
||||
gap: 8px;
|
||||
padding: 1.5rem;
|
||||
|
||||
@ -1,42 +1,61 @@
|
||||
import React from 'react'
|
||||
import './header.css'
|
||||
import logo from '../../assets/logo.png'
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
import React from 'react';
|
||||
import './header.css';
|
||||
import logo from '../../assets/logo.png';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { Link as ScrollLink } from 'react-scroll';
|
||||
|
||||
const Header = () => {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<header className='header'>
|
||||
<div className='logo'>
|
||||
<a href="/">
|
||||
<img src={logo} alt="logo" />
|
||||
<svg
|
||||
width="25px"
|
||||
height="25px"
|
||||
viewBox="0 0 24 24"
|
||||
fill="#f5f5f5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 12H21M3 6H21M3 18H21"
|
||||
stroke="#f5f5f5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='logo'>
|
||||
<a href="">
|
||||
<img src={logo} alt="logo" />
|
||||
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="#f5f5f5" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 12H21M3 6H21M3 18H21" stroke="#f5f5f5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Inicio</li>
|
||||
<li>
|
||||
<ScrollLink
|
||||
to="spa-section"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
>
|
||||
Servicios
|
||||
</ScrollLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to='/Servicios-dentista'>Dentista</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to='/Servicios-spa'>SPA</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
<div className='buttton'>
|
||||
<RouterLink to='/login'>
|
||||
<h4>Acceder</h4>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Header
|
||||
export default Header;
|
||||
@ -33,6 +33,10 @@ header ul li {
|
||||
font-weight: 400;
|
||||
font-family: 'Helvetica Neue', Roboto;
|
||||
}
|
||||
header ul li a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
header .buttton {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useRef } from 'react';
|
||||
import Header from '../../components/header/Header'
|
||||
import './landingPage.css'
|
||||
import Content from '../../components/Contents/Content'
|
||||
@ -8,10 +8,12 @@ import SpaSection from '../../components/Contents/SpaSection'
|
||||
import DentistaSection from '../../components/Contents/DentistaSection'
|
||||
|
||||
const LandingPage = () => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<section className='Main-section-landing-page'>
|
||||
<section className='Main-section-landing-page' id='main-section'>
|
||||
<div className='header-landing-page'>
|
||||
<Header/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user