feat: add animate quote at about page

app/about/(quote)/quote.jsx

@@ -0,0 +1,63 @@
+// Quote.js
+import "./style.css";
+import { motion } from "framer-motion";
+import { useIntersectionObserver } from "./useIntersectionObserver";
+
+export default function Quote() {
+	const text1 = '"There are no limits to what you can accomplish'.split(" ");
+	const text2 = 'except the limits you place on your own thinking."'.split(
+		" "
+	);
+	const [ref, isIntersecting] = useIntersectionObserver();
+
+	return (
+		<div ref={ref} className="text-center">
+			<h3 className="text-[2rem]">
+				{text1.map((word, index) => (
+					<motion.span
+						key={index}
+						initial={{
+							opacity: 0,
+							filter: "blur(4px)",
+							scale: 0.92,
+						}}
+						animate={{
+							opacity: isIntersecting ? 1 : 0,
+							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
+							scale: isIntersecting ? 1 : 0.92,
+						}}
+						transition={{
+							delay: isIntersecting ? index * 0.1 : 0,
+							duration: 0.5,
+						}}>
+						{word}{" "}
+					</motion.span>
+				))}
+			</h3>
+			<h3 className="text-xl">
+				{text2.map((word, index) => (
+					<motion.span
+						key={index + text1.length} 
+						initial={{
+							opacity: 0,
+							filter: "blur(4px)",
+							scale: 0.92,
+						}}
+						animate={{
+							opacity: isIntersecting ? 1 : 0,
+							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
+							scale: isIntersecting ? 1 : 0.92,
+						}}
+						transition={{
+							delay: isIntersecting
+								? (text1.length + index) * 0.1
+								: 0,
+							duration: 0.5,
+						}}>
+						{word}{" "}
+					</motion.span>
+				))}
+			</h3>
+		</div>
+	);
+}