fix: make Home's portrait parallax respect prefers-reduced-motion

The About section's portrait image now checks useReducedMotion() and
disables parallax scroll motion when the user has set OS-level reduced
motion preferences.

Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
This commit is contained in:
belviskhoremk
2026-08-03 23:02:21 +00:00
parent 726893ab87
commit e24c1c7be7

View File

@@ -1,5 +1,5 @@
import { Link, useNavigate } from 'react-router-dom'
import { motion, useScroll, useTransform } from 'framer-motion'
import { motion, useScroll, useTransform, useReducedMotion } from 'framer-motion'
import Hero3DScene from '../components/Hero3DScene'
import ScrollReveal from '../components/ScrollReveal'
import ServiceCard from '../components/ServiceCard'
@@ -17,7 +17,8 @@ const TESTIMONIALS = [
function Home() {
const navigate = useNavigate()
const { scrollYProgress } = useScroll()
const portraitY = useTransform(scrollYProgress, [0, 1], [0, -40])
const prefersReducedMotion = useReducedMotion()
const portraitY = useTransform(scrollYProgress, [0, 1], prefersReducedMotion ? [0, 0] : [0, -40])
return (
<div>