Initial commit

src/components/ScrollProgress.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { useReducedMotion } from '../hooks/useReducedMotion'
+
+export default function ScrollProgress() {
+  const [progress, setProgress] = useState(0)
+  const reducedMotion = useReducedMotion()
+
+  useEffect(() => {
+    if (reducedMotion) return
+
+    const handleScroll = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+      setProgress(scrollPercent)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [reducedMotion])
+
+  if (reducedMotion) return null
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[60] h-[2px] bg-transparent">
+      <div
+        className="h-full bg-pink-brand transition-all duration-100 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}