Convert all React class components to functional components with hooks

[devin-ai-integration]

Convert React Class Components to Functional Components + Add Image Preloading

Summary

This PR accomplishes two main objectives in response to the initial task and a follow-up GitHub comment:

1. Complete Class-to-Functional Component Conversion: Converted all 12 React class components to modern functional components using hooks (useState, useEffect, useCallback, useMemo, React.memo)

2. Image Preloading Implementation: Added useEffect-based image preloading functionality across all pages to improve performance

Key Changes:

• App.js: Complex state management conversion from class to hooks, including cart state, navigation, and search
• All Page Components: Home, About, Furniture, Jewelry, ArtDecor, Collectibles - converted to functional with useState for product data
• All UI Components: Header, Footer, ProductCard, ProductList, Cart - converted with proper hook usage and performance optimizations
• New Image Preloader: Custom useImagePreloader hook that preloads product images, hero images, and team photos in the background

The conversion maintains the exact same props interfaces and functionality while adding performance improvements through React.memo, useCallback, and useMemo optimizations.

Review & Testing Checklist for Human

🔴 HIGH PRIORITY (3 items):

• Cart Functionality: Thoroughly test adding/removing items, quantity updates, total calculation, and cart open/close behavior. The App component's cart state management was significantly refactored from class methods to hooks.

• Image Preloading Behavior: Verify images load properly across all pages (Home, category pages, About) and that the preloading doesn't cause memory leaks or performance issues. Check browser DevTools for excessive network requests or memory usage.

• Complete User Flow Testing: Test all major functionality - navigation between pages, search functionality, product browsing, and cart interactions. The conversion touched every component so comprehensive testing is critical.

Recommended Test Plan:

1. Navigate through all pages (Home → Furniture → Jewelry → Art & Decor → Collectibles → About)
2. Add multiple items to cart, modify quantities, remove items
3. Test search functionality and filtering
4. Monitor browser DevTools for performance issues or console errors
5. Test on different browsers/devices if possible

Notes

• All components now use React hooks following modern best practices
• Performance optimizations added with React.memo, useCallback, and useMemo
• Image preloading uses proper cleanup to prevent memory leaks
• No breaking changes to component APIs - all props interfaces maintained

Link to Devin run: https://app.devin.ai/sessions/7cc7c7a5d3c54097b3e009d73d22a2d5
Requested by: @rohan-ramani

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[rohan-ramani]

Use UseEffect to preload pages from Drive Images