@deriv-web-design/ui 0.1.4 → 0.1.6

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.
@@ -61,6 +61,83 @@
61
61
  ],
62
62
  "defaultValues": {
63
63
  "featuredFooter": []
64
+ },
65
+ "fields": {
66
+ "featured": {
67
+ "type": "object",
68
+ "required": true,
69
+ "itemFields": {
70
+ "summary": {
71
+ "type": "string",
72
+ "required": false,
73
+ "maxLength": 250
74
+ },
75
+ "tags": {
76
+ "type": "array",
77
+ "required": false
78
+ },
79
+ "thumbnail": {
80
+ "type": "image",
81
+ "required": false
82
+ },
83
+ "thumbnailAlt": {
84
+ "type": "string",
85
+ "required": false,
86
+ "maxLength": 120
87
+ },
88
+ "title": {
89
+ "type": "string",
90
+ "required": true,
91
+ "maxLength": 100
92
+ }
93
+ }
94
+ },
95
+ "featuredFooter": {
96
+ "type": "array",
97
+ "required": false,
98
+ "itemFields": {
99
+ "tags": {
100
+ "type": "array",
101
+ "required": false
102
+ },
103
+ "title": {
104
+ "type": "string",
105
+ "required": true,
106
+ "maxLength": 100
107
+ }
108
+ },
109
+ "default": []
110
+ },
111
+ "leftColumn": {
112
+ "type": "object",
113
+ "required": true,
114
+ "itemFields": {
115
+ "articles": {
116
+ "type": "array",
117
+ "required": true
118
+ },
119
+ "label": {
120
+ "type": "string",
121
+ "required": false,
122
+ "maxLength": 30
123
+ }
124
+ }
125
+ },
126
+ "rightColumn": {
127
+ "type": "object",
128
+ "required": true,
129
+ "itemFields": {
130
+ "articles": {
131
+ "type": "array",
132
+ "required": true
133
+ },
134
+ "label": {
135
+ "type": "string",
136
+ "required": false,
137
+ "maxLength": 30
138
+ }
139
+ }
140
+ }
64
141
  }
65
142
  },
66
143
  "article-section-featured": {
@@ -129,6 +206,325 @@
129
206
  "defaultValues": {
130
207
  "variant": "featured",
131
208
  "linkText": "View all articles"
209
+ },
210
+ "fields": {
211
+ "articles": {
212
+ "type": "array",
213
+ "required": true,
214
+ "itemFields": {
215
+ "summary": {
216
+ "type": "string",
217
+ "required": false,
218
+ "maxLength": 250
219
+ },
220
+ "tags": {
221
+ "type": "array",
222
+ "required": false
223
+ },
224
+ "thumbnail": {
225
+ "type": "image",
226
+ "required": false
227
+ },
228
+ "thumbnailAlt": {
229
+ "type": "string",
230
+ "required": false,
231
+ "maxLength": 120
232
+ },
233
+ "title": {
234
+ "type": "string",
235
+ "required": true,
236
+ "maxLength": 100
237
+ }
238
+ }
239
+ },
240
+ "featured": {
241
+ "type": "object",
242
+ "required": false,
243
+ "itemFields": {
244
+ "summary": {
245
+ "type": "string",
246
+ "required": false,
247
+ "maxLength": 250
248
+ },
249
+ "tags": {
250
+ "type": "array",
251
+ "required": false
252
+ },
253
+ "thumbnail": {
254
+ "type": "image",
255
+ "required": false
256
+ },
257
+ "thumbnailAlt": {
258
+ "type": "string",
259
+ "required": false,
260
+ "maxLength": 120
261
+ },
262
+ "title": {
263
+ "type": "string",
264
+ "required": true,
265
+ "maxLength": 100
266
+ }
267
+ }
268
+ },
269
+ "linkText": {
270
+ "type": "string",
271
+ "required": false,
272
+ "maxLength": 30,
273
+ "default": "View all articles"
274
+ },
275
+ "sectionTitle": {
276
+ "type": "string",
277
+ "required": true,
278
+ "maxLength": 60
279
+ },
280
+ "variant": {
281
+ "type": "string",
282
+ "required": false,
283
+ "enum": [
284
+ "featured",
285
+ "showcase",
286
+ "grid"
287
+ ],
288
+ "default": "featured"
289
+ }
290
+ }
291
+ },
292
+ "breadcrumb-trail": {
293
+ "id": "breadcrumb-trail",
294
+ "name": "Breadcrumb",
295
+ "component": "Breadcrumb",
296
+ "category": "navigation",
297
+ "description": "Hierarchy navigation trail for interior pages such as About / Who we are.",
298
+ "purpose": "Hierarchy navigation trail that shows the user's location and provides a quick path back to parent pages. Typically placed under the Navbar on interior pages.",
299
+ "keywords": [
300
+ "breadcrumb",
301
+ "navigation",
302
+ "hierarchy",
303
+ "path",
304
+ "trail",
305
+ "interior",
306
+ "about",
307
+ "who-we-are",
308
+ "deriv"
309
+ ],
310
+ "sectionType": "navigation",
311
+ "global": false,
312
+ "requiredFields": [
313
+ "items"
314
+ ],
315
+ "optionalFields": [
316
+ "size",
317
+ "collapsible"
318
+ ],
319
+ "variants": [
320
+ "sm",
321
+ "md"
322
+ ],
323
+ "recommendedPosition": 1,
324
+ "placement": [],
325
+ "layout": {
326
+ "alignment": "start",
327
+ "buttonLayout": "none",
328
+ "contentWidth": "wide",
329
+ "background": false,
330
+ "overlay": false
331
+ },
332
+ "supports": {
333
+ "backgroundImage": false,
334
+ "backgroundVideo": false,
335
+ "foregroundImage": false,
336
+ "primaryButton": false,
337
+ "secondaryButton": false,
338
+ "collapsible": true
339
+ },
340
+ "imageRoles": [],
341
+ "defaultValues": {
342
+ "size": "md",
343
+ "collapsible": true,
344
+ "items": [
345
+ {
346
+ "label": "Home",
347
+ "href": "/"
348
+ },
349
+ {
350
+ "label": "Who we are"
351
+ }
352
+ ]
353
+ },
354
+ "fields": {
355
+ "collapsible": {
356
+ "type": "boolean",
357
+ "required": false,
358
+ "default": true
359
+ },
360
+ "items": {
361
+ "type": "array",
362
+ "required": true,
363
+ "itemFields": {
364
+ "href": {
365
+ "type": "url",
366
+ "required": false
367
+ },
368
+ "label": {
369
+ "type": "string",
370
+ "required": true,
371
+ "maxLength": 60
372
+ }
373
+ }
374
+ },
375
+ "size": {
376
+ "type": "string",
377
+ "required": false,
378
+ "enum": [
379
+ "sm",
380
+ "md"
381
+ ],
382
+ "default": "md"
383
+ }
384
+ }
385
+ },
386
+ "coral-banner-static": {
387
+ "id": "coral-banner-static",
388
+ "name": "Coral Banner",
389
+ "component": "CoralBanner",
390
+ "category": "cta",
391
+ "description": "Full-bleed coral promo banner with a headline, description, and single CTA. Static single-slide variant, or a carousel variant with dot pagination and prev/next arrows — matches the banner used on deriv.com and deriv.com/markets/forex.",
392
+ "purpose": "Full-bleed coral promo banner with a bold headline, short description, and a single dark CTA button. Available as a single static slide, or as a swipeable, auto-advancing carousel with dot pagination and prev/next arrows. This block reproduces the \"Join 3M+ global traders\" banner used on the deriv.com homepage and as the footer promo slider on deriv.com/markets/forex — same coral background, typography scale, button style, and (in `carousel` mode) the exact slide-transition timing, easing, dot, and arrow styling from the reference site.",
393
+ "keywords": [
394
+ "cta",
395
+ "banner",
396
+ "promo",
397
+ "promotion",
398
+ "coral",
399
+ "carousel",
400
+ "slider",
401
+ "trade now",
402
+ "download app",
403
+ "open account",
404
+ "trading",
405
+ "forex",
406
+ "deriv"
407
+ ],
408
+ "sectionType": "cta",
409
+ "global": false,
410
+ "requiredFields": [],
411
+ "optionalFields": [
412
+ "variant",
413
+ "slides",
414
+ "autoplay",
415
+ "autoplayDelay",
416
+ "transitionDuration",
417
+ "infinite",
418
+ "showArrows",
419
+ "showDots"
420
+ ],
421
+ "variants": [
422
+ "static",
423
+ "carousel"
424
+ ],
425
+ "recommendedPosition": 8,
426
+ "placement": [
427
+ "top",
428
+ "middle",
429
+ "bottom"
430
+ ],
431
+ "layout": {
432
+ "alignment": "left",
433
+ "buttonLayout": "single",
434
+ "contentWidth": "wide",
435
+ "background": true,
436
+ "overlay": false
437
+ },
438
+ "supports": {
439
+ "backgroundImage": false,
440
+ "backgroundVideo": false,
441
+ "foregroundImage": false,
442
+ "primaryButton": true,
443
+ "secondaryButton": true,
444
+ "multipleSlides": true,
445
+ "autoplay": true,
446
+ "swipe": true
447
+ },
448
+ "imageRoles": [],
449
+ "defaultValues": {
450
+ "variant": "static",
451
+ "autoplay": true,
452
+ "autoplayDelay": 2000,
453
+ "transitionDuration": 330,
454
+ "infinite": true,
455
+ "showArrows": true,
456
+ "showDots": true
457
+ },
458
+ "fields": {
459
+ "autoplay": {
460
+ "type": "boolean",
461
+ "required": false,
462
+ "default": true
463
+ },
464
+ "autoplayDelay": {
465
+ "type": "number",
466
+ "required": false,
467
+ "min": 500,
468
+ "default": 2000
469
+ },
470
+ "infinite": {
471
+ "type": "boolean",
472
+ "required": false,
473
+ "default": true
474
+ },
475
+ "showArrows": {
476
+ "type": "boolean",
477
+ "required": false,
478
+ "default": true
479
+ },
480
+ "showDots": {
481
+ "type": "boolean",
482
+ "required": false,
483
+ "default": true
484
+ },
485
+ "slides": {
486
+ "type": "array",
487
+ "required": false,
488
+ "itemFields": {
489
+ "description": {
490
+ "type": "string",
491
+ "required": false,
492
+ "maxLength": 160
493
+ },
494
+ "id": {
495
+ "type": "string",
496
+ "required": false
497
+ },
498
+ "primaryButton": {
499
+ "type": "object",
500
+ "required": false
501
+ },
502
+ "secondaryButton": {
503
+ "type": "object",
504
+ "required": false
505
+ },
506
+ "title": {
507
+ "type": "string",
508
+ "required": true,
509
+ "maxLength": 80
510
+ }
511
+ }
512
+ },
513
+ "transitionDuration": {
514
+ "type": "number",
515
+ "required": false,
516
+ "min": 0,
517
+ "default": 330
518
+ },
519
+ "variant": {
520
+ "type": "string",
521
+ "required": false,
522
+ "enum": [
523
+ "static",
524
+ "carousel"
525
+ ],
526
+ "default": "static"
527
+ }
132
528
  }
133
529
  },
134
530
  "cta-banner-standard": {
@@ -198,6 +594,65 @@
198
594
  "ctaLabel": "Open account",
199
595
  "ctaHref": "#",
200
596
  "variant": "standard"
597
+ },
598
+ "fields": {
599
+ "avatars": {
600
+ "type": "array",
601
+ "required": false,
602
+ "itemFields": {
603
+ "desktopPos": {
604
+ "type": "object",
605
+ "required": true
606
+ },
607
+ "id": {
608
+ "type": "number",
609
+ "required": true
610
+ },
611
+ "imageUrl": {
612
+ "type": "image",
613
+ "required": true,
614
+ "aspectRatio": "1:1"
615
+ },
616
+ "mobilePos": {
617
+ "type": "object",
618
+ "required": false
619
+ },
620
+ "mobileVisible": {
621
+ "type": "boolean",
622
+ "required": true
623
+ },
624
+ "staggerRank": {
625
+ "type": "number",
626
+ "required": true
627
+ }
628
+ }
629
+ },
630
+ "ctaHref": {
631
+ "type": "url",
632
+ "required": false,
633
+ "default": "#"
634
+ },
635
+ "ctaLabel": {
636
+ "type": "string",
637
+ "required": false,
638
+ "maxLength": 30,
639
+ "default": "Open account"
640
+ },
641
+ "headline": {
642
+ "type": "string",
643
+ "required": false,
644
+ "maxLength": 80,
645
+ "default": "Short section title goes here"
646
+ },
647
+ "variant": {
648
+ "type": "string",
649
+ "required": false,
650
+ "enum": [
651
+ "standard",
652
+ "compact"
653
+ ],
654
+ "default": "standard"
655
+ }
201
656
  }
202
657
  },
203
658
  "day-night-transition": {
@@ -280,6 +735,106 @@
280
735
  "headlineLevel": "h2",
281
736
  "descriptionLevel": "body-md",
282
737
  "scrollPreset": "default"
738
+ },
739
+ "fields": {
740
+ "ctaHref": {
741
+ "type": "url",
742
+ "required": false,
743
+ "default": "#"
744
+ },
745
+ "ctaLabel": {
746
+ "type": "string",
747
+ "required": false,
748
+ "maxLength": 30,
749
+ "default": "Get started"
750
+ },
751
+ "dayDescription": {
752
+ "type": "string",
753
+ "required": false,
754
+ "maxLength": 200,
755
+ "default": "Description goes here. Description goes here. Description goes here."
756
+ },
757
+ "dayHeadline": {
758
+ "type": "string",
759
+ "required": false,
760
+ "maxLength": 80,
761
+ "default": "Medium length section title goes here"
762
+ },
763
+ "dayImageUrl": {
764
+ "type": "image",
765
+ "required": true,
766
+ "aspectRatio": "16:9"
767
+ },
768
+ "descriptionLevel": {
769
+ "type": "string",
770
+ "required": false,
771
+ "enum": [
772
+ "body-md",
773
+ "body-lg"
774
+ ],
775
+ "default": "body-md"
776
+ },
777
+ "headlineLevel": {
778
+ "type": "string",
779
+ "required": false,
780
+ "enum": [
781
+ "h1",
782
+ "h2"
783
+ ],
784
+ "default": "h2"
785
+ },
786
+ "hideCta": {
787
+ "type": "boolean",
788
+ "required": false,
789
+ "default": false
790
+ },
791
+ "inlineDayNightHeadline": {
792
+ "type": "object",
793
+ "required": false,
794
+ "itemFields": {
795
+ "dayWord": {
796
+ "type": "string",
797
+ "required": true,
798
+ "maxLength": 20
799
+ },
800
+ "nightWord": {
801
+ "type": "string",
802
+ "required": true,
803
+ "maxLength": 20
804
+ },
805
+ "prefix": {
806
+ "type": "string",
807
+ "required": true,
808
+ "maxLength": 40
809
+ }
810
+ }
811
+ },
812
+ "nightDescription": {
813
+ "type": "string",
814
+ "required": false,
815
+ "maxLength": 200,
816
+ "default": "Description goes here. Description goes here. Description goes here."
817
+ },
818
+ "nightHeadline": {
819
+ "type": "string",
820
+ "required": false,
821
+ "maxLength": 80,
822
+ "default": "Medium length section title goes here"
823
+ },
824
+ "nightImageUrl": {
825
+ "type": "image",
826
+ "required": true,
827
+ "aspectRatio": "16:9"
828
+ },
829
+ "scrollPreset": {
830
+ "type": "string",
831
+ "required": false,
832
+ "enum": [
833
+ "default",
834
+ "webflow-day-night-v2"
835
+ ],
836
+ "default": "default"
837
+ }
283
838
  }
284
839
  },
285
840
  "download-banner-light-2": {
@@ -375,6 +930,115 @@
375
930
  "showMacOS": true,
376
931
  "showLinux": true,
377
932
  "showWeb": true
933
+ },
934
+ "fields": {
935
+ "appGalleryHref": {
936
+ "type": "url",
937
+ "required": false
938
+ },
939
+ "appStoreHref": {
940
+ "type": "url",
941
+ "required": false
942
+ },
943
+ "disclaimer": {
944
+ "type": "string",
945
+ "required": false,
946
+ "maxLength": 200
947
+ },
948
+ "googlePlayHref": {
949
+ "type": "url",
950
+ "required": false
951
+ },
952
+ "linuxHref": {
953
+ "type": "url",
954
+ "required": false
955
+ },
956
+ "macOSHref": {
957
+ "type": "url",
958
+ "required": false
959
+ },
960
+ "mobileTitle": {
961
+ "type": "string",
962
+ "required": false,
963
+ "maxLength": 30,
964
+ "default": "Available on"
965
+ },
966
+ "qrCodeAlt": {
967
+ "type": "string",
968
+ "required": false,
969
+ "maxLength": 120,
970
+ "default": "QR code to download the app"
971
+ },
972
+ "qrCodeImage": {
973
+ "type": "image",
974
+ "required": false,
975
+ "aspectRatio": "1:1"
976
+ },
977
+ "qrSubtitle": {
978
+ "type": "string",
979
+ "required": false,
980
+ "maxLength": 40,
981
+ "default": "Android & iOS"
982
+ },
983
+ "qrTitle": {
984
+ "type": "string",
985
+ "required": false,
986
+ "maxLength": 30,
987
+ "default": "Scan to download"
988
+ },
989
+ "showAppGallery": {
990
+ "type": "boolean",
991
+ "required": false,
992
+ "default": true
993
+ },
994
+ "showAppStore": {
995
+ "type": "boolean",
996
+ "required": false,
997
+ "default": true
998
+ },
999
+ "showGooglePlay": {
1000
+ "type": "boolean",
1001
+ "required": false,
1002
+ "default": true
1003
+ },
1004
+ "showLinux": {
1005
+ "type": "boolean",
1006
+ "required": false,
1007
+ "default": true
1008
+ },
1009
+ "showMacOS": {
1010
+ "type": "boolean",
1011
+ "required": false,
1012
+ "default": true
1013
+ },
1014
+ "showWeb": {
1015
+ "type": "boolean",
1016
+ "required": false,
1017
+ "default": true
1018
+ },
1019
+ "showWindows": {
1020
+ "type": "boolean",
1021
+ "required": false,
1022
+ "default": true
1023
+ },
1024
+ "style": {
1025
+ "type": "string",
1026
+ "required": false,
1027
+ "enum": [
1028
+ "light",
1029
+ "light-2",
1030
+ "dark"
1031
+ ],
1032
+ "default": "light-2"
1033
+ },
1034
+ "webHref": {
1035
+ "type": "url",
1036
+ "required": false
1037
+ },
1038
+ "windowsHref": {
1039
+ "type": "url",
1040
+ "required": false
1041
+ }
378
1042
  }
379
1043
  },
380
1044
  "faq-accordion-white": {
@@ -436,6 +1100,728 @@
436
1100
  "imageRoles": [],
437
1101
  "defaultValues": {
438
1102
  "colorScheme": "white"
1103
+ },
1104
+ "fields": {
1105
+ "colorScheme": {
1106
+ "type": "string",
1107
+ "required": false,
1108
+ "enum": [
1109
+ "white",
1110
+ "slate"
1111
+ ],
1112
+ "default": "white"
1113
+ },
1114
+ "items": {
1115
+ "type": "array",
1116
+ "required": true,
1117
+ "itemFields": {
1118
+ "answer": {
1119
+ "type": "string",
1120
+ "required": true,
1121
+ "maxLength": 500
1122
+ },
1123
+ "question": {
1124
+ "type": "string",
1125
+ "required": true,
1126
+ "maxLength": 120
1127
+ }
1128
+ }
1129
+ },
1130
+ "title": {
1131
+ "type": "string",
1132
+ "required": true,
1133
+ "maxLength": 80
1134
+ }
1135
+ }
1136
+ },
1137
+ "feature-awards": {
1138
+ "id": "feature-awards",
1139
+ "name": "Feature Awards",
1140
+ "component": "FeatureAwards",
1141
+ "category": "social-proof",
1142
+ "description": "Light section listing industry awards and recognitions as laurel-flanked badges — a centered, wrapping grid on tablet/desktop, and a continuously auto-scrolling horizontal marquee on mobile.",
1143
+ "purpose": "A light-background social-proof section that showcases industry awards and recognitions as laurel-flanked badges (icon — title/issuer text — mirrored icon). On tablet and desktop the badges wrap into a centered grid; on mobile they play as a single, continuously auto-scrolling horizontal row. Modeled after the \"Our awards\" section on [deriv.com/why-choose-us](https://deriv.com/why-choose-us).",
1144
+ "keywords": [
1145
+ "awards",
1146
+ "recognition",
1147
+ "trust",
1148
+ "social-proof",
1149
+ "credibility",
1150
+ "laurel",
1151
+ "wreath",
1152
+ "badges",
1153
+ "press",
1154
+ "accolades",
1155
+ "trading",
1156
+ "forex",
1157
+ "deriv",
1158
+ "why-choose-us"
1159
+ ],
1160
+ "sectionType": "social-proof",
1161
+ "global": false,
1162
+ "requiredFields": [],
1163
+ "optionalFields": [
1164
+ "title",
1165
+ "awards",
1166
+ "autoScrollDuration"
1167
+ ],
1168
+ "variants": [
1169
+ "default"
1170
+ ],
1171
+ "recommendedPosition": 3,
1172
+ "placement": [
1173
+ "top",
1174
+ "middle"
1175
+ ],
1176
+ "layout": {
1177
+ "alignment": "center",
1178
+ "buttonLayout": "none",
1179
+ "contentWidth": "wide",
1180
+ "background": false,
1181
+ "overlay": false,
1182
+ "carousel": true
1183
+ },
1184
+ "supports": {
1185
+ "backgroundImage": false,
1186
+ "backgroundVideo": false,
1187
+ "primaryButton": false,
1188
+ "secondaryButton": false,
1189
+ "ctaLink": false,
1190
+ "disclaimer": false,
1191
+ "autoScroll": true,
1192
+ "editableText": true
1193
+ },
1194
+ "imageRoles": [],
1195
+ "defaultValues": {
1196
+ "title": "Our awards",
1197
+ "autoScrollDuration": 32
1198
+ },
1199
+ "fields": {
1200
+ "autoScrollDuration": {
1201
+ "type": "number",
1202
+ "required": false,
1203
+ "min": 10,
1204
+ "max": 120,
1205
+ "default": 32
1206
+ },
1207
+ "awards": {
1208
+ "type": "array",
1209
+ "required": false,
1210
+ "itemFields": {
1211
+ "subtitle": {
1212
+ "type": "string",
1213
+ "required": true,
1214
+ "maxLength": 60
1215
+ },
1216
+ "title": {
1217
+ "type": "string",
1218
+ "required": true,
1219
+ "maxLength": 80
1220
+ }
1221
+ }
1222
+ },
1223
+ "title": {
1224
+ "type": "string",
1225
+ "required": false,
1226
+ "maxLength": 60
1227
+ }
1228
+ }
1229
+ },
1230
+ "feature-blog": {
1231
+ "id": "feature-blog",
1232
+ "name": "Feature Blog",
1233
+ "component": "FeatureBlog",
1234
+ "category": "content",
1235
+ "description": "Light section with a centered H2 heading above a responsive grid of image-led blog / press-release cards (date + category tags, title, summary), with an optional centered \"See all\" link below the grid.",
1236
+ "purpose": "A light-background content section that showcases blog posts or press releases as a responsive grid of image-led cards — thumbnail on top, date/category tags, title, and summary — with an optional centered \"See all\" link below the grid. Modeled after the \"Deriv press releases\" section on [deriv.com/newsroom](https://deriv.com/newsroom).",
1237
+ "keywords": [
1238
+ "blog",
1239
+ "press releases",
1240
+ "newsroom",
1241
+ "articles",
1242
+ "news",
1243
+ "content",
1244
+ "cards",
1245
+ "grid",
1246
+ "media",
1247
+ "press",
1248
+ "trading",
1249
+ "deriv",
1250
+ "newsroom"
1251
+ ],
1252
+ "sectionType": "content",
1253
+ "global": false,
1254
+ "requiredFields": [
1255
+ "posts"
1256
+ ],
1257
+ "optionalFields": [
1258
+ "title",
1259
+ "showLink",
1260
+ "linkText",
1261
+ "linkHref"
1262
+ ],
1263
+ "variants": [
1264
+ "default"
1265
+ ],
1266
+ "recommendedPosition": 4,
1267
+ "placement": [
1268
+ "middle",
1269
+ "bottom"
1270
+ ],
1271
+ "layout": {
1272
+ "alignment": "center",
1273
+ "gridColumns": "3",
1274
+ "contentWidth": "large",
1275
+ "background": false,
1276
+ "overlay": false
1277
+ },
1278
+ "supports": {
1279
+ "backgroundImage": false,
1280
+ "backgroundVideo": false,
1281
+ "foregroundImage": true,
1282
+ "primaryButton": false,
1283
+ "secondaryButton": false,
1284
+ "sectionLink": true,
1285
+ "cardLink": true,
1286
+ "tags": true
1287
+ },
1288
+ "imageRoles": [
1289
+ "post-thumbnail"
1290
+ ],
1291
+ "defaultValues": {
1292
+ "title": "Deriv press releases",
1293
+ "showLink": true,
1294
+ "linkText": "See all press releases"
1295
+ },
1296
+ "fields": {
1297
+ "linkHref": {
1298
+ "type": "url",
1299
+ "required": false,
1300
+ "description": "Href for the \"See all\" link."
1301
+ },
1302
+ "linkText": {
1303
+ "type": "string",
1304
+ "required": false,
1305
+ "default": "See all press releases",
1306
+ "defaultSource": "effective",
1307
+ "maxLength": 40
1308
+ },
1309
+ "posts": {
1310
+ "type": "array",
1311
+ "required": true,
1312
+ "itemFields": {
1313
+ "category": {
1314
+ "type": "string",
1315
+ "required": false,
1316
+ "maxLength": 30,
1317
+ "description": "Category label, e.g. \"Company\"."
1318
+ },
1319
+ "date": {
1320
+ "type": "string",
1321
+ "required": false,
1322
+ "maxLength": 30,
1323
+ "description": "Publish date label, e.g. \"July 24, 2026\"."
1324
+ },
1325
+ "href": {
1326
+ "type": "url",
1327
+ "required": false,
1328
+ "description": "Wraps the card in an anchor when set."
1329
+ },
1330
+ "summary": {
1331
+ "type": "string",
1332
+ "required": true,
1333
+ "maxLength": 220
1334
+ },
1335
+ "thumbnail": {
1336
+ "type": "image",
1337
+ "required": true
1338
+ },
1339
+ "thumbnailAlt": {
1340
+ "type": "string",
1341
+ "required": false,
1342
+ "default": "",
1343
+ "defaultSource": "effective",
1344
+ "maxLength": 125,
1345
+ "description": "Alt text for the post thumbnail. Defaults to an empty string, which marks the image as decorative — set it whenever the image carries meaning."
1346
+ },
1347
+ "title": {
1348
+ "type": "string",
1349
+ "required": true,
1350
+ "maxLength": 100
1351
+ }
1352
+ }
1353
+ },
1354
+ "showLink": {
1355
+ "type": "boolean",
1356
+ "required": false,
1357
+ "default": true,
1358
+ "description": "Show the \"See all\" link below the grid. On by default."
1359
+ },
1360
+ "title": {
1361
+ "type": "string",
1362
+ "required": false,
1363
+ "maxLength": 80
1364
+ }
1365
+ }
1366
+ },
1367
+ "feature-blog-categories": {
1368
+ "id": "feature-blog-categories",
1369
+ "name": "Feature Blog Categories",
1370
+ "component": "FeatureBlogCategories",
1371
+ "category": "content",
1372
+ "description": "Light section with a centered H2 heading, a search field, and CMS-managed category tabs above a responsive grid of image-led blog / press-release cards. Filtering by tab and search query happens client-side. Each card links to an internal page (same tab) or an external URL (opens in a new tab).",
1373
+ "purpose": "A light-background content section that showcases blog posts or press releases as a searchable, filterable grid of image-led cards. A search field and a row of CMS-managed category tabs sit above a responsive card grid; both filter the same post list client-side. Each card either navigates to an internal page (same tab) or opens an external URL in a new tab. Modeled after [deriv.com/newsroom/press-releases](https://deriv.com/newsroom/press-releases) and [deriv.com/newsroom/deriv-in-the-news](https://deriv.com/newsroom/deriv-in-the-news).",
1374
+ "keywords": [
1375
+ "blog",
1376
+ "press releases",
1377
+ "newsroom",
1378
+ "articles",
1379
+ "news",
1380
+ "content",
1381
+ "cards",
1382
+ "grid",
1383
+ "search",
1384
+ "filter",
1385
+ "tabs",
1386
+ "categories",
1387
+ "cms",
1388
+ "media",
1389
+ "press",
1390
+ "trading",
1391
+ "deriv"
1392
+ ],
1393
+ "sectionType": "content",
1394
+ "global": false,
1395
+ "requiredFields": [
1396
+ "categories",
1397
+ "posts"
1398
+ ],
1399
+ "optionalFields": [
1400
+ "title",
1401
+ "allCategoryId",
1402
+ "allCategoryLabel",
1403
+ "defaultActiveCategoryId",
1404
+ "searchPlaceholder",
1405
+ "emptyStateText"
1406
+ ],
1407
+ "variants": [
1408
+ "default"
1409
+ ],
1410
+ "recommendedPosition": 4,
1411
+ "placement": [
1412
+ "middle",
1413
+ "bottom"
1414
+ ],
1415
+ "layout": {
1416
+ "alignment": "center",
1417
+ "gridColumns": "3",
1418
+ "contentWidth": "large",
1419
+ "background": false,
1420
+ "overlay": false
1421
+ },
1422
+ "supports": {
1423
+ "backgroundImage": false,
1424
+ "backgroundVideo": false,
1425
+ "foregroundImage": true,
1426
+ "primaryButton": false,
1427
+ "secondaryButton": false,
1428
+ "search": true,
1429
+ "tabs": true,
1430
+ "cardLink": true,
1431
+ "externalLinkNewTab": true,
1432
+ "tags": true
1433
+ },
1434
+ "imageRoles": [
1435
+ "post-thumbnail"
1436
+ ],
1437
+ "defaultValues": {
1438
+ "title": "Deriv press releases",
1439
+ "allCategoryId": "all",
1440
+ "allCategoryLabel": "View all",
1441
+ "searchPlaceholder": "Search",
1442
+ "emptyStateText": "Sorry, we couldn't find any results matching."
1443
+ },
1444
+ "fields": {
1445
+ "allCategoryId": {
1446
+ "type": "string",
1447
+ "required": false,
1448
+ "default": "all",
1449
+ "defaultSource": "effective",
1450
+ "maxLength": 40
1451
+ },
1452
+ "allCategoryLabel": {
1453
+ "type": "string",
1454
+ "required": false,
1455
+ "default": "View all",
1456
+ "defaultSource": "effective",
1457
+ "maxLength": 30
1458
+ },
1459
+ "categories": {
1460
+ "type": "array",
1461
+ "required": true,
1462
+ "description": "Category tabs, CMS-managed. An additional \"all\" tab (see allCategoryId/allCategoryLabel) is always prepended automatically — do not include it here.",
1463
+ "itemFields": {
1464
+ "id": {
1465
+ "type": "string",
1466
+ "required": true,
1467
+ "maxLength": 40,
1468
+ "description": "Must match FeatureBlogCategoryPost.category for filtering to work."
1469
+ },
1470
+ "label": {
1471
+ "type": "string",
1472
+ "required": true,
1473
+ "maxLength": 30
1474
+ }
1475
+ }
1476
+ },
1477
+ "defaultActiveCategoryId": {
1478
+ "type": "string",
1479
+ "required": false,
1480
+ "description": "Initial active tab id. Defaults to allCategoryId (\"View all\") when omitted."
1481
+ },
1482
+ "emptyStateText": {
1483
+ "type": "string",
1484
+ "required": false,
1485
+ "default": "Sorry, we couldn't find any results matching.",
1486
+ "defaultSource": "effective",
1487
+ "maxLength": 120
1488
+ },
1489
+ "posts": {
1490
+ "type": "array",
1491
+ "required": true,
1492
+ "itemFields": {
1493
+ "category": {
1494
+ "type": "string",
1495
+ "required": true,
1496
+ "maxLength": 40,
1497
+ "description": "Must match one of categories[].id. Posts always also match the \"all\" tab."
1498
+ },
1499
+ "categoryLabel": {
1500
+ "type": "string",
1501
+ "required": false,
1502
+ "maxLength": 30,
1503
+ "description": "Category chip label shown on the card. Defaults to the matching tab's label."
1504
+ },
1505
+ "date": {
1506
+ "type": "string",
1507
+ "required": false,
1508
+ "maxLength": 30,
1509
+ "description": "Publish date label, e.g. \"July 24, 2026\"."
1510
+ },
1511
+ "href": {
1512
+ "type": "url",
1513
+ "required": false,
1514
+ "description": "Absolute http(s):// URLs open in a new tab (external); relative/internal paths navigate same-tab."
1515
+ },
1516
+ "summary": {
1517
+ "type": "string",
1518
+ "required": true,
1519
+ "maxLength": 220
1520
+ },
1521
+ "thumbnail": {
1522
+ "type": "image",
1523
+ "required": true
1524
+ },
1525
+ "thumbnailAlt": {
1526
+ "type": "string",
1527
+ "required": false,
1528
+ "default": "",
1529
+ "defaultSource": "effective",
1530
+ "maxLength": 125,
1531
+ "description": "Alt text for the post thumbnail. Defaults to an empty string, which marks the image as decorative — set it whenever the image carries meaning."
1532
+ },
1533
+ "title": {
1534
+ "type": "string",
1535
+ "required": true,
1536
+ "maxLength": 100
1537
+ }
1538
+ }
1539
+ },
1540
+ "searchPlaceholder": {
1541
+ "type": "string",
1542
+ "required": false,
1543
+ "default": "Search",
1544
+ "defaultSource": "effective",
1545
+ "maxLength": 40
1546
+ },
1547
+ "title": {
1548
+ "type": "string",
1549
+ "required": false,
1550
+ "maxLength": 80
1551
+ }
1552
+ }
1553
+ },
1554
+ "feature-blog-page": {
1555
+ "id": "feature-blog-page",
1556
+ "name": "Feature Blog Page",
1557
+ "component": "FeatureBlogPage",
1558
+ "category": "content",
1559
+ "description": "A full blog-article page: category tag, title, author/date meta, hero image, and a rich-content body alongside a sticky 'Contents' (table of contents) + 'Share article' sidebar that scroll-spies the current section on desktop. On mobile the sidebar collapses into an expandable 'Contents' card above the title and a horizontal share-icon row below the hero image. Breadcrumb navigation is not part of this template — it is composed separately above it.",
1560
+ "purpose": "A full blog-article page: category tag, title, author/date meta, hero image, and a rich-content body alongside a sticky \"Contents\" (table of contents) and \"Share article\" sidebar that highlights the current section as the reader scrolls. On mobile/tablet the sidebar collapses into an expandable \"Contents\" card above the title and a horizontal share-icon row below the hero image, so both stay reachable without a persistent floating widget. Breadcrumb navigation is intentionally **not** part of this template — it is composed separately above it by the consuming page. Modeled after [deriv.com/newsroom/updates/deriv-derived-indices-on-tradingview](https://deriv.com/newsroom/updates/deriv-derived-indices-on-tradingview).",
1561
+ "keywords": [
1562
+ "blog",
1563
+ "article",
1564
+ "blog post",
1565
+ "press release",
1566
+ "newsroom",
1567
+ "table of contents",
1568
+ "toc",
1569
+ "contents",
1570
+ "share",
1571
+ "social share",
1572
+ "sticky sidebar",
1573
+ "scrollspy",
1574
+ "author",
1575
+ "byline",
1576
+ "trading",
1577
+ "deriv"
1578
+ ],
1579
+ "sectionType": "article",
1580
+ "global": false,
1581
+ "requiredFields": [
1582
+ "title",
1583
+ "content"
1584
+ ],
1585
+ "optionalFields": [
1586
+ "category",
1587
+ "publishDate",
1588
+ "author",
1589
+ "heroImage",
1590
+ "heroImageAlt",
1591
+ "tocTitle",
1592
+ "tocDefaultOpen",
1593
+ "hideToc",
1594
+ "shareTitle",
1595
+ "shareUrl",
1596
+ "shareText",
1597
+ "sharePlatforms",
1598
+ "hideShare",
1599
+ "copiedLabel"
1600
+ ],
1601
+ "variants": [
1602
+ "default"
1603
+ ],
1604
+ "recommendedPosition": 1,
1605
+ "placement": [
1606
+ "top",
1607
+ "middle"
1608
+ ],
1609
+ "layout": {
1610
+ "alignment": "left",
1611
+ "gridColumns": "2",
1612
+ "contentWidth": "large",
1613
+ "background": false,
1614
+ "overlay": false
1615
+ },
1616
+ "supports": {
1617
+ "backgroundImage": false,
1618
+ "backgroundVideo": false,
1619
+ "foregroundImage": true,
1620
+ "primaryButton": false,
1621
+ "secondaryButton": false,
1622
+ "cardLink": false,
1623
+ "icons": true,
1624
+ "tableOfContents": true,
1625
+ "socialShare": true,
1626
+ "richContent": true
1627
+ },
1628
+ "imageRoles": [
1629
+ "hero-image",
1630
+ "author-avatar",
1631
+ "inline-image"
1632
+ ],
1633
+ "defaultValues": {
1634
+ "tocTitle": "Contents",
1635
+ "tocDefaultOpen": true,
1636
+ "hideToc": false,
1637
+ "shareTitle": "Share article",
1638
+ "sharePlatforms": [
1639
+ "facebook",
1640
+ "twitter",
1641
+ "telegram",
1642
+ "linkedin"
1643
+ ],
1644
+ "hideShare": false,
1645
+ "copiedLabel": "Copied!"
1646
+ },
1647
+ "fields": {
1648
+ "author": {
1649
+ "type": "object",
1650
+ "required": false,
1651
+ "objectFields": {
1652
+ "avatar": {
1653
+ "type": "image",
1654
+ "required": false
1655
+ },
1656
+ "avatarAlt": {
1657
+ "type": "string",
1658
+ "required": false,
1659
+ "maxLength": 125
1660
+ },
1661
+ "name": {
1662
+ "type": "string",
1663
+ "required": true,
1664
+ "maxLength": 60
1665
+ }
1666
+ }
1667
+ },
1668
+ "category": {
1669
+ "type": "string",
1670
+ "required": false,
1671
+ "maxLength": 40,
1672
+ "description": "Small category label rendered above the title, e.g. \"Press releases\"."
1673
+ },
1674
+ "content": {
1675
+ "type": "array",
1676
+ "required": true,
1677
+ "itemFields": {
1678
+ "caption": {
1679
+ "type": "string",
1680
+ "required": false,
1681
+ "maxLength": 200
1682
+ },
1683
+ "cite": {
1684
+ "type": "string",
1685
+ "required": false,
1686
+ "maxLength": 120
1687
+ },
1688
+ "id": {
1689
+ "type": "string",
1690
+ "required": false,
1691
+ "maxLength": 80,
1692
+ "description": "Stable anchor id; auto-generated (slugified) from `text` when omitted."
1693
+ },
1694
+ "image": {
1695
+ "type": "image",
1696
+ "required": false
1697
+ },
1698
+ "imageAlt": {
1699
+ "type": "string",
1700
+ "required": false,
1701
+ "maxLength": 125
1702
+ },
1703
+ "items": {
1704
+ "type": "array",
1705
+ "required": false
1706
+ },
1707
+ "level": {
1708
+ "type": "number",
1709
+ "required": false,
1710
+ "default": 2,
1711
+ "defaultSource": "effective",
1712
+ "enum": [
1713
+ 2,
1714
+ 3
1715
+ ],
1716
+ "description": "Only level-2 headings are collected into the table of contents."
1717
+ },
1718
+ "ordered": {
1719
+ "type": "boolean",
1720
+ "required": false,
1721
+ "default": false,
1722
+ "defaultSource": "effective"
1723
+ },
1724
+ "text": {
1725
+ "type": "string",
1726
+ "required": false,
1727
+ "maxLength": 1000
1728
+ },
1729
+ "type": {
1730
+ "type": "string",
1731
+ "required": true,
1732
+ "enum": [
1733
+ "heading",
1734
+ "paragraph",
1735
+ "list",
1736
+ "quote",
1737
+ "image"
1738
+ ]
1739
+ }
1740
+ }
1741
+ },
1742
+ "copiedLabel": {
1743
+ "type": "string",
1744
+ "required": false,
1745
+ "default": "Copied!",
1746
+ "maxLength": 30
1747
+ },
1748
+ "heroImage": {
1749
+ "type": "image",
1750
+ "required": false
1751
+ },
1752
+ "heroImageAlt": {
1753
+ "type": "string",
1754
+ "required": false,
1755
+ "default": "",
1756
+ "defaultSource": "effective",
1757
+ "maxLength": 125
1758
+ },
1759
+ "hideShare": {
1760
+ "type": "boolean",
1761
+ "required": false,
1762
+ "default": false
1763
+ },
1764
+ "hideToc": {
1765
+ "type": "boolean",
1766
+ "required": false,
1767
+ "default": false
1768
+ },
1769
+ "publishDate": {
1770
+ "type": "string",
1771
+ "required": false,
1772
+ "maxLength": 30,
1773
+ "description": "Publish date label, e.g. \"July 24, 2026\"."
1774
+ },
1775
+ "sharePlatforms": {
1776
+ "type": "array",
1777
+ "required": false,
1778
+ "default": [
1779
+ "facebook",
1780
+ "twitter",
1781
+ "telegram",
1782
+ "linkedin"
1783
+ ],
1784
+ "defaultSource": "effective",
1785
+ "enum": [
1786
+ "facebook",
1787
+ "twitter",
1788
+ "linkedin",
1789
+ "telegram"
1790
+ ]
1791
+ },
1792
+ "shareText": {
1793
+ "type": "string",
1794
+ "required": false,
1795
+ "maxLength": 200,
1796
+ "description": "Text passed to platforms that accept share text (X/Twitter, Telegram); defaults to `title`."
1797
+ },
1798
+ "shareTitle": {
1799
+ "type": "string",
1800
+ "required": false,
1801
+ "default": "Share article",
1802
+ "maxLength": 40
1803
+ },
1804
+ "shareUrl": {
1805
+ "type": "url",
1806
+ "required": false,
1807
+ "description": "Canonical URL used to build every share link and for \"copy link\"; sharing is hidden when omitted."
1808
+ },
1809
+ "title": {
1810
+ "type": "string",
1811
+ "required": true,
1812
+ "maxLength": 160
1813
+ },
1814
+ "tocDefaultOpen": {
1815
+ "type": "boolean",
1816
+ "required": false,
1817
+ "default": true
1818
+ },
1819
+ "tocTitle": {
1820
+ "type": "string",
1821
+ "required": false,
1822
+ "default": "Contents",
1823
+ "maxLength": 40
1824
+ }
439
1825
  }
440
1826
  },
441
1827
  "feature-bullets-image-right": {
@@ -500,6 +1886,33 @@
500
1886
  "defaultValues": {
501
1887
  "imageAlt": "",
502
1888
  "imagePosition": "right"
1889
+ },
1890
+ "fields": {
1891
+ "bullets": {
1892
+ "type": "array",
1893
+ "required": true
1894
+ },
1895
+ "image": {
1896
+ "type": "image",
1897
+ "required": true,
1898
+ "aspectRatio": "1:1"
1899
+ },
1900
+ "imageAlt": {
1901
+ "type": "string",
1902
+ "required": false,
1903
+ "maxLength": 125,
1904
+ "default": ""
1905
+ },
1906
+ "imagePosition": {
1907
+ "type": "string",
1908
+ "required": false,
1909
+ "default": "right"
1910
+ },
1911
+ "title": {
1912
+ "type": "string",
1913
+ "required": true,
1914
+ "maxLength": 80
1915
+ }
503
1916
  }
504
1917
  },
505
1918
  "feature-cards": {
@@ -572,6 +1985,117 @@
572
1985
  "showLink": false,
573
1986
  "linkText": "Learn more",
574
1987
  "cardColorScheme": "image"
1988
+ },
1989
+ "fields": {
1990
+ "cardColorScheme": {
1991
+ "type": "string",
1992
+ "required": false,
1993
+ "default": "image",
1994
+ "description": "Fallback colour scheme applied to every card that does not set its own colorScheme. Used by the `default` variant only."
1995
+ },
1996
+ "cards": {
1997
+ "type": "array",
1998
+ "required": true,
1999
+ "itemFields": {
2000
+ "colorScheme": {
2001
+ "type": "string",
2002
+ "required": false,
2003
+ "description": "Per-card colour scheme. Falls back to the section's cardColorScheme (default \"image\") when omitted. Used by the `default` variant only."
2004
+ },
2005
+ "description": {
2006
+ "type": "string",
2007
+ "required": true,
2008
+ "maxLength": 200
2009
+ },
2010
+ "image": {
2011
+ "type": "image",
2012
+ "required": false
2013
+ },
2014
+ "imageAlt": {
2015
+ "type": "string",
2016
+ "required": false,
2017
+ "default": "",
2018
+ "defaultSource": "effective",
2019
+ "maxLength": 125,
2020
+ "description": "Alt text for the card image. Defaults to an empty string, which marks the image as decorative — set it whenever the image carries meaning."
2021
+ },
2022
+ "linkHref": {
2023
+ "type": "url",
2024
+ "required": false,
2025
+ "description": "Link target. Only used by the `twoCards` and `oneCard` variants; the `default` variant renders the link without an href."
2026
+ },
2027
+ "linkText": {
2028
+ "type": "string",
2029
+ "required": false,
2030
+ "default": "Learn more",
2031
+ "defaultSource": "effective",
2032
+ "maxLength": 30
2033
+ },
2034
+ "platforms": {
2035
+ "type": "array",
2036
+ "required": false
2037
+ },
2038
+ "platformsHeading": {
2039
+ "type": "string",
2040
+ "required": false,
2041
+ "default": "Available on",
2042
+ "defaultSource": "effective",
2043
+ "maxLength": 30,
2044
+ "description": "Heading above the platform row. Used by the `twoCards` and `oneCard` variants."
2045
+ },
2046
+ "showLink": {
2047
+ "type": "boolean",
2048
+ "required": false,
2049
+ "default": true,
2050
+ "defaultSource": "effective",
2051
+ "description": "Show the \"Learn more\" link on THIS card. ON by default — omitting it renders a link. Pass false explicitly on every card that should have no link. This is the opposite of the section-level showLink default."
2052
+ },
2053
+ "title": {
2054
+ "type": "string",
2055
+ "required": true,
2056
+ "maxLength": 60
2057
+ },
2058
+ "twoTone": {
2059
+ "type": "string",
2060
+ "required": false,
2061
+ "default": "light",
2062
+ "defaultSource": "effective",
2063
+ "enum": [
2064
+ "dark",
2065
+ "light"
2066
+ ],
2067
+ "description": "Card tone. Used by the `twoCards` variant only. Anything other than \"dark\" renders light, so omitting this is equivalent to \"light\"."
2068
+ }
2069
+ }
2070
+ },
2071
+ "linkText": {
2072
+ "type": "string",
2073
+ "required": false,
2074
+ "default": "Learn more",
2075
+ "maxLength": 30,
2076
+ "description": "Label for the section-level link."
2077
+ },
2078
+ "sectionDescription": {
2079
+ "type": "string",
2080
+ "required": false,
2081
+ "maxLength": 200
2082
+ },
2083
+ "sectionTitle": {
2084
+ "type": "string",
2085
+ "required": true,
2086
+ "maxLength": 80
2087
+ },
2088
+ "showLink": {
2089
+ "type": "boolean",
2090
+ "required": false,
2091
+ "default": false,
2092
+ "description": "Show a section-level link below the section title. Off by default. NOTE: this controls the SECTION link only — it does not control the per-card links, which are on by default. See cards[].showLink."
2093
+ },
2094
+ "variant": {
2095
+ "type": "string",
2096
+ "required": false,
2097
+ "default": "default"
2098
+ }
575
2099
  }
576
2100
  },
577
2101
  "feature-cards-icon": {
@@ -635,6 +2159,72 @@
635
2159
  "defaultValues": {
636
2160
  "showLink": false,
637
2161
  "linkText": "Learn more"
2162
+ },
2163
+ "fields": {
2164
+ "cards": {
2165
+ "type": "array",
2166
+ "required": true,
2167
+ "itemFields": {
2168
+ "description": {
2169
+ "type": "string",
2170
+ "required": true,
2171
+ "maxLength": 200
2172
+ },
2173
+ "icon": {
2174
+ "type": "image",
2175
+ "required": false
2176
+ },
2177
+ "linkText": {
2178
+ "type": "string",
2179
+ "required": false,
2180
+ "default": "Learn more",
2181
+ "defaultSource": "effective",
2182
+ "maxLength": 30
2183
+ },
2184
+ "showIcon": {
2185
+ "type": "boolean",
2186
+ "required": false,
2187
+ "default": true,
2188
+ "defaultSource": "effective",
2189
+ "description": "Show the card icon. On by default; the icon only renders if `icon` is also provided."
2190
+ },
2191
+ "showLink": {
2192
+ "type": "boolean",
2193
+ "required": false,
2194
+ "default": true,
2195
+ "defaultSource": "effective",
2196
+ "description": "Show the \"Learn more\" link on THIS card. ON by default — omitting it renders a link. Pass false explicitly on every card that should have no link. This is the opposite of the section-level showLink default."
2197
+ },
2198
+ "title": {
2199
+ "type": "string",
2200
+ "required": true,
2201
+ "maxLength": 60
2202
+ }
2203
+ }
2204
+ },
2205
+ "linkText": {
2206
+ "type": "string",
2207
+ "required": false,
2208
+ "default": "Learn more",
2209
+ "maxLength": 30,
2210
+ "description": "Label for the section-level link."
2211
+ },
2212
+ "sectionDescription": {
2213
+ "type": "string",
2214
+ "required": false,
2215
+ "maxLength": 200
2216
+ },
2217
+ "sectionTitle": {
2218
+ "type": "string",
2219
+ "required": true,
2220
+ "maxLength": 80
2221
+ },
2222
+ "showLink": {
2223
+ "type": "boolean",
2224
+ "required": false,
2225
+ "default": false,
2226
+ "description": "Show a section-level link below the section title. Off by default. NOTE: this controls the SECTION link only — it does not control the per-card links, which are on by default. See cards[].showLink."
2227
+ }
638
2228
  }
639
2229
  },
640
2230
  "feature-scroll-media-right": {
@@ -697,6 +2287,51 @@
697
2287
  ],
698
2288
  "defaultValues": {
699
2289
  "variant": "media-right"
2290
+ },
2291
+ "fields": {
2292
+ "header": {
2293
+ "type": "string",
2294
+ "required": true,
2295
+ "maxLength": 80
2296
+ },
2297
+ "items": {
2298
+ "type": "array",
2299
+ "required": true,
2300
+ "itemFields": {
2301
+ "description": {
2302
+ "type": "string",
2303
+ "required": true,
2304
+ "maxLength": 200
2305
+ },
2306
+ "link": {
2307
+ "type": "url",
2308
+ "required": true
2309
+ },
2310
+ "linkLabel": {
2311
+ "type": "string",
2312
+ "required": true,
2313
+ "maxLength": 30
2314
+ },
2315
+ "mediaType": {
2316
+ "type": "string",
2317
+ "required": false
2318
+ },
2319
+ "mediaUrl": {
2320
+ "type": "url",
2321
+ "required": true
2322
+ },
2323
+ "title": {
2324
+ "type": "string",
2325
+ "required": true,
2326
+ "maxLength": 60
2327
+ }
2328
+ }
2329
+ },
2330
+ "variant": {
2331
+ "type": "string",
2332
+ "required": false,
2333
+ "default": "media-right"
2334
+ }
700
2335
  }
701
2336
  },
702
2337
  "feature-split-image-right": {
@@ -764,6 +2399,57 @@
764
2399
  "showLink": true,
765
2400
  "imageAlt": "",
766
2401
  "imagePosition": "right"
2402
+ },
2403
+ "fields": {
2404
+ "description": {
2405
+ "type": "string",
2406
+ "required": false,
2407
+ "maxLength": 200
2408
+ },
2409
+ "image": {
2410
+ "type": "image",
2411
+ "required": false,
2412
+ "aspectRatio": "1:1"
2413
+ },
2414
+ "imageAlt": {
2415
+ "type": "string",
2416
+ "required": false,
2417
+ "default": "",
2418
+ "maxLength": 125,
2419
+ "description": "Alt text for the image. Defaults to an empty string, which marks the image as decorative — set it whenever the image carries meaning."
2420
+ },
2421
+ "imagePosition": {
2422
+ "type": "string",
2423
+ "required": false,
2424
+ "default": "right",
2425
+ "enum": [
2426
+ "left",
2427
+ "right"
2428
+ ]
2429
+ },
2430
+ "linkText": {
2431
+ "type": "string",
2432
+ "required": false,
2433
+ "default": "Learn more",
2434
+ "maxLength": 30
2435
+ },
2436
+ "showDescription": {
2437
+ "type": "boolean",
2438
+ "required": false,
2439
+ "default": true,
2440
+ "description": "Show the description. On by default; only renders if `description` is also provided."
2441
+ },
2442
+ "showLink": {
2443
+ "type": "boolean",
2444
+ "required": false,
2445
+ "default": true,
2446
+ "description": "Show the \"Learn more\" link. ON by default — omit it and a link renders. Pass false to suppress it. This block has a single flat link (no cards array), so there is only one level of showLink here."
2447
+ },
2448
+ "title": {
2449
+ "type": "string",
2450
+ "required": true,
2451
+ "maxLength": 80
2452
+ }
767
2453
  }
768
2454
  },
769
2455
  "footer-global": {
@@ -774,47 +2460,531 @@
774
2460
  "description": "Global site footer with multi-column navigation, social links, optional app promo, certifications badge, and legal/risk copy.",
775
2461
  "purpose": "Global site footer for marketing pages: secondary navigation columns, social links, optional Deriv GO / app promo, Investors in People badge, licence text, and risk warning. This block closes every page shell and carries required legal disclosures.",
776
2462
  "keywords": [
777
- "footer",
778
- "site-footer",
779
- "global-footer",
780
- "secondary-navigation",
781
- "legal",
782
- "copyright",
783
- "social-links",
2463
+ "footer",
2464
+ "site-footer",
2465
+ "global-footer",
2466
+ "secondary-navigation",
2467
+ "legal",
2468
+ "copyright",
2469
+ "social-links",
2470
+ "links",
2471
+ "license",
2472
+ "risk-warning",
2473
+ "download",
2474
+ "sitemap"
2475
+ ],
2476
+ "sectionType": "footer",
2477
+ "global": true,
2478
+ "requiredFields": [
2479
+ "logoSrc",
2480
+ "navColumns"
2481
+ ],
2482
+ "optionalFields": [
2483
+ "logoAlt",
2484
+ "socialLinks",
2485
+ "derivGo",
2486
+ "investorsInPeopleSrc",
2487
+ "investorsInPeopleAlt",
2488
+ "licenseText",
2489
+ "riskWarningText",
2490
+ "aiSummary"
2491
+ ],
2492
+ "variants": [
2493
+ "default"
2494
+ ],
2495
+ "recommendedPosition": 99,
2496
+ "placement": [
2497
+ "bottom"
2498
+ ],
2499
+ "layout": {
2500
+ "alignment": "start",
2501
+ "buttonLayout": "none",
2502
+ "contentWidth": "wide",
2503
+ "background": true,
2504
+ "overlay": false
2505
+ },
2506
+ "supports": {
2507
+ "backgroundImage": false,
2508
+ "backgroundVideo": false,
2509
+ "foregroundImage": false,
2510
+ "primaryButton": false,
2511
+ "secondaryButton": false,
2512
+ "socialLinks": true,
2513
+ "appBadges": true,
2514
+ "legalCopy": true
2515
+ },
2516
+ "imageRoles": [
2517
+ "logo",
2518
+ "investors-in-people-badge",
2519
+ "qr-code",
2520
+ "app-store-badge"
2521
+ ],
2522
+ "defaultValues": {
2523
+ "logoAlt": "Deriv",
2524
+ "licenseText": "Read our Terms and Conditions and Risk Disclosure.",
2525
+ "riskWarningText": "The products offered on our website are complex derivative products that carry a significant risk of potential loss."
2526
+ },
2527
+ "fields": {
2528
+ "investorsInPeopleAlt": {
2529
+ "type": "string",
2530
+ "required": false,
2531
+ "maxLength": 80,
2532
+ "default": "Investors in People - Platinum"
2533
+ },
2534
+ "investorsInPeopleSrc": {
2535
+ "type": "image",
2536
+ "required": false
2537
+ },
2538
+ "licenseText": {
2539
+ "type": "string",
2540
+ "required": false
2541
+ },
2542
+ "logoAlt": {
2543
+ "type": "string",
2544
+ "required": false,
2545
+ "maxLength": 60,
2546
+ "default": "Deriv"
2547
+ },
2548
+ "logoSrc": {
2549
+ "type": "image",
2550
+ "required": true
2551
+ },
2552
+ "navColumns": {
2553
+ "type": "array",
2554
+ "required": true
2555
+ },
2556
+ "riskWarningText": {
2557
+ "type": "string",
2558
+ "required": false
2559
+ },
2560
+ "socialLinks": {
2561
+ "type": "array",
2562
+ "required": false,
2563
+ "default": []
2564
+ }
2565
+ }
2566
+ },
2567
+ "header-visuals": {
2568
+ "id": "header-visuals",
2569
+ "name": "Header Visuals",
2570
+ "component": "Header",
2571
+ "category": "header",
2572
+ "description": "Sub-page header with centred title, CTA buttons, and either a light-grey background with optional floating parallax visuals, or a dark navy background (optionally with a search field) in a shorter format.",
2573
+ "purpose": "A page header for sub-pages: an optional eyebrow subtitle, a large title, optional description, and up to two CTA buttons over a faint SVG grid background. - **Visuals** variant adds floating parallax images in the top-left and bottom-right corners. - **Minimal** variant is the same without the floating graphics. - **Centred - Dark** variant swaps to a dark navy background with a shorter min-height, for tool/resource index pages that sit right below a dark navbar (no breadcrumb or navbar baked in — pair those components separately, as on `deriv.com/trading-calculators`). - **Centred - Dark with Search** variant is the dark background plus a search field below the title/description, for pages like the Help Centre index. This block is designed as a lower-weight alternative to the full-viewport Hero — it sits above content without dominating the first viewport (min-height 540px for the light variants; 420px on mobile/tablet and 460px on desktop for the dark variants — actual height still grows with longer content).",
2574
+ "keywords": [
2575
+ "header",
2576
+ "page-header",
2577
+ "sub-page",
2578
+ "hero",
2579
+ "title",
2580
+ "intro",
2581
+ "introduction",
2582
+ "banner",
2583
+ "parallax",
2584
+ "cta",
2585
+ "trading",
2586
+ "deriv",
2587
+ "dark",
2588
+ "search",
2589
+ "help-centre"
2590
+ ],
2591
+ "sectionType": "header",
2592
+ "global": false,
2593
+ "requiredFields": [
2594
+ "variant",
2595
+ "title"
2596
+ ],
2597
+ "optionalFields": [
2598
+ "subtitle",
2599
+ "description",
2600
+ "primaryButton",
2601
+ "secondaryButton",
2602
+ "leftVisual",
2603
+ "rightVisual",
2604
+ "search"
2605
+ ],
2606
+ "variants": [
2607
+ "visuals",
2608
+ "minimal",
2609
+ "dark",
2610
+ "dark-search"
2611
+ ],
2612
+ "recommendedPosition": 1,
2613
+ "placement": [
2614
+ "top"
2615
+ ],
2616
+ "layout": {
2617
+ "alignment": "center",
2618
+ "buttonLayout": "horizontal",
2619
+ "contentWidth": "medium",
2620
+ "background": false,
2621
+ "overlay": true
2622
+ },
2623
+ "supports": {
2624
+ "backgroundImage": false,
2625
+ "backgroundVideo": false,
2626
+ "foregroundImage": true,
2627
+ "primaryButton": true,
2628
+ "secondaryButton": true,
2629
+ "eyebrow": true,
2630
+ "parallax": true,
2631
+ "search": true
2632
+ },
2633
+ "imageRoles": [
2634
+ "left-visual",
2635
+ "right-visual"
2636
+ ],
2637
+ "defaultValues": {},
2638
+ "fields": {
2639
+ "description": {
2640
+ "type": "string",
2641
+ "required": false,
2642
+ "maxLength": 200
2643
+ },
2644
+ "leftVisual": {
2645
+ "type": "image",
2646
+ "required": false,
2647
+ "aspectRatio": "1:1",
2648
+ "description": "Left floating visual, rendered by the `visuals` variant only. Accepts a ReactNode in code; page builders should pass an image URL string."
2649
+ },
2650
+ "primaryButton": {
2651
+ "type": "object",
2652
+ "required": false,
2653
+ "description": "Primary CTA (coral). Shown on both variants.",
2654
+ "objectFields": {
2655
+ "href": {
2656
+ "type": "url",
2657
+ "required": false,
2658
+ "description": "Renders an anchor when provided."
2659
+ },
2660
+ "label": {
2661
+ "type": "string",
2662
+ "required": true,
2663
+ "maxLength": 30
2664
+ }
2665
+ }
2666
+ },
2667
+ "rightVisual": {
2668
+ "type": "image",
2669
+ "required": false,
2670
+ "aspectRatio": "1:1",
2671
+ "description": "Right floating visual, rendered by the `visuals` variant only. Accepts a ReactNode in code; page builders should pass an image URL string."
2672
+ },
2673
+ "search": {
2674
+ "type": "object",
2675
+ "required": false,
2676
+ "description": "Search field configuration, rendered only by the `dark-search` variant (the field always appears for that variant; this only customises it).",
2677
+ "objectFields": {
2678
+ "placeholder": {
2679
+ "type": "string",
2680
+ "required": false,
2681
+ "maxLength": 40,
2682
+ "description": "Placeholder text for the search input. Defaults to \"Search\"."
2683
+ }
2684
+ }
2685
+ },
2686
+ "secondaryButton": {
2687
+ "type": "object",
2688
+ "required": false,
2689
+ "description": "Secondary CTA (white outline). Shown on both variants.",
2690
+ "objectFields": {
2691
+ "href": {
2692
+ "type": "url",
2693
+ "required": false,
2694
+ "description": "Renders an anchor when provided."
2695
+ },
2696
+ "label": {
2697
+ "type": "string",
2698
+ "required": true,
2699
+ "maxLength": 30
2700
+ }
2701
+ }
2702
+ },
2703
+ "subtitle": {
2704
+ "type": "string",
2705
+ "required": false,
2706
+ "maxLength": 30
2707
+ },
2708
+ "title": {
2709
+ "type": "string",
2710
+ "required": true,
2711
+ "maxLength": 80
2712
+ },
2713
+ "variant": {
2714
+ "type": "string",
2715
+ "required": true,
2716
+ "enum": [
2717
+ "visuals",
2718
+ "minimal",
2719
+ "dark",
2720
+ "dark-search"
2721
+ ],
2722
+ "description": "Layout variant. Required — the component has no fallback, so omitting it renders an unstyled header. 'dark' and 'dark-search' use a dark navy background with a shorter min-height than 'visuals'/'minimal'; 'dark-search' also renders a search field below the text (e.g. Help Centre header)."
2723
+ }
2724
+ }
2725
+ },
2726
+ "help-center-page": {
2727
+ "id": "help-center-page",
2728
+ "name": "Help Center Page",
2729
+ "component": "HelpCenterPage",
2730
+ "category": "help-centre",
2731
+ "description": "A full help-centre question/answer page: a top search bar, a sticky sidebar table listing every question in the current category (highlighting the active one), and a main content column rendering the CMS-supplied answer. On mobile the sidebar collapses into a pill dropdown that opens an 'Articles in this section' bottom sheet.",
2732
+ "purpose": "The full help-centre question/answer page: a top search bar, a sidebar \"table\" listing every question in the current category (the currently viewed question is highlighted, and clicking a different one moves that highlight), and a main content column that renders the answer body supplied by a CMS. On mobile the sidebar table collapses into a rounded \"Account\"-style pill dropdown that opens an \"Articles in this section\" bottom sheet with the same question list. Modeled after [deriv.com/help-centre-question/how-can-i-update-my-personal-information](https://deriv.com/help-centre-question/how-can-i-update-my-personal-information) and [deriv.com/help-centre/account](https://deriv.com/help-centre/account). This is the third of the Help Centre blocks — pair it with `HelpCentreCategories` (top-level topic grid) and `HelpCentreSubCategories` (a single category's question grid) as the entry points that link into this page.",
2733
+ "keywords": [
2734
+ "help centre",
2735
+ "help center",
2736
+ "support",
2737
+ "faq",
2738
+ "question",
2739
+ "answer",
2740
+ "article",
2741
+ "search",
2742
+ "sidebar",
2743
+ "table of contents",
2744
+ "bottom sheet",
2745
+ "account",
2746
+ "self-service",
2747
+ "trading",
2748
+ "deriv"
2749
+ ],
2750
+ "sectionType": "article",
2751
+ "global": false,
2752
+ "requiredFields": [
2753
+ "categoryTitle",
2754
+ "questions",
2755
+ "contentTitle",
2756
+ "content"
2757
+ ],
2758
+ "optionalFields": [
2759
+ "activeQuestionId",
2760
+ "defaultActiveQuestionId",
2761
+ "searchPlaceholder",
2762
+ "searchAriaLabel",
2763
+ "searchNoResultsText",
2764
+ "articlesSheetTitle"
2765
+ ],
2766
+ "variants": [
2767
+ "default"
2768
+ ],
2769
+ "recommendedPosition": 1,
2770
+ "placement": [
2771
+ "top",
2772
+ "middle"
2773
+ ],
2774
+ "layout": {
2775
+ "alignment": "left",
2776
+ "gridColumns": "2",
2777
+ "contentWidth": "large",
2778
+ "background": false,
2779
+ "overlay": false
2780
+ },
2781
+ "supports": {
2782
+ "backgroundImage": false,
2783
+ "backgroundVideo": false,
2784
+ "foregroundImage": false,
2785
+ "primaryButton": false,
2786
+ "secondaryButton": false,
2787
+ "search": true,
2788
+ "liveFilter": true,
2789
+ "cardLink": true,
2790
+ "icons": false,
2791
+ "bottomSheet": true,
2792
+ "richContent": true
2793
+ },
2794
+ "imageRoles": [],
2795
+ "defaultValues": {
2796
+ "searchPlaceholder": "Search",
2797
+ "searchNoResultsText": "No results found for \"{query}\"",
2798
+ "articlesSheetTitle": "Articles in this section"
2799
+ },
2800
+ "fields": {
2801
+ "activeQuestionId": {
2802
+ "type": "string",
2803
+ "required": false,
2804
+ "maxLength": 60
2805
+ },
2806
+ "articlesSheetTitle": {
2807
+ "type": "string",
2808
+ "required": false,
2809
+ "maxLength": 60,
2810
+ "default": "Articles in this section"
2811
+ },
2812
+ "categoryTitle": {
2813
+ "type": "string",
2814
+ "required": true,
2815
+ "maxLength": 60
2816
+ },
2817
+ "content": {
2818
+ "type": "array",
2819
+ "required": true,
2820
+ "itemFields": {
2821
+ "items": {
2822
+ "type": "array",
2823
+ "required": false
2824
+ },
2825
+ "level": {
2826
+ "type": "number",
2827
+ "required": false,
2828
+ "enum": [
2829
+ 2,
2830
+ 3
2831
+ ]
2832
+ },
2833
+ "ordered": {
2834
+ "type": "boolean",
2835
+ "required": false
2836
+ },
2837
+ "text": {
2838
+ "type": "string",
2839
+ "required": false,
2840
+ "maxLength": 500
2841
+ },
2842
+ "type": {
2843
+ "type": "string",
2844
+ "required": true,
2845
+ "enum": [
2846
+ "heading",
2847
+ "paragraph",
2848
+ "list"
2849
+ ]
2850
+ }
2851
+ }
2852
+ },
2853
+ "contentTitle": {
2854
+ "type": "string",
2855
+ "required": true,
2856
+ "maxLength": 160
2857
+ },
2858
+ "defaultActiveQuestionId": {
2859
+ "type": "string",
2860
+ "required": false,
2861
+ "maxLength": 60
2862
+ },
2863
+ "questions": {
2864
+ "type": "array",
2865
+ "required": true,
2866
+ "itemFields": {
2867
+ "content": {
2868
+ "type": "array",
2869
+ "required": false,
2870
+ "itemFields": {
2871
+ "items": {
2872
+ "type": "array",
2873
+ "required": false
2874
+ },
2875
+ "level": {
2876
+ "type": "number",
2877
+ "required": false,
2878
+ "enum": [
2879
+ 2,
2880
+ 3
2881
+ ]
2882
+ },
2883
+ "ordered": {
2884
+ "type": "boolean",
2885
+ "required": false
2886
+ },
2887
+ "text": {
2888
+ "type": "string",
2889
+ "required": false,
2890
+ "maxLength": 500
2891
+ },
2892
+ "type": {
2893
+ "type": "string",
2894
+ "required": true,
2895
+ "enum": [
2896
+ "heading",
2897
+ "paragraph",
2898
+ "list"
2899
+ ]
2900
+ }
2901
+ }
2902
+ },
2903
+ "contentTitle": {
2904
+ "type": "string",
2905
+ "required": false,
2906
+ "maxLength": 160
2907
+ },
2908
+ "href": {
2909
+ "type": "url",
2910
+ "required": false
2911
+ },
2912
+ "id": {
2913
+ "type": "string",
2914
+ "required": true,
2915
+ "maxLength": 60
2916
+ },
2917
+ "question": {
2918
+ "type": "string",
2919
+ "required": true,
2920
+ "maxLength": 160
2921
+ }
2922
+ }
2923
+ },
2924
+ "searchAriaLabel": {
2925
+ "type": "string",
2926
+ "required": false,
2927
+ "maxLength": 60
2928
+ },
2929
+ "searchNoResultsText": {
2930
+ "type": "string",
2931
+ "required": false,
2932
+ "maxLength": 100,
2933
+ "default": "No results found for \"{query}\""
2934
+ },
2935
+ "searchPlaceholder": {
2936
+ "type": "string",
2937
+ "required": false,
2938
+ "maxLength": 40,
2939
+ "default": "Search"
2940
+ }
2941
+ }
2942
+ },
2943
+ "help-centre-categories": {
2944
+ "id": "help-centre-categories",
2945
+ "name": "Help Centre Categories",
2946
+ "component": "HelpCentreCategories",
2947
+ "category": "help-centre",
2948
+ "description": "Optional header above a responsive grid of clickable icon-and-title category tiles that link into topic-specific help content.",
2949
+ "purpose": "An optional centred header above a responsive grid of clickable icon-and-title category tiles. Each tile is a self-contained link (or button) that routes visitors into a topic-specific slice of help content. Modeled after the category grid on [deriv.com/help-centre](https://deriv.com/help-centre) (Account, Verification, Deposits and withdrawals, Deriv P2P, Deriv MT5, Deriv cTrader, Deriv Trader, Deriv Bot, Promotions, TradingView, TradersView, About Amy). This is the first of several planned Help Centre blocks (search/hero, FAQ list, contact support, etc.) and is designed to sit directly below a help-centre search bar as the primary navigation surface into support content.",
2950
+ "keywords": [
2951
+ "help centre",
2952
+ "help center",
2953
+ "support",
2954
+ "categories",
2955
+ "faq",
2956
+ "topics",
2957
+ "navigation",
2958
+ "grid",
2959
+ "tiles",
2960
+ "icons",
784
2961
  "links",
785
- "license",
786
- "risk-warning",
787
- "download",
788
- "sitemap"
2962
+ "self-service",
2963
+ "trading",
2964
+ "deriv"
789
2965
  ],
790
- "sectionType": "footer",
791
- "global": true,
2966
+ "sectionType": "navigation",
2967
+ "global": false,
792
2968
  "requiredFields": [
793
- "logoSrc",
794
- "navColumns"
2969
+ "categories"
795
2970
  ],
796
2971
  "optionalFields": [
797
- "logoAlt",
798
- "socialLinks",
799
- "derivGo",
800
- "investorsInPeopleSrc",
801
- "investorsInPeopleAlt",
802
- "licenseText",
803
- "riskWarningText",
804
- "aiSummary"
2972
+ "sectionTitle",
2973
+ "sectionDescription"
805
2974
  ],
806
2975
  "variants": [
807
2976
  "default"
808
2977
  ],
809
- "recommendedPosition": 99,
2978
+ "recommendedPosition": 1,
810
2979
  "placement": [
811
- "bottom"
2980
+ "top",
2981
+ "middle"
812
2982
  ],
813
2983
  "layout": {
814
- "alignment": "start",
815
- "buttonLayout": "none",
816
- "contentWidth": "wide",
817
- "background": true,
2984
+ "alignment": "left",
2985
+ "gridColumns": "1-3",
2986
+ "contentWidth": "large",
2987
+ "background": false,
818
2988
  "overlay": false
819
2989
  },
820
2990
  "supports": {
@@ -823,98 +2993,174 @@
823
2993
  "foregroundImage": false,
824
2994
  "primaryButton": false,
825
2995
  "secondaryButton": false,
826
- "socialLinks": true,
827
- "appBadges": true,
828
- "legalCopy": true
2996
+ "sectionLink": false,
2997
+ "cardLink": true,
2998
+ "icons": true
829
2999
  },
830
3000
  "imageRoles": [
831
- "logo",
832
- "investors-in-people-badge",
833
- "qr-code",
834
- "app-store-badge"
835
- ],
836
- "defaultValues": {
837
- "logoAlt": "Deriv",
838
- "licenseText": "Read our Terms and Conditions and Risk Disclosure.",
839
- "riskWarningText": "The products offered on our website are complex derivative products that carry a significant risk of potential loss."
3001
+ "category-icon"
3002
+ ],
3003
+ "defaultValues": {},
3004
+ "fields": {
3005
+ "categories": {
3006
+ "type": "array",
3007
+ "required": true,
3008
+ "itemFields": {
3009
+ "href": {
3010
+ "type": "url",
3011
+ "required": false
3012
+ },
3013
+ "icon": {
3014
+ "type": "image",
3015
+ "required": false
3016
+ },
3017
+ "iconAlt": {
3018
+ "type": "string",
3019
+ "required": false,
3020
+ "maxLength": 125
3021
+ },
3022
+ "id": {
3023
+ "type": "string",
3024
+ "required": false,
3025
+ "maxLength": 60
3026
+ },
3027
+ "title": {
3028
+ "type": "string",
3029
+ "required": true,
3030
+ "maxLength": 40
3031
+ }
3032
+ }
3033
+ },
3034
+ "sectionDescription": {
3035
+ "type": "string",
3036
+ "required": false,
3037
+ "maxLength": 200
3038
+ },
3039
+ "sectionTitle": {
3040
+ "type": "string",
3041
+ "required": false,
3042
+ "maxLength": 80
3043
+ }
840
3044
  }
841
3045
  },
842
- "header-visuals": {
843
- "id": "header-visuals",
844
- "name": "Header Visuals",
845
- "component": "Header",
846
- "category": "header",
847
- "description": "Light-grey sub-page header with centred title, CTA buttons and optional floating parallax visuals.",
848
- "purpose": "A lightweight, light-grey page header for sub-pages: an optional eyebrow subtitle, a large title, optional description, and up to two CTA buttons over a faint SVG grid background. The Visuals variant adds floating parallax images in the top-left and bottom-right corners. This block is designed as a lower-weight alternative to the full-viewport Hero — it sits above content without dominating the first viewport (min-height 540px).",
3046
+ "help-centre-sub-categories": {
3047
+ "id": "help-centre-sub-categories",
3048
+ "name": "Help Centre Sub-Categories",
3049
+ "component": "HelpCentreSubCategories",
3050
+ "category": "help-centre",
3051
+ "description": "A large category title above a live-filtering search field and a responsive grid of clickable FAQ question cards, for a single help-centre category's landing page.",
3052
+ "purpose": "A large category title above a live-filtering search field and a responsive grid of clickable FAQ question cards. This is the page a visitor lands on after clicking a category tile in `HelpCentreCategories` (e.g. \"Account\") — it lists every FAQ question in that category as its own card, with an always-available search box to narrow the list. Modeled after [deriv.com/help-centre/account](https://deriv.com/help-centre/account) (title \"Account\", a search field, then question cards: \"How can I update my personal information on Deriv?\", \"How do I reset my password on Deriv?\", \"Can I open multiple accounts with Deriv?\", \"What is a Deriv Portfolio?\"). This is the second of the planned Help Centre blocks — pair it with `HelpCentreCategories` (the top-level topic grid) and, for the answer itself, `FaqAccordion` or a dedicated article page.",
849
3053
  "keywords": [
850
- "header",
851
- "page-header",
852
- "sub-page",
853
- "hero",
854
- "title",
855
- "intro",
856
- "introduction",
857
- "banner",
858
- "parallax",
859
- "cta",
3054
+ "help centre",
3055
+ "help center",
3056
+ "support",
3057
+ "sub-category",
3058
+ "subcategory",
3059
+ "faq",
3060
+ "questions",
3061
+ "search",
3062
+ "filter",
3063
+ "grid",
3064
+ "cards",
3065
+ "account",
3066
+ "self-service",
860
3067
  "trading",
861
3068
  "deriv"
862
3069
  ],
863
- "sectionType": "header",
3070
+ "sectionType": "faq",
864
3071
  "global": false,
865
3072
  "requiredFields": [
866
- "variant",
867
- "title"
3073
+ "title",
3074
+ "items"
868
3075
  ],
869
3076
  "optionalFields": [
870
- "subtitle",
871
- "description",
872
- "primaryButtonText",
873
- "primaryButtonUrl",
874
- "secondaryButtonText",
875
- "secondaryButtonUrl",
876
- "leftVisual",
877
- "rightVisual"
3077
+ "searchPlaceholder",
3078
+ "searchAriaLabel",
3079
+ "noResultsText"
878
3080
  ],
879
3081
  "variants": [
880
- "visuals",
881
- "minimal"
3082
+ "default"
882
3083
  ],
883
3084
  "recommendedPosition": 1,
884
3085
  "placement": [
885
- "top"
3086
+ "top",
3087
+ "middle"
886
3088
  ],
887
3089
  "layout": {
888
3090
  "alignment": "center",
889
- "buttonLayout": "horizontal",
890
- "contentWidth": "medium",
3091
+ "gridColumns": "1-3",
3092
+ "contentWidth": "large",
891
3093
  "background": false,
892
- "overlay": true
3094
+ "overlay": false
893
3095
  },
894
3096
  "supports": {
895
3097
  "backgroundImage": false,
896
3098
  "backgroundVideo": false,
897
- "foregroundImage": true,
898
- "primaryButton": true,
899
- "secondaryButton": true,
900
- "eyebrow": true,
901
- "parallax": true
3099
+ "foregroundImage": false,
3100
+ "primaryButton": false,
3101
+ "secondaryButton": false,
3102
+ "search": true,
3103
+ "liveFilter": true,
3104
+ "cardLink": true,
3105
+ "icons": false
902
3106
  },
903
- "imageRoles": [
904
- "left-visual",
905
- "right-visual"
906
- ],
3107
+ "imageRoles": [],
907
3108
  "defaultValues": {
908
- "variant": "visuals"
3109
+ "searchPlaceholder": "Search",
3110
+ "noResultsText": "No results found for \"{query}\""
3111
+ },
3112
+ "fields": {
3113
+ "items": {
3114
+ "type": "array",
3115
+ "required": true,
3116
+ "itemFields": {
3117
+ "href": {
3118
+ "type": "url",
3119
+ "required": false
3120
+ },
3121
+ "id": {
3122
+ "type": "string",
3123
+ "required": false,
3124
+ "maxLength": 60
3125
+ },
3126
+ "question": {
3127
+ "type": "string",
3128
+ "required": true,
3129
+ "maxLength": 160
3130
+ }
3131
+ }
3132
+ },
3133
+ "noResultsText": {
3134
+ "type": "string",
3135
+ "required": false,
3136
+ "maxLength": 100,
3137
+ "default": "No results found for \"{query}\""
3138
+ },
3139
+ "searchAriaLabel": {
3140
+ "type": "string",
3141
+ "required": false,
3142
+ "maxLength": 60
3143
+ },
3144
+ "searchPlaceholder": {
3145
+ "type": "string",
3146
+ "required": false,
3147
+ "maxLength": 40,
3148
+ "default": "Search"
3149
+ },
3150
+ "title": {
3151
+ "type": "string",
3152
+ "required": true,
3153
+ "maxLength": 60
3154
+ }
909
3155
  }
910
3156
  },
911
3157
  "hero-centered": {
912
3158
  "id": "hero-centered",
913
- "name": "Hero Centered",
914
- "component": "Hero.Centered",
3159
+ "name": "Hero",
3160
+ "component": "Hero",
915
3161
  "category": "hero",
916
- "description": "Centered landing hero with headline, description and CTA buttons.",
917
- "purpose": "The primary hero section used to introduce a page with a strong headline, supporting description, primary call-to-action, and optional secondary action. This block is designed to be the first visible section of a landing page.",
3162
+ "description": "Landing hero with title, description and CTA buttons. Three layouts: split (right-side image), centered (background image), showcase (product + floating images).",
3163
+ "purpose": "The primary hero section used to introduce a page with a strong title, supporting description, primary call-to-action, and optional secondary action. Exposed as a single `Hero` component with a required `variant` prop selecting one of three layouts: `split` (dark background, left-aligned text, right-side hero image), `centered` (full background image, center-aligned text), or `showcase` (dark background with a large product image and a smaller floating image below the buttons). This block is designed to be the first visible section of a landing page.",
918
3164
  "keywords": [
919
3165
  "hero",
920
3166
  "landing",
@@ -934,25 +3180,23 @@
934
3180
  "sectionType": "hero",
935
3181
  "global": false,
936
3182
  "requiredFields": [
937
- "headline",
938
- "description",
939
- "primaryButtonText",
940
- "primaryButtonUrl"
3183
+ "variant",
3184
+ "title"
941
3185
  ],
942
3186
  "optionalFields": [
943
- "eyebrow",
944
- "secondaryButtonText",
945
- "secondaryButtonUrl",
946
- "backgroundImage",
947
- "backgroundVideo",
948
- "badge",
949
- "trustIndicators"
3187
+ "subtitle",
3188
+ "description",
3189
+ "primaryButton",
3190
+ "secondaryButton",
3191
+ "backgroundImageSrc",
3192
+ "heroImage",
3193
+ "productImage",
3194
+ "floatingImage"
950
3195
  ],
951
3196
  "variants": [
3197
+ "split",
952
3198
  "centered",
953
- "left",
954
- "image-right",
955
- "video"
3199
+ "showcase"
956
3200
  ],
957
3201
  "recommendedPosition": 1,
958
3202
  "placement": [
@@ -967,20 +3211,104 @@
967
3211
  },
968
3212
  "supports": {
969
3213
  "backgroundImage": true,
970
- "backgroundVideo": true,
971
- "foregroundImage": false,
3214
+ "backgroundVideo": false,
3215
+ "foregroundImage": true,
972
3216
  "primaryButton": true,
973
3217
  "secondaryButton": true,
974
- "badge": true,
975
- "trustIndicators": true
3218
+ "badge": false,
3219
+ "trustIndicators": false
976
3220
  },
977
3221
  "imageRoles": [
978
- "hero-background"
979
- ],
980
- "defaultValues": {
981
- "layout": "centered",
982
- "overlay": true,
983
- "buttonLayout": "horizontal"
3222
+ "hero-background",
3223
+ "hero-image",
3224
+ "product-image",
3225
+ "floating-image"
3226
+ ],
3227
+ "defaultValues": {},
3228
+ "fields": {
3229
+ "backgroundImageSrc": {
3230
+ "type": "image",
3231
+ "required": false,
3232
+ "aspectRatio": "16:9",
3233
+ "description": "Full-bleed background image URL, used by all three variants."
3234
+ },
3235
+ "description": {
3236
+ "type": "string",
3237
+ "required": false,
3238
+ "maxLength": 200,
3239
+ "description": "Body copy below the title."
3240
+ },
3241
+ "floatingImage": {
3242
+ "type": "image",
3243
+ "required": false,
3244
+ "description": "Smaller floating image below productImage in the Showcase variant. Accepts a ReactNode in code; page builders should pass an image URL string."
3245
+ },
3246
+ "heroImage": {
3247
+ "type": "image",
3248
+ "required": false,
3249
+ "description": "Right-side hero image for the Split variant. Accepts a ReactNode in code; page builders should pass an image URL string."
3250
+ },
3251
+ "primaryButton": {
3252
+ "type": "object",
3253
+ "required": false,
3254
+ "description": "Primary CTA (coral). Shown on all variants.",
3255
+ "objectFields": {
3256
+ "href": {
3257
+ "type": "url",
3258
+ "required": false,
3259
+ "description": "Renders an anchor when provided."
3260
+ },
3261
+ "label": {
3262
+ "type": "string",
3263
+ "required": true,
3264
+ "maxLength": 30
3265
+ }
3266
+ }
3267
+ },
3268
+ "productImage": {
3269
+ "type": "image",
3270
+ "required": false,
3271
+ "description": "Large product image centered below the CTAs in the Showcase variant. Accepts a ReactNode in code; page builders should pass an image URL string."
3272
+ },
3273
+ "secondaryButton": {
3274
+ "type": "object",
3275
+ "required": false,
3276
+ "description": "Secondary CTA (white outline). Shown on all variants.",
3277
+ "objectFields": {
3278
+ "href": {
3279
+ "type": "url",
3280
+ "required": false,
3281
+ "description": "Renders an anchor when provided."
3282
+ },
3283
+ "label": {
3284
+ "type": "string",
3285
+ "required": true,
3286
+ "maxLength": 30
3287
+ }
3288
+ }
3289
+ },
3290
+ "subtitle": {
3291
+ "type": "string",
3292
+ "required": false,
3293
+ "maxLength": 30,
3294
+ "description": "Eyebrow text shown above the title."
3295
+ },
3296
+ "title": {
3297
+ "type": "string",
3298
+ "required": true,
3299
+ "maxLength": 80,
3300
+ "description": "Main heading."
3301
+ },
3302
+ "variant": {
3303
+ "type": "string",
3304
+ "required": true,
3305
+ "enum": [
3306
+ "split",
3307
+ "centered",
3308
+ "showcase"
3309
+ ],
3310
+ "description": "Layout variant. Required — the component has no fallback, so omitting it renders an unstyled hero."
3311
+ }
984
3312
  }
985
3313
  },
986
3314
  "image-banner-split": {
@@ -1051,6 +3379,50 @@
1051
3379
  "description": "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise.",
1052
3380
  "ctaLabel": "Trader's Hub",
1053
3381
  "imageAlt": ""
3382
+ },
3383
+ "fields": {
3384
+ "ctaHref": {
3385
+ "type": "url",
3386
+ "required": false
3387
+ },
3388
+ "ctaLabel": {
3389
+ "type": "string",
3390
+ "required": false,
3391
+ "maxLength": 30,
3392
+ "default": "Trader's Hub"
3393
+ },
3394
+ "description": {
3395
+ "type": "string",
3396
+ "required": false,
3397
+ "maxLength": 200,
3398
+ "default": "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise."
3399
+ },
3400
+ "imageAlt": {
3401
+ "type": "string",
3402
+ "required": false,
3403
+ "maxLength": 120,
3404
+ "default": ""
3405
+ },
3406
+ "imageUrl": {
3407
+ "type": "image",
3408
+ "required": false,
3409
+ "aspectRatio": "4:3"
3410
+ },
3411
+ "title": {
3412
+ "type": "string",
3413
+ "required": false,
3414
+ "maxLength": 80,
3415
+ "default": "Join our global community"
3416
+ },
3417
+ "variant": {
3418
+ "type": "string",
3419
+ "required": false,
3420
+ "enum": [
3421
+ "split",
3422
+ "full-bg"
3423
+ ],
3424
+ "default": "split"
3425
+ }
1054
3426
  }
1055
3427
  },
1056
3428
  "leaders": {
@@ -1116,6 +3488,65 @@
1116
3488
  "initialVisibleCount": 4,
1117
3489
  "expandText": "View all",
1118
3490
  "collapseText": "View less"
3491
+ },
3492
+ "fields": {
3493
+ "collapseText": {
3494
+ "type": "string",
3495
+ "required": false,
3496
+ "maxLength": 30,
3497
+ "default": "View less"
3498
+ },
3499
+ "description": {
3500
+ "type": "string",
3501
+ "required": false,
3502
+ "maxLength": 200
3503
+ },
3504
+ "expandText": {
3505
+ "type": "string",
3506
+ "required": false,
3507
+ "maxLength": 30,
3508
+ "default": "View all"
3509
+ },
3510
+ "initialVisibleCount": {
3511
+ "type": "number",
3512
+ "required": false,
3513
+ "default": 4
3514
+ },
3515
+ "items": {
3516
+ "type": "array",
3517
+ "required": true,
3518
+ "itemFields": {
3519
+ "imageUrl": {
3520
+ "type": "image",
3521
+ "required": true,
3522
+ "aspectRatio": "1:1"
3523
+ },
3524
+ "linkLabel": {
3525
+ "type": "string",
3526
+ "required": false,
3527
+ "maxLength": 30
3528
+ },
3529
+ "linkUrl": {
3530
+ "type": "url",
3531
+ "required": false
3532
+ },
3533
+ "name": {
3534
+ "type": "string",
3535
+ "required": true,
3536
+ "maxLength": 60
3537
+ },
3538
+ "role": {
3539
+ "type": "string",
3540
+ "required": true,
3541
+ "maxLength": 60
3542
+ }
3543
+ }
3544
+ },
3545
+ "title": {
3546
+ "type": "string",
3547
+ "required": false,
3548
+ "maxLength": 80
3549
+ }
1119
3550
  }
1120
3551
  },
1121
3552
  "logo-marquee": {
@@ -1186,6 +3617,62 @@
1186
3617
  "disclaimer": "*Add any relevant disclaimers or legal copy here.",
1187
3618
  "ctaLabel": "Learn more",
1188
3619
  "ctaHref": "#"
3620
+ },
3621
+ "fields": {
3622
+ "body": {
3623
+ "type": "string",
3624
+ "required": false,
3625
+ "maxLength": 200
3626
+ },
3627
+ "col1Logos": {
3628
+ "type": "array",
3629
+ "required": false,
3630
+ "itemFields": {
3631
+ "name": {
3632
+ "type": "string",
3633
+ "required": true,
3634
+ "maxLength": 60
3635
+ },
3636
+ "url": {
3637
+ "type": "image",
3638
+ "required": true
3639
+ }
3640
+ }
3641
+ },
3642
+ "col2Logos": {
3643
+ "type": "array",
3644
+ "required": false,
3645
+ "itemFields": {
3646
+ "name": {
3647
+ "type": "string",
3648
+ "required": true,
3649
+ "maxLength": 60
3650
+ },
3651
+ "url": {
3652
+ "type": "image",
3653
+ "required": true
3654
+ }
3655
+ }
3656
+ },
3657
+ "ctaHref": {
3658
+ "type": "url",
3659
+ "required": false
3660
+ },
3661
+ "ctaLabel": {
3662
+ "type": "string",
3663
+ "required": false,
3664
+ "maxLength": 30
3665
+ },
3666
+ "disclaimer": {
3667
+ "type": "string",
3668
+ "required": false,
3669
+ "maxLength": 200
3670
+ },
3671
+ "headline": {
3672
+ "type": "string",
3673
+ "required": false,
3674
+ "maxLength": 80
3675
+ }
1189
3676
  }
1190
3677
  },
1191
3678
  "navbar-global": {
@@ -1256,13 +3743,226 @@
1256
3743
  "logo-dark"
1257
3744
  ],
1258
3745
  "defaultValues": {
1259
- "theme": "light",
3746
+ "theme": "dark",
1260
3747
  "logoHref": "/",
1261
3748
  "loginLabel": "Log in",
1262
- "loginHref": "/login",
1263
- "ctaLabel": "Open account",
1264
- "ctaHref": "/signup",
1265
- "languageLabel": "EN"
3749
+ "ctaLabel": "Open account"
3750
+ },
3751
+ "fields": {
3752
+ "activeLanguageCode": {
3753
+ "type": "string",
3754
+ "required": false,
3755
+ "maxLength": 10
3756
+ },
3757
+ "ctaHref": {
3758
+ "type": "url",
3759
+ "required": false,
3760
+ "description": "CTA link target. No default — omit it and the CTA button is not rendered at all."
3761
+ },
3762
+ "ctaLabel": {
3763
+ "type": "string",
3764
+ "required": false,
3765
+ "maxLength": 30,
3766
+ "default": "Open account"
3767
+ },
3768
+ "languageItems": {
3769
+ "type": "array",
3770
+ "required": false,
3771
+ "itemFields": {
3772
+ "code": {
3773
+ "type": "string",
3774
+ "required": true,
3775
+ "maxLength": 10
3776
+ },
3777
+ "label": {
3778
+ "type": "string",
3779
+ "required": true,
3780
+ "maxLength": 40
3781
+ }
3782
+ }
3783
+ },
3784
+ "languageLabel": {
3785
+ "type": "string",
3786
+ "required": false,
3787
+ "maxLength": 10,
3788
+ "description": "Current language code shown in the switcher, e.g. \"EN\". No default — omit it and the language switcher is not rendered at all."
3789
+ },
3790
+ "loginHref": {
3791
+ "type": "url",
3792
+ "required": false,
3793
+ "description": "Login link target. No default — omit it and the login link is not rendered at all."
3794
+ },
3795
+ "loginLabel": {
3796
+ "type": "string",
3797
+ "required": false,
3798
+ "maxLength": 30,
3799
+ "default": "Log in"
3800
+ },
3801
+ "logoHref": {
3802
+ "type": "url",
3803
+ "required": false,
3804
+ "default": "/"
3805
+ },
3806
+ "logoSrc": {
3807
+ "type": "image",
3808
+ "required": true
3809
+ },
3810
+ "logoSrcDark": {
3811
+ "type": "image",
3812
+ "required": false
3813
+ },
3814
+ "navItems": {
3815
+ "type": "array",
3816
+ "required": false,
3817
+ "default": []
3818
+ },
3819
+ "theme": {
3820
+ "type": "string",
3821
+ "required": false,
3822
+ "default": "dark",
3823
+ "enum": [
3824
+ "dark",
3825
+ "light"
3826
+ ],
3827
+ "description": "Colour theme. Defaults to \"dark\" — omit it and you get the dark navbar. (This entry previously documented \"light\", which the component never did.)"
3828
+ }
3829
+ }
3830
+ },
3831
+ "parallax-banner": {
3832
+ "id": "parallax-banner",
3833
+ "name": "Parallax Banner",
3834
+ "component": "ParallaxBanner",
3835
+ "category": "banner",
3836
+ "description": "Dark rounded banner card with a culture/values headline, supporting copy, one CTA link, and a photo with a subtle scroll-linked parallax. The \"default\" variant adds a grid of four short value cards underneath; \"banner-only\" renders just the banner. Modeled on the \"Our culture\" section on careers.deriv.com.",
3837
+ "purpose": "A dark, rounded banner card that introduces a company's culture or values — headline, supporting copy, and one CTA link on one side, a photo on the other — with a subtle scroll-linked parallax on the photo as the section enters and leaves the viewport. The `default` variant adds a grid of four short value/culture cards directly beneath the banner; the `banner-only` variant renders just the banner card. Modeled after the \"Our culture\" section on [careers.deriv.com](https://careers.deriv.com).",
3838
+ "keywords": [
3839
+ "careers",
3840
+ "culture",
3841
+ "values",
3842
+ "about-us",
3843
+ "banner",
3844
+ "image",
3845
+ "photo",
3846
+ "parallax",
3847
+ "scroll",
3848
+ "cta",
3849
+ "team",
3850
+ "hiring",
3851
+ "jobs",
3852
+ "deriv"
3853
+ ],
3854
+ "sectionType": "banner",
3855
+ "global": false,
3856
+ "requiredFields": [],
3857
+ "optionalFields": [
3858
+ "variant",
3859
+ "title",
3860
+ "description",
3861
+ "ctaLabel",
3862
+ "ctaHref",
3863
+ "imageUrl",
3864
+ "imageAlt",
3865
+ "cards",
3866
+ "enableParallax"
3867
+ ],
3868
+ "variants": [
3869
+ "default",
3870
+ "banner-only"
3871
+ ],
3872
+ "recommendedPosition": 4,
3873
+ "placement": [
3874
+ "middle",
3875
+ "bottom"
3876
+ ],
3877
+ "layout": {
3878
+ "alignment": "left",
3879
+ "buttonLayout": "none",
3880
+ "contentWidth": "wide",
3881
+ "background": true,
3882
+ "overlay": false,
3883
+ "parallax": true
3884
+ },
3885
+ "supports": {
3886
+ "backgroundImage": false,
3887
+ "backgroundVideo": false,
3888
+ "foregroundImage": true,
3889
+ "primaryButton": false,
3890
+ "secondaryButton": false,
3891
+ "ctaLink": true,
3892
+ "parallax": true,
3893
+ "editableText": true
3894
+ },
3895
+ "imageRoles": [
3896
+ "split-panel"
3897
+ ],
3898
+ "defaultValues": {
3899
+ "variant": "default",
3900
+ "title": "Our culture",
3901
+ "description": "We combine human values with AI precision. Collaboration, integrity, and continuous learning guide every project.",
3902
+ "ctaLabel": "Culture at Deriv",
3903
+ "enableParallax": true
3904
+ },
3905
+ "fields": {
3906
+ "cards": {
3907
+ "type": "array",
3908
+ "required": false,
3909
+ "itemFields": {
3910
+ "description": {
3911
+ "type": "string",
3912
+ "required": true,
3913
+ "maxLength": 220
3914
+ },
3915
+ "title": {
3916
+ "type": "string",
3917
+ "required": true,
3918
+ "maxLength": 40
3919
+ }
3920
+ }
3921
+ },
3922
+ "ctaHref": {
3923
+ "type": "string",
3924
+ "required": false
3925
+ },
3926
+ "ctaLabel": {
3927
+ "type": "string",
3928
+ "required": false,
3929
+ "maxLength": 40
3930
+ },
3931
+ "description": {
3932
+ "type": "string",
3933
+ "required": false,
3934
+ "maxLength": 220
3935
+ },
3936
+ "enableParallax": {
3937
+ "type": "boolean",
3938
+ "required": false,
3939
+ "default": true
3940
+ },
3941
+ "imageAlt": {
3942
+ "type": "string",
3943
+ "required": false,
3944
+ "maxLength": 120,
3945
+ "default": ""
3946
+ },
3947
+ "imageUrl": {
3948
+ "type": "image",
3949
+ "required": false,
3950
+ "aspectRatio": "4:3"
3951
+ },
3952
+ "title": {
3953
+ "type": "string",
3954
+ "required": false,
3955
+ "maxLength": 60
3956
+ },
3957
+ "variant": {
3958
+ "type": "string",
3959
+ "required": false,
3960
+ "enum": [
3961
+ "default",
3962
+ "banner-only"
3963
+ ],
3964
+ "default": "default"
3965
+ }
1266
3966
  }
1267
3967
  },
1268
3968
  "stats-carousel": {
@@ -1271,7 +3971,7 @@
1271
3971
  "component": "Stats",
1272
3972
  "category": "stats",
1273
3973
  "description": "Auto-rotating carousel of key numbers with optional laurel-wrapped award badges; a StatsSimple variant renders a static count-up grid.",
1274
- "purpose": "A trust and credibility section that cycles through a list of key numbers (value + label) one at a time in an auto-rotating carousel card, optionally flanked by laurel-wrapped award badges with a scroll-driven parallax. A second component in this folder, StatsSimple, renders the same value/label items as a static grid with a count-up-on-scroll reveal instead of a carousel.",
3974
+ "purpose": "A trust and credibility section that cycles through a list of key numbers (value + label) one at a time in an auto-rotating carousel card, optionally flanked by laurel-wrapped award badges with a scroll-driven parallax. A second component in this folder, StatsSimple, renders the same value/label items as a static row with a count-up-on-scroll reveal instead of a carousel. It is a separate component with its own registry block — select `stats-simple` for that layout. `Stats` itself has no `variant` prop; this block has a single layout.",
1275
3975
  "keywords": [
1276
3976
  "stats",
1277
3977
  "statistics",
@@ -1299,8 +3999,7 @@
1299
3999
  "rightAwards"
1300
4000
  ],
1301
4001
  "variants": [
1302
- "carousel",
1303
- "simple"
4002
+ "default"
1304
4003
  ],
1305
4004
  "recommendedPosition": 3,
1306
4005
  "placement": [
@@ -1326,6 +4025,145 @@
1326
4025
  "defaultValues": {
1327
4026
  "leftAwards": [],
1328
4027
  "rightAwards": []
4028
+ },
4029
+ "fields": {
4030
+ "description": {
4031
+ "type": "string",
4032
+ "required": false,
4033
+ "maxLength": 200
4034
+ },
4035
+ "leftAwards": {
4036
+ "type": "array",
4037
+ "required": false,
4038
+ "itemFields": {
4039
+ "heading": {
4040
+ "type": "string",
4041
+ "required": true,
4042
+ "maxLength": 60
4043
+ },
4044
+ "subheading": {
4045
+ "type": "string",
4046
+ "required": true,
4047
+ "maxLength": 60
4048
+ }
4049
+ },
4050
+ "default": []
4051
+ },
4052
+ "rightAwards": {
4053
+ "type": "array",
4054
+ "required": false,
4055
+ "itemFields": {
4056
+ "heading": {
4057
+ "type": "string",
4058
+ "required": true,
4059
+ "maxLength": 60
4060
+ },
4061
+ "subheading": {
4062
+ "type": "string",
4063
+ "required": true,
4064
+ "maxLength": 60
4065
+ }
4066
+ },
4067
+ "default": []
4068
+ },
4069
+ "stats": {
4070
+ "type": "array",
4071
+ "required": true,
4072
+ "itemFields": {
4073
+ "label": {
4074
+ "type": "string",
4075
+ "required": true,
4076
+ "maxLength": 60
4077
+ },
4078
+ "value": {
4079
+ "type": "string",
4080
+ "required": true,
4081
+ "maxLength": 12
4082
+ }
4083
+ }
4084
+ },
4085
+ "title": {
4086
+ "type": "string",
4087
+ "required": true,
4088
+ "maxLength": 80
4089
+ }
4090
+ }
4091
+ },
4092
+ "stats-simple": {
4093
+ "id": "stats-simple",
4094
+ "name": "Stats Simple",
4095
+ "component": "StatsSimple",
4096
+ "category": "stats",
4097
+ "description": "Single-row band of headline numbers with short labels, counting up when scrolled into view.",
4098
+ "purpose": "A compact single-row band of headline numbers, each with a short label beneath it. The figures count up once the section scrolls into view. Use it as a lightweight proof point between larger content sections when the numbers alone tell the story and no section title, description, or award badges are needed.",
4099
+ "keywords": [
4100
+ "stats",
4101
+ "statistics",
4102
+ "numbers",
4103
+ "metrics",
4104
+ "figures",
4105
+ "counters",
4106
+ "count-up",
4107
+ "kpi",
4108
+ "proof",
4109
+ "social-proof",
4110
+ "trust",
4111
+ "clients",
4112
+ "volume",
4113
+ "deriv"
4114
+ ],
4115
+ "sectionType": "stats",
4116
+ "global": false,
4117
+ "requiredFields": [
4118
+ "stats"
4119
+ ],
4120
+ "optionalFields": [],
4121
+ "variants": [
4122
+ "default"
4123
+ ],
4124
+ "recommendedPosition": 3,
4125
+ "placement": [
4126
+ "middle"
4127
+ ],
4128
+ "layout": {
4129
+ "alignment": "center",
4130
+ "buttonLayout": "none",
4131
+ "contentWidth": "wide",
4132
+ "background": false,
4133
+ "overlay": false
4134
+ },
4135
+ "supports": {
4136
+ "backgroundImage": false,
4137
+ "backgroundVideo": false,
4138
+ "foregroundImage": false,
4139
+ "primaryButton": false,
4140
+ "secondaryButton": false,
4141
+ "countUpAnimation": true,
4142
+ "sectionTitle": false,
4143
+ "awards": false
4144
+ },
4145
+ "imageRoles": [],
4146
+ "defaultValues": {},
4147
+ "fields": {
4148
+ "stats": {
4149
+ "type": "array",
4150
+ "required": true,
4151
+ "description": "Ordered list of stats rendered as one horizontal row. Three to five items read best; there is no section title, so the numbers carry the section on their own.",
4152
+ "itemFields": {
4153
+ "label": {
4154
+ "type": "string",
4155
+ "required": true,
4156
+ "maxLength": 40,
4157
+ "description": "Short descriptive label below the value, e.g. \"customers worldwide\"."
4158
+ },
4159
+ "value": {
4160
+ "type": "string",
4161
+ "required": true,
4162
+ "maxLength": 12,
4163
+ "description": "Headline figure, e.g. \"2.5M+\". The leading number is counted up on scroll; any prefix or suffix (currency symbol, +, %) is preserved."
4164
+ }
4165
+ }
4166
+ }
1329
4167
  }
1330
4168
  },
1331
4169
  "steps-image-left": {
@@ -1389,6 +4227,49 @@
1389
4227
  "defaultValues": {
1390
4228
  "imagePosition": "left",
1391
4229
  "imageAlt": ""
4230
+ },
4231
+ "fields": {
4232
+ "image": {
4233
+ "type": "image",
4234
+ "required": false,
4235
+ "aspectRatio": "1:1"
4236
+ },
4237
+ "imageAlt": {
4238
+ "type": "string",
4239
+ "required": false,
4240
+ "maxLength": 120,
4241
+ "default": ""
4242
+ },
4243
+ "imagePosition": {
4244
+ "type": "string",
4245
+ "required": false,
4246
+ "enum": [
4247
+ "left",
4248
+ "right"
4249
+ ],
4250
+ "default": "left"
4251
+ },
4252
+ "steps": {
4253
+ "type": "array",
4254
+ "required": true,
4255
+ "itemFields": {
4256
+ "description": {
4257
+ "type": "string",
4258
+ "required": true,
4259
+ "maxLength": 200
4260
+ },
4261
+ "title": {
4262
+ "type": "string",
4263
+ "required": true,
4264
+ "maxLength": 60
4265
+ }
4266
+ }
4267
+ },
4268
+ "title": {
4269
+ "type": "string",
4270
+ "required": true,
4271
+ "maxLength": 80
4272
+ }
1392
4273
  }
1393
4274
  },
1394
4275
  "sticky-market-cards": {
@@ -1450,9 +4331,50 @@
1450
4331
  "imageRoles": [
1451
4332
  "card-background"
1452
4333
  ],
1453
- "defaultValues": {
1454
- "itemTheme": "dark",
1455
- "maxVisibleStack": 4
4334
+ "defaultValues": {},
4335
+ "fields": {
4336
+ "items": {
4337
+ "type": "array",
4338
+ "required": true,
4339
+ "itemFields": {
4340
+ "description": {
4341
+ "type": "string",
4342
+ "required": true,
4343
+ "maxLength": 150
4344
+ },
4345
+ "imageUrl": {
4346
+ "type": "image",
4347
+ "required": false
4348
+ },
4349
+ "theme": {
4350
+ "type": "string",
4351
+ "required": false,
4352
+ "default": "dark",
4353
+ "defaultSource": "effective",
4354
+ "enum": [
4355
+ "light",
4356
+ "coral",
4357
+ "dark"
4358
+ ],
4359
+ "description": "Per-card colour theme. Defaults to \"dark\" — applied inside the render (`item.theme ?? \"dark\"`) rather than as a declared prop default."
4360
+ },
4361
+ "title": {
4362
+ "type": "string",
4363
+ "required": true,
4364
+ "maxLength": 60
4365
+ }
4366
+ }
4367
+ },
4368
+ "sectionDescription": {
4369
+ "type": "string",
4370
+ "required": false,
4371
+ "maxLength": 200
4372
+ },
4373
+ "sectionTitle": {
4374
+ "type": "string",
4375
+ "required": true,
4376
+ "maxLength": 80
4377
+ }
1456
4378
  }
1457
4379
  },
1458
4380
  "sticky-stacked-cards": {
@@ -1511,8 +4433,45 @@
1511
4433
  "imageRoles": [
1512
4434
  "card-hero"
1513
4435
  ],
1514
- "defaultValues": {
1515
- "itemTheme": "light"
4436
+ "defaultValues": {},
4437
+ "fields": {
4438
+ "header": {
4439
+ "type": "string",
4440
+ "required": true,
4441
+ "maxLength": 80
4442
+ },
4443
+ "items": {
4444
+ "type": "array",
4445
+ "required": true,
4446
+ "itemFields": {
4447
+ "description": {
4448
+ "type": "string",
4449
+ "required": true,
4450
+ "maxLength": 150
4451
+ },
4452
+ "imageUrl": {
4453
+ "type": "image",
4454
+ "required": true
4455
+ },
4456
+ "theme": {
4457
+ "type": "string",
4458
+ "required": false,
4459
+ "default": "light",
4460
+ "defaultSource": "effective",
4461
+ "enum": [
4462
+ "light",
4463
+ "coral",
4464
+ "dark"
4465
+ ],
4466
+ "description": "Per-card colour theme. Defaults to \"light\" — applied inside the render (`item.theme ?? \"light\"`) rather than as a declared prop default."
4467
+ },
4468
+ "title": {
4469
+ "type": "string",
4470
+ "required": true,
4471
+ "maxLength": 60
4472
+ }
4473
+ }
4474
+ }
1516
4475
  }
1517
4476
  },
1518
4477
  "table": {
@@ -1584,8 +4543,73 @@
1584
4543
  ],
1585
4544
  "defaultValues": {
1586
4545
  "pageSize": 10,
1587
- "searchPlaceholder": "Search",
1588
- "columnWidth": "normal"
4546
+ "searchPlaceholder": "Search"
4547
+ },
4548
+ "fields": {
4549
+ "columns": {
4550
+ "type": "array",
4551
+ "required": true,
4552
+ "itemFields": {
4553
+ "header": {
4554
+ "type": "string",
4555
+ "required": true,
4556
+ "maxLength": 40
4557
+ },
4558
+ "key": {
4559
+ "type": "string",
4560
+ "required": true,
4561
+ "maxLength": 40
4562
+ },
4563
+ "tooltip": {
4564
+ "type": "object",
4565
+ "required": false
4566
+ },
4567
+ "width": {
4568
+ "type": "string",
4569
+ "required": false,
4570
+ "default": "normal",
4571
+ "defaultSource": "effective",
4572
+ "enum": [
4573
+ "main",
4574
+ "normal",
4575
+ "big"
4576
+ ],
4577
+ "description": "Column width variant. Anything other than \"main\" or \"big\" renders at normal width, so omitting this is equivalent to \"normal\". At most one column should be \"main\" — it becomes the sticky first column."
4578
+ }
4579
+ }
4580
+ },
4581
+ "infoText": {
4582
+ "type": "string",
4583
+ "required": false,
4584
+ "maxLength": 300
4585
+ },
4586
+ "mainColumnKey": {
4587
+ "type": "string",
4588
+ "required": false,
4589
+ "maxLength": 40
4590
+ },
4591
+ "pageSize": {
4592
+ "type": "number",
4593
+ "required": false,
4594
+ "min": 1,
4595
+ "max": 50,
4596
+ "default": 10
4597
+ },
4598
+ "rows": {
4599
+ "type": "array",
4600
+ "required": true
4601
+ },
4602
+ "searchPlaceholder": {
4603
+ "type": "string",
4604
+ "required": false,
4605
+ "maxLength": 30,
4606
+ "default": "Search"
4607
+ },
4608
+ "sectionTitle": {
4609
+ "type": "string",
4610
+ "required": false,
4611
+ "maxLength": 80
4612
+ }
1589
4613
  }
1590
4614
  },
1591
4615
  "testimonial": {
@@ -1593,8 +4617,8 @@
1593
4617
  "name": "Testimonial",
1594
4618
  "component": "Testimonial",
1595
4619
  "category": "testimonial",
1596
- "description": "Auto-advancing testimonial carousel showing one quote card at a time with decorative quote marks, author details, and dot pagination.",
1597
- "purpose": "A full-width testimonial carousel section that displays one quote card at a time — with decorative quote marks, the quote text, an optional author avatar, name, and location — and auto-advances through the slides every 5 seconds, with dot pagination for manual navigation. This block is designed to build trust with partner or customer voices, giving each quote full visual focus.",
4620
+ "description": "Testimonial section with two variants: an auto-advancing single-slide quote carousel with dot pagination (default), and a horizontally-scrollable row of star-rated Trustpilot review cards with a rating badge and prev/next controls (trustpilot).",
4621
+ "purpose": "A full-width testimonial section for showcasing partner or customer quotes. Ships in two variants: - **Default** — one quote card at a time, with decorative quote marks, an optional author avatar, name, and location; auto-advances every 5 seconds with dot pagination for manual navigation. - **Trustpilot** — a horizontally-scrollable row of star-rated review cards plus a \"Trustpilot\" rating badge and prev/next arrow controls. Modeled after the \"What our customers say\" section on deriv.com's homepage. The 5-second auto-advance is **not configurable** — there is no prop to slow it down or switch it off. The block's only props are `title`, `items` and `className`.",
1598
4622
  "keywords": [
1599
4623
  "testimonial",
1600
4624
  "quote",
@@ -1606,7 +4630,12 @@
1606
4630
  "customer",
1607
4631
  "trader",
1608
4632
  "trading",
1609
- "deriv"
4633
+ "deriv",
4634
+ "trustpilot",
4635
+ "star rating",
4636
+ "reviews",
4637
+ "customer feedback",
4638
+ "homepage"
1610
4639
  ],
1611
4640
  "sectionType": "testimonial",
1612
4641
  "global": false,
@@ -1614,10 +4643,14 @@
1614
4643
  "items"
1615
4644
  ],
1616
4645
  "optionalFields": [
1617
- "title"
4646
+ "title",
4647
+ "variant",
4648
+ "trustpilotUrl",
4649
+ "trustpilotScore"
1618
4650
  ],
1619
4651
  "variants": [
1620
- "default"
4652
+ "default",
4653
+ "trustpilot"
1621
4654
  ],
1622
4655
  "recommendedPosition": 6,
1623
4656
  "placement": [
@@ -1637,6 +4670,9 @@
1637
4670
  "autoAdvance": true,
1638
4671
  "dotPagination": true,
1639
4672
  "quoteMarks": true,
4673
+ "starRating": true,
4674
+ "reviewLinkOut": true,
4675
+ "brandRatingBadge": true,
1640
4676
  "primaryButton": false,
1641
4677
  "secondaryButton": false,
1642
4678
  "badge": false
@@ -1645,8 +4681,66 @@
1645
4681
  "author-avatar"
1646
4682
  ],
1647
4683
  "defaultValues": {
1648
- "autoAdvance": true,
1649
- "autoAdvanceIntervalMs": 5000
4684
+ "variant": "default",
4685
+ "trustpilotUrl": "https://www.trustpilot.com/review/deriv.com?utm_medium=trustbox&utm_source=Mini",
4686
+ "trustpilotScore": 4.5
4687
+ },
4688
+ "fields": {
4689
+ "items": {
4690
+ "type": "array",
4691
+ "required": true,
4692
+ "itemFields": {
4693
+ "authorLocation": {
4694
+ "type": "string",
4695
+ "required": false,
4696
+ "maxLength": 60
4697
+ },
4698
+ "authorName": {
4699
+ "type": "string",
4700
+ "required": true,
4701
+ "maxLength": 60
4702
+ },
4703
+ "avatarUrl": {
4704
+ "type": "image",
4705
+ "required": false,
4706
+ "aspectRatio": "1:1"
4707
+ },
4708
+ "quote": {
4709
+ "type": "string",
4710
+ "required": true,
4711
+ "maxLength": 400
4712
+ },
4713
+ "rating": {
4714
+ "type": "number",
4715
+ "required": false,
4716
+ "min": 0,
4717
+ "max": 5
4718
+ },
4719
+ "reviewUrl": {
4720
+ "type": "string",
4721
+ "required": false
4722
+ }
4723
+ }
4724
+ },
4725
+ "title": {
4726
+ "type": "string",
4727
+ "required": false,
4728
+ "maxLength": 80
4729
+ },
4730
+ "trustpilotScore": {
4731
+ "type": "number",
4732
+ "required": false,
4733
+ "min": 0,
4734
+ "max": 5
4735
+ },
4736
+ "trustpilotUrl": {
4737
+ "type": "string",
4738
+ "required": false
4739
+ },
4740
+ "variant": {
4741
+ "type": "enum",
4742
+ "required": false
4743
+ }
1650
4744
  }
1651
4745
  },
1652
4746
  "text-scroll": {
@@ -1655,7 +4749,7 @@
1655
4749
  "component": "TextScroll",
1656
4750
  "category": "scroll-animation",
1657
4751
  "description": "Large headline paragraph whose words fade in one by one on scroll, a scrubbed word-reveal effect for mission statements and brand messages.",
1658
- "purpose": "A full-width section rendering a single large headline paragraph whose words individually fade from dimmed (20% opacity) to fully opaque as the user scrolls past, producing a scrubbed word-reveal effect powered by GSAP ScrollTrigger. This block is designed for one emphatic block of copy — a mission statement or brand message — that earns attention through the scroll-tied reveal.",
4752
+ "purpose": "A full-width section rendering a single large headline paragraph whose words individually fade from dimmed (20% opacity) to fully opaque as the user scrolls past, producing a scrubbed word-reveal effect powered by GSAP ScrollTrigger. This block is designed for one emphatic block of copy — a mission statement or brand message — that earns attention through the scroll-tied reveal. The animation timings are **not configurable** — the 20% start opacity, the scrub rate, and the per-word stagger are fixed inside the component. The block's only props are `text` and `className`.",
1659
4753
  "keywords": [
1660
4754
  "text",
1661
4755
  "scroll",
@@ -1699,10 +4793,13 @@
1699
4793
  "avatar": false
1700
4794
  },
1701
4795
  "imageRoles": [],
1702
- "defaultValues": {
1703
- "initialWordOpacity": 0.2,
1704
- "scrub": 2,
1705
- "stagger": 0.1
4796
+ "defaultValues": {},
4797
+ "fields": {
4798
+ "text": {
4799
+ "type": "string",
4800
+ "required": true,
4801
+ "maxLength": 300
4802
+ }
1706
4803
  }
1707
4804
  }
1708
4805
  }