Add interactive demo components and feature sections to homepage

- 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`.

frontend/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,33 @@
+/**
+ * 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;
+}