ud

package.json

@@ -12,6 +12,7 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-responsive-carousel": "^3.2.23",
     "react-scripts": "5.0.1",
     "react-scroll": "^1.9.0",
@@ -42,6 +43,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "daisyui": "^4.11.1",
     "tailwindcss": "^3.4.3"
   }

src/App.js

@@ -10,6 +10,7 @@ import shoeRepairImage1 from './components/img/shoe-repair.svg';
 import Footer from './components/Footer';
 import location from './components/img/location.svg';
 import phone from './components/img/phone.svg';
+import ScrollToTop from './components/ScrollToTop.js';
 import './components/cards.css';
 import './components/app.css';
 import './components/intro-sect.css';
@@ -183,6 +184,8 @@ const App = () => {
             </div>
           </div>
         </section>
+        <ScrollToTop />
+
       </main>
       <Footer />
     </div>

src/components/Header.js

@@ -1,8 +1,9 @@
-// src/components/Navbar.js
 import React, { useState } from 'react';
 import { Link } from 'react-scroll';
 import logo from './img/Logo.svg'; // Ensure this path is correct
 import './nav-bar.css'; // Ensure this file exists and is correctly imported
+import buttonImage1 from './img/location.svg'; // Ensure this path is correct
+import buttonImage2 from './img/phone.svg'; // Ensure this path is correct
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -36,10 +37,15 @@ const Navbar = () => {
               Location
             </Link>
           </li>
-          <li className="menu-item">
-            <Link to="contact" smooth={true} duration={500}>
-              Contact
-            </Link>
+          <li className="menu-button">
+            <a href="https://maps.app.goo.gl/85Xovp1RnUkospT58" target="_blank" rel="noopener noreferrer">
+              <img src={buttonImage1} alt="Button 1" className="nav-button" />
+            </a>
+          </li>
+          <li className="menu-button">
+          <a href="tel:+17134653407">
+                          <img src={buttonImage2} alt="Button 2" className="nav-button" />
+            </a>
           </li>
         </ul>
       </div>

src/components/ScrollToTop.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import { FaArrowUp } from 'react-icons/fa';
+import './scroll-to-top.css'; // Ensure this CSS file exists
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div className="scroll-to-top">
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-button">
+          <FaArrowUp />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTop;

src/components/nav-bar.css

@@ -95,6 +95,35 @@
     width: 100%;
 }
 
+.nav-button {
+    width: 25px; /* Set a fixed size for the buttons */
+    height: 25px;
+    transition: filter 0.3s; /* Smooth transition for hover effect */
+}
+
+.nav-button:hover {
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2366%) hue-rotate(190deg) brightness(98%) contrast(104%);
+}
+
+.menu-button {
+    position: relative;
+    display: flex; /* Ensure flex display for alignment */
+    align-items: center; /* Center items vertically */
+}
+
+.menu-button a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    color: var(--menu-item-color);
+    position: relative;
+    z-index: 1;
+}
+
 /* Mobile view */
 @media (max-width: 768px) {
     .navbar {
@@ -148,6 +177,10 @@
         width: 100%;
         padding: 15px 20px;
     }
+
+    .menu-button {
+        display: none; /* Hide menu buttons on mobile */
+    }
 }
 
 /* Hide hamburger menu on desktop */

src/components/scroll-to-top.css

@@ -0,0 +1,24 @@
+.scroll-to-top {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    z-index: 1000;
+  }
+
+  .scroll-button {
+    background-color: #000000;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, transform 0.3s;
+    height: 45px;
+  }
+
+  .scroll-button:hover {
+    background-color: #0056b3;
+    transform: translateY(-2px);
+  }
+