-
Notifications
You must be signed in to change notification settings - Fork 0
/
light.html
556 lines (527 loc) · 31.8 KB
/
light.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
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!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" />
<!-- favicon -->
<link rel="shortcut icon" href="https://i.pinimg.com/originals/70/08/30/7008309f03e2f4134da8eedb11e791f3.jpg"
type="image/x-icon">
<title>Gpay</title>
<!-- tailwind css -->
<!-- <link rel="stylesheet" href="./assets/css/main.css"> -->
<!-- output dev -->
<link rel="stylesheet" href="./dist/assets/index-8dfe3d28.css">
</head>
<body class="max-w-md mx-auto bg-cyan-900 py-10">
<!-- header section -->
<header class="bg-gray-50 pb-4">
<section class="py-1 flex items-center justify-between">
<div class="flex items-center">
<img
src="https://static.vecteezy.com/system/resources/previews/017/221/784/non_2x/google-pay-logo-transparent-free-png.png"
alt="google-pay logo" class="w-14 ">
<h4 class="text-black text-lg font-medium hover:cursor-pointer hover:text-cyan-500">Google Pay</h4>
</div>
<div class="flex items-center">
<a href="https://github.com/MUTHUAKALYA/Google-Pay-UI" title="view-github" target="_blank"
class="text-black w-10 hover:text-cyan-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
<path fill="currentColor"
d="M8 1C4.13 1 1 4.21 1 8.18c0 3.14 1.96 5.81 4.69 6.79c.37.09.31-.17.31-.36v-1.25c-2.12.26-2.21-1.19-2.35-1.43c-.29-.5-.97-.63-.76-.87c.48-.26.98.06 1.55.93c.41.63 1.22.52 1.63.42c.09-.38.28-.71.54-.98c-2.2-.4-3.12-1.78-3.12-3.42c0-.8.25-1.53.76-2.12c-.32-.97.03-1.8.08-1.93c.91-.08 1.85.67 1.93.73c.52-.14 1.11-.22 1.77-.22s1.25.08 1.78.22c.18-.14 1.05-.78 1.9-.71c.05.12.39.94.09 1.9c.51.59.76 1.33.76 2.13c0 1.64-.92 3.02-3.13 3.42a2 2 0 0 1 .44.67c.1.25.15.52.15.79v1.81c.01.14 0 .29.23.29c2.77-.96 4.76-3.65 4.76-6.81c0-3.97-3.13-7.19-7-7.19Z" />
</svg>
</a>
<a href="index.html" title="switch-theme" class="text-black w-10 hover:text-cyan-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z" />
</svg>
</a>
<div class="w-8 me-3 flex items-center">
<a href="" title="view-profile">
<img src="https://ui-avatars.com/api/?background=random&name=Muthu+Akalya"
alt="Muthu Akalya Profile Picture" class="rounded-full">
</a>
</div>
</div>
</section>
<hr class=" border-gray-500">
<section >
<div>
<img src="./public/images/gpay-hero-banner-white.jpg" alt="Gpay-header">
</div>
<!-- <section class="flex p-3 space-x-2 items-center absolute top-0 w-full">
<div class="flex"> -->
<!-- search bar -->
<!-- <div class="flex-1 items-center justify-center">
<div class="relative">
<input type="text" placeholder="Pay friends and merchants"
class="bg-gray-800 rounded-full p-1 pl-12 outline-none text-gray-300 w-full">
</div> -->
<!-- search icon -->
<!-- <div class="text-gray-400 absolute top-7 mx-2 ms-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<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>
</div>
</div>
</div>
</div>
</section> -->
</section>
</header>
<!-- icons section appears here -->
<section class="bg-gray-50 py-4 ">
<section class="grid grid-rows-2 space-y-2">
<!-- row-1 -->
<section class="grid grid-cols-4 py-2">
<!-- QR code -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="Scan-QR-code">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
<path fill="currentColor"
d="M9.5 6.5v3h-3v-3h3M11 5H5v6h6V5zm-1.5 9.5v3h-3v-3h3M11 13H5v6h6v-6zm6.5-6.5v3h-3v-3h3M19 5h-6v6h6V5zm-6 8h1.5v1.5H13V13zm1.5 1.5H16V16h-1.5v-1.5zM16 13h1.5v1.5H16V13zm-3 3h1.5v1.5H13V16zm1.5 1.5H16V19h-1.5v-1.5zM16 16h1.5v1.5H16V16zm1.5-1.5H19V16h-1.5v-1.5zm0 3H19V19h-1.5v-1.5zM22 7h-2V4h-3V2h5v5zm0 15v-5h-2v3h-3v2h5zM2 22h5v-2H4v-3H2v5zM2 2v5h2V4h3V2H2z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col">
<span>Scan any</span>
<span>QR code</span>
</div>
</section>
<!-- Pay contacts -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="pay-contact">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
<path fill="currentColor"
d="M19 3H8C6.346 3 5 4.346 5 6v1H4a1 1 0 1 0 0 2h1v2H4a1 1 0 1 0 0 2h1v2H4a1 1 0 1 0 0 2h1v1c0 1.654 1.346 3 3 3h11c1.654 0 3-1.346 3-3V6c0-1.654-1.346-3-3-3zM7 6c0-.551.449-1 1-1v2H7V6zm0 3h1v2H7V9zm0 4h1v2H7v-2zm0 5v-1h1v2c-.551 0-1-.449-1-1zm13 0c0 .551-.449 1-1 1H9V5h10c.551 0 1 .449 1 1v12z" />
<circle cx="14" cy="10.5" r="2" fill="currentColor" />
<path fill="currentColor"
d="M14 13.356c-1.562 0-2.5.715-2.5 1.429c0 .357.938.715 2.5.715c1.466 0 2.5-.357 2.5-.715c0-.714-.98-1.429-2.5-1.429z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Pay</span>
<span>Contacts</span>
</div>
</section>
<!-- pay phone number -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="pay-no">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
<path fill="currentColor"
d="M7 23q-.825 0-1.413-.588T5 21v-6h2v3h10V6H7v3H5V3q0-.825.588-1.413T7 1h10q.825 0 1.413.588T19 3v18q0 .825-.588 1.413T17 23H7Zm0-3v1h10v-1H7Zm3.15-7H3q-.425 0-.713-.288T2 12q0-.425.288-.713T3 11h7.15l-.875-.9Q9 9.825 9 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-.687.288T9.3 15.3q-.275-.275-.288-.688t.263-.712l.875-.9ZM7 4h10V3H7v1Zm0 0V3v1Zm0 16v1v-1Z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Pay Phone</span>
<span>Number</span>
</div>
</section>
<!-- Bank Transfer -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="bank-transfer">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
<path fill="currentColor" d="M11.5 1L2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7H4Z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Bank</span>
<span>Transfer</span>
</div>
</section>
</section>
<!-- row-2 -->
<section class="grid grid-cols-4 py-2">
<!-- Pay UPI id or Number -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="pay-upi-id">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M17.5 19.125A9 9 0 1 1 21 12c0 5.5-6 5.5-6 2V8" />
<path
d="M15 12v-1.5C15 9.12 13.657 8 12 8s-3 1.12-3 2.5V12m6 0v1.5c0 1.38-1.343 2.5-3 2.5s-3-1.12-3-2.5V12" />
</g>
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col">
<span>Pay UPI ID</span>
<span>or Number</span>
</div>
</section>
<!-- Self Transfer -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="self-transfer">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 20q-1 0-1.7-.7T4 17.6v-1.175q0-.95.688-1.763q.687-.812 1.812-1.4q1.125-.587 2.538-.925Q10.45 12 11.9 12q1.45 0 2.9.337q1.45.338 2.6.938q1.15.6 1.875 1.413Q20 15.5 20 16.45v1.15q0 1-.7 1.7t-1.7.7Zm5.5-9q-1.45 0-2.475-1.025Q8.4 8.95 8.4 7.5q0-1.45 1.025-2.475Q10.45 4 11.9 4q1.475 0 2.487 1.025Q15.4 6.05 15.4 7.5q0 1.45-1.025 2.475Q13.35 11 11.9 11Z"/></svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Self</span>
<span>transfer</span>
</div>
</section>
<!-- pay Bills -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer" title="pay-bills">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M6 22q-1.25 0-2.125-.875T3 19v-2q0-.425.288-.713T4 16h2V2.6q0-.175.15-.238t.275.063l.725.725q.15.15.35.15t.35-.15l.8-.8Q8.8 2.2 9 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.725-.725q.125-.125.275-.063T21 2.6V19q0 1.25-.875 2.125T18 22H6Zm12-2q.425 0 .713-.288T19 19V5H8v11h8q.425 0 .713.288T17 17v2q0 .425.288.713T18 20ZM10 7h4q.425 0 .713.288T15 8q0 .425-.288.713T14 9h-4q-.425 0-.713-.288T9 8q0-.425.288-.713T10 7Zm0 3h4q.425 0 .713.288T15 11q0 .425-.288.713T14 12h-4q-.425 0-.713-.288T9 11q0-.425.288-.713T10 10Zm7-1q-.425 0-.713-.288T16 8q0-.425.288-.713T17 7q.425 0 .713.288T18 8q0 .425-.288.713T17 9Zm0 3q-.425 0-.713-.288T16 11q0-.425.288-.713T17 10q.425 0 .713.288T18 11q0 .425-.288.713T17 12ZM6 20h9v-2H5v1q0 .425.288.713T6 20Zm-1 0v-2v2Z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Pay</span>
<span>bills</span>
</div>
</section>
<!-- Mobile recharge-->
<section class="flex flex-col justify-center items-center hover:cursor-pointer " title="recharge-your-mobile">
<div class="text-black hover:text-cyan-500 pb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
<path fill="currentColor"
d="M11.5 13h-1.2q-.275 0-.425-.238t-.025-.487l2.175-4.325q.1-.175.288-.138t.187.238V11h1.2q.275 0 .425.238t.025.487l-2.175 4.325q-.1.175-.288.138t-.187-.238V13ZM7 23q-.825 0-1.413-.588T5 21V3q0-.825.588-1.413T7 1h10q.825 0 1.413.588T19 3v18q0 .825-.588 1.413T17 23H7Zm0-3v1h10v-1H7Zm0-2h10V6H7v12ZM7 4h10V3H7v1Zm0 0V3v1Zm0 16v1v-1Z" />
</svg>
</div>
<div class="text-gray-500 text-xs font-medium flex flex-col items-center justify-center">
<span>Mobile</span>
<span>recharge</span>
</div>
</section>
</section>
</section>
</section>
<!-- people section -->
<section class="bg-gray-50 py-4">
<section>
<h4 class="text-black font-medium text-xl px-6">People</h4>
</section>
<section class="grid grid-cols-4 pt-5 space-y-2">
<!-- first row -->
<section class="flex flex-col justify-center items-center hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Abi" alt="Abi" class="rounded-full w-12 ">
</div>
<div class="">
<span class="text-black text-sm hover:text-cyan-500">Abinaya</span>
</div>
</section>
<section class="flex flex-col justify-center items-center hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Mano" alt="Mano" class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Mano</span>
</div>
</section>
<section class="flex flex-col justify-center items-center hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Sam" alt="Sam" class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Samyuk..</span>
</div>
</section>
<section class="flex flex-col justify-center items-center hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Ranjit" alt="Ranjit" class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Ranjit</span>
</div>
</section>
<!-- second row -->
<section class="flex flex-col justify-center items-center py-3 hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Abarana" alt="Abarana"
class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Abarna</span>
</div>
</section>
<section class="flex flex-col justify-center items-center py-3 hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Kalai" alt="Kalai" class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Kalai</span>
</div>
</section>
<section class="flex flex-col justify-center items-center py-3 hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?background=random&name=Uma" alt="Uma" class="rounded-full w-12 ">
</div>
<div>
<span class="text-black text-sm hover:text-cyan-500">Uma Ra..</span>
</div>
</section>
<section class="flex flex-col items-center justify-center py-3" title="view-more">
<a href="" class="flex flex-col items-center">
<div
class="border-2 border-gray-500 text-black hover:text-gray-50 hover:border-none hover:bg-cyan-500 rounded-full w-12 h-12 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" />
</svg>
</div>
<div class="text-black text-sm hover:text-cyan-500">
<span>More</span>
</div>
</a>
</section>
</section>
</section>
<!-- Businesses section -->
<section class="bg-gray-50 py-4">
<section class="flex justify-between px-6 items-center py-2">
<div class="">
<h4 class="text-black font-medium text-xl">Businesses</h4>
</div>
<div
class="text-black flex items-center justify-center bg-cyan-500 w-24 p-1 rounded-full hover:bg-cyan-600 hover:cursor-pointer hover:text-gray-50 font-medium ">
<div class="px-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M80 176a16 16 0 0 0-16 16v216c0 30.24 25.76 56 56 56h272c30.24 0 56-24.51 56-54.75V192a16 16 0 0 0-16-16Zm80 0v-32a96 96 0 0 1 96-96h0a96 96 0 0 1 96 96v32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M160 224v16a96 96 0 0 0 96 96h0a96 96 0 0 0 96-96v-16" />
</svg>
</div>
<div class="text-sm">
<span>Explore</span>
</div>
</div>
</section>
<section class="grid grid-cols-4 py-3">
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12">
<img src="https://ui-avatars.com/api/?background=random&name=New+Stores" alt="New stores super-market"
class="rounded-full">
</div>
<div class="text-black text-sm hover:text-cyan-500 pt-1">
<span>New Store..</span>
</div>
</section>
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12">
<img
src="https://play-lh.googleusercontent.com/PTLQRc7a8vRjs8fmM7hRI36s7gGYalxIFd80xZDvYkIl91d709fcl4-UH9vZbxWDGG8"
alt="Tata Play Dish" class="rounded-full">
</div>
<div class="text-black text-sm hover:text-cyan-500 pt-1">
<span>Tata Play D..</span>
</div>
</section>
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12">
<img src="https://seeklogo.com/images/J/jio-logo-7720D2E7BA-seeklogo.com.png" alt="Jio-Prepaid rounded-full">
</div>
<div class="">
<span class="text-black text-sm hover:text-cyan-500 pt-1">Jio-Prepaid</span>
</div>
</section>
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<a href="" class="flex flex-col items-center">
<div
class="border-2 border-gray-500 text-black hover:text-gray-50 hover:border-none hover:bg-cyan-500 rounded-full w-12 h-12 flex items-center justify-center" title="view-more">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" />
</svg>
</div>
<div class="text-black text-sm hover:text-cyan-500 pt-1">
<span>More</span>
</div>
</a>
</section>
</section>
</section>
<!-- Bills section -->
<section class="bg-gray-50 ">
<!-- promotions section -->
<section class="bg-gray-50 py-2">
<section class="text-xl text-black font-medium px-6">
<h4>Promotions</h4>
</section>
<section class="grid grid-cols-4 py-4">
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12" title="view-your-rewards">
<img
src="https://cdn.icon-icons.com/icons2/3570/PNG/512/success_reward_achievement_badge_medal_prize_trophy_icon_225522.png"
alt="Rewards" class="rounded-full">
</div>
<div class="text-black text-sm pt-1 hover:text-cyan-500"><span>Rewards</span></div>
</section>
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12" title="view-offers">
<img
src="https://i.pinimg.com/736x/55/7d/7a/557d7a0ef12372add5356b3d23d5c96d.jpg"
class="rounded-full object-fill">
</div>
<div class="text-black text-sm pt-1 hover:text-cyan-500"><span>Offers</span></div>
</section>
<section class="flex flex-col items-center justify-center hover:cursor-pointer">
<div class="w-12 " title="Refer-a-friend">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQY0G80g4JxOw8AWdEq1tvFx2FHCidQTiVuw&usqp=CAU"
alt="Rewards" class="rounded-full">
</div>
<div class="text-black text-sm pt-1 hover:text-cyan-500"><span>Referrals</span></div>
</section>
</section>
</section>
<!-- Manage Your money section -->
<section class="bg-gray-50 py-4 ">
<div class="text-black font-medium text-xl pb-2 px-6">
<h4>Manage Your Money</h4>
</div>
<section class="py-3 px-6">
<section class=" border-2 border-gray-300 w-full text-black p-3 flex gap-x-4 rounded-xl ">
<div class="w-12 h-12 ">
<img
src="https://static.vecteezy.com/system/resources/previews/010/998/135/non_2x/cute-3d-credit-card-illustration-design-free-png.png"
class="rounded-full">
</div>
<section class="flex flex-col text-sm font-medium">
<p>Exclusive invite to save up to ₹12,000/year with Axis Bank AC...</p>
<div class="flex items-center text-sm text-cyan-600 pt-2 hover:cursor-pointer hover:text-cyan-800">
<span class="">Apply now</span>
<div class="flex items-center justify-center text-cyan-600">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" class="space-x-2">
<path fill="currentColor"
d="m14.475 12l-7.35-7.35q-.375-.375-.363-.888t.388-.887q.375-.375.888-.375t.887.375l7.675 7.7q.3.3.45.675t.15.75q0 .375-.15.75t-.45.675l-7.7 7.7q-.375.375-.875.363T7.15 21.1q-.375-.375-.375-.888t.375-.887L14.475 12Z" />
</svg>
</div>
</div>
</section>
</section>
<div class="py-3 flex justify-center">
<section
class="flex items-center justify-center border-2 border-gray-300 rounded-xl w-44 p-1 hover:bg-cyan-500 hover:cursor-pointer text-cyan-600 hover:text-white hover:border-none">
<div class=" pe-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
</svg>
</div>
<div class="text-sm text-black font-medium">
<span>Get a credit card</span>
</div>
</section>
<section
class="flex items-center justify-center border-2 border-gray-300 rounded-xl w-24 p-1 ml-2 hover:cursor-pointer hover:bg-cyan-500 text-cyan-600 hover:text-white hover:border-none">
<div class="pe-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M9.75 12a2.25 2.25 0 1 0 4.5 0a2.25 2.25 0 0 0-4.5 0Z"/><path fill-rule="evenodd" d="M3.778 18.326C4.787 19 6.19 19 9 19h6c2.809 0 4.213 0 5.222-.674a4.003 4.003 0 0 0 1.104-1.104C22 16.213 22 14.81 22 12c0-2.809 0-4.213-.674-5.222a4.002 4.002 0 0 0-1.104-1.104C19.213 5 17.81 5 15 5H9c-2.809 0-4.213 0-5.222.674a4 4 0 0 0-1.104 1.104C2 7.787 2 9.19 2 12c0 2.809 0 4.213.674 5.222a4 4 0 0 0 1.104 1.104ZM12 15.75a3.75 3.75 0 1 1 0-7.5a3.75 3.75 0 0 1 0 7.5Zm-6.5 0a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 1.5 0v6a.75.75 0 0 1-.75.75ZM17.75 15a.75.75 0 0 0 1.5 0V9a.75.75 0 0 0-1.5 0v6Z" clip-rule="evenodd"/></g></svg>
</div>
<div class="text-sm text-black font-medium">
<span>Loans</span>
</div>
</section>
<section
class="flex items-center justify-center border-2 border-gray-300 rounded-xl w-24 p-1 ml-2 hover:cursor-pointer hover:bg-cyan-500 text-cyan-600 hover:text-white hover:border-none">
<div class="pe-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024"><path fill="currentColor" d="m905.9 806.7l-40.2-248c-.6-3.9-4-6.7-7.9-6.7H596.2c-3.9 0-7.3 2.8-7.9 6.7l-40.2 248c-.1.4-.1.9-.1 1.3c0 4.4 3.6 8 8 8h342c.4 0 .9 0 1.3-.1c4.3-.7 7.3-4.8 6.6-9.2zm-470.2-248c-.6-3.9-4-6.7-7.9-6.7H166.2c-3.9 0-7.3 2.8-7.9 6.7l-40.2 248c-.1.4-.1.9-.1 1.3c0 4.4 3.6 8 8 8h342c.4 0 .9 0 1.3-.1c4.4-.7 7.3-4.8 6.6-9.2l-40.2-248zM342 472h342c.4 0 .9 0 1.3-.1c4.4-.7 7.3-4.8 6.6-9.2l-40.2-248c-.6-3.9-4-6.7-7.9-6.7H382.2c-3.9 0-7.3 2.8-7.9 6.7l-40.2 248c-.1.4-.1.9-.1 1.3c0 4.4 3.6 8 8 8z"/></svg>
</div>
<div class="text-sm text-black font-medium">
<span>Gold</span>
</div>
</section>
</div>
</section>
<div class="pl-6 pr-4">
<section class="flex items-center py-4 hover:cursor-pointer ">
<div class="text-cyan-600 me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M7.375 21.025q-.9-.025-1.713-.462t-1.537-1.288q-1-1.2-1.563-2.862T2 13q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 3q2.075 0 3.9.8t3.175 2.175q1.35 1.375 2.138 3.225T22 13.175q0 1.925-.625 3.6T19.6 19.6q-.7.7-1.475 1.063t-1.575.362q-.45 0-.9-.112t-.9-.338l-1.4-.7q-.3-.15-.638-.225T12 19.575q-.375 0-.713.075t-.637.225l-1.4.7q-.475.25-.938.363t-.937.087Zm.05-2q.225 0 .463-.05t.462-.175l1.4-.7q.525-.275 1.088-.4t1.137-.125q.575 0 1.15.125t1.1.4l1.425.7q.225.125.45.175t.45.05q.475 0 .9-.25t.85-.75q.8-.95 1.25-2.275t.45-2.725q0-3.35-2.325-5.687T12 5Q8.65 5 6.325 7.35T4 13.05q0 1.425.462 2.775T5.75 18.1q.425.5.825.713t.85.212ZM15.85 12h2.05q-.375-2.2-2.037-3.6T12 7Q9.8 7 8.125 8.413T6.1 12h2.05q.35-1.35 1.425-2.175T12 9q.425 0 .8.075t.725.225l-2.9 3.875l1.65 1.15l2.825-3.8q.25.325.438.688t.312.787ZM12 12Z" />
</svg>
</div>
<div class="flex flex-1 justify-between items-center">
<span class="text-black text-sm font-medium">Check your CIBIL score for free</span>
<a href="cibilscorelight.html" class="text-gray-500 hover:text-white hover:bg-cyan-500 p-2 hover:rounded-full" title="check-CIBIL-score">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="space-x-2">
<path fill="currentColor"
d="m14.475 12l-7.35-7.35q-.375-.375-.363-.888t.388-.887q.375-.375.888-.375t.887.375l7.675 7.7q.3.3.45.675t.15.75q0 .375-.15.75t-.45.675l-7.7 7.7q-.375.375-.875.363T7.15 21.1q-.375-.375-.375-.888t.375-.887L14.475 12Z" />
</svg>
</a>
</div>
</section>
<section class="flex items-center py-4 hover:cursor-pointer">
<div class="text-cyan-600 me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z" />
</svg>
</div>
<div class="flex flex-1 justify-between items-center">
<span class="text-black text-sm font-medium">Show transaction history</span>
<a href="" class="text-gray-500 hover:text-white hover:bg-cyan-500 p-2 hover:rounded-full" title="view-transaction-history">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="space-x-2">
<path fill="currentColor"
d="m14.475 12l-7.35-7.35q-.375-.375-.363-.888t.388-.887q.375-.375.888-.375t.887.375l7.675 7.7q.3.3.45.675t.15.75q0 .375-.15.75t-.45.675l-7.7 7.7q-.375.375-.875.363T7.15 21.1q-.375-.375-.375-.888t.375-.887L14.475 12Z" />
</svg>
</a>
</div>
</section>
<section class="flex items-center py-4 hover:cursor-pointer">
<div class="text-cyan-600 me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M11.5 1L2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7H4Z" />
</svg>
</div>
<div class="flex flex-1 justify-between items-center">
<span class="text-black text-sm font-medium">Check bank balance</span>
<a href="bankbalancelight.html" title="view-bank-balance" class="text-gray-500 hover:text-white hover:bg-cyan-500 p-2 hover:rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="space-x-2">
<path fill="currentColor"
d="m14.475 12l-7.35-7.35q-.375-.375-.363-.888t.388-.887q.375-.375.888-.375t.887.375l7.675 7.7q.3.3.45.675t.15.75q0 .375-.15.75t-.45.675l-7.7 7.7q-.375.375-.875.363T7.15 21.1q-.375-.375-.375-.888t.375-.887L14.475 12Z" />
</svg>
</a>
</div>
</section>
</div>
</section>
<!-- footer section appears here -->
<footer class="bg-gray-50 ">
<section class="relative">
<div class="">
<img src="./public/images/gpay-footer-light.jpg" alt="footer-section-image" class="">
</div>
<section class="absolute bottom-36">
<div class="px-6">
<h6 class="font-medium text-black text-base">Invite friends to get ₹201</h6>
<p class="text-sm text-gray-500 pt-4 font-medium">Invite friends to Google Pay and get ₹201 when your friend
sends their
first payment. They get ₹21!</p>
</div>
<section class="px-6">
<div class="flex items-center py-4 text-gray-500">
<div class="font-medium">
<span class="text-sm">Copy your code <strong class="text-gray-700">w4rh8s</strong> </span>
</div>
<div class=" px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<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>
</div>
</div>
<div
class=" flex border-2 border-gray-300 p-2 rounded-full w-24 items-center justify-center text-cyan-600 hover:text-white hover:bg-cyan-600 font-medium hover:cursor-pointer">
<button class="">Invite</button>
</div>
</section>
</section>
</section>
<section class="flex justify-center items-center py-4">
<span class=" text-gray-500 text-xs font-medium">Showing businesses based on your location - Learn more</span>
</section>
<section class="">
<hr class="border-black">
<div class="text-black font-medium font-sm flex justify-center items-center py-3">
<span>Designed by
<a href="https://github.com/" target="_blank" title="view-github">
<strong class="text-cyan-600 hover:text-cyan-800">Muthu Akalya - A</strong>
</a>
</span>
</div>
</section>
</footer>
</body>
</html>