admin/hz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

模版修改

Browse Source
This commit is contained in:
123 2025-06-27 13:53:32 +08:00
parent a94d4bac21
commit 05b2278550
6 changed files with 2742 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
WebResources/templates/default_v2/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华臻会计师事务所</title>
<title>{dreamer-cms:global name="title" /}</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">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
@ -546,67 +546,6 @@
</a>
</div>
{/dreamer-cms:channel}
<!-- Practice Area Card 2 -->
<!-- <div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">-->
<!-- <div class="text-amber-700 text-4xl mb-4">-->
<!-- <i class="fas fa-home"></i>-->
<!-- </div>-->
<!-- <h3 class="text-xl font-bold mb-3 text-gray-800">Real Estate Law</h3>-->
<!-- <p class="text-gray-600 mb-4">Expert guidance for property transactions, disputes, and all matters related to real estate law and regulations.</p>-->
<!-- <a href="#" class="text-amber-700 font-semibold flex items-center">-->
<!-- Learn More <i class="fas fa-arrow-right ml-2"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- Practice Area Card 3 -->
<!-- <div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">-->
<!-- <div class="text-amber-700 text-4xl mb-4">-->
<!-- <i class="fas fa-user-tie"></i>-->
<!-- </div>-->
<!-- <h3 class="text-xl font-bold mb-3 text-gray-800">Corporate Law</h3>-->
<!-- <p class="text-gray-600 mb-4">Comprehensive legal solutions for businesses including formation, compliance, mergers, and acquisitions.</p>-->
<!-- <a href="#" class="text-amber-700 font-semibold flex items-center">-->
<!-- Learn More <i class="fas fa-arrow-right ml-2"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- -->
<!-- Practice Area Card 4 -->
<!-- <div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">-->
<!-- <div class="text-amber-700 text-4xl mb-4">-->
<!-- <i class="fas fa-heart"></i>-->
<!-- </div>-->
<!-- <h3 class="text-xl font-bold mb-3 text-gray-800">Family Law</h3>-->
<!-- <p class="text-gray-600 mb-4">Sensitive handling of divorce, custody, adoption and other family matters with care and professionalism.</p>-->
<!-- <a href="#" class="text-amber-700 font-semibold flex items-center">-->
<!-- Learn More <i class="fas fa-arrow-right ml-2"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- Practice Area Card 5 -->
<!-- <div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">-->
<!-- <div class="text-amber-700 text-4xl mb-4">-->
<!-- <i class="fas fa-file-contract"></i>-->
<!-- </div>-->
<!-- <h3 class="text-xl font-bold mb-3 text-gray-800">Contract Law</h3>-->
<!-- <p class="text-gray-600 mb-4">Drafting, reviewing, and enforcing contracts to protect your interests in all business dealings.</p>-->
<!-- <a href="#" class="text-amber-700 font-semibold flex items-center">-->
<!-- Learn More <i class="fas fa-arrow-right ml-2"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- Practice Area Card 6 -->
<!-- <div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">-->
<!-- <div class="text-amber-700 text-4xl mb-4">-->
<!-- <i class="fas fa-hand-holding-usd"></i>-->
<!-- </div>-->
<!-- <h3 class="text-xl font-bold mb-3 text-gray-800">Personal Injury</h3>-->
<!-- <p class="text-gray-600 mb-4">Aggressive representation to secure maximum compensation for injuries caused by others' negligence.</p>-->
<!-- <a href="#" class="text-amber-700 font-semibold flex items-center">-->
<!-- Learn More <i class="fas fa-arrow-right ml-2"></i>-->
<!-- </a>-->
<!-- </div>-->
</div>
</div>
</section>
@ -629,8 +568,9 @@
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Proven Track Record</h4>
<p class="text-gray-600 text-sm">Over three decades of successful case outcomes</p>
<h4 class="font-bold text-gray-800 mb-1">企业文化</h4>
<p class="text-gray-600 text-sm">以人为本，团结协作。
抖搏创新，回馈社会。</p>
</div>
</div>
<div class="flex items-start">
@ -638,8 +578,9 @@
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Client-Centered Approach</h4>
<p class="text-gray-600 text-sm">Personalized attention for every client</p>
<h4 class="font-bold text-gray-800 mb-1">经营理念</h4>
<p class="text-gray-600 text-sm">用户为先，信誉至上。
高效务实，共课发展。</p>
</div>
</div>
<div class="flex items-start">
@ -647,8 +588,9 @@
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Ethical Standards</h4>
<p class="text-gray-600 text-sm">Highest professional ethics and integrity</p>
<h4 class="font-bold text-gray-800 mb-1">服务宗旨</h4>
<p class="text-gray-600 text-sm">客户的需求就是我们努力的方向。
客户的满意就是我们奋斗的目标。</p>
</div>
</div>
<div class="flex items-start">
@ -656,13 +598,13 @@
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Experienced Team</h4>
<p class="text-gray-600 text-sm">Recognized experts in multiple legal fields</p>
<h4 class="font-bold text-gray-800 mb-1">发展目标</h4>
<p class="text-gray-600 text-sm">打造客户信赖的、具有专业价值的优质咨询服务机构，努力成为客户的最佳选择。</p>
</div>
</div>
</div>
<button class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-lg transition duration-300 shadow-lg font-semibold">查看更多</button>
<a href="/cover-9305qsp7/shiwusuojianjie"> <button class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-lg transition duration-300 shadow-lg font-semibold">查看更多</button></a>
</div>
</div>
</div>
@ -754,7 +696,7 @@
</section> -->
<!-- Call to Action -->
<section class="bg-blue-700 py-16">
<section class="bg-gray-500 py-16">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-4">有相关问题或需求？与我们取得联系</h2>
<p class="text-xl max-w-3xl mx-auto mb-8">我们会尽快回复您的咨询，帮助您找到最佳解决方案。我们将提供专业、高效的支持，确保您的权益得到保障。</p>

890
WebResources/templates/default_v2/info.html Normal file
View File

@ -0,0 +1,890 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{dreamer-cms:global name="title" /}</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">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
/* Custom CSS for elements that need more styling than Tailwind provides */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
.practice-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Animation for the consultation button */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-button {
animation: pulse 2s infinite;
}
/*
.nav-link:hover::after {
width: 100%;
}
*/
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #c7951c;
transition: width .3s;
}
/* Dropdown transition */
.group:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
/* Mobile dropdown arrow rotation */
.rotate-180 {
transform: rotate(180deg);
}
</style>
</head>
<body class="font-sans">
<!-- Header/Navigation -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-balance-scale text-3xl text-amber-700 mr-2"></i>
<h1 class="text-2xl font-bold text-gray-800">Advocate<span class="text-amber-700">&</span>Partners</h1>
</div>
<nav class="hidden md:flex items-center space-x-8">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700">首页</a>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
关于我们 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">事务所简介</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">发展历程</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">核心价值观</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">加入我们</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
业务领域 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-56 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">刑事辩护</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">婚姻家事</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">公司法务</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">人身损害</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
律师团队 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">专业团队</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">合伙人</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">执业律师</a>
</div>
</div>
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700">联系我们</a>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300 shadow-lg">免费咨询</button>
</nav>
<button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4">
<div class="flex flex-col space-y-4">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">Home</a>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
About <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Our Firm</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">History</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Values</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Careers</a>
</div>
</div>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Practice Areas <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Criminal Defense</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Family Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Corporate Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Personal Injury</a>
</div>
</div>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Attorneys <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Our Team</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Partners</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Associates</a>
</div>
</div>
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">Contact</a>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300">Free Consultation</button>
</div>
</div>
</div>
</header>
<!-- Banner Carousel -->
<div class="swiper-container relative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb" class="w-full h-[500px] object-cover" alt="法律咨询">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">专业法律咨询服务</h1>
<p class="text-xl mb-8">为您提供全方位的法律解决方案</p>
<button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded">立即咨询</button>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1587202372775-e229f1725510" class="w-full h-[500px] object-cover" alt="企业法律服务">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">企业法律顾问服务</h1>
<p class="text-xl mb-8">助力企业合规经营，防范法律风险</p>
<button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded">了解详情</button>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-button-next text-white"></div>
<div class="swiper-button-prev text-white"></div>
</div>
<!-- <div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">专业可信的<br> 律师服务</h1>
<p class="text-xl md:text-2xl max-w-4xl mx-auto mb-8">我们的资深律师团队致力于提供专业定制化的法律解决方案。</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-amber-700 hover:bg-amber-800 text-white px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg pulse-button font-semibold">预约咨询</button>
<button class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white px-8 py-4 text-lg rounded-lg transition duration-300 font-semibold">了解更多</button>
</div>
</div> -->
</section>
<!-- 企业简介 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800">关于我们</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto mt-3"></div>
</div>
<div class="flex flex-col lg:flex-row items-center mb-16">
<!-- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978" alt="公司办公环境" class="rounded-lg shadow-lg w-full">
</div> -->
<div class="lg:w-1/2">
<h3 class="text-2xl font-bold text-gray-800 mb-4">公司简介</h3>
<p class="text-gray-600 mb-6">先锋律师事务所成立于1995年，是一家专注于企业法律服务的综合性律师事务所。经过20余年的发展，我们已成长为国内领先的法律服务机构，拥有分布于北京、上海、深圳、广州等主要城市的10家分所。</p>
<p class="text-gray-600 mb-6">我们秉承"专业、诚信、创新、共赢"的核心价值观，致力于为客户提供全方位的法律解决方案。事务所现有合伙人25名，执业律师及专业人员超过200人，构成了国内一流的法律专业团队。</p>
<div class="bg-gray-50 p-6 rounded-lg">
<div class="flex items-start">
<div class="bg-amber-700 text-white p-2 rounded-full mr-4 mt-1">
<i class="fas fa-bullseye"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-2">使命与愿景</h4>
<p class="text-gray-600">成为客户最信赖的法律伙伴，以专业智慧创造价值，推动商业与法律环境的完善。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心数据 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
<div class="bg-amber-700 text-white p-8 rounded-lg text-center">
<span class="block text-4xl font-bold mb-2">25+</span>
<span class="text-xl">合伙人</span>
</div>
<div class="bg-gray-100 p-8 rounded-lg text-center">
<span class="block text-4xl font-bold text-amber-700 mb-2">200+</span>
<span class="text-xl text-gray-700">专业律师</span>
</div>
<div class="bg-gray-100 p-8 rounded-lg text-center">
<span class="block text-4xl font-bold text-amber-700 mb-2">10</span>
<span class="text-xl text-gray-700">分支机构</span>
</div>
</div>
<!-- 发展历程 -->
<div class="mb-20">
<h3 class="text-2xl font-bold text-gray-800 text-center mb-12">发展历程</h3>
<div class="timeline relative max-w-3xl mx-auto">
<!-- 1995 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">1995</span>
<h4 class="font-bold text-gray-800 my-2">事务所创立</h4>
<p class="text-gray-600">在北京创立先锋律师事务所，首批十人团队</p>
</div>
</div>
<!-- 2002 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2002</span>
<h4 class="font-bold text-gray-800 my-2">上海分所成立</h4>
<p class="text-gray-600">设立第一家分公司，开启全国化布局</p>
</div>
</div>
<!-- 2010 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2010</span>
<h4 class="font-bold text-gray-800 my-2">首获全国十佳律所</h4>
<p class="text-gray-600">在《中国法律评论》评选中首次获得十佳称号</p>
</div>
</div>
<!-- 2020 -->
<div class="timeline-item relative pl-16">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2020</span>
<h4 class="font-bold text-gray-800 my-2">国际化战略启动</h4>
<p class="text-gray-600">与英国、德国等国际顶尖律所建立战略合作关系</p>
</div>
</div>
</div>
</div>
<!-- 核心价值观 -->
<div class="">
<h3 class="text-2xl font-bold text-gray-800 text-center mb-12">核心价值观</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-gem"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">专业</h4>
<p class="text-gray-600">以精湛的法律技艺和全面的知识体系，为客户提供最专业的法律解决方案</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-handshake"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">诚信</h4>
<p class="text-gray-600">坚持最高标准的职业道德，以诚实守信为本，维护客户合法权益</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">创新</h4>
<p class="text-gray-600">不断探索创新法律服务模式，适应数字化时代的法律需求变化</p>
</div>
</div>
</div>
</div>
</section>
<!-- 业务领域分页 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800">业务领域</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto mt-3"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">根据客户的不同需求，我们提供多元化的专业法律服务领域</p>
</div>
<!-- 领域筛选 -->
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm">
<button type="button" class="filter-btn px-4 py-2 rounded-l-lg bg-amber-700 text-white font-medium" data-category="all">全部领域</button>
<button type="button" class="filter-btn px-4 py-2 bg-white text-gray-700 font-medium" data-category="litigation">诉讼争议</button>
<button type="button" class="filter-btn px-4 py-2 bg-white text-gray-700 font-medium" data-category="corporate">公司商务</button>
<button type="button" class="filter-btn px-4 py-2 rounded-r-lg bg-white text-gray-700 font-medium" data-category="personal">个人事务</button>
</div>
</div>
<!-- 业务领域卡片展示 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12" id="practice-areas-container">
<!-- 卡片将通过JavaScript动态加载 -->
</div>
<!-- 分页导航 -->
<div class="flex justify-center mt-8">
<nav class="inline-flex rounded-md shadow">
<button id="prev-page" class="px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i class="fas fa-chevron-left"></i>
</button>
<div class="flex" id="page-numbers">
<!-- 页码将通过JavaScript动态生成 -->
</div>
<button id="next-page" class="px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</section>
<!-- 业务领域数据模板 (用于JavaScript渲染) -->
<template id="practice-card-template">
<div class="practice-card bg-white p-6 rounded-lg shadow-md transition duration-300 hover:shadow-lg" data-category="">
<div class="text-amber-700 text-4xl mb-4">
<i class=""></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-800"></h3>
<p class="text-gray-600 mb-4"></p>
<a href="#" class="text-amber-700 font-semibold flex items-center">
了解详情 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</template>
<script>
// 业务领域数据
const practiceAreas = [
{
icon: "fa-gavel",
category: "litigation",
title: "刑事辩护",
description: "为各类刑事犯罪案件当事人提供专业辩护，包括侦查阶段的申诉和控告，审查起诉和审判阶段的辩护。"
},
{
icon: "fa-file-invoice-dollar",
category: "litigation",
title: "债务纠纷",
description: "处理各类债权债务纠纷，包括合同纠纷、侵权债务、不当得利等各类债权债务纠纷事务。"
},
{
icon: "fa-user-tie",
category: "corporate",
title: "公司法律顾问",
description: "为公司的设立、变更、运营管理、投融资等活动提供全方位法律支持，预防法律风险。"
},
{
icon: "fa-file-contract",
category: "corporate",
title: "商事合同",
description: "起草、审查、修改各类商业合同，提供合同谈判、履行指导、纠纷解决等一站式服务。"
},
{
icon: "fa-home",
category: "personal",
title: "房地产",
description: "房产买卖、产权确认、租房纠纷、产权调处等各类房地产法律问题的咨询和代理服务。"
},
{
icon: "fa-heart",
category: "personal",
title: "婚姻家事",
description: "婚姻关系解除、财产分割、子女抚养、继承事务等家事纠纷的专业法律服务。"
},
{
icon: "fa-industry",
category: "corporate",
title: "建筑地产",
description: "工程招投标、施工合同、工程款追索、工程质量等建设工程领域的专项法律服务。"
},
{
icon: "fa-medal",
category: "litigation",
title: "劳动争议",
description: "处理劳动合同纠纷、工伤赔偿、经济补偿等各类劳动争议案件，维护当事人合法权益。"
},
{
icon: "fa-trademark",
category: "corporate",
title: "知识产权",
description: "专利、商标、著作权、商业秘密等知识产权的申请、保护及侵权纠纷处理的全链条服务。"
}
];
// 分页配置
const itemsPerPage = 6;
let currentPage = 1;
let currentCategory = 'all';
// DOM元素
const container = document.getElementById('practice-areas-container');
const pageNumbersEl = document.getElementById('page-numbers');
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');
const filterBtns = document.querySelectorAll('.filter-btn');
const template = document.getElementById('practice-card-template');
// 渲染业务领域卡片
function renderPractices() {
container.innerHTML = '';
// 过滤当前类别的业务领域
let filtered = currentCategory === 'all'
? practiceAreas
: practiceAreas.filter(p => p.category === currentCategory);
// 计算总页数
const totalPages = Math.ceil(filtered.length / itemsPerPage);
// 禁用/启用分页按钮
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
// 生成页码
pageNumbersEl.innerHTML = '';
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, startPage + 4);
for (let i = startPage; i <= endPage; i++) {
const pageBtn = document.createElement('button');
pageBtn.className = `px-3 py-2 border-t border-b border-gray-300 ${i === currentPage ? 'bg-amber-700 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`;
pageBtn.textContent = i;
pageBtn.addEventListener('click', () => {
currentPage = i;
renderPractices();
});
pageNumbersEl.appendChild(pageBtn);
}
// 获取当前页的数据
const start = (currentPage - 1) * itemsPerPage;
const end = start + itemsPerPage;
const paginatedItems = filtered.slice(start, end);
// 渲染卡片
paginatedItems.forEach(practice => {
const card = template.content.cloneNode(true);
const cardDiv = card.querySelector('.practice-card');
const icon = card.querySelector('.fa');
const title = card.querySelector('h3');
const desc = card.querySelector('p');
cardDiv.setAttribute('data-category', practice.category);
icon.className = 'fa ' + practice.icon;
title.textContent = practice.title;
desc.textContent = practice.description;
container.appendChild(card);
});
}
// 初始化页面
renderPractices();
// 分页按钮事件
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderPractices();
}
});
nextBtn.addEventListener('click', () => {
const filtered = currentCategory === 'all'
? practiceAreas
: practiceAreas.filter(p => p.category === currentCategory);
const totalPages = Math.ceil(filtered.length / itemsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderPractices();
}
});
// 筛选按钮事件
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => {
b.classList.remove('bg-amber-700', 'text-white');
b.classList.add('bg-white', 'text-gray-700');
});
btn.classList.remove('bg-white', 'text-gray-700');
btn.classList.add('bg-amber-700', 'text-white');
currentCategory = btn.dataset.category;
currentPage = 1;
renderPractices();
});
});
</script>
<!-- About Section -->
<!-- <section class="bg-gray-100 py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Law firm meeting" class="rounded-lg shadow-lg w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">About Advocate & Partners</h2>
<p class="text-gray-600 mb-4">Founded in 1987, Advocate & Partners has grown to become one of the most respected law firms in the region, known for our commitment to excellence, integrity, and client-focused service.</p>
<p class="text-gray-600 mb-6">Our team of experienced attorneys works collaboratively to provide comprehensive legal solutions tailored to each client's unique needs and circumstances.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Proven Track Record</h4>
<p class="text-gray-600 text-sm">Over three decades of successful case outcomes</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Client-Centered Approach</h4>
<p class="text-gray-600 text-sm">Personalized attention for every client</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Ethical Standards</h4>
<p class="text-gray-600 text-sm">Highest professional ethics and integrity</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Experienced Team</h4>
<p class="text-gray-600 text-sm">Recognized experts in multiple legal fields</p>
</div>
</div>
</div>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-8 py-3 rounded-lg transition duration-300 shadow-lg font-semibold">Our Story</button>
</div>
</div>
</div>
</section> -->
<!-- Testimonials -->
<!-- <section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">What Our Clients Say</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Don't just take our word for it - here's what our clients have to say about their experiences with our firm.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> -->
<!-- Testimonial 1 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"Advocate & Partners handled my complex corporate litigation with exceptional professionalism. Their attention to detail and strategic approach resulted in a favorable outcome that exceeded my expectations."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
<p class="text-gray-600 text-sm">CEO, TechCorp</p>
</div>
</div>
</div> -->
<!-- Testimonial 2 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"During my divorce, I was an emotional wreck. My attorney was not only legally brilliant but also provided the emotional support I needed during this difficult time. I couldn't have asked for better representation."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Michael Chen</h4>
<p class="text-gray-600 text-sm">Financial Advisor</p>
</div>
</div>
</div> -->
<!-- Testimonial 3 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"When our family faced a serious personal injury situation, Advocate & Partners fought tirelessly for us. They secured a settlement that ensured my mother's medical care would be covered for life. Truly life-changing."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patricia Williams" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Patricia Williams</h4>
<p class="text-gray-600 text-sm">Nurse</p>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Call to Action -->
<!-- <section class="bg-amber-700 py-16">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Get Started?</h2>
<p class="text-xl max-w-3xl mx-auto mb-8">Schedule your free initial consultation today and let us help you navigate your legal challenges with confidence.</p>
<button class="bg-white hover:bg-gray-100 text-amber-700 px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg font-semibold">Contact Us Now <i class="fas fa-arrow-right ml-2"></i></button>
</div>
</section> -->
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-5 gap-12">
<div>
<div class="flex items-center mb-6">
<i class="fas fa-balance-scale text-3xl text-amber-700 mr-2"></i>
<h3 class="text-2xl font-bold">Advocate<span class="text-amber-700">&</span>Partners</h3>
</div>
<p class="text-gray-400 mb-4">Providing exceptional legal services with integrity, expertise, and personalized attention since 1987.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Practice Areas</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Our Attorneys</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Practice Areas</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Criminal Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Family Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Corporate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Personal Injury</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Real Estate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Intellectual Property</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Contact Us</h4>
<address class="text-gray-400 not-italic">
<div class="flex items-start mb-4">
<i class="fas fa-map-marker-alt mt-1 mr-3 text-amber-700"></i>
<p>123 Legal Street<br>Suite 300<br>New York, NY 10001</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-phone-alt mr-3 text-amber-700"></i>
<p>(212) 555-1234</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-envelope mr-3 text-amber-700"></i>
<p>contact@advocateandpartners.com</p>
</div>
<div class="flex items-center">
<i class="fas fa-clock mr-3 text-amber-700"></i>
<p>Mon-Fri: 9:00 AM - 6:00 PM</p>
</div>
</address>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2023 Advocate & Partners. All Rights Reserved. | <a href="#" class="hover:text-amber-700">Privacy Policy</a> | <a href="#" class="hover:text-amber-700">Terms of Service</a></p>
<p class="mt-2 text-sm">Attorney Advertising. Prior results do not guarantee similar outcomes.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// News tab functionality
document.addEventListener('DOMContentLoaded', function() {
const tabBtns = document.querySelectorAll('.tab-btn');
const newsItems = document.querySelectorAll('[data-tab]');
tabBtns.forEach(btn => {
btn.addEventListener('click', function() {
// Update active tab style
tabBtns.forEach(b => {
b.classList.remove('bg-red-600', 'text-white');
b.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
});
this.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
this.classList.add('bg-red-600', 'text-white');
// Filter news items
const tab = this.getAttribute('data-tab');
newsItems.forEach(item => {
if (tab === 'all' || item.getAttribute('data-tab') === tab) {
item.style.display = 'block';
} else {
// item.style.display = 'none';
}
});
});
});
// Initialize - show all news initially
newsItems.forEach(item => {
item.style.display = 'flex'; // Changed to flex for horizontal scrolling
});
});
// Mobile menu toggle and dropdown functionality
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Mobile dropdown toggle
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const dropdown = this.parentElement.nextElementSibling;
this.classList.toggle('rotate-180');
dropdown.classList.toggle('hidden');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add shadow to header on scroll
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-lg');
} else {
header.classList.remove('shadow-lg');
}
});
// Animation for practice area cards when they come into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
const practiceCards = document.querySelectorAll('.practice-card');
practiceCards.forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>

BIN
WebResources/templates/default_v3/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
WebResources/templates/default_v3/img/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

948
WebResources/templates/default_v3/index.html Normal file
View File

@ -0,0 +1,948 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{dreamer-cms:global name="title" /}</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">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
/* Custom CSS for elements that need more styling than Tailwind provides */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
.practice-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Animation for the consultation button */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-button {
animation: pulse 2s infinite;
}
/*
.nav-link:hover::after {
width: 100%;
}
*/
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #c7951c;
transition: width .3s;
}
/* Dropdown transition */
.group:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
/* Mobile dropdown arrow rotation */
.rotate-180 {
transform: rotate(180deg);
}
.hidden { display: none; }
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
}
.button-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 12px 24px;
border: none;
border-radius: 6px;
background: #409eff;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
button.active {
background: #67c23a;
box-shadow: 0 0 8px rgba(103, 194, 58, 0.3);
}
.content-box {
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
border: 1px solid #eee;
}
</style>
</head>
<body class="font-sans">
<!-- Top Announcement Bar -->
<div class="bg-blue-900 text-white text-center py-2 px-4">
<p class="text-sm md:text-base" style="text-align: left;">当前时间 <a href="#" id="datetime" class="font-semibold underline ml-2"></a></p>
</div>
<!-- Header/Navigation -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img alt="华臻会计师事务所" src="{dreamer-cms:template /}\img\logo.png">
<h1 class="text-2xl font-bold text-gray-800">华臻会计师事务所</h1>
</div>
<nav class="hidden md:flex items-center space-x-8">
<div class="relative">
<input type="text" placeholder="搜索..." class="border border-gray-300 rounded-full py-2 px-4 w-48 focus:outline-none focus:ring-2 focus:ring-amber-500">
<button class="absolute right-3 top-2 text-gray-400 hover:text-amber-700">
<i class="fas fa-search"></i>
</button>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
首页
</a>
</div>
{dreamer-cms:categoryartlist length="10"}
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
[field:typenamecn /]
{dreamer-cms:if test="('true' eq [field:haschildren/])"}
<i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
{/dreamer-cms:if}
</a>
{dreamer-cms:if test="('true' eq [field:haschildren/])"}
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
{dreamer-cms:channel}
<a href="[field:typeurl /]" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">[field:typenamecn /]</a>
{/dreamer-cms:channel}
<!-- <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">事务所简介</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">发展历程</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">荣誉资质</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">办公环境</a> -->
</div>
{/dreamer-cms:if}
</div>
{/dreamer-cms:categoryartlist}
<!-- <div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
关于我们 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">事务所简介</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">发展历程</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">荣誉资质</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">办公环境</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
业务领域 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-56 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">刑事辩护</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">婚姻家事</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">公司法务</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">人身损害</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
合作伙伴 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">专业团队</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">合伙人</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">执业律师</a>
</div> -->
<!-- </div> -->
<!--
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
新闻动态 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">专业团队</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">合伙人</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">执业律师</a>
</div>
</div> -->
<!-- <div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
联系我们
</a> -->
<!-- <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">专业团队</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">合伙人</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">执业律师</a>
</div> -->
<!-- </div> <button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300 shadow-lg">免费咨询</button> -->
</nav>
<button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4">
<div class="flex flex-col space-y-4">
<div class="relative mb-4">
<input type="text" placeholder="搜索..." class="border border-gray-300 rounded-full py-2 px-4 w-full focus:outline-none focus:ring-2 focus:ring-amber-500">
<button class="absolute right-3 top-2 text-gray-400 hover:text-amber-700">
<i class="fas fa-search"></i>
</button>
</div>
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">主页</a>
{dreamer-cms:categoryartlist length="10"}
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
[field:typenamecn /]
{dreamer-cms:if test="('true' eq [field:haschildren/])"}
<i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
{/dreamer-cms:if}
</a>
{dreamer-cms:if test="('true' eq [field:haschildren/])"}
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
{dreamer-cms:channel}
<a href="#" class="block text-gray-700 hover:text-amber-700">[field:typenamecn /]</a>
{/dreamer-cms:channel}
<!-- <a href="#" class="block text-gray-700 hover:text-amber-700">Family Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Corporate Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Personal Injury</a> -->
</div>
{/dreamer-cms:if}
</div>
{/dreamer-cms:categoryartlist}
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Practice Areas <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Criminal Defense</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Family Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Corporate Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Personal Injury</a>
</div>
</div>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Attorneys <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Our Team</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Partners</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Associates</a>
</div>
</div>
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">Contact</a>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300">联系我们</button>
</div>
</div>
</div>
</header>
<!-- Banner Carousel -->
<div class="swiper-container relative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" class="w-full h-[500px] object-cover" alt="专业财税咨询服务">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">专业财税咨询服务</h1>
<p class="text-xl mb-8">为您提供全方位的解决方案</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded">立即咨询</button>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e" class="w-full h-[500px] object-cover" alt="企业法律服务">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">企业法律顾问服务</h1>
<p class="text-xl mb-8">助力企业合规经营，防范法律风险</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded">了解详情</button>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-button-next text-white"></div>
<div class="swiper-button-prev text-white"></div>
</div>
<!-- <div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">专业可信的<br> 律师服务</h1>
<p class="text-xl md:text-2xl max-w-4xl mx-auto mb-8">我们的资深律师团队致力于提供专业定制化的法律解决方案。</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-amber-700 hover:bg-amber-800 text-white px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg pulse-button font-semibold">预约咨询</button>
<button class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white px-8 py-4 text-lg rounded-lg transition duration-300 font-semibold">了解更多</button>
</div>
</div> -->
</section>
<!-- News Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold">新闻公告</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mt-3"></div>
</div>
<!-- News Tabs -->
<div class="flex justify-center mb-8 overflow-x-auto">
<div class="button-group">
<!-- <button class="tab-btn px-4 py-2 rounded-full bg-blue-600 text-white font-medium whitespace-nowrap" data-tab="all">全部新闻</button> -->
<button data-target="div1" onclick="toggleContent('div1')" class="tab-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium whitespace-nowrap" >财税新闻</button>
<button data-target="div2" onclick="toggleContent('div2')" class="tab-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium whitespace-nowrap" >活动讲座</button>
<!-- <button class="tab-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium whitespace-nowrap" data-tab="community">公益服务</button> -->
<!-- <button class="tab-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium whitespace-nowrap" data-tab="updates">法律动态</button> -->
</div>
</div>
<!-- Horizontal Scrollable News -->
<div id="div1" class="pb-6 overflow-x-auto">
<div class="flex space-4 w-max gap-6 pb-4 h-[420px]">
<!-- News Item 1 (Awards) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="awards">
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-06-15</span>
<h3 class="text-xl font-semibold my-2">hangye1</h3>
<p class="text-gray-600 mb-4">本所以卓越的服务和专业的团队获得客户一致好评...</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 2 (Events) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="events">
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-05-28</span>
<h3 class="text-xl font-semibold my-2">xinwen1</h3>
<p class="text-gray-600 mb-4">新 </p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 3 (Community) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="community">
<img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-05-10</span>
<h3 class="text-xl font-semibold my-2">xinwen2</h3>
<p class="text-gray-600 mb-4">aasa</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 4 (Updates) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="updates">
<img src="https://images.unsplash.com/photo-1606326608606-aa0b62935f2b" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-04-22</span>
<h3 class="text-xl font-semibold my-2">xinwen3</h3>
<p class="text-gray-600 mb-4">...</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 5 (Awards) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="awards">
<img src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-03-18</span>
<h3 class="text-xl font-semibold my-2">xinw3</h3>
<p class="text-gray-600 mb-4">...</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Horizontal Scrollable News -->
<div id="news2" class="pb-6 overflow-x-auto">
<div class="flex space-4 w-max gap-6 pb-4 h-[420px]">
<!-- News Item 1 (Awards) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="awards">
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-06-15</span>
<h3 class="text-xl font-semibold my-2">gongsi11</h3>
<p class="text-gray-600 mb-4">本所以卓越的服务和专业的团队获得客户一致好评...</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 2 (Events) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="events">
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-05-28</span>
<h3 class="text-xl font-semibold my-2">xinwen1</h3>
<p class="text-gray-600 mb-4">新 </p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 3 (Community) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="community">
<img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-05-10</span>
<h3 class="text-xl font-semibold my-2">xinwen2</h3>
<p class="text-gray-600 mb-4">aasa</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 4 (Updates) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="updates">
<img src="https://images.unsplash.com/photo-1606326608606-aa0b62935f2b" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-04-22</span>
<h3 class="text-xl font-semibold my-2">xinwen3</h3>
<p class="text-gray-600 mb-4">...</p>
<a href="#" class="text-red-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- News Item 5 (Awards) -->
<div class="w-72 flex-shrink-0 border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition" data-tab="awards">
<img src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a" class="w-full h-48 object-cover" alt="新闻图片">
<div class="p-6">
<span class="text-sm text-gray-500">2023-03-18</span>
<h3 class="text-xl font-semibold my-2">xinw3</h3>
<p class="text-gray-600 mb-4">...</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 rounded transition">更多公告</a>
</div>
</div>
</section>
<!-- Statistics Section -->
<!-- Partners Section -->
<section class="py-12 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold">合作伙伴</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mt-3"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业1" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业2" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业3" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业4" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业5" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业6" alt="合作伙伴" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
<img src="https://via.placeholder.com/150x80?text=企业6" alt="合作伙伴" class="h-12 object-contain">
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 rounded transition">查看更多</a>
</div>
</div>
</section>
<!-- Practice Areas -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">业务领域</h2>
<div class="w-24 h-1 bg-red-700 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">业务领域</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{dreamer-cms:channel typeid="eb286fer" length="9" showall="true" type="son"}
<!-- Practice Area Card 1 -->
<div class="practice-card bg-white p-8 rounded-lg shadow-md transition duration-300">
<div class="text-blue-700 text-4xl mb-4">
<i class="fas fa-gavel"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">[field:typenamecn /]</h3>
<p class="text-gray-600 mb-4">提供[field:typenamecn /]</p>
<a href="[field:typeurl/]" class="text-blue-700 font-semibold flex items-center">
查看更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
{/dreamer-cms:channel}
</div>
</div>
</section>
<!-- About Section -->
<section class="bg-gray-100 py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Law firm meeting" class="rounded-lg shadow-lg w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">关于我们</h2>
<p class="text-gray-600 mb-4">山东华臻会计师事务所(普通合伙)，2005年经山东省财政部批准设立，是一家在区域内颇具影响力的提供财税及鉴证服务的专业机构。自成立以来，集团公司始终秉持规范执业、稳健经营的理念，坚持诚信独立客观公正的原则，秉承立足本土、面向国际的视野，坚持以客户潜在和现实需求为导向，不断开拓并创新高端智力服务产品，保持在行业内的领先地位，最大限度地提升客户的价值。</p>
<!-- <p class="text-gray-600 mb-6">Our team of experienced attorneys works collaboratively to provide comprehensive legal solutions tailored to each client's unique needs and circumstances.</p>-->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
<div class="flex items-start">
<div class="bg-blue-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">企业文化</h4>
<p class="text-gray-600 text-sm">以人为本，团结协作。
抖搏创新，回馈社会。</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">经营理念</h4>
<p class="text-gray-600 text-sm">用户为先，信誉至上。
高效务实，共课发展。</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">服务宗旨</h4>
<p class="text-gray-600 text-sm">客户的需求就是我们努力的方向。
客户的满意就是我们奋斗的目标。</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">发展目标</h4>
<p class="text-gray-600 text-sm">打造客户信赖的、具有专业价值的优质咨询服务机构，努力成为客户的最佳选择。</p>
</div>
</div>
</div>
<a href="/cover-9305qsp7/shiwusuojianjie"> <button class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-lg transition duration-300 shadow-lg font-semibold">查看更多</button></a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<!-- <section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">What Our Clients Say</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Don't just take our word for it - here's what our clients have to say about their experiences with our firm.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> -->
<!-- Testimonial 1 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"Advocate & Partners handled my complex corporate litigation with exceptional professionalism. Their attention to detail and strategic approach resulted in a favorable outcome that exceeded my expectations."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
<p class="text-gray-600 text-sm">CEO, TechCorp</p>
</div>
</div>
</div> -->
<!-- Testimonial 2 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"During my divorce, I was an emotional wreck. My attorney was not only legally brilliant but also provided the emotional support I needed during this difficult time. I couldn't have asked for better representation."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Michael Chen</h4>
<p class="text-gray-600 text-sm">Financial Advisor</p>
</div>
</div>
</div> -->
<!-- Testimonial 3 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"When our family faced a serious personal injury situation, Advocate & Partners fought tirelessly for us. They secured a settlement that ensured my mother's medical care would be covered for life. Truly life-changing."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patricia Williams" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Patricia Williams</h4>
<p class="text-gray-600 text-sm">Nurse</p>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Call to Action -->
<section class="bg-gray-500 py-16">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-4">有相关问题或需求？与我们取得联系</h2>
<p class="text-xl max-w-3xl mx-auto mb-8">我们会尽快回复您的咨询，帮助您找到最佳解决方案。我们将提供专业、高效的支持，确保您的权益得到保障。</p>
<button class="bg-white hover:bg-gray-100 text-amber-700 px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg font-semibold">联系我们 <i class="fas fa-arrow-right ml-2"></i></button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4" style="margin: 0 auto">
<div class="grid grid-cols-1 md:grid-cols-5 gap-12">
<!-- <div>
<div class="flex items-center mb-6">
<i class="fas fa-balance-scale text-3xl text-amber-700 mr-2"></i>
<h3 class="text-2xl font-bold">Advocate<span class="text-amber-700">&</span>Partners</h3>
</div>
<p class="text-gray-400 mb-4">Providing exceptional legal services with integrity, expertise, and personalized attention since 1987.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-instagram"></i></a>
</div>
</div> -->
<div>
<h4 class="text-lg font-semibold mb-6">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Practice Areas</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Our Attorneys</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Practice Areas</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Criminal Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Family Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Corporate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Personal Injury</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Real Estate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Intellectual Property</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Contact Us</h4>
<address class="text-gray-400 not-italic">
<div class="flex items-start mb-4">
<i class="fas fa-map-marker-alt mt-1 mr-3 text-amber-700"></i>
<p>123 Legal Street<br>Suite 300<br>New York, NY 10001</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-phone-alt mr-3 text-amber-700"></i>
<p>(212) 555-1234</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-envelope mr-3 text-amber-700"></i>
<p>contact@advocateandpartners.com</p>
</div>
<div class="flex items-center">
<i class="fas fa-clock mr-3 text-amber-700"></i>
<p>Mon-Fri: 9:00 AM - 6:00 PM</p>
</div>
</address>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2023 Advocate & Partners. All Rights Reserved. | <a href="#" class="hover:text-amber-700">Privacy Policy</a> | <a href="#" class="hover:text-amber-700">Terms of Service</a></p>
<p class="mt-2 text-sm">Attorney Advertising. Prior results do not guarantee similar outcomes.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// News tab functionality
// document.addEventListener('DOMContentLoaded', function() {
// const tabBtns = document.querySelectorAll('.tab-btn');
// const newsItems = document.querySelectorAll('[data-tab]');
// tabBtns.forEach(btn => {
// btn.addEventListener('click', function() {
// // Update active tab style
// tabBtns.forEach(b => {
// b.classList.remove('bg-blue-600', 'text-white');
// b.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
// });
// this.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
// this.classList.add('bg-blue-600', 'text-white');
// // Filter news items
// const tab = this.getAttribute('data-tab');
// newsItems.forEach(item => {
// if (tab === 'awards' || item.getAttribute('data-tab') === tab) {
// item.style.display = 'block';
// } else {
// // item.style.display = 'none';
// }
// });
// });
// });
// // Initialize - show all news initially
// newsItems.forEach(item => {
// item.style.display = 'flex'; // Changed to flex for horizontal scrolling
// });
// });
// Mobile menu toggle and dropdown functionality
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Mobile dropdown toggle
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const dropdown = this.parentElement.nextElementSibling;
this.classList.toggle('rotate-180');
dropdown.classList.toggle('hidden');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add shadow to header on scroll
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-lg');
} else {
header.classList.remove('shadow-lg');
}
});
// Animation for practice area cards when they come into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
const practiceCards = document.querySelectorAll('.practice-card');
practiceCards.forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
const datetimeElement = document.getElementById('datetime');
// 页面加载时初始化
window.addEventListener('DOMContentLoaded', function() {
// 触发按钮1的点击事件
document.getElementById('btn1').click();
});
function toggleContent(targetId) {
// 获取所有按钮和内容区域
const buttons = document.querySelectorAll('.button-group button');
const contents = document.querySelectorAll('div[id^="div"]');
// 重置所有按钮状态
buttons.forEach(btn => {
btn.classList.remove('active');
});
// 显示所有内容区域（后续再隐藏不需要的）
contents.forEach(content => {
content.style.display = 'block';
});
// 激活当前按钮
event.target.classList.add('active');
// 隐藏非目标内容
contents.forEach(content => {
if (content.id !== targetId) {
content.style.display = 'none';
}
});
}
function updateDateTime() {
const now = new Date();
// 手动格式化（推荐）：
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
const weekDay = weekDays[now.getDay()];
// 组合日期时间（格式：YYYY年MM月DD日 HH:MM:SS）
datetimeElement.textContent =
year+"年"+month+"月"+day+"日"+ hours+":"+minutes+":"+seconds+" "+"星期"+weekDay;
/* 自动本地化版本（根据系统设置显示）：
datetimeElement.textContent =
now.toLocaleDateString('zh-CN') + ' ' +
now.toLocaleTimeString();
*/
}
// 初始加载
updateDateTime();
// 每秒更新
setInterval(updateDateTime, 1000);
</script>
</body>
</html>

890
WebResources/templates/default_v3/info.html Normal file
View File

@ -0,0 +1,890 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{dreamer-cms:global name="title" /}</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">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
/* Custom CSS for elements that need more styling than Tailwind provides */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
.practice-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Animation for the consultation button */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-button {
animation: pulse 2s infinite;
}
/*
.nav-link:hover::after {
width: 100%;
}
*/
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #c7951c;
transition: width .3s;
}
/* Dropdown transition */
.group:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
/* Mobile dropdown arrow rotation */
.rotate-180 {
transform: rotate(180deg);
}
</style>
</head>
<body class="font-sans">
<!-- Header/Navigation -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-balance-scale text-3xl text-amber-700 mr-2"></i>
<h1 class="text-2xl font-bold text-gray-800">Advocate<span class="text-amber-700">&</span>Partners</h1>
</div>
<nav class="hidden md:flex items-center space-x-8">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700">首页</a>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
关于我们 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">事务所简介</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">发展历程</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">核心价值观</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">加入我们</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
业务领域 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-56 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">刑事辩护</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">婚姻家事</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">公司法务</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">人身损害</a>
</div>
</div>
<div class="relative group">
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700 flex items-center">
律师团队 <i class="fas fa-chevron-down ml-1 text-xs mt-1 transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-50">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">专业团队</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">合伙人</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-amber-50">执业律师</a>
</div>
</div>
<a href="#" class="nav-link text-gray-800 font-medium hover:text-amber-700">联系我们</a>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300 shadow-lg">免费咨询</button>
</nav>
<button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4">
<div class="flex flex-col space-y-4">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">Home</a>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
About <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Our Firm</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">History</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Values</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Careers</a>
</div>
</div>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Practice Areas <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Criminal Defense</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Family Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Corporate Law</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Personal Injury</a>
</div>
</div>
<div class="relative">
<a href="#" class="text-gray-800 font-medium hover:text-amber-700 flex items-center justify-between">
Attorneys <i class="fas fa-chevron-down text-xs mt-1 dropdown-toggle"></i>
</a>
<div class="dropdown-mobile hidden ml-4 mt-2 space-y-2">
<a href="#" class="block text-gray-700 hover:text-amber-700">Our Team</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Partners</a>
<a href="#" class="block text-gray-700 hover:text-amber-700">Associates</a>
</div>
</div>
<a href="#" class="text-gray-800 font-medium hover:text-amber-700">Contact</a>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-6 py-2 rounded-lg transition duration-300">Free Consultation</button>
</div>
</div>
</div>
</header>
<!-- Banner Carousel -->
<div class="swiper-container relative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb" class="w-full h-[500px] object-cover" alt="法律咨询">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">专业法律咨询服务</h1>
<p class="text-xl mb-8">为您提供全方位的法律解决方案</p>
<button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded">立即咨询</button>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1587202372775-e229f1725510" class="w-full h-[500px] object-cover" alt="企业法律服务">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div class="text-center text-white px-4">
<h1 class="text-4xl md:text-5xl font-bold mb-4">企业法律顾问服务</h1>
<p class="text-xl mb-8">助力企业合规经营，防范法律风险</p>
<button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded">了解详情</button>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-button-next text-white"></div>
<div class="swiper-button-prev text-white"></div>
</div>
<!-- <div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">专业可信的<br> 律师服务</h1>
<p class="text-xl md:text-2xl max-w-4xl mx-auto mb-8">我们的资深律师团队致力于提供专业定制化的法律解决方案。</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-amber-700 hover:bg-amber-800 text-white px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg pulse-button font-semibold">预约咨询</button>
<button class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white px-8 py-4 text-lg rounded-lg transition duration-300 font-semibold">了解更多</button>
</div>
</div> -->
</section>
<!-- 企业简介 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800">关于我们</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto mt-3"></div>
</div>
<div class="flex flex-col lg:flex-row items-center mb-16">
<!-- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978" alt="公司办公环境" class="rounded-lg shadow-lg w-full">
</div> -->
<div class="lg:w-1/2">
<h3 class="text-2xl font-bold text-gray-800 mb-4">公司简介</h3>
<p class="text-gray-600 mb-6">先锋律师事务所成立于1995年，是一家专注于企业法律服务的综合性律师事务所。经过20余年的发展，我们已成长为国内领先的法律服务机构，拥有分布于北京、上海、深圳、广州等主要城市的10家分所。</p>
<p class="text-gray-600 mb-6">我们秉承"专业、诚信、创新、共赢"的核心价值观，致力于为客户提供全方位的法律解决方案。事务所现有合伙人25名，执业律师及专业人员超过200人，构成了国内一流的法律专业团队。</p>
<div class="bg-gray-50 p-6 rounded-lg">
<div class="flex items-start">
<div class="bg-amber-700 text-white p-2 rounded-full mr-4 mt-1">
<i class="fas fa-bullseye"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-2">使命与愿景</h4>
<p class="text-gray-600">成为客户最信赖的法律伙伴，以专业智慧创造价值，推动商业与法律环境的完善。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心数据 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
<div class="bg-amber-700 text-white p-8 rounded-lg text-center">
<span class="block text-4xl font-bold mb-2">25+</span>
<span class="text-xl">合伙人</span>
</div>
<div class="bg-gray-100 p-8 rounded-lg text-center">
<span class="block text-4xl font-bold text-amber-700 mb-2">200+</span>
<span class="text-xl text-gray-700">专业律师</span>
</div>
<div class="bg-gray-100 p-8 rounded-lg text-center">
<span class="block text-4xl font-bold text-amber-700 mb-2">10</span>
<span class="text-xl text-gray-700">分支机构</span>
</div>
</div>
<!-- 发展历程 -->
<div class="mb-20">
<h3 class="text-2xl font-bold text-gray-800 text-center mb-12">发展历程</h3>
<div class="timeline relative max-w-3xl mx-auto">
<!-- 1995 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">1995</span>
<h4 class="font-bold text-gray-800 my-2">事务所创立</h4>
<p class="text-gray-600">在北京创立先锋律师事务所，首批十人团队</p>
</div>
</div>
<!-- 2002 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2002</span>
<h4 class="font-bold text-gray-800 my-2">上海分所成立</h4>
<p class="text-gray-600">设立第一家分公司，开启全国化布局</p>
</div>
</div>
<!-- 2010 -->
<div class="timeline-item relative pl-16 pb-10 before:content-[''] before:absolute before:left-6 before:top-2 before:h-full before:w-1 before:bg-gray-200 after:content-[''] after:absolute after:left-4 after:top-1 after:w-5 after:h-5 after:bg-amber-700 after:rounded-full">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2010</span>
<h4 class="font-bold text-gray-800 my-2">首获全国十佳律所</h4>
<p class="text-gray-600">在《中国法律评论》评选中首次获得十佳称号</p>
</div>
</div>
<!-- 2020 -->
<div class="timeline-item relative pl-16">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<span class="text-amber-700 font-semibold">2020</span>
<h4 class="font-bold text-gray-800 my-2">国际化战略启动</h4>
<p class="text-gray-600">与英国、德国等国际顶尖律所建立战略合作关系</p>
</div>
</div>
</div>
</div>
<!-- 核心价值观 -->
<div class="">
<h3 class="text-2xl font-bold text-gray-800 text-center mb-12">核心价值观</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-gem"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">专业</h4>
<p class="text-gray-600">以精湛的法律技艺和全面的知识体系，为客户提供最专业的法律解决方案</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-handshake"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">诚信</h4>
<p class="text-gray-600">坚持最高标准的职业道德，以诚实守信为本，维护客户合法权益</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition">
<div class="text-amber-700 text-3xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h4 class="font-bold text-gray-800 text-xl mb-2">创新</h4>
<p class="text-gray-600">不断探索创新法律服务模式，适应数字化时代的法律需求变化</p>
</div>
</div>
</div>
</div>
</section>
<!-- 业务领域分页 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800">业务领域</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto mt-3"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">根据客户的不同需求，我们提供多元化的专业法律服务领域</p>
</div>
<!-- 领域筛选 -->
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm">
<button type="button" class="filter-btn px-4 py-2 rounded-l-lg bg-amber-700 text-white font-medium" data-category="all">全部领域</button>
<button type="button" class="filter-btn px-4 py-2 bg-white text-gray-700 font-medium" data-category="litigation">诉讼争议</button>
<button type="button" class="filter-btn px-4 py-2 bg-white text-gray-700 font-medium" data-category="corporate">公司商务</button>
<button type="button" class="filter-btn px-4 py-2 rounded-r-lg bg-white text-gray-700 font-medium" data-category="personal">个人事务</button>
</div>
</div>
<!-- 业务领域卡片展示 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12" id="practice-areas-container">
<!-- 卡片将通过JavaScript动态加载 -->
</div>
<!-- 分页导航 -->
<div class="flex justify-center mt-8">
<nav class="inline-flex rounded-md shadow">
<button id="prev-page" class="px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i class="fas fa-chevron-left"></i>
</button>
<div class="flex" id="page-numbers">
<!-- 页码将通过JavaScript动态生成 -->
</div>
<button id="next-page" class="px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</section>
<!-- 业务领域数据模板 (用于JavaScript渲染) -->
<template id="practice-card-template">
<div class="practice-card bg-white p-6 rounded-lg shadow-md transition duration-300 hover:shadow-lg" data-category="">
<div class="text-amber-700 text-4xl mb-4">
<i class=""></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-800"></h3>
<p class="text-gray-600 mb-4"></p>
<a href="#" class="text-amber-700 font-semibold flex items-center">
了解详情 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</template>
<script>
// 业务领域数据
const practiceAreas = [
{
icon: "fa-gavel",
category: "litigation",
title: "刑事辩护",
description: "为各类刑事犯罪案件当事人提供专业辩护，包括侦查阶段的申诉和控告，审查起诉和审判阶段的辩护。"
},
{
icon: "fa-file-invoice-dollar",
category: "litigation",
title: "债务纠纷",
description: "处理各类债权债务纠纷，包括合同纠纷、侵权债务、不当得利等各类债权债务纠纷事务。"
},
{
icon: "fa-user-tie",
category: "corporate",
title: "公司法律顾问",
description: "为公司的设立、变更、运营管理、投融资等活动提供全方位法律支持，预防法律风险。"
},
{
icon: "fa-file-contract",
category: "corporate",
title: "商事合同",
description: "起草、审查、修改各类商业合同，提供合同谈判、履行指导、纠纷解决等一站式服务。"
},
{
icon: "fa-home",
category: "personal",
title: "房地产",
description: "房产买卖、产权确认、租房纠纷、产权调处等各类房地产法律问题的咨询和代理服务。"
},
{
icon: "fa-heart",
category: "personal",
title: "婚姻家事",
description: "婚姻关系解除、财产分割、子女抚养、继承事务等家事纠纷的专业法律服务。"
},
{
icon: "fa-industry",
category: "corporate",
title: "建筑地产",
description: "工程招投标、施工合同、工程款追索、工程质量等建设工程领域的专项法律服务。"
},
{
icon: "fa-medal",
category: "litigation",
title: "劳动争议",
description: "处理劳动合同纠纷、工伤赔偿、经济补偿等各类劳动争议案件，维护当事人合法权益。"
},
{
icon: "fa-trademark",
category: "corporate",
title: "知识产权",
description: "专利、商标、著作权、商业秘密等知识产权的申请、保护及侵权纠纷处理的全链条服务。"
}
];
// 分页配置
const itemsPerPage = 6;
let currentPage = 1;
let currentCategory = 'all';
// DOM元素
const container = document.getElementById('practice-areas-container');
const pageNumbersEl = document.getElementById('page-numbers');
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');
const filterBtns = document.querySelectorAll('.filter-btn');
const template = document.getElementById('practice-card-template');
// 渲染业务领域卡片
function renderPractices() {
container.innerHTML = '';
// 过滤当前类别的业务领域
let filtered = currentCategory === 'all'
? practiceAreas
: practiceAreas.filter(p => p.category === currentCategory);
// 计算总页数
const totalPages = Math.ceil(filtered.length / itemsPerPage);
// 禁用/启用分页按钮
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
// 生成页码
pageNumbersEl.innerHTML = '';
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, startPage + 4);
for (let i = startPage; i <= endPage; i++) {
const pageBtn = document.createElement('button');
pageBtn.className = `px-3 py-2 border-t border-b border-gray-300 ${i === currentPage ? 'bg-amber-700 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`;
pageBtn.textContent = i;
pageBtn.addEventListener('click', () => {
currentPage = i;
renderPractices();
});
pageNumbersEl.appendChild(pageBtn);
}
// 获取当前页的数据
const start = (currentPage - 1) * itemsPerPage;
const end = start + itemsPerPage;
const paginatedItems = filtered.slice(start, end);
// 渲染卡片
paginatedItems.forEach(practice => {
const card = template.content.cloneNode(true);
const cardDiv = card.querySelector('.practice-card');
const icon = card.querySelector('.fa');
const title = card.querySelector('h3');
const desc = card.querySelector('p');
cardDiv.setAttribute('data-category', practice.category);
icon.className = 'fa ' + practice.icon;
title.textContent = practice.title;
desc.textContent = practice.description;
container.appendChild(card);
});
}
// 初始化页面
renderPractices();
// 分页按钮事件
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderPractices();
}
});
nextBtn.addEventListener('click', () => {
const filtered = currentCategory === 'all'
? practiceAreas
: practiceAreas.filter(p => p.category === currentCategory);
const totalPages = Math.ceil(filtered.length / itemsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderPractices();
}
});
// 筛选按钮事件
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => {
b.classList.remove('bg-amber-700', 'text-white');
b.classList.add('bg-white', 'text-gray-700');
});
btn.classList.remove('bg-white', 'text-gray-700');
btn.classList.add('bg-amber-700', 'text-white');
currentCategory = btn.dataset.category;
currentPage = 1;
renderPractices();
});
});
</script>
<!-- About Section -->
<!-- <section class="bg-gray-100 py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Law firm meeting" class="rounded-lg shadow-lg w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">About Advocate & Partners</h2>
<p class="text-gray-600 mb-4">Founded in 1987, Advocate & Partners has grown to become one of the most respected law firms in the region, known for our commitment to excellence, integrity, and client-focused service.</p>
<p class="text-gray-600 mb-6">Our team of experienced attorneys works collaboratively to provide comprehensive legal solutions tailored to each client's unique needs and circumstances.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Proven Track Record</h4>
<p class="text-gray-600 text-sm">Over three decades of successful case outcomes</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Client-Centered Approach</h4>
<p class="text-gray-600 text-sm">Personalized attention for every client</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Ethical Standards</h4>
<p class="text-gray-600 text-sm">Highest professional ethics and integrity</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-700 text-white p-3 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-1">Experienced Team</h4>
<p class="text-gray-600 text-sm">Recognized experts in multiple legal fields</p>
</div>
</div>
</div>
<button class="bg-amber-700 hover:bg-amber-800 text-white px-8 py-3 rounded-lg transition duration-300 shadow-lg font-semibold">Our Story</button>
</div>
</div>
</div>
</section> -->
<!-- Testimonials -->
<!-- <section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">What Our Clients Say</h2>
<div class="w-24 h-1 bg-amber-700 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Don't just take our word for it - here's what our clients have to say about their experiences with our firm.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> -->
<!-- Testimonial 1 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"Advocate & Partners handled my complex corporate litigation with exceptional professionalism. Their attention to detail and strategic approach resulted in a favorable outcome that exceeded my expectations."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
<p class="text-gray-600 text-sm">CEO, TechCorp</p>
</div>
</div>
</div> -->
<!-- Testimonial 2 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"During my divorce, I was an emotional wreck. My attorney was not only legally brilliant but also provided the emotional support I needed during this difficult time. I couldn't have asked for better representation."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Michael Chen</h4>
<p class="text-gray-600 text-sm">Financial Advisor</p>
</div>
</div>
</div> -->
<!-- Testimonial 3 -->
<!-- <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-amber-700 text-3xl mr-2">
<i class="fas fa-quote-left"></i>
</div>
<div class="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>
<p class="text-gray-600 mb-6">"When our family faced a serious personal injury situation, Advocate & Partners fought tirelessly for us. They secured a settlement that ensured my mother's medical care would be covered for life. Truly life-changing."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patricia Williams" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Patricia Williams</h4>
<p class="text-gray-600 text-sm">Nurse</p>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Call to Action -->
<!-- <section class="bg-amber-700 py-16">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Get Started?</h2>
<p class="text-xl max-w-3xl mx-auto mb-8">Schedule your free initial consultation today and let us help you navigate your legal challenges with confidence.</p>
<button class="bg-white hover:bg-gray-100 text-amber-700 px-8 py-4 text-lg rounded-lg transition duration-300 shadow-lg font-semibold">Contact Us Now <i class="fas fa-arrow-right ml-2"></i></button>
</div>
</section> -->
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-5 gap-12">
<div>
<div class="flex items-center mb-6">
<i class="fas fa-balance-scale text-3xl text-amber-700 mr-2"></i>
<h3 class="text-2xl font-bold">Advocate<span class="text-amber-700">&</span>Partners</h3>
</div>
<p class="text-gray-400 mb-4">Providing exceptional legal services with integrity, expertise, and personalized attention since 1987.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Practice Areas</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Our Attorneys</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Practice Areas</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-amber-700">Criminal Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Family Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Corporate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Personal Injury</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Real Estate Law</a></li>
<li><a href="#" class="text-gray-400 hover:text-amber-700">Intellectual Property</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Contact Us</h4>
<address class="text-gray-400 not-italic">
<div class="flex items-start mb-4">
<i class="fas fa-map-marker-alt mt-1 mr-3 text-amber-700"></i>
<p>123 Legal Street<br>Suite 300<br>New York, NY 10001</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-phone-alt mr-3 text-amber-700"></i>
<p>(212) 555-1234</p>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-envelope mr-3 text-amber-700"></i>
<p>contact@advocateandpartners.com</p>
</div>
<div class="flex items-center">
<i class="fas fa-clock mr-3 text-amber-700"></i>
<p>Mon-Fri: 9:00 AM - 6:00 PM</p>
</div>
</address>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2023 Advocate & Partners. All Rights Reserved. | <a href="#" class="hover:text-amber-700">Privacy Policy</a> | <a href="#" class="hover:text-amber-700">Terms of Service</a></p>
<p class="mt-2 text-sm">Attorney Advertising. Prior results do not guarantee similar outcomes.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// News tab functionality
document.addEventListener('DOMContentLoaded', function() {
const tabBtns = document.querySelectorAll('.tab-btn');
const newsItems = document.querySelectorAll('[data-tab]');
tabBtns.forEach(btn => {
btn.addEventListener('click', function() {
// Update active tab style
tabBtns.forEach(b => {
b.classList.remove('bg-red-600', 'text-white');
b.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
});
this.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
this.classList.add('bg-red-600', 'text-white');
// Filter news items
const tab = this.getAttribute('data-tab');
newsItems.forEach(item => {
if (tab === 'all' || item.getAttribute('data-tab') === tab) {
item.style.display = 'block';
} else {
// item.style.display = 'none';
}
});
});
});
// Initialize - show all news initially
newsItems.forEach(item => {
item.style.display = 'flex'; // Changed to flex for horizontal scrolling
});
});
// Mobile menu toggle and dropdown functionality
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Mobile dropdown toggle
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const dropdown = this.parentElement.nextElementSibling;
this.classList.toggle('rotate-180');
dropdown.classList.toggle('hidden');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add shadow to header on scroll
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-lg');
} else {
header.classList.remove('shadow-lg');
}
});
// Animation for practice area cards when they come into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
const practiceCards = document.querySelectorAll('.practice-card');
practiceCards.forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>