@pedroab0/skills 0.0.0-stage → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +173 -2
  2. package/bin/cli.js +748 -0
  3. package/figma-extractor/README.md +170 -0
  4. package/figma-extractor/SKILL.md +199 -0
  5. package/figma-extractor/demo/desktop_home.json +2434 -0
  6. package/figma-extractor/demo/dt_money_desktop_home.png +0 -0
  7. package/figma-extractor/demo/dt_money_preview.png +0 -0
  8. package/figma-extractor/demo/dt_money_selection.json +472 -0
  9. package/figma-extractor/demo/index.html +188 -0
  10. package/figma-extractor/demo/style.css +360 -0
  11. package/figma-extractor/figma-plugin/README.md +70 -0
  12. package/figma-extractor/figma-plugin/code.js +407 -0
  13. package/figma-extractor/figma-plugin/manifest.json +10 -0
  14. package/figma-extractor/figma-plugin/ui.html +470 -0
  15. package/figma-extractor/scripts/fetch_figma.js +1314 -0
  16. package/figma-extractor/scripts/test_fetch_figma.js +601 -0
  17. package/figma-node-builder/README.md +107 -0
  18. package/figma-node-builder/SKILL.md +113 -0
  19. package/figma-node-builder/scripts/inspect_spec.js +514 -0
  20. package/figma-node-builder/scripts/test_inspect_spec.js +148 -0
  21. package/figma-to-code/README.md +160 -0
  22. package/figma-to-code/SKILL.md +211 -0
  23. package/figma-to-code/scripts/fetch_figma.js +1251 -0
  24. package/figma-to-code/scripts/test_fetch_figma.js +581 -0
  25. package/package.json +39 -4
package/figma-extractor/demo/dt_money_selection.json ADDED
@@ -0,0 +1,472 @@
1
+ {
2
+ "name": "DT Money (Community)",
3
+ "node": {
4
+ "name": "Dashboard",
5
+ "type": "FRAME",
6
+ "layoutMode": "HORIZONTAL",
7
+ "primaryAxisAlignItems": "CENTER",
8
+ "counterAxisAlignItems": "CENTER",
9
+ "itemSpacing": 32,
10
+ "layoutWrap": "NO_WRAP",
11
+ "bounds": {
12
+ "width": 1120,
13
+ "height": 137
14
+ },
15
+ "children": [
16
+ {
17
+ "name": "Card",
18
+ "type": "INSTANCE",
19
+ "component": {
20
+ "name": "Card",
21
+ "variant": "Card"
22
+ },
23
+ "layoutMode": "VERTICAL",
24
+ "itemSpacing": 12,
25
+ "padding": {
26
+ "top": 24,
27
+ "right": 24,
28
+ "bottom": 24,
29
+ "left": 32
30
+ },
31
+ "layoutWrap": "NO_WRAP",
32
+ "layoutAlign": "INHERIT",
33
+ "bounds": {
34
+ "width": 352,
35
+ "height": 137
36
+ },
37
+ "fills": [
38
+ {
39
+ "type": "SOLID",
40
+ "color": "#323238"
41
+ }
42
+ ],
43
+ "cornerRadius": 6,
44
+ "children": [
45
+ {
46
+ "name": "Header",
47
+ "type": "FRAME",
48
+ "layoutMode": "HORIZONTAL",
49
+ "primaryAxisAlignItems": "SPACE_BETWEEN",
50
+ "itemSpacing": 196,
51
+ "layoutWrap": "NO_WRAP",
52
+ "layoutAlign": "STRETCH",
53
+ "bounds": {
54
+ "width": 296,
55
+ "height": 32
56
+ },
57
+ "children": [
58
+ {
59
+ "name": "Entradas",
60
+ "type": "TEXT",
61
+ "layoutAlign": "INHERIT",
62
+ "bounds": {
63
+ "width": 63,
64
+ "height": 26
65
+ },
66
+ "fills": [
67
+ {
68
+ "type": "SOLID",
69
+ "color": "#C4C4CC"
70
+ }
71
+ ],
72
+ "characters": "Entradas",
73
+ "typography": {
74
+ "fontFamily": "Roboto",
75
+ "fontSize": 16,
76
+ "fontWeight": 400,
77
+ "lineHeightPx": 26,
78
+ "letterSpacing": 0,
79
+ "textAlignHorizontal": "LEFT",
80
+ "textAlignVertical": "TOP"
81
+ }
82
+ },
83
+ {
84
+ "name": "Icons",
85
+ "type": "INSTANCE",
86
+ "component": {
87
+ "name": "Icons",
88
+ "variant": "Tipo=arrow-circle-up-regular"
89
+ },
90
+ "props": {
91
+ "tipo": "arrow-circle-up-regular"
92
+ },
93
+ "layoutAlign": "INHERIT",
94
+ "bounds": {
95
+ "width": 32,
96
+ "height": 32
97
+ },
98
+ "children": [
99
+ {
100
+ "name": "Vector (Stroke)",
101
+ "type": "VECTOR",
102
+ "bounds": {
103
+ "width": 26,
104
+ "height": 26
105
+ },
106
+ "fills": [
107
+ {
108
+ "type": "SOLID",
109
+ "color": "#00B37E"
110
+ }
111
+ ]
112
+ },
113
+ {
114
+ "name": "Vector (Stroke)",
115
+ "type": "VECTOR",
116
+ "bounds": {
117
+ "width": 10,
118
+ "height": 6
119
+ },
120
+ "fills": [
121
+ {
122
+ "type": "SOLID",
123
+ "color": "#00B37E"
124
+ }
125
+ ]
126
+ },
127
+ {
128
+ "name": "Vector (Stroke)",
129
+ "type": "VECTOR",
130
+ "bounds": {
131
+ "width": 2,
132
+ "height": 12
133
+ },
134
+ "fills": [
135
+ {
136
+ "type": "SOLID",
137
+ "color": "#00B37E"
138
+ }
139
+ ]
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ },
145
+ {
146
+ "name": "R$ 17.400,00",
147
+ "type": "TEXT",
148
+ "layoutAlign": "STRETCH",
149
+ "bounds": {
150
+ "width": 296,
151
+ "height": 45
152
+ },
153
+ "fills": [
154
+ {
155
+ "type": "SOLID",
156
+ "color": "#E1E1E6"
157
+ }
158
+ ],
159
+ "characters": "R$ 17.400,00",
160
+ "typography": {
161
+ "fontFamily": "Roboto",
162
+ "fontSize": 32,
163
+ "fontWeight": 700,
164
+ "lineHeightPx": 45,
165
+ "letterSpacing": 0,
166
+ "textAlignHorizontal": "LEFT",
167
+ "textAlignVertical": "TOP"
168
+ }
169
+ }
170
+ ]
171
+ },
172
+ {
173
+ "name": "Card",
174
+ "type": "INSTANCE",
175
+ "component": {
176
+ "name": "Card",
177
+ "variant": "Card"
178
+ },
179
+ "layoutMode": "VERTICAL",
180
+ "itemSpacing": 12,
181
+ "padding": {
182
+ "top": 24,
183
+ "right": 24,
184
+ "bottom": 24,
185
+ "left": 32
186
+ },
187
+ "layoutWrap": "NO_WRAP",
188
+ "layoutAlign": "INHERIT",
189
+ "bounds": {
190
+ "width": 352,
191
+ "height": 137
192
+ },
193
+ "fills": [
194
+ {
195
+ "type": "SOLID",
196
+ "color": "#323238"
197
+ }
198
+ ],
199
+ "cornerRadius": 6,
200
+ "children": [
201
+ {
202
+ "name": "Header",
203
+ "type": "FRAME",
204
+ "layoutMode": "HORIZONTAL",
205
+ "primaryAxisAlignItems": "SPACE_BETWEEN",
206
+ "itemSpacing": 196,
207
+ "layoutWrap": "NO_WRAP",
208
+ "layoutAlign": "STRETCH",
209
+ "bounds": {
210
+ "width": 296,
211
+ "height": 32
212
+ },
213
+ "children": [
214
+ {
215
+ "name": "Entradas",
216
+ "type": "TEXT",
217
+ "layoutAlign": "INHERIT",
218
+ "bounds": {
219
+ "width": 49,
220
+ "height": 26
221
+ },
222
+ "fills": [
223
+ {
224
+ "type": "SOLID",
225
+ "color": "#C4C4CC"
226
+ }
227
+ ],
228
+ "characters": "Saídas",
229
+ "typography": {
230
+ "fontFamily": "Roboto",
231
+ "fontSize": 16,
232
+ "fontWeight": 400,
233
+ "lineHeightPx": 26,
234
+ "letterSpacing": 0,
235
+ "textAlignHorizontal": "LEFT",
236
+ "textAlignVertical": "TOP"
237
+ }
238
+ },
239
+ {
240
+ "name": "Icons",
241
+ "type": "INSTANCE",
242
+ "component": {
243
+ "name": "Icons",
244
+ "variant": "Tipo=arrow-circle-down-regular"
245
+ },
246
+ "props": {
247
+ "tipo": "arrow-circle-down-regular"
248
+ },
249
+ "layoutAlign": "INHERIT",
250
+ "bounds": {
251
+ "width": 32,
252
+ "height": 32
253
+ },
254
+ "children": [
255
+ {
256
+ "name": "Vector (Stroke)",
257
+ "type": "VECTOR",
258
+ "bounds": {
259
+ "width": 26,
260
+ "height": 26
261
+ },
262
+ "fills": [
263
+ {
264
+ "type": "SOLID",
265
+ "color": "#F75A68"
266
+ }
267
+ ]
268
+ },
269
+ {
270
+ "name": "Vector (Stroke)",
271
+ "type": "VECTOR",
272
+ "bounds": {
273
+ "width": 10,
274
+ "height": 6
275
+ },
276
+ "fills": [
277
+ {
278
+ "type": "SOLID",
279
+ "color": "#F75A68"
280
+ }
281
+ ]
282
+ },
283
+ {
284
+ "name": "Vector (Stroke)",
285
+ "type": "VECTOR",
286
+ "bounds": {
287
+ "width": 2,
288
+ "height": 12
289
+ },
290
+ "fills": [
291
+ {
292
+ "type": "SOLID",
293
+ "color": "#F75A68"
294
+ }
295
+ ]
296
+ }
297
+ ]
298
+ }
299
+ ]
300
+ },
301
+ {
302
+ "name": "R$ 17.400,00",
303
+ "type": "TEXT",
304
+ "layoutAlign": "STRETCH",
305
+ "bounds": {
306
+ "width": 296,
307
+ "height": 45
308
+ },
309
+ "fills": [
310
+ {
311
+ "type": "SOLID",
312
+ "color": "#E1E1E6"
313
+ }
314
+ ],
315
+ "characters": "R$ 1.259,00",
316
+ "typography": {
317
+ "fontFamily": "Roboto",
318
+ "fontSize": 32,
319
+ "fontWeight": 700,
320
+ "lineHeightPx": 45,
321
+ "letterSpacing": 0,
322
+ "textAlignHorizontal": "LEFT",
323
+ "textAlignVertical": "TOP"
324
+ }
325
+ }
326
+ ]
327
+ },
328
+ {
329
+ "name": "Card",
330
+ "type": "INSTANCE",
331
+ "component": {
332
+ "name": "Card",
333
+ "variant": "Card"
334
+ },
335
+ "layoutMode": "VERTICAL",
336
+ "itemSpacing": 12,
337
+ "padding": {
338
+ "top": 24,
339
+ "right": 24,
340
+ "bottom": 24,
341
+ "left": 32
342
+ },
343
+ "layoutWrap": "NO_WRAP",
344
+ "layoutAlign": "INHERIT",
345
+ "bounds": {
346
+ "width": 352,
347
+ "height": 137
348
+ },
349
+ "fills": [
350
+ {
351
+ "type": "SOLID",
352
+ "color": "#015F43"
353
+ }
354
+ ],
355
+ "cornerRadius": 6,
356
+ "children": [
357
+ {
358
+ "name": "Header",
359
+ "type": "FRAME",
360
+ "layoutMode": "HORIZONTAL",
361
+ "primaryAxisAlignItems": "SPACE_BETWEEN",
362
+ "itemSpacing": 196,
363
+ "layoutWrap": "NO_WRAP",
364
+ "layoutAlign": "STRETCH",
365
+ "bounds": {
366
+ "width": 296,
367
+ "height": 32
368
+ },
369
+ "children": [
370
+ {
371
+ "name": "Entradas",
372
+ "type": "TEXT",
373
+ "layoutAlign": "INHERIT",
374
+ "bounds": {
375
+ "width": 36,
376
+ "height": 26
377
+ },
378
+ "fills": [
379
+ {
380
+ "type": "SOLID",
381
+ "color": "#C4C4CC"
382
+ }
383
+ ],
384
+ "characters": "Total",
385
+ "typography": {
386
+ "fontFamily": "Roboto",
387
+ "fontSize": 16,
388
+ "fontWeight": 400,
389
+ "lineHeightPx": 26,
390
+ "letterSpacing": 0,
391
+ "textAlignHorizontal": "LEFT",
392
+ "textAlignVertical": "TOP"
393
+ }
394
+ },
395
+ {
396
+ "name": "Icons",
397
+ "type": "INSTANCE",
398
+ "component": {
399
+ "name": "Icons",
400
+ "variant": "Tipo=currency-dollar-regular"
401
+ },
402
+ "props": {
403
+ "tipo": "currency-dollar-regular"
404
+ },
405
+ "layoutAlign": "INHERIT",
406
+ "bounds": {
407
+ "width": 32,
408
+ "height": 32
409
+ },
410
+ "children": [
411
+ {
412
+ "name": "Vector (Stroke)",
413
+ "type": "VECTOR",
414
+ "bounds": {
415
+ "width": 2,
416
+ "height": 28
417
+ },
418
+ "fills": [
419
+ {
420
+ "type": "SOLID",
421
+ "color": "#FFFFFF"
422
+ }
423
+ ]
424
+ },
425
+ {
426
+ "name": "Vector (Stroke)",
427
+ "type": "VECTOR",
428
+ "bounds": {
429
+ "width": 18,
430
+ "height": 22
431
+ },
432
+ "fills": [
433
+ {
434
+ "type": "SOLID",
435
+ "color": "#FFFFFF"
436
+ }
437
+ ]
438
+ }
439
+ ]
440
+ }
441
+ ]
442
+ },
443
+ {
444
+ "name": "R$ 17.400,00",
445
+ "type": "TEXT",
446
+ "layoutAlign": "STRETCH",
447
+ "bounds": {
448
+ "width": 296,
449
+ "height": 45
450
+ },
451
+ "fills": [
452
+ {
453
+ "type": "SOLID",
454
+ "color": "#E1E1E6"
455
+ }
456
+ ],
457
+ "characters": "R$ 16.141,00",
458
+ "typography": {
459
+ "fontFamily": "Roboto",
460
+ "fontSize": 32,
461
+ "fontWeight": 700,
462
+ "lineHeightPx": 45,
463
+ "letterSpacing": 0,
464
+ "textAlignHorizontal": "LEFT",
465
+ "textAlignVertical": "TOP"
466
+ }
467
+ }
468
+ ]
469
+ }
470
+ ]
471
+ }
472
+ }
package/figma-extractor/demo/index.html ADDED
@@ -0,0 +1,188 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DT Money - Controle Financeiro</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="style.css">
11
+ </head>
12
+ <body>
13
+
14
+ <!-- Top Page Header -->
15
+ <header class="page-header">
16
+ <div class="header-container">
17
+ <a href="#" class="logo" aria-label="DT Money Home">
18
+ <!-- Ignite Symbol SVG -->
19
+ <svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
20
+ <path opacity="0.5" d="M19.4678 0.407471L0.267822 10.9852V32.1408L19.4678 21.563V0.407471Z" fill="#00B37E"/>
21
+ <path d="M19.4678 21.563L0.267822 32.1408L19.4678 42.7185V21.563Z" fill="#00B37E"/>
22
+ <path d="M19.4678 0.407471L38.6678 10.9852V32.1408L19.4678 21.563V0.407471Z" fill="#00B37E"/>
23
+ </svg>
24
+ <span class="logo-text">DT Money</span>
25
+ </a>
26
+
27
+ <button type="button" class="btn-new-transaction">
28
+ Nova transação
29
+ </button>
30
+ </div>
31
+ </header>
32
+
33
+ <!-- Main Content Layout -->
34
+ <main class="main-content">
35
+
36
+ <!-- 1. Summary Cards (Dashboard) -->
37
+ <section class="summary-cards" aria-label="Resumo financeiro">
38
+
39
+ <!-- Card: Entradas -->
40
+ <article class="card">
41
+ <header class="card-header">
42
+ <span class="card-title">Entradas</span>
43
+ <span class="card-icon" aria-hidden="true">
44
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#00B37E" viewBox="0 0 256 256">
45
+ <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-90.34a8,8,0,0,1-11.32,0L136,99.31V168a8,8,0,0,1-16,0V99.31l-26.34,26.35a8,8,0,0,1-11.32-11.32l40-40a8,8,0,0,1,11.32,0l40,40A8,8,0,0,1,173.66,125.66Z"/>
46
+ </svg>
47
+ </span>
48
+ </header>
49
+ <strong class="card-value">R$ 17.400,00</strong>
50
+ </article>
51
+
52
+ <!-- Card: Saídas -->
53
+ <article class="card">
54
+ <header class="card-header">
55
+ <span class="card-title">Saídas</span>
56
+ <span class="card-icon" aria-hidden="true">
57
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F75A68" viewBox="0 0 256 256">
58
+ <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm34.34-82.34L136,156.69V88a8,8,0,0,0-16,0v68.69l-26.34-26.35a8,8,0,0,0-11.32,11.32l40,40a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32Z"/>
59
+ </svg>
60
+ </span>
61
+ </header>
62
+ <strong class="card-value">R$ 1.259,00</strong>
63
+ </article>
64
+
65
+ <!-- Card: Total -->
66
+ <article class="card card-highlight">
67
+ <header class="card-header">
68
+ <span class="card-title">Total</span>
69
+ <span class="card-icon" aria-hidden="true">
70
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFFFFF" viewBox="0 0 256 256">
71
+ <path d="M152,120H116a12,12,0,0,1,0-24h44a8,8,0,0,0,0-16h-24V64a8,8,0,0,0-16,0V80H116a28,28,0,0,0,0,56h36a12,12,0,0,1,0,24H104a8,8,0,0,0,0,16h24v16a8,8,0,0,0,16,0V176h8a28,28,0,0,0,0-56Z"/>
72
+ </svg>
73
+ </span>
74
+ </header>
75
+ <strong class="card-value">R$ 16.141,00</strong>
76
+ </article>
77
+
78
+ </section>
79
+
80
+ <!-- 2. Search Section -->
81
+ <form class="search-form" role="search">
82
+ <input
83
+ type="text"
84
+ class="search-input"
85
+ placeholder="Busque uma transação"
86
+ aria-label="Buscar transações"
87
+ >
88
+ <button type="submit" class="btn-search">
89
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00B37E" viewBox="0 0 256 256" aria-hidden="true">
90
+ <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>
91
+ </svg>
92
+ Buscar
93
+ </button>
94
+ </form>
95
+
96
+ <!-- 3. Transactions Table -->
97
+ <div class="table-container">
98
+ <table class="transactions-table" aria-label="Tabela de transações">
99
+ <tbody>
100
+ <tr>
101
+ <td>Desenvolvimento de site</td>
102
+ <td class="col-amount amount-income">R$ 12.000,00</td>
103
+ <td class="col-category">Venda</td>
104
+ <td>13/04/2022</td>
105
+ </tr>
106
+ <tr>
107
+ <td>Hamburguer</td>
108
+ <td class="col-amount amount-outcome">- R$ 59,00</td>
109
+ <td class="col-category">Alimentação</td>
110
+ <td>10/04/2022</td>
111
+ </tr>
112
+ <tr>
113
+ <td>Aluguel do apartamento</td>
114
+ <td class="col-amount amount-outcome">- R$ 1.200,00</td>
115
+ <td class="col-category">Casa</td>
116
+ <td>27/03/2022</td>
117
+ </tr>
118
+ <tr>
119
+ <td>Computador</td>
120
+ <td class="col-amount amount-income">R$ 5.400,00</td>
121
+ <td class="col-category">Venda</td>
122
+ <td>15/03/2022</td>
123
+ </tr>
124
+ <tr>
125
+ <td>Desenvolvimento de site</td>
126
+ <td class="col-amount amount-income">R$ 8.000,00</td>
127
+ <td class="col-category">Venda</td>
128
+ <td>13/03/2022</td>
129
+ </tr>
130
+ <tr>
131
+ <td>Janta</td>
132
+ <td class="col-amount amount-outcome">- R$ 39,00</td>
133
+ <td class="col-category">Alimentação</td>
134
+ <td>10/03/2022</td>
135
+ </tr>
136
+ <tr>
137
+ <td>Aluguel do apartamento</td>
138
+ <td class="col-amount amount-outcome">- R$ 1.200,00</td>
139
+ <td class="col-category">Casa</td>
140
+ <td>27/02/2022</td>
141
+ </tr>
142
+ <tr>
143
+ <td>Salário</td>
144
+ <td class="col-amount amount-income">R$ 5.400,00</td>
145
+ <td class="col-category">Salário</td>
146
+ <td>15/02/2022</td>
147
+ </tr>
148
+ <tr>
149
+ <td>Almoço</td>
150
+ <td class="col-amount amount-outcome">- R$ 30,00</td>
151
+ <td class="col-category">Alimentação</td>
152
+ <td>05/02/2022</td>
153
+ </tr>
154
+ <tr>
155
+ <td>Fone de ouvido</td>
156
+ <td class="col-amount amount-outcome">- R$ 150,00</td>
157
+ <td class="col-category">Itens</td>
158
+ <td>02/02/2022</td>
159
+ </tr>
160
+ </tbody>
161
+ </table>
162
+ </div>
163
+
164
+ <!-- 4. Pagination -->
165
+ <nav class="pagination" aria-label="Navegação da paginação">
166
+ <button class="pagination-btn disabled" aria-label="Página anterior" disabled>
167
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#323238" viewBox="0 0 256 256">
168
+ <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
169
+ </svg>
170
+ </button>
171
+
172
+ <div class="pagination-pages">
173
+ <button class="page-num active" aria-current="page">1</button>
174
+ <button class="page-num">2</button>
175
+ <button class="page-num">3</button>
176
+ </div>
177
+
178
+ <button class="pagination-btn" aria-label="Próxima página">
179
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#00B37E" viewBox="0 0 256 256">
180
+ <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
181
+ </svg>
182
+ </button>
183
+ </nav>
184
+
185
+ </main>
186
+
187
+ </body>
188
+ </html>