-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
506 lines (465 loc) · 28.3 KB
/
index.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
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
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Pay UI</title>
<link rel="shortcut icon" href="./public/images/google-pay-icon.png" type="image/x-icon">
<!-- CSS Link -->
<link rel="stylesheet" href="./public/css/main.css">
<link rel="stylesheet" href="./dist/assets/index-a2e3cfd1.css">
</head>
<body class="bg-gray-800 bg-center w-full max-w-md mx-auto my-auto">
<div id="app">
<div class="bg-[#1e1f1f] ">
<!-- Search and Profile -->
<header class="px-2 bg-cover items-center relative"
style="background-image: url(./public/images/gpay-hero-banner.jpg); height:200px;">
<div class=" px-5 flex items-center space-x-3 py-2">
<div class="relative flex-1 text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class="absolute bottom-1 left-2 ">
<path fill="currentColor"
d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z" />
</svg>
<input type="text" class="bg-gray-600 w-full text rounded-full py-1 pl-10 pr-5 outline-none"
placeholder="Pay by name or phone number">
</div>
<div class="">
<img src="./public/images/esakki-profile.JPG" alt="esakki-profile" class="rounded-full w-10">
</div>
</div>
</header>
<!-- Quick Access Link -->
<section class="text-white py-5 px-4">
<div class=" grid grid-cols-4 ">
<!-- Line 1 -->
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
<g fill="currentColor">
<path
d="M0 .5A.5.5 0 0 1 .5 0h3a.5.5 0 0 1 0 1H1v2.5a.5.5 0 0 1-1 0v-3Zm12 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V1h-2.5a.5.5 0 0 1-.5-.5ZM.5 12a.5.5 0 0 1 .5.5V15h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5Zm15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H15v-2.5a.5.5 0 0 1 .5-.5ZM4 4h1v1H4V4Z" />
<path d="M7 2H2v5h5V2ZM3 3h3v3H3V3Zm2 8H4v1h1v-1Z" />
<path d="M7 9H2v5h5V9Zm-4 1h3v3H3v-3Zm8-6h1v1h-1V4Z" />
<path
d="M9 2h5v5H9V2Zm1 1v3h3V3h-3ZM8 8v2h1v1H8v1h2v-2h1v2h1v-1h2v-1h-3V8H8Zm2 2H9V9h1v1Zm4 2h-1v1h-2v1h3v-2Zm-4 2v-1H8v1h2Z" />
<path d="M12 9h2V8h-2v1Z" />
</g>
</svg>
<span class="text-sm text-center pt-1">
Scan any
<br> QR Code
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
<g fill="currentColor">
<path
d="M208 32H64a8 8 0 0 0-8 8v176a8 8 0 0 0 8 8h144a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-72 112a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"
opacity="0.2" />
<path
d="M83.19 174.4a8 8 0 0 0 11.21-1.6a52 52 0 0 1 83.2 0a8 8 0 1 0 12.8-9.6a67.88 67.88 0 0 0-27.4-21.69a40 40 0 1 0-53.94 0A67.88 67.88 0 0 0 81.6 163.2a8 8 0 0 0 1.59 11.2ZM112 112a24 24 0 1 1 24 24a24 24 0 0 1-24-24Zm96-88H64a16 16 0 0 0-16 16v24H32a8 8 0 0 0 0 16h16v40H32a8 8 0 0 0 0 16h16v40H32a8 8 0 0 0 0 16h16v24a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16Zm0 192H64V40h144Z" />
</g>
</svg> <span class="text-sm text-center pt-1">
Pay
<br> contacts
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor" class="bg-white "
d="M17.15 13H13q-.425 0-.713-.288T12 12q0-.425.288-.713T13 11h4.15l-.875-.9Q16 9.825 16 9.412t.3-.712q.275-.275.7-.275t.7.275l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.688.288T16.3 15.3q-.275-.275-.288-.688t.263-.712l.875-.9ZM7 23q-.825 0-1.413-.588T5 21V3q0-.825.588-1.413T7 1h10q.825 0 1.413.588T19 3v4h-2V6H7v12h10v-1h2v4q0 .825-.588 1.413T17 23H7Zm0-3v1h10v-1H7ZM7 4h10V3H7v1Zm0 0V3v1Zm0 16v1v-1Z" />
</svg>
<span class="text-sm text-center pt-1">
Pay phone <br> number
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor" d="M11.5 1L2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7H4Z" />
</svg>
<span class="text-sm text-center pt-1">
Bank <br> transfer
</span>
</div>
</a>
<!-- Line 2 -->
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20">
<path fill="currentColor"
d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0a4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657a.75.75 0 0 0-1.06-1.06a6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5Z"
clip-rule="evenodd"></path>
</svg>
<span class="text-sm text-center pt-1">
Pay UPI ID
<br> or number
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor"
d="M3 4.995C3 3.893 3.893 3 4.995 3h14.01C20.107 3 21 3.893 21 4.995v14.01A1.995 1.995 0 0 1 19.005 21H4.995A1.995 1.995 0 0 1 3 19.005V4.995ZM5 5v14h14V5H5Zm2.972 13.18a9.977 9.977 0 0 1-1.751-.978A6.994 6.994 0 0 1 12.102 14c2.4 0 4.517 1.207 5.778 3.047a9.987 9.987 0 0 1-1.724 1.025A4.993 4.993 0 0 0 12.101 16c-1.716 0-3.23.864-4.13 2.18ZM12 13a3.5 3.5 0 1 1 0-7a3.5 3.5 0 0 1 0 7Zm0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3Z" />
</svg>
<span class="text-sm text-center pt-1">
Self
<br> transfer
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48">
<mask id="ipTBill0">
<g fill="#555" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
<path fill="#555" d="M10 6a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v38l-7-5l-7 5l-7-5l-7 5V6Z" />
<path d="M18 22h12m-12 8h12M18 14h12" />
</g>
</mask>
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTBill0)" />
</svg>
<span class="text-sm text-center pt-1">
Pay <br> bills
</span>
</div>
</a>
<a href="#" class=" hover:text-blue-500 ">
<div class=" flex flex-col items-center p-2 transform hover:scale-110 hover:font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
<path fill="#555" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 21H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v5m-7-6h2m-1 13v.01M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H17m2 0v1m0-8v1" />
</svg>
<span class="text-sm text-center pt-1">
Mobile <br> recharge
</span>
</div>
</a>
</div>
<div class="flex items-center justify-center py-2">
<div
class="bg-gray-600 rounded-full text-center text-sm p-2 flex items-center hover:bg-blue-500 hover:text-black hover:cursor-pointer">
UPI ID:
<p class="pl-1 text-sm"> esakkidme2020@okaxis</p>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="p-0.5">
<path fill="currentColor"
d="M9 18q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm-4 6q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-6V4v12Z" />
</svg>
</a>
</div>
</div>
</section>
<!-- people -->
<section class="text-white px-4">
<h2 class="text-2xl p-2">People</h2>
<div class=" grid grid-cols-4">
<div class="mx-auto p-2">
<img src="./public/images/gokul.jpeg" alt="gokus" class=" rounded-full" width="64">
<p class="text-center pt-4">Gokul</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/name=Ramesh+Babu?background=random" alt="RB" class="rounded-full">
<p class="text-center pt-4">Rames...</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/name=Saravana?background=random&color=fff" alt="" class="
rounded-full">
<p class="text-center pt-4">Saravana</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/?name=Karthik+Kumar?background=random" alt="Karthik"
class="rounded-full">
<p class="text-center pt-4">Karthi K...</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/name=Vijay+Kuamr?background=random&color=fff" alt="vijay"
class="rounded-full">
<p class="text-center pt-4">Vijay</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/name=Gaythiri" alt="" class="
rounded-full">
<p class="text-center pt-4">Gaythiri</p>
</div>
<div class="mx-auto p-2">
<img src="https://ui-avatars.com/api/name=Vicky+Hari?background=random" alt="Vicky" class="
rounded-full">
<p class="text-center pt-4">Vicky Hari
<p>
</div>
<div class="mx-auto p-2 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class=" rounded-full w-16 h-16 text-blue-600 border border-gray-600">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" />
</svg>
<p class="text-center pt-4">More</p>
</div>
</div>
</section>
<!-- Bussiness -->
<section class="text-white px-4">
<div class="flex items-center justify-between">
<h2 class="text-2xl p-2">Bussinesses</h2>
<div
class="bg-blue-500 text-blue-200 flex items-center rounded-full p-0.5 py-auto hover:cursor-pointer hover:bg-blue-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256" class=" pl-3 ">
<g fill="currentColor">
<path d="M224 56v144a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8Z" opacity=".2" />
<path
d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 160H40V56h176v144ZM176 88a48 48 0 0 1-96 0a8 8 0 0 1 16 0a32 32 0 0 0 64 0a8 8 0 0 1 16 0Z" />
</g>
</svg>
<p class="px-2 font-semibold">Explore</p>
</div>
</div>
<div class=" grid grid-cols-4 text-sm">
<div class="mx-auto p-2">
<img src="./public/images/TANGEDCO-Logo.jpg" width="64" alt="TNEB" class="rounded-full">
<p class="text-center pt-4">Tamil Nadu EB</p>
</div>
<div class="mx-auto p-2">
<img src="./public/images/HP-gas-logo-png.jpg" width="64" alt="HP Gas" class="rounded-full">
<p class="text-center pt-4">HP Gas</p>
</div>
<div class="mx-auto p-2">
<img src="./public/images/Reliance_Jio_Logo.svg.png" width="64" alt="JIO" class="rounded-full">
<p class="text-center pt-4">Jio Prepaid</p>
</div>
<div class="mx-auto p-2 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class=" rounded-full w-16 h-16 text-blue-600 border border-gray-600 ">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" />
</svg>
<p class="text-center pt-4">More</p>
</div>
</div>
</section>
<!-- Bills and Recharge -->
<section class="text-white px-4 ">
<div class="">
<h2 class="text-2xl p-2">Bills, recharges and more</h2>
</div>
<div class="flex items-center space-x-5 py-3">
<img src="./public/images/TANGEDCO-Logo.jpg" alt="tned" width="40" class="rounded-full">
<div class=" flex-1">
<h2>
Tirunelveli Junction Home
</h2>
<P class="text-sm text-[#ee8686]">Bill past due date</P>
</div>
<button class="rounded-full border px-6 py-2 text-blue-300 font-semibold">Pay ₹2,777</button>
</div>
<div class="flex items-center space-x-5 py-3">
<img src="./public/images/Reliance_Jio_Logo.svg.png" alt="jio" width="40" class="rounded-full">
<div class=" flex-1">
<h2>
Jio Prepaid
</h2>
<P class="text-sm text-[#ee8686]">Expired in 2 days</P>
</div>
<button class="rounded-full border px-6 py-2 text-blue-300 font-semibold">Pay ₹749</button>
</div>
<div class="flex items-center space-x-5 py-3">
<img src="./public/images/Netflix-Symbol.png" alt="netflix" width="40" class="rounded-full">
<div class=" flex-1">
<h2>
Netflix Monthly
</h2>
<P class="text-sm text-[#ee8686]">Bill due in next few date</P>
</div>
<button class="rounded-full border px-6 py-2 text-blue-300 font-semibold">Pay ₹199</button>
</div>
</section>
<!-- Adding New these -->
<section class="text-white px-4 ">
<div class="">
<h2 class="p-1">Try adding these</h2>
</div>
<div class="grid grid-cols-4 text-sm">
<div>
<div class="bg-blue-800 text-blue-200 rounded-full w-14 h-14 flex items-center justify-center mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 48 48" class="text-center">
<g fill="currentColor">
<path fill-rule="evenodd"
d="M13.07 26.285c.962 1.176 3.41 5.533 3.93 7.715h14c.52-2.18 2.965-6.537 3.927-7.712a13.568 13.568 0 0 0 2.982-7.015a13.47 13.47 0 0 0-1.289-7.495a13.813 13.813 0 0 0-5.164-5.671A14.215 14.215 0 0 0 24.002 4c-2.637 0-5.221.73-7.454 2.105a13.814 13.814 0 0 0-5.166 5.67a13.47 13.47 0 0 0-1.292 7.493c.299 2.567 1.332 5 2.98 7.017ZM25 12l-6 9h4v6l6-9h-4v-6Z"
clip-rule="evenodd" />
<path
d="M17 37a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H18a1 1 0 0 1-1-1Zm14 3H17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2Z" />
</g>
</svg>
</div>
<h2 class="pt-4 text-center font-semibold">Electricity </h2>
</div>
<div>
<div class="bg-blue-800 text-blue-200 rounded-full w-14 h-14 flex items-center justify-center mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 512 512">
<path fill="currentColor"
d="M244.8 32c11.2 35.25-4.8 69-36.8 80c4.4 13.1 21 26.2 37.4 30.5c12.2-17.7 23.6-37.4 19.9-55.32c12.5 15.62 18.5 41.02 6 54.42c15.3-4.6 30.2-15.5 32.7-29.6c5.7-32.68-36.3-64-59.2-80zM91.24 103L199 218.1v-26.4L132.8 121H192v-18H91.24zM320 103v18h59.2L313 191.7V233h36v-18h-33.1l104.9-112H320zm-87 64v16h46v-16h-46zm-16 34v30h78v-30h-78zm150 0v46h21v-46h-21zm-175 48c.5 0-5.3 1.7-11.4 6.2c-6.1 4.5-13.2 11.2-19.8 18.7c-10.3 11.7-18.8 25.9-22.2 37.1H329v146H137v30h238V320c0-11.5-10.5-31-23.8-46.1c-6.6-7.5-13.7-14.2-19.8-18.7c-6.1-4.5-11.9-6.2-11.4-6.2H192zm-55 80v110h174V329H137z" />
</svg>
</div>
<h2 class="pt-4 text-center font-semibold">Gas cylinder booking</h2>
</div>
<div>
<div class="bg-blue-800 text-blue-200 rounded-full w-14 h-14 flex items-center justify-center mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 512 512">
<path fill="currentColor"
d="m132.992 48.756l-9.984 14.976l77.287 51.524c4.32-4.192 9.542-8.012 15.703-11.162l-83.006-55.338zm246.016 0l-83.006 55.338c6.16 3.15 11.383 6.97 15.703 11.162l77.287-51.524l-9.984-14.976zM256 113.244c-22 0-35.334 7.06-43.637 15.363c-4.703 4.704-7.58 9.97-9.316 14.637h105.906c-1.736-4.668-4.613-9.933-9.316-14.637c-8.303-8.303-21.637-15.363-43.637-15.363zm-191.936 48c-5.044 0-11.106 2.784-15.697 7.37c-4.59 4.584-7.367 10.63-7.367 15.63v279h430V184.2c.026-5.457-2.764-11.393-7.227-15.87c-4.463-4.477-10.346-7.086-14.826-7.086H64.064zm30.295 23h257.745c10.374 0 20.79 6.818 26.776 16H112c-16 0-32 16-32 32v160c25.924-162.54 145.877-185.697 299.016-191.795c3.106 4.836 4.984 10.315 4.984 15.794v192c0 16-16 32-33.88 32H95.35c-15.35 0-31.35-16-31.35-32v-192c0-16 16-32 30.36-32zm328.663 7c13.7 0 25 11.3 25 25s-11.3 25-25 25s-25-11.3-25-25s11.3-25 25-25zm-23.023 144h48v18h-48v-18zm0 32h48v18h-48v-18zm0 32h48v18h-48v-18z" />
</svg>
</div>
<h2 class="pt-4 text-center font-semibold">DTH / Cable Tv</h2>
</div>
<div>
<div class="bg-blue-800 text-blue-200 rounded-full w-14 h-14 flex items-center justify-center mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12.5 21H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v7m-2 7h6m-3-3v6M11 4h2m-1 13v.01" />
</svg>
</div>
<h2 class="pt-4 text-center font-semibold">Postpaid Mobile</h2>
</div>
</div>
<div class="flex items-center justify-center py-3">
<button class="rounded-full border px-4 py-1 text-blue-300 font-semibold">See more</button>
</div>
</section>
<!-- Promotions -->
<section class="text-white px-4 ">
<div class="">
<h2 class="text-2xl p-2">Promotions</h2>
</div>
<div class="grid grid-cols-4">
<div>
<div class=" w-14 h-14 flex items-center justify-center mx-auto">
<img src="./public/images/reward.jpg" alt="reward" class="rounded-full">
</div>
<h2 class="pt-1 text-center">Rewards </h2>
</div>
<div>
<div class=" w-14 h-14 flex items-center justify-center mx-auto">
<img src="./public/images/offer.jpg" alt="reward" class="rounded-full">
</div>
<h2 class="pt-1 text-center">Offers </h2>
</div>
<div>
<div class=" w-14 h-14 flex items-center justify-center mx-auto">
<img src="./public/images/refferal.jpg" alt="reward" class="rounded-full">
</div>
<h2 class="pt-1 text-center ">Refferals </h2>
</div>
</div>
</section>
<!-- Promotions -->
<section class="text-white px-4 ">
<div class="">
<h2 class="text-2xl pl-2 pr-2 pb-2 pt-5">Manage your money</h2>
</div>
<div class="flex p-2 gap-2">
<div class="border border-gray-700 flex items-center px-2 py-1 rounded-lg space-x-3 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="text-blue-500">
<path fill="currentColor"
d="m15 22l-1.41 1.41L16.17 26H4V8H2v18c0 1.103.897 2 2 2h12.17l-2.58 2.59L15 32l5-5l-5-5Z" />
<circle cx="11" cy="16" r="1" fill="currentColor" />
<path fill="currentColor"
d="M24 20H8c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h16c1.103 0 2 .897 2 2v4c0 1.103-.897 2-2 2ZM8 14v4h16v-4H8Z" />
<path fill="currentColor"
d="M28 4H15.83l2.58-2.59L17 0l-5 5l5 5l1.41-1.41L15.83 6H28v18h2V6c0-1.103-.897-2-2-2Z" />
</svg>
<p class="tracking-widetracking-widest font-medium">Loans</p>
</div>
<div class="border border-gray-700 flex items-center px-2 py-1 rounded-lg space-x-3 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="text-blue-500">
<path fill="currentColor"
d="m1 22l1.5-5h7l1.5 5H1m12 0l1.5-5h7l1.5 5H13m-7-7l1.5-5h7l1.5 5H6m17-8.95l-3.86 1.09L18.05 11l-1.09-3.86l-3.86-1.09l3.86-1.09l1.09-3.86l1.09 3.86L23 6.05Z" />
</svg>
<p class="tracking-widetracking-widest font-medium">Gold</p>
</div>
</div>
<div class="flex items-center px-1 py-5">
<div class="pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" class="text-blue-400">
<path fill="currentColor"
d="M30 20a13.854 13.854 0 0 0-2.23-7.529l-1.444 1.445A11.892 11.892 0 0 1 28 20zM28 9.414L26.586 8l-8.567 8.567A3.952 3.952 0 0 0 16 16a4 4 0 1 0 4 4a3.953 3.953 0 0 0-.567-2.02zM16 22a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2zm0-14a11.909 11.909 0 0 1 6.083 1.674l1.454-1.453A13.977 13.977 0 0 0 2 20h2A12.014 12.014 0 0 1 16 8z" />
</svg>
</div>
<p class=" flex-1 font-semibold pl-4">Check your CIBIL score for free</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path fill="currentColor"
d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z" />
</svg>
</div>
<div class="flex items-center px-1 py-5">
<div class="pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" class="text-blue-400">
<path fill="currentColor"
d="M140 80v41.21l34.17 20.5a12 12 0 1 1-12.34 20.58l-40-24A12 12 0 0 1 116 128V80a12 12 0 0 1 24 0Zm-12-52a99.38 99.38 0 0 0-70.76 29.34c-4.69 4.74-9 9.37-13.24 14V64a12 12 0 0 0-24 0v40a12 12 0 0 0 12 12h40a12 12 0 0 0 0-24H57.77c5.23-6 10.6-11.78 16.49-17.74a76 76 0 1 1 1.58 109a12 12 0 0 0-16.48 17.46A100 100 0 1 0 128 28Z" />
</svg>
</div>
<p class=" flex-1 font-semibold pl-4">Show transaction history</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path fill="currentColor"
d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z" />
</svg>
</div>
<div class="flex items-center px-1 pt-5 pb-10">
<div class="pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-blue-400">
<path fill="currentColor" d="M11.5 1L2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7H4Z">
</path>
</svg>
</div>
<p class=" flex-1 font-semibold pl-4">Check bank balance</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path fill="currentColor"
d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z" />
</svg>
</div>
</section>
<!-- Ending Banner -->
<footer class="bg-cover" style="background-image: url(./public/images/gpay-footer.jpg); height:400px;">
<div class="text-white pl-8 pt-14">
<h1 class="font-semibold pb-3">Invite friends to get ₹201</h1>
<p class="text-gray-300 text-sm pb-6">Invite friends to Google Pay and geyt ₹201 when your <br>
friends sends the first payment. Then get ₹21!</p>
<div class="flex items-center pb-4">
<p class="text-gray-300 text-sm">Copy your code
<span class="text-white font-semibold">130j694</span>
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="p-0.5">
<path fill="currentColor" class="text-blue-300 "
d="M9 18q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm-4 6q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-6V4v12Z">
</path>
</svg>
</div>
<button class="rounded-full border px-6 py-2 text-blue-300 font-semibold">Invite</button>
</div>
</footer>
</div>
<div class="bg-[#1e1f1f] py-3">
<p class="text-white text-xs text-center">Showing businesses based on your location - Learn more</p>
</div>
<div class="text-white text-center font-semibold pt-4 pb-1 bg-[#343435] flex items-center justify-center space-x-2">
<a href="https://www.linkedin.com/in/esakki-m/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
height="20" viewBox="0 0 20 20" class="hover:text-blue-700 inline-block items-center">
<path fill="currentColor"
d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973c0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355c-.537 0-.856.371-.997.728c-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01c1.279 0 2.238.857 2.238 2.699v3.699z" />
</svg></a>
<p class="items-center">Clone G-pay designed at ©2023</p>
<a href="https://github.com/esakki2104prsnl/gpay-using-tailwind" target="_blank"><svg
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
class="inline-block items-center hover:text-blue-700">
<path fill="currentColor"
d="M12 .999c-6.074 0-11 5.05-11 11.278c0 4.983 3.152 9.21 7.523 10.702c.55.104.727-.246.727-.543v-2.1c-3.06.683-3.697-1.33-3.697-1.33c-.5-1.304-1.222-1.65-1.222-1.65c-.998-.7.076-.686.076-.686c1.105.08 1.686 1.163 1.686 1.163c.98 1.724 2.573 1.226 3.201.937c.098-.728.383-1.226.698-1.508c-2.442-.286-5.01-1.253-5.01-5.574c0-1.232.429-2.237 1.132-3.027c-.114-.285-.49-1.432.107-2.985c0 0 .924-.303 3.026 1.156c.877-.25 1.818-.375 2.753-.38c.935.005 1.876.13 2.755.38c2.1-1.459 3.023-1.156 3.023-1.156c.598 1.554.222 2.701.108 2.985c.706.79 1.132 1.796 1.132 3.027c0 4.332-2.573 5.286-5.022 5.565c.394.35.754 1.036.754 2.088v3.095c0 .3.176.652.734.542C19.852 21.484 23 17.258 23 12.277C23 6.048 18.075.999 12 .999Z" />
</svg></a>
</div>
</body>
</html>