feat: add BackToTop button

package.json

@@ -33,6 +33,7 @@
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"flag-icons": "^7.2.3",
+		"framer-motion": "^11.3.6",
 		"lucide-react": "^0.408.0",
 		"next": "14.2.5",
 		"next-intl": "^3.17.1",

public/locales/en-US.json

@@ -6,7 +6,6 @@
 		}
 	},
 	"Header": {
-		"start": "Start",
 		"about": "About",
 		"competencies": "Competencies",
 		"projects": "Projects",

public/locales/pt-BR.json

@@ -6,7 +6,6 @@
 		}
 	},
 	"Header": {
-		"start": "Inicio",
 		"about": "Sobre",
 		"competencies": "Competências",
 		"projects": "Projetos",

src/app/[locale]/page.tsx

@@ -1,5 +1,6 @@
 import {
 	About,
+	BackToTop,
 	Competencies,
 	Contact,
 	Footer,
@@ -12,6 +13,7 @@ export default function Home() {
 	return (
 		<main>
 			<Header />
+      <BackToTop/>
 			<Start />
 			<About />
 			<Competencies />

src/components/back-to-top.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Button } from "@/components/ui";
+import { Link } from "@/navigation";
+import { ArrowUp } from "lucide-react";
+import { MouseEvent, useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export function BackToTop() {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    function handleScroll() {
+      const section = document.getElementById("start");
+      if (section) {
+        const isVisible = scrollY > (section.offsetHeight - 100);
+        setShowButton(isVisible);
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  function handleClick(event: MouseEvent<HTMLAnchorElement>) {
+    const section = document.getElementById("start");
+    event.preventDefault();
+    section?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }
+
+  return (
+    <AnimatePresence>
+      {showButton && (
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+          transition={{ ease: "easeInOut", duration: 0.5 }}
+          className="fixed bottom-8 right-8 flex items-center justify-center"
+          style={{ width: "48px", height: "48px" }}
+        >
+          <Button className="rounded-full p-0 w-full h-full bg-blue-300 flex items-center justify-center">
+            <Link className="w-full h-full flex items-center justify-center" href="#start" onClick={handleClick}>
+              <ArrowUp />
+            </Link>
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/header/header.tsx

@@ -9,7 +9,6 @@ export function Header() {
 			<nav className="px-4 flex items-center justify-between w-full">
         <div className="flex-1"></div>
         <div className="flex justify-center items-center w-full gap-4 ml-28">
-          <HeaderAnchor target="start"/>
           <HeaderAnchor target="about"/>
           <HeaderAnchor target="competencies"/>
           <HeaderAnchor target="projects"/>

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./about";
+export * from "./back-to-top";
 export * from "./change-language";
 export * from "./competencies"
 export * from "./contact"

yarn.lock

@@ -1359,6 +1359,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^11.3.6":
+  version: 11.3.6
+  resolution: "framer-motion@npm:11.3.6"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/ee8f5eba0bf00ead637def6457eeb4a54e8f71fd94db2f5061231420adcff5d9a4c06cd2f6f799fa6e5d56e634ec7659ff2e3af9dd1568d72daae41db9edff6b
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -2078,6 +2098,7 @@ __metadata:
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.1"
     flag-icons: "npm:^7.2.3"
+    framer-motion: "npm:^11.3.6"
     lucide-react: "npm:^0.408.0"
     next: "npm:14.2.5"
     next-intl: "npm:^3.17.1"