From bb695eca85588692fa63b1f2ad6cb0e407d5b31c Mon Sep 17 00:00:00 2001
From: Christopher Ulloa <chris.uzm@gmail.com>
Date: Mon, 10 Feb 2025 10:29:39 -0700
Subject: [PATCH] header y footer reactividad

---
 package-lock.json                      | 21 ++++++-
 package.json                           |  3 +-
 src/components/Contents/SpaSection.jsx |  2 +-
 src/components/footer/Footer.jsx       | 23 +++++--
 src/components/footer/footer.css       |  8 +++
 src/components/header/Header.jsx       | 87 ++++++++++++++++----------
 src/components/header/header.css       |  4 ++
 src/pages/landingPage/LandingPage.jsx  |  6 +-
 8 files changed, 111 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e75cf6c..a9c6a64 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 398cc55..ce78363 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Contents/SpaSection.jsx b/src/components/Contents/SpaSection.jsx
index b53e1df..1b6f38b 100644
--- a/src/components/Contents/SpaSection.jsx
+++ b/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'>
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 2a362f0..be89080 100644
--- a/src/components/footer/Footer.jsx
+++ b/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>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'>
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index 8212de5..2a75e12 100644
--- a/src/components/footer/footer.css
+++ b/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;
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index 4e6904f..00eeb71 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -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;
\ No newline at end of file
diff --git a/src/components/header/header.css b/src/components/header/header.css
index 9baced5..17688f6 100644
--- a/src/components/header/header.css
+++ b/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;
diff --git a/src/pages/landingPage/LandingPage.jsx b/src/pages/landingPage/LandingPage.jsx
index 0998021..f9108cc 100644
--- a/src/pages/landingPage/LandingPage.jsx
+++ b/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>