67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import MagneticButton from "./MagneticButton";
|
|
|
|
export default function HomeButton() {
|
|
const pathname = usePathname();
|
|
const isHome = pathname === "/";
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{!isHome && (
|
|
<motion.div
|
|
className="fixed left-6 top-6 z-[9000]"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
|
|
>
|
|
<MagneticButton
|
|
as="a"
|
|
href="/"
|
|
strength={0.3}
|
|
aria-label="Voltar para o início"
|
|
className="group relative inline-flex items-center gap-2.5 overflow-hidden rounded-full border border-[rgba(255,255,255,0.1)] bg-[rgba(10,10,10,0.72)] px-4 py-2.5 text-[11px] font-mono uppercase tracking-[0.1em] text-[rgba(244,242,237,0.76)] backdrop-blur-[16px] transition-all duration-300 hover:border-[rgba(204,255,0,0.5)] hover:text-[var(--slash)]"
|
|
>
|
|
{/* Glow effect */}
|
|
<span
|
|
className="pointer-events-none absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
|
style={{
|
|
boxShadow: "inset 0 0 20px rgba(204,255,0,0.06), 0 0 24px rgba(204,255,0,0.15)",
|
|
}}
|
|
/>
|
|
|
|
{/* Arrow left icon */}
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.8"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
className="relative z-10 -translate-x-0 transition-transform duration-300 group-hover:-translate-x-0.5"
|
|
>
|
|
<path d="M7.5 1.5 L2.5 6 L7.5 10.5" />
|
|
</svg>
|
|
|
|
<span className="relative z-10">Home</span>
|
|
|
|
{/* Animated neon dot */}
|
|
<motion.span
|
|
className="relative z-10 ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--slash)]"
|
|
animate={{ opacity: [1, 0.3, 1], scale: [1, 0.8, 1] }}
|
|
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
|
/>
|
|
</MagneticButton>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|