Hugging Face's logo

Spaces:
Cosoi
/
test
Running

App Files Community
Cosoi commited on
Commit
52d3f38
·
verified ·
1 Parent(s): 4a914f2

Create a 3 pages site for lawyer firm. - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +6 -4
  2. about.html +254 -0
  3. index.html +336 -18
  4. prompts.txt +1 -0
  5. services.html +408 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 📉
4
- colorFrom: indigo
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
about.html ADDED
@@ -0,0 +1,254 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Us | Justice Law Partners</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-about {
15
+ background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
16
+ min-height: 50vh;
17
+ }
18
+ .team-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans antialiased">
25
+ <!-- Navigation -->
26
+ <nav class="fixed w-full z-50 bg-white shadow-md">
27
+ <div class="container mx-auto px-6 py-4">
28
+ <div class="flex justify-between items-center">
29
+ <a href="index.html" class="text-2xl font-bold text-blue-900">Justice<span class="text-amber-600">Law</span></a>
30
+
31
+ <div class="hidden md:flex space-x-8">
32
+ <a href="index.html" class="text-blue-900 hover:text-amber-600 transition-colors">Home</a>
33
+ <a href="about.html" class="text-amber-600 font-semibold">About</a>
34
+ <a href="services.html" class="text-blue-900 hover:text-amber-600 transition-colors">Services</a>
35
+ <a href="index.html#contact" class="text-blue-900 hover:text-amber-600 transition-colors">Contact</a>
36
+ </div>
37
+
38
+ <button class="md:hidden text-blue-900">
39
+ <i data-feather="menu"></i>
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <!-- Hero Section -->
46
+ <section class="hero-about flex items-center justify-center pt-20">
47
+ <div class="container mx-auto px-6 text-center">
48
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6" data-aos="fade-up">
49
+ About Our Firm
50
+ </h1>
51
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
52
+ Building trust through excellence, integrity, and unwavering commitment to our clients.
53
+ </p>
54
+ </div>
55
+ </section>
56
+
57
+ <!-- Our Story -->
58
+ <section class="py-20 bg-white">
59
+ <div class="container mx-auto px-6">
60
+ <div class="grid md:grid-cols-2 gap-12 items-center">
61
+ <div data-aos="fade-right">
62
+ <h2 class="text-4xl font-bold text-blue-900 mb-6">Our Story</h2>
63
+ <p class="text-lg text-gray-700 mb-6">
64
+ Founded in 1999, Justice Law Partners has been at the forefront of providing exceptional legal services to clients across various industries. Our journey began with a simple mission: to deliver personalized, effective legal solutions that make a real difference in our clients' lives.
65
+ </p>
66
+ <p class="text-lg text-gray-700 mb-6">
67
+ Over the past 25 years, we've grown from a small practice to a respected full-service law firm, but our core values remain unchanged. We believe in building lasting relationships based on trust, transparency, and outstanding results.
68
+ </p>
69
+ <div class="flex items-center space-x-4">
70
+ <div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center">
71
+ <i data-feather="award" class="text-white w-6 h-6"></i>
72
+ </div>
73
+ <span class="text-lg font-semibold text-blue-900">Award-Winning Legal Excellence</span>
74
+ </div>
75
+ </div>
76
+ <div data-aos="fade-left">
77
+ <img src="http://static.photos/legal/640x360/1" alt="Law firm office" class="rounded-xl shadow-2xl">
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </section>
82
+
83
+ <!-- Values -->
84
+ <section class="py-20 bg-gray-50">
85
+ <div class="container mx-auto px-6">
86
+ <div class="text-center mb-16">
87
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Our Values</h2>
88
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
89
+ The principles that guide everything we do
90
+ </p>
91
+ </div>
92
+
93
+ <div class="grid md:grid-cols-3 gap-8">
94
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up">
95
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
96
+ <i data-feather="shield" class="text-blue-900 w-8 h-8"></i>
97
+ </div>
98
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Integrity</h3>
99
+ <p class="text-gray-600">We uphold the highest ethical standards in all our dealings, ensuring complete transparency and honesty with our clients.</p>
100
+ </div>
101
+
102
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="200">
103
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
104
+ <i data-feather="target" class="text-blue-900 w-8 h-8"></i>
105
+ </div>
106
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Excellence</h3>
107
+ <p class="text-gray-600">We strive for excellence in every aspect of our work, delivering superior results through meticulous preparation and execution.</p>
108
+ </div>
109
+
110
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="400">
111
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
112
+ <i data-feather="heart" class="text-blue-900 w-8 h-8"></i>
113
+ </div>
114
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Commitment</h3>
115
+ <p class="text-gray-600">We are deeply committed to our clients' success, providing dedicated service and personalized attention to every case.</p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Team Section -->
122
+ <section class="py-20 bg-white">
123
+ <div class="container mx-auto px-6">
124
+ <div class="text-center mb-16">
125
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Meet Our Team</h2>
126
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
127
+ Experienced legal professionals dedicated to your success
128
+ </p>
129
+ </div>
130
+
131
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
132
+ <!-- Team Member 1 -->
133
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card transition-all duration-300" data-aos="fade-up">
134
+ <img src="http://static.photos/people/400x400/1" alt="Sarah Johnson" class="w-full h-64 object-cover">
135
+ <div class="p-6">
136
+ <h3 class="text-2xl font-bold text-blue-900 mb-2">Sarah Johnson</h3>
137
+ <p class="text-amber-600 font-semibold mb-4">Managing Partner</p>
138
+ <p class="text-gray-600 mb-4">Harvard Law School, 25 years experience in corporate law and litigation.</p>
139
+ <div class="flex space-x-3">
140
+ <a href="#" class="text-blue-900 hover:text-amber-600">
141
+ <i data-feather="linkedin" class="w-5 h-5"></i>
142
+ </a>
143
+ <a href="#" class="text-blue-900 hover:text-amber-600">
144
+ <i data-feather="mail" class="w-5 h-5"></i>
145
+ </a>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Team Member 2 -->
151
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
152
+ <img src="http://static.photos/people/400x400/2" alt="Michael Chen" class="w-full h-64 object-cover">
153
+ <div class="p-6">
154
+ <h3 class="text-2xl font-bold text-blue-900 mb-2">Michael Chen</h3>
155
+ <p class="text-amber-600 font-semibold mb-4">Senior Partner</p>
156
+ <p class="text-gray-600 mb-4">Yale Law School, specializes in real estate and property law with 20 years experience.</p>
157
+ <div class="flex space-x-3">
158
+ <a href="#" class="text-blue-900 hover:text-amber-600">
159
+ <i data-feather="linkedin" class="w-5 h-5"></i>
160
+ </a>
161
+ <a href="#" class="text-blue-900 hover:text-amber-600">
162
+ <i data-feather="mail" class="w-5 h-5"></i>
163
+ </a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Team Member 3 -->
169
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
170
+ <img src="http://static.photos/people/400x400/3" alt="Emily Rodriguez" class="w-full h-64 object-cover">
171
+ <div class="p-6">
172
+ <h3 class="text-2xl font-bold text-blue-900 mb-2">Emily Rodriguez</h3>
173
+ <p class="text-amber-600 font-semibold mb-4">Partner</p>
174
+ <p class="text-gray-600 mb-4">Stanford Law School, expert in family law with 15 years of compassionate service.</p>
175
+ <div class="flex space-x-3">
176
+ <a href="#" class="text-blue-900 hover:text-amber-600">
177
+ <i data-feather="linkedin" class="w-5 h-5"></i>
178
+ </a>
179
+ <a href="#" class="text-blue-900 hover:text-amber-600">
180
+ <i data-feather="mail" class="w-5 h-5"></i>
181
+ </a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- CTA Section -->
190
+ <section class="py-20 bg-blue-900 text-white">
191
+ <div class="container mx-auto px-6 text-center">
192
+ <h2 class="text-4xl font-bold mb-6" data-aos="fade-up">Ready to Work With Us?</h2>
193
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
194
+ Experience the difference that comes with working with a team that truly cares about your success.
195
+ </p>
196
+ <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">
197
+ Get Started Today
198
+ </a>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Footer -->
203
+ <footer class="bg-blue-900 text-white py-12">
204
+ <div class="container mx-auto px-6">
205
+ <div class="grid md:grid-cols-4 gap-8">
206
+ <div>
207
+ <h3 class="text-2xl font-bold mb-4">Justice<span class="text-amber-600">Law</span></h3>
208
+ <p class="text-gray-300">Providing exceptional legal services with integrity and excellence.</p>
209
+ </div>
210
+ <div>
211
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
212
+ <ul class="space-y-2">
213
+ <li><a href="index.html" class="text-gray-300 hover:text-amber-600 transition-colors">Home</a></li>
214
+ <li><a href="about.html" class="text-amber-600">About</a></li>
215
+ <li><a href="services.html" class="text-gray-300 hover:text-amber-600 transition-colors">Services</a></li>
216
+ <li><a href="index.html#contact" class="text-gray-300 hover:text-amber-600 transition-colors">Contact</a></li>
217
+ </ul>
218
+ </div>
219
+ <div>
220
+ <h4 class="text-lg font-semibold mb-4">Contact Info</h4>
221
+ <div class="space-y-2 text-gray-300">
222
+ <p>123 Legal Avenue</p>
223
+ <p>New York, NY 10001</p>
224
+ <p>info@justicelaw.com</p>
225
+ <p>(555) 123-4567</p>
226
+ </div>
227
+ </div>
228
+ <div>
229
+ <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
230
+ <div class="flex space-x-4">
231
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
232
+ <i data-feather="facebook" class="w-6 h-6"></i>
233
+ </a>
234
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
235
+ <i data-feather="twitter" class="w-6 h-6"></i>
236
+ </a>
237
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
238
+ <i data-feather="linkedin" class="w-6 h-6"></i>
239
+ </a>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
244
+ <p>&copy; 2024 Justice Law Partners. All rights reserved.</p>
245
+ </div>
246
+ </div>
247
+ </footer>
248
+
249
+ <script>
250
+ AOS.init();
251
+ feather.replace();
252
+ </script>
253
+ </body>
254
+ </html>
index.html CHANGED
@@ -1,19 +1,337 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Justice Law Partners | Premier Legal Representation</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
14
+ <style>
15
+ .hero-section {
16
+ min-height: 100vh;
17
+ position: relative;
18
+ }
19
+ .vanta-background {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100%;
24
+ height: 100%;
25
+ z-index: -1;
26
+ }
27
+ .nav-scroll {
28
+ background: rgba(255, 255, 255, 0.95);
29
+ backdrop-filter: blur(10px);
30
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
31
+ }
32
+ .practice-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="font-sans antialiased">
39
+ <div id="vanta-bg" class="vanta-background"></div>
40
+
41
+ <!-- Navigation -->
42
+ <nav class="fixed w-full z-50 transition-all duration-300" id="navbar">
43
+ <div class="container mx-auto px-6 py-4">
44
+ <div class="flex justify-between items-center">
45
+ <a href="index.html" class="text-2xl font-bold text-blue-900">Justice<span class="text-amber-600">Law</span></a>
46
+
47
+ <div class="hidden md:flex space-x-8">
48
+ <a href="index.html" class="text-blue-900 hover:text-amber-600 transition-colors">Home</a>
49
+ <a href="about.html" class="text-blue-900 hover:text-amber-600 transition-colors">About</a>
50
+ <a href="services.html" class="text-blue-900 hover:text-amber-600 transition-colors">Services</a>
51
+ <a href="#contact" class="text-blue-900 hover:text-amber-600 transition-colors">Contact</a>
52
+ </div>
53
+
54
+ <button class="md:hidden text-blue-900">
55
+ <i data-feather="menu"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </nav>
60
+
61
+ <!-- Hero Section -->
62
+ <section class="hero-section flex items-center justify-center">
63
+ <div class="container mx-auto px-6 text-center">
64
+ <h1 class="text-5xl md:text-7xl font-bold text-blue-900 mb-6" data-aos="fade-up">
65
+ Excellence in <span class="text-amber-600">Legal</span> Representation
66
+ </h1>
67
+ <p class="text-xl md:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
68
+ Trusted legal counsel with over 25 years of experience delivering exceptional results for our clients.
69
+ </p>
70
+ <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
71
+ <a href="#contact" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-lg font-semibold transition-colors">
72
+ Schedule Consultation
73
+ </a>
74
+ <a href="services.html" class="border-2 border-blue-900 text-blue-900 hover:bg-blue-900 hover:text-white px-8 py-4 rounded-lg font-semibold transition-colors">
75
+ Our Services
76
+ </a>
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- Practice Areas -->
82
+ <section class="py-20 bg-gray-50">
83
+ <div class="container mx-auto px-6">
84
+ <div class="text-center mb-16">
85
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Our Practice Areas</h2>
86
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
87
+ Comprehensive legal services tailored to meet your specific needs
88
+ </p>
89
+ </div>
90
+
91
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
92
+ <!-- Practice Card 1 -->
93
+ <div class="bg-white rounded-xl p-8 shadow-lg practice-card transition-all duration-300" data-aos="fade-up">
94
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
95
+ <i data-feather="briefcase" class="text-blue-900 w-8 h-8"></i>
96
+ </div>
97
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Corporate Law</h3>
98
+ <p class="text-gray-600 mb-6">Business formation, contracts, mergers, acquisitions, and compliance matters.</p>
99
+ <a href="services.html#corporate" class="text-amber-600 hover:text-amber-700 font-semibold flex items-center">
100
+ Learn more
101
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
102
+ </a>
103
+ </div>
104
+
105
+ <!-- Practice Card 2 -->
106
+ <div class="bg-white rounded-xl p-8 shadow-lg practice-card transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
107
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
108
+ <i data-feather="home" class="text-blue-900 w-8 h-8"></i>
109
+ </div>
110
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Real Estate</h3>
111
+ <p class="text-gray-600 mb-6">Property transactions, leasing, zoning, and real estate litigation.</p>
112
+ <a href="services.html#realestate" class="text-amber-600 hover:text-amber-700 font-semibold flex items-center">
113
+ Learn more
114
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
115
+ </a>
116
+ </div>
117
+
118
+ <!-- Practice Card 3 -->
119
+ <div class="bg-white rounded-xl p-8 shadow-lg practice-card transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
120
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
121
+ <i data-feather="users" class="text-blue-900 w-8 h-8"></i>
122
+ </div>
123
+ <h3 class="text-2xl font-bold text-blue-900 mb-4">Family Law</h3>
124
+ <p class="text-gray-600 mb-6">Divorce, child custody, adoption, and domestic relations matters.</p>
125
+ <a href="services.html#family" class="text-amber-600 hover:text-amber-700 font-semibold flex items-center">
126
+ Learn more
127
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
128
+ </a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Stats Section -->
135
+ <section class="py-20 bg-blue-900 text-white">
136
+ <div class="container mx-auto px-6">
137
+ <div class="grid md:grid-cols-4 gap-8 text-center">
138
+ <div data-aos="fade-up">
139
+ <div class="text-4xl font-bold text-amber-600 mb-2">25+</div>
140
+ <div class="text-lg">Years Experience</div>
141
+ </div>
142
+ <div data-aos="fade-up" data-aos-delay="200">
143
+ <div class="text-4xl font-bold text-amber-600 mb-2">500+</div>
144
+ <div class="text-lg">Cases Resolved</div>
145
+ </div>
146
+ <div data-aos="fade-up" data-aos-delay="400">
147
+ <div class="text-4xl font-bold text-amber-600 mb-2">98%</div>
148
+ <div class="text-lg">Success Rate</div>
149
+ </div>
150
+ <div data-aos="fade-up" data-aos-delay="600">
151
+ <div class="text-4xl font-bold text-amber-600 mb-2">24/7</div>
152
+ <div class="text-lg">Client Support</div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Testimonials -->
159
+ <section class="py-20 bg-white">
160
+ <div class="container mx-auto px-6">
161
+ <div class="text-center mb-16">
162
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Client Testimonials</h2>
163
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
164
+ Hear what our clients have to say about our services
165
+ </p>
166
+ </div>
167
+
168
+ <div class="grid md:grid-cols-3 gap-8">
169
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up">
170
+ <div class="flex items-center mb-4">
171
+ <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center text-white font-bold">JD</div>
172
+ <div class="ml-4">
173
+ <div class="font-semibold">John Doe</div>
174
+ <div class="text-sm text-gray-600">Corporate Client</div>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-700">"Exceptional service and expertise. They handled our merger with precision and care."</p>
178
+ </div>
179
+
180
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
181
+ <div class="flex items-center mb-4">
182
+ <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center text-white font-bold">JS</div>
183
+ <div class="ml-4">
184
+ <div class="font-semibold">Jane Smith</div>
185
+ <div class="text-sm text-gray-600">Real Estate Client</div>
186
+ </div>
187
+ </div>
188
+ <p class="text-gray-700">"Professional and responsive. Made our property transaction smooth and stress-free."</p>
189
+ </div>
190
+
191
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="400">
192
+ <div class="flex items-center mb-4">
193
+ <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center text-white font-bold">RW</div>
194
+ <div class="ml-4">
195
+ <div class="font-semibold">Robert Wilson</div>
196
+ <div class="text-sm text-gray-600">Family Law Client</div>
197
+ </div>
198
+ </div>
199
+ <p class="text-gray-700">"Compassionate and knowledgeable. Guided me through a difficult divorce with empathy."</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Contact Section -->
206
+ <section id="contact" class="py-20 bg-gray-50">
207
+ <div class="container mx-auto px-6">
208
+ <div class="max-w-4xl mx-auto">
209
+ <div class="text-center mb-16">
210
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Contact Us</h2>
211
+ <p class="text-xl text-gray-600" data-aos="fade-up" data-aos-delay="200">
212
+ Ready to discuss your legal needs? We're here to help.
213
+ </p>
214
+ </div>
215
+
216
+ <div class="bg-white rounded-xl p-8 shadow-lg" data-aos="fade-up">
217
+ <form class="space-y-6">
218
+ <div class="grid md:grid-cols-2 gap-6">
219
+ <div>
220
+ <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
221
+ <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent">
222
+ </div>
223
+ <div>
224
+ <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
225
+ <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent">
226
+ </div>
227
+ </div>
228
+ <div>
229
+ <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
230
+ <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent">
231
+ </div>
232
+ <div>
233
+ <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
234
+ <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent">
235
+ </div>
236
+ <div>
237
+ <label class="block text-sm font-medium text-gray-700 mb-2">Service Needed</label>
238
+ <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent">
239
+ <option>Corporate Law</option>
240
+ <option>Real Estate</option>
241
+ <option>Family Law</option>
242
+ <option>Other</option>
243
+ </select>
244
+ </div>
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700 mb-2">Message</label>
247
+ <textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent"></textarea>
248
+ </div>
249
+ <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white py-4 px-6 rounded-lg font-semibold transition-colors">
250
+ Send Message
251
+ </button>
252
+ </form>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Footer -->
259
+ <footer class="bg-blue-900 text-white py-12">
260
+ <div class="container mx-auto px-6">
261
+ <div class="grid md:grid-cols-4 gap-8">
262
+ <div>
263
+ <h3 class="text-2xl font-bold mb-4">Justice<span class="text-amber-600">Law</span></h3>
264
+ <p class="text-gray-300">Providing exceptional legal services with integrity and excellence.</p>
265
+ </div>
266
+ <div>
267
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
268
+ <ul class="space-y-2">
269
+ <li><a href="index.html" class="text-gray-300 hover:text-amber-600 transition-colors">Home</a></li>
270
+ <li><a href="about.html" class="text-gray-300 hover:text-amber-600 transition-colors">About</a></li>
271
+ <li><a href="services.html" class="text-gray-300 hover:text-amber-600 transition-colors">Services</a></li>
272
+ <li><a href="#contact" class="text-gray-300 hover:text-amber-600 transition-colors">Contact</a></li>
273
+ </ul>
274
+ </div>
275
+ <div>
276
+ <h4 class="text-lg font-semibold mb-4">Contact Info</h4>
277
+ <div class="space-y-2 text-gray-300">
278
+ <p>123 Legal Avenue</p>
279
+ <p>New York, NY 10001</p>
280
+ <p>info@justicelaw.com</p>
281
+ <p>(555) 123-4567</p>
282
+ </div>
283
+ </div>
284
+ <div>
285
+ <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
286
+ <div class="flex space-x-4">
287
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
288
+ <i data-feather="facebook" class="w-6 h-6"></i>
289
+ </a>
290
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
291
+ <i data-feather="twitter" class="w-6 h-6"></i>
292
+ </a>
293
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
294
+ <i data-feather="linkedin" class="w-6 h-6"></i>
295
+ </a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
300
+ <p>&copy; 2024 Justice Law Partners. All rights reserved.</p>
301
+ </div>
302
+ </div>
303
+ </footer>
304
+
305
+ <script>
306
+ AOS.init();
307
+ feather.replace();
308
+
309
+ // Vanta.js background
310
+ VANTA.NET({
311
+ el: "#vanta-bg",
312
+ mouseControls: true,
313
+ touchControls: true,
314
+ gyroControls: false,
315
+ minHeight: 200.00,
316
+ minWidth: 200.00,
317
+ scale: 1.00,
318
+ scaleMobile: 1.00,
319
+ color: 0x1e40af,
320
+ backgroundColor: 0xf8fafc,
321
+ points: 12.00,
322
+ maxDistance: 22.00,
323
+ spacing: 18.00
324
+ });
325
+
326
+ // Navbar scroll effect
327
+ window.addEventListener('scroll', function() {
328
+ const navbar = document.getElementById('navbar');
329
+ if (window.scrollY > 100) {
330
+ navbar.classList.add('nav-scroll');
331
+ } else {
332
+ navbar.classList.remove('nav-scroll');
333
+ }
334
+ });
335
+ </script>
336
+ </body>
337
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a 3 pages site for lawyer firm.
services.html ADDED
@@ -0,0 +1,408 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Our Services | Justice Law Partners</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .service-hero {
15
+ background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
16
+ min-height: 40vh;
17
+ }
18
+ .service-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
21
+ }
22
+ .tab-content {
23
+ display: none;
24
+ }
25
+ .tab-content.active {
26
+ display: block;
27
+ animation: fadeIn 0.5s ease-in;
28
+ }
29
+ @keyframes fadeIn {
30
+ from { opacity: 0; transform: translateY(20px); }
31
+ to { opacity: 1; transform: translateY(0); }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="font-sans antialiased">
36
+ <!-- Navigation -->
37
+ <nav class="fixed w-full z-50 bg-white shadow-md">
38
+ <div class="container mx-auto px-6 py-4">
39
+ <div class="flex justify-between items-center">
40
+ <a href="index.html" class="text-2xl font-bold text-blue-900">Justice<span class="text-amber-600">Law</span></a>
41
+
42
+ <div class="hidden md:flex space-x-8">
43
+ <a href="index.html" class="text-blue-900 hover:text-amber-600 transition-colors">Home</a>
44
+ <a href="about.html" class="text-blue-900 hover:text-amber-600 transition-colors">About</a>
45
+ <a href="services.html" class="text-amber-600 font-semibold">Services</a>
46
+ <a href="index.html#contact" class="text-blue-900 hover:text-amber-600 transition-colors">Contact</a>
47
+ </div>
48
+
49
+ <button class="md:hidden text-blue-900">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="service-hero flex items-center justify-center pt-20">
58
+ <div class="container mx-auto px-6 text-center">
59
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6" data-aos="fade-up">
60
+ Our Services
61
+ </h1>
62
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
63
+ Comprehensive legal solutions tailored to meet your specific needs and achieve your goals.
64
+ </p>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Services Tabs -->
69
+ <section class="py-20 bg-white">
70
+ <div class="container mx-auto px-6">
71
+ <div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up">
72
+ <button class="tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-blue-900 text-white" data-tab="corporate">
73
+ Corporate Law
74
+ </button>
75
+ <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">
76
+ Real Estate
77
+ </button>
78
+ <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">
79
+ Family Law
80
+ </button>
81
+ <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">
82
+ Litigation
83
+ </button>
84
+ </div>
85
+
86
+ <!-- Corporate Law Tab -->
87
+ <div id="corporate" class="tab-content active" data-aos="fade-up">
88
+ <div class="grid md:grid-cols-2 gap-12 items-center">
89
+ <div>
90
+ <h2 class="text-4xl font-bold text-blue-900 mb-6">Corporate Law Services</h2>
91
+ <p class="text-lg text-gray-700 mb-6">
92
+ 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.
93
+ </p>
94
+ <div class="space-y-4">
95
+ <div class="flex items-start">
96
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
97
+ <i data-feather="check" class="text-white w-4 h-4"></i>
98
+ </div>
99
+ <span class="text-lg">Business Formation & Structure</span>
100
+ </div>
101
+ <div class="flex items-start">
102
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
103
+ <i data-feather="check" class="text-white w-4 h-4"></i>
104
+ </div>
105
+ <span class="text-lg">Contracts & Agreements</span>
106
+ </div>
107
+ <div class="flex items-start">
108
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
109
+ <i data-feather="check" class="text-white w-4 h-4"></i>
110
+ </div>
111
+ <span class="text-lg">Mergers & Acquisitions</span>
112
+ </div>
113
+ <div class="flex items-start">
114
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
115
+ <i data-feather="check" class="text-white w-4 h-4"></i>
116
+ </div>
117
+ <span class="text-lg">Corporate Governance</span>
118
+ </div>
119
+ <div class="flex items-start">
120
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
121
+ <i data-feather="check" class="text-white w-4 h-4"></i>
122
+ </div>
123
+ <span class="text-lg">Compliance & Regulatory Matters</span>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div>
128
+ <img src="http://static.photos/office/640x360/1" alt="Corporate Law" class="rounded-xl shadow-2xl">
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Real Estate Tab -->
134
+ <div id="realestate" class="tab-content" data-aos="fade-up">
135
+ <div class="grid md:grid-cols-2 gap-12 items-center">
136
+ <div>
137
+ <h2 class="text-4xl font-bold text-blue-900 mb-6">Real Estate Services</h2>
138
+ <p class="text-lg text-gray-700 mb-6">
139
+ 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.
140
+ </p>
141
+ <div class="space-y-4">
142
+ <div class="flex items-start">
143
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
144
+ <i data-feather="check" class="text-white w-4 h-4"></i>
145
+ </div>
146
+ <span class="text-lg">Residential & Commercial Transactions</span>
147
+ </div>
148
+ <div class="flex items-start">
149
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
150
+ <i data-feather="check" class="text-white w-4 h-4"></i>
151
+ </div>
152
+ <span class="text-lg">Leasing & Landlord-Tenant Matters</span>
153
+ </div>
154
+ <div class="flex items-start">
155
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
156
+ <i data-feather="check" class="text-white w-4 h-4"></i>
157
+ </div>
158
+ <span class="text-lg">Zoning & Land Use</span>
159
+ </div>
160
+ <div class="flex items-start">
161
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
162
+ <i data-feather="check" class="text-white w-4 h-4"></i>
163
+ </div>
164
+ <span class="text-lg">Real Estate Litigation</span>
165
+ </div>
166
+ <div class="flex items-start">
167
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
168
+ <i data-feather="check" class="text-white w-4 h-4"></i>
169
+ </div>
170
+ <span class="text-lg">Title Examination & Insurance</span>
171
+ </极>
172
+ </div>
173
+ </div>
174
+ <div>
175
+ <img src="http://static.photos/realestate/640x360/1" alt="Real Estate Law" class="rounded-xl shadow-2xl">
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Family Law Tab -->
181
+ <div id="family" class="tab-content" data-aos="fade-up">
182
+ <div class="grid md:grid-cols-2 gap-12 items-center">
183
+ <div>
184
+ <h2 class="text-4xl font-bold text-blue-900 mb-6">Family Law Services</h2>
185
+ <p class="text-lg text-gray-700 mb-6">
186
+ 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.
187
+ </p>
188
+ <div class="space-y-4">
189
+ <div class="极 items-start">
190
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
191
+ <i data-feather="check" class="text-white w-4 h-4"></i>
192
+ </div>
193
+ <span class="text-lg">Divorce & Separation</span>
194
+ </div>
195
+ <div class="flex items-start">
196
+ <div class="w-6 h-6 bg-amber-极 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
197
+ <i data-feather="check" class="text-white w-4 h-4"></i>
198
+ </div>
199
+ <span class="text-lg">Child Custody & Support</span>
200
+ </div>
201
+ <div class="flex items-start">
202
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
203
+ <i data-feather="check" class="text-white w-4 h-4"></i>
204
+ </div>
205
+ <span class="text-lg">Adoption & Guardianship</span>
206
+ </div>
207
+ <div class="flex items-start">
208
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
209
+ <i data-feather="check" class="text-white w-4 h-4"></i>
210
+ </div>
211
+ <span class="text-lg">Prenuptial Agreements</span>
212
+ </div>
213
+ <div class="flex items-start">
214
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-极">
215
+ <i data-feather="check" class="text-white w-4 h-4"></i>
216
+ </div>
217
+ <span class="text-lg">Domestic Violence Protection</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div>
222
+ <img src="http://static.photos/family/640x360/1" alt="Family Law" class="rounded-xl shadow-2xl">
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Litigation Tab -->
228
+ <div id="litigation" class="tab-content" data-aos="fade-up">
229
+ <div class="grid md:grid-cols-2 gap-12 items-center">
230
+ <div>
231
+ <h2 class="text-4xl font-bold text-blue-900 mb-6">Litigation Services</h2>
232
+ <p class="text-lg text-gray-700 mb-6">
233
+ 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.
234
+ </p>
235
+ <div class="space-y-4">
236
+ <div class="flex items-start">
237
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
238
+ <i data-feather="check" class="text-white w-4 h-4"></i>
239
+ </div>
240
+ <span class="text-lg">Civil Litigation</span>
241
+ </div>
242
+ <div class="flex items-start">
243
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
244
+ <i data-feather="check" class="text-white w-4 h-4"></极>
245
+ </div>
246
+ <span class="text-lg">Commercial Disputes</span>
247
+ </div>
248
+ <div class="flex items-start">
249
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
250
+ <i data-feather="check" class="text-white w-4 h-4"></i>
251
+ </div>
252
+ <span class="text-lg">Personal Injury Claims</span>
253
+ </div>
254
+ <div class="flex items-start">
255
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex极hrink-0">
256
+ <i data-feather="check" class="text-white w-4 h-4"></i>
257
+ </div>
258
+ <span class="text-lg">Appellate Practice</span>
259
+ </div>
260
+ <div class="flex items-start">
261
+ <div class="w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center mt-1 mr-4 flex-shrink-0">
262
+ <i data-feather="check" class="text-white w-4 h-4"></i>
263
+ </div>
264
+ <span class="text-lg">Alternative Dispute Resolution</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <div>
269
+ <img src="http://static.photos/legal/640x360/2" alt="Litigation" class="rounded-xl shadow-2xl">
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Process Section -->
277
+ <section class="py-20 bg-gray-50">
278
+ <div class="container mx-auto px-6">
279
+ <div class="text-center mb-16">
280
+ <h2 class="text-4xl font-bold text-blue-900 mb-4" data-aos="fade-up">Our Process</h2>
281
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
282
+ Clear, transparent, and client-focused approach to legal representation
283
+ </p>
284
+ </div>
285
+
286
+ <div class="grid md:grid-cols-4 gap-8">
287
+ <div class="text-center" data-aos="fade-up">
288
+ <div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
289
+ <span class="text-3xl font-bold text-white">1</span>
290
+ </div>
291
+ <h3 class="text-xl font-bold text-blue-900 mb-4">Consultation</h3>
292
+ <p class="text-gray-600">We listen to understand your situation and provide initial guidance.</p>
293
+ </div>
294
+
295
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
296
+ <div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
297
+ <span class="text-3xl font-bold text-white">2</span>
298
+ </div>
299
+ <h3 class="text-xl font-bold text-blue-900 mb-4">Strategy</h3>
300
+ <p class="text-gray-600">We develop a customized legal strategy tailored to your goals.</p>
301
+ </div>
302
+
303
+ <div class="text-center" data-aos="fade-up" data-aos-delay="400">
304
+ <div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
305
+ <span class="text-3xl font-bold text-white">3</span>
306
+ </div>
307
+ <h3 class="text-xl font-bold text-blue-900 mb-4">Execution</h3>
308
+ <p class="text-gray-600">We implement the strategy with precision and attention to detail.</p>
309
+ </div>
310
+
311
+ <div class="text-center" data-aos="fade-up" data-aos-delay="600">
312
+ <div class="w-20 h-20 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6">
313
+ <span class="text-3xl font-bold text-white">4</span>
314
+ </div>
315
+ <h3 class="text-xl font-bold text-blue-900 mb-4">Resolution</h3>
316
+ <p class="text-gray-600">We achieve the best possible outcome for your case.</p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- CTA Section -->
323
+ <section class="py-20 bg-blue-900 text-white">
324
+ <div class="container mx-auto px-6 text-center">
325
+ <h2 class="text-4xl font-bold mb-6" data-aos="fade-up">Start Your Legal Journey</h2>
326
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
327
+ Contact us today to discuss how we can help you achieve your legal objectives.
328
+ </p>
329
+ <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">
330
+ Schedule Consultation
331
+ </a>
332
+ </div>
333
+ </section>
334
+
335
+ <!-- Footer -->
336
+ <footer class="bg-blue-900 text-white py-12">
337
+ <div class="container mx-auto px-6">
338
+ <div class="grid md:grid-cols-4 gap-8">
339
+ <div>
340
+ <h3 class="text-2xl font-bold mb-4">Justice<span class="text-amber-600">Law</span></h3>
341
+ <p class="text-gray-300">Providing exceptional legal services with integrity and excellence.</p>
342
+ </div>
343
+ <div>
344
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
345
+ <ul class="space-y-2">
346
+ <li><a href="index.html" class="text-gray-300 hover:text-amber-600 transition-colors">Home</a></li>
347
+ <li><a href="about.html" class="text-gray-300 hover:text-amber-600 transition-colors">About</a></li>
348
+ <li><a href="services.html" class="text-amber-600">Services</a></li>
349
+ <li><a href="index.html#contact" class="text-gray-300 hover:text-amber-600 transition-colors">Contact</a></li>
350
+ </ul>
351
+ </div>
352
+ <div>
353
+ <h4 class="text-lg font-semib极 mb-4">Contact Info</h4>
354
+ <div class="space-y-2 text-gray-300">
355
+ <p>123 Legal Avenue</p>
356
+ <p>New York, NY 10001</p>
357
+ <p>info@justicelaw.com</p>
358
+ <p>(555) 123-4567</p>
359
+ </div>
360
+ </div>
361
+ <div>
362
+ <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
363
+ <div class="flex space-x-4">
364
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
365
+ <i data-feather="facebook" class="w-6 h-6"></i>
366
+ </a>
367
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
368
+ <i data-feather="twitter" class="w-6 h-6"></i>
369
+ </a>
370
+ <a href="#" class="text-gray-300 hover:text-amber-600 transition-colors">
371
+ <i data-feather="linkedin" class="w-6 h-6"></i>
372
+ </a>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
377
+ <p>&copy; 2024 Justice Law Partners. All rights reserved.</p>
378
+ </div>
379
+ </div>
380
+ </footer>
381
+
382
+ <script>
383
+ AOS.init();
384
+ feather.replace();
385
+
386
+ // Tab functionality
387
+ document.addEventListener('DOMContentLoaded', function() {
388
+ const tabBtns = document.querySelectorAll('.tab-btn');
389
+ const tabContents = document.querySelectorAll('.tab-content');
390
+
391
+ tabBtns.forEach(btn => {
392
+ btn.addEventListener('click', () => {
393
+ // Remove active class from all buttons and contents
394
+ 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');
395
+ tabContents.forEach(content => content.classList.remove('active'));
396
+
397
+ // Add active class to clicked button
398
+ btn.className = 'tab-btn px-6 py-3 rounded-lg font-semibold transition-colors bg-blue-900 text-white';
399
+
400
+ // Show corresponding content
401
+ const tabId = btn.getAttribute('data-tab');
402
+ document.getElementById(tabId).classList.add('active');
403
+ });
404
+ });
405
+ });
406
+ </script>
407
+ </body>
408
+ </html>