@deriv-web-design/ui 0.0.13 → 0.0.15

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type ButtonColorScheme = "coral" | "black" | "white";
 type ButtonVariant = "primary" | "secondary";
@@ -279,6 +280,26 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+interface FeatureCardSecondaryItem {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsSecondaryProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    cards: FeatureCardSecondaryItem[];
+}
+
+declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+
 interface FooterLinkItem {
     /** Link label text */
     label: string;
@@ -387,7 +408,7 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
 
 declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-type HeroVariant = "homepage" | "full-image" | "visuals" | "text-only";
+type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -399,10 +420,13 @@ interface HeroButtonProps {
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant:
-     * - "homepage"   — dark bg, left-aligned text, right-side hero image, 100vh
-     * - "full-image" — full background image, center-aligned text, 100vh
-     * - "visuals"    — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "text-only"  — same as visuals but without floating graphics
+     *
+     * - "split"    — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "centered" — full background image, center-aligned text, 100vh
+     * - "showcase" — dark bg + full-bleed bg image, center-aligned text, large product image
+     *                below buttons, smaller floating image below that.
+     * - "visuals"  — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
+     * - "minimal"  — same as visuals but without floating graphics
      */
     variant: HeroVariant;
     /** Optional eyebrow / subtitle above the title */
@@ -418,33 +442,44 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Homepage and Full Image variants.
+     * Shown on Split, Centered and Showcase variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "homepage"   — used as the full-bleed background behind the overlay
-     * - "full-image" — used as the full-bleed background behind the overlay
+     * - "split"    — used as the full-bleed background behind the overlay
+     * - "centered" — used as the full-bleed background behind the overlay
+     * - "showcase" — used as the full-bleed background behind the overlay
      */
     backgroundImageSrc?: string;
     /**
-     * Right-side hero image for the Homepage variant.
+     * Right-side hero image for the Split variant.
      * Accepts a ReactNode (e.g. <img>) or an image URL string.
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant (desktop only).
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     leftVisual?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant (desktop only).
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     rightVisual?: ReactNode | string;
+    /**
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    productImage?: ReactNode | string;
+    /**
+     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    floatingImage?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -482,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
 
 declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
 
-interface ScrollytellingItem {
-    /** Short market name, e.g. "Forex" */
+interface FeatureScrollItem {
+    /** Short feature name, e.g. "Forex" */
     title: string;
     /** Body copy below the title */
     description: string;
@@ -501,14 +536,14 @@ interface ScrollytellingItem {
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
 }
-interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
+interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
     header: string;
     /**
-     * Ordered list of market items.
-     * Drives both the desktop scrollytelling and the mobile stacked layout.
+     * Ordered list of feature items.
+     * Drives both the desktop scroll-driven layout and the mobile stacked layout.
      */
-    items: ScrollytellingItem[];
+    items: FeatureScrollItem[];
     /**
      * Controls which side the sticky media column sits on.
      * @default "media-right"
@@ -516,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
     variant?: "media-left" | "media-right";
 }
 
-declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
-declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
+declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
+declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+
+type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
+    /**
+     * When false, playback is stopped (e.g. inactive slide in a stacked player).
+     * When true, plays once whenever the instance is both enabled and intersecting.
+     */
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+/**
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
+ * (e.g. hidden slides) without relying on geometry alone.
+ */
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";
@@ -711,7 +762,7 @@ interface LogoItem {
     name: string;
     url: string;
 }
-interface PaymentMethodsProps extends HTMLAttributes<HTMLElement> {
+interface LogoMarqueeProps extends HTMLAttributes<HTMLElement> {
     headline?: string;
     body?: string;
     disclaimer?: string;
@@ -730,6 +781,86 @@ declare const TEXT_CONTENT: {
     ctaLabel: string;
     ctaHref: string;
 };
-declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
+declare const LogoMarquee: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: LogoMarqueeProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBadgePlatform = "googleplay" | "appstore" | "appgallery" | "windows" | "macos" | "linux" | "web";
+type DownloadBadgeColorScheme = "light" | "dark";
+interface DownloadBadgeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Which platform badge to render */
+    platform: DownloadBadgePlatform;
+    /**
+     * Colour scheme — use "light" on light backgrounds, "dark" on dark backgrounds.
+     * @default "light"
+     */
+    colorScheme?: DownloadBadgeColorScheme;
+    /** Destination URL */
+    href?: string;
+}
+
+declare const DownloadBadge: ({ platform, colorScheme, href, className, ...props }: DownloadBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type StepsImagePosition = "left" | "right";
+interface StepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
+interface StepsProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Ordered list of steps */
+    steps: StepItem[];
+    /** Image source URL */
+    image?: string;
+    /** Accessible alt text for the image */
+    imageAlt?: string;
+    /**
+     * Which side the image sits on (default: "left").
+     * On mobile the image always stacks above the content.
+     */
+    imagePosition?: StepsImagePosition;
+}
+
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBannerStyle = "light" | "light-2" | "dark";
+interface DownloadBannerProps {
+    /**
+     * Visual style of the inner card.
+     * - "light"   → slate-100 outer section, white inner card
+     * - "light-2" → white outer section, slate-100 inner card (default)
+     * - "dark"    → white outer section, slate-1200 inner card
+     */
+    style?: DownloadBannerStyle;
+    /** QR code image URL. When provided the QR block is shown on desktop. */
+    qrCodeImage?: string;
+    /** Accessible alt text for the QR code image */
+    qrCodeAlt?: string;
+    /** First line of text beside the QR code (default: "Scan to download") */
+    qrTitle?: string;
+    /** Second line of text beside the QR code (default: "Android & iOS") */
+    qrSubtitle?: string;
+    /** Heading shown on mobile above the badge grid (default: "Available on") */
+    mobileTitle?: string;
+    showAppStore?: boolean;
+    showGooglePlay?: boolean;
+    showAppGallery?: boolean;
+    showWindows?: boolean;
+    showMacOS?: boolean;
+    showLinux?: boolean;
+    showWeb?: boolean;
+    appStoreHref?: string;
+    googlePlayHref?: string;
+    appGalleryHref?: string;
+    windowsHref?: string;
+    macOSHref?: string;
+    linuxHref?: string;
+    webHref?: string;
+    /** Optional small-print disclaimer shown below the QR text */
+    disclaimer?: string;
+}
+
+declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
+export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type ButtonColorScheme = "coral" | "black" | "white";
 type ButtonVariant = "primary" | "secondary";
@@ -279,6 +280,26 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+interface FeatureCardSecondaryItem {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsSecondaryProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    cards: FeatureCardSecondaryItem[];
+}
+
+declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+
 interface FooterLinkItem {
     /** Link label text */
     label: string;
@@ -387,7 +408,7 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
 
 declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-type HeroVariant = "homepage" | "full-image" | "visuals" | "text-only";
+type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -399,10 +420,13 @@ interface HeroButtonProps {
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant:
-     * - "homepage"   — dark bg, left-aligned text, right-side hero image, 100vh
-     * - "full-image" — full background image, center-aligned text, 100vh
-     * - "visuals"    — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "text-only"  — same as visuals but without floating graphics
+     *
+     * - "split"    — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "centered" — full background image, center-aligned text, 100vh
+     * - "showcase" — dark bg + full-bleed bg image, center-aligned text, large product image
+     *                below buttons, smaller floating image below that.
+     * - "visuals"  — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
+     * - "minimal"  — same as visuals but without floating graphics
      */
     variant: HeroVariant;
     /** Optional eyebrow / subtitle above the title */
@@ -418,33 +442,44 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Homepage and Full Image variants.
+     * Shown on Split, Centered and Showcase variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "homepage"   — used as the full-bleed background behind the overlay
-     * - "full-image" — used as the full-bleed background behind the overlay
+     * - "split"    — used as the full-bleed background behind the overlay
+     * - "centered" — used as the full-bleed background behind the overlay
+     * - "showcase" — used as the full-bleed background behind the overlay
      */
     backgroundImageSrc?: string;
     /**
-     * Right-side hero image for the Homepage variant.
+     * Right-side hero image for the Split variant.
      * Accepts a ReactNode (e.g. <img>) or an image URL string.
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant (desktop only).
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     leftVisual?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant (desktop only).
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     rightVisual?: ReactNode | string;
+    /**
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    productImage?: ReactNode | string;
+    /**
+     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    floatingImage?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -482,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
 
 declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
 
-interface ScrollytellingItem {
-    /** Short market name, e.g. "Forex" */
+interface FeatureScrollItem {
+    /** Short feature name, e.g. "Forex" */
     title: string;
     /** Body copy below the title */
     description: string;
@@ -501,14 +536,14 @@ interface ScrollytellingItem {
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
 }
-interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
+interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
     header: string;
     /**
-     * Ordered list of market items.
-     * Drives both the desktop scrollytelling and the mobile stacked layout.
+     * Ordered list of feature items.
+     * Drives both the desktop scroll-driven layout and the mobile stacked layout.
      */
-    items: ScrollytellingItem[];
+    items: FeatureScrollItem[];
     /**
      * Controls which side the sticky media column sits on.
      * @default "media-right"
@@ -516,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
     variant?: "media-left" | "media-right";
 }
 
-declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
-declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
+declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
+declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+
+type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
+    /**
+     * When false, playback is stopped (e.g. inactive slide in a stacked player).
+     * When true, plays once whenever the instance is both enabled and intersecting.
+     */
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+/**
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
+ * (e.g. hidden slides) without relying on geometry alone.
+ */
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";
@@ -711,7 +762,7 @@ interface LogoItem {
     name: string;
     url: string;
 }
-interface PaymentMethodsProps extends HTMLAttributes<HTMLElement> {
+interface LogoMarqueeProps extends HTMLAttributes<HTMLElement> {
     headline?: string;
     body?: string;
     disclaimer?: string;
@@ -730,6 +781,86 @@ declare const TEXT_CONTENT: {
     ctaLabel: string;
     ctaHref: string;
 };
-declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
+declare const LogoMarquee: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: LogoMarqueeProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBadgePlatform = "googleplay" | "appstore" | "appgallery" | "windows" | "macos" | "linux" | "web";
+type DownloadBadgeColorScheme = "light" | "dark";
+interface DownloadBadgeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Which platform badge to render */
+    platform: DownloadBadgePlatform;
+    /**
+     * Colour scheme — use "light" on light backgrounds, "dark" on dark backgrounds.
+     * @default "light"
+     */
+    colorScheme?: DownloadBadgeColorScheme;
+    /** Destination URL */
+    href?: string;
+}
+
+declare const DownloadBadge: ({ platform, colorScheme, href, className, ...props }: DownloadBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type StepsImagePosition = "left" | "right";
+interface StepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
+interface StepsProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Ordered list of steps */
+    steps: StepItem[];
+    /** Image source URL */
+    image?: string;
+    /** Accessible alt text for the image */
+    imageAlt?: string;
+    /**
+     * Which side the image sits on (default: "left").
+     * On mobile the image always stacks above the content.
+     */
+    imagePosition?: StepsImagePosition;
+}
+
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBannerStyle = "light" | "light-2" | "dark";
+interface DownloadBannerProps {
+    /**
+     * Visual style of the inner card.
+     * - "light"   → slate-100 outer section, white inner card
+     * - "light-2" → white outer section, slate-100 inner card (default)
+     * - "dark"    → white outer section, slate-1200 inner card
+     */
+    style?: DownloadBannerStyle;
+    /** QR code image URL. When provided the QR block is shown on desktop. */
+    qrCodeImage?: string;
+    /** Accessible alt text for the QR code image */
+    qrCodeAlt?: string;
+    /** First line of text beside the QR code (default: "Scan to download") */
+    qrTitle?: string;
+    /** Second line of text beside the QR code (default: "Android & iOS") */
+    qrSubtitle?: string;
+    /** Heading shown on mobile above the badge grid (default: "Available on") */
+    mobileTitle?: string;
+    showAppStore?: boolean;
+    showGooglePlay?: boolean;
+    showAppGallery?: boolean;
+    showWindows?: boolean;
+    showMacOS?: boolean;
+    showLinux?: boolean;
+    showWeb?: boolean;
+    appStoreHref?: string;
+    googlePlayHref?: string;
+    appGalleryHref?: string;
+    windowsHref?: string;
+    macOSHref?: string;
+    linuxHref?: string;
+    webHref?: string;
+    /** Optional small-print disclaimer shown below the QR text */
+    disclaimer?: string;
+}
+
+declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
+export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };