Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our Work | WoodCraft</title> | |
| <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> | |
| <style> | |
| .gallery-bg { | |
| background-image: url('https://woodcraft.moscow/assets/images/img-4451a.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .nav-link:hover { | |
| color: #d1a054; | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <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"> | |
| <span class="text-xl font-bold text-gray-800">WoodCraft</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="nav-link text-gray-600 hover:text-gray-800">Home</a> | |
| <a href="about.html" class="nav-link text-gray-600 hover:text-gray-800">About</a> | |
| <a href="works.html" class="nav-link text-gray-800 font-medium">Our Work</a> | |
| <a href="cooperation.html" class="nav-link text-gray-600 hover:text-gray-800">Cooperation</a> | |
| <a href="warranty.html" class="nav-link text-gray-600 hover:text-gray-800">Warranty</a> | |
| <a href="contacts.html" class="nav-link text-gray-600 hover:text-gray-800">Contacts</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gallery-bg min-h-96 flex items-center relative"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-32"> | |
| <div class="text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Our Work</h1> | |
| <p class="text-xl text-white">A showcase of our craftsmanship</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Content --> | |
| <section 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Furniture Collections</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="mb-16" data-aos="fade-up"> | |
| <h3 class="text-2xl font-semibold mb-8 text-gray-800">Dining Collection</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/5" alt="Dining table" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">River Oak Dining Table</h4> | |
| <p class="text-gray-600 mb-4">Solid oak table with live edge details, seating for 8-10</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$3,200</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/6" alt="Dining chairs" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Walnut Dining Chairs</h4> | |
| <p class="text-gray-600 mb-4">Set of 4 handcrafted chairs with leather upholstery</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$2,800</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/7" alt="Buffet" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Cherry Wood Buffet</h4> | |
| <p class="text-gray-600 mb-4">Storage cabinet with hand-carved details and brass hardware</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$2,500</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16" data-aos="fade-up"> | |
| <h3 class="text-2xl font-semibold mb-8 text-gray-800">Living Room Collection</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/8" alt="Coffee table" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Reclaimed Teak Coffee Table</h4> | |
| <p class="text-gray-600 mb-4">Industrial-style table with metal base and glass top</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$1,800</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/9" alt="Bookshelf" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Modern Walnut Bookshelf</h4> | |
| <p class="text-gray-600 mb-4">Floor-to-ceiling shelving with adjustable compartments</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$3,500</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/10" alt="TV stand" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Oak Media Console</h4> | |
| <p class="text-gray-600 mb-4">Minimalist design with ample storage and cable management</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$2,200</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16" data-aos="fade-up"> | |
| <h3 class="text-2xl font-semibold mb-8 text-gray-800">Bedroom Collection</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/11" alt="Bed" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">King Size Mahogany Bed</h4> | |
| <p class="text-gray-600 mb-4">Four-poster design with hand-turned spindles</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$4,200</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/12" alt="Dresser" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Cherry Wood Dresser</h4> | |
| <p class="text-gray-600 mb-4">Nine-drawer chest with dovetail joints and soft-close slides</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$2,800</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"> | |
| <img src="http://static.photos/furniture/640x360/13" alt="Nightstand" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-semibold mb-2">Walnut Nightstand</h4> | |
| <p class="text-gray-600 mb-4">Matching pair with hidden USB charging and drawer storage</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-700">$1,200/pair</span> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="fade-up"> | |
| <a href="contacts.html" class="inline-block bg-amber-700 hover:bg-amber-800 text-white px-8 py-4 rounded-md font-medium text-lg transition duration-300">Request Custom Design</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Project Gallery --> | |
| <section 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Project Galleries</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-right"> | |
| <div class="relative"> | |
| <img src="http://static.photos/furniture/640x360/51" alt="Modern Dining Set" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <span class="text-white text-lg font-medium">View Gallery</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Modern Dining Set</h3> | |
| <p class="text-gray-600 mb-4">Complete dining room transformation with table, chairs and buffet</p> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">See all 12 photos →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-left"> | |
| <div class="relative"> | |
| <img src="http://static.photos/furniture/640x360/52" alt="Luxury Bedroom Suite" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <span class="text-white text-lg font-medium">View Gallery</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Luxury Bedroom Suite</h3> | |
| <p class="text-gray-600 mb-4">Custom king bed, nightstands and dresser in walnut</p> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">See all 15 photos →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up"> | |
| <div class="relative"> | |
| <img src="http://static.photos/furniture/640x360/53" alt="Home Office" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <span class="text-white text-lg font-medium">View Gallery</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Home Office</h3> | |
| <p class="text-gray-600 mb-4">Custom desk and shelving system</p> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">See all 8 photos →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="relative"> | |
| <img src="http://static.photos/furniture/640x360/54" alt="Library Project" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <span class="text-white text-lg font-medium">View Gallery</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Library Project</h3> | |
| <p class="text-gray-600 mb-4">Floor-to-ceiling bookshelves with ladder</p> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">See all 10 photos →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/furniture/640x360/55" alt="Kitchen Renovation" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <span class="text-white text-lg font-medium">View Gallery</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Kitchen Renovation</h3> | |
| <p class="text-gray-600 mb-4">Custom cabinetry and island</p> | |
| <a href="#" class="text-amber-700 hover:text-amber-800 font-medium">See all 18 photos →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solid Wood Furniture Gallery --> | |
| <section 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Solid Wood Furniture</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in"> | |
| <img src="https://woodcraft.moscow/assets/images/image7.jpeg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="100"> | |
| <img src="https://woodcraft.moscow/assets/images/dweb-foto-image4.jpeg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="200"> | |
| <img src="https://woodcraft.moscow/assets/images/img-4312.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in"> | |
| <img src="https://woodcraft.moscow/assets/images/img-4316.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="100"> | |
| <img src="https://woodcraft.moscow/assets/images/img-3903.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="200"> | |
| <img src="https://woodcraft.moscow/assets/images/img-4330.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in"> | |
| <img src="https://woodcraft.moscow/assets/images/img-4378.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="100"> | |
| <img src="https://woodcraft.moscow/assets/images/img-3919.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="200"> | |
| <img src="https://woodcraft.moscow/assets/images/image3-1.jpeg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in"> | |
| <img src="https://woodcraft.moscow/assets/images/img-2157.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="100"> | |
| <img src="https://woodcraft.moscow/assets/images/img-20180416-wa0015.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-aos="zoom-in" data-aos-delay="200"> | |
| <img src="https://woodcraft.moscow/assets/images/img-20170222.jpg" alt="Solid wood furniture" class="w-full h-64 object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Custom Projects --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Custom Projects</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <img src="http://static.photos/furniture/640x360/28" alt="Custom furniture project" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">Bespoke Furniture Solutions</h3> | |
| <p class="text-gray-600 mb-6">While we're proud of our standard collections, our true passion lies in creating custom pieces tailored to your exact needs. Whether you're looking for a statement piece for your home or functional furniture for a commercial space, we can bring your vision to life.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-amber-600 mr-2 mt-1"></i> | |
| <span class="text-gray-700">Completely unique designs based on your specifications</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-amber-600 mr-2 mt-1"></i> | |
| <span class="text-gray-700">Choice of wood species, finishes, and hardware</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-amber-600 mr-2 mt-1"></i> | |
| <span class="text-gray-700">Custom dimensions to fit your space perfectly</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-amber-600 mr-2 mt-1"></i> | |
| <span class="text-gray-700">Collaborative design process with our master craftsmen</span> | |
| </li> | |
| </ul> | |
| <a href="cooperation.html" class="inline-block bg-amber-700 hover:bg-amber-800 text-white px-6 py-3 rounded-md font-medium transition duration-300">Learn About Our Process</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Client Stories</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/40" alt="Happy clients" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Robert & Emily</h4> | |
| <p class="text-gray-600 text-sm">Custom Dining Set</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"We wanted a dining table that could accommodate our large family gatherings but fit in our small dining area. WoodCraft designed an expandable table with leaves that store neatly inside when not in use. The craftsmanship is flawless."</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/41" alt="Satisfied customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Jennifer</h4> | |
| <p class="text-gray-600 text-sm">Home Office</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"Working from home required a functional yet beautiful workspace. The team created a desk with integrated cable management and shelving that matches my mid-century modern decor. It's both practical and a work of art."</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/42" alt="Happy family" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">The Williams Family</h4> | |
| <p class="text-gray-600 text-sm">Whole Home Furnishings</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"When we built our new home, we wanted furniture that would last generations. WoodCraft created cohesive pieces for every room using sustainable oak. Each piece tells a story and will become family heirlooms."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <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-xl font-bold mb-4">WoodCraft</h3> | |
| <p class="text-gray-400">Creating exceptional solid wood furniture since 1995.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="works.html" class="text-gray-400 hover:text-white">Our Work</a></li> | |
| <li><a href="warranty.html" class="text-gray-400 hover:text-white">Warranty</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Information</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="cooperation.html" class="text-gray-400 hover:text-white">Cooperation</a></li> | |
| <li><a href="contacts.html" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contact</h4> | |
| <address class="not-italic text-gray-400"> | |
| <p>123 Woodcraft Lane</p> | |
| <p>Artisan District, 10001</p> | |
| <p class="mt-2">Phone: (123) 456-7890</p> | |
| <p>Email: info@woodcraft.com</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 WoodCraft. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.querySelector('.mobile-menu-button').addEventListener('click', function() { | |
| alert('Mobile menu would open here in a complete implementation'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |