-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
408 lines (381 loc) · 24.1 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gpay</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/imgs/gpay-logo.png" type="image/x-icon">
<!-- css link -->
<!-- <link rel="stylesheet" href="./dist/assets/index-b163a8bf.css"> -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<main class="mx-auto max-w-lg">
<!-- top -->
<section class="flex bg-gpay-primary items-center space-x-4 px-5 py-2">
<div class="w-full flex rounded-full relative text-gpay-gray items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
class="absolute ml-2 text-gpay-white fill-current">
<path fill="currentColor"
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z" />
</svg>
<input type="text"
class="w-full rounded-full p-2 pl-14 outline-none bg-gpay-secondary text-gpay-white shadow-md truncate ..."
placeholder="Pay by name or phone number">
</div>
<div class="h-12 w-12 hover:cursor-pointer">
<img src="https://avatars.githubusercontent.com/u/95954567?v=4" draggable="false" class="h-auto w-full hover:scale-110 rounded-full"
alt="vasanthkumar_24">
</div>
</section>
<!-- hero section -->
<section>
<img src="./assets/imgs/gpay-hero-banner.jpg" draggable="false" class="w-full" alt="gpay-hero-banner">
</section>
<!-- options of pay -->
<section class="py-5 px-5 grid grid-cols-4 gap-4 gap-y-10 text-sm text-center bg-gpay-background">
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#ffffff"
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>
</svg>
<span class="text-gpay-fullwhite mt-2">Scan any <br>
QR code</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" x="0px" y="0px"
class="hover:scale-110">
<path fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd"
d="M4 4C4 2.34315 5.34315 1 7 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H7C5.34315 23 4 21.6569 4 20V18H3C2.44772 18 2 17.5523 2 17C2 16.4477 2.44772 16 3 16H4V13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H4V8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4V4ZM7 3C6.44772 3 6 3.44772 6 4V20C6 20.5523 6.44772 21 7 21H19C19.5523 21 20 20.5523 20 20V4C20 3.44772 19.5523 3 19 3H7ZM10 7C8.89543 7 8 7.89543 8 9C8 13.4183 11.5817 17 16 17C17.1046 17 18 16.1046 18 15C18 13.8954 17.1046 13 16 13H15.4142C14.8838 13 14.3751 13.2107 14 13.5858L13.2929 14.2929C13.279 14.3068 13.2656 14.321 13.2527 14.3355C12.144 13.7635 11.2365 12.856 10.6645 11.7473C10.679 11.7344 10.6932 11.721 10.7071 11.7071L11.4142 11C11.7893 10.6249 12 10.1162 12 9.58579V9C12 7.89543 11.1046 7 10 7Z"
fill="black" />
</svg>
<span class="text-gpay-fullwhite mt-2">Pay <br>
contacts</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#ffffff"
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>
<span class="text-gpay-fullwhite mt-2">Pay
phone <br>number</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#ffffff"
d="M6.5 10h-2v7h2v-7m6 0h-2v7h2v-7m8.5 9H2v2h19v-2m-2.5-9h-2v7h2v-7m-7-6.74L16.71 6H6.29l5.21-2.74m0-2.26L2 6v2h19V6l-9.5-5Z" />
</svg>
<span class="text-gpay-fullwhite mt-2">Bank <br>transfer
</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" width="38" height="38" x="0px" y="0px"
class="hover:scale-110">
<path fill="#ffffff"
d="M18.36,5.64A9,9,0,1,0,16.5,19.8a1,1,0,0,0-1-1.74A7,7,0,1,1,19,12v2a1,1,0,0,1-2,0V12a5,5,0,1,0-1.53,3.59A3,3,0,0,0,21,14V12A8.94,8.94,0,0,0,18.36,5.64ZM12,15a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z" />
</svg>
<span class="text-gpay-fullwhite mt-2">Pay UPI or <br>
number</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"
version="1.1" x="0px" y="0px" viewBox="0 0 50 62.5" style="enable-background:new 0 0 50 50;"
class="hover:scale-110" xml:space="preserve">
<g>
<circle fill="white" cx="20.5" cy="13.3" r="11.9" />
<path fill="white"
d="M28.7,39c0-3.8,1.8-7.1,4.6-9.3c-2.1-1.7-4.5-2.9-7.1-3.7c-3.7,1.6-7.8,1.7-11.4,0C6.2,28.5,0,36.3,0,45.7v2.9h33.8 C30.7,46.5,28.7,43,28.7,39z" />
<path fill="white"
d="M40.4,29.3c-5.3,0-9.6,4.3-9.6,9.6s4.3,9.6,9.6,9.6S50,44.3,50,39S45.7,29.3,40.4,29.3z M45.8,38.7c-0.4,0.4-1.1,0.4-1.5,0 l-2.9-2.9v8.8c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1v-8.8l-2.9,2.9c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l4.7-4.7 c0.2-0.2,0.4-0.3,0.7-0.3c0.3,0,0.5,0.1,0.7,0.3l4.7,4.7C46.2,37.7,46.2,38.3,45.8,38.7z" />
</g>
</svg>
<span class="text-gpay-fullwhite mt-2">Self- <br>
transfer</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" x="0px" y="0px"
class="hover:scale-110">
<path fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd"
d="M4.25 2.5C4.25 2.08579 4.58579 1.75 5 1.75H17C17.4142 1.75 17.75 2.08579 17.75 2.5V17.95H19.5C19.9142 17.95 20.25 18.2858 20.25 18.7V18.8745C20.25 20.6967 18.8061 22.1817 17 22.2477V22.25H8C5.92893 22.25 4.25 20.5711 4.25 18.5V2.5ZM16.8745 20.75C17.7096 20.75 18.4172 20.2043 18.6601 19.45H9.25V20.75H16.8745ZM7.75 20.7363V18.7C7.75 18.2858 8.08579 17.95 8.5 17.95H16.25V3.25H5.75V18.5C5.75 19.6581 6.62501 20.6119 7.75 20.7363Z" />
<path fill="white" fill-rule="evenodd" clip-rule="evenodd"
d="M6.25 13C6.25 12.5858 6.58579 12.25 7 12.25H15C15.4142 12.25 15.75 12.5858 15.75 13C15.75 13.4142 15.4142 13.75 15 13.75H7C6.58579 13.75 6.25 13.4142 6.25 13Z"
fill="black" />
<path fill="white" fill-rule="evenodd" clip-rule="evenodd"
d="M6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H15C15.4142 15.25 15.75 15.5858 15.75 16C15.75 16.4142 15.4142 16.75 15 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16Z" />
</svg>
<span class="text-gpay-fullwhite mt-2">Pay <br>bills</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#ffffff"
d="m14.5 11l-3 6v-4h-2l3-6v4h2zM17 3H7v1h10V3m0 17H7v1h10v-1m0-19c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h10zM7 18h10V6H7v12z" />
</svg>
<span class="text-gpay-fullwhite mt-2">Mobile <br>recharge
</span>
</div>
</section>
<!-- copy text -->
<section class="flex justify-center items-center bg-gpay-background p-8 pb-2">
<div
class="rounded-full px-3 py-1 text-center bg-gpay-secondary hover:cursor-pointer hover:bg-gpay-gray text-gpay-white">
UPI ID : vipvasanth433-1@okaxis
</div>
</section>
<!-- peoples -->
<section class="py-5 px-5 bg-gpay-background">
<h1 class="text-gpay-fullwhite font-normal text-2xl mb-8">People</h1>
<div class="grid grid-cols-4 gap-4 gap-y-10 text-sm text-center">
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://i.pinimg.com/236x/08/d7/43/08d74379f8aae0bfc8d42ad42a973457.jpg" alt="Arjun"
class="h-auto w-full rounded-full" alt="Arjun">
</div>
<span class="text-gpay-fullwhite mt-2">Arjun</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://ui-avatars.com/api/?name=Deepika&background=random" alt="Deepika"
class="h-auto w-full rounded-full" alt="Deepika">
</div>
<span class="text-gpay-fullwhite mt-2">Deepika</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://ui-avatars.com/api/?name=Ganesh&background=random" alt="Ganesh"
class="h-auto w-full rounded-full" alt="Ganesh">
</div>
<span class="text-gpay-fullwhite mt-2">Ganesh</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://www.giftmyemotions.com/image/cache/floralnation/amazone/Pink-Square-Flower-Box-Packing-Box-Gift-Box-with-Beautiful-Ribbon-800x800.jpg" alt="Kavitha"
class="h-auto w-full rounded-full" alt="Kavitha">
</div>
<span class="text-gpay-fullwhite mt-2">Kavitha</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://ui-avatars.com/api/?name=Vijay&background=random" alt="Vijay"
class="h-auto w-full rounded-full" alt="Vijay">
</div>
<span class="text-gpay-fullwhite mt-2">Vijay</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://ui-avatars.com/api/?name=Sangeetha&background=random" alt="Sangeetha"
class="h-auto w-full rounded-full" alt="Sangeetha">
</div>
<span class="text-gpay-fullwhite mt-2">Sangeetha</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 ">
<img src="https://ui-avatars.com/api/?name=Prakash&background=random" alt="Prakash"
class="h-auto w-full hover:scale-110 rounded-full" alt="Prakash">
</div>
<span class="text-gpay-fullwhite mt-2">Prakash</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="flex flex-col items-center justify-center h-14 w-14 border hover:bg-gpay-secondary border-gpay-gray rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">
<path fill="none" stroke="#145aba" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="m112 184l144 144l144-144" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">More</span>
</div>
</div>
</section>
<!-- business section -->
<section class="py-5 px-5 bg-gpay-background">
<div class="flex justify-between items-center text-2xl mb-8">
<h1 class="text-gpay-fullwhite font-normal ">Business</h1>
<a href="#"
class="rounded-full px-3 py-1 text-center hover:bg-gpay-hover_blue bg-gpay-blue text-gpay-light_blue text-[19px]">Explore</a>
</div>
<div class="grid grid-cols-4 gap-4 gap-y-10 text-sm text-center">
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://play-lh.googleusercontent.com/uFg3zOsnGZkIrswmvXyFYhoF3gC4tv0ovFZv0zisJFQ2DZqJyh9SUGrK6D-Tnn1lGqc" alt="Airtel"
class="h-auto w-full rounded-full" alt="Airtel">
</div>
<span class="text-gpay-fullwhite mt-2">Airtel</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://jep-asset.akamaized.net/jio/svg-og/jio_logo.png" alt="Jio"
class="h-auto w-full rounded-full" alt="Jio">
</div>
<span class="text-gpay-fullwhite mt-2">Jio</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:scale-110">
<img src="https://d13ir53smqqeyp.cloudfront.net/d11-static-pages/images/Dream11_Vertical_WhiteonRedBG.jpg" alt="Dream11"
class="h-auto w-full rounded-full" alt="Dream11">
</div>
<span class="text-gpay-fullwhite mt-2">Dream11</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="flex flex-col items-center justify-center h-14 w-14 border hover:bg-gpay-secondary border-gpay-gray rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">
<path fill="none" stroke="#145aba" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="m112 184l144 144l144-144" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">More</span>
</div>
</div>
</section>
<!-- additional -->
<section class="py-5 px-5 bg-gpay-background">
<div class=" text-2xl mb-8">
<h1 class="text-gpay-fullwhite font-normal mb-2">Bills, Recharge and more...</h1>
<h1 class="text-gpay-fullwhite font-normal text-sm">No bills due. Try adding these!</h1>
</div>
<div class="grid grid-cols-4 gap-4 gap-y-10 text-sm text-center">
<div class="flex flex-col items-center ">
<div
class="flex flex-col items-center justify-center h-14 w-14 hover:bg-gpay-hover_blue bg-gpay-blue text-gpay-light_blue rounded-full hover:cursor-pointer ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#c3e7ff"
d="M8 21v-2H4q-.825 0-1.413-.588T2 17V5q0-.825.588-1.413T4 3h16q.825 0 1.413.588T22 5v12q0 .825-.588 1.413T20 19h-4v2H8Zm-4-4h16V5H4v12Zm0 0V5v12Z" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">DTH/cable <br>TV</span>
</div>
<div class="flex flex-col items-center ">
<div
class="flex flex-col items-center justify-center h-14 w-14 hover:bg-gpay-hover_blue bg-gpay-blue text-gpay-light_blue rounded-full hover:cursor-pointer ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"
class="hover:scale-110">
<path fill="none" stroke="#c3e7ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M304 384v-24c0-29 31.54-56.43 52-76c28.84-27.57 44-64.61 44-108c0-80-63.73-144-144-144a143.6 143.6 0 0 0-144 144c0 41.84 15.81 81.39 44 108c20.35 19.21 52 46.7 52 76v24m16 96h64m-80-48h96m-48-48V256" />
<path fill="none" stroke="#c3e7ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M294 240s-21.51 16-38 16s-38-16-38-16" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">Electricity </span>
</div>
<div class="flex flex-col items-center ">
<div
class="flex flex-col items-center justify-center h-14 w-14 hover:bg-gpay-hover_blue bg-gpay-blue text-gpay-light_blue rounded-full hover:cursor-pointer ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hover:scale-110">
<path fill="#c3e7ff"
d="M7 23q-.825 0-1.413-.588T5 21V3q0-.825.588-1.413T7 1h10q.825 0 1.413.588T19 3v18q0 .825-.588 1.413T17 23H7Zm5-2.5q.425 0 .713-.288T13 19.5q0-.425-.288-.713T12 18.5q-.425 0-.713.288T11 19.5q0 .425.288.713T12 20.5ZM7 16h10V6H7v10Z" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">Postpaid <br>mobile</span>
</div>
<div class="flex flex-col items-center ">
<div
class="flex flex-col items-center justify-center h-14 w-14 hover:bg-gpay-hover_blue bg-gpay-blue text-gpay-light_blue rounded-full hover:cursor-pointer ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
class="hover:scale-110">
<path fill="#c3e7ff"
d="M168 128a40 40 0 1 1-40-40a40 40 0 0 1 40 40Zm40 0a79.74 79.74 0 0 0-20.37-53.33a8 8 0 1 0-11.92 10.67a64 64 0 0 1 0 85.33a8 8 0 0 0 11.92 10.67A79.79 79.79 0 0 0 208 128ZM80.29 85.34a8 8 0 1 0-11.92-10.67a79.94 79.94 0 0 0 0 106.67a8 8 0 0 0 11.92-10.67a63.95 63.95 0 0 1 0-85.33Zm158.28-4A119.48 119.48 0 0 0 213.71 44a8 8 0 1 0-11.42 11.2a103.9 103.9 0 0 1 0 145.56A8 8 0 1 0 213.71 212a120.12 120.12 0 0 0 24.86-130.71Zm-206.4 87.14A103.9 103.9 0 0 1 53.71 55.22A8 8 0 1 0 42.29 44a119.87 119.87 0 0 0 0 168a8 8 0 1 0 11.42-11.2a103.61 103.61 0 0 1-21.54-32.32Z" />
</svg>
</div>
<span class="text-gpay-fullwhite mt-2">Broadband <br>online</span>
</div>
</div>
</section>
<!-- show more -->
<section class="flex justify-center items-center bg-gpay-background p-4 pb-2">
<a href="#" class="rounded-full px-5 py-3 text-center border hover:bg-gpay-secondary border-gpay-gray text-gpay-light_blue">See all
</a>
</section>
<!-- promotions -->
<section class="py-5 pb-8 px-5 bg-gpay-background">
<h1 class="text-gpay-fullwhite font-normal text-2xl mb-8">Promotions</h1>
<div class="grid grid-cols-4 gap-4 gap-y-10 text-sm text-center hover:cursor-pointer">
<div class="flex flex-col items-center ">
<div class="h-14 w-14 hover:cursor-pointer hover:scale-110">
<img
src="https://w7.pngwing.com/pngs/556/467/png-transparent-offer-label-tag-sticker-coupon-sale-shop-shopping-flat-icon.png"
class="h-auto w-full rounded-full" alt="Offers">
</div>
<span class="text-gpay-fullwhite mt-2">Offers</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:cursor-pointer hover:scale-110">
<img
src="https://store.webkul.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/o/d/odoo-refer-and-earn-thumbnail.png"
class="h-auto w-full rounded-full" alt="Referrals">
</div>
<span class="text-gpay-fullwhite mt-2">Referrals</span>
</div>
<div class="flex flex-col items-center hover:cursor-pointer">
<div class="h-14 w-14 hover:cursor-pointer hover:scale-110">
<img
src="https://play-lh.googleusercontent.com/yeB9XKBeHfHChSDwjsFztdBYY-jcdgUpVQwtahFE6AeoKhKHowZMm9wJ4-W8VvML2w"
alt="Rewards" class="h-auto w-full rounded-full">
</div>
<span class="text-gpay-fullwhite mt-2">Rewards</span>
</div>
</section>
<!-- check section -->
<section class="py-5 pb-8 px-5 flex flex-col bg-gpay-background">
<div class="flex items-center mb-5 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="#c3e7ff"
d="m20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1a10 10 0 0 0-.27-10.44z" />
<path fill="#c3e7ff" d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49l-8.49 5.66a2 2 0 0 0 0 2.83z" />
</svg>
<p class="font-semibold text-lg px-5 text-gpay-white">Check your CIBIL score at no cost</p>
<div class="ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
d="m10 17l5-5m0 0l-5-5" />
</svg>
</div>
</div>
<div class="flex justify-between items-center mb-5 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="#c3e7ff"
d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5c-1.798 0-3.493.453-4.975 1.251A10.55 10.55 0 0 0 3.5 5.834V2.5h-2v7h7v-2H4.787a8.545 8.545 0 0 1 3.187-2.988A8.458 8.458 0 0 1 12 3.5a8.5 8.5 0 1 1-8.454 9.396l-.104-.995l-1.989.209l.104.994C2.11 18.384 6.573 22.5 12 22.5c5.799 0 10.5-4.701 10.5-10.5ZM11 6v6.414l3.5 3.5l1.414-1.414L13 11.586V6h-2Z" />
</svg>
<p class="font-semibold text-lg px-5 text-gpay-white">Show transaction history</p>
<div class="ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
d="m10 17l5-5m0 0l-5-5" />
</svg>
</div>
</div>
<div class="flex justify-between items-center mb-5 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="#c3e7ff"
d="M2 20h20v2H2v-2Zm2-8h2v7H4v-7Zm5 0h2v7H9v-7Zm4 0h2v7h-2v-7Zm5 0h2v7h-2v-7ZM2 7l10-5l10 5v4H2V7Zm10 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z" />
</svg>
<p class="font-semibold text-lg px-5 text-gpay-white">Check Bank balance</p>
<div class="ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
d="m10 17l5-5m0 0l-5-5" />
</svg>
</div>
</section>
<!-- hero section -->
<section class="relative">
<div class="absolute text-gpay-white p-5 mt-5">
<h1 class="mb-4 text-2xl">Invite friends to get ₹201</h1>
<p class="mb-6 text-lg">Invite friends to Google Pay and get ₹201 when your friend sends their first payment.
They get 21!</p>
<p class="text-lg mb-10">Copy your code <strong>s3vj2f</strong><span><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" viewBox="0 0 24 24" class="inline hover:cursor-pointer">
<path fill="#ffffff"
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></span></p>
<a href="#" class="rounded-full px-5 py-3 text-center border hover:bg-gpay-secondary border-gpay-gray text-gpay-light_blue">Invite
</a>
</div>
<img src="./assets/imgs/gpay-footer.jpg" draggable="false" class="w-full" alt="gpay-hero-banner">
</section>
<!-- footer -->
<div class="bg-gpay-background text-center text-gpay-white">✨Designed by <a
href="https://www.linkedin.com/in/vasanthkumar-s-326527236/"
class="text-gpay-white font-bold hover:text-gpay-hover_blue">Vasanth🤙</a></div>
</main>
</body>
</html>