Refine navigation and post UI

components/scroll-reveal.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+
+interface ScrollRevealProps {
+  children: React.ReactNode;
+  className?: string;
+  once?: boolean;
+}
+
+export function ScrollReveal({
+  children,
+  className,
+  once = true
+}: ScrollRevealProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            if (once) observer.unobserve(entry.target);
+          } else if (!once) {
+            setVisible(false);
+          }
+        });
+      },
+      {
+        threshold: 0.15
+      }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once]);
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        'motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-out',
+        'motion-safe:opacity-0 motion-safe:translate-y-3',
+        visible &&
+          'motion-safe:opacity-100 motion-safe:translate-y-0 motion-safe:animate-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+