From 836801ce9fba0f53cee1431a8f6f5e596001d9c2 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:03:18 +0000 Subject: [PATCH 1/2] Convert all 12 React class components to functional components with hooks - Convert ProductCard: useState for hover state, useCallback for event handlers - Convert Footer: useState for email/subscription state, useEffect for timeout cleanup - Convert Header: useState for search term, useCallback for navigation handlers - Convert About: useState for team members data, memo for performance - Convert Home: useState for featured products, memo optimization - Convert Furniture: useState for furniture products, memo optimization - Convert Jewelry: useState for jewelry products, memo optimization - Convert ArtDecor: useState for art products, memo optimization - Convert Collectibles: useState for collectibles products, memo optimization - Convert ProductList: useState for sorting/filtering, useMemo for filtered products - Convert Cart: useCallback for handlers, useMemo for total calculation, memo optimization - Convert App: useState for all state management, useCallback for all handlers All components maintain exact same prop interfaces for compatibility. Performance optimized with React.memo, useCallback, and useMemo where appropriate. Application tested locally - all functionality working correctly. Co-Authored-By: Rohan Ramani --- src/App.js | 150 +++++++------- src/components/Cart.js | 187 ++++++++---------- src/components/Footer.js | 166 ++++++++-------- src/components/Header.js | 207 ++++++++++---------- src/components/ProductCard.js | 126 ++++++------ src/components/ProductList.js | 316 +++++++++++++++--------------- src/pages/About.js | 347 ++++++++++++++++---------------- src/pages/ArtDecor.js | 359 +++++++++++++++++----------------- src/pages/Collectibles.js | 359 +++++++++++++++++----------------- src/pages/Furniture.js | 317 +++++++++++++++--------------- src/pages/Home.js | 283 +++++++++++++-------------- src/pages/Jewelry.js | 357 ++++++++++++++++----------------- 12 files changed, 1538 insertions(+), 1636 deletions(-) diff --git a/src/App.js b/src/App.js index e1b2110..6f0f0e2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, useMemo } from 'react'; import './App.css'; import Header from './components/Header'; import ProductList from './components/ProductList'; @@ -11,72 +11,66 @@ import ArtDecor from './pages/ArtDecor'; import Collectibles from './pages/Collectibles'; import About from './pages/About'; -class App extends Component { - constructor(props) { - super(props); - this.state = { - cartItems: [], - isCartOpen: false, - searchTerm: '', - currentPage: 'home' - }; - } +const App = () => { + const [cartItems, setCartItems] = useState([]); + const [isCartOpen, setIsCartOpen] = useState(false); + const [searchTerm, setSearchTerm] = useState(''); + const [currentPage, setCurrentPage] = useState('home'); - handleAddToCart = (product) => { - const existingItem = this.state.cartItems.find(item => item.id === product.id); - - if (existingItem) { - this.setState({ - cartItems: this.state.cartItems.map(item => + const handleAddToCart = useCallback((product) => { + setCartItems(prevItems => { + const existingItem = prevItems.find(item => item.id === product.id); + + if (existingItem) { + return prevItems.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item - ) - }); - } else { - this.setState({ - cartItems: [...this.state.cartItems, { ...product, quantity: 1 }] - }); - } - } - - handleRemoveFromCart = (productId) => { - this.setState({ - cartItems: this.state.cartItems.filter(item => item.id !== productId) + ); + } else { + return [...prevItems, { ...product, quantity: 1 }]; + } }); - } + }, []); - handleUpdateQuantity = (productId, newQuantity) => { - this.setState({ - cartItems: this.state.cartItems.map(item => + const handleRemoveFromCart = useCallback((productId) => { + setCartItems(prevItems => + prevItems.filter(item => item.id !== productId) + ); + }, []); + + const handleUpdateQuantity = useCallback((productId, newQuantity) => { + setCartItems(prevItems => + prevItems.map(item => item.id === productId ? { ...item, quantity: newQuantity } : item ) - }); - } + ); + }, []); - handleCartToggle = () => { - this.setState({ isCartOpen: !this.state.isCartOpen }); - } + const handleCartToggle = useCallback(() => { + setIsCartOpen(prev => !prev); + }, []); - handleSearch = (searchTerm) => { - this.setState({ searchTerm, currentPage: 'products' }); - } + const handleSearch = useCallback((searchTerm) => { + setSearchTerm(searchTerm); + setCurrentPage('products'); + }, []); - handleNavigation = (page) => { - this.setState({ currentPage: page, searchTerm: '' }); - } + const handleNavigation = useCallback((page) => { + setCurrentPage(page); + setSearchTerm(''); + }, []); - getCartItemCount = () => { - return this.state.cartItems.reduce((total, item) => total + item.quantity, 0); - } + const cartItemCount = useMemo(() => { + return cartItems.reduce((total, item) => total + item.quantity, 0); + }, [cartItems]); - renderCurrentPage = () => { - const { currentPage, searchTerm } = this.state; + const renderCurrentPage = useCallback(() => { const commonProps = { - onAddToCart: this.handleAddToCart, - onNavigate: this.handleNavigation + onAddToCart: handleAddToCart, + onNavigate: handleNavigation }; switch (currentPage) { @@ -96,40 +90,38 @@ class App extends Component { default: return ( ); } - } + }, [currentPage, searchTerm, handleAddToCart, handleNavigation]); - render() { - return ( -
-
- -
- {this.renderCurrentPage()} -
+ return ( +
+
+ +
+ {renderCurrentPage()} +
- + -
-
- ); - } -} +
+
+ ); +}; export default App; diff --git a/src/components/Cart.js b/src/components/Cart.js index 78d132e..7a34473 100644 --- a/src/components/Cart.js +++ b/src/components/Cart.js @@ -1,128 +1,111 @@ -import React, { Component } from 'react'; +import React, { useCallback, useMemo, memo } from 'react'; -class Cart extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } +const Cart = memo(({ cartItems, isOpen, onClose, onRemoveFromCart, onUpdateQuantity }) => { - componentDidUpdate(prevProps) { - if (prevProps.isOpen !== this.props.isOpen) { - this.setState({ isOpen: this.props.isOpen }); + const handleRemoveItem = useCallback((productId) => { + if (onRemoveFromCart) { + onRemoveFromCart(productId); } - } + }, [onRemoveFromCart]); - handleRemoveItem = (productId) => { - if (this.props.onRemoveFromCart) { - this.props.onRemoveFromCart(productId); - } - } - - handleUpdateQuantity = (productId, newQuantity) => { + const handleUpdateQuantity = useCallback((productId, newQuantity) => { if (newQuantity <= 0) { - this.handleRemoveItem(productId); - } else if (this.props.onUpdateQuantity) { - this.props.onUpdateQuantity(productId, newQuantity); + handleRemoveItem(productId); + } else if (onUpdateQuantity) { + onUpdateQuantity(productId, newQuantity); } - } + }, [onUpdateQuantity, handleRemoveItem]); - calculateTotal = () => { - return this.props.cartItems.reduce((total, item) => { + const total = useMemo(() => { + return cartItems.reduce((total, item) => { return total + (item.price * item.quantity); }, 0); - } + }, [cartItems]); - handleCheckout = () => { + const handleCheckout = useCallback(() => { alert('Thank you for your interest! Checkout functionality would be implemented here.'); - } + }, []); - render() { - const { cartItems, isOpen, onClose } = this.props; - const total = this.calculateTotal(); + if (!isOpen) return null; - if (!isOpen) return null; - - return ( -
-
-
-

Shopping Cart

- -
+ return ( +
+
+
+

Shopping Cart

+ +
-
- {cartItems.length === 0 ? ( -
-

Your cart is empty

-

Browse our collection of authentic antiques to get started!

-
- ) : ( - <> -
- {cartItems.map(item => ( -
- {item.name} -
-

{item.name}

-

{item.era}

-
-
- - {item.quantity} - -
+
+ {cartItems.length === 0 ? ( +
+

Your cart is empty

+

Browse our collection of authentic antiques to get started!

+
+ ) : ( + <> +
+ {cartItems.map(item => ( +
+ {item.name} +
+

{item.name}

+

{item.era}

+
+
+ {item.quantity} +
-
- ${(item.price * item.quantity).toLocaleString()} -
+ +
+
+ ${(item.price * item.quantity).toLocaleString()}
- ))} -
- -
-
-

Total: ${total.toLocaleString()}

- -

- * Free shipping on orders over $1,000 -

+ ))} +
+ +
+
+

Total: ${total.toLocaleString()}

- - )} -
+ +

+ * Free shipping on orders over $1,000 +

+
+ + )}
- ); - } -} +
+ ); +}); export default Cart; diff --git a/src/components/Footer.js b/src/components/Footer.js index 6a0dde6..ca7bc4a 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,101 +1,101 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, useEffect, memo } from 'react'; -class Footer extends Component { - constructor(props) { - super(props); - this.state = { - email: '', - subscribed: false - }; - } +const Footer = memo(() => { + const [email, setEmail] = useState(''); + const [subscribed, setSubscribed] = useState(false); - handleEmailChange = (e) => { - this.setState({ email: e.target.value }); - } + const handleEmailChange = useCallback((e) => { + setEmail(e.target.value); + }, []); - handleNewsletterSubmit = (e) => { + const handleNewsletterSubmit = useCallback((e) => { e.preventDefault(); - if (this.state.email) { - this.setState({ subscribed: true, email: '' }); - setTimeout(() => { - this.setState({ subscribed: false }); + if (email) { + setSubscribed(true); + setEmail(''); + } + }, [email]); + + useEffect(() => { + if (subscribed) { + const timer = setTimeout(() => { + setSubscribed(false); }, 3000); + return () => clearTimeout(timer); } - } + }, [subscribed]); - render() { - const currentYear = new Date().getFullYear(); + const currentYear = new Date().getFullYear(); - return ( - + ); +}); export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js index 136c6f3..a4dabae 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,121 +1,112 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, memo } from 'react'; -class Header extends Component { - constructor(props) { - super(props); - this.state = { - searchTerm: '' - }; - } +const Header = memo(({ cartItemCount, onCartClick, onSearch, onNavigate, currentPage }) => { + const [searchTerm, setSearchTerm] = useState(''); - handleSearchChange = (e) => { - this.setState({ searchTerm: e.target.value }); - } + const handleSearchChange = useCallback((e) => { + setSearchTerm(e.target.value); + }, []); - handleSearchSubmit = (e) => { + const handleSearchSubmit = useCallback((e) => { e.preventDefault(); - if (this.props.onSearch) { - this.props.onSearch(this.state.searchTerm); + if (onSearch) { + onSearch(searchTerm); } - } + }, [onSearch, searchTerm]); - handleNavClick = (e, page) => { + const handleNavClick = useCallback((e, page) => { e.preventDefault(); - if (this.props.onNavigate) { - this.props.onNavigate(page); + if (onNavigate) { + onNavigate(page); } - } + }, [onNavigate]); - render() { - const { cartItemCount, onCartClick, currentPage } = this.props; - - return ( -
-
-
-

Vintage Treasures

-

Authentic Antiques & Collectibles

-
- - + return ( +
+
+
+

Vintage Treasures

+

Authentic Antiques & Collectibles

+
+ + -
-
- - -
- - -
+
+
+ + +
+ +
-
- ); - } -} +
+
+ ); +}); export default Header; diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 15d845e..e714862 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -1,82 +1,72 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, memo } from 'react'; -class ProductCard extends Component { - constructor(props) { - super(props); - this.state = { - isHovered: false - }; - } +const ProductCard = memo(({ product, onAddToCart }) => { + const [isHovered, setIsHovered] = useState(false); - handleMouseEnter = () => { - this.setState({ isHovered: true }); - } + const handleMouseEnter = useCallback(() => { + setIsHovered(true); + }, []); - handleMouseLeave = () => { - this.setState({ isHovered: false }); - } + const handleMouseLeave = useCallback(() => { + setIsHovered(false); + }, []); - handleAddToCart = () => { - if (this.props.onAddToCart) { - this.props.onAddToCart(this.props.product); + const handleAddToCart = useCallback(() => { + if (onAddToCart) { + onAddToCart(product); } - } + }, [onAddToCart, product]); - render() { - const { product } = this.props; - const { isHovered } = this.state; - - return ( -
-
- {product.name} - {product.isRare && ( - Rare Find - )} + return ( +
+
+ {product.name} + {product.isRare && ( + Rare Find + )} +
+ +
+

{product.name}

+

{product.era}

+

{product.description}

+ +
+ + Condition: {product.condition} + + + Origin: {product.origin} +
-
-

{product.name}

-

{product.era}

-

{product.description}

- -
- - Condition: {product.condition} - - - Origin: {product.origin} - +
+
+ ${product.price} + {product.originalPrice && ( + ${product.originalPrice} + )}
-
-
- ${product.price} - {product.originalPrice && ( - ${product.originalPrice} - )} -
- - -
+
- ); - } -} +
+ ); +}); export default ProductCard; diff --git a/src/components/ProductList.js b/src/components/ProductList.js index 5d94b18..cc4a1dd 100644 --- a/src/components/ProductList.js +++ b/src/components/ProductList.js @@ -1,111 +1,106 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, useMemo, memo } from 'react'; import ProductCard from './ProductCard'; -class ProductList extends Component { - constructor(props) { - super(props); - this.state = { - sortBy: 'name', - filterBy: 'all', - products: [ - { - id: 1, - name: "Victorian Mahogany Writing Desk", - era: "Victorian Era (1860s)", - description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", - price: 2850, - originalPrice: 3200, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 2, - name: "Art Deco Pearl Necklace", - era: "Art Deco (1920s)", - description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.", - price: 1650, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "jewelry" - }, - { - id: 3, - name: "Ming Dynasty Porcelain Vase", - era: "Ming Dynasty (16th Century)", - description: "Rare blue and white porcelain vase with traditional dragon motifs.", - price: 8500, - condition: "Good", - origin: "China", - image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 4, - name: "Edwardian Silver Tea Set", - era: "Edwardian Era (1905)", - description: "Complete sterling silver tea service with ornate engravings and original hallmarks.", - price: 1200, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop", - inStock: false, - isRare: false, - category: "collectibles" - }, - { - id: 5, - name: "Louis XVI Armchair", - era: "Louis XVI Period (1780s)", - description: "Authentic French armchair with original silk upholstery and gilded wood frame.", - price: 4200, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 6, - name: "Victorian Cameo Brooch", - era: "Victorian Era (1870s)", - description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.", - price: 450, - condition: "Excellent", - origin: "Italy", - image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "jewelry" - } - ] - }; - } +const ProductList = memo(({ onAddToCart, searchTerm }) => { + const [sortBy, setSortBy] = useState('name'); + const [filterBy, setFilterBy] = useState('all'); + const [products] = useState([ + { + id: 1, + name: "Victorian Mahogany Writing Desk", + era: "Victorian Era (1860s)", + description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", + price: 2850, + originalPrice: 3200, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 2, + name: "Art Deco Pearl Necklace", + era: "Art Deco (1920s)", + description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.", + price: 1650, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "jewelry" + }, + { + id: 3, + name: "Ming Dynasty Porcelain Vase", + era: "Ming Dynasty (16th Century)", + description: "Rare blue and white porcelain vase with traditional dragon motifs.", + price: 8500, + condition: "Good", + origin: "China", + image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 4, + name: "Edwardian Silver Tea Set", + era: "Edwardian Era (1905)", + description: "Complete sterling silver tea service with ornate engravings and original hallmarks.", + price: 1200, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop", + inStock: false, + isRare: false, + category: "collectibles" + }, + { + id: 5, + name: "Louis XVI Armchair", + era: "Louis XVI Period (1780s)", + description: "Authentic French armchair with original silk upholstery and gilded wood frame.", + price: 4200, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 6, + name: "Victorian Cameo Brooch", + era: "Victorian Era (1870s)", + description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.", + price: 450, + condition: "Excellent", + origin: "Italy", + image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "jewelry" + } + ]); - handleSortChange = (e) => { - this.setState({ sortBy: e.target.value }); - } + const handleSortChange = useCallback((e) => { + setSortBy(e.target.value); + }, []); - handleFilterChange = (e) => { - this.setState({ filterBy: e.target.value }); - } + const handleFilterChange = useCallback((e) => { + setFilterBy(e.target.value); + }, []); - getSortedAndFilteredProducts = () => { - let filteredProducts = this.state.products; + const filteredProducts = useMemo(() => { + let filtered = products; // Apply search filter if provided - if (this.props.searchTerm) { - const searchLower = this.props.searchTerm.toLowerCase(); - filteredProducts = filteredProducts.filter(product => + if (searchTerm) { + const searchLower = searchTerm.toLowerCase(); + filtered = filtered.filter(product => product.name.toLowerCase().includes(searchLower) || product.description.toLowerCase().includes(searchLower) || product.era.toLowerCase().includes(searchLower) @@ -113,15 +108,15 @@ class ProductList extends Component { } // Apply category filter - if (this.state.filterBy !== 'all') { - filteredProducts = filteredProducts.filter(product => - product.category === this.state.filterBy + if (filterBy !== 'all') { + filtered = filtered.filter(product => + product.category === filterBy ); } // Apply sorting - filteredProducts.sort((a, b) => { - switch (this.state.sortBy) { + filtered.sort((a, b) => { + switch (sortBy) { case 'price-low': return a.price - b.price; case 'price-high': @@ -134,67 +129,62 @@ class ProductList extends Component { } }); - return filteredProducts; - } - - render() { - const { onAddToCart } = this.props; - const products = this.getSortedAndFilteredProducts(); + return filtered; + }, [products, searchTerm, filterBy, sortBy]); - return ( -
-
-

Our Antique Collection

-
-
- - -
- -
- - -
+ return ( +
+
+

Our Antique Collection

+
+
+ + +
+ +
+ +
+
-
- {products.length > 0 ? ( - products.map(product => ( - - )) - ) : ( -
-

No products found matching your criteria.

-
- )} -
+
+ {filteredProducts.length > 0 ? ( + filteredProducts.map(product => ( + + )) + ) : ( +
+

No products found matching your criteria.

+
+ )}
- ); - } -} +
+ ); +}); export default ProductList; diff --git a/src/pages/About.js b/src/pages/About.js index e69eb43..6caa1ce 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -1,199 +1,192 @@ -import React, { Component } from 'react'; +import React, { useState, memo } from 'react'; -class About extends Component { - constructor(props) { - super(props); - this.state = { - teamMembers: [ - { - name: "Eleanor Whitmore", - title: "Founder & Chief Curator", - bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.", - image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face" - }, - { - name: "James Chen", - title: "Asian Art Specialist", - bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.", - image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face" - }, - { - name: "Isabella Rodriguez", - title: "Jewelry Expert", - bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.", - image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face" - } - ] - }; - } +const About = memo(() => { + const [teamMembers] = useState([ + { + name: "Eleanor Whitmore", + title: "Founder & Chief Curator", + bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.", + image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face" + }, + { + name: "James Chen", + title: "Asian Art Specialist", + bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.", + image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face" + }, + { + name: "Isabella Rodriguez", + title: "Jewelry Expert", + bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.", + image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face" + } + ]); - render() { - return ( -
-
-
-

About Vintage Treasures

-

Preserving History, One Treasure at a Time

+ return ( +
+
+
+

About Vintage Treasures

+

Preserving History, One Treasure at a Time

+
+
+ +
+
+
+

Our Story

+

+ Founded in 1985 by Eleanor Whitmore, Vintage Treasures began as a small antique shop + in the heart of London's Portobello Road. What started as a passion for preserving + beautiful objects from the past has grown into one of the world's most respected + dealers in authenticated antiques and collectibles. +

+

+ Over the decades, we have built relationships with collectors, estate executors, + and auction houses worldwide, allowing us to offer our clients access to exceptional + pieces that rarely come to market. Each item in our collection is carefully vetted + for authenticity, condition, and provenance. +

+

+ Today, Vintage Treasures continues Eleanor's original mission: to connect discerning + collectors with authentic pieces that tell the story of human craftsmanship and + artistic achievement throughout history. +

+
+
+ Vintage Treasures showroom
-
+
+
-
-
-
-

Our Story

-

- Founded in 1985 by Eleanor Whitmore, Vintage Treasures began as a small antique shop - in the heart of London's Portobello Road. What started as a passion for preserving - beautiful objects from the past has grown into one of the world's most respected - dealers in authenticated antiques and collectibles. -

-

- Over the decades, we have built relationships with collectors, estate executors, - and auction houses worldwide, allowing us to offer our clients access to exceptional - pieces that rarely come to market. Each item in our collection is carefully vetted - for authenticity, condition, and provenance. -

-

- Today, Vintage Treasures continues Eleanor's original mission: to connect discerning - collectors with authentic pieces that tell the story of human craftsmanship and - artistic achievement throughout history. -

+
+
+

Our Mission

+
+
+

๐Ÿ” Authenticity First

+

Every piece undergoes rigorous authentication by our team of experts and trusted specialists.

+
+
+

๐Ÿ“š Education & Knowledge

+

We believe in sharing knowledge about the history and significance of each piece we offer.

+
+
+

๐ŸŒ Global Reach

+

Connecting collectors worldwide with exceptional pieces from diverse cultures and time periods.

-
- Vintage Treasures showroom +
+

๐Ÿ›ก๏ธ Preservation

+

Ensuring these historical treasures are preserved for future generations to appreciate and study.

-
+
+
-
-
-

Our Mission

-
-
-

๐Ÿ” Authenticity First

-

Every piece undergoes rigorous authentication by our team of experts and trusted specialists.

+
+
+

Meet Our Experts

+
+ {teamMembers.map((member, index) => ( +
+ {member.name} +

{member.name}

+

{member.title}

+

{member.bio}

-
-

๐Ÿ“š Education & Knowledge

-

We believe in sharing knowledge about the history and significance of each piece we offer.

-
-
-

๐ŸŒ Global Reach

-

Connecting collectors worldwide with exceptional pieces from diverse cultures and time periods.

-
-
-

๐Ÿ›ก๏ธ Preservation

-

Ensuring these historical treasures are preserved for future generations to appreciate and study.

-
-
+ ))}
-
+
+
-
-
-

Meet Our Experts

-
- {this.state.teamMembers.map((member, index) => ( -
- {member.name} -

{member.name}

-

{member.title}

-

{member.bio}

-
- ))} +
+
+

Our Authentication Process

+
+
+
1
+

Initial Assessment

+

Every piece is examined for style, materials, construction techniques, and maker's marks.

-
-
- -
-
-

Our Authentication Process

-
-
-
1
-

Initial Assessment

-

Every piece is examined for style, materials, construction techniques, and maker's marks.

-
-
-
2
-

Expert Evaluation

-

Our specialists research provenance and compare against known examples and references.

-
-
-
3
-

Scientific Analysis

-

When necessary, we employ scientific testing methods to verify age and materials.

-
-
-
4
-

Documentation

-

Complete documentation is prepared, including condition reports and certificates of authenticity.

-
+
+
2
+

Expert Evaluation

+

Our specialists research provenance and compare against known examples and references.

+
+
+
3
+

Scientific Analysis

+

When necessary, we employ scientific testing methods to verify age and materials.

+
+
+
4
+

Documentation

+

Complete documentation is prepared, including condition reports and certificates of authenticity.

-
+
+
-
-
-

Visit Our Showroom

-
-
-

๐Ÿ“ Location

-

- 123 Portobello Road
- Notting Hill, London W11 2DY
- United Kingdom -

-
-
-

๐Ÿ•’ Hours

-

- Monday - Saturday: 10:00 AM - 6:00 PM
- Sunday: 12:00 PM - 5:00 PM
- Appointments available outside hours -

-
-
-

๐Ÿ“ž Contact

-

- Phone: +44 20 7229 8888
- Email: info@vintagetreasures.com
- WhatsApp: +44 7700 900123 -

-
+
+
+

Visit Our Showroom

+
+
+

๐Ÿ“ Location

+

+ 123 Portobello Road
+ Notting Hill, London W11 2DY
+ United Kingdom +

+
+
+

๐Ÿ•’ Hours

+

+ Monday - Saturday: 10:00 AM - 6:00 PM
+ Sunday: 12:00 PM - 5:00 PM
+ Appointments available outside hours +

+
+
+

๐Ÿ“ž Contact

+

+ Phone: +44 20 7229 8888
+ Email: info@vintagetreasures.com
+ WhatsApp: +44 7700 900123 +

-
+
+
-
-
-

Professional Affiliations

-
-
-

LAPADA

-

Association of Art & Antique Dealers

-
-
-

CINOA

-

International Confederation of Art & Antique Dealers

-
-
-

BADA

-

British Antique Dealers' Association

-
-
-

AAA

-

Antiquarian Appraisers Association

-
+
+
+

Professional Affiliations

+
+
+

LAPADA

+

Association of Art & Antique Dealers

+
+
+

CINOA

+

International Confederation of Art & Antique Dealers

+
+
+

BADA

+

British Antique Dealers' Association

+
+
+

AAA

+

Antiquarian Appraisers Association

-
-
- ); - } -} +
+
+
+ ); +}); export default About; diff --git a/src/pages/ArtDecor.js b/src/pages/ArtDecor.js index bcfe5f7..6277edd 100644 --- a/src/pages/ArtDecor.js +++ b/src/pages/ArtDecor.js @@ -1,200 +1,191 @@ -import React, { Component } from 'react'; +import React, { useState, memo } from 'react'; import ProductCard from '../components/ProductCard'; -class ArtDecor extends Component { - constructor(props) { - super(props); - this.state = { - artProducts: [ - { - id: 3, - name: "Ming Dynasty Porcelain Vase", - era: "Ming Dynasty (16th Century)", - description: "Rare blue and white porcelain vase with traditional dragon motifs.", - price: 8500, - condition: "Good", - origin: "China", - image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 15, - name: "Japanese Woodblock Print", - era: "Edo Period (1800s)", - description: "Original ukiyo-e print by renowned artist, depicting Mount Fuji in cherry blossom season.", - price: 3200, - condition: "Very Good", - origin: "Japan", - image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 16, - name: "French Bronze Sculpture", - era: "Belle ร‰poque (1890s)", - description: "Elegant bronze figurine of a dancer, signed by the artist with original patina.", - price: 4800, - condition: "Excellent", - origin: "France", - image: "https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 17, - name: "Persian Miniature Painting", - era: "Safavid Period (17th Century)", - description: "Exquisite hand-painted miniature depicting a royal hunting scene with gold leaf details.", - price: 6200, - condition: "Very Good", - origin: "Persia", - image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 18, - name: "Venetian Glass Chandelier", - era: "Murano Glass (1920s)", - description: "Stunning Murano glass chandelier with hand-blown flowers and crystal drops.", - price: 5600, - condition: "Excellent", - origin: "Italy", - image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400&h=300&fit=crop", - inStock: false, - isRare: true, - category: "art" - }, - { - id: 19, - name: "Art Nouveau Stained Glass Panel", - era: "Art Nouveau (1905)", - description: "Beautiful stained glass window panel featuring iris flowers in the Tiffany style.", - price: 3800, - condition: "Good", - origin: "USA", - image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "art" - } - ] - }; - } +const ArtDecor = memo(({ onAddToCart }) => { + const [artProducts] = useState([ + { + id: 3, + name: "Ming Dynasty Porcelain Vase", + era: "Ming Dynasty (16th Century)", + description: "Rare blue and white porcelain vase with traditional dragon motifs.", + price: 8500, + condition: "Good", + origin: "China", + image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 15, + name: "Japanese Woodblock Print", + era: "Edo Period (1800s)", + description: "Original ukiyo-e print by renowned artist, depicting Mount Fuji in cherry blossom season.", + price: 3200, + condition: "Very Good", + origin: "Japan", + image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 16, + name: "French Bronze Sculpture", + era: "Belle ร‰poque (1890s)", + description: "Elegant bronze figurine of a dancer, signed by the artist with original patina.", + price: 4800, + condition: "Excellent", + origin: "France", + image: "https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 17, + name: "Persian Miniature Painting", + era: "Safavid Period (17th Century)", + description: "Exquisite hand-painted miniature depicting a royal hunting scene with gold leaf details.", + price: 6200, + condition: "Very Good", + origin: "Persia", + image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 18, + name: "Venetian Glass Chandelier", + era: "Murano Glass (1920s)", + description: "Stunning Murano glass chandelier with hand-blown flowers and crystal drops.", + price: 5600, + condition: "Excellent", + origin: "Italy", + image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400&h=300&fit=crop", + inStock: false, + isRare: true, + category: "art" + }, + { + id: 19, + name: "Art Nouveau Stained Glass Panel", + era: "Art Nouveau (1905)", + description: "Beautiful stained glass window panel featuring iris flowers in the Tiffany style.", + price: 3800, + condition: "Good", + origin: "USA", + image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "art" + } + ]); - render() { - const { onAddToCart } = this.props; + return ( +
+
+
+

Art & Decorative Objects

+

Masterpieces that transform spaces and inspire souls

+

+ Our art and decorative objects collection spans cultures and centuries, featuring + everything from ancient ceramics to Art Nouveau stained glass. Each piece has been + selected for its artistic merit, historical significance, and ability to enhance + any living space with beauty and character. +

+
+
- return ( -
-
-
-

Art & Decorative Objects

-

Masterpieces that transform spaces and inspire souls

-

- Our art and decorative objects collection spans cultures and centuries, featuring - everything from ancient ceramics to Art Nouveau stained glass. Each piece has been - selected for its artistic merit, historical significance, and ability to enhance - any living space with beauty and character. -

-
-
- -
-
-

Artistic Traditions

-
-
-

Asian Art

-

Porcelain, woodblock prints, and traditional paintings from China and Japan

-
-
-

European Decorative Arts

-

Sculptures, glass work, and decorative objects from European masters

-
-
-

Islamic Art

-

Miniature paintings, calligraphy, and decorative metalwork

-
-
-

Art Glass

-

Tiffany, Murano, and other fine art glass pieces

-
+
+
+

Artistic Traditions

+
+
+

Asian Art

+

Porcelain, woodblock prints, and traditional paintings from China and Japan

+
+
+

European Decorative Arts

+

Sculptures, glass work, and decorative objects from European masters

+
+
+

Islamic Art

+

Miniature paintings, calligraphy, and decorative metalwork

+
+
+

Art Glass

+

Tiffany, Murano, and other fine art glass pieces

-
+
+
-
-
-

Available Art & Decor

-
- {this.state.artProducts.map(product => ( - - ))} -
+
+
+

Available Art & Decor

+
+ {artProducts.map(product => ( + + ))}
-
+
+
-
-
-

Building Your Art Collection

-
-
-

๐ŸŽจ Start with What You Love

-

Choose pieces that speak to you personally rather than following trends.

-
-
-

๐Ÿ“š Research and Learn

-

Understanding the history and context enhances appreciation and value.

-
-
-

๐Ÿ” Condition Matters

-

Consider restoration costs and how condition affects both beauty and value.

-
-
-

๐Ÿ›๏ธ Provenance is Key

-

Documentation of ownership history adds authenticity and value.

-
+
+
+

Building Your Art Collection

+
+
+

๐ŸŽจ Start with What You Love

+

Choose pieces that speak to you personally rather than following trends.

+
+
+

๐Ÿ“š Research and Learn

+

Understanding the history and context enhances appreciation and value.

+
+
+

๐Ÿ” Condition Matters

+

Consider restoration costs and how condition affects both beauty and value.

+
+
+

๐Ÿ›๏ธ Provenance is Key

+

Documentation of ownership history adds authenticity and value.

-
+
+
-
-
-

Displaying Your Collection

-
-
-

๐Ÿ’ก Proper Lighting

-

Use UV-filtered lighting to protect artworks while showcasing their beauty.

-
-
-

๐ŸŒก๏ธ Climate Control

-

Maintain stable temperature and humidity to preserve delicate materials.

-
-
-

๐Ÿ–ผ๏ธ Professional Framing

-

Use archival materials and proper mounting techniques for works on paper.

-
-
-

๐Ÿ”’ Security Considerations

-

Protect valuable pieces with appropriate security measures and insurance.

-
+
+
+

Displaying Your Collection

+
+
+

๐Ÿ’ก Proper Lighting

+

Use UV-filtered lighting to protect artworks while showcasing their beauty.

+
+
+

๐ŸŒก๏ธ Climate Control

+

Maintain stable temperature and humidity to preserve delicate materials.

+
+
+

๐Ÿ–ผ๏ธ Professional Framing

+

Use archival materials and proper mounting techniques for works on paper.

+
+
+

๐Ÿ”’ Security Considerations

+

Protect valuable pieces with appropriate security measures and insurance.

-
-
- ); - } -} +
+
+
+ ); +}); export default ArtDecor; diff --git a/src/pages/Collectibles.js b/src/pages/Collectibles.js index fc23a80..eaf4e28 100644 --- a/src/pages/Collectibles.js +++ b/src/pages/Collectibles.js @@ -1,200 +1,191 @@ -import React, { Component } from 'react'; +import React, { useState, memo } from 'react'; import ProductCard from '../components/ProductCard'; -class Collectibles extends Component { - constructor(props) { - super(props); - this.state = { - collectiblesProducts: [ - { - id: 4, - name: "Edwardian Silver Tea Set", - era: "Edwardian Era (1905)", - description: "Complete sterling silver tea service with ornate engravings and original hallmarks.", - price: 1200, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop", - inStock: false, - isRare: false, - category: "collectibles" - }, - { - id: 20, - name: "Vintage Pocket Watch", - era: "Railroad Era (1920s)", - description: "Hamilton Railway Special pocket watch with 21 jewels, original case and chain.", - price: 850, - condition: "Very Good", - origin: "USA", - image: "https://images.unsplash.com/photo-1509048191080-d2e2678e67b4?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "collectibles" - }, - { - id: 21, - name: "Royal Doulton Figurine", - era: "Mid-Century (1950s)", - description: "Limited edition Royal Doulton figurine 'The Balloon Man' in perfect condition.", - price: 320, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "collectibles" - }, - { - id: 22, - name: "Antique Compass Set", - era: "Victorian Era (1880s)", - description: "Brass maritime compass in original mahogany box with nautical instruments.", - price: 680, - condition: "Good", - origin: "England", - image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "collectibles" - }, - { - id: 23, - name: "Vintage Camera Collection", - era: "Mid-Century (1940s)", - description: "Leica IIIf rangefinder camera with original leather case and multiple lenses.", - price: 1450, - condition: "Very Good", - origin: "Germany", - image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "collectibles" - }, - { - id: 24, - name: "Antique Map Collection", - era: "Colonial Period (1750s)", - description: "Hand-colored engraved maps of the American colonies, professionally framed.", - price: 2200, - condition: "Good", - origin: "England", - image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "collectibles" - } - ] - }; - } +const Collectibles = memo(({ onAddToCart }) => { + const [collectiblesProducts] = useState([ + { + id: 4, + name: "Edwardian Silver Tea Set", + era: "Edwardian Era (1905)", + description: "Complete sterling silver tea service with ornate engravings and original hallmarks.", + price: 1200, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop", + inStock: false, + isRare: false, + category: "collectibles" + }, + { + id: 20, + name: "Vintage Pocket Watch", + era: "Railroad Era (1920s)", + description: "Hamilton Railway Special pocket watch with 21 jewels, original case and chain.", + price: 850, + condition: "Very Good", + origin: "USA", + image: "https://images.unsplash.com/photo-1509048191080-d2e2678e67b4?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "collectibles" + }, + { + id: 21, + name: "Royal Doulton Figurine", + era: "Mid-Century (1950s)", + description: "Limited edition Royal Doulton figurine 'The Balloon Man' in perfect condition.", + price: 320, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "collectibles" + }, + { + id: 22, + name: "Antique Compass Set", + era: "Victorian Era (1880s)", + description: "Brass maritime compass in original mahogany box with nautical instruments.", + price: 680, + condition: "Good", + origin: "England", + image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "collectibles" + }, + { + id: 23, + name: "Vintage Camera Collection", + era: "Mid-Century (1940s)", + description: "Leica IIIf rangefinder camera with original leather case and multiple lenses.", + price: 1450, + condition: "Very Good", + origin: "Germany", + image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "collectibles" + }, + { + id: 24, + name: "Antique Map Collection", + era: "Colonial Period (1750s)", + description: "Hand-colored engraved maps of the American colonies, professionally framed.", + price: 2200, + condition: "Good", + origin: "England", + image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "collectibles" + } + ]); - render() { - const { onAddToCart } = this.props; + return ( +
+
+
+

Collectibles & Curiosities

+

Unique treasures for the discerning collector

+

+ Our collectibles section features an eclectic mix of fascinating objects that tell + stories of human ingenuity and craftsmanship. From precision timepieces to scientific + instruments, each piece represents a moment in history and a testament to the artisans + who created them. +

+
+
- return ( -
-
-
-

Collectibles & Curiosities

-

Unique treasures for the discerning collector

-

- Our collectibles section features an eclectic mix of fascinating objects that tell - stories of human ingenuity and craftsmanship. From precision timepieces to scientific - instruments, each piece represents a moment in history and a testament to the artisans - who created them. -

-
-
- -
-
-

Collecting Categories

-
-
-

Timepieces

-

Pocket watches, clocks, and chronometers from renowned makers

-
-
-

Scientific Instruments

-

Compasses, telescopes, and navigational tools from maritime history

-
-
-

Silver & Metalwork

-

Tea services, serving pieces, and decorative metalwork

-
-
-

Vintage Technology

-

Cameras, radios, and early technological innovations

-
+
+
+

Collecting Categories

+
+
+

Timepieces

+

Pocket watches, clocks, and chronometers from renowned makers

+
+
+

Scientific Instruments

+

Compasses, telescopes, and navigational tools from maritime history

+
+
+

Silver & Metalwork

+

Tea services, serving pieces, and decorative metalwork

+
+
+

Vintage Technology

+

Cameras, radios, and early technological innovations

-
+
+
-
-
-

Available Collectibles

-
- {this.state.collectiblesProducts.map(product => ( - - ))} -
+
+
+

Available Collectibles

+
+ {collectiblesProducts.map(product => ( + + ))}
-
+
+
-
-
-

The Art of Collecting

-
-
-

๐ŸŽฏ Focus Your Collection

-

Develop expertise in specific areas rather than collecting everything that catches your eye.

-
-
-

๐Ÿ“– Document Everything

-

Keep detailed records of provenance, condition, and any restoration work performed.

-
-
-

๐Ÿ” Condition is Critical

-

Original condition often matters more than rarity in determining long-term value.

-
-
-

๐Ÿค Build Relationships

-

Connect with other collectors, dealers, and experts in your field of interest.

-
+
+
+

The Art of Collecting

+
+
+

๐ŸŽฏ Focus Your Collection

+

Develop expertise in specific areas rather than collecting everything that catches your eye.

+
+
+

๐Ÿ“– Document Everything

+

Keep detailed records of provenance, condition, and any restoration work performed.

+
+
+

๐Ÿ” Condition is Critical

+

Original condition often matters more than rarity in determining long-term value.

+
+
+

๐Ÿค Build Relationships

+

Connect with other collectors, dealers, and experts in your field of interest.

-
+
+
-
-
-

Collectibles as Investment

-
-
-

๐Ÿ“ˆ Market Research

-

Study market trends and auction results to understand value patterns in your collecting area.

-
-
-

๐Ÿ›ก๏ธ Insurance & Storage

-

Protect your investment with proper insurance coverage and climate-controlled storage.

-
-
-

โฐ Long-term Perspective

-

The best collectibles appreciate over decades, not months or years.

-
-
-

๐Ÿ’ก Buy Quality

-

One exceptional piece often outperforms multiple mediocre items over time.

-
+
+
+

Collectibles as Investment

+
+
+

๐Ÿ“ˆ Market Research

+

Study market trends and auction results to understand value patterns in your collecting area.

+
+
+

๐Ÿ›ก๏ธ Insurance & Storage

+

Protect your investment with proper insurance coverage and climate-controlled storage.

+
+
+

โฐ Long-term Perspective

+

The best collectibles appreciate over decades, not months or years.

+
+
+

๐Ÿ’ก Buy Quality

+

One exceptional piece often outperforms multiple mediocre items over time.

-
-
- ); - } -} +
+
+
+ ); +}); export default Collectibles; diff --git a/src/pages/Furniture.js b/src/pages/Furniture.js index defaf44..269a32d 100644 --- a/src/pages/Furniture.js +++ b/src/pages/Furniture.js @@ -1,176 +1,167 @@ -import React, { Component } from 'react'; +import React, { useState, memo } from 'react'; import ProductCard from '../components/ProductCard'; -class Furniture extends Component { - constructor(props) { - super(props); - this.state = { - furnitureProducts: [ - { - id: 1, - name: "Victorian Mahogany Writing Desk", - era: "Victorian Era (1860s)", - description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", - price: 2850, - originalPrice: 3200, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 5, - name: "Louis XVI Armchair", - era: "Louis XVI Period (1780s)", - description: "Authentic French armchair with original silk upholstery and gilded wood frame.", - price: 4200, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 7, - name: "Georgian Dining Table", - era: "Georgian Period (1820s)", - description: "Magnificent mahogany dining table that seats 12, with original pedestal base and brass casters.", - price: 6800, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1549497538-303791108f95?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 8, - name: "Art Deco Vanity Set", - era: "Art Deco (1930s)", - description: "Stunning walnut vanity with matching stool and triple mirror, featuring geometric inlays.", - price: 3200, - condition: "Very Good", - origin: "USA", - image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "furniture" - }, - { - id: 9, - name: "Chippendale Bookcase", - era: "Chippendale Style (1760s)", - description: "Rare mahogany bookcase with original glass doors and adjustable shelving.", - price: 5400, - condition: "Good", - origin: "England", - image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 10, - name: "Windsor Rocking Chair", - era: "Colonial Period (1790s)", - description: "Traditional Windsor rocking chair in original paint with rush seat.", - price: 1850, - condition: "Good", - origin: "USA", - image: "https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&h=300&fit=crop", - inStock: false, - isRare: false, - category: "furniture" - } - ] - }; - } +const Furniture = memo(({ onAddToCart }) => { + const [furnitureProducts] = useState([ + { + id: 1, + name: "Victorian Mahogany Writing Desk", + era: "Victorian Era (1860s)", + description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", + price: 2850, + originalPrice: 3200, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 5, + name: "Louis XVI Armchair", + era: "Louis XVI Period (1780s)", + description: "Authentic French armchair with original silk upholstery and gilded wood frame.", + price: 4200, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 7, + name: "Georgian Dining Table", + era: "Georgian Period (1820s)", + description: "Magnificent mahogany dining table that seats 12, with original pedestal base and brass casters.", + price: 6800, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1549497538-303791108f95?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 8, + name: "Art Deco Vanity Set", + era: "Art Deco (1930s)", + description: "Stunning walnut vanity with matching stool and triple mirror, featuring geometric inlays.", + price: 3200, + condition: "Very Good", + origin: "USA", + image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "furniture" + }, + { + id: 9, + name: "Chippendale Bookcase", + era: "Chippendale Style (1760s)", + description: "Rare mahogany bookcase with original glass doors and adjustable shelving.", + price: 5400, + condition: "Good", + origin: "England", + image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 10, + name: "Windsor Rocking Chair", + era: "Colonial Period (1790s)", + description: "Traditional Windsor rocking chair in original paint with rush seat.", + price: 1850, + condition: "Good", + origin: "USA", + image: "https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&h=300&fit=crop", + inStock: false, + isRare: false, + category: "furniture" + } + ]); - render() { - const { onAddToCart } = this.props; + return ( +
+
+
+

Antique Furniture Collection

+

Timeless pieces that bring history into your home

+

+ Our furniture collection spans centuries of craftsmanship, from elegant Victorian + writing desks to sturdy Colonial chairs. Each piece has been carefully selected + for its historical significance, quality construction, and enduring beauty. +

+
+
- return ( -
-
-
-

Antique Furniture Collection

-

Timeless pieces that bring history into your home

-

- Our furniture collection spans centuries of craftsmanship, from elegant Victorian - writing desks to sturdy Colonial chairs. Each piece has been carefully selected - for its historical significance, quality construction, and enduring beauty. -

-
-
- -
-
-

Browse by Style

-
-
-

Victorian Era

-

Ornate designs with rich woods and intricate details

-
-
-

Georgian Period

-

Elegant proportions and classical influences

-
-
-

Art Deco

-

Geometric patterns and luxurious materials

-
-
-

Colonial American

-

Functional designs with rustic charm

-
+
+
+

Browse by Style

+
+
+

Victorian Era

+

Ornate designs with rich woods and intricate details

+
+
+

Georgian Period

+

Elegant proportions and classical influences

+
+
+

Art Deco

+

Geometric patterns and luxurious materials

+
+
+

Colonial American

+

Functional designs with rustic charm

-
+
+
-
-
-

Available Furniture

-
- {this.state.furnitureProducts.map(product => ( - - ))} -
+
+
+

Available Furniture

+
+ {furnitureProducts.map(product => ( + + ))}
-
+
+
-
-
-

Caring for Your Antique Furniture

-
-
-

๐ŸŒก๏ธ Climate Control

-

Maintain stable temperature and humidity to prevent wood movement and cracking.

-
-
-

โ˜€๏ธ Light Protection

-

Keep furniture away from direct sunlight to prevent fading and wood damage.

-
-
-

๐Ÿงฝ Gentle Cleaning

-

Use appropriate wood cleaners and soft cloths to maintain the original finish.

-
-
-

๐Ÿ”ง Professional Restoration

-

Consult experts for any repairs to preserve historical value and integrity.

-
+
+
+

Caring for Your Antique Furniture

+
+
+

๐ŸŒก๏ธ Climate Control

+

Maintain stable temperature and humidity to prevent wood movement and cracking.

+
+
+

โ˜€๏ธ Light Protection

+

Keep furniture away from direct sunlight to prevent fading and wood damage.

+
+
+

๐Ÿงฝ Gentle Cleaning

+

Use appropriate wood cleaners and soft cloths to maintain the original finish.

+
+
+

๐Ÿ”ง Professional Restoration

+

Consult experts for any repairs to preserve historical value and integrity.

-
-
- ); - } -} +
+
+
+ ); +}); export default Furniture; diff --git a/src/pages/Home.js b/src/pages/Home.js index a72dfa4..eefa540 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,159 +1,158 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, memo } from 'react'; import ProductCard from '../components/ProductCard'; -class Home extends Component { - constructor(props) { - super(props); - this.state = { - featuredProducts: [ - { - id: 1, - name: "Victorian Mahogany Writing Desk", - era: "Victorian Era (1860s)", - description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", - price: 2850, - originalPrice: 3200, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - }, - { - id: 3, - name: "Ming Dynasty Porcelain Vase", - era: "Ming Dynasty (16th Century)", - description: "Rare blue and white porcelain vase with traditional dragon motifs.", - price: 8500, - condition: "Good", - origin: "China", - image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "art" - }, - { - id: 5, - name: "Louis XVI Armchair", - era: "Louis XVI Period (1780s)", - description: "Authentic French armchair with original silk upholstery and gilded wood frame.", - price: 4200, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "furniture" - } - ] - }; - } +const Home = memo(({ onAddToCart, onNavigate }) => { + const [featuredProducts] = useState([ + { + id: 1, + name: "Victorian Mahogany Writing Desk", + era: "Victorian Era (1860s)", + description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.", + price: 2850, + originalPrice: 3200, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + }, + { + id: 3, + name: "Ming Dynasty Porcelain Vase", + era: "Ming Dynasty (16th Century)", + description: "Rare blue and white porcelain vase with traditional dragon motifs.", + price: 8500, + condition: "Good", + origin: "China", + image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "art" + }, + { + id: 5, + name: "Louis XVI Armchair", + era: "Louis XVI Period (1780s)", + description: "Authentic French armchair with original silk upholstery and gilded wood frame.", + price: 4200, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "furniture" + } + ]); - render() { - const { onAddToCart } = this.props; + const handleExploreClick = useCallback(() => { + onNavigate('products'); + }, [onNavigate]); - return ( -
-
-
-

Welcome to Vintage Treasures

-

Discover Authentic Antiques & Timeless Collectibles

-

- Step into a world where history meets elegance. Our carefully curated collection - features authentic antiques from around the globe, each piece telling its own - unique story of craftsmanship and heritage. -

- + const handleViewAllClick = useCallback(() => { + onNavigate('products'); + }, [onNavigate]); + + return ( +
+
+
+

Welcome to Vintage Treasures

+

Discover Authentic Antiques & Timeless Collectibles

+

+ Step into a world where history meets elegance. Our carefully curated collection + features authentic antiques from around the globe, each piece telling its own + unique story of craftsmanship and heritage. +

+ +
+
+ Antique collection +
+
+ +
+
+
+
๐Ÿบ
+

Authentic Pieces

+

Every item is carefully authenticated and comes with detailed provenance documentation.

-
- Antique collection +
+
๐ŸŒ
+

Global Collection

+

Sourced from estate sales, auctions, and private collections worldwide.

-
- -
-
-
-
๐Ÿบ
-

Authentic Pieces

-

Every item is carefully authenticated and comes with detailed provenance documentation.

-
-
-
๐ŸŒ
-

Global Collection

-

Sourced from estate sales, auctions, and private collections worldwide.

-
-
-
๐Ÿ”
-

Expert Curation

-

Our team of antique specialists ensures quality and historical accuracy.

-
-
-
๐Ÿšš
-

Secure Shipping

-

Professional packaging and insured delivery for your precious acquisitions.

-
+
+
๐Ÿ”
+

Expert Curation

+

Our team of antique specialists ensures quality and historical accuracy.

+
+
+
๐Ÿšš
+

Secure Shipping

+

Professional packaging and insured delivery for your precious acquisitions.

-
+
+
-
-
-

Featured Treasures

-

Handpicked exceptional pieces from our collection

-
- {this.state.featuredProducts.map(product => ( - - ))} -
- +
+
+

Featured Treasures

+

Handpicked exceptional pieces from our collection

+
+ {featuredProducts.map(product => ( + + ))}
-
+ +
+
-
-
-

What Our Collectors Say

-
-
-

"The quality and authenticity of pieces from Vintage Treasures is unmatched. Each purchase feels like acquiring a piece of history."

-
- Margaret Chen - Art Collector -
+
+
+

What Our Collectors Say

+
+
+

"The quality and authenticity of pieces from Vintage Treasures is unmatched. Each purchase feels like acquiring a piece of history."

+
+ Margaret Chen + Art Collector
-
-

"I've been collecting antiques for 30 years, and this is my go-to source for exceptional pieces with verified provenance."

-
- Robert Williams - Antique Enthusiast -
+
+
+

"I've been collecting antiques for 30 years, and this is my go-to source for exceptional pieces with verified provenance."

+
+ Robert Williams + Antique Enthusiast
-
-

"The customer service is outstanding, and the packaging ensures my precious acquisitions arrive in perfect condition."

-
- Elena Rodriguez - Interior Designer -
+
+
+

"The customer service is outstanding, and the packaging ensures my precious acquisitions arrive in perfect condition."

+
+ Elena Rodriguez + Interior Designer
-
-
- ); - } -} +
+
+
+ ); +}); export default Home; diff --git a/src/pages/Jewelry.js b/src/pages/Jewelry.js index aa76030..49f4774 100644 --- a/src/pages/Jewelry.js +++ b/src/pages/Jewelry.js @@ -1,199 +1,190 @@ -import React, { Component } from 'react'; +import React, { useState, memo } from 'react'; import ProductCard from '../components/ProductCard'; -class Jewelry extends Component { - constructor(props) { - super(props); - this.state = { - jewelryProducts: [ - { - id: 2, - name: "Art Deco Pearl Necklace", - era: "Art Deco (1920s)", - description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.", - price: 1650, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "jewelry" - }, - { - id: 6, - name: "Victorian Cameo Brooch", - era: "Victorian Era (1870s)", - description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.", - price: 450, - condition: "Excellent", - origin: "Italy", - image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", - inStock: true, - isRare: false, - category: "jewelry" - }, - { - id: 11, - name: "Edwardian Diamond Ring", - era: "Edwardian Era (1910s)", - description: "Exquisite platinum ring featuring a 2-carat old European cut diamond with milgrain detailing.", - price: 8900, - condition: "Excellent", - origin: "England", - image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "jewelry" - }, - { - id: 12, - name: "Art Nouveau Pendant", - era: "Art Nouveau (1900s)", - description: "Beautiful gold pendant with enamel work depicting flowing botanical motifs.", - price: 2200, - condition: "Very Good", - origin: "France", - image: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "jewelry" - }, - { - id: 13, - name: "Georgian Garnet Bracelet", - era: "Georgian Period (1820s)", - description: "Rare Georgian bracelet featuring Bohemian garnets in original gold setting.", - price: 1800, - condition: "Good", - origin: "England", - image: "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?w=400&h=300&fit=crop", - inStock: true, - isRare: true, - category: "jewelry" - }, - { - id: 14, - name: "Retro Cocktail Earrings", - era: "Retro Period (1940s)", - description: "Bold gold and citrine earrings typical of the glamorous 1940s cocktail style.", - price: 950, - condition: "Excellent", - origin: "USA", - image: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=400&h=300&fit=crop", - inStock: false, - isRare: false, - category: "jewelry" - } - ] - }; - } +const Jewelry = memo(({ onAddToCart }) => { + const [jewelryProducts] = useState([ + { + id: 2, + name: "Art Deco Pearl Necklace", + era: "Art Deco (1920s)", + description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.", + price: 1650, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "jewelry" + }, + { + id: 6, + name: "Victorian Cameo Brooch", + era: "Victorian Era (1870s)", + description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.", + price: 450, + condition: "Excellent", + origin: "Italy", + image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop", + inStock: true, + isRare: false, + category: "jewelry" + }, + { + id: 11, + name: "Edwardian Diamond Ring", + era: "Edwardian Era (1910s)", + description: "Exquisite platinum ring featuring a 2-carat old European cut diamond with milgrain detailing.", + price: 8900, + condition: "Excellent", + origin: "England", + image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "jewelry" + }, + { + id: 12, + name: "Art Nouveau Pendant", + era: "Art Nouveau (1900s)", + description: "Beautiful gold pendant with enamel work depicting flowing botanical motifs.", + price: 2200, + condition: "Very Good", + origin: "France", + image: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "jewelry" + }, + { + id: 13, + name: "Georgian Garnet Bracelet", + era: "Georgian Period (1820s)", + description: "Rare Georgian bracelet featuring Bohemian garnets in original gold setting.", + price: 1800, + condition: "Good", + origin: "England", + image: "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?w=400&h=300&fit=crop", + inStock: true, + isRare: true, + category: "jewelry" + }, + { + id: 14, + name: "Retro Cocktail Earrings", + era: "Retro Period (1940s)", + description: "Bold gold and citrine earrings typical of the glamorous 1940s cocktail style.", + price: 950, + condition: "Excellent", + origin: "USA", + image: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=400&h=300&fit=crop", + inStock: false, + isRare: false, + category: "jewelry" + } + ]); - render() { - const { onAddToCart } = this.props; + return ( +
+
+
+

Vintage Jewelry Collection

+

Exquisite pieces that capture the essence of bygone eras

+

+ Our jewelry collection features carefully selected pieces from the most celebrated + periods in jewelry history. From delicate Victorian brooches to bold Art Deco + necklaces, each piece represents the pinnacle of craftsmanship from its era. +

+
+
- return ( -
-
-
-

Vintage Jewelry Collection

-

Exquisite pieces that capture the essence of bygone eras

-

- Our jewelry collection features carefully selected pieces from the most celebrated - periods in jewelry history. From delicate Victorian brooches to bold Art Deco - necklaces, each piece represents the pinnacle of craftsmanship from its era. -

-
-
- -
-
-

Jewelry Through the Ages

-
-
-

Victorian (1837-1901)

-

Romantic designs with intricate details, often featuring cameos and mourning jewelry

-
-
-

Art Nouveau (1890-1910)

-

Nature-inspired motifs with flowing lines and innovative use of materials

-
-
-

Art Deco (1920-1935)

-

Geometric patterns and bold designs reflecting the modern age

-
-
-

Retro (1935-1950)

-

Large, glamorous pieces with colorful gemstones and gold settings

-
+
+
+

Jewelry Through the Ages

+
+
+

Victorian (1837-1901)

+

Romantic designs with intricate details, often featuring cameos and mourning jewelry

+
+
+

Art Nouveau (1890-1910)

+

Nature-inspired motifs with flowing lines and innovative use of materials

+
+
+

Art Deco (1920-1935)

+

Geometric patterns and bold designs reflecting the modern age

+
+
+

Retro (1935-1950)

+

Large, glamorous pieces with colorful gemstones and gold settings

-
+
+
-
-
-

Available Jewelry

-
- {this.state.jewelryProducts.map(product => ( - - ))} -
+
+
+

Available Jewelry

+
+ {jewelryProducts.map(product => ( + + ))}
-
+
+
-
-
-

Authentication & Certification

-
-
-

๐Ÿ’Ž Gemstone Analysis

-

All gemstones are professionally evaluated and certified by recognized gemological institutes.

-
-
-

๐Ÿ” Hallmark Verification

-

Metal purity marks and maker's stamps are verified for authenticity and dating.

-
-
-

๐Ÿ“œ Provenance Documentation

-

Complete history and documentation provided with each significant piece.

-
-
-

๐Ÿ›ก๏ธ Insurance Appraisal

-

Professional appraisals available for insurance and estate planning purposes.

-
+
+
+

Authentication & Certification

+
+
+

๐Ÿ’Ž Gemstone Analysis

+

All gemstones are professionally evaluated and certified by recognized gemological institutes.

+
+
+

๐Ÿ” Hallmark Verification

+

Metal purity marks and maker's stamps are verified for authenticity and dating.

+
+
+

๐Ÿ“œ Provenance Documentation

+

Complete history and documentation provided with each significant piece.

+
+
+

๐Ÿ›ก๏ธ Insurance Appraisal

+

Professional appraisals available for insurance and estate planning purposes.

-
+
+
-
-
-

Caring for Vintage Jewelry

-
-
-

๐Ÿงผ Gentle Cleaning

-

Use appropriate cleaning methods for different metals and gemstones.

-
-
-

๐Ÿ  Proper Storage

-

Store pieces separately in soft pouches to prevent scratching.

-
-
-

๐Ÿ”ง Professional Maintenance

-

Regular check-ups ensure settings remain secure and pieces stay beautiful.

-
-
-

๐Ÿ“‹ Documentation

-

Keep all certificates and appraisals with your jewelry collection.

-
+
+
+

Caring for Vintage Jewelry

+
+
+

๐Ÿงผ Gentle Cleaning

+

Use appropriate cleaning methods for different metals and gemstones.

+
+
+

๐Ÿ  Proper Storage

+

Store pieces separately in soft pouches to prevent scratching.

+
+
+

๐Ÿ”ง Professional Maintenance

+

Regular check-ups ensure settings remain secure and pieces stay beautiful.

+
+
+

๐Ÿ“‹ Documentation

+

Keep all certificates and appraisals with your jewelry collection.

-
-
- ); - } -} +
+
+
+ ); +}); export default Jewelry; From 44d61f513cf3cb1b880bd8f9e38a4c5a9ce8c1ad Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 29 Aug 2025 10:59:36 +0000 Subject: [PATCH 2/2] Add useEffect image preloading functionality - Create reusable useImagePreloader hook and utility functions - Implement image preloading in Home, About, and all category pages - Preload product images, hero images, and team member photos - Use useMemo to optimize image URL extraction - Improve page performance by preloading images in background Co-Authored-By: Rohan Ramani --- src/components/ProductList.js | 7 +++++++ src/pages/About.js | 11 ++++++++++- src/pages/ArtDecor.js | 9 ++++++++- src/pages/Collectibles.js | 9 ++++++++- src/pages/Furniture.js | 9 ++++++++- src/pages/Home.js | 11 ++++++++++- src/pages/Jewelry.js | 9 ++++++++- src/utils/imagePreloader.js | 23 +++++++++++++++++++++++ 8 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 src/utils/imagePreloader.js diff --git a/src/components/ProductList.js b/src/components/ProductList.js index cc4a1dd..72498c3 100644 --- a/src/components/ProductList.js +++ b/src/components/ProductList.js @@ -1,5 +1,6 @@ import React, { useState, useCallback, useMemo, memo } from 'react'; import ProductCard from './ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const ProductList = memo(({ onAddToCart, searchTerm }) => { const [sortBy, setSortBy] = useState('name'); @@ -132,6 +133,12 @@ const ProductList = memo(({ onAddToCart, searchTerm }) => { return filtered; }, [products, searchTerm, filterBy, sortBy]); + const imageUrls = useMemo(() => { + return extractImageUrls(products); + }, [products]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/About.js b/src/pages/About.js index 6caa1ce..d9db43e 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -1,4 +1,5 @@ -import React, { useState, memo } from 'react'; +import React, { useState, memo, useMemo } from 'react'; +import { useImagePreloader } from '../utils/imagePreloader'; const About = memo(() => { const [teamMembers] = useState([ @@ -22,6 +23,14 @@ const About = memo(() => { } ]); + const imageUrls = useMemo(() => { + const memberImages = teamMembers.map(member => member.image); + const storyImage = "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop"; + return [...memberImages, storyImage]; + }, [teamMembers]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/ArtDecor.js b/src/pages/ArtDecor.js index 6277edd..baeb6a0 100644 --- a/src/pages/ArtDecor.js +++ b/src/pages/ArtDecor.js @@ -1,5 +1,6 @@ -import React, { useState, memo } from 'react'; +import React, { useState, memo, useMemo } from 'react'; import ProductCard from '../components/ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const ArtDecor = memo(({ onAddToCart }) => { const [artProducts] = useState([ @@ -83,6 +84,12 @@ const ArtDecor = memo(({ onAddToCart }) => { } ]); + const imageUrls = useMemo(() => { + return extractImageUrls(artProducts); + }, [artProducts]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/Collectibles.js b/src/pages/Collectibles.js index eaf4e28..ccf10ad 100644 --- a/src/pages/Collectibles.js +++ b/src/pages/Collectibles.js @@ -1,5 +1,6 @@ -import React, { useState, memo } from 'react'; +import React, { useState, memo, useMemo } from 'react'; import ProductCard from '../components/ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const Collectibles = memo(({ onAddToCart }) => { const [collectiblesProducts] = useState([ @@ -83,6 +84,12 @@ const Collectibles = memo(({ onAddToCart }) => { } ]); + const imageUrls = useMemo(() => { + return extractImageUrls(collectiblesProducts); + }, [collectiblesProducts]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/Furniture.js b/src/pages/Furniture.js index 269a32d..09e7e0e 100644 --- a/src/pages/Furniture.js +++ b/src/pages/Furniture.js @@ -1,5 +1,6 @@ -import React, { useState, memo } from 'react'; +import React, { useState, memo, useMemo } from 'react'; import ProductCard from '../components/ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const Furniture = memo(({ onAddToCart }) => { const [furnitureProducts] = useState([ @@ -84,6 +85,12 @@ const Furniture = memo(({ onAddToCart }) => { } ]); + const imageUrls = useMemo(() => { + return extractImageUrls(furnitureProducts); + }, [furnitureProducts]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/Home.js b/src/pages/Home.js index eefa540..b585eca 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,5 +1,6 @@ -import React, { useState, useCallback, memo } from 'react'; +import React, { useState, useCallback, memo, useMemo } from 'react'; import ProductCard from '../components/ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const Home = memo(({ onAddToCart, onNavigate }) => { const [featuredProducts] = useState([ @@ -53,6 +54,14 @@ const Home = memo(({ onAddToCart, onNavigate }) => { onNavigate('products'); }, [onNavigate]); + const imageUrls = useMemo(() => { + const productImages = extractImageUrls(featuredProducts); + const heroImage = "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=600&h=400&fit=crop"; + return [...productImages, heroImage]; + }, [featuredProducts]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/pages/Jewelry.js b/src/pages/Jewelry.js index 49f4774..097172a 100644 --- a/src/pages/Jewelry.js +++ b/src/pages/Jewelry.js @@ -1,5 +1,6 @@ -import React, { useState, memo } from 'react'; +import React, { useState, memo, useMemo } from 'react'; import ProductCard from '../components/ProductCard'; +import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader'; const Jewelry = memo(({ onAddToCart }) => { const [jewelryProducts] = useState([ @@ -83,6 +84,12 @@ const Jewelry = memo(({ onAddToCart }) => { } ]); + const imageUrls = useMemo(() => { + return extractImageUrls(jewelryProducts); + }, [jewelryProducts]); + + useImagePreloader(imageUrls); + return (
diff --git a/src/utils/imagePreloader.js b/src/utils/imagePreloader.js new file mode 100644 index 0000000..ca8fcbd --- /dev/null +++ b/src/utils/imagePreloader.js @@ -0,0 +1,23 @@ +import { useEffect } from 'react'; + +export const useImagePreloader = (imageUrls) => { + useEffect(() => { + if (!imageUrls || imageUrls.length === 0) return; + + const preloadImages = imageUrls.map(url => { + const img = new Image(); + img.src = url; + return img; + }); + + return () => { + preloadImages.forEach(img => { + img.src = ''; + }); + }; + }, [imageUrls]); +}; + +export const extractImageUrls = (products) => { + return products.map(product => product.image).filter(Boolean); +};