feat: add mobile optimization with hooks and touch components

src/hooks/use-intersection-observer.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState, useEffect, useRef, type RefObject } from 'react';
+
+interface UseIntersectionObserverOptions {
+  threshold?: number | number[];
+  root?: Element | null;
+  rootMargin?: string;
+  freezeOnceVisible?: boolean;
+}
+
+export function useIntersectionObserver<T extends Element>(
+  options: UseIntersectionObserverOptions = {}
+): [RefObject<T | null>, boolean] {
+  const { threshold = 0, root = null, rootMargin = '0px', freezeOnceVisible = false } = options;
+  
+  const elementRef = useRef<T | null>(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    if (freezeOnceVisible && isIntersecting) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      { threshold, root, rootMargin }
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, root, rootMargin, freezeOnceVisible, isIntersecting]);
+
+  return [elementRef, isIntersecting];
+}