890 lines
47 KiB
HTML
890 lines
47 KiB
HTML
<!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>© 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> |