Felipe Cardoso
63c171f83e
- Introduced `DemoSection`, showcasing live feature demos with interactive cards and test credentials for admin and auth flows. - Added `FeatureGrid` with dynamic animations, highlighting major application features like RBAC, documentation, and deployment readiness. - Built reusable `FeatureCard` for feature details, including icons, descriptions, and CTAs. - Implemented `TechStackSection` to display modern tools and technologies used in the stack with tooltips. - Updated dependencies: added `framer-motion`, `lucide-react`, and `react-syntax-highlighter`.
34 lines
884 B
TypeScript
34 lines
884 B
TypeScript
/**
|
|
* Hook to detect if user prefers reduced motion
|
|
* Respects prefers-reduced-motion media query for accessibility
|
|
*/
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function usePrefersReducedMotion(): boolean {
|
|
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if window is defined (SSR safety)
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
setPrefersReducedMotion(mediaQuery.matches);
|
|
|
|
// Listen for changes
|
|
const handleChange = (event: MediaQueryListEvent) => {
|
|
setPrefersReducedMotion(event.matches);
|
|
};
|
|
|
|
mediaQuery.addEventListener('change', handleChange);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener('change', handleChange);
|
|
};
|
|
}, []);
|
|
|
|
return prefersReducedMotion;
|
|
}
|