-
Notifications
You must be signed in to change notification settings - Fork 2
/
aaru.html
228 lines (211 loc) · 15.9 KB
/
aaru.html
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
<html>
<head>
<title>Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<style>.carousel-cell {
/* width: 66%; */
height: 200px;
margin-right: 10px;
background: rgb(204, 169, 136);
border-radius: 5px;
counter-increment: gallery-cell;
}
.forheightcarimg{
height: 100%
}
</style>
<body>
<div class="bg-indigo-200">
<header>
<nav class="bg-indigo-50 border-gray-200 px-4 lg:px-6 py-2.5">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
<a href="#" class="flex items-center"><span class="text-idigo-600 self-center text-3xl font-semibold whitespace-nowrap">LawyerMe</span></a>
<div class="flex items-center lg:order-2">
<a href="#" class="text-gray-800 hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2">Log in</a>
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2">Lawyers click here</a
>
<button type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg><svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li><a href="#" class="block py-2 pr-4 pl-3 hover:text-blue-800 text-black rounded lg:bg-transparent lg:p-0" aria-current="page">Home</a></li>
<li><a href="#" class="block py-2 pr-4 pl-3 hover:text-blue-800 text-black rounded lg:bg-transparent lg:p-0" aria-current="page">Services</a></li>
<li><a href="#" class="block py-2 pr-4 pl-3 hover:text-blue-800 text-black rounded lg:bg-transparent lg:p-0" aria-current="page">Lawyers</a></li>
<li><a href="#" class="block py-2 pr-4 pl-3 hover:text-blue-800 text-black rounded lg:bg-transparent lg:p-0" aria-current="page">Notaries</a></li>
<li><a href="#" class="block py-2 pr-4 pl-3 hover:text-blue-800 text-black rounded lg:bg-transparent lg:p-0" aria-current="page">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true"></div>
<div class="mx-auto max-w-2xl py-10 sm:py-48 lg:py-10">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-indigo-900 sm:text-6xl">Find the Right Legal Services</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Get expert legal assistance from top lawyers and notaries.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="carousel max-w-4xl ml-50" data-flickity='{ "freeScroll": true } ' style="">
<div class="carousel-cell">
<img class="rounded-lg w-96 h-full" src="https://png.pngtree.com/thumb_back/fh260/background/20230613/pngtree-courtroom-with-some-people-sitting-in-benches-image_2894013.jpg" alt="" />
</div>
<div class="carousel-cell">
<img class="rounded-lg w-96 h-full" src="https://static.toiimg.com/photo/msid-97606013/97606013.jpg" alt="" />
</div>
<div class="carousel-cell">
<img class="rounded-lg w-96 h-full" src="https://assets-news.housing.com/news/wp-content/uploads/2021/05/19175449/Why-you-need-to-hire-a-real-estate-lawyer-when-buying-a-house-FB-1200x700-compressed-686x400.jpg" alt="" />
</div>
<div class="carousel-cell">
<img class="rounded-lg w-96 h-full" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRymEyVoWMYXTazcKW0ICQ6X_hICBJHM-yM6Q&usqp=CAU" alt="" />
</div>
<div class="carousel-cell">
<img class="rounded-lg w-96 h-full" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSLYAuJU1OOhMLbNBrPivGKupyU1x_GXwFWg&usqp=CAU" alt="" />
</div>
</div>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true"></div>
<div class="mx-auto max-w-2xl py-10 sm:py-48 lg:py-10">
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up now</a><a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more<span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-indigo-700 py-10 sm:py-10">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base font-semibold leading-7 text-yellow-500">Get Legal Assistance</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-indigo-200 sm:text-4xl">Find the Right Legal Services for Your Needs</p>
<p class="mt-6 text-lg leading-8 text-indigo-200">Feature section description</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">Find a Lawyer</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-indigo-200">
<p class="flex-auto">Easily search and find experienced lawyers in your area</p>
<p class="mt-6">
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">Find a Notary</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-indigo-200">
<p class="flex-auto">Hire experienced and verified government document writers</p>
<p class="mt-6">
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">Find Arbitraries/Mediators</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-indigo-200">
<p class="flex-auto">Access a library of legal document templates for various purposes</p>
<p class="mt-6">
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<!-- ***Example**
<div class="min-h-screen bg-gray-100 p-3 relative">
<div class="w-96 mx-auto" style="scroll-snap-type: x mandatory;">
<div class="">
<input class="sr-only peer" type="radio" name="carousel" id="carousel-1" checked />
<div
class="w-96 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-lg transition-all duration-300 opacity-0 peer-checked:opacity-100 peer-checked:z-10 z-0">
<img class="rounded-t-lg w-96 h-64" src="https://images.unsplash.com/photo-1628788835388-415ee2fa9576?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=384&q=80" alt="" />
<div class="py-4 px-8">
<h1 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-2xl tracking-tight">Lorem
ipsum dolor sit amet consectetur adipisicing.
</h1>
<p class="hover:cursor-pointer py-3 text-gray-600 leading-6">Lorem ipsum dolor, sit amet
consectetur adipisicing elit.
</p>
</div>
<div class="absolute top-1/2 w-full flex justify-between z-20">
<label for="carousel-3" class="inline-block text-red-600 cursor-pointer -translate-x-5 bg-white rounded-full shadow-md active:translate-y-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z" clip-rule="evenodd" />
</svg>
</label>
<label for="carousel-2" class="inline-block text-red-600 cursor-pointer translate-x-5 bg-white rounded-full shadow-md active:translate-y-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</label>
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="bg-indigo-600">
<div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl"><br />Hire experienced lawyers and notaries for your legal needs</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-indigo-200">Our platform connects you with top legal professionals who can provide expert advice and representation. Whether you need assistance with contracts, estate planning, or any other legal matter, we've got you covered.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a
><a href="#" class="text-sm font-semibold leading-6 text-white"
>Learn more<!-- -->
<span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
<p class="mt-4 text-base leading-7 text-gray-600">
Can’t find the answer you’re looking for? Reach out to our<!-- -->
<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">customer support</a>
<!-- -->team.
</p>
</div>
<div class="mt-10 lg:col-span-7 lg:mt-0">
<dl class="space-y-10">
<div>
<dt class="text-base font-semibold leading-7 text-gray-900">What types of legal services do you offer?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We offer a wide range of legal services including but not limited to hiring lawyers, notaries, and other legal professionals.</dd>
</div>
<div>
<dt class="text-base font-semibold leading-7 text-gray-900">How can I hire a lawyer or notary through your platform?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">To hire a lawyer or notary, simply browse through our listings, select the professional you prefer, and contact them directly through their provided contact information.</dd>
</div>
<div>
<dt class="text-base font-semibold leading-7 text-gray-900">What are the qualifications of the legal professionals listed on your platform?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">All the legal professionals listed on our platform are highly qualified and experienced in their respective fields. We carefully vet each professional to ensure they meet our standards.</dd>
</div>
<div>
<dt class="text-base font-semibold leading-7 text-gray-900">Can I schedule a consultation with a lawyer or notary before hiring them?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Yes, many of the legal professionals on our platform offer consultation services. You can discuss your case or legal needs with them before making a hiring decision.</dd>
</div>
<div>
<dt class="text-base font-semibold leading-7 text-gray-900">What if I have a specific legal requirement that is not listed on your platform?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">If you have a specific legal requirement that is not listed on our platform, please contact us directly and we will do our best to assist you in finding the right legal professional for your needs.</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>