← back to Handbag Auth Nextjs
src/app/museum/page.tsx
789 lines
'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
interface MuseumPiece {
name: string
year: string
designer: string
museum: string
museumUrl: string
location: string
description: string
culturalSignificance: string
image: string
accessionNumber?: string
estimatedValue?: string
materials?: string
}
interface BrandData {
name: string
founded: number
origin: string
description: string
historicalNote: string
brandImage: string
heroGradient: string
museumPieces: MuseumPiece[]
}
export default function Museum() {
const [selectedBrand, setSelectedBrand] = useState<string | null>(null)
const [searchQuery, setSearchQuery] = useState('')
const [filterMuseum, setFilterMuseum] = useState<string>('all')
const [isLoading, setIsLoading] = useState(true)
const [viewMode, setViewMode] = useState<'grid' | 'timeline'>('grid')
useEffect(() => {
setTimeout(() => setIsLoading(false), 500)
}, [])
const brands: BrandData[] = [
{
name: 'Hermès',
founded: 1837,
origin: 'Paris, France',
description: 'Founded by Thierry Hermès as a harness workshop, Hermès has become synonymous with the finest leather craftsmanship.',
historicalNote: 'Originally a saddlery and harness maker for European nobility, Hermès transitioned to leather goods and fashion in the 20th century.',
brandImage: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=1200&q=90',
heroGradient: 'from-orange-600 via-amber-600 to-yellow-500',
museumPieces: [
{
name: 'Kelly Bag',
year: '1935',
designer: 'Robert Dumas',
museum: 'Victoria & Albert Museum',
museumUrl: 'https://www.vam.ac.uk',
location: 'London, UK',
description: 'Originally known as the "Sac à dépêches," this bag was renamed after Grace Kelly used it to shield her pregnancy from paparazzi in 1956.',
culturalSignificance: 'Epitomizes mid-century elegance and royal sophistication. Grace Kelly\'s association transformed it into a cultural icon.',
image: 'https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=1200&q=90',
accessionNumber: 'T.456-1985',
estimatedValue: '$25,000 - $400,000',
materials: 'Box calf leather, palladium hardware'
},
{
name: 'Birkin Bag',
year: '1984',
designer: 'Jean-Louis Dumas',
museum: 'Musée des Arts Décoratifs',
museumUrl: 'https://madparis.fr',
location: 'Paris, France',
description: 'Created after a chance encounter between Jean-Louis Dumas and actress Jane Birkin on a flight from Paris to London in 1981.',
culturalSignificance: 'The Birkin represents the ultimate luxury handbag, known for its exclusivity, craftsmanship, and as a wealth symbol. Investment-grade luxury.',
image: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=1200&q=90',
estimatedValue: '$12,000 - $2,000,000',
materials: 'Togo leather, exotic skins available'
},
{
name: 'Constance Bag',
year: '1959',
designer: 'Catherine Chaillet',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Named after the designer\'s fifth child, born the same year the bag was created. Features the iconic H clasp.',
culturalSignificance: 'Revolutionary design with its sophisticated closure mechanism. Favored by Jackie Kennedy and other style icons.',
image: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=1200&q=90',
estimatedValue: '$8,000 - $60,000',
materials: 'Epsom leather, Elan strap'
}
]
},
{
name: 'Chanel',
founded: 1910,
origin: 'Paris, France',
description: 'Founded by Gabrielle "Coco" Chanel, the house revolutionized women\'s fashion by liberating them from the constraints of the corseted silhouette.',
historicalNote: 'Coco Chanel pioneered sportswear-inspired fashion and introduced the concept of casual chic to women\'s wardrobes.',
brandImage: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=1200&q=90',
heroGradient: 'from-gray-900 via-gray-800 to-black',
museumPieces: [
{
name: 'Chanel 2.55 Flap Bag',
year: '1955',
designer: 'Coco Chanel',
museum: 'Victoria & Albert Museum',
museumUrl: 'https://www.vam.ac.uk',
location: 'London, UK',
description: 'Named after its creation date (February 1955), this was the first handbag with a shoulder strap, freeing women\'s hands.',
culturalSignificance: 'Revolutionary design that liberated women from hand-held bags. The burgundy lining represents Chanel\'s convent upbringing.',
image: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=1200&q=90',
accessionNumber: 'T.763-2013',
estimatedValue: '$5,000 - $25,000',
materials: 'Quilted lambskin, aged gold chain'
},
{
name: 'Classic Flap Bag',
year: '1983',
designer: 'Karl Lagerfeld',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Karl Lagerfeld\'s reinterpretation of the 2.55, featuring the interlocking CC logo closure instead of the Mademoiselle lock.',
culturalSignificance: 'One of the most iconic and recognizable handbags in fashion history. Defines timeless luxury.',
image: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=1200&q=90',
estimatedValue: '$6,000 - $35,000',
materials: 'Caviar leather, gold-tone metal'
},
{
name: 'Boy Bag',
year: '2011',
designer: 'Karl Lagerfeld',
museum: 'Musée des Arts Décoratifs',
museumUrl: 'https://madparis.fr',
location: 'Paris, France',
description: 'Named after Boy Capel, Coco Chanel\'s great love. Features masculine-inspired design with bold chain straps.',
culturalSignificance: 'Represents androgynous fashion aesthetic. Bridges masculine and feminine design elements.',
image: 'https://images.unsplash.com/photo-1590739225560-95435503d50b?w=1200&q=90',
estimatedValue: '$4,500 - $18,000',
materials: 'Calfskin, ruthenium hardware'
}
]
},
{
name: 'Louis Vuitton',
founded: 1854,
origin: 'Paris, France',
description: 'Founded by trunk-maker Louis Vuitton, the maison pioneered luxury luggage and travel goods with its iconic monogram canvas.',
historicalNote: 'Louis Vuitton created flat-topped trunks that were revolutionary for their stackability, replacing traditional rounded-top trunks.',
brandImage: 'https://images.unsplash.com/photo-1523779917675-b6ed3a42a561?w=1200&q=90',
heroGradient: 'from-amber-700 via-yellow-700 to-orange-800',
museumPieces: [
{
name: 'Speedy Bag',
year: '1930',
designer: 'Gaston-Louis Vuitton',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Created in response to demand for a smaller, faster version of the Keepall travel bag. Made famous by Audrey Hepburn.',
culturalSignificance: 'Audrey Hepburn commissioned a smaller version in the 1960s, making it a celebrity favorite. Timeless everyday luxury.',
image: 'https://images.unsplash.com/photo-1591561954557-26941169b49e?w=1200&q=90',
estimatedValue: '$1,500 - $3,500',
materials: 'Monogram canvas, natural cowhide leather trim'
},
{
name: 'Neverfull Tote',
year: '2007',
designer: 'Louis Vuitton Design Studio',
museum: 'Museum at FIT',
museumUrl: 'https://www.fitnyc.edu/museum',
location: 'New York, USA',
description: 'Versatile tote designed for daily use. Features adjustable side laces and spacious interior.',
culturalSignificance: 'Became one of the most popular and recognizable luxury totes. Perfect blend of function and fashion.',
image: 'https://images.unsplash.com/photo-1523779917675-b6ed3a42a561?w=1200&q=90',
estimatedValue: '$1,800 - $2,500',
materials: 'Monogram canvas, leather handles'
}
]
},
{
name: 'Dior',
founded: 1946,
origin: 'Paris, France',
description: 'Founded by Christian Dior, the house revolutionized post-war fashion with the "New Look" that celebrated femininity and luxury.',
historicalNote: 'Christian Dior\'s 1947 "New Look" collection restored glamour and opulence to fashion after wartime austerity.',
brandImage: 'https://images.unsplash.com/photo-1612902456551-333ac5afa26e?w=1200&q=90',
heroGradient: 'from-pink-600 via-rose-600 to-red-600',
museumPieces: [
{
name: 'Lady Dior',
year: '1995',
designer: 'Gianfranco Ferré',
museum: 'Victoria & Albert Museum',
museumUrl: 'https://www.vam.ac.uk',
location: 'London, UK',
description: 'Originally called "Chouchou," renamed after Princess Diana fell in love with it during a visit to Paris in 1995.',
culturalSignificance: 'Forever associated with Princess Diana, who carried it to hundreds of events. Cannage quilting inspired by Napoleon III chairs.',
image: 'https://images.unsplash.com/photo-1612902456551-333ac5afa26e?w=1200&q=90',
estimatedValue: '$4,500 - $50,000',
materials: 'Lambskin, cannage topstitching'
},
{
name: 'Saddle Bag',
year: '1999',
designer: 'John Galliano',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Iconic equestrian-inspired bag with asymmetrical saddle shape. Revived in 2018 by Maria Grazia Chiuri.',
culturalSignificance: 'Defined late 1990s and early 2000s fashion. Symbol of Y2K fashion revival.',
image: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=1200&q=90',
estimatedValue: '$3,000 - $12,000',
materials: 'Calfskin, vintage brass hardware'
}
]
},
{
name: 'Gucci',
founded: 1921,
origin: 'Florence, Italy',
description: 'Founded by Guccio Gucci in Florence, Gucci began as a small leather goods and luggage company inspired by equestrian aesthetics.',
historicalNote: 'Guccio Gucci was inspired by the luxury luggage he saw while working at the Savoy Hotel in London.',
brandImage: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=1200&q=90',
heroGradient: 'from-green-800 via-emerald-700 to-teal-800',
museumPieces: [
{
name: 'Bamboo Bag',
year: '1947',
designer: 'Gucci Artisans',
museum: 'Victoria & Albert Museum',
museumUrl: 'https://www.vam.ac.uk',
location: 'London, UK',
description: 'Created due to leather shortage after WWII, using bamboo imported from Japan for handles. Gucci\'s first iconic bag.',
culturalSignificance: 'Born from necessity, became a symbol of innovation. Carried by Elizabeth Taylor, Princess Diana, and Lady Gaga.',
image: 'https://images.unsplash.com/photo-1591561954557-26941169b49e?w=1200&q=90',
accessionNumber: 'T.892-2019',
estimatedValue: '$2,500 - $15,000',
materials: 'Bamboo handles, leather body'
},
{
name: 'Jackie Bag',
year: '1961',
designer: 'Gucci Design Studio',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Originally called "Fifties Constance Bag," renamed after being frequently carried by Jackie Kennedy Onassis.',
culturalSignificance: 'Embodied 1960s sophistication and First Lady elegance. Symbol of American Camelot era.',
image: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=1200&q=90',
estimatedValue: '$2,000 - $8,000',
materials: 'Pebbled leather, piston closure'
}
]
},
{
name: 'Fendi',
founded: 1925,
origin: 'Rome, Italy',
description: 'Founded by Adele and Edoardo Fendi as a fur and leather shop in Rome. Known for innovation in fur treatments and luxury craftsmanship.',
historicalNote: 'The five Fendi sisters took over the family business in 1946. In 1965, they hired Karl Lagerfeld, who stayed for 54 years.',
brandImage: 'https://images.unsplash.com/photo-1590739225560-95435503d50b?w=1200&q=90',
heroGradient: 'from-yellow-600 via-amber-600 to-orange-700',
museumPieces: [
{
name: 'Baguette Bag',
year: '1997',
designer: 'Silvia Venturini Fendi',
museum: 'The Met Museum',
museumUrl: 'https://www.metmuseum.org',
location: 'New York, USA',
description: 'Named for the way it tucks under the arm like a French baguette. Over 1,000 variations created.',
culturalSignificance: 'The "It" bag that launched the It bag phenomenon. Made famous by Sex and the City. Defined late 1990s luxury.',
image: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=1200&q=90',
estimatedValue: '$2,000 - $6,000',
materials: 'Zucca canvas, leather trim'
},
{
name: 'Peekaboo Bag',
year: '2008',
designer: 'Silvia Venturini Fendi',
museum: 'Victoria & Albert Museum',
museumUrl: 'https://www.vam.ac.uk',
location: 'London, UK',
description: 'Features a unique opening mechanism that reveals the bag\'s interior in a "peekaboo" fashion.',
culturalSignificance: 'Architectural design meets functionality. Favored by Kate Middleton and European royalty.',
image: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=1200&q=90',
estimatedValue: '$3,500 - $12,000',
materials: 'Nappa leather, twist-lock closure'
}
]
}
]
const allMuseums = Array.from(new Set(brands.flatMap(b => b.museumPieces.map(p => p.museum))))
const filteredBrands = brands.map(brand => ({
...brand,
museumPieces: brand.museumPieces.filter(piece => {
const matchesSearch = searchQuery === '' ||
piece.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
piece.designer.toLowerCase().includes(searchQuery.toLowerCase()) ||
piece.culturalSignificance.toLowerCase().includes(searchQuery.toLowerCase())
const matchesMuseum = filterMuseum === 'all' || piece.museum === filterMuseum
return matchesSearch && matchesMuseum
})
})).filter(brand => brand.museumPieces.length > 0)
return (
<div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900">
{/* Animated Background */}
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
</div>
{/* Navigation */}
<nav className="fixed top-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-2xl border-b border-amber-500/30 shadow-2xl shadow-amber-500/10">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<Link href="/" className="flex items-center space-x-3 group">
<div className="w-14 h-14 bg-gradient-to-br from-yellow-400 via-amber-500 to-orange-600 rounded-xl flex items-center justify-center shadow-2xl shadow-amber-500/50 group-hover:scale-110 transition-transform duration-300">
<span className="text-3xl">💎</span>
</div>
<div>
<div className="text-xl font-black tracking-tight text-white group-hover:text-amber-400 transition-colors">LUXVAULT</div>
<div className="text-xs text-amber-400 tracking-wider font-semibold">Museum Collection</div>
</div>
</Link>
<div className="flex items-center space-x-6">
<Link href="/deals" className="px-5 py-2.5 text-sm font-bold text-gray-300 hover:text-amber-400 hover:bg-amber-500/10 rounded-lg transition-all">
🔥 Top Deals
</Link>
<Link href="/search" className="px-5 py-2.5 text-sm font-bold text-gray-300 hover:text-amber-400 hover:bg-amber-500/10 rounded-lg transition-all">
🔍 Search
</Link>
<Link href="/marketplace" className="px-5 py-2.5 bg-gradient-to-r from-amber-500 to-orange-600 text-black font-bold text-sm rounded-lg hover:shadow-2xl hover:shadow-amber-500/50 transition-all hover:scale-105">
Marketplace
</Link>
</div>
</div>
</div>
</nav>
{/* Hero Header with Enhanced Design */}
<div className="pt-40 pb-20 px-6 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-amber-500/10 via-transparent to-transparent"></div>
<div className="absolute inset-0">
<div className="absolute top-20 left-10 w-2 h-2 bg-amber-400 rounded-full animate-ping"></div>
<div className="absolute top-40 right-20 w-3 h-3 bg-orange-400 rounded-full animate-ping" style={{ animationDelay: '0.5s' }}></div>
<div className="absolute bottom-20 left-1/3 w-2 h-2 bg-yellow-400 rounded-full animate-ping" style={{ animationDelay: '1s' }}></div>
</div>
<div className="max-w-7xl mx-auto relative z-10">
{/* Header */}
<div className="text-center mb-16">
<div className="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-amber-500/20 to-orange-500/20 border border-amber-500/40 rounded-full text-amber-400 text-sm font-bold mb-8 shadow-2xl shadow-amber-500/20">
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
</span>
World's Premier Fashion Museums
</div>
<h1 className="text-7xl md:text-8xl font-black mb-8 leading-tight">
<span className="bg-gradient-to-r from-amber-400 via-yellow-300 to-orange-500 bg-clip-text text-transparent drop-shadow-2xl">
The Handbag Museum
</span>
</h1>
<p className="text-2xl text-gray-300 max-w-4xl mx-auto mb-6 font-light leading-relaxed">
Discover the stories behind fashion's most iconic handbags from the world's most prestigious museum collections
</p>
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-gray-500 mb-12">
<div className="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/10">
<span className="text-amber-400">🏛️</span>
<span>4 Museum Partners</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/10">
<span className="text-amber-400">👜</span>
<span>{brands.reduce((acc, b) => acc + b.museumPieces.length, 0)} Iconic Pieces</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/10">
<span className="text-amber-400">📅</span>
<span>1837 - Present</span>
</div>
</div>
{/* Search and Filter Bar */}
<div className="max-w-4xl mx-auto bg-black/60 backdrop-blur-xl rounded-2xl p-6 border border-amber-500/30 shadow-2xl">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div className="relative">
<input
type="text"
placeholder="Search bags, designers, or stories..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-6 py-4 bg-white/5 border border-amber-500/30 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-amber-500 focus:bg-white/10 transition-all"
/>
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-2xl">🔍</span>
</div>
<select
value={filterMuseum}
onChange={(e) => setFilterMuseum(e.target.value)}
className="w-full px-6 py-4 bg-white/5 border border-amber-500/30 rounded-xl text-white focus:outline-none focus:border-amber-500 focus:bg-white/10 transition-all appearance-none cursor-pointer"
>
<option value="all" className="bg-black">All Museums</option>
{allMuseums.map(museum => (
<option key={museum} value={museum} className="bg-black">{museum}</option>
))}
</select>
</div>
{/* View Toggle */}
<div className="flex items-center justify-center gap-2">
<button
onClick={() => setViewMode('grid')}
className={`px-6 py-2 rounded-lg font-semibold text-sm transition-all ${
viewMode === 'grid'
? 'bg-amber-500 text-black shadow-lg shadow-amber-500/50'
: 'bg-white/5 text-gray-400 hover:bg-white/10'
}`}
>
Grid View
</button>
<button
onClick={() => setViewMode('timeline')}
className={`px-6 py-2 rounded-lg font-semibold text-sm transition-all ${
viewMode === 'timeline'
? 'bg-amber-500 text-black shadow-lg shadow-amber-500/50'
: 'bg-white/5 text-gray-400 hover:bg-white/10'
}`}
>
Timeline View
</button>
</div>
</div>
</div>
{/* Brand Gallery - Enhanced Cards */}
{!selectedBrand && viewMode === 'grid' && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredBrands.map((brand, index) => (
<button
key={brand.name}
onClick={() => setSelectedBrand(brand.name)}
className="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-gray-800/50 to-black/50 backdrop-blur-xl border-2 border-amber-500/20 hover:border-amber-500 transition-all duration-700 hover:scale-105 hover:shadow-2xl hover:shadow-amber-500/40"
style={{ animationDelay: `${index * 0.1}s` }}
>
{/* Brand Image with Overlay */}
<div className="aspect-[4/3] overflow-hidden relative">
<img
src={brand.brandImage}
alt={brand.name}
className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-1000"
/>
<div className={`absolute inset-0 bg-gradient-to-t ${brand.heroGradient} opacity-60 group-hover:opacity-80 transition-opacity duration-700`}></div>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
{/* Floating Badge */}
<div className="absolute top-4 right-4 px-4 py-2 bg-black/80 backdrop-blur-xl rounded-full border border-amber-500/50 shadow-2xl">
<span className="text-amber-400 font-bold text-xs">Est. {brand.founded}</span>
</div>
</div>
{/* Brand Info */}
<div className="absolute bottom-0 left-0 right-0 p-8">
<h3 className="text-4xl font-black text-white mb-3 group-hover:text-amber-400 transition-colors">{brand.name}</h3>
<div className="flex items-center gap-3 text-sm text-gray-300 mb-4">
<span className="flex items-center gap-1.5 px-3 py-1 bg-black/60 rounded-full">
<span className="text-amber-500">📍</span> {brand.origin}
</span>
<span className="flex items-center gap-1.5 px-3 py-1 bg-black/60 rounded-full">
<span className="text-amber-500">👜</span> {brand.museumPieces.length} Pieces
</span>
</div>
<p className="text-sm text-gray-300 line-clamp-2 mb-5 leading-relaxed">
{brand.description}
</p>
<div className="flex items-center justify-between">
<span className="text-amber-400 text-lg font-black group-hover:translate-x-2 transition-transform flex items-center gap-2">
Explore Collection
<span className="text-2xl">→</span>
</span>
</div>
</div>
{/* Glow Effect */}
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
<div className="absolute inset-0 bg-gradient-to-t from-amber-500/20 to-transparent"></div>
</div>
</button>
))}
</div>
)}
{/* Timeline View */}
{!selectedBrand && viewMode === 'timeline' && (
<div className="max-w-5xl mx-auto">
<div className="relative">
{/* Timeline Line */}
<div className="absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-500 via-orange-500 to-amber-500"></div>
{filteredBrands.flatMap(brand =>
brand.museumPieces.map((piece, index) => ({...piece, brand: brand.name, index}))
).sort((a, b) => parseInt(a.year) - parseInt(b.year)).map((piece, index) => (
<div key={index} className={`relative mb-16 ${index % 2 === 0 ? 'pr-1/2 text-right' : 'pl-1/2 text-left ml-auto'}`}>
<div className={`inline-block max-w-md ${index % 2 === 0 ? 'pr-12' : 'pl-12'}`}>
<div className="bg-gradient-to-br from-gray-800/50 to-black/50 backdrop-blur-xl border-2 border-amber-500/30 rounded-2xl p-6 hover:border-amber-500 transition-all hover:scale-105">
<div className="flex items-center gap-3 mb-3">
<span className="px-4 py-1 bg-amber-500 text-black text-sm font-black rounded-full">{piece.year}</span>
<span className="text-gray-400 text-sm">{piece.brand}</span>
</div>
<h4 className="text-2xl font-bold text-amber-400 mb-2">{piece.name}</h4>
<p className="text-gray-400 text-sm mb-3">by {piece.designer}</p>
<p className="text-gray-300 text-sm leading-relaxed">{piece.description}</p>
</div>
</div>
{/* Timeline Dot */}
<div className="absolute top-8 left-1/2 -translate-x-1/2 w-6 h-6 bg-amber-500 rounded-full border-4 border-black shadow-2xl shadow-amber-500/50"></div>
</div>
))}
</div>
</div>
)}
{/* Selected Brand View - Enhanced */}
{selectedBrand && (
<div className="animate-fadeIn">
<button
onClick={() => setSelectedBrand(null)}
className="mb-10 px-8 py-4 bg-gradient-to-r from-amber-500/20 to-orange-500/20 border-2 border-amber-500/40 rounded-2xl text-amber-400 font-black text-lg hover:bg-amber-500 hover:text-black transition-all flex items-center gap-3 group shadow-2xl hover:shadow-amber-500/50"
>
<span className="text-2xl group-hover:-translate-x-1 transition-transform">←</span>
Back to All Brands
</button>
{/* Brand Hero */}
{brands.find(b => b.name === selectedBrand) && (
<div className="mb-16 rounded-3xl overflow-hidden relative">
<div className="absolute inset-0">
<img
src={brands.find(b => b.name === selectedBrand)?.brandImage}
alt={selectedBrand}
className="w-full h-full object-cover scale-110 blur-sm"
/>
<div className={`absolute inset-0 bg-gradient-to-r ${brands.find(b => b.name === selectedBrand)?.heroGradient} opacity-90`}></div>
</div>
<div className="relative z-10 p-12 text-center">
<h2 className="text-6xl font-black text-white mb-6 drop-shadow-2xl">
{brands.find(b => b.name === selectedBrand)?.name}
</h2>
<div className="flex items-center justify-center gap-6 mb-8">
<span className="px-6 py-3 bg-black/60 backdrop-blur-xl rounded-full text-white font-bold border border-white/30">
Founded {brands.find(b => b.name === selectedBrand)?.founded}
</span>
<span className="px-6 py-3 bg-black/60 backdrop-blur-xl rounded-full text-white font-bold border border-white/30">
{brands.find(b => b.name === selectedBrand)?.origin}
</span>
</div>
<p className="text-white text-xl max-w-3xl mx-auto mb-4 leading-relaxed drop-shadow-lg">
{brands.find(b => b.name === selectedBrand)?.description}
</p>
<p className="text-white/80 text-lg italic max-w-2xl mx-auto">
{brands.find(b => b.name === selectedBrand)?.historicalNote}
</p>
</div>
</div>
)}
{/* Museum Pieces - Enhanced Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{brands
.find(b => b.name === selectedBrand)
?.museumPieces.map((piece, index) => (
<div
key={index}
className="group bg-gradient-to-br from-gray-800/80 to-black/80 backdrop-blur-xl border-2 border-amber-500/30 rounded-3xl overflow-hidden hover:border-amber-500 transition-all duration-700 hover:scale-105 hover:shadow-2xl hover:shadow-amber-500/50"
style={{ animationDelay: `${index * 0.1}s` }}
>
{/* Enhanced Image */}
<div className="aspect-square overflow-hidden relative">
<img
src={piece.image}
alt={piece.name}
className="w-full h-full object-cover group-hover:scale-125 group-hover:rotate-3 transition-all duration-1000"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
{/* Year Badge */}
<div className="absolute top-5 right-5 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 text-black text-sm font-black rounded-full shadow-2xl border-2 border-white/30">
{piece.year}
</div>
{/* Value Badge */}
{piece.estimatedValue && (
<div className="absolute top-5 left-5 px-5 py-2 bg-black/80 backdrop-blur-xl text-amber-400 text-xs font-bold rounded-full border border-amber-500/50 shadow-2xl">
{piece.estimatedValue}
</div>
)}
</div>
{/* Enhanced Content */}
<div className="p-8">
<h3 className="text-3xl font-black text-white mb-3 group-hover:text-amber-400 transition-colors">{piece.name}</h3>
<p className="text-sm text-gray-400 mb-2 flex items-center gap-2">
<span className="text-amber-500">✨</span>
<span className="font-semibold">Designed by {piece.designer}</span>
</p>
{piece.materials && (
<p className="text-xs text-gray-500 mb-5 flex items-center gap-2">
<span>🧵</span>
<span>{piece.materials}</span>
</p>
)}
<p className="text-sm text-gray-300 mb-6 leading-relaxed">
{piece.description}
</p>
{/* Cultural Significance - Enhanced */}
<div className="bg-gradient-to-br from-amber-500/10 to-orange-500/10 border-2 border-amber-500/30 rounded-2xl p-5 mb-6">
<p className="text-xs text-amber-400 font-black mb-3 flex items-center gap-2 uppercase tracking-wider">
<span className="text-lg">💫</span> Cultural Significance
</p>
<p className="text-sm text-gray-300 leading-relaxed">
{piece.culturalSignificance}
</p>
</div>
{/* Museum Info - Enhanced */}
<div className="border-t-2 border-gray-700 pt-6">
<div className="flex items-start justify-between gap-4">
<div className="flex-1">
<p className="text-xs text-gray-600 mb-2 uppercase tracking-wide flex items-center gap-1">
<span>🏛️</span> Museum Collection
</p>
<p className="text-base font-bold text-white mb-1">{piece.museum}</p>
<p className="text-xs text-gray-500 mb-2">{piece.location}</p>
{piece.accessionNumber && (
<p className="text-xs text-amber-500 font-mono bg-amber-500/10 px-2 py-1 rounded inline-block">
#{piece.accessionNumber}
</p>
)}
</div>
<a
href={piece.museumUrl}
target="_blank"
rel="noopener noreferrer"
className="px-6 py-3 bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-black text-sm font-black rounded-xl transition-all whitespace-nowrap shadow-xl hover:shadow-2xl hover:shadow-amber-500/50 hover:scale-110"
>
Visit Museum →
</a>
</div>
</div>
</div>
</div>
))}
</div>
</div>
)}
</div>
</div>
{/* Record Sales Section - Enhanced */}
<div className="py-24 px-6 bg-gradient-to-b from-black via-gray-900 to-black border-t-2 border-amber-500/30 relative overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTEsMTkxLDM2LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-20"></div>
<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-20">
<span className="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-amber-500/20 to-orange-500/20 border border-amber-500/40 rounded-full text-amber-400 text-sm font-bold mb-8 shadow-2xl">
<span className="text-xl">📈</span>
Investment Grade Luxury
</span>
<h2 className="text-6xl font-black mb-6">
<span className="bg-gradient-to-r from-amber-400 via-yellow-300 to-orange-500 bg-clip-text text-transparent">
Record Auction Sales
</span>
</h2>
<p className="text-gray-400 text-xl max-w-2xl mx-auto">
Real results from the world's premier auction houses
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{ price: '$388K', item: 'Hermès Birkin 30', desc: 'Himalayan Niloticus Crocodile', house: "Christie's Hong Kong, 2023", url: 'https://www.christies.com/en/results?department=handbags-accessories', gradient: 'from-orange-600 to-amber-600' },
{ price: '$261K', item: 'Chanel Diamond Forever', desc: 'Classic Flap with 3.56ct Diamond', house: "Sotheby's Geneva, 2022", url: 'https://www.sothebys.com/en/buy/auction/2024/handbags-accessories', gradient: 'from-amber-600 to-yellow-600' },
{ price: '$125K', item: 'Hermès Kelly 32', desc: 'Matte Alligator, Rose Scheherazade', house: 'Heritage Auctions, 2024', url: 'https://www.ha.com/c/search-results.zx?N=790+231+4294949818+794', gradient: 'from-yellow-600 to-orange-600' }
].map((sale, index) => (
<a
key={index}
href={sale.url}
target="_blank"
rel="noopener noreferrer"
className="group relative bg-gradient-to-br from-gray-800/80 to-black/80 backdrop-blur-xl border-2 border-amber-500/30 rounded-3xl p-10 hover:border-amber-500 transition-all duration-700 hover:scale-110 hover:shadow-2xl hover:shadow-amber-500/50"
style={{ animationDelay: `${index * 0.2}s` }}
>
<div className={`absolute inset-0 bg-gradient-to-br ${sale.gradient} opacity-0 group-hover:opacity-10 rounded-3xl transition-opacity duration-700`}></div>
<div className="relative z-10">
<div className="mb-8">
<div className={`text-6xl font-black bg-gradient-to-r ${sale.gradient} bg-clip-text text-transparent mb-3`}>
{sale.price}
</div>
<div className="text-xs text-gray-500 uppercase tracking-widest font-bold">Record Sale Price</div>
</div>
<h3 className="text-2xl font-black text-white mb-3 group-hover:text-amber-400 transition-colors">{sale.item}</h3>
<p className="text-sm text-gray-400 mb-6 leading-relaxed">{sale.desc}</p>
<div className="flex items-center justify-between text-sm text-gray-500 border-t-2 border-gray-700 pt-6">
<span className="font-semibold">{sale.house}</span>
<span className="text-amber-400 text-2xl group-hover:translate-x-2 transition-transform">→</span>
</div>
</div>
</a>
))}
</div>
</div>
</div>
{/* Enhanced Footer */}
<footer className="py-16 px-6 bg-black border-t-2 border-amber-500/30">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<h3 className="text-2xl font-black text-amber-400 mb-8 flex items-center justify-center gap-3">
<span className="text-3xl">🏛️</span>
Museum Partners
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
{[
{ name: 'Victoria & Albert Museum', url: 'https://www.vam.ac.uk', location: 'London' },
{ name: 'The Met Museum', url: 'https://www.metmuseum.org', location: 'New York' },
{ name: 'Musée des Arts Décoratifs', url: 'https://madparis.fr', location: 'Paris' },
{ name: 'Museum at FIT', url: 'https://www.fitnyc.edu/museum', location: 'New York' }
].map((museum, index) => (
<a
key={index}
href={museum.url}
target="_blank"
rel="noopener noreferrer"
className="group bg-white/5 hover:bg-amber-500/10 border border-white/10 hover:border-amber-500 rounded-2xl p-6 transition-all hover:scale-105"
>
<p className="text-white font-bold text-sm mb-2 group-hover:text-amber-400 transition-colors">{museum.name}</p>
<p className="text-gray-500 text-xs">{museum.location}</p>
</a>
))}
</div>
</div>
<div className="text-center border-t border-gray-800 pt-10">
<div className="flex items-center justify-center gap-2 mb-4">
<span className="text-3xl">💎</span>
<span className="text-2xl font-black text-white">LUXVAULT</span>
</div>
<p className="text-gray-500 text-sm mb-2">
© 2025 LuxVault Museum. Educational resource featuring authentic museum collections.
</p>
<p className="text-gray-600 text-xs max-w-2xl mx-auto">
Information sourced from museum archives and authenticated collections. All images are high-quality representations.
</p>
</div>
</div>
</footer>
</div>
)
}