diff --git a/package.json b/package.json index b515294..5f627f6 100644 --- a/package.json +++ b/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", diff --git a/public/locales/en-US.json b/public/locales/en-US.json index c56de28..d21ab0d 100644 --- a/public/locales/en-US.json +++ b/public/locales/en-US.json @@ -6,7 +6,6 @@ } }, "Header": { - "start": "Start", "about": "About", "competencies": "Competencies", "projects": "Projects", diff --git a/public/locales/pt-BR.json b/public/locales/pt-BR.json index ed96c3b..ad9d196 100644 --- a/public/locales/pt-BR.json +++ b/public/locales/pt-BR.json @@ -6,7 +6,6 @@ } }, "Header": { - "start": "Inicio", "about": "Sobre", "competencies": "CompetĂȘncias", "projects": "Projetos", diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index d708063..da9f8ca 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -1,5 +1,6 @@ import { About, + BackToTop, Competencies, Contact, Footer, @@ -12,6 +13,7 @@ export default function Home() { return (
+ diff --git a/src/components/back-to-top.tsx b/src/components/back-to-top.tsx new file mode 100644 index 0000000..bbf6f37 --- /dev/null +++ b/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) { + const section = document.getElementById("start"); + event.preventDefault(); + section?.scrollIntoView({ behavior: "smooth", block: "end" }); + } + + return ( + + {showButton && ( + + + + )} + + ); +} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 22e70ba..4b8236c 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -9,7 +9,6 @@ export function Header() {