Add responsive design

src/hooks/useResponsive.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+
+export interface ResponsiveBreakpoints {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  isLargeDesktop: boolean;
+  width: number;
+}
+
+const BREAKPOINTS = {
+  mobile: 768,
+  tablet: 1024,
+  desktop: 1280,
+} as const;
+
+/**
+ * Hook for responsive breakpoint detection
+ * Provides granular control over responsive behavior
+ */
+export function useResponsive(): ResponsiveBreakpoints {
+  const [breakpoints, setBreakpoints] = useState<ResponsiveBreakpoints>({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    isLargeDesktop: false,
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      
+      setBreakpoints({
+        isMobile: width < BREAKPOINTS.mobile,
+        isTablet: width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet,
+        isDesktop: width >= BREAKPOINTS.tablet && width < BREAKPOINTS.desktop,
+        isLargeDesktop: width >= BREAKPOINTS.desktop,
+        width,
+      });
+    };
+
+    // Initial check
+    handleResize();
+
+    // Listen for resize events
+    window.addEventListener('resize', handleResize);
+    
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return breakpoints;
+}
+
+/**
+ * Hook for orientation detection
+ */
+export function useOrientation() {
+  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait');
+
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      setOrientation(
+        window.innerHeight > window.innerWidth ? 'portrait' : 'landscape'
+      );
+    };
+
+    handleOrientationChange();
+    window.addEventListener('resize', handleOrientationChange);
+    
+    return () => window.removeEventListener('resize', handleOrientationChange);
+  }, []);
+
+  return orientation;
+}