<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opus | Premium Furniture Finishing</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-sans">
    <!-- Navigation -->
    <nav class="fixed w-full bg-white bg-opacity-90 z-50 shadow-sm">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <a href="#" class="text-2xl font-semibold text-gray-800">OPUS</a>
                <div class="hidden md:flex space-x-8">
                    <a href="#about" class="text-gray-600 hover:text-gray-900 transition">About</a>
                    <a href="#services" class="text-gray-600 hover:text-gray-900 transition">Services</a>
                    <a href="#gallery" class="text-gray-600 hover:text-gray-900 transition">Gallery</a>
                    <a href="#contact" class="text-gray-600 hover:text-gray-900 transition">Contact</a>
                </div>
                <button class="md:hidden focus:outline-none" id="menu-toggle">
                    <i data-feather="menu"></i>
                </button>
            </div>
            <!-- Mobile menu -->
            <div class="md:hidden hidden mt-4" id="mobile-menu">
                <a href="#about" class="block py-2 text-gray-600 hover:text-gray-900 transition">About</a>
                <a href="#services" class="block py-2 text-gray-600 hover:text-gray-900 transition">Services</a>
                <a href="#gallery" class="block py-2 text-gray-600 hover:text-gray-900 transition">Gallery</a>
                <a href="#contact" class="block py-2 text-gray-600 hover:text-gray-900 transition">Contact</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative h-screen flex items-center justify-center bg-gray-100 overflow-hidden">
        <!-- Replace this image with your hero image -->
        <img src="http://static.photos/nature/1920x1080/1" alt="Woodworking background" class="absolute w-full h-full object-cover opacity-90">
        <div class="absolute inset-0 bg-black bg-opacity-30"></div>
        <div class="relative z-10 text-center px-6">
            <h1 class="text-5xl md:text-7xl font-bold text-white mb-8" data-aos="fade-down">OPUS</h1>
            <p class="text-xl md:text-2xl text-white mb-12" data-aos="fade-down" data-aos-delay="200">Premium Furniture Finishing</p>
            <a href="#services" class="px-8 py-3 bg-white text-gray-800 font-medium rounded-sm hover:bg-opacity-90 transition" data-aos="fade-up" data-aos-delay="400">Our Services</a>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right">
                    <!-- Replace this image with your about image -->
                    <img src="http://static.photos/workspace/800x600/2" alt="Workshop" class="rounded-lg shadow-lg">
                </div>
                <div class="md:w-1/2 md:pl-12" data-aos="fade-left">
                    <h2 class="text-3xl font-semibold text-gray-800 mb-6">Craftsmanship Redefined</h2>
                    <p class="text-gray-600 mb-4">Opus is a finishing company dedicated to transforming furniture into works of art. Our passion for furniture and meticulous attention to detail set us apart in the industry.</p>
                    <p class="text-gray-600 mb-6">We're proud to partner with <a href="https://sassysalvage.com" target="_blank" rel="noopener noreferrer" class="font-medium hover:text-amber-600 transition">Sassafras Furniture Shop</a>, a Pensacola business with over 15 years of experience in fine furniture making.</p>
                    <p class="text-gray-600">Whether you're a retail store looking for consistent finishing, a custom maker needing a reliable partner, or a homeowner wanting to refinish or update your pieces to new or beachy styles, Opus delivers exceptional results.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-semibold text-center text-gray-800 mb-16" data-aos="fade-down">Our Services</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Service Card 1 -->
                <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100">
                    <div class="text-amber-600 mb-4">
                        <i data-feather="shopping-bag" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">Retail Store Finishing</h3>
                    <p class="text-gray-600">Consistent, high-quality finishing services tailored for furniture retailers needing volume work with impeccable standards.</p>
                </div>
                
                <!-- Service Card 2 -->
                <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200">
                    <div class="text-amber-600 mb-4">
                        <i data-feather="tool" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">Custom Maker Partnerships</h3>
                    <p class="text-gray-600">Collaborative finishing solutions for custom furniture makers who need a reliable finishing partner.</p>
                </div>
                
                <!-- Service Card 3 -->
                <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="300">
                    <div class="text-amber-600 mb-4">
                        <i data-feather="refresh-cw" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">Furniture Refinishing</h3>
                    <p class="text-gray-600">Breathing new life into cherished pieces with our expert refinishing techniques and premium materials.</p>
                </div>
                
                <!-- Service Card 4 -->
                <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="400">
                    <div class="text-amber-600 mb-4">
                        <i data-feather="sun" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">Beach-Inspired Transformations</h3>
                    <p class="text-gray-600">Specialized finishes that capture the coastal aesthetic, perfect for updating pieces to suit beach house styles.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section id="gallery" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-semibold text-center text-gray-800 mb-16" data-aos="fade-down">Our Work</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Gallery Item 1 - Replace these images with your before/after projects -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="100">
                    <img src="http://static.photos/furniture/600x400/1" alt="Project 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">Before Restoration</span>
                    </div>
                </div>
                
                <!-- Gallery Item 2 -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="200">
                    <img src="http://static.photos/furniture/600x400/2" alt="Project 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">After Restoration</span>
                    </div>
                </div>
                
                <!-- Gallery Item 3 -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="300">
                    <img src="http://static.photos/furniture/600x400/3" alt="Project 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">Custom Finish</span>
                    </div>
                </div>
                
                <!-- Gallery Item 4 -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="400">
                    <img src="http://static.photos/furniture/600x400/4" alt="Project 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">Beach Style Transformation</span>
                    </div>
                </div>
                
                <!-- Gallery Item 5 -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="500">
                    <img src="http://static.photos/furniture/600x400/5" alt="Project 4" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">Retail Piece</span>
                    </div>
                </div>
                
                <!-- Gallery Item 6 -->
                <div class="relative group overflow-hidden rounded-lg" data-aos="fade-up" data-aos-delay="600">
                    <img src="http://static.photos/furniture/600x400/6" alt="Project 5" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                        <span class="text-white font-medium">Custom Commission</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-semibold text-center text-gray-800 mb-4" data-aos="fade-down">Get In Touch</h2>
                <p class="text-center text-gray-600 mb-12" data-aos="fade-down" data-aos-delay="100">By appointment only</p>
                
                <div class="flex flex-col md:flex-row gap-12">
                    <div class="md:w-1/2" data-aos="fade-right">
                        <form class="space-y-6">
                            <div>
                                <label for="name" class="block text-gray-700 mb-2">Name</label>
                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                            </div>
                            <div>
                                <label for="email" class="block text-gray-700 mb-2">Email</label>
                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                            </div>
                            <div>
                                <label for="message" class="block text-gray-700 mb-2">Message</label>
                                <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
                            </div>
                            <button type="submit" class="px-6 py-3 bg-amber-600 text-white font-medium rounded-sm hover:bg-amber-700 transition">Send Message</button>
                        </form>
                    </div>
                    
                    <div class="md:w-1/2" data-aos="fade-left">
                        <div class="bg-white p-8 rounded-lg shadow-sm h-full">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Contact Information</h3>
                            <p class="text-gray-600 mb-6">Based in Pensacola, Florida, we serve clients throughout the Gulf Coast region.</p>
                            
                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <i data-feather="mail" class="text-amber-600 mr-4 mt-1"></i>
                                    <span class="text-gray-600">info@opus-furniture.com</span>
                                </div>
                                <div class="flex items-start">
                                    <i data-feather="phone" class="text-amber-600 mr-4 mt-1"></i>
                                    <span class="text-gray-600">(615) 934-9308</span>
                                </div>
                            </div>
                            
                            <div class="mt-8">
                                <h4 class="text-lg font-medium text-gray-800 mb-4">Follow Us</h4>
                                <div class="flex space-x-4">
                                    <a href="#" class="text-gray-600 hover:text-amber-600 transition">
                                        <i data-feather="instagram" class="w-6 h-6"></i>
                                    </a>
                                    <a href="#" class="text-gray-600 hover:text-amber-600 transition">
                                        <i data-feather="facebook" class="w-6 h-6"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <a href="#" class="text-2xl font-semibold">OPUS</a>
                </div>
                <div class="text-gray-400 text-sm">
                    &copy; <span id="year"></span> Opus Furniture LLC. All rights reserved.
                </div>
            </div>
        </div>
    </footer>

    <!-- Lightbox Modal -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center">
        <div class="relative max-w-4xl w-full p-4">
            <button id="close-lightbox" class="absolute -top-12 right-0 text-white hover:text-amber-400 transition">
                <i data-feather="x" class="w-8 h-8"></i>
            </button>
            <img id="lightbox-image" src="" alt="" class="w-full max-h-screen object-contain">
        </div>
    </div>

    <!-- Scripts -->
    <script src="script.js"></script>
    <script>
        // Initialize AOS animations
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });

        // Set current year in footer
        document.getElementById('year').textContent = new Date().getFullYear();

        // Initialize feather icons
        feather.replace();
    </script>
</body>
</html>