Added Back To Top Navigation (subhadipbhowmik#139)

* added hover card effect

* aligned footer to center

* modified tablet view of the footer

* add scroollToTop button

---------

Co-authored-by: Shubhadip Bhowmik <[email protected]>

src/components/HomepageFeatures/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import ScrollToTopButton from '../ScrollToTop/ScrollToTopButton';
 
 const FeatureList = [
   {
@@ -91,6 +92,7 @@ export default function HomepageFeatures() {
             <Feature key={idx} {...props} />
           ))}
         </div>
+        <ScrollToTopButton />
       </div>
     </section>
   );

src/components/ScrollToTop/ScrollToTopButton.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './ScrollToTopButton.module.css';
+
+const ScrollToTopButton = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className={styles.scrollToTop}>
+      <button onClick={scrollToTop} className={styles.button}>
+        ↑
+      </button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

src/components/ScrollToTop/ScrollToTopButton.module.css

@@ -0,0 +1,26 @@
+.scrollToTop {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1;
+}
+
+.button {
+  background-color: rgb(0, 191, 166);
+  border: none;
+  color: white;
+  padding: 10px 15px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px 0px;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}

src/pages/index.js

@@ -36,7 +36,7 @@ export default function Home() {
       description="30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days. Master the fundamental concepts of CPP Programming easily."
     >
       <HomepageHeader />
-      <main>
+      <main style={{ position: 'relative' }}>
         <HomepageFeatures />
         <Chatbot />
       </main>