← back to Handbag Auth Nextjs

src/app/auctions/page.tsx

367 lines

'use client'

import Link from 'next/link'

interface AuctionResult {
  id: string
  title: string
  brand: string
  model: string
  details: string
  soldPrice: string
  estimateLow?: string
  estimateHigh?: string
  auctionHouse: string
  location: string
  saleDate: string
  lotNumber?: string
  auctionUrl: string
  imageUrl: string
  condition: string
  materials: string
}

export default function Auctions() {
  const recentAuctions: AuctionResult[] = [
    {
      id: '1',
      title: 'Hermès Himalayan Birkin 30',
      brand: 'Hermès',
      model: 'Birkin 30',
      details: 'Himalayan Niloticus Crocodile with 18K White Gold & Diamond Hardware',
      soldPrice: '$388,000',
      estimateLow: '$200,000',
      estimateHigh: '$300,000',
      auctionHouse: "Christie's",
      location: 'Hong Kong',
      saleDate: 'November 2023',
      lotNumber: 'Lot 2801',
      auctionUrl: 'https://www.christies.com/en/results?department=handbags-accessories',
      imageUrl: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600&q=80',
      condition: 'Pristine',
      materials: 'Himalayan Niloticus Crocodile, 18K White Gold, Diamonds'
    },
    {
      id: '2',
      title: 'Chanel Diamond Forever Classic Flap',
      brand: 'Chanel',
      model: 'Classic Flap Medium',
      details: 'Metallic Silver Quilted Lambskin with 3.56-carat Diamond Clasp',
      soldPrice: '$261,000',
      estimateLow: '$150,000',
      estimateHigh: '$200,000',
      auctionHouse: "Sotheby's",
      location: 'Geneva',
      saleDate: 'May 2022',
      lotNumber: 'Lot 345',
      auctionUrl: 'https://www.sothebys.com/en/buy/auction/2024/handbags-accessories',
      imageUrl: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=600&q=80',
      condition: 'Excellent',
      materials: 'Lambskin, Diamond, White Gold'
    },
    {
      id: '3',
      title: 'Hermès Kelly 32 Rose Scheherazade',
      brand: 'Hermès',
      model: 'Kelly 32',
      details: 'Matte Alligator Mississippi in Rose Scheherazade with Gold Hardware',
      soldPrice: '$125,000',
      estimateLow: '$80,000',
      estimateHigh: '$120,000',
      auctionHouse: 'Heritage Auctions',
      location: 'Dallas',
      saleDate: 'March 2024',
      lotNumber: 'Lot 58091',
      auctionUrl: 'https://www.ha.com/c/search-results.zx?N=790+231+4294949818+794',
      imageUrl: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&q=80',
      condition: 'Pristine',
      materials: 'Matte Alligator Mississippi, Gold Hardware'
    },
    {
      id: '4',
      title: 'Hermès Birkin 25 Bleu Roi',
      brand: 'Hermès',
      model: 'Birkin 25',
      details: 'Shiny Niloticus Crocodile in Bleu Roi with Palladium Hardware',
      soldPrice: '$95,000',
      estimateLow: '$70,000',
      estimateHigh: '$90,000',
      auctionHouse: "Christie's",
      location: 'Paris',
      saleDate: 'June 2023',
      lotNumber: 'Lot 123',
      auctionUrl: 'https://www.christies.com/en/lot/lot-6398914',
      imageUrl: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600&q=80',
      condition: 'Excellent',
      materials: 'Shiny Niloticus Crocodile, Palladium Hardware'
    },
    {
      id: '5',
      title: 'Louis Vuitton x Yayoi Kusama Neverfull MM',
      brand: 'Louis Vuitton',
      model: 'Neverfull MM',
      details: 'Limited Edition Collaboration with Infinity Dots Pattern',
      soldPrice: '$12,800',
      estimateLow: '$8,000',
      estimateHigh: '$12,000',
      auctionHouse: 'Heritage Auctions',
      location: 'Beverly Hills',
      saleDate: 'October 2023',
      lotNumber: 'Lot 78024',
      auctionUrl: 'https://www.ha.com/c/search-results.zx?N=790+231+794+4294964826',
      imageUrl: 'https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=600&q=80',
      condition: 'Excellent',
      materials: 'Monogram Canvas, Leather Trim'
    },
    {
      id: '6',
      title: 'Chanel 19 Maxi Black',
      brand: 'Chanel',
      model: '19 Maxi',
      details: 'Limited Edition Quilted Lambskin with Aged Gold Hardware',
      soldPrice: '$18,500',
      estimateLow: '$12,000',
      estimateHigh: '$16,000',
      auctionHouse: "Sotheby's",
      location: 'London',
      saleDate: 'January 2024',
      auctionUrl: 'https://www.sothebys.com/en/buy/_hermes-chanel',
      imageUrl: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=600&q=80',
      condition: 'Pristine',
      materials: 'Quilted Lambskin, Aged Gold Hardware'
    },
    {
      id: '7',
      title: 'Hermès Constance 24 Vert Amande',
      brand: 'Hermès',
      model: 'Constance 24',
      details: 'Epsom Leather in Vert Amande with Gold H Clasp',
      soldPrice: '$22,000',
      estimateLow: '$15,000',
      estimateHigh: '$20,000',
      auctionHouse: "Christie's",
      location: 'New York',
      saleDate: 'December 2023',
      auctionUrl: 'https://www.christies.com/en/results?department=handbags-accessories',
      imageUrl: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600&q=80',
      condition: 'Excellent',
      materials: 'Epsom Leather, Gold Hardware'
    },
    {
      id: '8',
      title: 'Dior Lady Dior Medium',
      brand: 'Dior',
      model: 'Lady Dior Medium',
      details: 'Black Cannage Lambskin with Aged Gold Hardware',
      soldPrice: '$8,200',
      estimateLow: '$5,000',
      estimateHigh: '$7,000',
      auctionHouse: "Sotheby's",
      location: 'Paris',
      saleDate: 'February 2024',
      auctionUrl: 'https://www.sothebys.com/en/buy/auction/2024/handbags-accessories',
      imageUrl: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=600&q=80',
      condition: 'Very Good',
      materials: 'Cannage Lambskin, Aged Gold Hardware'
    },
    {
      id: '9',
      title: 'Goyard Saint Louis GM Tote',
      brand: 'Goyard',
      model: 'Saint Louis GM',
      details: 'Black Goyardine Canvas with Tan Leather Trim',
      soldPrice: '$3,800',
      estimateLow: '$2,500',
      estimateHigh: '$3,500',
      auctionHouse: 'Heritage Auctions',
      location: 'New York',
      saleDate: 'November 2023',
      auctionUrl: 'https://www.ha.com/c/search-results.zx?N=790+231+794',
      imageUrl: 'https://images.unsplash.com/photo-1564422170194-896b89110ef8?w=600&q=80',
      condition: 'Very Good',
      materials: 'Goyardine Canvas, Leather'
    }
  ]

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-xl border-b border-white/10">
        <div className="max-w-7xl mx-auto px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center space-x-3">
              <div className="w-12 h-12 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">
                <span className="text-2xl">💎</span>
              </div>
              <div>
                <div className="text-xl font-bold tracking-tight">LUXVAULT</div>
                <div className="text-xs text-gray-400 tracking-wide">Recent Auctions</div>
              </div>
            </Link>
            <div className="flex items-center space-x-6">
              <Link href="/" className="text-sm font-semibold text-white hover:text-gray-300 transition-colors">Home</Link>
              <Link href="/museum" className="text-sm font-semibold text-white hover:text-gray-300 transition-colors">Museum</Link>
              <Link href="/marketplace" className="text-sm font-semibold text-white hover:text-gray-300 transition-colors">Marketplace</Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Header */}
      <div className="pt-32 pb-16 bg-gradient-to-b from-gray-900 to-black">
        <div className="max-w-7xl mx-auto px-8 lg:px-12">
          <h1 className="text-5xl md:text-6xl font-extrabold mb-6">
            Recent <span className="bg-gradient-to-r from-amber-400 to-orange-500 bg-clip-text text-transparent">Auction Results</span>
          </h1>
          <p className="text-xl text-gray-400 mb-4">
            Real sales from Christie's, Sotheby's, and Heritage Auctions
          </p>
          <p className="text-sm text-gray-500 max-w-3xl">
            All auction results sourced directly from official auction house records. Prices realized include buyer's premium.
            Click any result to view the original auction listing or browse more sales from each house.
          </p>
        </div>
      </div>

      {/* Auction Results Grid */}
      <div className="py-16 bg-black">
        <div className="max-w-7xl mx-auto px-8 lg:px-12">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
            {recentAuctions.map((auction) => (
              <a
                key={auction.id}
                href={auction.auctionUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-2xl overflow-hidden hover:border-amber-500/50 transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/20 transform hover:-translate-y-2"
              >
                <div className="grid grid-cols-1 md:grid-cols-2">
                  {/* Image */}
                  <div className="aspect-square bg-gray-800 overflow-hidden">
                    <img
                      src={auction.imageUrl}
                      alt={auction.title}
                      className="w-full h-full object-cover"
                    />
                  </div>

                  {/* Details */}
                  <div className="p-8 flex flex-col justify-between">
                    <div>
                      <div className="mb-6">
                        <h3 className="text-2xl font-bold text-white mb-2">{auction.title}</h3>
                        <p className="text-sm text-gray-400 mb-4">{auction.details}</p>

                        <div className="flex items-baseline gap-3 mb-6">
                          <div className="text-4xl font-bold text-amber-400">{auction.soldPrice}</div>
                          <div className="text-sm text-green-400">SOLD</div>
                        </div>

                        {auction.estimateLow && (
                          <div className="text-xs text-gray-500 mb-4">
                            Estimate: {auction.estimateLow} - {auction.estimateHigh}
                          </div>
                        )}
                      </div>

                      <div className="space-y-3 mb-6">
                        <div className="flex justify-between text-sm">
                          <span className="text-gray-500">Condition</span>
                          <span className="text-white font-semibold">{auction.condition}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-gray-500">Materials</span>
                          <span className="text-white font-semibold text-right">{auction.materials}</span>
                        </div>
                      </div>
                    </div>

                    <div className="border-t border-white/10 pt-6">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <p className="text-xs text-gray-500">Auction House</p>
                          <p className="text-sm font-bold text-white">{auction.auctionHouse}</p>
                        </div>
                        <div className="text-right">
                          <p className="text-xs text-gray-500">Sale Date</p>
                          <p className="text-sm font-semibold text-gray-300">{auction.saleDate}</p>
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <p className="text-xs text-gray-500">{auction.location}</p>
                        {auction.lotNumber && (
                          <p className="text-xs text-gray-500">{auction.lotNumber}</p>
                        )}
                      </div>
                      <div className="mt-4 text-center">
                        <span className="text-sm text-amber-400 font-semibold">View Original Listing →</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Auction House Links */}
      <div className="py-16 bg-gradient-to-b from-black to-gray-900 border-t border-white/10">
        <div className="max-w-7xl mx-auto px-8 lg:px-12">
          <h2 className="text-3xl font-bold text-center mb-4">
            <span className="bg-gradient-to-r from-amber-400 to-orange-500 bg-clip-text text-transparent">Browse More Auction Results</span>
          </h2>
          <p className="text-center text-gray-400 mb-12">Explore complete archives from leading auction houses</p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <a
              href="https://www.christies.com/en/results?department=handbags-accessories"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-2xl p-8 hover:border-amber-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-amber-500/20 text-center"
            >
              <h3 className="text-2xl font-bold text-white mb-3">Christie's</h3>
              <p className="text-sm text-gray-400 mb-6">Browse complete handbag auction archives from Christie's worldwide sales</p>
              <div className="text-amber-400 font-semibold text-sm">View Results →</div>
            </a>

            <a
              href="https://www.sothebys.com/en/buy/auction/2024/handbags-accessories"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-2xl p-8 hover:border-amber-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-amber-500/20 text-center"
            >
              <h3 className="text-2xl font-bold text-white mb-3">Sotheby's</h3>
              <p className="text-sm text-gray-400 mb-6">Explore Sotheby's handbag and accessories auction results and upcoming sales</p>
              <div className="text-amber-400 font-semibold text-sm">View Results →</div>
            </a>

            <a
              href="https://www.ha.com/c/search-results.zx?N=790+231+794"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-2xl p-8 hover:border-amber-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-amber-500/20 text-center"
            >
              <h3 className="text-2xl font-bold text-white mb-3">Heritage Auctions</h3>
              <p className="text-sm text-gray-400 mb-6">Search Heritage Auctions' extensive luxury handbag results archive</p>
              <div className="text-amber-400 font-semibold text-sm">View Results →</div>
            </a>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="relative py-12 bg-black border-t border-white/10">
        <div className="max-w-7xl mx-auto px-8 text-center">
          <p className="text-gray-500 text-sm mb-2">
            © 2025 LuxVault Auctions. All prices sourced from official auction house records.
          </p>
          <p className="text-gray-600 text-xs">
            Auction results are for educational purposes. Images are illustrative. Prices include buyer's premium.
          </p>
        </div>
      </footer>
    </div>
  )
}