Modèle de site web dédié au travail du bois | Tailwind CSS, Artisan Design

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

3 December 2024

Matrix est un répertoire de page d'accueil

HTML

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimberCraft | Artisan Woodworking</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">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#d4a76a',
                            DEFAULT: '#b78d4a',
                            dark: '#9a7230',
                        },
                        secondary: {
                            light: '#5e4b3c',
                            DEFAULT: '#3e2e23',
                            dark: '#2a1e16',
                        },
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 1s ease-in-out',
                        'fade-in-up': 'fadeInUp 1s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {
                                opacity: '0'
                            },
                            '100%': {
                                opacity: '1'
                            },
                        },
                        fadeInUp: {
                            '0%': {
                                opacity: '0',
                                transform: 'translateY(20px)'
                            },
                            '100%': {
                                opacity: '1',
                                transform: 'translateY(0)'
                            },
                        },
                    },
                },
            },
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

.hero-overlay {
            background-color: rgba(0, 0, 0, 0.4);
        }

.dark .hero-overlay {
            background-color: rgba(0, 0, 0, 0.6);
        }

.masonry-grid {
            column-count: 3;
            column-gap: 1rem;
        }

@media (max-width: 1024px) {
            .masonry-grid {
                column-count: 2;
            }
        }

@media (max-width: 640px) {
            .masonry-grid {
                column-count: 1;
            }
        }

.masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }

.parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

.service-card:hover .service-icon {
            transform: rotateY(180deg);
        }

.service-icon {
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

.testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

.testimonial-card {
            transition: all 0.3s ease;
        }

.animate-fade-in {
            animation: fadeIn 1s ease-in-out;
        }

.animate-fade-in-up {
            animation: fadeInUp 1s ease-out;
        }

.nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #d4a76a;
            transition: width .3s;
        }

.nav-link:hover::after {
            width: 100%;
        }

.mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
        }

.mobile-menu.open {
            max-height: 500px;
        }
    </style>
</head>

<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-200 font-sans transition-colors duration-300">
    
    <nav class="fixed w-full bg-white/90 dark:bg-gray-900/90 backdrop-blur-md z-50 shadow-sm transition-colors duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-2">
                        <i class="fas fa-hammer text-secondary-dark text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-secondary-dark dark:text-primary-light font-serif">TimberCraft</span>
                </a>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Home</a>
                <a href="#about" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">About</a>
                <a href="#services" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Services</a>
                <a href="#portfolio" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Portfolio</a>
                <a href="#testimonials" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Testimonials</a>
                <a href="#blog" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Blog</a>
                <a href="#contact" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Contact</a>
            </div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:block"></i>
                </button>
                <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <div id="mobile-menu" class="mobile-menu md:hidden bg-white dark:bg-gray-800 transition-all duration-300">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
                <a href="#home" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Home</a>
                <a href="#about" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">About</a>
                <a href="#services" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Services</a>
                <a href="#portfolio" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Portfolio</a>
                <a href="#testimonials" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Testimonials</a>
                <a href="#blog" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Blog</a>
                <a href="#contact" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Contact</a>
            </div>
        </div>
    </nav>

<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
        <video autoplay muted loop class="hero-video">
            <source src="https://assets.mixkit.co/videos/preview/mixkit-carpenter-sanding-a-wooden-board-22530-large.mp4" type="video/mp4">
        </video>
        <div class="hero-overlay absolute inset-0"></div>
        <div class="container mx-auto px-4 z-10 text-center animate-fade-in-up">
            <h1 class="text-4xl md:text-6xl font-serif font-bold text-white mb-6">Handcrafted Woodwork <span class="text-primary-light">Perfection</span></h1>
            <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto">Where tradition meets innovation in every grain. Custom woodworking crafted with passion and precision.</p>
            <a href="#services" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                Explore Our Craft <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
            <a href="#about" class="text-white hover:text-primary-light transition-colors">
                <i class="fas fa-chevron-down text-2xl"></i>
            </a>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR STORY</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Crafting With Passion Since 1985</h2>
            </div>
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2 relative">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in">
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our workshop" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.2s;">
                            <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Craftsman working" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.4s;">
                            <img src="https://images.unsplash.com/photo-1583845112208-9b0700e05fc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wood materials" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.6s;">
                            <img src="https://images.unsplash.com/photo-1606744837616-56c9a5c6a6eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Finished product" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 animate-fade-in-up">
                    <h3 class="text-2xl font-serif font-bold text-secondary-dark dark:text-white mb-4">The TimberCraft Philosophy</h3>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">Founded by master carpenter Jacob Wilson in 1985, TimberCraft began as a small workshop dedicated to preserving traditional woodworking techniques while embracing modern design sensibilities.</p>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Sustainable Materials</h4>
                                <p class="text-gray-600 dark:text-gray-300">We source only ethically harvested, FSC-certified wood to ensure our craft respects nature.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Artisan Craftsmanship</h4>
                                <p class="text-gray-600 dark:text-gray-300">Each piece is handcrafted by our team of skilled artisans with decades of experience.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Lifetime Guarantee</h4>
                                <p class="text-gray-600 dark:text-gray-300">We stand behind our work with a comprehensive guarantee on all craftsmanship.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="#contact" class="bg-primary-light hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-full transition-all duration-300 inline-flex items-center">
                            Meet Our Team <i class="fas fa-users ml-2"></i>
                        </a>
                        <a href="#portfolio" class="border border-primary-light text-primary-light hover:bg-primary-light hover:text-white font-medium py-3 px-6 rounded-full transition-all duration-300 inline-flex items-center">
                            View Our Work <i class="fas fa-eye ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">WHAT WE OFFER</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Our Woodworking Services</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">From concept to completion, we provide comprehensive woodworking solutions tailored to your unique vision.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-couch text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Custom Furniture</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Bespoke pieces designed to your specifications, crafted with premium materials and timeless techniques.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-home text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Interior Wood Design</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Custom millwork, paneling, and architectural elements that elevate your living spaces.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-history text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Wood Restoration</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Expert repair and refinishing services to bring new life to your cherished wooden items.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-chess-queen text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Decorative Details</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Intricate carvings, inlays, and ornamental woodwork that adds character to any space.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-16 text-center">
                <a href="#contact" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                    Get a Free Consultation <i class="fas fa-calendar-check ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="portfolio" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR WORK</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Crafted With Precision</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Explore our gallery of completed projects that showcase the quality and diversity of our craftsmanship.</p>
            </div>
            <div class="mb-8 flex justify-center">
                <div class="inline-flex rounded-md shadow-sm">
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium rounded-l-lg border border-primary-light bg-primary-light text-white" data-filter="all">
                        All Works
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="furniture">
                        Furniture
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="interiors">
                        Interiors
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="restoration">
                        Restoration
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium rounded-r-lg border border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="decorative">
                        Decorative
                    </button>
                </div>
            </div>
            <div class="masonry-grid">
                
                <div class="masonry-item portfolio-item furniture">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Custom dining table" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Walnut Dining Table</h3>
                                <p class="text-gray-200">Custom 8-seater with butterfly joints</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item interiors">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wooden wall paneling" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Oak Wall Paneling</h3>
                                <p class="text-gray-200">Custom designed for a modern loft</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item restoration">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1604754742629-3e5728249d73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Restored antique chair" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">19th Century Chair</h3>
                                <p class="text-gray-200">Complete restoration with traditional methods</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item decorative">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1606744837616-56c9a5c6a6eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wooden sculpture" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Abstract Sculpture</h3>
                                <p class="text-gray-200">Hand-carved from a single piece of cherry</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item furniture">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Custom bookshelf" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Floor-to-Ceiling Bookshelf</h3>
                                <p class="text-gray-200">Custom designed for a private library</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item interiors">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kitchen cabinetry" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Custom Kitchen Cabinets</h3>
                                <p class="text-gray-200">Handcrafted maple with walnut accents</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-12 text-center">
                <a href="#contact" class="border border-primary-light text-primary-light hover:bg-primary-light hover:text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                    Start Your Project <i class="fas fa-hammer ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="testimonials" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">CLIENT VOICES</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">What Our Clients Say</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">The satisfaction of our clients is the true measure of our success. Here's what they have to say about working with us.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Sarah Johnson</h4>
                            <p class="text-gray-500 dark:text-gray-400">Interior Designer</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"TimberCraft transformed my vision into reality with their exquisite custom dining table. The craftsmanship is impeccable, and their attention to detail is unmatched."</p>
                    <div class="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="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Michael Chen</h4>
                            <p class="text-gray-500 dark:text-gray-400">Homeowner</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"The restoration work on my grandfather's antique desk was breathtaking. They preserved its history while making it functional for today. Truly masters of their craft."</p>
                    <div class="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="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Emily Rodriguez</h4>
                            <p class="text-gray-500 dark:text-gray-400">Architect</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"I've collaborated with TimberCraft on multiple projects. Their professionalism, communication, and ability to execute complex architectural woodwork is second to none."</p>
                    <div class="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>
        </div>
    </section>

<section id="blog" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR JOURNAL</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">From the Workshop</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Insights, stories, and tips from our master craftsmen. A look behind the scenes at TimberCraft.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1595504136421-8292d07a16a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood grains" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">July 15, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">Choosing the Right Wood: A Guide</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">Understanding the characteristics of different woods is key to a successful project. We explore the differences...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1506782081239-583915d3a512?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood joinery" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">June 28, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">The Art of Dovetail Joints</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">A hallmark of fine craftsmanship, the dovetail joint is both strong and beautiful. Learn about its history and use...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1581091220250-92a832189e3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood finishing" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">June 10, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">5 Tips for a Perfect Wood Finish</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">The final finish can make or break a piece. Our experts share their secrets for a durable and beautiful result...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">GET IN TOUCH</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Let's Create Something Together</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Have an idea for a project? We'd love to hear about it. Contact us for a free, no-obligation consultation.</p>
            </div>
            <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                <form action="#" method="POST">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
                            <input type="text" name="name" id="name" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                            <input type="email" name="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div class="md:col-span-2">
                            <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
                            <input type="text" name="subject" id="subject" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div class="md:col-span-2">
                            <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                            <input id="message" name="message" rows="4" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700"/>
                        </div>
                    </div>
                    <div class="mt-6 text-right">
                        <button type="submit" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                            Send Message <i class="fas fa-paper-plane ml-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer class="bg-secondary-dark text-gray-300">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">TimberCraft</h3>
                    <p class="text-sm text-gray-400">Handcrafted woodwork perfection since 1985. Passion and precision in every grain.</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li>
                        <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
                        <li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li>
                        <li><a href="#blog" class="text-gray-400 hover:text-white">Blog</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Contact Us</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li class="flex items-start"><i class="fas fa-map-marker-alt mt-1 mr-2"></i>123 Woodwork Lane, Artisan City, 10101</li>
                        <li class="flex items-start"><i class="fas fa-phone mt-1 mr-2"></i>(555) 123-4567</li>
                        <li class="flex items-start"><i class="fas fa-envelope mt-1 mr-2"></i>contact@timbercraft.com</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Newsletter</h3>
                    <p class="text-sm text-gray-400 mb-2">Subscribe for workshop updates and special offers.</p>
                    <form>
                        <div class="flex">
                            <input type="email" placeholder="Your Email" class="w-full px-3 py-2 text-sm text-gray-800 rounded-l-md focus:outline-none">
                            <button type="submit" class="bg-primary-light hover:bg-primary-dark text-white px-4 rounded-r-md">→</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="mt-8 border-t border-gray-700 pt-6 text-center text-sm text-gray-500">
                <p>© 2024 TimberCraft. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
        });

// On page load, check for saved theme
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
        
        // Mobile Menu
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileMenuLinks = mobileMenu.querySelectorAll('a');

mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('open');
        });

// Close mobile menu when a link is clicked
        mobileMenuLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('open');
            });
        });

// Portfolio Filter
        const filterButtons = document.querySelectorAll('.portfolio-filter');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                const filter = button.dataset.filter;

// Update button styles
                filterButtons.forEach(btn => {
                    btn.classList.remove('bg-primary-light', 'text-white');
                    btn.classList.add('text-primary-light', 'hover:bg-primary-light/10');
                });
                button.classList.add('bg-primary-light', 'text-white');
                button.classList.remove('text-primary-light', 'hover:bg-primary-light/10');

// Filter items
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.classList.contains(filter)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    </script>

</body>

</html>

Modèle de site web dédié au travail du bois | Tailwind CSS, Artisan Design

Recommandé

Un code par securecode635

Page de connexion

Matrix est un répertoire de page d'accueil

HTML

CSS

JS

Recommandé

Un code par securecode635

Page de connexion

Matrix est un répertoire de page d'accueil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS