Implement "Back to Top" Button and Enhance "Why Choose Us" Section, Issue no. #103

client/src/components/Hero.jsx

@@ -1,21 +1,22 @@
 import React from "react";
 import giffy from "../assets/Hero.gif";
 import { Link } from "react-router-dom";
+import ScrollTopButton from "./ScrollTopButton";
 
 function Hero() {
   return (
-
     <div>
       <div className="hero m-3 flex justify-center items-center space-x-2 my-12 md:my-16">
-
         <div className="card bg-gray-200 max-w-sm rounded-lg p-6 space-y-4 md:space-y-8">
           <div className="heading  font-medium font-Rubik text-2xl md:text-4xl">
-            Wanna reduce your <span className="text-green-500">carbon footprints</span>? <span className="">Calculate</span> it first 
+            Wanna reduce your{" "}
+            <span className="text-green-500">carbon footprints</span>?{" "}
+            <span className="">Calculate</span> it first
           </div>
           <div className="para font-Rubik text-sm md:text-base text-slate-600">
             Our platform, PrithWe, empowers households and businesses to
             calculate their environmental impact accurately with easy-to-use
-            tools and insightful data. 
+            tools and insightful data.
           </div>
           <div className="btn w-fit bg-green-500 font-Rubik p-2 md:py-3 px-3 rounded-2xl  hover:bg-green-600">
             <Link to="/calculator">Track Your Carbon Footprint</Link>
@@ -24,8 +25,8 @@ function Hero() {
         <div className="gif">
           <img className="rounded-lg hidden sm:block md:max-w-sm" src={giffy} />
         </div>
+        <ScrollTopButton />
       </div>
-
     </div>
   );
 }

client/src/components/InfoCard.jsx

@@ -13,36 +13,41 @@ function InfoCard() {
 
 export default InfoCard;*/
 
-import React from 'react';
+import React from "react";
 
 function FeatureCard({ heading, description }) {
   return (
-    <div className=" bg-opacity- bg-gray-200 text-center rounded-md px-4 py-6 md:py-12 max-w-sm shadow-md">
-      <h1 className="text-lg md:text-xl text-green-600 font-semibold mb-2 font-Rubik">{heading}</h1>
-      <h1 className="text-slate-600 text-sm md:text-base font-Rubik">{description}</h1>
+    <div className=" bg-opacity- bg-gray-200 text-center rounded-md px-4 py-6 md:py-12 max-w-sm shadow-2xl shadow-amber-200 transform hover:scale-105 transition duration-300">
+      <h1 className="text-lg md:text-xl text-green-600 font-semibold mb-2 font-Rubik">
+        {heading}
+      </h1>
+      <h1 className="text-slate-600 text-sm md:text-base font-Rubik">
+        {description}
+      </h1>
     </div>
   );
 }
 
 function InfoCard() {
   return (
     <div>
-    <p className='text-center font-Rubik pt-12 md:pt-16 text-2xl md:text-4xl'>Why Choose Us?</p>
-    <div className="flex flex-col items-center sm:items-stretch space-y-4 sm:space-y-0 sm:flex-row  sm:justify-around p-4 md:p-8 ">
-
-      <FeatureCard 
-        heading="Easy to use"
-        description="Our platform offers a user-friendly interface, making it simple for anyone to calculate their carbon footprint effortlessly."
-      />
-      <FeatureCard
-        heading="Accurate Results"
-        description="We provide precise calculations, ensuring that you receive accurate insights into your environmental impact."
-      />
-      <FeatureCard
-        heading="Chart representation"
-        description="Visualize your carbon footprint breakdown through interactive pie charts, allowing for easy interpretation of data."
-      />
-    </div>
+      <p className="text-center font-Rubik pt-12 md:pt-16 text-2xl md:text-4xl">
+        Why Choose Us?
+      </p>
+      <div className="flex flex-col items-center sm:items-stretch space-y-4 sm:space-y-0 sm:flex-row  sm:justify-around p-4 md:p-8 ">
+        <FeatureCard
+          heading="Easy to use"
+          description="Our platform offers a user-friendly interface, making it simple for anyone to calculate their carbon footprint effortlessly."
+        />
+        <FeatureCard
+          heading="Accurate Results"
+          description="We provide precise calculations, ensuring that you receive accurate insights into your environmental impact."
+        />
+        <FeatureCard
+          heading="Chart representation"
+          description="Visualize your carbon footprint breakdown through interactive pie charts, allowing for easy interpretation of data."
+        />
+      </div>
     </div>
   );
 }

client/src/components/ScrollTopButton.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { HiOutlineArrowUp } from "react-icons/hi";
+
+const ScrollTopButton = () => {
+  const [showScroll, setShowScroll] = React.useState(false);
+
+  const checkScrollTop = () => {
+    if (!showScroll && window.pageYOffset > 300) {
+      setShowScroll(true);
+    } else if (showScroll && window.pageYOffset <= 300) {
+      setShowScroll(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", checkScrollTop);
+    return () => {
+      window.removeEventListener("scroll", checkScrollTop);
+    };
+  }, []);
+
+  return (
+    <div className="fixed bottom-10 right-5 bg-gray-800 text-white p-2 rounded-full cursor-pointer transition duration-300 hover:bg-gray-700 hover:transition-all hover:ease-out">
+      <HiOutlineArrowUp size={28} onClick={scrollToTop} />
+    </div>
+  );
+};
+
+export default ScrollTopButton;