feat(frontend): improve error handling and UX - Sprint 3 Story 4

Add comprehensive error handling with Error Boundary and improve user feedback.

Changes:
- Created global ErrorBoundary component with fallback UI using react-error-boundary
- Integrated ErrorBoundary in root layout to catch all errors
- Created Loading component with variants (sm, md, lg) for consistent loading states
- Created EmptyState component for better empty data display with CTAs
- Improved form error messages in login and register pages (consistent destructive styling)
- Updated projects page to use EmptyState component
- Added better error handling with retry actions

UX improvements:
- Better error messages and recovery options with clear action buttons
- Consistent loading indicators across all pages
- Helpful empty states with clear descriptions and CTAs
- Graceful error handling without crashes
- Consistent destructive color theme for all error messages

Technical:
- Installed react-error-boundary package (v5)
- All TypeScript types are properly defined
- Build and type checking pass successfully

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(auth)/login/page.tsx

@@ -56,9 +56,9 @@ function LoginContent() {
           )}
 
           {error && (
-            <div className="rounded bg-red-50 p-3 text-sm text-red-600">
+            <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3 text-sm text-destructive">
               {(error as { response?: { data?: { message?: string } } })
-                ?.response?.data?.message || 'Login failed. Please try again.'}
+                ?.response?.data?.message || 'Login failed. Please check your credentials and try again.'}
             </div>
           )}
 
@@ -72,7 +72,7 @@ function LoginContent() {
               placeholder="your-company"
             />
             {errors.tenantSlug && (
-              <p className="mt-1 text-sm text-red-600">{errors.tenantSlug.message}</p>
+              <p className="mt-1 text-sm text-destructive">{errors.tenantSlug.message}</p>
             )}
           </div>
 
@@ -86,7 +86,7 @@ function LoginContent() {
               placeholder="you@example.com"
             />
             {errors.email && (
-              <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+              <p className="mt-1 text-sm text-destructive">{errors.email.message}</p>
             )}
           </div>
 
@@ -100,7 +100,7 @@ function LoginContent() {
               placeholder="••••••••"
             />
             {errors.password && (
-              <p className="mt-1 text-sm text-red-600">
+              <p className="mt-1 text-sm text-destructive">
                 {errors.password.message}
               </p>
             )}