Site Web du cabinet d'avocats : Tailwind CSS, Services juridiques

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 December 2024

Modèle de blog Tailwind CSS : mode sombre, réactif

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>Han Law & Partners - Your Trusted Legal Partner</title>
    
    
    <script src="https://cdn.tailwindcss.com"></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=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
            
            <a href="#" class="flex items-center space-x-2 text-2xl font-bold text-white">
                <i data-lucide="scale" class="w-8 h-8 text-amber-500"></i>
                <span>Han Law</span>
            </a>

<div class="hidden lg:flex items-center space-x-6 text-white">
                <a href="#home" class="hover:text-amber-500 transition-colors">Home</a>
                <a href="#about" class="hover:text-amber-500 transition-colors">About Us</a>
                <a href="#practice-areas" class="hover:text-amber-500 transition-colors">Practice Areas</a>
                <a href="#attorneys" class="hover:text-amber-500 transition-colors">Attorneys</a>
                <a href="#contact" class="hover:text-amber-500 transition-colors">Contact</a>
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700">
                    <i data-lucide="sun" class="w-5 h-5 text-white" id="theme-icon-sun"></i>
                    <i data-lucide="moon" class="w-5 h-5 text-white hidden" id="theme-icon-moon"></i>
                </button>
            </div>

<div class="lg:hidden flex items-center">
                <button id="mobile-menu-button" class="text-white focus:outline-none">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>
        </nav>
        
        
        <div id="mobile-menu" class="mobile-menu hidden fixed top-0 right-0 h-full w-64 bg-gray-900 bg-opacity-95 backdrop-blur-lg p-6 lg:hidden">
            <div class="flex justify-end mb-8">
                <button id="close-mobile-menu" class="text-white">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            <div class="flex flex-col space-y-6 text-white text-lg">
                <a href="#home" class="mobile-nav-link hover:text-amber-500">Home</a>
                <a href="#about" class="mobile-nav-link hover:text-amber-500">About Us</a>
                <a href="#practice-areas" class="mobile-nav-link hover:text-amber-500">Practice Areas</a>
                <a href="#attorneys" class="mobile-nav-link hover:text-amber-500">Attorneys</a>
                <a href="#contact" class="mobile-nav-link hover:text-amber-500">Contact</a>
                <button id="theme-toggle-mobile" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
                    <i data-lucide="sun" class="w-5 h-5 text-white" id="theme-icon-sun-mobile"></i>
                    <i data-lucide="moon" class="w-5 h-5 text-white hidden" id="theme-icon-moon-mobile"></i>
                    <span>Toggle Theme</span>
                </button>
            </div>
        </div>
    </header>

<main>
        
        <section id="home" class="relative h-screen flex items-center justify-center text-white">
            <div class="absolute inset-0 bg-black opacity-60"></div>
            <video autoplay loop muted playsinline class="absolute inset-0 w-full h-full object-cover">
                <source src="https://assets.mixkit.co/videos/preview/mixkit-courthouse-building-columns-video-shot-from-low-angle-23719-large.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="relative z-10 text-center px-4">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 leading-tight">Your Trusted Legal Partner in Justice</h1>
                <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8">
                    Upholding rights and delivering results with integrity and dedication. We are committed to providing exceptional legal representation.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-lg transition-transform transform hover:scale-105">
                        Book a Consultation
                    </a>
                    <a href="#about" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-8 rounded-lg transition-all">
                        Learn More
                    </a>
                </div>
            </div>
        </section>

<section id="about" class="py-20 bg-gray-50 dark:bg-gray-800">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">About Han Law & Partners</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">A legacy of excellence, a future of success.</p>
                </div>
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Our Mission & Values</h3>
                        <p class="mb-4 text-gray-600 dark:text-gray-300">
                            For over 25 years, Han Law & Partners has been a cornerstone of the legal community, built on a foundation of unwavering commitment to our clients. Our mission is to provide sophisticated, compassionate, and effective legal solutions.
                        </p>
                        <p class="text-gray-600 dark:text-gray-300">
                            We value integrity, perseverance, and a client-first approach, ensuring that every case is handled with the utmost professionalism and dedication to achieving the best possible outcome.
                        </p>
                        <div class="mt-8 grid grid-cols-3 gap-4 text-center">
                            <div>
                                <p class="text-4xl font-bold text-amber-500">25+</p>
                                <p class="text-gray-600 dark:text-gray-400">Years of Experience</p>
                            </div>
                            <div>
                                <p class="text-4xl font-bold text-amber-500">98%</p>
                                <p class="text-gray-600 dark:text-gray-400">Case Success Rate</p>
                            </div>
                            <div>
                                <p class="text-4xl font-bold text-amber-500">5000+</p>
                                <p class="text-gray-600 dark:text-gray-400">Satisfied Clients</p>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-lg overflow-hidden shadow-2xl">
                        <img src="https://images.unsplash.com/photo-1589578236718-3537a435a2a1?q=80&w=2070&auto=format&fit=crop" alt="Modern law firm office" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </section>

<section id="practice-areas" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">Our Practice Areas</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">Expert legal services tailored to your specific needs.</p>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="building-2" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Corporate Law</h3>
                        <p class="text-gray-600 dark:text-gray-300">Guiding businesses through complex legal landscapes, from startups to established corporations.</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="heart-handshake" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Family Law</h3>
                        <p class="text-gray-600 dark:text-gray-300">Compassionate and firm representation in matters of divorce, custody, and family disputes.</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="landmark" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Civil Litigation</h3>
                        <p class="text-gray-600 dark:text-gray-300">Assertive advocacy in court to resolve disputes and protect your interests effectively.</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="home" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Real Estate Law</h3>
                        <p class="text-gray-600 dark:text-gray-300">Navigating property transactions and disputes with precision and expert knowledge.</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="briefcase" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Employment Law</h3>
                        <p class="text-gray-600 dark:text-gray-300">Protecting the rights of both employees and employers in the modern workplace.</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
                        <i data-lucide="shield" class="w-12 h-12 text-amber-500 mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">Criminal Defense</h3>
                        <p class="text-gray-600 dark:text-gray-300">Vigorous defense for those accused, ensuring a fair process and protecting your freedom.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="attorneys" class="py-20 bg-gray-50 dark:bg-gray-800">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">Meet Our Attorneys</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">A team of dedicated professionals committed to your success.</p>
                </div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <div class="group relative text-center">
                        <div class="relative">
                            <img src="https://placehold.co/400x500/111827/FFFFFF?text=J.+Han" alt="Attorney John Han" class="rounded-lg shadow-lg w-full">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 rounded-lg flex items-center justify-center">
                                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white p-4">
                                    <p class="text-sm">John Han is a founding partner with over 25 years of experience in high-stakes corporate litigation.</p>
                                    <div class="flex justify-center space-x-4 mt-4">
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="mail" class="w-5 h-5"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mt-4 text-gray-900 dark:text-white">John S. Han</h3>
                        <p class="text-amber-500">Managing Partner</p>
                    </div>
                     
                    <div class="group relative text-center">
                        <div class="relative">
                            <img src="https://placehold.co/400x500/374151/FFFFFF?text=E.+Chen" alt="Attorney Emily Chen" class="rounded-lg shadow-lg w-full">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 rounded-lg flex items-center justify-center">
                                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white p-4">
                                    <p class="text-sm">Emily Chen specializes in family law, known for her empathetic approach and sharp negotiation skills.</p>
                                    <div class="flex justify-center space-x-4 mt-4">
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="mail" class="w-5 h-5"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mt-4 text-gray-900 dark:text-white">Emily Chen</h3>
                        <p class="text-amber-500">Senior Partner</p>
                    </div>
                     
                    <div class="group relative text-center">
                        <div class="relative">
                            <img src="https://placehold.co/400x500/111827/FFFFFF?text=M.+Davis" alt="Attorney Michael Davis" class="rounded-lg shadow-lg w-full">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 rounded-lg flex items-center justify-center">
                                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white p-4">
                                    <p class="text-sm">Michael Davis is a formidable criminal defense lawyer with an impressive track record of acquittals.</p>
                                    <div class="flex justify-center space-x-4 mt-4">
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="mail" class="w-5 h-5"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mt-4 text-gray-900 dark:text-white">Michael Davis</h3>
                        <p class="text-amber-500">Lead Defense Attorney</p>
                    </div>
                     
                    <div class="group relative text-center">
                        <div class="relative">
                            <img src="https://placehold.co/400x500/374151/FFFFFF?text=S.+Lee" alt="Attorney Sarah Lee" class="rounded-lg shadow-lg w-full">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 rounded-lg flex items-center justify-center">
                                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white p-4">
                                    <p class="text-sm">Sarah Lee is an expert in real estate law, adept at handling complex commercial property deals.</p>
                                    <div class="flex justify-center space-x-4 mt-4">
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
                                        <a href="#" class="hover:text-amber-500"><i data-lucide="mail" class="w-5 h-5"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mt-4 text-gray-900 dark:text-white">Sarah Lee</h3>
                        <p class="text-amber-500">Associate Attorney</p>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="testimonials" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">What Our Clients Say</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">Real stories from clients we've had the privilege to represent.</p>
                </div>
                <div class="grid lg:grid-cols-3 gap-8">
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                        <div class="flex items-center mb-4">
                            <img src="https://i.pravatar.cc/150?img=1" alt="Client photo" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold text-gray-900 dark:text-white">Amanda Waller</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
                            </div>
                        </div>
                        <p class="text-gray-600 dark:text-gray-300 italic">"Han Law & Partners navigated our corporate merger with exceptional skill and foresight. Their team was professional, responsive, and instrumental to our success."</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                        <div class="flex items-center mb-4">
                            <img src="https://i.pravatar.cc/150?img=2" alt="Client photo" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold text-gray-900 dark:text-white">Bruce Wayne</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Real Estate Developer</p>
                            </div>
                        </div>
                        <p class="text-gray-600 dark:text-gray-300 italic">"During a difficult family matter, Emily Chen provided not only expert legal counsel but also the compassion and support I needed. I couldn't have asked for a better advocate."</p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                        <div class="flex items-center mb-4">
                            <img src="https://i.pravatar.cc/150?img=3" alt="Client photo" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold text-gray-900 dark:text-white">Clark Kent</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Private Citizen</p>
                            </div>
                        </div>
                        <p class="text-gray-600 dark:text-gray-300 italic">"Facing a serious charge was terrifying, but Michael Davis and his team were a beacon of hope. Their tireless work resulted in all charges being dropped. I am forever grateful."</p>
                    </div>
                </div>
            </div>
        </section>

<section id="faq" class="py-20 bg-gray-50 dark:bg-gray-800">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">Frequently Asked Questions</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">Quick answers to common legal questions.</p>
                </div>
                <div class="max-w-3xl mx-auto">
                    
                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <button class="accordion-header w-full flex justify-between items-center py-4 text-left text-lg font-semibold text-gray-900 dark:text-white">
                            <span>What should I bring to my first consultation?</span>
                            <i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
                        </button>
                        <div class="accordion-content">
                            <p class="pt-2 pb-4 text-gray-600 dark:text-gray-300">
                                Please bring all relevant documents related to your case, such as contracts, correspondence, police reports, and a list of any questions you may have. The more information you provide, the better we can assess your situation.
                            </p>
                        </div>
                    </div>
                    
                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <button class="accordion-header w-full flex justify-between items-center py-4 text-left text-lg font-semibold text-gray-900 dark:text-white">
                            <span>How do you bill for your services?</span>
                            <i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
                        </button>
                        <div class="accordion-content">
                            <p class="pt-2 pb-4 text-gray-600 dark:text-gray-300">
                                Our billing structure varies depending on the type of case. We offer hourly rates, flat fees, and contingency fee arrangements in certain cases. We will discuss all fee options transparently during your initial consultation.
                            </p>
                        </div>
                    </div>
                    
                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <button class="accordion-header w-full flex justify-between items-center py-4 text-left text-lg font-semibold text-gray-900 dark:text-white">
                            <span>How long will my case take?</span>
                            <i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
                        </button>
                        <div class="accordion-content">
                            <p class="pt-2 pb-4 text-gray-600 dark:text-gray-300">
                                The duration of a legal case can vary significantly based on its complexity, the cooperation of the opposing party, and court schedules. We strive to resolve matters as efficiently as possible while ensuring the best outcome for you.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white">Schedule a Consultation</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mt-4 max-w-2xl mx-auto">Let's discuss your case. Reach out to us today for confidential legal advice.</p>
                </div>
                <div class="grid lg:grid-cols-2 gap-12">
                    
                    <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <input type="text" placeholder="Your Name" required class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500">
                                <input type="email" placeholder="Your Email" required class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500">
                            </div>
                            <div class="mb-6">
                                <input type="tel" placeholder="Your Phone Number" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500">
                            </div>
                            <div class="mb-6">
                                <input placeholder="Briefly describe your case..." rows="5" required class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500"/>
                            </div>
                            <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-lg transition-transform transform hover:scale-105">
                                Send Message
                            </button>
                        </form>
                    </div>
                    
                    <div>
                        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Contact Information</h3>
                        <div class="space-y-4 text-gray-600 dark:text-gray-300">
                            <p class="flex items-center"><i data-lucide="map-pin" class="w-5 h-5 mr-3 text-amber-500"></i> 123 Justice Avenue, Suite 100, Metropolis, USA</p>
                            <p class="flex items-center"><i data-lucide="phone" class="w-5 h-5 mr-3 text-amber-500"></i> (123) 456-7890</p>
                            <p class="flex items-center"><i data-lucide="mail" class="w-5 h-5 mr-3 text-amber-500"></i> contact@hanlaw.com</p>
                            <p class="flex items-center"><i data-lucide="clock" class="w-5 h-5 mr-3 text-amber-500"></i> Mon - Fri: 9:00 AM - 5:00 PM</p>
                        </div>
                        <div class="mt-8 rounded-lg overflow-hidden shadow-lg">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.617326442653!2d-73.98785368459395!3d40.74844097932804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1633382783081!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

<footer class="bg-gray-900 text-white">
        <div class="container mx-auto px-6 py-12">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">Han Law & Partners</h4>
                    <p class="text-gray-400 text-sm">Dedicated to justice and excellence since 1998.</p>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#about" class="text-gray-400 hover:text-amber-500">About Us</a></li>
                        <li><a href="#practice-areas" class="text-gray-400 hover:text-amber-500">Practice Areas</a></li>
                        <li><a href="#attorneys" class="text-gray-400 hover:text-amber-500">Our Team</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-amber-500">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">Connect With Us</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-amber-500"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
                        <a href="#" class="text-gray-400 hover:text-amber-500"><i data-lucide="twitter" class="w-6 h-6"></i></a>
                        <a href="#" class="text-gray-400 hover:text-amber-500"><i data-lucide="facebook" class="w-6 h-6"></i></a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">Newsletter</h4>
                    <p class="text-gray-400 text-sm mb-2">Stay updated with our latest legal insights.</p>
                    <form class="flex">
                        <input type="email" placeholder="Your Email" class="w-full p-2 rounded-l-lg bg-gray-800 border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        <button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-bold p-2 rounded-r-lg">
                            <i data-lucide="send" class="w-5 h-5"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="mt-12 border-t border-gray-800 pt-6 text-center text-sm text-gray-500">
                <p>© 2024 Han Law & Partners. All Rights Reserved. | Attorney Advertising. This website is for informational purposes only.</p>
            </div>
        </div>
    </footer>

// --- Sticky Header ---
            const header = document.getElementById('main-header');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.classList.add('sticky-header');
                } else {
                    header.classList.remove('sticky-header');
                }
            });

// --- Mobile Menu ---
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const closeMobileMenuButton = document.getElementById('close-mobile-menu');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');

mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.remove('hidden');
            });

closeMobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
            });
            
            // Close menu when a link is clicked
            mobileNavLinks.forEach(link => {
                link.addEventListener('click', () => {
                     mobileMenu.classList.add('hidden');
                });
            });

// --- FAQ Accordion ---
            const accordionHeaders = document.querySelectorAll('.accordion-header');
            accordionHeaders.forEach(header => {
                header.addEventListener('click', () => {
                    const content = header.nextElementSibling;
                    const icon = header.querySelector('i');
                    
                    // Close other open accordions
                    accordionHeaders.forEach(otherHeader => {
                        if (otherHeader !== header) {
                            otherHeader.nextElementSibling.style.maxHeight = null;
                            otherHeader.querySelector('i').style.transform = 'rotate(0deg)';
                        }
                    });

if (content.style.maxHeight) {
                        content.style.maxHeight = null;
                        icon.style.transform = 'rotate(0deg)';
                    } else {
                        content.style.maxHeight = content.scrollHeight + 'px';
                        icon.style.transform = 'rotate(180deg)';
                    }
                });
            });

// --- Light/Dark Mode Toggle ---
            const themeToggle = document.getElementById('theme-toggle');
            const themeToggleMobile = document.getElementById('theme-toggle-mobile');
            const sunIcon = document.getElementById('theme-icon-sun');
            const moonIcon = document.getElementById('theme-icon-moon');
            const sunIconMobile = document.getElementById('theme-icon-sun-mobile');
            const moonIconMobile = document.getElementById('theme-icon-moon-mobile');

const toggleTheme = () => {
                const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                localStorage.setItem('theme', newTheme);
                applyTheme(newTheme);
            };

themeToggle.addEventListener('click', toggleTheme);
            themeToggleMobile.addEventListener('click', toggleTheme);
        });
    </script>
</body>
</html>

Site Web du cabinet d'avocats : Tailwind CSS, Services juridiques

Recommandé

produit

Compte à rebours du Nouvel An

Modèle de blog Tailwind CSS : mode sombre, réactif

HTML

CSS

JS

Recommandé

produit

Compte à rebours du Nouvel An

Modèle de blog Tailwind CSS : mode sombre, réactif

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS