feat(ui): implement mobile navigation and rotating text

Add a responsive mobile navigation menu to the `Header` component, allowing users to easily access different sections of the portfolio on smaller screens. This includes a toggle button for opening/closing the menu and smooth animations for its appearance.

Introduce a `RotatingText` component in the `Hero` section to dynamically display different professional titles, enhancing the visual appeal and conveying diverse skills.

Update `package.json` to include `framer-motion` as a dependency, which is utilized for the new animations.

components/RotatingText.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface RotatingTextProps {
+  words: string[];
+  className?: string;
+  interval?: number; // Intervalo em milissegundos para a rotação
+}
+
+export function RotatingText({
+  words,
+  className,
+  interval = 3000,
+}: RotatingTextProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [words, interval]);
+
+  return (
+    <div className={cn("relative inline-block min-h-[1.5em]", className)}>
+      <AnimatePresence mode="wait">
+        <motion.span
+          key={currentIndex}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.5 }}
+          className="block text-center"
+        >
+          {words[currentIndex]}
+        </motion.span>
+      </AnimatePresence>
+    </div>
+  );
+}