838 lines
49 KiB
HTML
838 lines
49 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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">
|
||
<!-- 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="#contact" class="font-semibold underline ml-2">Schedule Now</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="flex space-x-2 md:space-x-4">
|
||
<button class="tab-btn px-4 py-2 rounded-full bg-blue-600 text-white font-medium whitespace-nowrap" data-tab="all">全部新闻</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="awards">财税新闻</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="events">活动讲座</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 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">本所荣获2023年度最佳所称号</h3>
|
||
<p class="text-gray-600 mb-4">在2023年度法律服务评选中，本所以卓越的服务和专业的团队获得客户一致好评...</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-1581093458171-2d137ff5fe60" 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">新劳动法专题讲座圆满举办</h3>
|
||
<p class="text-gray-600 mb-4">5月25日，我所劳动法律事务部成功举办"新劳动法解读与企业合规管理"专题讲座...</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">公益法律服务进社区活动启动</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 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">新公司法修订要点解析</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">王律师荣膺"年度十佳律师"称号</h3>
|
||
<p class="text-gray-600 mb-4">我所合伙人王律师因在知识产权领域的卓越贡献，获得2023年度十佳律师称号...</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">
|
||
<!-- 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">Criminal Defense</h3>
|
||
<p class="text-gray-600 mb-4">Protecting your rights when facing criminal charges with aggressive defense strategies tailored to your case.</p>
|
||
<a href="#" class="text-blue-700 font-semibold flex items-center">
|
||
查看更多 <i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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">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-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">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-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">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-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">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-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">Experienced Team</h4>
|
||
<p class="text-gray-600 text-sm">Recognized experts in multiple legal fields</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>
|
||
</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-blue-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" 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>© 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> |