@deriv-web-design/ui 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -581,10 +581,16 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Override the default avatar array */
     avatars?: AvatarItem[];
+    /**
+     * Layout variant.
+     * - `standard` (default): 12 avatars, taller section (864px desktop)
+     * - `compact`: 7 avatars, section height matches stage (680px desktop)
+     */
+    variant?: "standard" | "compact";
 }
 
 declare const AVATAR_DATA: AvatarItem[];
-declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
+declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */

package/dist/index.d.ts

@@ -581,10 +581,16 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Override the default avatar array */
     avatars?: AvatarItem[];
+    /**
+     * Layout variant.
+     * - `standard` (default): 12 avatars, taller section (864px desktop)
+     * - `compact`: 7 avatars, section height matches stage (680px desktop)
+     */
+    variant?: "standard" | "compact";
 }
 
 declare const AVATAR_DATA: AvatarItem[];
-declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
+declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */

package/dist/index.js

@@ -1981,153 +1981,240 @@ var SPRING = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var LOCK_AT = 0.5;
 var PLACEHOLDER_URL = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/68da5c86c91c54f39c86ce1a_footer-member-5.webp";
 var AVATAR_DATA = [
-  /* ── Rank 0 — bottom-centre-ish (dist ≈ 285) ─── */
+  /* ── Rank 0 — top-centre (col 6, row 1) ─────── */
   {
-    id: 11,
+    id: 12,
     staggerRank: 0,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "45.7%", top: "84.9%" },
-    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "81.8%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 6)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobileVisible: true
   },
-  /* ── Rank 1 — top-centre (dist ≈ 293) ────────── */
+  /* ── Rank 1 — bot-centre (col 6, row 7) ─────── */
   {
-    id: 12,
+    id: 11,
     staggerRank: 1,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "0%" },
-    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "9.2%" },
-    mobileVisible: true
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 6)", top: "calc(var(--ctab-grid-cell) * 7)" },
+    mobilePos: null,
+    mobileVisible: false
   },
-  /* ── Rank 2 — right mid-lower (dist ≈ 341) ───── */
+  /* ── Rank 2 — upper-inner-left (col 3, row 2) ── */
   {
-    id: 10,
+    id: 3,
     staggerRank: 2,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "68.5%", top: "70.7%" },
-    mobilePos: null,
-    mobileVisible: false
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 3)", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
   },
-  /* ── Rank 3 — left mid-lower (dist ≈ 342) ────── */
+  /* ── Rank 3 — upper-inner-right (col 9, row 2) ── */
   {
-    id: 1,
+    id: 6,
     staggerRank: 3,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "24.0%", top: "70.7%" },
-    mobilePos: null,
-    mobileVisible: false
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 9)", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
   },
-  /* ── Rank 4 — left upper (dist ≈ 345) ────────── */
+  /* ── Rank 4 — lower-inner-left (col 3, row 6) ── */
   {
-    id: 3,
+    id: 1,
     staggerRank: 4,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "24.0%", top: "14.4%" },
-    mobilePos: { left: "8.3%", top: "18.2%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 3)", top: "calc(var(--ctab-grid-cell) * 6)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 9)" },
     mobileVisible: true
   },
-  /* ── Rank 5 — right upper (dist ≈ 345) ───────── */
+  /* ── Rank 5 — lower-inner-right (col 9, row 6) ── */
   {
-    id: 6,
+    id: 10,
     staggerRank: 5,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "68.5%", top: "14.4%" },
-    mobilePos: { right: "7.8%", top: "18.3%" },
-    mobileVisible: true
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 9)", top: "calc(var(--ctab-grid-cell) * 6)" },
+    mobilePos: null,
+    mobileVisible: false
   },
-  /* ── Rank 6 — far-right middle (dist ≈ 572) ──── */
+  /* ── Rank 6 — mid-left (col 0, row 4) ──────── */
   {
-    id: 8,
+    id: 5,
     staggerRank: 6,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "43.0%" },
-    mobilePos: { right: "7.8%", top: "77.2%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 4)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
     mobileVisible: true
   },
-  /* ── Rank 7 — far-left middle (dist ≈ 577) ───── */
+  /* ── Rank 7 — mid-right (col 12, row 4) ────── */
   {
-    id: 5,
+    id: 8,
     staggerRank: 7,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "43.0%" },
-    mobilePos: { left: "8.6%", top: "72.8%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 4)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
     mobileVisible: true
   },
-  /* ── Rank 8 — far-right bottom (dist ≈ 639) ──── */
+  /* ── Rank 8 — top-left corner (col 0, row 1) ── */
   {
-    id: 9,
+    id: 4,
     staggerRank: 8,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "84.9%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 9 — far-right top (dist ≈ 642) ─────── */
+  /* ── Rank 9 — top-right corner (col 12, row 1) ── */
   {
     id: 7,
     staggerRank: 9,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "0%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 10 — far-left bottom (dist ≈ 643) ──── */
+  /* ── Rank 10 — bot-left corner (col 0, row 7) ── */
   {
     id: 2,
     staggerRank: 10,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "84.9%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 7)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 11 — far-left top (dist ≈ 647) ─────── */
+  /* ── Rank 11 — bot-right corner (col 12, row 7) ── */
   {
-    id: 4,
+    id: 9,
     staggerRank: 11,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "0%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 7)" },
+    mobilePos: null,
+    mobileVisible: false
+  }
+];
+var COMPACT_AVATAR_DATA = [
+  /* ── Rank 0 — top-centre (col ~6, row 1) ── */
+  {
+    id: 12,
+    staggerRank: 0,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobileVisible: true
+  },
+  /* ── Rank 1 — top-left (col 2, row 1) ───── */
+  {
+    id: 3,
+    staggerRank: 1,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
+  },
+  /* ── Rank 2 — top-right (col 10, row 1) ─── */
+  {
+    id: 6,
+    staggerRank: 2,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 10)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
+  },
+  /* ── Rank 3 — mid-left (col 0, row 3) ────── */
+  {
+    id: 5,
+    staggerRank: 3,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 3)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
+    mobileVisible: true
+  },
+  /* ── Rank 4 — mid-right (col 12, row 3) ──── */
+  {
+    id: 8,
+    staggerRank: 4,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 3)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
+    mobileVisible: true
+  },
+  /* ── Rank 5 — bot-left (col 2, row 5) ────── */
+  {
+    id: 1,
+    staggerRank: 5,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 2)", top: "calc(var(--ctab-grid-cell) * 5)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 9)" },
+    mobileVisible: true
+  },
+  /* ── Rank 6 — bot-right (col 10, row 5) — desktop only ─── */
+  {
+    id: 11,
+    staggerRank: 6,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 10)", top: "calc(var(--ctab-grid-cell) * 5)" },
     mobilePos: null,
     mobileVisible: false
   }
 ];
 function useAvatarYValues(smooth) {
-  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.near, 0]);
-  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
-  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
-  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
+  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.near, 0]);
+  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
   const y6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
   const y7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
-  const y8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const y8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const y9 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const y10 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
-  const y11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const y11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   return [y0, y1, y2, y3, y4, y5, y6, y7, y8, y9, y10, y11];
 }
 function useAvatarXValues(smooth) {
   const x0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
   const x1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
-  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
   const x4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
   const x5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
-  const x7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
-  const x8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
+  const x7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const x9 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   const x10 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
-  const x11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const x11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   return [x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11];
 }
+function useCompactAvatarYValues(smooth) {
+  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
+  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  return [y0, y1, y2, y3, y4, y5, y6];
+}
+function useCompactAvatarXValues(smooth) {
+  const x0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const x1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
+  const x4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  return [x0, x1, x2, x3, x4, x5, x6];
+}
 var CTABanner = ({
-  headline = "Join 3M+ global traders",
+  headline = "Short section title goes here",
   ctaLabel = "Open account",
   ctaHref = "#",
-  avatars = AVATAR_DATA,
+  avatars,
+  variant = "standard",
   className,
   ...props
 }) => {
+  const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
   const sectionRef = (0, import_react11.useRef)(null);
   const { scrollYProgress } = (0, import_framer_motion.useScroll)({
     target: sectionRef,
@@ -2140,13 +2227,17 @@ var CTABanner = ({
   const avatarOpacity = (0, import_framer_motion.useTransform)(smooth, [0, 0.25], [0, 1]);
   const blurPx = (0, import_framer_motion.useTransform)(smooth, [0, 0.3, 0.7, 1], [ENTRANCE.blurStart, 0, 0, ENTRANCE.blurStart]);
   const avatarFilter = import_framer_motion.useMotionTemplate`blur(${blurPx}px)`;
-  const avatarYValues = useAvatarYValues(smooth);
-  const avatarXValues = useAvatarXValues(smooth);
+  const standardYValues = useAvatarYValues(smooth);
+  const standardXValues = useAvatarXValues(smooth);
+  const compactYValues = useCompactAvatarYValues(smooth);
+  const compactXValues = useCompactAvatarXValues(smooth);
+  const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
+  const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "section",
     {
       ref: sectionRef,
-      className: ["ctab", className].filter(Boolean).join(" "),
+      className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2158,7 +2249,7 @@ var CTABanner = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ctab__stage", children: [
-          avatars.map((avatar, index) => {
+          resolvedAvatars.map((avatar, index) => {
             const posStyle = {};
             if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
             if (avatar.desktopPos.right) posStyle["--av-d-right"] = avatar.desktopPos.right;
@@ -2200,7 +2291,7 @@ var CTABanner = ({
               style: { y: heroY, opacity: heroOpacity },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ctab__headline", children: headline }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ctaHref, className: "ctab__btn", children: ctaLabel })
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ctaHref, className: "ctab__cta", children: ctaLabel })
               ]
             }
           )