Optimize Core Web Vitals in Next.js (Cursor Prompt)

Optimize Core Web Vitals (LCP, CLS, INP) in this Next.js app.

FILES TO REVIEW AND MODIFY:
- All page.tsx files — Check for LCP image optimization
- src/app/layout.tsx — Font loading and script optimization
- next.config.ts — Image optimization config
- All components with images — Replace <img> with next/image
- All components with dynamic content — Fix CLS issues

OPTIMIZATIONS:
1. LCP (Largest Contentful Paint):
   - Add priority prop to above-the-fold hero images in next/image
   - Preload critical fonts using next/font with display: 'swap'
   - Move critical CSS inline; defer non-critical CSS
   - Add sizes prop to all next/image components to prevent unnecessary large image downloads

2. CLS (Cumulative Layout Shift):
   - Add explicit width and height to all next/image components
   - Add aspect-ratio CSS to containers that load dynamic content
   - Use loading skeletons that match content dimensions
   - Set font-display: swap and reserve space for web fonts with size-adjust
   - Avoid injecting content above existing content after load

3. INP (Interaction to Next Paint):
   - Debounce expensive event handlers (search, filter, scroll)
   - Use startTransition for non-urgent state updates
   - Move heavy computations to Web Workers or useMemo
   - Lazy load below-fold components with dynamic() and suspense

4. General:
   - Add next/script with strategy='lazyOnload' for analytics and third-party scripts
   - Enable ISR or static generation for pages that don't need real-time data
   - Add Cache-Control headers for static assets
   - Configure image remotePatterns in next.config.ts

DO NOT:
- Remove existing functionality
- Change the visual design
- Remove analytics or tracking scripts (just defer them)