billybobdev/deepsite-project-s6gso
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>GS Furniture Store — Vintage Mexican Furniture Reupholstery</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link rel="preconnect" href="https://fonts.googleapis.com">9 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">10 <script src="https://unpkg.com/lucide@latest"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 terracotta: {17 50: '#FDF5F0',18 100: '#FAEADB',19 200: '#F2D0B0',20 300: '#E8B27B',21 400: '#D4894A',22 500: '#C25B36',23 600: '#A84B2A',24 700: '#8B3A20',25 800: '#6E2D19',26 900: '#4A1E10',27 },28 adobe: {29 50: '#FBF7F0',30 100: '#F3E8D4',31 200: '#E8D0AB',32 300: '#D4A574',33 400: '#C48B50',34 500: '#B07330',35 600: '#8F5C26',36 700: '#6E471D',37 800: '#4D3114',38 900: '#331E0D',39 },40 sage: {41 50: '#F4F7F2',42 100: '#E3EBDF',43 200: '#C8D7C0',44 300: '#A3BA96',45 400: '#7A8B6A',46 500: '#5C6E4C',47 600: '#47583B',48 700: '#35422D',49 800: '#242D1F',50 900: '#161A13',51 },52 desert: {53 50: '#FFFBEB',54 100: '#FEF3C7',55 200: '#FDE68A',56 300: '#FCD34D',57 400: '#FBBF24',58 500: '#D4A030',59 600: '#B8860B',60 700: '#92400E',61 800: '#78350F',62 900: '#451A03',63 },64 cream: '#F5EDE0',65 warmgray: {66 50: '#FAF9F7',67 100: '#F5F2ED',68 200: '#E8E2DA',69 300: '#D4CBBD',70 }71 },72 fontFamily: {73 display: ['Playfair Display', 'serif'],74 body: ['Inter', 'sans-serif'],75 }76 }77 }78 }79 </script>80 <style>81 body { font-family: 'Inter', sans-serif; }82 h1, h2, h3, .font-display { font-family: 'Playfair Display', serif; }83 84 /* Custom scrollbar */85 ::-webkit-scrollbar { width: 8px; }86 ::-webkit-scrollbar-track { background: #F5EDE0; }87 ::-webkit-scrollbar-thumb { background: #C25B36; border-radius: 4px; }88 ::-webkit-scrollbar-thumb:hover { background: #A84B2A; }89 90 /* Smooth page transitions */91 .page-enter { animation: fadeIn 0.4s ease-out; }92 @keyframes fadeIn {93 from { opacity: 0; transform: translateY(10px); }94 to { opacity: 1; transform: translateY(0); }95 }96 97 /* Modal animations */98 .modal-overlay {99 transition: opacity 0.3s ease;100 }101 .modal-content {102 transition: transform 0.3s ease, opacity 0.3s ease;103 }104 .modal-overlay.hidden { opacity: 0; pointer-events: none; }105 .modal-overlay.hidden .modal-content { transform: scale(0.95) translateY(10px); opacity: 0; }106 107 /* Hover effects on cards */108 .listing-card:hover .listing-image {109 transform: scale(1.05);110 }111 .listing-card:hover {112 box-shadow: 0 20px 40px rgba(74, 30, 16, 0.12);113 }114 115 /* Desert pattern background */116 .desert-pattern {117 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q35 15 30 25 Q25 15 30 5' fill='none' stroke='%23C25B3620' stroke-width='1'/%3E%3Cpath d='M10 35 Q15 45 10 55 Q5 45 10 35' fill='none' stroke='%23D4A57420' stroke-width='1'/%3E%3Cpath d='M50 35 Q55 45 50 55 Q45 45 50 35' fill='none' stroke='%237A8B6A20' stroke-width='1'/%3E%3C/svg%3E");118 }119 120 /* Mobile menu */121 .mobile-menu {122 transition: transform 0.3s ease, opacity 0.3s ease;123 }124 .mobile-menu.closed {125 transform: translateX(100%);126 opacity: 0;127 pointer-events: none;128 }129 130 /* Inquire button pulse */131 @keyframes subtle-pulse {132 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 91, 54, 0.3); }133 50% { box-shadow: 0 0 0 8px rgba(194, 91, 54, 0); }134 }135 .inquire-pulse:hover {136 animation: subtle-pulse 1.5s infinite;137 }138 139 /* Toast notification */140 .toast {141 animation: slideInRight 0.4s ease-out, fadeOut 0.4s ease-in 3.6s forwards;142 }143 @keyframes slideInRight {144 from { transform: translateX(100%); opacity: 0; }145 to { transform: translateX(0); opacity: 1; }146 }147 @keyframes fadeOut {148 from { opacity: 1; }149 to { opacity: 0; pointer-events: none; }150 }151 152 /* Category badge hover */153 .cat-badge:hover {154 transform: translateY(-2px);155 }156 .cat-badge {157 transition: all 0.2s ease;158 }159 160 /* Image lazy load effect */161 .img-load {162 background: linear-gradient(110deg, #F5EDE0 8%, #FAF9F7 18%, #F5EDE0 33%);163 background-size: 200% 100%;164 animation: shimmer 1.5s linear infinite;165 }166 @keyframes shimmer {167 to { background-position: -200% 0; }168 }169 </style>170</head>171<body class="bg-cream text-adobe-800 min-h-screen">172 173 <!-- Navigation -->174 <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream/80 backdrop-blur-md border-b border-warmgray-200">175 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">176 <div class="flex items-center justify-between h-16 md:h-20">177 <a href="#" onclick="navigateTo('home')" class="flex items-center gap-3 group">178 <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-terracotta-500 flex items-center justify-center shadow-md group-hover:bg-terracotta-600 transition-colors">179 <span class="text-cream font-display font-bold text-lg md:text-xl">G</span>180 </div>181 <div class="hidden sm:block">182 <h1 class="font-display text-xl md:text-2xl font-bold text-terracotta-800 leading-tight">GS Furniture</h1>183 <p class="text-xs text-terracotta-500 tracking-wider uppercase">Vintage Mexican Reupholstery</p>184 </div>185 </a>186 187 <div class="hidden md:flex items-center gap-1">188 <a href="#" onclick="navigateTo('home')" class="nav-link px-4 py-2 rounded-lg text-sm font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">Home</a>189 <a href="#" onclick="navigateTo('listings')" class="nav-link px-4 py-2 rounded-lg text-sm font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">Inventory</a>190 <a href="#" onclick="navigateTo('about')" class="nav-link px-4 py-2 rounded-lg text-sm font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">About</a>191 <a href="#" onclick="navigateTo('contact')" class="nav-link px-4 py-2 rounded-lg text-sm font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">Contact</a>192 </div>193 194 <div class="flex items-center gap-3">195 <a href="#" onclick="navigateTo('listings')" class="hidden md:inline-flex items-center gap-2 px-5 py-2.5 bg-terracotta-500 text-cream rounded-full text-sm font-medium hover:bg-terracotta-600 transition-all shadow-md hover:shadow-lg inquire-pulse">196 <i data-lucide="search" class="w-4 h-4"></i>197 Browse Inventory198 </a>199 <button onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg hover:bg-terracotta-50 transition-colors">200 <i data-lucide="menu" id="menu-icon" class="w-6 h-6 text-terracotta-700"></i>201 </button>202 </div>203 </div>204 </div>205 </nav>206 207 <!-- Mobile Menu -->208 <div id="mobile-menu" class="mobile-menu closed fixed inset-0 z-50 bg-cream md:hidden">209 <div class="p-6">210 <div class="flex items-center justify-between mb-10">211 <div class="flex items-center gap-3">212 <div class="w-10 h-10 rounded-full bg-terracotta-500 flex items-center justify-center">213 <span class="text-cream font-display font-bold text-lg">G</span>214 </div>215 <span class="font-display text-xl font-bold text-terracotta-800">GS Furniture</span>216 </div>217 <button onclick="toggleMobileMenu()" class="p-2 rounded-lg hover:bg-terracotta-50">218 <i data-lucide="x" class="w-6 h-6 text-terracotta-700"></i>219 </button>220 </div>221 <div class="flex flex-col gap-2">222 <a href="#" onclick="navigateTo('home'); toggleMobileMenu();" class="flex items-center gap-3 px-4 py-4 rounded-xl text-lg font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">223 <i data-lucide="home" class="w-5 h-5"></i> Home224 </a>225 <a href="#" onclick="navigateTo('listings'); toggleMobileMenu();" class="flex items-center gap-3 px-4 py-4 rounded-xl text-lg font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">226 <i data-lucide="sofa" class="w-5 h-5"></i> Inventory227 </a>228 <a href="#" onclick="navigateTo('about'); toggleMobileMenu();" class="flex items-center gap-3 px-4 py-4 rounded-xl text-lg font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">229 <i data-lucide="info" class="w-5 h-5"></i> About230 </a>231 <a href="#" onclick="navigateTo('contact'); toggleMobileMenu();" class="flex items-center gap-3 px-4 py-4 rounded-xl text-lg font-medium text-adobe-700 hover:bg-terracotta-50 hover:text-terracotta-600 transition-all">232 <i data-lucide="phone" class="w-5 h-5"></i> Contact233 </a>234 </div>235 </div>236 </div>237 238 <!-- Main Content Container -->239 <main id="app" class="pt-16 md:pt-20"></main>240 241 <!-- Inquiry Modal -->242 <div id="inquiry-modal" class="modal-overlay hidden fixed inset-0 z-50 flex items-center justify-center p-4">243 <div class="absolute inset-0 bg-adobe-900/50 backdrop-blur-sm" onclick="closeInquiryModal()"></div>244 <div class="modal-content relative bg-cream rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">245 <div class="bg-terracotta-500 px-6 py-5">246 <div class="flex items-center justify-between">247 <div>248 <h3 class="font-display text-xl font-semibold text-cream">Inquire About This Piece</h3>249 <p id="inquiry-item-name" class="text-terracotta-100 text-sm mt-1"></p>250 </div>251 <button onclick="closeInquiryModal()" class="p-2 rounded-lg hover:bg-terracotta-600 transition-colors">252 <i data-lucide="x" class="w-5 h-5 text-cream"></i>253 </button>254 </div>255 </div>256 <form id="inquiry-form" class="p-6 space-y-5" onsubmit="submitInquiry(event)">257 <div>258 <label class="block text-sm font-medium text-adobe-700 mb-2">Your Name</label>259 <div class="relative">260 <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-terracotta-400"></i>261 <input type="text" name="name" required placeholder="Enter your full name"262 class="w-full pl-10 pr-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">263 </div>264 </div>265 <div>266 <label class="block text-sm font-medium text-adobe-700 mb-2">Email Address</label>267 <div class="relative">268 <i data-lucide="mail" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-terracotta-400"></i>269 <input type="email" name="email" required placeholder="you@example.com"270 class="w-full pl-10 pr-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">271 </div>272 </div>273 <div>274 <label class="block text-sm font-medium text-adobe-700 mb-2">Phone Number</label>275 <div class="relative">276 <i data-lucide="phone" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-terracotta-400"></i>277 <input type="tel" name="phone" required placeholder="(555) 123-4567"278 class="w-full pl-10 pr-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">279 </div>280 </div>281 <div>282 <label class="block text-sm font-medium text-adobe-700 mb-2">Message <span class="text-adobe-400">(optional)</span></label>283 <textarea name="message" rows="3" placeholder="Any questions or special requests..."284 class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none resize-none"></textarea>285 </div>286 <button type="submit" class="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-terracotta-500 text-cream rounded-xl font-medium hover:bg-terracotta-600 transition-all shadow-lg hover:shadow-xl inquire-pulse">287 <i data-lucide="send" class="w-4 h-4"></i>288 Send Inquiry289 </button>290 <p class="text-center text-xs text-adobe-400">We typically respond within 24 hours</p>291 </form>292 </div>293 </div>294 295 <!-- Footer -->296 <footer class="bg-adobe-800 text-adobe-200">297 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">298 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">299 <div class="md:col-span-2">300 <div class="flex items-center gap-3 mb-4">301 <div class="w-10 h-10 rounded-full bg-terracotta-500 flex items-center justify-center">302 <span class="text-cream font-display font-bold text-lg">G</span>303 </div>304 <span class="font-display text-xl font-bold text-cream">GS Furniture Store</span>305 </div>306 <p class="text-adobe-300 text-sm leading-relaxed max-w-md mb-6">307 Bringing new life to vintage Mexican furniture through expert reupholstery. Each piece tells a story of craftsmanship and tradition, restored with care and passion.308 </p>309 <div class="flex gap-3">310 <a href="#" class="w-9 h-9 rounded-full bg-adobe-700 hover:bg-terracotta-500 flex items-center justify-center transition-colors">311 <i data-lucide="facebook" class="w-4 h-4"></i>312 </a>313 <a href="#" class="w-9 h-9 rounded-full bg-adobe-700 hover:bg-terracotta-500 flex items-center justify-center transition-colors">314 <i data-lucide="instagram" class="w-4 h-4"></i>315 </a>316 </div>317 </div>318 <div>319 <h4 class="font-display text-cream font-semibold mb-4">Quick Links</h4>320 <div class="flex flex-col gap-2">321 <a href="#" onclick="navigateTo('home')" class="text-sm text-adobe-300 hover:text-terracotta-400 transition-colors">Home</a>322 <a href="#" onclick="navigateTo('listings')" class="text-sm text-adobe-300 hover:text-terracotta-400 transition-colors">Inventory</a>323 <a href="#" onclick="navigateTo('about')" class="text-sm text-adobe-300 hover:text-terracotta-400 transition-colors">About Us</a>324 <a href="#" onclick="navigateTo('contact')" class="text-sm text-adobe-300 hover:text-terracotta-400 transition-colors">Contact</a>325 </div>326 </div>327 <div>328 <h4 class="font-display text-cream font-semibold mb-4">Contact Info</h4>329 <div class="flex flex-col gap-3">330 <a href="https://www.gsfurniturestore.com" target="_blank" class="flex items-center gap-2 text-sm text-adobe-300 hover:text-terracotta-400 transition-colors">331 <i data-lucide="globe" class="w-4 h-4"></i> gsfurniturestore.com332 </a>333 <div class="flex items-center gap-2 text-sm text-adobe-300">334 <i data-lucide="mail" class="w-4 h-4"></i> info@gsfurniturestore.com335 </div>336 </div>337 </div>338 </div>339 <div class="mt-10 pt-8 border-t border-adobe-700 text-center">340 <p class="text-xs text-adobe-400">© 2024 GS Furniture Store. All rights reserved. Crafted with ❤️ for vintage Mexican furniture.</p>341 </div>342 </div>343 </footer>344 345 <!-- Toast Container -->346 <div id="toast-container" class="fixed top-24 right-4 z-50 flex flex-col gap-2"></div>347 348 <script src="https://unpkg.com/lucide@latest"></script>349 <script>350 // ========================351 // DATA — Furniture Listings352 // ========================353 const listings = [354 {355 id: 1,356 name: "Vintage Equipale Chair",357 category: "Seating",358 description: "Authentic Mexican equipale chair meticulously reupholstered with premium tooled leather. The pigskin frame has been hand-tied with traditional rawhide lacing, preserving centuries-old craftsmanship techniques from Jalisco.",359 longDescription: "This stunning equipale chair has been completely restored using traditional techniques passed down through generations of Mexican artisans. The frame is crafted from seasoned pigskin, which provides remarkable durability and comfort that actually improves with age. Each piece of leather has been carefully tooled with traditional patterns, and the rawhide lacing that holds the piece together is hand-tied using methods unchanged for over 300 years. The chair has been treated with natural oils to preserve the leather and enhance its rich, warm patina.",360 image: "http://static.photos/vintage/640x360/101",361 images: ["http://static.photos/vintage/640x360/101", "http://static.photos/brown/640x360/102", "http://static.photos/craft/640x360/103"],362 status: "Available",363 origin: "Jalisco, Mexico",364 era: "Mid-Century"365 },366 {367 id: 2,368 name: "Mesquite Wood Dining Table",369 category: "Tables",370 description: "Solid mesquite wood dining table with hand-carved legs featuring traditional Mexican botanical motifs. The natural grain patterns make each piece completely unique. Seats 6-8 people comfortably.",371 longDescription: "Crafted from a single, carefully selected mesquite log, this dining table showcases the extraordinary beauty of Mexican hardwood. Mesquite is one of the most durable woods available, with a density that exceeds even oak. The hand-carved legs feature traditional botanical patterns inspired by the gardens of colonial haciendas. The natural grain of the wood tells the story of decades of slow growth in the arid landscapes of northern Mexico. The surface has been hand-sanded to a silk-like finish and sealed with a natural beeswax and carnauba blend.",372 image: "http://static.photos/nature/640x360/201",373 images: ["http://static.photos/nature/640x360/201", "http://static.photos/wood/640x360/202", "http://static.photos/vintage/640x360/203"],374 status: "Available",375 origin: "Chihuahua, Mexico",376 era: "1960s"377 },378 {379 id: 3,380 name: "Talavera Tile Side Table",381 category: "Tables",382 description: "Handcrafted side table featuring authentic Puebla Talavera tile top with traditional cobalt and white patterns. Wrought iron base with hand-forged scrollwork detail.",383 longDescription: "This exquisite side table combines two of Mexico's most celebrated art forms: Talavera ceramics and wrought ironwork. The tile top features genuine Puebla-certified Talavera, crafted using techniques that date back to the 16th century Spanish colonial period. Each tile is individually hand-painted using mineral-based pigments that are kiln-fired for lasting beauty. The wrought iron base has been hand-forged by a master herrero, featuring traditional scrollwork that echoes the ironwork found in colonial churches and haciendas throughout Mexico.",384 image: "http://static.photos/craft/640x360/301",385 images: ["http://static.photos/craft/640x360/301", "http://static.photos/blue/640x360/302", "http://static.photos/vintage/640x360/303"],386 status: "Available",387 origin: "Puebla, Mexico",388 era: "Contemporary"389 },390 {391 id: 4,392 name: "Rustic Pine Cabinet",393 category: "Storage",394 description: "Solid Mexican pewter and reclaimed pine cabinet with hand-forged iron hardware. Features adjustable interior shelves and hand-carved door panels with traditional floral motifs.",395 longDescription: "This rustic cabinet embodies the spirit of Mexican hacienda furniture. Constructed from reclaimed pine — some boards over 100 years old — it carries the warm, rich patina that only time can create. The pewter accents and hand-forged iron hardware are crafted by local artisans using traditional methods. Each door panel has been individually carved with floral motifs inspired by the gardens of San Miguel de Allende. The cabinet features adjustable shelves and a cleverly designed interior that combines modern functionality with old-world charm.",396 image: "http://static.photos/vintage/640x360/401",397 images: ["http://static.photos/vintage/640x360/401", "http://static.photos/wood/640x360/402", "http://static.photos/indoor/640x360/403"],398 status: "Available",399 origin: "Michoacán, Mexico",400 era: "1950s"401 },402 {403 id: 5,404 name: "Reupholstered Spanish Settee",405 category: "Seating",406 description: "Elegant colonial-style settee fully reupholstered in premium Mexican textile with traditional serape-inspired woven accent pillows. Solid mahogany frame with hand-carved crest rail.",407 longDescription: "This magnificent Spanish colonial settee has been given new life with our expert reupholstery service. The frame, dating to the mid-20th century, is crafted from solid Mexican mahogany with a beautifully carved crest rail featuring acanthus leaf motifs. We've reupholstered it using premium-grade, ethically sourced Mexican textiles that honor the original aesthetic while providing modern comfort. The accent pillows feature genuine serape-inspired weavings from the looms of Teotitlán del Valle, known worldwide for their exceptional textile artistry.",408 image: "http://static.photos/red/640x360/501",409 images: ["http://static.photos/red/640x360/501", "http://static.photos/vintage/640x360/502", "http://static.photos/craft/640x360/503"],410 status: "Available",411 origin: "Oaxaca, Mexico",412 era: "1940s"413 },414 {415 id: 6,416 name: "Hand-Carved Cantera Sink",417 category: "Décor",418 description: "Artisan-carved cantera stone vessel sink. Each piece is individually sculpted from natural volcanic stone, making every sink a unique work of functional art. Available in rosa, beige, and gray tones.",419 longDescription: "Cantera stone is formed from volcanic ash and has been used in Mexican architecture for centuries — from the facades of colonial churches to the fountains of grand haciendas. This vessel sink has been hand-carved by a master cantero using traditional chisels and hammers, a process that takes over 40 hours. The natural porosity of cantera gives it a warm, tactile quality unlike any manufactured material. No two sinks are ever identical; the stone's natural color variations and the artisan's hand ensure each piece is truly one-of-a-kind.",420 image: "http://static.photos/minimal/640x360/601",421 images: ["http://static.photos/minimal/640x360/601", "http://static.photos/beige/640x360/602", "http://static.photos/craft/640x360/603"],422 status: "Available",423 origin: "Guanajuato, Mexico",424 era: "Contemporary"425 },426 {427 id: 7,428 name: "Equipale Loveseat",429 category: "Seating",430 description: "Traditional Mexican equipale loveseat reupholstered with premium tanned leather. The pigskin frame is hand-tied with rawhide. Exceptionally comfortable with a naturally cooling leather seat.",431 longDescription: "This loveseat represents the finest of Mexican equipale furniture tradition. Each piece begins with a skeleton of seasoned wood, over which pigskin is stretched and shaped. The entire structure is held together by rawhide lacing — no nails, no screws, just the ancient binding technique that has been used for centuries. We've reupholstered the seating surfaces with premium vegetable-tanned leather that will develop a stunning patina over time. The equipale style is not only beautiful but remarkably comfortable, as the natural materials allow air circulation and adapt to your body.",432 image: "http://static.photos/brown/640x360/701",433 images: ["http://static.photos/brown/640x360/701", "http://static.photos/vintage/640x360/702", "http://static.photos/craft/640x360/703"],434 status: "Available",435 origin: "Jalisco, Mexico",436 era: "1970s"437 },438 {439 id: 8,440 name: "Colonial Barro Planter",441 category: "Décor",442 description: "Large hand-thrown terracotta planter with traditional colonial-era drainage pattern. Made from Mexican barro clay and kiln-fired using ancestral techniques. Perfect for indoor or covered outdoor use.",443 longDescription: "This planter is crafted using barro clay that has been sourced from the same deposits used by indigenous artisans for millennia. The clay is hand-worked on a traditional potter's wheel, then decorated with impressed patterns inspired by colonial-era designs. The planter is kiln-fired in a wood-burning horno, giving it a distinctive warm coloration that varies slightly with each piece. Features traditional drainage holes and a reinforced rim for durability. Each planter bears the subtle marks of its maker's hands — a testament to true handcraft.",444 image: "http://static.photos/terracotta/640x360/801",445 images: ["http://static.photos/terracotta/640x360/801", "http://static.photos/craft/640x360/802", "http://static.photos/nature/640x360/803"],446 status: "Available",447 origin: "Tonalá, Mexico",448 era: "Contemporary"449 },450 {451 id: 9,452 name: "Reupholstered Zócalo Bench",453 category: "Seating",454 description: "Hand-painted zócalo-style bench with fresh upholstery in durable Mexican canvas. Hand-painted floral designs on solid pine frame. Ideal for entryways, dining, or garden settings.",455 longDescription: "The zócalo bench draws its inspiration from the vibrant public squares of Mexican towns and cities. The solid pine frame has been hand-painted by artisans from Guerrero, using techniques passed through their families for generations. The colorful floral designs are painted freehand, making each bench a unique expression of the artist's creativity. We've reupholstered the seat with heavy-duty Mexican canvas that can withstand daily use while maintaining its natural, honest character. This bench brings the warmth and color of a Mexican zócalo right into your home.",456 image: "http://static.photos/vintage/640x360/901",457 images: ["http://static.photos/vintage/640x360/901", "http://static.photos/green/640x360/902", "http://static.photos/craft/640x360/903"],458 status: "Available",459 origin: "Guerrero, Mexico",460 era: "Mid-Century"461 },462 {463 id: 10,464 name: "Wrought Iron Mirror",465 category: "Décor",466 description: "Oversized wall mirror with hand-forged wrought iron frame featuring traditional Mexican scrollwork and leaf motifs. Each scroll is individually shaped by a master herrero over open flame.",467 longDescription: "This magnificent mirror is a collaboration between our in-house design team and a master herrero from San Miguel de Allende. The wrought iron frame features hand-forged scrolls and leaf motifs that echo the ironwork found in Mexico's colonial cathedrals and grand haciendas. Each element is heated in a forge and shaped by hand — no two mirrors are exactly alike. The mirror itself is hand-silvered using traditional techniques, giving it a slightly softer, warmer reflection than modern manufactured mirrors.",468 image: "http://static.photos/black/640x360/1001",469 images: ["http://static.photos/black/640x360/1001", "http://static.photos/vintage/640x360/1002", "http://static.photos/craft/640x360/1003"],470 status: "Available",471 origin: "San Miguel de Allende, Mexico",472 era: "Contemporary"473 },474 {475 id: 11,476 name: "Huapala Armoire",477 category: "Storage",478 description: "Solid pine armoire with hand-carved doors depicting traditional harvest scenes. Interior features cedar lining and adjustable shelving. Original hardware with period-appropriate replacements where needed.",479 longDescription: "This remarkable armoire showcases the finest of Mexican rural furniture tradition. The hand-carved doors depict harvest scenes — corn, squash, and beans — central to Mexican culture for thousands of years. The carving is deep and expressive, the work of a skilled artisan who learned from their abuelo. We've carefully restored the interior with aromatic cedar lining to protect your textiles and added adjustable shelving for modern functionality. Original iron hardware has been cleaned and preserved; where pieces were missing, we commissioned period-appropriate replacements from the same workshop.",480 image: "http://static.photos/wood/640x360/1101",481 images: ["http://static.photos/wood/640x360/1101", "http://static.photos/vintage/640x360/1102", "http://static.photos/indoor/640x360/1103"],482 status: "Available",483 origin: "Puebla, Mexico",484 era: "1940s"485 },486 {487 id: 12,488 name: "Saltillo Tile Coffee Table",489 category: "Tables",490 description: "Authentic Saltillo tile-top coffee table on a hand-wrought iron base. Each tile is handmade and varies slightly in color, creating a beautifully organic surface. Sealed for durability.",491 longDescription: "Saltillo tiles are among Mexico's most iconic artisan products, made by hand in Coahuila using techniques that date back to the Spanish colonial period. This coffee table features a curated selection of tiles with warm terracotta and sienna tones, arranged to create a visually harmonious surface. The wrought iron base is hand-forged with simple, elegant lines that let the beauty of the tiles take center stage. We've sealed the entire surface with a premium penetrating sealer that protects against stains while preserving the natural texture and color variation of the handmade tiles.",492 image: "http://static.photos/terracotta/640x360/1201",493 images: ["http://static.photos/terracotta/640x360/1201", "http://static.photos/vintage/640x360/1202", "http://static.photos/red/640x360/1203"],494 status: "Available",495 origin: "Coahuila, Mexico",496 era: "1960s"497 }498 ];499 500 const categories = ["All", "Seating", "Tables", "Storage", "Décor"];501 502 // ========================503 // STATE504 // ========================505 let currentPage = 'home';506 let currentCategory = 'All';507 let currentSearch = '';508 let currentListingId = null;509 510 // ========================511 // NAVIGATION512 // ========================513 function navigateTo(page, data) {514 currentPage = page;515 if (data) {516 if (data.category) currentCategory = data.category;517 if (data.id) currentListingId = data.id;518 }519 renderPage();520 window.scrollTo({ top: 0, behavior: 'smooth' });521 lucide.createIcons();522 }523 524 // ========================525 // RENDER PAGES526 // ========================527 function renderPage() {528 const app = document.getElementById('app');529 switch(currentPage) {530 case 'home': app.innerHTML = renderHome(); break;531 case 'listings': app.innerHTML = renderListings(); break;532 case 'detail': app.innerHTML = renderDetail(); break;533 case 'about': app.innerHTML = renderAbout(); break;534 case 'contact': app.innerHTML = renderContact(); break;535 default: app.innerHTML = renderHome();536 }537 }538 539 // HOME PAGE540 function renderHome() {541 const featured = listings.slice(0, 3);542 return `543 <div class="page-enter">544 <!-- Hero -->545 <section class="relative min-h-[85vh] flex items-center overflow-hidden">546 <div class="absolute inset-0">547 <img src="http://static.photos/vintage/1200x630/10" alt="Vintage Mexican furniture" class="w-full h-full object-cover">548 <div class="absolute inset-0 bg-gradient-to-r from-adobe-900/80 via-adobe-900/50 to-transparent"></div>549 <div class="absolute inset-0 bg-gradient-to-t from-adobe-900/40 to-transparent"></div>550 </div>551 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">552 <div class="max-w-2xl">553 <span class="inline-flex items-center gap-2 px-4 py-1.5 bg-terracotta-500/90 text-cream rounded-full text-xs font-medium tracking-wider uppercase mb-6">554 <i data-lucide="sparkles" class="w-3 h-3"></i> Reupholstered with Love555 </span>556 <h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-cream leading-tight mb-6">557 Vintage Mexican Furniture, <span class="text-terracotta-300">Beautifully Restored</span>558 </h1>559 <p class="text-lg md:text-xl text-adobe-200 leading-relaxed mb-8 max-w-lg">560 Each piece in our collection is hand-selected and expertly reupholstered, celebrating the timeless craftsmanship of Mexican artisans.561 </p>562 <div class="flex flex-col sm:flex-row gap-3">563 <a href="#" onclick="navigateTo('listings')" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-terracotta-500 text-cream rounded-xl font-medium text-lg hover:bg-terracotta-600 transition-all shadow-lg hover:shadow-xl">564 <i data-lucide="grid-3x3" class="w-5 h-5"></i>565 View Our Inventory566 </a>567 <a href="#" onclick="navigateTo('about')" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-cream/10 text-cream backdrop-blur-sm rounded-xl font-medium text-lg hover:bg-cream/20 transition-all border border-cream/20">568 <i data-lucide="info" class="w-5 h-5"></i>569 Our Story570 </a>571 </div>572 </div>573 </div>574 <!-- Decorative desert elements -->575 <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-cream to-transparent"></div>576 </section>577 578 <!-- Stats -->579 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-12 relative z-10 mb-16">580 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">581 ${[582 { icon: 'armchair', num: '200+', label: 'Pieces Restored' },583 { icon: 'map-pin', num: '12', label: 'Mexican States' },584 { icon: 'clock', num: '15+', label: 'Years Experience' },585 { icon: 'heart', num: '100%', label: 'Handcrafted' },586 ].map(s => `587 <div class="bg-white rounded-2xl p-6 shadow-lg border border-warmgray-100 text-center hover:shadow-xl transition-shadow">588 <div class="w-12 h-12 rounded-xl bg-terracotta-50 flex items-center justify-center mx-auto mb-3">589 <i data-lucide="${s.icon}" class="w-6 h-6 text-terracotta-500"></i>590 </div>591 <p class="font-display text-2xl md:text-3xl font-bold text-terracotta-700">${s.num}</p>592 <p class="text-sm text-adobe-500 mt-1">${s.label}</p>593 </div>594 `).join('')}595 </div>596 </section>597 598 <!-- Featured Pieces -->599 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">600 <div class="flex items-end justify-between mb-8 md:mb-12">601 <div>602 <span class="text-terracotta-500 text-sm font-medium tracking-wider uppercase">Curated Selection</span>603 <h2 class="font-display text-3xl md:text-4xl font-bold text-adobe-800 mt-2">Featured Pieces</h2>604 </div>605 <a href="#" onclick="navigateTo('listings')" class="hidden sm:inline-flex items-center gap-1 text-terracotta-500 font-medium hover:text-terracotta-600 transition-colors">606 View All <i data-lucide="arrow-right" class="w-4 h-4"></i>607 </a>608 </div>609 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">610 ${featured.map(item => renderListingCard(item)).join('')}611 </div>612 <div class="mt-8 text-center sm:hidden">613 <a href="#" onclick="navigateTo('listings')" class="inline-flex items-center gap-2 px-6 py-3 bg-terracotta-500 text-cream rounded-xl font-medium hover:bg-terracotta-600 transition-all">614 View All Inventory <i data-lucide="arrow-right" class="w-4 h-4"></i>615 </a>616 </div>617 </section>618 619 <!-- Categories -->620 <section class="bg-terracotta-800 desert-pattern py-16 md:py-24">621 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">622 <span class="text-terracotta-300 text-sm font-medium tracking-wider uppercase">Browse By Category</span>623 <h2 class="font-display text-3xl md:text-4xl font-bold text-cream mt-2 mb-10">What Are You Looking For?</h2>624 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">625 ${[626 { cat: 'Seating', icon: 'armchair', desc: 'Chairs, settees & benches' },627 { cat: 'Tables', icon: 'table', desc: 'Dining, side & coffee' },628 { cat: 'Storage', icon: 'archive', desc: 'Cabinets & armoires' },629 { cat: 'Décor', icon: 'lamp', desc: 'Mirrors, planters & more' },630 ].map(c => `631 <a href="#" onclick="navigateTo('listings', {category: '${c.cat}')" 632 class="cat-badge bg-white/10 backdrop-blur-sm rounded-2xl p-6 md:p-8 border border-white/10 hover:bg-white/20 hover:border-terracotta-400/50 group text-center">633 <div class="w-14 h-14 rounded-xl bg-terracotta-500/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-terracotta-500/50 transition-colors">634 <i data-lucide="${c.icon}" class="w-7 h-7 text-terracotta-300"></i>635 </div>636 <h3 class="font-display text-lg font-semibold text-cream mb-1">${c.cat}</h3>637 <p class="text-sm text-adobe-300">${c.desc}</p>638 </a>639 `).join('')}640 </div>641 </div>642 </section>643 644 <!-- How It Works -->645 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">646 <div class="text-center mb-10 md:mb-14">647 <span class="text-terracotta-500 text-sm font-medium tracking-wider uppercase">Simple Process</span>648 <h2 class="font-display text-3xl md:text-4xl font-bold text-adobe-800 mt-2">How to Get Your Piece</h2>649 </div>650 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">651 ${[652 { step: '01', icon: 'search', title: 'Browse Our Collection', desc: 'Explore our curated inventory of reupholstered vintage Mexican furniture. Each piece is uniquely restored and ready for a new home.' },653 { step: '02', icon: 'message-circle', title: 'Inquire About a Piece', desc: 'Found something you love? Send us an inquiry with your name, email, and phone number. We\'ll respond within 24 hours.' },654 { step: '03', icon: 'truck', title: 'Arrange Delivery', desc: 'Once we connect, we\'ll arrange delivery or pickup. We offer shipping across the Southwest and can coordinate nationwide delivery.' },655 ].map(s => `656 <div class="relative bg-white rounded-2xl p-8 shadow-md border border-warmgray-100 hover:shadow-lg transition-shadow group">657 <span class="absolute top-6 right-6 font-display text-5xl font-bold text-terracotta-100 group-hover:text-terracotta-200 transition-colors">${s.step}</span>658 <div class="w-14 h-14 rounded-xl bg-sage-100 flex items-center justify-center mb-5">659 <i data-lucide="${s.icon}" class="w-7 h-7 text-sage-600"></i>660 </div>661 <h3 class="font-display text-xl font-semibold text-adobe-800 mb-3">${s.title}</h3>662 <p class="text-adobe-500 leading-relaxed">${s.desc}</p>663 </div>664 `).join('')}665 </div>666 </section>667 668 <!-- CTA -->669 <section class="bg-gradient-to-r from-terracotta-500 to-terracotta-700 py-16 md:py-20">670 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">671 <h2 class="font-display text-3xl md:text-4xl font-bold text-cream mb-4">Ready to Find Your Perfect Piece?</h2>672 <p class="text-terracotta-100 text-lg mb-8 max-w-2xl mx-auto">Browse our full collection of expertly reupholstered vintage Mexican furniture. Each piece has been lovingly restored and is waiting for its new home.</p>673 <a href="#" onclick="navigateTo('listings')" class="inline-flex items-center gap-2 px-8 py-4 bg-cream text-terracotta-700 rounded-xl font-semibold text-lg hover:bg-white transition-all shadow-lg">674 <i data-lucide="grid-3x3" class="w-5 h-5"></i>675 Browse Full Inventory676 </a>677 </div>678 </section>679 </div>680 `;681 }682 683 // LISTINGS PAGE684 function renderListings() {685 const filtered = listings.filter(item => {686 const matchCat = currentCategory === 'All' || item.category === currentCategory;687 const matchSearch = !currentSearch || 688 item.name.toLowerCase().includes(currentSearch.toLowerCase()) || 689 item.description.toLowerCase().includes(currentSearch.toLowerCase()) ||690 item.origin.toLowerCase().includes(currentSearch.toLowerCase());691 return matchCat && matchSearch;692 });693 694 return `695 <div class="page-enter">696 <section class="bg-gradient-to-b from-terracotta-50 to-cream py-12 md:py-16">697 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">698 <div class="text-center mb-8">699 <h1 class="font-display text-3xl md:text-5xl font-bold text-adobe-800 mb-3">Our Inventory</h1>700 <p class="text-adobe-500 text-lg">Browse our curated collection of vintage Mexican furniture, expertly reupholstered</p>701 </div>702 703 <!-- Search & Filters -->704 <div class="max-w-3xl mx-auto mb-8">705 <div class="relative mb-5">706 <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-terracotta-400"></i>707 <input type="text" id="search-input" placeholder="Search by name, description, or origin..." 708 value="${currentSearch}"709 oninput="handleSearch(this.value)"710 class="w-full pl-12 pr-4 py-3.5 rounded-xl border-2 border-warmgray-200 bg-white shadow-sm focus:border-terracotta-400 focus:ring-0 outline-none text-adobe-800 placeholder-adobe-300 transition-colors">711 ${currentSearch ? `<button onclick="clearSearch()" class="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-lg hover:bg-warmgray-100"><i data-lucide="x" class="w-4 h-4 text-adobe-400"></i></button>` : ''}712 </div>713 <div class="flex flex-wrap gap-2 justify-center">714 ${categories.map(cat => `715 <button onclick="filterCategory('${cat}')" 716 class="cat-badge px-4 py-2 rounded-full text-sm font-medium transition-all ${717 currentCategory === cat 718 ? 'bg-terracotta-500 text-cream shadow-md' 719 : 'bg-white text-adobe-600 hover:bg-terracotta-50 border border-warmgray-200 hover:border-terracotta-300'720 }">721 ${cat}722 ${cat !== 'All' ? `<span class="ml-1 text-xs opacity-70">(${listings.filter(i => i.category === cat).length})</span>` : ''}723 </button>724 `).join('')}725 </div>726 </div>727 </div>728 </section>729 730 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">731 ${filtered.length === 0 ? `732 <div class="text-center py-16">733 <div class="w-20 h-20 rounded-full bg-warmgray-100 flex items-center justify-center mx-auto mb-4">734 <i data-lucide="search-x" class="w-10 h-10 text-adobe-300"></i>735 </div>736 <h3 class="font-display text-xl font-semibold text-adobe-700 mb-2">No pieces found</h3>737 <p class="text-adobe-400 mb-4">Try adjusting your search or filter criteria</p>738 <button onclick="filterCategory('All'); clearSearch();" class="px-5 py-2 bg-terracotta-500 text-cream rounded-lg font-medium hover:bg-terracotta-600 transition-colors">Clear Filters</button>739 </div>740 ` : `741 <p class="text-sm text-adobe-400 mb-6">${filtered.length} piece${filtered.length !== 1 ? 's' : ''} found</p>742 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">743 ${filtered.map(item => renderListingCard(item)).join('')}744 </div>745 `}746 </section>747 </div>748 `;749 }750 751 // DETAIL PAGE752 function renderDetail() {753 const item = listings.find(i => i.id === currentListingId);754 if (!item) return '<div class="p-20 text-center">Item not found</div>';755 756 const related = listings.filter(i => i.category === item.category && i.id !== item.id).slice(0, 3);757 758 return `759 <div class="page-enter">760 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">761 <!-- Breadcrumb -->762 <nav class="flex items-center gap-2 text-sm text-adobe-400 mb-6">763 <a href="#" onclick="navigateTo('home')" class="hover:text-terracotta-500 transition-colors">Home</a>764 <i data-lucide="chevron-right" class="w-4 h-4"></i>765 <a href="#" onclick="navigateTo('listings')" class="hover:text-terracotta-500 transition-colors">Inventory</a>766 <i data-lucide="chevron-right" class="w-4 h-4"></i>767 <a href="#" onclick="navigateTo('listings', {category: '${item.category}'})" class="hover:text-terracotta-500 transition-colors">${item.category}</a>768 <i data-lucide="chevron-right" class="w-4 h-4"></i>769 <span class="text-adobe-700 font-medium truncate">${item.name}</span>770 </nav>771 772 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">773 <!-- Images -->774 <div>775 <div class="bg-white rounded-2xl overflow-hidden shadow-lg border border-warmgray-100 mb-4">776 <img id="main-detail-image" src="${item.images[0]}" alt="${item.name}" class="w-full aspect-[4/3] object-cover">777 </div>778 <div class="grid grid-cols-3 gap-3">779 ${item.images.map((img, i) => `780 <button onclick="document.getElementById('main-detail-image').src='${img}'" 781 class="bg-white rounded-xl overflow-hidden shadow-md border-2 ${i === 0 ? 'border-terracotta-400' : 'border-transparent hover:border-terracotta-300'} transition-all">782 <img src="${img}" alt="${item.name} view ${i+1}" class="w-full aspect-[4/3] object-cover">783 </button>784 `).join('')}785 </div>786 </div>787 788 <!-- Details -->789 <div>790 <div class="flex flex-wrap items-center gap-2 mb-3">791 <span class="px-3 py-1 bg-sage-100 text-sage-700 rounded-full text-xs font-medium">${item.category}</span>792 <span class="px-3 py-1 bg-terracotta-50 text-terracotta-600 rounded-full text-xs font-medium">${item.status}</span>793 </div>794 <h1 class="font-display text-3xl md:text-4xl font-bold text-adobe-800 mb-4">${item.name}</h1>795 796 <div class="grid grid-cols-2 gap-4 mb-6">797 <div class="bg-warmgray-50 rounded-xl p-4">798 <div class="flex items-center gap-2 text-adobe-400 text-sm mb-1">799 <i data-lucide="map-pin" class="w-4 h-4"></i> Origin800 </div>801 <p class="text-adobe-700 font-medium">${item.origin}</p>802 </div>803 <div class="bg-warmgray-50 rounded-xl p-4">804 <div class="flex items-center gap-2 text-adobe-400 text-sm mb-1">805 <i data-lucide="calendar" class="w-4 h-4"></i> Era806 </div>807 <p class="text-adobe-700 font-medium">${item.era}</p>808 </div>809 </div>810 811 <div class="border-t border-b border-warmgray-200 py-5 mb-6">812 <p class="text-adobe-600 leading-relaxed">${item.longDescription}</p>813 </div>814 815 <!-- Inquire CTA -->816 <div class="bg-gradient-to-br from-terracotta-50 to-sage-50 rounded-2xl p-6 border border-terracotta-100">817 <h3 class="font-display text-lg font-semibold text-adobe-800 mb-2">Interested in this piece?</h3>818 <p class="text-adobe-500 text-sm mb-5">Get in touch with us to learn more about availability, shipping, and custom options.</p>819 <button onclick="openInquiryModal('${item.name}')" 820 class="inquire-pulse w-full flex items-center justify-center gap-2 px-6 py-4 bg-terracotta-500 text-cream rounded-xl font-semibold text-lg hover:bg-terracotta-600 transition-all shadow-lg hover:shadow-xl">821 <i data-lucide="message-circle" class="w-5 h-5"></i>822 Inquire About This Piece823 </button>824 <p class="text-center text-xs text-adobe-400 mt-3">No commitment required • Response within 24hrs</p>825 </div>826 827 <!-- Share/Save -->828 <div class="flex items-center gap-3 mt-4">829 <button onclick="shareListing('${item.name}')" class="flex items-center gap-2 px-4 py-2 rounded-lg border border-warmgray-200 hover:bg-warmgray-50 text-adobe-500 text-sm font-medium transition-colors">830 <i data-lucide="share-2" class="w-4 h-4"></i> Share831 </button>832 <button onclick="addToWishlist('${item.name}')" class="flex items-center gap-2 px-4 py-2 rounded-lg border border-warmgray-200 hover:bg-warmgray-50 text-adobe-500 text-sm font-medium transition-colors">833 <i data-lucide="heart" class="w-4 h-4"></i> Save834 </button>835 </div>836 </div>837 </div>838 839 <!-- Related -->840 ${related.length > 0 ? `841 <section class="mt-16 md:mt-24">842 <div class="flex items-center justify-between mb-8">843 <div>844 <span class="text-terracotta-500 text-sm font-medium tracking-wider uppercase">You Might Also Like</span>845 <h2 class="font-display text-2xl md:text-3xl font-bold text-adobe-800 mt-1">More ${item.category}</h2>846 </div>847 </div>848 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">849 ${related.map(i => renderListingCard(i)).join('')}850 </div>851 </section>852 ` : ''}853 </section>854 </div>855 `;856 }857 858 // ABOUT PAGE859 function renderAbout() {860 return `861 <div class="page-enter">862 <section class="relative py-16 md:py-24 bg-gradient-to-b from-terracotta-50 to-cream overflow-hidden">863 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">864 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">865 <div>866 <span class="text-terracotta-500 text-sm font-medium tracking-wider uppercase">Our Story</span>867 <h1 class="font-display text-4xl md:text-5xl font-bold text-adobe-800 mt-2 mb-6">Preserving Mexican Craftsmanship, One Piece at a Time</h1>868 <p class="text-adobe-600 text-lg leading-relaxed mb-5">GS Furniture Store was founded with a passion for the extraordinary woodworking, textile, and metalwork traditions of Mexico. For over 15 years, we have been rescuing, restoring, and reupholstering vintage Mexican furniture — giving new life to pieces that carry centuries of artistry and cultural meaning.</p>869 <p class="text-adobe-500 leading-relaxed mb-5">Based in the Southwest, we source our furniture directly from artisans, estates, and markets across Mexico — from the equipale workshops of Jalisco to the Talavera kilns of Puebla and the cantera quarries of Guanajuato.</p>870 <p class="text-adobe-500 leading-relaxed">Every piece in our inventory is carefully cleaned, repaired, and reupholstered using premium materials that honor the original craftsmanship while ensuring decades more of use and enjoyment. We believe these pieces deserve to be lived with, not just looked at.</p>871 </div>872 <div class="relative">873 <img src="http://static.photos/craft/640x360/55" alt="Our workshop" class="rounded-2xl shadow-xl w-full">874 <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-terracotta-500 rounded-2xl -z-10"></div>875 <div class="absolute -top-4 -right-4 w-32 h-32 bg-sage-400 rounded-2xl -z-10"></div>876 </div>877 </div>878 </div>879 </section>880 881 <!-- Values -->882 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">883 <div class="text-center mb-12">884 <span class="text-terracotta-500 text-sm font-medium tracking-wider uppercase">What Drives Us</span>885 <h2 class="font-display text-3xl md:text-4xl font-bold text-adobe-800 mt-2">Our Values</h2>886 </div>887 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">888 ${[889 { icon: 'hand-heart', title: 'Respectful Restoration', desc: 'We honor the original artisan\'s vision in every restoration. Our reupholstery uses materials and techniques that complement the piece\'s heritage, never masking its authentic character.' },890 { icon: 'leaf', title: 'Sustainable Practice', desc: 'Restoring vintage furniture is inherently sustainable. We rescue pieces bound for landfills and give them another lifetime of use. Our packing materials are recycled and recyclable.' },891 { icon: 'users', title: 'Artisan Partnerships', desc: 'We work directly with Mexican artisans — canteros, herreros, talaveneros, and upholsterers — ensuring fair compensation and supporting traditional craft communities across Mexico.' },892 ].map(v => `893 <div class="bg-white rounded-2xl p-8 shadow-md border border-warmgray-100 hover:shadow-lg transition-shadow">894 <div class="w-14 h-14 rounded-xl bg-terracotta-50 flex items-center justify-center mb-5">895 <i data-lucide="${v.icon}" class="w-7 h-7 text-terracotta-500"></i>896 </div>897 <h3 class="font-display text-xl font-semibold text-adobe-800 mb-3">${v.title}</h3>898 <p class="text-adobe-500 leading-relaxed">${v.desc}</p>899 </div>900 `).join('')}901 </div>902 </section>903 904 <!-- Gallery -->905 <section class="bg-adobe-800 py-16 md:py-20">906 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">907 <div class="text-center mb-10">908 <span class="text-terracotta-400 text-sm font-medium tracking-wider uppercase">Our Work</span>909 <h2 class="font-display text-3xl md:text-4xl font-bold text-cream mt-2">The Restoration Process</h2>910 </div>911 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">912 ${[1,2,3,4].map(i => `913 <img src="http://static.photos/craft/320x240/${i+40}" alt="Restoration process ${i}" class="rounded-xl w-full aspect-square object-cover shadow-md">914 `).join('')}915 </div>916 </div>917 </section>918 919 <!-- CTA -->920 <section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 text-center">921 <h2 class="font-display text-3xl md:text-4xl font-bold text-adobe-800 mb-4">Want to See Our Work in Person?</h2>922 <p class="text-adobe-500 text-lg mb-8">We'd love to show you around. Reach out to schedule a visit or start a conversation about a specific piece.</p>923 <a href="#" onclick="navigateTo('contact')" class="inline-flex items-center gap-2 px-8 py-4 bg-terracotta-500 text-cream rounded-xl font-semibold text-lg hover:bg-terracotta-600 transition-all shadow-lg hover:shadow-xl">924 <i data-lucide="phone" class="w-5 h-5"></i>925 Contact Us926 </a>927 </section>928 </div>929 `;930 }931 932 // CONTACT PAGE933 function renderContact() {934 return `935 <div class="page-enter">936 <section class="bg-gradient-to-b from-terracotta-50 to-cream py-12 md:py-16">937 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">938 <h1 class="font-display text-3xl md:text-5xl font-bold text-adobe-800 mb-4">Get in Touch</h1>939 <p class="text-adobe-500 text-lg max-w-2xl mx-auto">Have a question about a piece, need shipping information, or want to discuss a custom restoration? We'd love to hear from you.</p>940 </div>941 </section>942 943 <section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">944 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">945 ${[946 { icon: 'mail', title: 'Email', value: 'info@gsfurniturestore.com', link: 'mailto:info@gsfurniturestore.com' },947 { icon: 'globe', title: 'Website', value: 'gsfurniturestore.com', link: 'https://www.gsfurniturestore.com' },948 { icon: 'clock', title: 'Response Time', value: 'Within 24 hours', link: null },949 ].map(c => `950 <a ${c.link ? `href="${c.link}" ${c.link.startsWith('http') ? 'target="_blank"' : ''}` : ''} 951 class="bg-white rounded-2xl p-6 shadow-md border border-warmgray-100 hover:shadow-lg transition-shadow text-center group">952 <div class="w-12 h-12 rounded-xl bg-terracotta-50 flex items-center justify-center mx-auto mb-3 group-hover:bg-terracotta-100 transition-colors">953 <i data-lucide="${c.icon}" class="w-6 h-6 text-terracotta-500"></i>954 </div>955 <h3 class="font-display text-lg font-semibold text-adobe-800 mb-1">${c.title}</h3>956 <p class="text-terracotta-500 font-medium">${c.value}</p>957 </a>958 `).join('')}959 </div>960 961 <!-- Contact Form -->962 <div class="bg-white rounded-2xl shadow-lg border border-warmgray-100 overflow-hidden max-w-2xl mx-auto">963 <div class="bg-terracotta-500 px-6 py-5">964 <h2 class="font-display text-xl font-semibold text-cream">Send Us a Message</h2>965 <p class="text-terracotta-100 text-sm mt-1">We'll get back to you as soon as possible</p>966 </div>967 <form id="contact-form" class="p-6 space-y-5" onsubmit="submitContact(event)">968 <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">969 <div>970 <label class="block text-sm font-medium text-adobe-700 mb-2">Full Name</label>971 <input type="text" name="name" required placeholder="Your name"972 class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">973 </div>974 <div>975 <label class="block text-sm font-medium text-adobe-700 mb-2">Email</label>976 <input type="email" name="email" required placeholder="you@example.com"977 class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">978 </div>979 </div>980 <div>981 <label class="block text-sm font-medium text-adobe-700 mb-2">Phone</label>982 <input type="tel" name="phone" placeholder="(555) 123-4567"983 class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none">984 </div>985 <div>986 <label class="block text-sm font-medium text-adobe-700 mb-2">Subject</label>987 <select name="subject" class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 transition-colors outline-none">988 <option>General Inquiry</option>989 <option>Question About a Specific Piece</option>990 <option>Shipping & Delivery</option>991 <option>Custom Restoration</option>992 <option>Other</option>993 </select>994 </div>995 <div>996 <label class="block text-sm font-medium text-adobe-700 mb-2">Message</label>997 <textarea name="message" rows="5" required placeholder="Tell us what's on your mind..."998 class="w-full px-4 py-3 rounded-xl border-2 border-warmgray-200 focus:border-terracotta-400 focus:ring-0 bg-white text-adobe-800 placeholder-adobe-300 transition-colors outline-none resize-none"></textarea>999 </div>1000 <button type="submit" class="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-terracotta-500 text-cream rounded-xl font-medium hover:bg-terracotta-600 transition-all shadow-lg hover:shadow-xl">1001 <i data-lucide="send" class="w-4 h-4"></i>1002 Send Message1003 </button>1004 </form>1005 </div>1006 </section>1007 </div>1008 `;1009 }1010 1011 // ========================1012 // REUSABLE CARD COMPONENT1013 // ========================1014 function renderListingCard(item) {1015 return `1016 <div class="listing-card bg-white rounded-2xl shadow-md border border-warmgray-100 overflow-hidden transition-all duration-300 cursor-pointer group" onclick="navigateTo('detail', {id: ${item.id}})">1017 <div class="relative overflow-hidden">1018 <img src="${item.image}" alt="${item.name}" class="listing-image w-full aspect-[4/3] object-cover transition-transform duration-500">1019 <div class="absolute top-3 left-3">1020 <span class="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-terracotta-600 shadow-sm">${item.category}</span>1021 </div>1022 <div class="absolute top-3 right-3">1023 <button onclick="event.stopPropagation(); addToWishlist('${item.name}')" class="w-8 h-8 rounded-full bg-white/90 backdrop-blur-sm flex items-center justify-center shadow-sm hover:bg-terracotta-50 transition-colors">1024 <i data-lucide="heart" class="w-4 h-4 text-adobe-400"></i>1025 </button>1026 </div>1027 <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black/20 to-transparent"></div>1028 </div>1029 <div class="p-5">1030 <div class="flex items-center gap-2 text-xs text-adobe-400 mb-2">1031 <i data-lucide="map-pin" class="w-3 h-3"></i>1032 <span>${item.origin}</span>1033 <span class="mx-1">·</span>1034 <span>${item.era}</span>1035 </div>1036 <h3 class="font-display text-lg font-semibold text-adobe-800 mb-2 group-hover:text-terracotta-600 transition-colors">${item.name}</h3>1037 <p class="text-sm text-adobe-500 leading-relaxed line-clamp-2 mb-4">${item.description}</p>1038 <button onclick="event.stopPropagation(); openInquiryModal('${item.name}')" 1039 class="inquire-pulse w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-terracotta-500 text-cream rounded-xl text-sm font-medium hover:bg-terracotta-600 transition-all shadow-sm hover:shadow-md">1040 <i data-lucide="message-circle" class="w-4 h-4"></i>1041 Inquire1042 </button>1043 </div>1044 </div>1045 `;1046 }1047 1048 // ========================1049 // INTERACTION HANDLERS1050 // ========================1051 let mobileMenuOpen = false;1052 1053 function toggleMobileMenu() {1054 mobileMenuOpen = !mobileMenuOpen;1055 const menu = document.getElementById('mobile-menu');1056 menu.classList.toggle('closed', !mobileMenuOpen);1057 }1058 1059 function filterCategory(cat) {1060 currentCategory = cat;1061 renderPage();1062 lucide.createIcons();1063 }1064 1065 function handleSearch(value) {1066 currentSearch = value;1067 renderPage();1068 lucide.createIcons();1069 }1070 1071 function clearSearch() {1072 currentSearch = '';1073 renderPage();1074 lucide.createIcons();1075 }1076 1077 // Inquiry Modal1078 let inquiryItemName = '';1079 1080 function openInquiryModal(itemName) {1081 inquiryItemName = itemName;1082 document.getElementById('inquiry-item-name').textContent = itemName;1083 const modal = document.getElementById('inquiry-modal');1084 modal.classList.remove('hidden');1085 document.body.style.overflow = 'hidden';1086 lucide.createIcons();1087 }1088 1089 function closeInquiryModal() {1090 const modal = document.getElementById('inquiry-modal');1091 modal.classList.add('hidden');1092 document.body.style.overflow = '';1093 document.getElementById('inquiry-form').reset();1094 }1095 1096 function submitInquiry(e) {1097 e.preventDefault();1098 const form = e.target;1099 const data = new FormData(form);1100 const name = data.get('name');1101 const email = data.get('email');1102 const phone = data.get('phone');1103 const message = data.get('message');1104 1105 // In production, this would send to a backend1106 console.log('Inquiry submitted:', { item: inquiryItemName, name, email, phone, message });1107 1108 closeInquiryModal();1109 showToast(`Thank you, ${name}! Your inquiry about "${inquiryItemName}" has been sent. We'll respond within 24 hours.`, 'success');1110 }1111 1112 function submitContact(e) {1113 e.preventDefault();1114 const form = e.target;1115 const data = new FormData(form);1116 const name = data.get('name');1117 1118 console.log('Contact form submitted:', Object.fromEntries(data));1119 1120 form.reset();1121 showToast(`Thank you, ${name}! Your message has been sent. We'll respond within 24 hours.`, 'success');1122 }1123 1124 function addToWishlist(name) {1125 showToast(`"${name}" saved to your wishlist! 💛`, 'info');1126 }1127 1128 function shareListing(name) {1129 if (navigator.share) {1130 navigator.share({1131 title: name,1132 text: `Check out this ${name} at GS Furniture Store`,1133 url: window.location.href1134 });1135 } else {1136 navigator.clipboard.writeText(window.location.href);1137 showToast('Link copied to clipboard!', 'info');1138 }1139 }1140 1141 // Toast Notifications1142 function showToast(message, type = 'info') {1143 const container = document.getElementById('toast-container');1144 const toast = document.createElement('div');1145 const bgColor = type === 'success' ? 'bg-sage-600' : 'bg-terracotta-500';1146 const icon = type === 'success' ? 'check-circle' : 'info';1147 toast.className = `toast flex items-center gap-3 px-5 py-4 ${bgColor} text-cream rounded-xl shadow-xl max-w-sm`;1148 toast.innerHTML = `<i data-lucide="${icon}" class="w-5 h-5 shrink-0"></i><p class="text-sm font-medium">${message}</p>`;1149 container.appendChild(toast);1150 lucide.createIcons();1151 setTimeout(() => toast.remove(), 4000);1152 }1153 1154 // Navbar scroll effect1155 let lastScroll = 0;1156 window.addEventListener('scroll', () => {1157 const navbar = document.getElementById('navbar');1158 const currentScroll = window.scrollY;1159 if (currentScroll > 100) {1160 navbar.classList.add('shadow-md');1161 } else {1162 navbar.classList.remove('shadow-md');1163 }1164 lastScroll = currentScroll;1165 });1166 1167 // Close modal on Escape1168 document.addEventListener('keydown', (e) => {1169 if (e.key === 'Escape') {1170 closeInquiryModal();1171 }1172 });1173 1174 // Initialize1175 renderPage();1176 lucide.createIcons();1177 </script>1178<script src="https://deepsite.hf.co/deepsite-badge.js"></script>1179</body>1180</html>