Merge branch 'main' of https://github.com/Mujtabaa07/coffeeShop

package.json

@@ -18,7 +18,7 @@
     "react-locomotive-scroll": "^0.2.2",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "scrolltrigger": "^1.0.1",
     "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"

public/index.html

@@ -28,6 +28,7 @@
     <link href="./App.css" rel="stylesheet">
     <link href="./index.css" rel="stylesheet">
     <title>MsCafe</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   </head>
   </head>
@@ -44,6 +45,12 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTop" title="Go to top">
+      <i class="fa-solid fa-arrow-up fa-lg"></i>
+    </button>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>

src/index.css

@@ -14,3 +14,29 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* Styling for the scroll-to-top button */
+#scrollToTop {
+  display: none; /* Initially hidden */
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 99;
+  background-color: #6F4E37; /* Coffee Brown */
+  color: #FAF9F6; /* Off-White */
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 10px 15px;
+  border-radius: 50%;
+  font-size: 20px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease-in-out;
+}
+
+/* Hover effect */
+#scrollToTop:hover {
+  background-color: #D4A373; /* Golden Yellow */
+  color: #4B4B4B; /* Charcoal Gray */
+  transform: scale(1.1); /* Slightly enlarge the button */
+}

src/index.js

@@ -11,6 +11,26 @@ root.render(
   </React.StrictMode>
 );
 
+// Get the button element
+const scrollToTopButton = document.getElementById("scrollToTop");
+
+// Show the button when the user scrolls down 100px
+window.onscroll = function () {
+  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+    scrollToTopButton.style.display = "block";
+  } else {
+    scrollToTopButton.style.display = "none";
+  }
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopButton.addEventListener("click", function () {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth", // Smooth scrolling
+  });
+});
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals