| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Coastal Audiophile | Try Before You Buy | Best Prices Guaranteed</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(2,0,36,0.8) 0%, rgba(9,9,121,0.7) 35%, rgba(0,212,255,0.6) 100%); |
| } |
| .equipment-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .listening-room { |
| background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
| background-size: cover; |
| background-position: center; |
| background-attachment: fixed; |
| } |
| .overlay { |
| background-color: rgba(0, 0, 0, 0.6); |
| } |
| .wave-divider { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| .wave-divider svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 150px; |
| } |
| .wave-divider .shape-fill { |
| fill: #FFFFFF; |
| } |
| .brand-logo { |
| filter: grayscale(100%) brightness(0.5); |
| transition: all 0.3s ease; |
| } |
| .brand-logo:hover { |
| filter: none; |
| } |
| .highlight-badge { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .price-guarantee { |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <div class="bg-blue-800 text-white text-center py-2 px-4 flex items-center justify-center"> |
| <div class="mr-2 animate-pulse"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <span class="font-bold">FOR BEST PRICES CALL DIRECTLY: (310) 555-1212</span> |
| <div class="ml-2 animate-pulse"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| </div> |
|
|
| |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-headphones text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-blue-600">Coastal Audiophile</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 text-sm font-medium">Home</a> |
| <a href="#equipment" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Equipment</a> |
| <a href="#experience" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Listening Experience</a> |
| <a href="#bring-your-own" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Bring Your Own Gear</a> |
| <a href="#shipping" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Shipping Options</a> |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a> |
| </div> |
| <div class="flex items-center"> |
| <button class="md:hidden text-gray-700 hover:text-blue-600"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="relative hero-gradient h-screen flex items-center justify-center text-white"> |
| <div class="absolute inset-0 bg-black opacity-40"></div> |
| <div class="relative z-10 text-center px-4"> |
| <div class="price-guarantee inline-flex items-center px-4 py-2 rounded-full text-gray-900 font-bold mb-6 shadow-lg"> |
| <i class="fas fa-tag mr-2"></i> |
| BEST PRICE GUARANTEE - CALL DIRECT |
| </div> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Experience Before You Buy</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Try any equipment in our beachside listening room or bring your own gear to compare. Flexible shipping options for all orders.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#equipment" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Shop Equipment</a> |
| <a href="tel:+13105551212" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-full transition duration-300 flex items-center justify-center"> |
| <i class="fas fa-phone mr-2"></i> Call Now |
| </a> |
| </div> |
| </div> |
| <div class="wave-divider"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0 0,0,321.39,56.44Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-headphones text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Try Before You Buy</h3> |
| <p class="text-gray-600">Experience any equipment in our acoustically perfected listening room before making your decision.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-box-open text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Bring Your Own Gear</h3> |
| <p class="text-gray-600">Compare with your existing equipment in our neutral listening environment to make informed upgrades.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-shipping-fast text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Flexible Shipping</h3> |
| <p class="text-gray-600">Custom packaging solutions for local pickup, white-glove delivery, or standard shipping nationwide.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-bold text-center mb-12">Trusted by the World's Finest Audio Brands</h2> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Bowers_%26_Wilkins_logo.svg/1200px-Bowers_%26_Wilkins_logo.svg.png" alt="Bowers & Wilkins" class="h-12 brand-logo mx-auto"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/McIntosh_Laboratory_Logo.svg/1200px-McIntosh_Laboratory_Logo.svg.png" alt="McIntosh" class="h-12 brand-logo mx-auto"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Sennheiser_logo_black.svg/1200px-Sennheiser_logo_black.svg.png" alt="Sennheiser" class="h-12 brand-logo mx-auto"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Sony_Music_logo.svg/1200px-Sony_Music_logo.svg.png" alt="Sony" class="h-12 brand-logo mx-auto"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Focal_logo.svg/1200px-Focal_logo.svg.png" alt="Focal" class="h-12 brand-logo mx-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="equipment" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Our Exclusive Inventory</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Demo models and open-box items from the world's finest audio manufacturers at unbeatable prices. <span class="font-semibold text-blue-600">Call for our best price!</span></p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300 border-2 border-blue-100"> |
| <div class="h-64 bg-gray-200 flex items-center justify-center relative"> |
| <i class="fas fa-headphones text-6xl text-gray-400"></i> |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold highlight-badge"> |
| DEMO UNIT |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-bold">Bowers & Wilkins 800 D4</h3> |
| <p class="text-gray-600">Signature Diamond Series</p> |
| </div> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">In Stock</span> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-700">Our flagship floorstanding loudspeaker, delivering breathtaking clarity and depth that must be heard to be believed.</p> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-gray-500 line-through text-sm">$36,000</span> |
| <span class="text-2xl font-bold text-blue-600 ml-2">$28,750</span> |
| </div> |
| <a href="tel:+13105551212" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| <i class="fas fa-phone mr-1"></i> Call |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300 border-2 border-blue-100"> |
| <div class="h-64 bg-gray-200 flex items-center justify-center relative"> |
| <i class="fas fa-volume-up text-6xl text-gray-400"></i> |
| <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-xs font-bold highlight-badge"> |
| OPEN BOX |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-bold">McIntosh MC462</h3> |
| <p class="text-gray-600">Solid State Amplifier</p> |
| </div> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">In Stock</span> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-700">450 Watts per channel of pure McIntosh power with Autoformer technology for perfect speaker matching.</p> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-gray-500 line-through text-sm">$11,000</span> |
| <span class="text-2xl font-bold text-blue-600 ml-2">$8,999</span> |
| </div> |
| <a href="tel:+13105551212" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| <i class="fas fa-phone mr-1"></i> Call |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300 border-2 border-blue-100"> |
| <div class="h-64 bg-gray-200 flex items-center justify-center relative"> |
| <i class="fas fa-music text-6xl text-gray-400"></i> |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold highlight-badge"> |
| DEMO UNIT |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-bold">dCS Bartók</h3> |
| <p class="text-gray-600">Apex DAC/Headphone Amp</p> |
| </div> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">In Stock</span> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-700">Reference-class DAC with integrated headphone amplifier featuring the latest Ring DAC APEX technology.</p> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-gray-500 line-through text-sm">$18,500</span> |
| <span class="text-2xl font-bold text-blue-600 ml-2">$14,250</span> |
| </div> |
| <a href="tel:+13105551212" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| <i class="fas fa-phone mr-1"></i> Call |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="tel:+13105551212" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
| <i class="fas fa-phone mr-2"></i> Call for Full Inventory |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="bring-your-own" class="py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="mb-12 lg:mb-0"> |
| <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bring your own gear" class="rounded-xl shadow-xl w-full"> |
| </div> |
| <div> |
| <h2 class="text-3xl font-bold mb-6">Bring Your Own Gear</h2> |
| <p class="text-lg text-gray-700 mb-6">We encourage audiophiles to bring their existing equipment to compare in our neutral listening environment. This is the best way to make informed upgrade decisions.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-600 text-white"> |
| <i class="fas fa-check text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-700">Compare your current system with potential upgrades side-by-side</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-600 text-white"> |
| <i class="fas fa-check text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-700">Test component compatibility before purchasing</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-600 text-white"> |
| <i class="fas fa-check text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-700">Our acoustic experts will help optimize your system's performance</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-600 text-white"> |
| <i class="fas fa-check text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-700">No pressure sales - we want you to make the right decision</p> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <a href="#contact" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> |
| Schedule a Listening Session |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="shipping" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Flexible Shipping & Delivery Options</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">We offer multiple shipping solutions to meet your needs, whether you're local or across the country.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> |
| <div class="text-blue-600 text-4xl mb-4"> |
| <i class="fas fa-store"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Local Pickup</h3> |
| <p class="text-gray-600 mb-4">Visit our Malibu location to collect your equipment in person and save on shipping costs.</p> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Inspect equipment before taking delivery</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>No shipping fees</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Personal setup consultation available</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> |
| <div class="text-blue-600 text-4xl mb-4"> |
| <i class="fas fa-truck"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Standard Shipping</h3> |
| <p class="text-gray-600 mb-4">Nationwide delivery with our carefully designed packaging solutions for safe transit.</p> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Professional packing by our audio specialists</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Full insurance coverage</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Tracking provided</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> |
| <div class="text-blue-600 text-4xl mb-4"> |
| <i class="fas fa-people-carry"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">White Glove Delivery</h3> |
| <p class="text-gray-600 mb-4">Premium service including in-home delivery, unpacking, and basic setup.</p> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>In-home delivery and unpacking</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Basic system setup included</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Packaging removal and recycling</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="tel:+13105551212" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
| <i class="fas fa-phone mr-2"></i> Discuss Shipping Options |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="experience" class="listening-room py-20 relative"> |
| <div class="overlay absolute inset-0"></div> |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="mb-12 lg:mb-0"> |
| <h2 class="text-3xl font-bold text-white mb-6">The Ultimate Listening Experience</h2> |
| <p class="text-xl text-gray-200 mb-8">Our beachside villa listening room is acoustically perfected to showcase the full potential of high-end audio equipment. Experience your favorite music like never before.</p> |
| |
| <div class="space-y-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-wave-square"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-white">Acoustic Perfection</h3> |
| <p class="mt-2 text-gray-200">Room designed by world-renowned acousticians with custom treatments and ideal speaker placement.</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-sliders-h"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-white">Multiple Systems</h3> |
| <p class="mt-2 text-gray-200">Compare different high-end systems to find your perfect sound signature.</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-umbrella-beach"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-white">Beachside Setting</h3> |
| <p class="mt-2 text-gray-200">Relax in our luxurious Malibu villa with ocean views and curated refreshments.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> |
| <div class="p-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Private Session</h3> |
| <form> |
| <div class="mb-6"> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Preferred Date</label> |
| <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="system" class="block text-sm font-medium text-gray-700 mb-1">System Preference</label> |
| <select id="system" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| <option>Full Range Speakers</option> |
| <option>Bookshelf System</option> |
| <option>Headphone Station</option> |
| <option>Surround Sound</option> |
| <option>Bring My Own Gear</option> |
| <option>Let Us Choose</option> |
| </select> |
| </div> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Reserve Now</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="inline-flex items-center justify-center bg-white text-blue-600 px-4 py-2 rounded-full font-bold mb-6 shadow-lg"> |
| <i class="fas fa-tag mr-2"></i> |
| PRICE GUARANTEE |
| </div> |
| <h2 class="text-3xl font-bold mb-6">We Offer the Best Prices in the Industry</h2> |
| <p class="text-xl mb-8 max-w-3xl mx-auto">For our absolute best pricing, skip the emails and texts - call us directly at (310) 555-1212. Our demo and open-box models are already significantly discounted, but we can often do even better for serious buyers.</p> |
| <a href="tel:+13105551212" class="inline-flex items-center bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-full transition duration-300"> |
| <i class="fas fa-phone mr-2"></i> Call Now for Best Price |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">What Our Clients Say</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from audiophiles who've experienced the Coastal difference.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">James Wilson</h4> |
| <p class="text-gray-600">Recording Engineer</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"The listening room at Coastal Audiophile is unlike anything I've experienced. The combination of world-class equipment in an acoustically perfect space with ocean views is simply magical. I heard details in familiar recordings I never knew existed."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Sarah Chen</h4> |
| <p class="text-gray-600">Music Producer</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"I was skeptical about buying demo equipment until I discovered Coastal. Their prices on open-box McIntosh gear were unbeatable, and the equipment was in pristine condition. The personal attention and after-sale support have been exceptional."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Rodriguez"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Michael Rodriguez</h4> |
| <p class="text-gray-600">Jazz Enthusiast</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"As someone who's visited high-end audio shops worldwide, Coastal stands apart. Their unique access to manufacturer demo models means prices that are 20-30% below retail for essentially new equipment. The beachside villa experience is worth the trip alone."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="mb-12 lg:mb-0"> |
| <img src="https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our listening room" class="rounded-xl shadow-xl w-full"> |
| </div> |
| <div> |
| <h2 class="text-3xl font-bold mb-6">Our Story</h2> |
| <p class="text-lg text-gray-700 mb-6">Founded by audio engineers with decades of experience in high-end audio manufacturing, Coastal Audiophile was born from a simple idea: make world-class audio equipment accessible to true enthusiasts without compromising on quality or experience.</p> |
| <p class="text-lg text-gray-700 mb-6">Our unique relationships with manufacturers give us exclusive access to demo models, trade show equipment, and carefully inspected open-box items that we can offer at significant discounts while maintaining full warranties.</p> |
| <p class="text-lg text-gray-700 mb-8">The beachside villa listening room was designed to be the ultimate environment for evaluating equipment and enjoying music. Every acoustic detail has been considered, from room dimensions to specialized treatments, creating a neutral canvas that reveals the true character of any system.</p> |
| <a href="#contact" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> |
| Get in Touch |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Contact Us</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Have questions about our equipment or want to book a listening session? Reach out to our team.</p> |
| </div> |
| |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16"> |
| <div class="mb-12 lg:mb-0"> |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Send Us a Message</h3> |
| <form> |
| <div class="mb-6"> |
| <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="contact-subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
| <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
| <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Send Message</button> |
| </form> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-white p-8 rounded-xl shadow-md h-full"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Visit Us</h3> |
| <div class="space-y-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium">Location</h3> |
| <p class="mt-2 text-gray-700">2345 Pacific Coast Highway<br>Malibu, CA 90265</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-clock"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium">Hours</h3> |
| <p class="mt-2 text-gray-700">By appointment only<br>Tuesday - Sunday: 10am - 6pm</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium">Contact</h3> |
| <p class="mt-2 text-gray-700"> |
| <a href="tel:+13105551212" class="hover:text-blue-600">(310) 555-1212</a><br> |
| <a href="mailto:info@coastalaudiophile.com" class="hover:text-blue-600">info@coastalaudiophile.com</a> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="text-lg font-medium mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-blue-600"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-blue-600"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-blue-600"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-blue-600"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-blue-600 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="mb-8 lg:mb-0"> |
| <h3 class="text-2xl font-bold mb-2">Join Our Audiophile Community</h3> |
| <p class="text-blue-100">Get exclusive access to new inventory arrivals, special pricing, and invitations to private listening events.</p> |
| </div> |
| <div> |
| <form class="flex"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-md focus:outline-none text-gray-900"> |
| <button type="submit" class="bg-blue-800 hover:bg-blue-900 px-6 py-3 rounded-r-md font-medium transition duration-300">Subscribe</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Coastal Audiophile</h3> |
| <p class="text-gray-400">Elevating the audio experience through exceptional equipment, unbeatable prices, and our legendary beachside listening room.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> |
| <li><a href="#equipment" class="text-gray-400 hover:text-white transition duration-300">Equipment</a></li> |
| <li><a href="#experience" class="text-gray-400 hover:text-white transition duration-300">Listening Experience</a></li> |
| <li><a href="#bring-your-own" class="text-gray-400 hover:text-white transition duration-300">Bring Your Own Gear</a></li> |
| <li><a href="#shipping" class="text-gray-400 hover:text-white transition duration-300">Shipping Options</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Equipment Brands</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Bowers & Wilkins</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">McIntosh</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sennheiser</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">dCS</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Focal</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Shipping Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Returns & Warranty</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Coastal Audiophile. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const mobileMenuButton = document.querySelector('.md\\:hidden button'); |
| const mobileMenu = document.querySelector('.md\\:hidden + div'); |
| |
| mobileMenuButton.addEventListener('click', function() { |
| |
| console.log('Mobile menu button clicked'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cando881/unbox2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
