Initial commit: CHORUS Services marketing website
Complete Next.js website with Docker containerization: - Next.js 14 with TypeScript and Tailwind CSS - Responsive design with modern UI components - Hero section, features showcase, testimonials - FAQ section with comprehensive content - Contact forms and newsletter signup - Docker production build with Nginx - Health checks and monitoring support - SEO optimization and performance tuning Ready for integration as git submodule in main CHORUS project. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
35
hooks/useReducedMotion.ts
Normal file
35
hooks/useReducedMotion.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
/**
|
||||
* Custom hook to detect user's reduced motion preference
|
||||
* Respects the CSS media query 'prefers-reduced-motion: reduce'
|
||||
*
|
||||
* @returns boolean - true if user prefers reduced motion
|
||||
*/
|
||||
export const useReducedMotion = (): boolean => {
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
// Set initial value
|
||||
setPrefersReducedMotion(mediaQuery.matches);
|
||||
|
||||
// Create event handler
|
||||
const handler = (event: MediaQueryListEvent) => {
|
||||
setPrefersReducedMotion(event.matches);
|
||||
};
|
||||
|
||||
// Add event listener
|
||||
mediaQuery.addEventListener('change', handler);
|
||||
|
||||
// Cleanup
|
||||
return () => mediaQuery.removeEventListener('change', handler);
|
||||
}, []);
|
||||
|
||||
return prefersReducedMotion;
|
||||
};
|
||||
|
||||
export default useReducedMotion;
|
||||
Reference in New Issue
Block a user