@deriv-web-design/ui 0.1.5 → 0.1.8

package/block-registry.json

@@ -1041,6 +1041,100 @@
       }
     }
   },
+  "dynamic-table": {
+    "id": "dynamic-table",
+    "name": "Dynamic Table",
+    "component": "DynamicTable",
+    "category": "table",
+    "description": "Comparison-table section with a label column and two or three value columns (Three columns or Four columns). Rounded card, light header row, horizontal dividers, and multi-line cells.",
+    "purpose": "A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. Unlike Table, this block has no search, pagination, or header tooltips. It is for marketing and product comparison content — not large instrument specification datasets.",
+    "keywords": [
+      "table",
+      "comparison",
+      "features",
+      "platforms",
+      "columns",
+      "mt5",
+      "web terminal",
+      "desktop",
+      "mobile",
+      "windows",
+      "mac",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "table",
+    "global": false,
+    "requiredFields": [
+      "columns",
+      "rows"
+    ],
+    "optionalFields": [
+      "sectionTitle",
+      "variant"
+    ],
+    "variants": [
+      "Three columns",
+      "Four columns"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "contentWidth": "wide",
+      "horizontalScroll": true,
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "search": false,
+      "pagination": false,
+      "headerTooltips": false,
+      "multiLineCells": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "Three columns"
+    },
+    "fields": {
+      "columns": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "header": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          },
+          "key": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          }
+        }
+      },
+      "rows": {
+        "type": "array",
+        "required": true
+      },
+      "sectionTitle": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      },
+      "variant": {
+        "type": "enum",
+        "required": false,
+        "default": "Three columns"
+      }
+    }
+  },
   "faq-accordion-white": {
     "id": "faq-accordion-white",
     "name": "FAQ Accordion White",
@@ -1200,30 +1294,627 @@
       "autoScrollDuration": {
         "type": "number",
         "required": false,
-        "min": 10,
-        "max": 120,
-        "default": 32
+        "min": 10,
+        "max": 120,
+        "default": 32
+      },
+      "awards": {
+        "type": "array",
+        "required": false,
+        "itemFields": {
+          "subtitle": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "maxLength": 60
+      }
+    }
+  },
+  "feature-blog": {
+    "id": "feature-blog",
+    "name": "Feature Blog",
+    "component": "FeatureBlog",
+    "category": "content",
+    "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.",
+    "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).",
+    "keywords": [
+      "blog",
+      "press releases",
+      "newsroom",
+      "articles",
+      "news",
+      "content",
+      "cards",
+      "grid",
+      "media",
+      "press",
+      "trading",
+      "deriv",
+      "newsroom"
+    ],
+    "sectionType": "content",
+    "global": false,
+    "requiredFields": [
+      "posts"
+    ],
+    "optionalFields": [
+      "title",
+      "showLink",
+      "linkText",
+      "linkHref"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": true,
+      "cardLink": true,
+      "tags": true
+    },
+    "imageRoles": [
+      "post-thumbnail"
+    ],
+    "defaultValues": {
+      "title": "Deriv press releases",
+      "showLink": true,
+      "linkText": "See all press releases"
+    },
+    "fields": {
+      "linkHref": {
+        "type": "url",
+        "required": false,
+        "description": "Href for the \"See all\" link."
+      },
+      "linkText": {
+        "type": "string",
+        "required": false,
+        "default": "See all press releases",
+        "defaultSource": "effective",
+        "maxLength": 40
+      },
+      "posts": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "category": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Category label, e.g. \"Company\"."
+          },
+          "date": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Publish date label, e.g. \"July 24, 2026\"."
+          },
+          "href": {
+            "type": "url",
+            "required": false,
+            "description": "Wraps the card in an anchor when set."
+          },
+          "summary": {
+            "type": "string",
+            "required": true,
+            "maxLength": 220
+          },
+          "thumbnail": {
+            "type": "image",
+            "required": true
+          },
+          "thumbnailAlt": {
+            "type": "string",
+            "required": false,
+            "default": "",
+            "defaultSource": "effective",
+            "maxLength": 125,
+            "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."
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 100
+          }
+        }
+      },
+      "showLink": {
+        "type": "boolean",
+        "required": false,
+        "default": true,
+        "description": "Show the \"See all\" link below the grid. On by default."
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      }
+    }
+  },
+  "feature-blog-categories": {
+    "id": "feature-blog-categories",
+    "name": "Feature Blog Categories",
+    "component": "FeatureBlogCategories",
+    "category": "content",
+    "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).",
+    "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).",
+    "keywords": [
+      "blog",
+      "press releases",
+      "newsroom",
+      "articles",
+      "news",
+      "content",
+      "cards",
+      "grid",
+      "search",
+      "filter",
+      "tabs",
+      "categories",
+      "cms",
+      "media",
+      "press",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "content",
+    "global": false,
+    "requiredFields": [
+      "categories",
+      "posts"
+    ],
+    "optionalFields": [
+      "title",
+      "allCategoryId",
+      "allCategoryLabel",
+      "defaultActiveCategoryId",
+      "searchPlaceholder",
+      "emptyStateText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "search": true,
+      "tabs": true,
+      "cardLink": true,
+      "externalLinkNewTab": true,
+      "tags": true
+    },
+    "imageRoles": [
+      "post-thumbnail"
+    ],
+    "defaultValues": {
+      "title": "Deriv press releases",
+      "allCategoryId": "all",
+      "allCategoryLabel": "View all",
+      "searchPlaceholder": "Search",
+      "emptyStateText": "Sorry, we couldn't find any results matching."
+    },
+    "fields": {
+      "allCategoryId": {
+        "type": "string",
+        "required": false,
+        "default": "all",
+        "defaultSource": "effective",
+        "maxLength": 40
+      },
+      "allCategoryLabel": {
+        "type": "string",
+        "required": false,
+        "default": "View all",
+        "defaultSource": "effective",
+        "maxLength": 30
+      },
+      "categories": {
+        "type": "array",
+        "required": true,
+        "description": "Category tabs, CMS-managed. An additional \"all\" tab (see allCategoryId/allCategoryLabel) is always prepended automatically — do not include it here.",
+        "itemFields": {
+          "id": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match FeatureBlogCategoryPost.category for filtering to work."
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 30
+          }
+        }
+      },
+      "defaultActiveCategoryId": {
+        "type": "string",
+        "required": false,
+        "description": "Initial active tab id. Defaults to allCategoryId (\"View all\") when omitted."
+      },
+      "emptyStateText": {
+        "type": "string",
+        "required": false,
+        "default": "Sorry, we couldn't find any results matching.",
+        "defaultSource": "effective",
+        "maxLength": 120
+      },
+      "posts": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "category": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match one of categories[].id. Posts always also match the \"all\" tab."
+          },
+          "categoryLabel": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Category chip label shown on the card. Defaults to the matching tab's label."
+          },
+          "date": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Publish date label, e.g. \"July 24, 2026\"."
+          },
+          "href": {
+            "type": "url",
+            "required": false,
+            "description": "Absolute http(s):// URLs open in a new tab (external); relative/internal paths navigate same-tab."
+          },
+          "summary": {
+            "type": "string",
+            "required": true,
+            "maxLength": 220
+          },
+          "thumbnail": {
+            "type": "image",
+            "required": true
+          },
+          "thumbnailAlt": {
+            "type": "string",
+            "required": false,
+            "default": "",
+            "defaultSource": "effective",
+            "maxLength": 125,
+            "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."
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 100
+          }
+        }
+      },
+      "searchPlaceholder": {
+        "type": "string",
+        "required": false,
+        "default": "Search",
+        "defaultSource": "effective",
+        "maxLength": 40
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      }
+    }
+  },
+  "feature-blog-page": {
+    "id": "feature-blog-page",
+    "name": "Feature Blog Page",
+    "component": "FeatureBlogPage",
+    "category": "content",
+    "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.",
+    "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).",
+    "keywords": [
+      "blog",
+      "article",
+      "blog post",
+      "press release",
+      "newsroom",
+      "table of contents",
+      "toc",
+      "contents",
+      "share",
+      "social share",
+      "sticky sidebar",
+      "scrollspy",
+      "author",
+      "byline",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "article",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "content"
+    ],
+    "optionalFields": [
+      "category",
+      "publishDate",
+      "author",
+      "heroImage",
+      "heroImageAlt",
+      "tocTitle",
+      "tocDefaultOpen",
+      "hideToc",
+      "shareTitle",
+      "shareUrl",
+      "shareText",
+      "sharePlatforms",
+      "hideShare",
+      "copiedLabel"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 1,
+    "placement": [
+      "top",
+      "middle"
+    ],
+    "layout": {
+      "alignment": "left",
+      "gridColumns": "2",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "cardLink": false,
+      "icons": true,
+      "tableOfContents": true,
+      "socialShare": true,
+      "richContent": true
+    },
+    "imageRoles": [
+      "hero-image",
+      "author-avatar",
+      "inline-image"
+    ],
+    "defaultValues": {
+      "tocTitle": "Contents",
+      "tocDefaultOpen": true,
+      "hideToc": false,
+      "shareTitle": "Share article",
+      "sharePlatforms": [
+        "facebook",
+        "twitter",
+        "telegram",
+        "linkedin"
+      ],
+      "hideShare": false,
+      "copiedLabel": "Copied!"
+    },
+    "fields": {
+      "author": {
+        "type": "object",
+        "required": false,
+        "objectFields": {
+          "avatar": {
+            "type": "image",
+            "required": false
+          },
+          "avatarAlt": {
+            "type": "string",
+            "required": false,
+            "maxLength": 125
+          },
+          "name": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          }
+        }
+      },
+      "category": {
+        "type": "string",
+        "required": false,
+        "maxLength": 40,
+        "description": "Small category label rendered above the title, e.g. \"Press releases\"."
+      },
+      "content": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "caption": {
+            "type": "string",
+            "required": false,
+            "maxLength": 200
+          },
+          "cite": {
+            "type": "string",
+            "required": false,
+            "maxLength": 120
+          },
+          "id": {
+            "type": "string",
+            "required": false,
+            "maxLength": 80,
+            "description": "Stable anchor id; auto-generated (slugified) from `text` when omitted."
+          },
+          "image": {
+            "type": "image",
+            "required": false
+          },
+          "imageAlt": {
+            "type": "string",
+            "required": false,
+            "maxLength": 125
+          },
+          "items": {
+            "type": "array",
+            "required": false
+          },
+          "level": {
+            "type": "number",
+            "required": false,
+            "default": 2,
+            "defaultSource": "effective",
+            "enum": [
+              2,
+              3
+            ],
+            "description": "Only level-2 headings are collected into the table of contents."
+          },
+          "ordered": {
+            "type": "boolean",
+            "required": false,
+            "default": false,
+            "defaultSource": "effective"
+          },
+          "text": {
+            "type": "string",
+            "required": false,
+            "maxLength": 1000
+          },
+          "type": {
+            "type": "string",
+            "required": true,
+            "enum": [
+              "heading",
+              "paragraph",
+              "list",
+              "quote",
+              "image"
+            ]
+          }
+        }
+      },
+      "copiedLabel": {
+        "type": "string",
+        "required": false,
+        "default": "Copied!",
+        "maxLength": 30
+      },
+      "heroImage": {
+        "type": "image",
+        "required": false
+      },
+      "heroImageAlt": {
+        "type": "string",
+        "required": false,
+        "default": "",
+        "defaultSource": "effective",
+        "maxLength": 125
+      },
+      "hideShare": {
+        "type": "boolean",
+        "required": false,
+        "default": false
+      },
+      "hideToc": {
+        "type": "boolean",
+        "required": false,
+        "default": false
+      },
+      "publishDate": {
+        "type": "string",
+        "required": false,
+        "maxLength": 30,
+        "description": "Publish date label, e.g. \"July 24, 2026\"."
+      },
+      "sharePlatforms": {
+        "type": "array",
+        "required": false,
+        "default": [
+          "facebook",
+          "twitter",
+          "telegram",
+          "linkedin"
+        ],
+        "defaultSource": "effective",
+        "enum": [
+          "facebook",
+          "twitter",
+          "linkedin",
+          "telegram"
+        ]
+      },
+      "shareText": {
+        "type": "string",
+        "required": false,
+        "maxLength": 200,
+        "description": "Text passed to platforms that accept share text (X/Twitter, Telegram); defaults to `title`."
       },
-      "awards": {
-        "type": "array",
+      "shareTitle": {
+        "type": "string",
         "required": false,
-        "itemFields": {
-          "subtitle": {
-            "type": "string",
-            "required": true,
-            "maxLength": 60
-          },
-          "title": {
-            "type": "string",
-            "required": true,
-            "maxLength": 80
-          }
-        }
+        "default": "Share article",
+        "maxLength": 40
+      },
+      "shareUrl": {
+        "type": "url",
+        "required": false,
+        "description": "Canonical URL used to build every share link and for \"copy link\"; sharing is hidden when omitted."
       },
       "title": {
         "type": "string",
+        "required": true,
+        "maxLength": 160
+      },
+      "tocDefaultOpen": {
+        "type": "boolean",
         "required": false,
-        "maxLength": 60
+        "default": true
+      },
+      "tocTitle": {
+        "type": "string",
+        "required": false,
+        "default": "Contents",
+        "maxLength": 40
       }
     }
   },
@@ -1630,6 +2321,161 @@
       }
     }
   },
+  "feature-offices": {
+    "id": "feature-offices",
+    "name": "Feature Offices",
+    "component": "FeatureOffices",
+    "category": "content",
+    "description": "Light section with a centered H2 heading and CMS-managed region tabs above a responsive grid of office address cards (flag image, city/country, address, optional \"See location\" link). Filtering by region happens client-side.",
+    "purpose": "A light-background content section that lists a company's offices grouped by region, using a row of CMS-managed region tabs above a responsive grid of address cards (flag image, city/country, address, optional \"See location\" link). Modeled after [deriv.com/contact-us](https://deriv.com/contact-us) (\"Our offices\").",
+    "keywords": [
+      "offices",
+      "locations",
+      "contact",
+      "addresses",
+      "regions",
+      "tabs",
+      "cms",
+      "map",
+      "branches",
+      "deriv"
+    ],
+    "sectionType": "content",
+    "global": false,
+    "requiredFields": [
+      "regions",
+      "offices"
+    ],
+    "optionalFields": [
+      "title",
+      "defaultActiveRegionId",
+      "linkText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 5,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "search": false,
+      "tabs": true,
+      "cardLink": true,
+      "externalLinkNewTab": true,
+      "tags": false
+    },
+    "imageRoles": [
+      "office-flag"
+    ],
+    "defaultValues": {
+      "title": "Our offices",
+      "linkText": "See location"
+    },
+    "fields": {
+      "defaultActiveRegionId": {
+        "type": "string",
+        "required": false,
+        "description": "Initial active tab id. Defaults to regions[0].id when omitted."
+      },
+      "linkText": {
+        "type": "string",
+        "required": false,
+        "default": "See location",
+        "defaultSource": "effective",
+        "maxLength": 30,
+        "description": "Default label for each office's link. Overridable per office via offices[].linkText."
+      },
+      "offices": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "address": {
+            "type": "string",
+            "required": true,
+            "maxLength": 220,
+            "description": "Full postal address. Use \"\\n\" to break onto multiple lines."
+          },
+          "city": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "country": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "flagAlt": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60,
+            "description": "Alt text for the flag image. Defaults to country when omitted."
+          },
+          "flagImage": {
+            "type": "image",
+            "required": true,
+            "description": "Real flag artwork (not an emoji), e.g. a flagcdn.com URL."
+          },
+          "href": {
+            "type": "url",
+            "required": false,
+            "description": "Absolute http(s):// URLs open in a new tab (external); relative/internal paths navigate same-tab. Omit to render the card with no link."
+          },
+          "linkText": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Overrides the default \"See location\" link label for this office."
+          },
+          "region": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match one of regions[].id."
+          }
+        }
+      },
+      "regions": {
+        "type": "array",
+        "required": true,
+        "description": "Region tabs, CMS-managed.",
+        "itemFields": {
+          "id": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match FeatureOffice.region for filtering to work."
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 30
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "default": "Our offices",
+        "defaultSource": "effective",
+        "maxLength": 60
+      }
+    }
+  },
   "feature-scroll-media-right": {
     "id": "feature-scroll-media-right",
     "name": "Feature Scroll Media Right",
@@ -1886,6 +2732,7 @@
       "logoAlt",
       "socialLinks",
       "derivGo",
+      "tradingView",
       "investorsInPeopleSrc",
       "investorsInPeopleAlt",
       "licenseText",
@@ -1972,8 +2819,8 @@
     "name": "Header Visuals",
     "component": "Header",
     "category": "header",
-    "description": "Light-grey sub-page header with centred title, CTA buttons and optional floating parallax visuals.",
-    "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).",
+    "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.",
+    "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).",
     "keywords": [
       "header",
       "page-header",
@@ -1986,7 +2833,10 @@
       "parallax",
       "cta",
       "trading",
-      "deriv"
+      "deriv",
+      "dark",
+      "search",
+      "help-centre"
     ],
     "sectionType": "header",
     "global": false,
@@ -2000,11 +2850,14 @@
       "primaryButton",
       "secondaryButton",
       "leftVisual",
-      "rightVisual"
+      "rightVisual",
+      "search"
     ],
     "variants": [
       "visuals",
-      "minimal"
+      "minimal",
+      "dark",
+      "dark-search"
     ],
     "recommendedPosition": 1,
     "placement": [
@@ -2024,7 +2877,8 @@
       "primaryButton": true,
       "secondaryButton": true,
       "eyebrow": true,
-      "parallax": true
+      "parallax": true,
+      "search": true
     },
     "imageRoles": [
       "left-visual",
@@ -2066,6 +2920,19 @@
         "aspectRatio": "1:1",
         "description": "Right floating visual, rendered by the `visuals` variant only. Accepts a ReactNode in code; page builders should pass an image URL string."
       },
+      "search": {
+        "type": "object",
+        "required": false,
+        "description": "Search field configuration, rendered only by the `dark-search` variant (the field always appears for that variant; this only customises it).",
+        "objectFields": {
+          "placeholder": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40,
+            "description": "Placeholder text for the search input. Defaults to \"Search\"."
+          }
+        }
+      },
       "secondaryButton": {
         "type": "object",
         "required": false,
@@ -2098,9 +2965,11 @@
         "required": true,
         "enum": [
           "visuals",
-          "minimal"
+          "minimal",
+          "dark",
+          "dark-search"
         ],
-        "description": "Layout variant. Required — the component has no fallback, so omitting it renders an unstyled header."
+        "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)."
       }
     }
   },
@@ -2726,8 +3595,10 @@
       "imageAlt"
     ],
     "variants": [
-      "split",
-      "full-bg"
+      "split-left",
+      "split-right",
+      "full-bg-left",
+      "full-bg-right"
     ],
     "recommendedPosition": 7,
     "placement": [
@@ -2755,7 +3626,7 @@
       "card-background"
     ],
     "defaultValues": {
-      "variant": "split",
+      "variant": "split-left",
       "title": "Join our global community",
       "description": "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise.",
       "ctaLabel": "Trader's Hub",
@@ -2799,10 +3670,12 @@
         "type": "string",
         "required": false,
         "enum": [
-          "split",
-          "full-bg"
+          "split-left",
+          "split-right",
+          "full-bg-left",
+          "full-bg-right"
         ],
-        "default": "split"
+        "default": "split-left"
       }
     }
   },
@@ -3150,62 +4023,199 @@
         "type": "array",
         "required": false,
         "itemFields": {
-          "code": {
+          "code": {
+            "type": "string",
+            "required": true,
+            "maxLength": 10
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          }
+        }
+      },
+      "languageLabel": {
+        "type": "string",
+        "required": false,
+        "maxLength": 10,
+        "description": "Current language code shown in the switcher, e.g. \"EN\". No default — omit it and the language switcher is not rendered at all."
+      },
+      "loginHref": {
+        "type": "url",
+        "required": false,
+        "description": "Login link target. No default — omit it and the login link is not rendered at all."
+      },
+      "loginLabel": {
+        "type": "string",
+        "required": false,
+        "maxLength": 30,
+        "default": "Log in"
+      },
+      "logoHref": {
+        "type": "url",
+        "required": false,
+        "default": "/"
+      },
+      "logoSrc": {
+        "type": "image",
+        "required": true
+      },
+      "logoSrcDark": {
+        "type": "image",
+        "required": false
+      },
+      "navItems": {
+        "type": "array",
+        "required": false,
+        "default": []
+      },
+      "theme": {
+        "type": "string",
+        "required": false,
+        "default": "dark",
+        "enum": [
+          "dark",
+          "light"
+        ],
+        "description": "Colour theme. Defaults to \"dark\" — omit it and you get the dark navbar. (This entry previously documented \"light\", which the component never did.)"
+      }
+    }
+  },
+  "parallax-banner": {
+    "id": "parallax-banner",
+    "name": "Parallax Banner",
+    "component": "ParallaxBanner",
+    "category": "banner",
+    "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.",
+    "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).",
+    "keywords": [
+      "careers",
+      "culture",
+      "values",
+      "about-us",
+      "banner",
+      "image",
+      "photo",
+      "parallax",
+      "scroll",
+      "cta",
+      "team",
+      "hiring",
+      "jobs",
+      "deriv"
+    ],
+    "sectionType": "banner",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "title",
+      "description",
+      "ctaLabel",
+      "ctaHref",
+      "imageUrl",
+      "imageAlt",
+      "cards",
+      "enableParallax"
+    ],
+    "variants": [
+      "default",
+      "banner-only"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "left",
+      "buttonLayout": "none",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false,
+      "parallax": true
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "ctaLink": true,
+      "parallax": true,
+      "editableText": true
+    },
+    "imageRoles": [
+      "split-panel"
+    ],
+    "defaultValues": {
+      "variant": "default",
+      "title": "Our culture",
+      "description": "We combine human values with AI precision. Collaboration, integrity, and continuous learning guide every project.",
+      "ctaLabel": "Culture at Deriv",
+      "enableParallax": true
+    },
+    "fields": {
+      "cards": {
+        "type": "array",
+        "required": false,
+        "itemFields": {
+          "description": {
             "type": "string",
             "required": true,
-            "maxLength": 10
+            "maxLength": 220
           },
-          "label": {
+          "title": {
             "type": "string",
             "required": true,
             "maxLength": 40
           }
         }
       },
-      "languageLabel": {
+      "ctaHref": {
         "type": "string",
-        "required": false,
-        "maxLength": 10,
-        "description": "Current language code shown in the switcher, e.g. \"EN\". No default — omit it and the language switcher is not rendered at all."
+        "required": false
       },
-      "loginHref": {
-        "type": "url",
+      "ctaLabel": {
+        "type": "string",
         "required": false,
-        "description": "Login link target. No default — omit it and the login link is not rendered at all."
+        "maxLength": 40
       },
-      "loginLabel": {
+      "description": {
         "type": "string",
         "required": false,
-        "maxLength": 30,
-        "default": "Log in"
+        "maxLength": 220
       },
-      "logoHref": {
-        "type": "url",
+      "enableParallax": {
+        "type": "boolean",
         "required": false,
-        "default": "/"
+        "default": true
       },
-      "logoSrc": {
-        "type": "image",
-        "required": true
+      "imageAlt": {
+        "type": "string",
+        "required": false,
+        "maxLength": 120,
+        "default": ""
       },
-      "logoSrcDark": {
+      "imageUrl": {
         "type": "image",
-        "required": false
+        "required": false,
+        "aspectRatio": "4:3"
       },
-      "navItems": {
-        "type": "array",
+      "title": {
+        "type": "string",
         "required": false,
-        "default": []
+        "maxLength": 60
       },
-      "theme": {
+      "variant": {
         "type": "string",
         "required": false,
-        "default": "dark",
         "enum": [
-          "dark",
-          "light"
+          "default",
+          "banner-only"
         ],
-        "description": "Colour theme. Defaults to \"dark\" — omit it and you get the dark navbar. (This entry previously documented \"light\", which the component never did.)"
+        "default": "default"
       }
     }
   },
@@ -3861,8 +4871,8 @@
     "name": "Testimonial",
     "component": "Testimonial",
     "category": "testimonial",
-    "description": "Auto-advancing testimonial carousel showing one quote card at a time with decorative quote marks, author details, and dot pagination.",
-    "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. 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`.",
+    "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).",
+    "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`.",
     "keywords": [
       "testimonial",
       "quote",
@@ -3874,7 +4884,12 @@
       "customer",
       "trader",
       "trading",
-      "deriv"
+      "deriv",
+      "trustpilot",
+      "star rating",
+      "reviews",
+      "customer feedback",
+      "homepage"
     ],
     "sectionType": "testimonial",
     "global": false,
@@ -3882,10 +4897,14 @@
       "items"
     ],
     "optionalFields": [
-      "title"
+      "title",
+      "variant",
+      "trustpilotUrl",
+      "trustpilotScore"
     ],
     "variants": [
-      "default"
+      "default",
+      "trustpilot"
     ],
     "recommendedPosition": 6,
     "placement": [
@@ -3905,6 +4924,9 @@
       "autoAdvance": true,
       "dotPagination": true,
       "quoteMarks": true,
+      "starRating": true,
+      "reviewLinkOut": true,
+      "brandRatingBadge": true,
       "primaryButton": false,
       "secondaryButton": false,
       "badge": false
@@ -3912,7 +4934,11 @@
     "imageRoles": [
       "author-avatar"
     ],
-    "defaultValues": {},
+    "defaultValues": {
+      "variant": "default",
+      "trustpilotUrl": "https://www.trustpilot.com/review/deriv.com?utm_medium=trustbox&utm_source=Mini",
+      "trustpilotScore": 4.5
+    },
     "fields": {
       "items": {
         "type": "array",
@@ -3937,6 +4963,16 @@
             "type": "string",
             "required": true,
             "maxLength": 400
+          },
+          "rating": {
+            "type": "number",
+            "required": false,
+            "min": 0,
+            "max": 5
+          },
+          "reviewUrl": {
+            "type": "string",
+            "required": false
           }
         }
       },
@@ -3944,6 +4980,20 @@
         "type": "string",
         "required": false,
         "maxLength": 80
+      },
+      "trustpilotScore": {
+        "type": "number",
+        "required": false,
+        "min": 0,
+        "max": 5
+      },
+      "trustpilotUrl": {
+        "type": "string",
+        "required": false
+      },
+      "variant": {
+        "type": "enum",
+        "required": false
       }
     }
   },
@@ -4005,5 +5055,251 @@
         "maxLength": 300
       }
     }
+  },
+  "trading-calculator": {
+    "id": "trading-calculator",
+    "name": "TradingCalculator",
+    "component": "TradingCalculator",
+    "category": "tools",
+    "description": "A live two-panel trading calculator for a searchable instrument picker across forex, synthetics, stocks, commodities, and crypto. Four variants share the same inputs and live data but each surface a different focused result: `main` (margin, trade volume, pip value, long/short swap together), `margin` (margin required only, mirrors deriv.com/trading-calculators/margin-calculator), `pip` (pip value only, mirrors deriv.com/trading-calculators/pip-calculator), and `swap` (long/short swap charges only, mirrors deriv.com/trading-calculators/swap-calculator). Fetches live instrument specs and USD exchange rates itself, no configuration required.",
+    "purpose": "A two-panel \"Calculator\" / \"Results\" trading calculator: a searchable instrument picker plus volume and asset-price inputs on the left, and computed results on the right. Ships in four variants (`variant` prop) that share identical inputs, styling, and live data, but each surface a different focused subset of results — see [Variants](#variants) below. Modeled after deriv.com's own trading-calculators pages, and wired to the same live data they use — the component fetches Deriv's public instrument-specs feed on mount and, only when an instrument's currency isn't already USD, calls Deriv's public exchange-rate API to convert the result. No API keys or setup are required; both endpoints are public and unauthenticated, and every variant is connected to the same two data sources — there is no separate margin/pip/swap API, matching how the three reference pages themselves work. | `variant` | Mirrors | Results panel shows | |---|---|---| | `\"main\"` (default) | [deriv.com/trading-calculators](https://deriv.com/trading-calculators) | Margin Required, Trade Volume + Pip value, Swap Charge Long + Short, swap rate/type/three-day/weekend info | | `\"margin\"` | [deriv.com/trading-calculators/margin-calculator](https://deriv.com/trading-calculators/margin-calculator) | Margin Required only | | `\"pip\"` | [deriv.com/trading-calculators/pip-calculator](https://deriv.com/trading-calculators/pip-calculator) | Pip value only | | `\"swap\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Swap Charge Long + Short, swap rate/type/three-day/weekend info |",
+    "keywords": [
+      "calculator",
+      "trading calculator",
+      "margin calculator",
+      "pip calculator",
+      "swap calculator",
+      "leverage",
+      "lot size",
+      "forex",
+      "cfd",
+      "trading tools",
+      "instrument specs",
+      "exchange rate",
+      "deriv",
+      "trading-calculators"
+    ],
+    "sectionType": "calculator",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "symbols",
+      "symbolsEndpoint",
+      "exchangeRateWsUrl",
+      "defaultSymbol"
+    ],
+    "variants": [
+      "main",
+      "margin",
+      "pip",
+      "swap"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": true,
+      "form": true,
+      "primaryButton": true,
+      "secondaryButton": true,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "main",
+      "symbolsEndpoint": "https://deriv-static-pricingfeedv2.firebaseio.com/n8n/row/prod/dynamic_trading_specs.json",
+      "exchangeRateWsUrl": "wss://ws.derivws.com/websockets/v3?app_id=1089"
+    },
+    "fields": {
+      "defaultSymbol": {
+        "type": "string",
+        "required": false,
+        "maxLength": 30
+      },
+      "exchangeRateWsUrl": {
+        "type": "string",
+        "required": false
+      },
+      "symbols": {
+        "type": "array",
+        "required": false,
+        "itemFields": {
+          "ask_last": {
+            "type": "number",
+            "required": true
+          },
+          "asset_class": {
+            "type": "string",
+            "required": true
+          },
+          "base_currency": {
+            "type": "string",
+            "required": true
+          },
+          "contract_size": {
+            "type": "number",
+            "required": true
+          },
+          "description": {
+            "type": "string",
+            "required": true
+          },
+          "effective_leverage": {
+            "type": "number",
+            "required": true
+          },
+          "market": {
+            "type": "string",
+            "required": true
+          },
+          "pip_size": {
+            "type": "number",
+            "required": true
+          },
+          "point_size": {
+            "type": "number",
+            "required": true
+          },
+          "profit_currency": {
+            "type": "string",
+            "required": true
+          },
+          "swap_mode": {
+            "type": "string",
+            "required": true
+          },
+          "swap_rate_long": {
+            "type": "number",
+            "required": true
+          },
+          "swap_rate_short": {
+            "type": "number",
+            "required": true
+          },
+          "symbol": {
+            "type": "string",
+            "required": true
+          },
+          "volume_limit": {
+            "type": "number",
+            "required": true
+          },
+          "volume_min": {
+            "type": "number",
+            "required": true
+          }
+        }
+      },
+      "symbolsEndpoint": {
+        "type": "string",
+        "required": false
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "main",
+          "margin",
+          "pip",
+          "swap"
+        ],
+        "default": "main"
+      }
+    }
+  },
+  "trading-calculator-how-to": {
+    "id": "trading-calculator-how-to",
+    "name": "TradingCalculatorHowTo",
+    "component": "TradingCalculatorHowTo",
+    "category": "tools",
+    "description": "A \"How to calculate…\" explainer section pairing a centered title/description with a two-column \"Formula\" / \"Example\" card, walking through a worked calculation with an annotated calculation strip. Four variants mirror deriv.com's margin/pip/swap calculator explainer content: `margin` (deriv.com/trading-calculators/margin-calculator), `pip` (deriv.com/trading-calculators/pip-calculator), and `swap-points`/`swap-percentage` (deriv.com/trading-calculators/swap-calculator), which both render the same interactive \"In points\" / \"In percentage\" tab switch and only differ in which of the two formulas starts active.",
+    "purpose": "A \"How to calculate…\" explainer section: a centered title/description, then a two-column \"Formula\" / \"Example\" card that walks through one worked calculation using an annotated calculation strip (a boxed row of numbers, each connected by a small dot to a caption naming what it is — \"Lots\", \"Contract size\", \"Volume\", etc.). Modeled after the explainer content on deriv.com's own trading-calculators pages. Ships in four variants (`variant` prop); the two `swap-*` variants both render the same interactive \"In points\" / \"In percentage\" tab switch between the swap page's two formulas — they only differ in which formula starts active, a visitor can still click either tab afterwards regardless of which variant was set. | `variant` | Mirrors | Notes | |---|---|---| | `\"margin\"` (default) | [deriv.com/trading-calculators/margin-calculator](https://deriv.com/trading-calculators/margin-calculator) | One formula, two calculation strips (Volume, then Required margin) | | `\"pip\"` | [deriv.com/trading-calculators/pip-calculator](https://deriv.com/trading-calculators/pip-calculator) | One formula, one calculation strip | | `\"swap-points\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Interactive tab switch — \"Swap calculation (In points)\" / \"Swap calculation (In percentage)\" — opening on the points-based formula | | `\"swap-percentage\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Same interactive tab switch, opening on the percentage/rollover-price-based formula | This block is the worked-example/explainer companion to `TradingCalculator` (the live tool) — pair the two together, `TradingCalculatorHowTo` typically placed below `TradingCalculator` on the same page, exactly as deriv.com does on all three reference pages.",
+    "keywords": [
+      "how to calculate",
+      "margin calculator",
+      "pip calculator",
+      "swap calculator",
+      "formula",
+      "worked example",
+      "explainer",
+      "leverage",
+      "lot size",
+      "forex",
+      "cfd",
+      "trading tools",
+      "deriv",
+      "trading-calculators"
+    ],
+    "sectionType": "explainer",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "title",
+      "description"
+    ],
+    "variants": [
+      "margin",
+      "pip",
+      "swap-points",
+      "swap-percentage"
+    ],
+    "recommendedPosition": 5,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": false,
+      "form": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false,
+      "editableText": true
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "margin"
+    },
+    "fields": {
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 200
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "margin",
+          "pip",
+          "swap-points",
+          "swap-percentage"
+        ],
+        "default": "margin"
+      }
+    }
   }
 }