hero-section, start login

components/ui/scroll-reveal.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useRef, useState, ReactNode } from 'react'
+
+interface ScrollRevealProps {
+  children: ReactNode
+  direction?: 'up' | 'down' | 'left' | 'right'
+  delay?: number
+  className?: string
+}
+
+export function ScrollReveal({
+  children,
+  direction = 'up',
+  delay = 0,
+  className = '',
+}: ScrollRevealProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      {
+        threshold: 0.1,
+        rootMargin: '50px',
+      }
+    )
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  const directionClasses = {
+    up: 'translate-y-8',
+    down: '-translate-y-8',
+    left: 'translate-x-8',
+    right: '-translate-x-8',
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={`transition-all duration-700 ease-out ${
+        isVisible
+          ? 'opacity-100 translate-x-0 translate-y-0'
+          : `opacity-0 ${directionClasses[direction]}`
+      } ${className}`}
+      style={{
+        transitionDelay: isVisible ? `${delay}ms` : '0ms',
+      }}
+    >
+      {children}
+    </div>
+  )
+}