File size: 24,008 Bytes
52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a 52d3f38 99b2c5a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services | Justice Law Partners</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.service-hero {
background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
min-height: 40vh;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white shadow-md">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold text-blue-900">Justice<span class="text-amber-600">Law</span></a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-blue-900 hover:text-amber-600 transition-colors">Home</a>
<a href="about.html" class="text-blue-900 hover:text-amber-600 transition-colors">About</a>
<a href="services.html" class="text-amber-600 font-semibold">Services</a>
<a href="contact.html" class="text-blue-900 hover:text-amber-600 transition-colors">Contact</a>
</div>
<button class="md:hidden text-blue-900">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="service-hero flex items-center justify-center pt-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6" data-aos="fade-up">
Our Services
</h1>
<p class="text-xl text-blue-100 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Comprehensive legal solutions tailored to meet your specific needs and achieve your goals.
</p>
</div>
</section>
<!-- Services Tabs -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up">
<button class="tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-blue-900 text-white" data-tab="corporate">
Corporate Law
</button>
<button class="tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-gray-200 text-blue-900 hover:bg-blue-900 hover:text-white" data-tab="realestate">
Real Estate
</button>
<button class="tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-gray-200 text-blue-900 hover:bg-blue-900 hover:text-white" data-tab="family">
Family Law
</button>
<button class="tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-gray-200 text-blue-900 hover:bg-blue-900 hover:text-white" data-tab="litigation">
Litigation
</button>
</div>
<!-- Corporate Law Tab -->
<div id="corporate" class="tab-content active" data-aos="fade-up">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-bold text-blue-900 mb-6">Corporate Law Services</h2>
<p class="text-lg text-gray-700 mb-6">
We provide comprehensive corporate legal services to businesses of all sizes. From startup formation to complex mergers and acquisitions, our experienced attorneys guide you through every step of your business journey.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Business Formation & Structure</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Contracts & Agreements</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Mergers & Acquisitions</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Corporate Governance</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Compliance & Regulatory Matters</span>
</div>
</div>
</div>
<div>
<img src="http://static.photos/office/640x360/1" alt="Corporate Law" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
<!-- Real Estate Tab -->
<div id="realestate" class="tab-content" data-aos="fade-up">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-bold text-blue-900 mb-6">Real Estate Services</h2>
<p class="text-lg text-gray-700 mb-6">
Our real estate practice covers all aspects of property law, from residential transactions to commercial development. We ensure your real estate investments are protected and your transactions proceed smoothly.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Residential & Commercial Transactions</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Leasing & Landlord-Tenant Matters</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Zoning & Land Use</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Real Estate Litigation</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Title Examination & Insurance</span>
</div>
</div>
</div>
<div>
<img src="http://static.photos/realestate/640x360/1" alt="Real Estate Law" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
<!-- Family Law Tab -->
<div id="family" class="tab-content" data-aos="fade-up">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-bold text-blue-900 mb-6">Family Law Services</h2>
<p class="text-lg text-gray-700 mb-6">
We provide compassionate and effective legal representation in family law matters. Our approach combines legal expertise with understanding and sensitivity to help you navigate difficult personal situations.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Divorce & Separation</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Child Custody & Support</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Adoption & Guardianship</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Prenuptial Agreements</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Domestic Violence Protection</span>
</div>
</div>
</div>
<div>
<img src="http://static.photos/family/640x360/1" alt="Family Law" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
<!-- Litigation Tab -->
<div id="litigation" class="tab-content" data-aos="fade-up">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-bold text-blue-900 mb-6">Litigation Services</h2>
<p class="text-lg text-gray-700 mb-6">
Our litigation team has extensive experience representing clients in courtrooms across the state. We are skilled trial attorneys who fight vigorously to protect our clients' rights and interests.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Civil Litigation</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Commercial Disputes</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Personal Injury Claims</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Appellate Practice</span>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
<i data-feather="check" class="text-white w-4 h-4"></i>
</div>
<span class="text-lg">Alternative Dispute Resolution</span>
</div>
</div>
</div>
<div>
<img src="http://static.photos/legal/640x360/2" alt="Litigation" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
</div>
</section>
<!-- Process Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Our Process</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Clear, transparent, and client-focused approach to legal representation
</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<div class="text-center" data-aos="fade-up">
<div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-3xl font-bold text-white">1</span>
</div>
<h3 class="text-xl font-bold text-blue-900 mb-4">Consultation</h3>
<p class="text-gray-600">We listen to understand your situation and provide initial guidance.</p>
</div>
<div class="text-center" data-aos="fade-up" data-aos-delay="200">
<div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-3xl font-bold text-white">2</span>
</div>
<h3 class="text-xl font-bold text-blue-900 mb-4">Strategy</h3>
<p class="text-gray-600">We develop a customized legal strategy tailored to your goals.</p>
</div>
<div class="text-center" data-aos="fade-up" data-aos-delay="400">
<div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-3xl font-bold text-white">3</span>
</div>
<h3 class="text-xl font-bold text-blue-900 mb-4">Execution</h3>
<p class="text-gray-600">We implement the strategy with precision and attention to detail.</p>
</div>
<div class="text-center" data-aos="fade-up" data-aos-delay="600">
<div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-3xl font-bold text-white">4</span>
</div>
<h3 class="text-xl font-bold text-blue-900 mb-4">Resolution</h3>
<p class="text-gray-600">We achieve the best possible outcome for your case.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-blue-900 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold mb-6" data-aos="fade-up">Start Your Legal Journey</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Contact us today to discuss how we can help you achieve your legal objectives.
</p>
<a href="index.html#contact" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-lg font-semibold transition-colors inline-block" data-aos="fade-up" data-aos-delay="400">
Schedule Consultation
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-blue-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-2xl font-bold mb-4">Justice<span class="text-amber-600">Law</span></h3>
<p class="text-gray-300">Providing exceptional legal services with integrity and excellence.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-300 hover:text-amber-600 transition-colors">Home</a></li>
<li><a href="about.html" class="text-gray-300 hover:text-amber-600 transition-colors">About</a></li>
<li><a href="services.html" class="text-amber-600">Services</a></li>
<li><a href="contact.html" class="text-gray-300 hover:text-amber-600 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact Info</h4>
<div class="space-y-2 text-gray-300">
<p>123 Legal Avenue</p>
<p>New York, NY 10001</p>
<p>info@justicelaw.com</p>
<p>(555) 123-4567</p>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
<i data-feather="facebook" class="w-6 h-6"></i>
</a>
<a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
<i data-feather="twitter" class="w-6 h-6"></i>
</a>
<a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
<i data-feather="linkedin" class="w-6 h-6"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
<p>© 2024 Justice Law Partners. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init();
feather.replace();
// Tab functionality
document.addEventListener('DOMContentLoaded', function() {
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class from all buttons and contents
tabBtns.forEach(b => b.className = 'tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-gray-200 text-blue-900 hover:bg-blue-900 hover:text-white');
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked button
btn.className = 'tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-blue-900 text-white';
// Show corresponding content
const tabId = btn.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
});
</script>
</body>
</html> |