@deriv-web-design/ui 0.0.28 → 0.1.0

package/block-registry.json

@@ -0,0 +1,1406 @@
+{
+  "article-hero": {
+    "id": "article-hero",
+    "name": "Article Hero",
+    "component": "ArticleHero",
+    "category": "article",
+    "description": "Editorial hub hero with one featured article, two labeled sidebar columns of article listings, and optional footer cards.",
+    "purpose": "Editorial hub hero used to open an articles or blog homepage with one prominently featured story flanked by two labeled sidebar columns of smaller article listings, plus up to two small footer cards below the featured article. This block is designed to be the first visible section of a news, blog, or market-commentary hub page.",
+    "keywords": [
+      "article",
+      "news",
+      "blog",
+      "editorial",
+      "hero",
+      "featured",
+      "trending",
+      "markets",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "article-hero",
+    "requiredFields": [
+      "featured",
+      "leftColumn",
+      "rightColumn"
+    ],
+    "optionalFields": [
+      "featuredFooter"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 1,
+    "layout": {
+      "alignment": "three-column",
+      "buttonLayout": "none",
+      "contentWidth": "wide",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "thumbnails": true,
+      "tags": true,
+      "columnLabels": true
+    },
+    "imageRoles": [
+      "featured-thumbnail",
+      "article-thumbnail"
+    ],
+    "defaultValues": {
+      "featuredFooter": []
+    }
+  },
+  "article-section-featured": {
+    "id": "article-section-featured",
+    "name": "Article Section Featured",
+    "component": "ArticleSection",
+    "category": "article",
+    "description": "Article listing section with a heading, view-all link, and featured, showcase, or grid card layouts.",
+    "purpose": "Mid-page article listing section with a heading, a \"view all\" link, and one of three ready-made card layouts: a featured article followed by a text-only grid, a showcase with side columns, or a plain 4-column card grid. This block is designed to surface a collection of articles or videos further down a page.",
+    "keywords": [
+      "article",
+      "news",
+      "blog",
+      "listing",
+      "grid",
+      "showcase",
+      "featured",
+      "videos",
+      "markets",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "article-list",
+    "requiredFields": [
+      "sectionTitle",
+      "articles"
+    ],
+    "optionalFields": [
+      "variant",
+      "linkText",
+      "featured"
+    ],
+    "variants": [
+      "featured",
+      "showcase",
+      "grid"
+    ],
+    "recommendedPosition": 4,
+    "layout": {
+      "alignment": "left",
+      "buttonLayout": "none",
+      "contentWidth": "wide",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "thumbnails": true,
+      "tags": true,
+      "viewAllLink": true
+    },
+    "imageRoles": [
+      "featured-thumbnail",
+      "article-thumbnail"
+    ],
+    "defaultValues": {
+      "variant": "featured",
+      "linkText": "View all articles"
+    }
+  },
+  "cta-banner-standard": {
+    "id": "cta-banner-standard",
+    "name": "CTA Banner Standard",
+    "component": "CTABanner",
+    "category": "cta",
+    "description": "Full-bleed coral CTA banner with centered headline, single button, and scroll-driven parallax avatar field.",
+    "purpose": "Full-bleed coral conversion banner with a centered headline and CTA button, surrounded by a scroll-driven parallax field of floating avatar images on a background grid. This block is designed to be a dramatic, high-impact conversion moment near the end of a landing page.",
+    "keywords": [
+      "cta",
+      "banner",
+      "conversion",
+      "sign-up",
+      "open-account",
+      "avatars",
+      "community",
+      "trading",
+      "forex",
+      "mt5",
+      "deriv"
+    ],
+    "sectionType": "cta",
+    "requiredFields": [],
+    "optionalFields": [
+      "headline",
+      "ctaLabel",
+      "ctaHref",
+      "avatars",
+      "variant"
+    ],
+    "variants": [
+      "standard",
+      "compact"
+    ],
+    "recommendedPosition": 9,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "single",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": true,
+      "secondaryButton": false,
+      "avatars": true,
+      "scrollAnimation": true
+    },
+    "imageRoles": [
+      "avatar"
+    ],
+    "defaultValues": {
+      "headline": "Short section title goes here",
+      "ctaLabel": "Open account",
+      "ctaHref": "#",
+      "variant": "standard"
+    }
+  },
+  "day-night-transition": {
+    "id": "day-night-transition",
+    "name": "Day Night Transition",
+    "component": "DayNightTransition",
+    "category": "feature",
+    "description": "Sticky-scroll section crossfading between day and night background images with day/night copy and text color states.",
+    "purpose": "Full-viewport sticky-scroll section that crossfades between a day and a night background image as the user scrolls, with headline, description, and text color interpolating between a day state and a night state. This block is designed as a dramatic, scroll-driven narrative moment tying two visual states together.",
+    "keywords": [
+      "day",
+      "night",
+      "transition",
+      "crossfade",
+      "scroll",
+      "sticky",
+      "immersive",
+      "24/7",
+      "markets",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "scroll-transition",
+    "requiredFields": [
+      "dayImageUrl",
+      "nightImageUrl"
+    ],
+    "optionalFields": [
+      "dayHeadline",
+      "nightHeadline",
+      "dayDescription",
+      "nightDescription",
+      "ctaLabel",
+      "ctaHref",
+      "hideCta",
+      "headlineLevel",
+      "descriptionLevel",
+      "inlineDayNightHeadline",
+      "scrollPreset"
+    ],
+    "variants": [
+      "default",
+      "webflow-day-night-v2"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "left",
+      "buttonLayout": "single",
+      "contentWidth": "medium",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": true,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": true,
+      "secondaryButton": false,
+      "dayNightStates": true,
+      "scrollAnimation": true
+    },
+    "imageRoles": [
+      "day-background",
+      "night-background"
+    ],
+    "defaultValues": {
+      "dayHeadline": "Medium length section title goes here",
+      "nightHeadline": "Medium length section title goes here",
+      "dayDescription": "Description goes here. Description goes here. Description goes here.",
+      "nightDescription": "Description goes here. Description goes here. Description goes here.",
+      "ctaLabel": "Get started",
+      "ctaHref": "#",
+      "hideCta": false,
+      "headlineLevel": "h2",
+      "descriptionLevel": "body-md",
+      "scrollPreset": "default"
+    }
+  },
+  "download-banner-light-2": {
+    "id": "download-banner-light-2",
+    "name": "Download Banner Light 2",
+    "component": "DownloadBanner",
+    "category": "banner",
+    "description": "App download section with a desktop QR code block and platform badges for mobile stores, desktop platforms, and web.",
+    "purpose": "Full-width section promoting app downloads: on desktop a QR code with descriptive text sits beside a row of platform download badges; on mobile a heading replaces the QR code above a two-column badge grid. This block is designed to convert visitors into app installs across mobile stores, desktop platforms, and the web.",
+    "keywords": [
+      "download",
+      "app",
+      "qr-code",
+      "badges",
+      "app-store",
+      "google-play",
+      "appgallery",
+      "windows",
+      "macos",
+      "linux",
+      "mt5",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "download",
+    "requiredFields": [],
+    "optionalFields": [
+      "style",
+      "qrCodeImage",
+      "qrCodeAlt",
+      "qrTitle",
+      "qrSubtitle",
+      "mobileTitle",
+      "disclaimer",
+      "showAppStore",
+      "showGooglePlay",
+      "showAppGallery",
+      "showWindows",
+      "showMacOS",
+      "showLinux",
+      "showWeb",
+      "appStoreHref",
+      "googlePlayHref",
+      "appGalleryHref",
+      "windowsHref",
+      "macOSHref",
+      "linuxHref",
+      "webHref"
+    ],
+    "variants": [
+      "light",
+      "light-2",
+      "dark"
+    ],
+    "recommendedPosition": 8,
+    "layout": {
+      "alignment": "split",
+      "buttonLayout": "badge-row",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "qrCode": true,
+      "platformBadges": true,
+      "disclaimer": true
+    },
+    "imageRoles": [
+      "qr-code"
+    ],
+    "defaultValues": {
+      "style": "light-2",
+      "qrCodeAlt": "QR code to download the app",
+      "qrTitle": "Scan to download",
+      "qrSubtitle": "Android & iOS",
+      "mobileTitle": "Available on",
+      "showAppStore": true,
+      "showGooglePlay": true,
+      "showAppGallery": true,
+      "showWindows": true,
+      "showMacOS": true,
+      "showLinux": true,
+      "showWeb": true
+    }
+  },
+  "faq-accordion-white": {
+    "id": "faq-accordion-white",
+    "name": "FAQ Accordion White",
+    "component": "FaqAccordion",
+    "category": "faq",
+    "description": "Centered FAQ section with an H2 title and a single-open accordion list of question/answer items.",
+    "purpose": "Centered FAQ section with an H2 title and a vertical list of expandable question/answer items. Only one item can be open at a time — opening an item closes the previously open one. This block is designed to answer common questions and handle objections near the end of a page.",
+    "keywords": [
+      "faq",
+      "questions",
+      "answers",
+      "accordion",
+      "help",
+      "support",
+      "trading",
+      "forex",
+      "mt5",
+      "deriv"
+    ],
+    "sectionType": "faq",
+    "requiredFields": [
+      "title",
+      "items"
+    ],
+    "optionalFields": [
+      "colorScheme"
+    ],
+    "variants": [
+      "white",
+      "slate"
+    ],
+    "recommendedPosition": 8,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "none",
+      "contentWidth": "medium",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "accordionItems": true,
+      "singleOpen": true
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "colorScheme": "white"
+    }
+  },
+  "feature-bullets-image-right": {
+    "id": "feature-bullets-image-right",
+    "name": "Feature Bullets Image Right",
+    "component": "FeatureBullets",
+    "category": "feature",
+    "description": "Split feature section with a checkmarked bullet list beside a supporting image.",
+    "purpose": "A 50/50 split feature section that pairs a section title and a vertical list of checkmarked bullet points with a single supporting image. This block is designed to make several benefits or included features scannable at a glance.",
+    "keywords": [
+      "feature",
+      "bullets",
+      "checklist",
+      "benefits",
+      "checkmarks",
+      "split",
+      "advantages",
+      "trading",
+      "mt5",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "requiredFields": [
+      "title",
+      "bullets",
+      "image"
+    ],
+    "optionalFields": [
+      "imageAlt",
+      "imagePosition"
+    ],
+    "variants": [
+      "image-right",
+      "image-left"
+    ],
+    "recommendedPosition": 4,
+    "layout": {
+      "alignment": "left",
+      "imagePosition": "right",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "icons": true,
+      "bullets": true
+    },
+    "imageRoles": [
+      "feature-image"
+    ],
+    "defaultValues": {
+      "imageAlt": "",
+      "imagePosition": "right"
+    }
+  },
+  "feature-cards": {
+    "id": "feature-cards",
+    "name": "Feature Cards",
+    "component": "FeatureCards",
+    "category": "feature",
+    "description": "Centred section header above a responsive grid of image-led feature cards, with large one-card and two-card panel variants.",
+    "purpose": "A feature section with a centred header (title, optional description, optional link) above a responsive grid of image-led feature cards. Two additional layout variants swap the grid for one or two large feature panels with platform shortcut links. This block is designed to present 1 to 4 features, products, or platforms with supporting imagery.",
+    "keywords": [
+      "feature",
+      "cards",
+      "grid",
+      "benefits",
+      "products",
+      "platforms",
+      "comparison",
+      "trading",
+      "cfd",
+      "mt5",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "requiredFields": [
+      "sectionTitle",
+      "cards"
+    ],
+    "optionalFields": [
+      "variant",
+      "sectionDescription",
+      "showLink",
+      "linkText",
+      "cardColorScheme"
+    ],
+    "variants": [
+      "default",
+      "two-cards",
+      "one-card"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3-4",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": true,
+      "cardLink": true,
+      "platformLinks": true,
+      "icons": true
+    },
+    "imageRoles": [
+      "card-image",
+      "platform-icon"
+    ],
+    "defaultValues": {
+      "variant": "default",
+      "showLink": false,
+      "linkText": "Learn more",
+      "cardColorScheme": "image"
+    }
+  },
+  "feature-cards-icon": {
+    "id": "feature-cards-icon",
+    "name": "Feature Cards Icon",
+    "component": "FeatureCardsIcon",
+    "category": "feature",
+    "description": "Centred section header above a responsive grid of icon-led feature cards.",
+    "purpose": "A feature section with a centred header (title, optional description, optional link) above a responsive grid of icon-led feature cards. Each card shows an icon, title, description, and an optional \"Learn more\" link. This block is designed for benefit or trust sections built around abstract icons rather than photography.",
+    "keywords": [
+      "feature",
+      "icons",
+      "cards",
+      "grid",
+      "benefits",
+      "trust",
+      "value",
+      "why-choose",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "requiredFields": [
+      "sectionTitle",
+      "cards"
+    ],
+    "optionalFields": [
+      "sectionDescription",
+      "showLink",
+      "linkText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3-4",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": true,
+      "cardLink": true,
+      "icons": true
+    },
+    "imageRoles": [
+      "card-icon"
+    ],
+    "defaultValues": {
+      "showLink": false,
+      "linkText": "Learn more"
+    }
+  },
+  "feature-scroll-media-right": {
+    "id": "feature-scroll-media-right",
+    "name": "Feature Scroll Media Right",
+    "component": "FeatureScroll",
+    "category": "feature",
+    "description": "Scroll-driven feature list with a sticky Lottie or image panel that crossfades as titled steps scroll past.",
+    "purpose": "A scroll-driven feature-list section. On desktop, a sticky media panel (Lottie animation or image) sits on one side while a list of titled steps scrolls past on the other; the visible media crossfades to match the step at the top of the sticky band. On mobile it becomes a simple stacked list per item. This block is designed for multi-item showcases where each item deserves its own scroll-triggered visual moment.",
+    "keywords": [
+      "feature",
+      "scroll",
+      "sticky",
+      "animation",
+      "lottie",
+      "markets",
+      "forex",
+      "stocks",
+      "crypto",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "requiredFields": [
+      "header",
+      "items"
+    ],
+    "optionalFields": [
+      "variant"
+    ],
+    "variants": [
+      "media-right",
+      "media-left"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "left",
+      "mediaPosition": "right",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "lottieAnimation": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "itemLinks": true
+    },
+    "imageRoles": [
+      "item-media"
+    ],
+    "defaultValues": {
+      "variant": "media-right"
+    }
+  },
+  "feature-split-image-right": {
+    "id": "feature-split-image-right",
+    "name": "Feature Split Image Right",
+    "component": "FeatureSplit",
+    "category": "feature",
+    "description": "Two-column feature callout with title, description and link beside a single focal image.",
+    "purpose": "A two-column feature callout section: a title, optional description, and optional \"Learn more\" link on one side, a single focal image on the other. This block is designed for single-focus feature or product callouts with one supporting visual.",
+    "keywords": [
+      "feature",
+      "split",
+      "two-column",
+      "callout",
+      "highlight",
+      "image",
+      "trading",
+      "cfd",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "requiredFields": [
+      "title"
+    ],
+    "optionalFields": [
+      "description",
+      "showDescription",
+      "linkText",
+      "showLink",
+      "image",
+      "imageAlt",
+      "imagePosition"
+    ],
+    "variants": [
+      "image-right",
+      "image-left"
+    ],
+    "recommendedPosition": 5,
+    "layout": {
+      "alignment": "left",
+      "imagePosition": "right",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "link": true
+    },
+    "imageRoles": [
+      "feature-image"
+    ],
+    "defaultValues": {
+      "showDescription": true,
+      "linkText": "Learn more",
+      "showLink": true,
+      "imageAlt": "",
+      "imagePosition": "right"
+    }
+  },
+  "header-visuals": {
+    "id": "header-visuals",
+    "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).",
+    "keywords": [
+      "header",
+      "page-header",
+      "sub-page",
+      "hero",
+      "title",
+      "intro",
+      "parallax",
+      "cta",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "header",
+    "requiredFields": [
+      "variant",
+      "title"
+    ],
+    "optionalFields": [
+      "subtitle",
+      "description",
+      "primaryButtonText",
+      "primaryButtonUrl",
+      "secondaryButtonText",
+      "secondaryButtonUrl",
+      "leftVisual",
+      "rightVisual"
+    ],
+    "variants": [
+      "visuals",
+      "minimal"
+    ],
+    "recommendedPosition": 1,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "horizontal",
+      "contentWidth": "medium",
+      "background": false,
+      "overlay": true
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": true,
+      "secondaryButton": true,
+      "eyebrow": true,
+      "parallax": true
+    },
+    "imageRoles": [
+      "left-visual",
+      "right-visual"
+    ],
+    "defaultValues": {
+      "variant": "visuals"
+    }
+  },
+  "hero-centered": {
+    "id": "hero-centered",
+    "name": "Hero Centered",
+    "component": "Hero.Centered",
+    "category": "hero",
+    "description": "Centered landing hero with headline, description and CTA buttons.",
+    "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.",
+    "keywords": [
+      "hero",
+      "landing",
+      "banner",
+      "headline",
+      "intro",
+      "forex",
+      "mt5",
+      "cfd",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "hero",
+    "requiredFields": [
+      "headline",
+      "description",
+      "primaryButtonText",
+      "primaryButtonUrl"
+    ],
+    "optionalFields": [
+      "eyebrow",
+      "secondaryButtonText",
+      "secondaryButtonUrl",
+      "backgroundImage",
+      "backgroundVideo",
+      "badge",
+      "trustIndicators"
+    ],
+    "variants": [
+      "centered",
+      "left",
+      "image-right",
+      "video"
+    ],
+    "recommendedPosition": 1,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "horizontal",
+      "contentWidth": "medium",
+      "background": true,
+      "overlay": true
+    },
+    "supports": {
+      "backgroundImage": true,
+      "backgroundVideo": true,
+      "foregroundImage": false,
+      "primaryButton": true,
+      "secondaryButton": true,
+      "badge": true,
+      "trustIndicators": true
+    },
+    "imageRoles": [
+      "hero-background"
+    ],
+    "defaultValues": {
+      "layout": "centered",
+      "overlay": true,
+      "buttonLayout": "horizontal"
+    }
+  },
+  "image-banner-split": {
+    "id": "image-banner-split",
+    "name": "Image Banner Split",
+    "component": "ImageBanner",
+    "category": "banner",
+    "description": "Dark full-bleed banner card with headline, supporting copy, one CTA link, and a photo in a split panel or as a full background.",
+    "purpose": "A full-bleed, dark-background conversion banner pairing a headline, supporting copy, and a single CTA link with a photo — either in a right-hand panel (split) or as the card's full background with a gradient overlay (full-bg). This block is designed as a mid-page or bottom-of-page conversion moment, not a page-opening hero.",
+    "keywords": [
+      "banner",
+      "image",
+      "photo",
+      "cta",
+      "conversion",
+      "promotion",
+      "community",
+      "callout",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "banner",
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "title",
+      "description",
+      "ctaLabel",
+      "ctaHref",
+      "imageUrl",
+      "imageAlt"
+    ],
+    "variants": [
+      "split",
+      "full-bg"
+    ],
+    "recommendedPosition": 7,
+    "layout": {
+      "alignment": "left",
+      "buttonLayout": "single",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": true
+    },
+    "supports": {
+      "backgroundImage": true,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "ctaLink": true,
+      "badge": false
+    },
+    "imageRoles": [
+      "split-panel",
+      "card-background"
+    ],
+    "defaultValues": {
+      "variant": "split",
+      "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",
+      "imageAlt": ""
+    }
+  },
+  "leaders": {
+    "id": "leaders",
+    "name": "Leaders",
+    "component": "AvatarGrid",
+    "category": "team",
+    "description": "Responsive grid of person profile cards with photo, name, role, optional profile link, and expand/collapse for longer lists.",
+    "purpose": "A responsive grid of person/profile cards — photo, name, role, and an optional external profile link — with an optional title/description header and built-in expand/collapse (\"View all\") behaviour for longer lists. This block is designed for people listings such as leadership teams, advisors, or contributors.",
+    "keywords": [
+      "leaders",
+      "team",
+      "people",
+      "avatars",
+      "profiles",
+      "executives",
+      "leadership",
+      "advisors",
+      "about",
+      "deriv"
+    ],
+    "sectionType": "team",
+    "requiredFields": [
+      "items"
+    ],
+    "optionalFields": [
+      "title",
+      "description",
+      "initialVisibleCount",
+      "expandText",
+      "collapseText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 6,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "single",
+      "contentWidth": "wide",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "avatars": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "profileLinks": true,
+      "expandCollapse": true
+    },
+    "imageRoles": [
+      "profile-photo"
+    ],
+    "defaultValues": {
+      "initialVisibleCount": 4,
+      "expandText": "View all",
+      "collapseText": "View less"
+    }
+  },
+  "logo-marquee": {
+    "id": "logo-marquee",
+    "name": "Logo Marquee",
+    "component": "LogoMarquee",
+    "category": "social-proof",
+    "description": "Dark section with two counter-scrolling columns of logo cards driven by scroll velocity, beside a headline, body, disclaimer, and CTA link.",
+    "purpose": "A dark-background social-proof section pairing a headline, body copy, disclaimer, and CTA link with two vertical columns of logo cards that scroll in opposite directions, driven by page-scroll velocity. This block is designed to showcase partners, integrations, or payment methods as an ambient, scroll-reactive logo wall.",
+    "keywords": [
+      "logos",
+      "marquee",
+      "partners",
+      "integrations",
+      "social-proof",
+      "trust",
+      "brands",
+      "payment-methods",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "social-proof",
+    "requiredFields": [],
+    "optionalFields": [
+      "headline",
+      "body",
+      "disclaimer",
+      "ctaLabel",
+      "ctaHref",
+      "col1Logos",
+      "col2Logos"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 2,
+    "layout": {
+      "alignment": "split",
+      "buttonLayout": "single",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "logos": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "ctaLink": true,
+      "disclaimer": true,
+      "scrollAnimation": true
+    },
+    "imageRoles": [
+      "logo-card"
+    ],
+    "defaultValues": {
+      "headline": "Section title goes here",
+      "body": "Explain how this specific feature helps your user.",
+      "disclaimer": "*Add any relevant disclaimers or legal copy here.",
+      "ctaLabel": "Learn more",
+      "ctaHref": "#"
+    }
+  },
+  "stats-carousel": {
+    "id": "stats-carousel",
+    "name": "Stats Carousel",
+    "component": "Stats",
+    "category": "stats",
+    "description": "Auto-rotating carousel of key numbers with optional laurel-wrapped award badges; a StatsSimple variant renders a static count-up grid.",
+    "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.",
+    "keywords": [
+      "stats",
+      "statistics",
+      "numbers",
+      "metrics",
+      "awards",
+      "trust",
+      "credibility",
+      "trading",
+      "forex",
+      "deriv"
+    ],
+    "sectionType": "stats",
+    "requiredFields": [
+      "title",
+      "stats"
+    ],
+    "optionalFields": [
+      "description",
+      "leftAwards",
+      "rightAwards"
+    ],
+    "variants": [
+      "carousel",
+      "simple"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "center",
+      "buttonLayout": "none",
+      "contentWidth": "wide",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "awards": true,
+      "countUpAnimation": true,
+      "carouselAnimation": true
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "leftAwards": [],
+      "rightAwards": []
+    }
+  },
+  "steps-image-left": {
+    "id": "steps-image-left",
+    "name": "Steps Image Left",
+    "component": "Steps",
+    "category": "steps",
+    "description": "Two-column how-it-works section with a numbered step list and an optional supporting image on the left or right.",
+    "purpose": "A two-column how-it-works section pairing a supporting image with a numbered, ordered list of steps, each with a title and description. This block is designed to walk visitors through a clear, ordered sequence such as onboarding or account setup.",
+    "keywords": [
+      "steps",
+      "how-it-works",
+      "process",
+      "onboarding",
+      "get-started",
+      "guide",
+      "numbered",
+      "trading",
+      "mt5",
+      "deriv"
+    ],
+    "sectionType": "steps",
+    "requiredFields": [
+      "title",
+      "steps"
+    ],
+    "optionalFields": [
+      "image",
+      "imageAlt",
+      "imagePosition"
+    ],
+    "variants": [
+      "image-left",
+      "image-right"
+    ],
+    "recommendedPosition": 5,
+    "layout": {
+      "alignment": "left",
+      "buttonLayout": "none",
+      "contentWidth": "wide",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "numberedList": true
+    },
+    "imageRoles": [
+      "supporting-image"
+    ],
+    "defaultValues": {
+      "imagePosition": "left",
+      "imageAlt": ""
+    }
+  },
+  "sticky-market-cards": {
+    "id": "sticky-market-cards",
+    "name": "Sticky Market Cards",
+    "component": "StickyMarketCards",
+    "category": "cards",
+    "description": "Scroll-driven stack of overlapping, text-first market cards that pile up via position sticky, scaling and dimming as each card slides over the previous one.",
+    "purpose": "A scroll-driven stack of overlapping, text-first market cards. Each card piles on top of the previous one via `position: sticky` as the user scrolls, scaling down and dimming the card underneath for a layered depth effect. This block is designed to showcase a list of markets, products, or benefits one at a time as the user scrolls, with a maximum of 4 cards visibly stacked at once regardless of total count.",
+    "keywords": [
+      "sticky",
+      "cards",
+      "stack",
+      "scroll",
+      "markets",
+      "showcase",
+      "forex",
+      "cfd",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "sticky-cards",
+    "requiredFields": [
+      "sectionTitle",
+      "items"
+    ],
+    "optionalFields": [
+      "sectionDescription"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "left",
+      "cardLayout": "sticky-stack",
+      "contentWidth": "medium",
+      "maxVisibleStack": 4,
+      "background": true,
+      "overlay": true
+    },
+    "supports": {
+      "backgroundImage": false,
+      "cardImage": true,
+      "cardThemes": true,
+      "scrollAnimation": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false,
+      "avatar": false
+    },
+    "imageRoles": [
+      "card-background"
+    ],
+    "defaultValues": {
+      "itemTheme": "dark",
+      "maxVisibleStack": 4
+    }
+  },
+  "sticky-stacked-cards": {
+    "id": "sticky-stacked-cards",
+    "name": "Sticky Stacked Cards",
+    "component": "StickyStackedCards",
+    "category": "cards",
+    "description": "Vertically stacked image-and-text cards that slide over each other via position sticky as the user scrolls, with covered cards scaling down for depth.",
+    "purpose": "A vertically stacked set of full image-and-text cards that use `position: sticky` so each subsequent card slides over the previous one as the user scrolls, with covered cards scaling down slightly for a layered depth effect. This block is designed for a small, fixed set of steps or benefits (typically 3) where every card needs its own full-height hero image.",
+    "keywords": [
+      "sticky",
+      "stacked",
+      "cards",
+      "scroll",
+      "steps",
+      "journey",
+      "onboarding",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "sticky-cards",
+    "requiredFields": [
+      "header",
+      "items"
+    ],
+    "optionalFields": [],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 3,
+    "layout": {
+      "alignment": "left",
+      "cardLayout": "sticky-stack",
+      "contentWidth": "medium",
+      "cardColumns": 2,
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "cardImage": true,
+      "cardThemes": true,
+      "scrollAnimation": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false,
+      "avatar": false
+    },
+    "imageRoles": [
+      "card-hero"
+    ],
+    "defaultValues": {
+      "itemTheme": "light"
+    }
+  },
+  "table": {
+    "id": "table",
+    "name": "Table",
+    "component": "Table",
+    "category": "table",
+    "description": "Data-table section with search, client-side pagination, header tooltips, and a sticky first column for instrument and market specification listings.",
+    "purpose": "A full-width data-table section for instrument and market-style listings. It renders a search bar, a native table with a sticky first column and sticky header inside a horizontally scrollable wrapper, optional per-header tooltips, client-side pagination, and an optional footnote below the table. This block is designed for large, column-heavy datasets — any API or CSV-shaped data can be dropped in via the columns and rows props.",
+    "keywords": [
+      "table",
+      "data",
+      "instruments",
+      "specifications",
+      "spreads",
+      "leverage",
+      "markets",
+      "forex",
+      "mt5",
+      "cfd",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "table",
+    "requiredFields": [
+      "columns",
+      "rows"
+    ],
+    "optionalFields": [
+      "sectionTitle",
+      "mainColumnKey",
+      "pageSize",
+      "searchPlaceholder",
+      "infoText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "layout": {
+      "alignment": "center",
+      "contentWidth": "wide",
+      "stickyMainColumn": true,
+      "horizontalScroll": true,
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "rowIcons": true,
+      "search": true,
+      "pagination": true,
+      "headerTooltips": true,
+      "infoText": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [
+      "row-icon"
+    ],
+    "defaultValues": {
+      "pageSize": 10,
+      "searchPlaceholder": "Search",
+      "columnWidth": "normal"
+    }
+  },
+  "testimonial": {
+    "id": "testimonial",
+    "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.",
+    "keywords": [
+      "testimonial",
+      "quote",
+      "review",
+      "social proof",
+      "trust",
+      "carousel",
+      "partner",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "testimonial",
+    "requiredFields": [
+      "items"
+    ],
+    "optionalFields": [
+      "title"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 6,
+    "layout": {
+      "alignment": "center",
+      "carousel": true,
+      "contentWidth": "medium",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "avatar": true,
+      "autoAdvance": true,
+      "dotPagination": true,
+      "quoteMarks": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [
+      "author-avatar"
+    ],
+    "defaultValues": {
+      "autoAdvance": true,
+      "autoAdvanceIntervalMs": 5000
+    }
+  },
+  "text-scroll": {
+    "id": "text-scroll",
+    "name": "Text Scroll",
+    "component": "TextScroll",
+    "category": "scroll-animation",
+    "description": "Large headline paragraph whose words fade in one by one on scroll, a scrubbed word-reveal effect for mission statements and brand messages.",
+    "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.",
+    "keywords": [
+      "text",
+      "scroll",
+      "reveal",
+      "animation",
+      "statement",
+      "mission",
+      "brand",
+      "manifesto",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "scroll-animation",
+    "requiredFields": [
+      "text"
+    ],
+    "optionalFields": [],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 2,
+    "layout": {
+      "alignment": "center",
+      "contentWidth": "medium",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "scrollAnimation": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false,
+      "avatar": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "initialWordOpacity": 0.2,
+      "scrub": 2,
+      "stagger": 0.1
+    }
+  }
+}