header y footer reactividad

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/Contents/SpaSection.jsx

@@ -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'>

src/components/footer/Footer.jsx

@@ -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><ScrollLink
-                <li>Nosotros</li>
+                    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><Link to='/Servicios-dentista'>Dentista</Link></li>
-                <li>Registro</li>
+                <li><Link to='/Servicios-spa'>SPA</Link></li>
             </ul>
         </nav>
         <div className='footer-icons'>

src/components/footer/footer.css

@@ -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;

src/components/header/Header.jsx

@@ -1,21 +1,29 @@
-import React from 'react'
+import React from 'react';
-import './header.css'
+import './header.css';
-import logo from '../../assets/logo.png'
+import logo from '../../assets/logo.png';
-import {Link} from 'react-router-dom'
+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="">
+        <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">
+          <svg
-                <path d="M3 12H21M3 6H21M3 18H21" stroke="#f5f5f5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            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>
@@ -23,20 +31,31 @@ const Header = () => {
       <nav>
         <ul>
           <li>Inicio</li>
-                <li>Servicios</li>
+          <li>
-                <li>Dentista</li>
+            <ScrollLink
-                <li>SPA</li>
+              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>
 
       <div className='buttton'>
-            <Link to='/login'>
+        <RouterLink to='/login'>
           <h4>Acceder</h4>
-            </Link>     
+        </RouterLink>
       </div>
-        
     </header>
-  )
+  );
-}
+};
 
-export default Header
+export default Header;

src/components/header/header.css

@@ -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;

src/pages/landingPage/LandingPage.jsx

@@ -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>