@affinda/wc 0.0.11 → 0.0.12

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js

@@ -0,0 +1,209 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Feature accordion component with expandable items and accompanying image
+ * Used for showcasing product features with visual examples
+ * Features auto-cycling through items with a progress timer
+ */
+export class AfFeatureAccordion {
+    constructor() {
+        /** Section heading */
+        this.heading = 'Give AI agents your paperwork';
+        /** JSON string of accordion items */
+        this.items = '[]';
+        /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */
+        this.cycleInterval = 6000;
+        /** Whether auto-cycling is enabled */
+        this.autoCycle = true;
+        /** Currently expanded item index */
+        this.expandedIndex = 0;
+        /** Progress of current timer (0-100) */
+        this.timerProgress = 100;
+        this.progressTimer = null;
+        this.progressStartTime = 0;
+    }
+    componentDidLoad() {
+        if (this.autoCycle) {
+            this.startCycling();
+        }
+    }
+    disconnectedCallback() {
+        this.stopCycling();
+    }
+    handleAutoCycleChange(newValue) {
+        if (newValue) {
+            this.startCycling();
+        }
+        else {
+            this.stopCycling();
+        }
+    }
+    getItems() {
+        try {
+            return JSON.parse(this.items);
+        }
+        catch {
+            return [];
+        }
+    }
+    startCycling() {
+        this.stopCycling();
+        this.progressStartTime = Date.now();
+        this.timerProgress = 100;
+        // Progress animation frame
+        const updateProgress = () => {
+            const elapsed = Date.now() - this.progressStartTime;
+            const remaining = this.cycleInterval - elapsed;
+            if (remaining <= 0) {
+                this.moveToNextItem();
+            }
+            else {
+                this.timerProgress = (remaining / this.cycleInterval) * 100;
+                this.progressTimer = requestAnimationFrame(updateProgress);
+            }
+        };
+        this.progressTimer = requestAnimationFrame(updateProgress);
+    }
+    stopCycling() {
+        if (this.progressTimer) {
+            cancelAnimationFrame(this.progressTimer);
+            this.progressTimer = null;
+        }
+    }
+    moveToNextItem() {
+        const items = this.getItems();
+        if (items.length === 0)
+            return;
+        this.expandedIndex = (this.expandedIndex + 1) % items.length;
+        // Restart the cycling timer for the new item
+        this.startCycling();
+    }
+    handleItemClick(index) {
+        // Reset timer when user clicks
+        this.expandedIndex = index;
+        // Restart the cycling timer for the clicked item
+        if (this.autoCycle) {
+            this.startCycling();
+        }
+    }
+    render() {
+        const items = this.getItems();
+        const currentItem = items[this.expandedIndex];
+        return (h(Host, { key: '7825aa3ce7bc01d0a2ca8d9bda5b8198aa76271c' }, h("div", { key: '0f6256791b7f0df695b73fbbfac13062441efe5d', class: "feature-accordion" }, h("div", { key: '325051f2986b59513be4911ebb74ea07e06d51aa', class: "feature-accordion__container" }, h("h2", { key: '03d56b844bb0683030cf180ad73c861411be6d97', class: "feature-accordion__heading" }, this.heading), h("div", { key: '3016a08061e853af3886c147f1cdead2e275da47', class: "feature-accordion__content" }, h("div", { key: '2810385a3c67d49dc4a7c5516aa88764c31cea38', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+                'accordion-item': true,
+                'accordion-item--expanded': this.expandedIndex === index
+            }, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon" }, this.expandedIndex === index ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), h("div", { class: "accordion-item__content", style: {
+                maxHeight: this.expandedIndex === index ? '200px' : '0',
+                opacity: this.expandedIndex === index ? '1' : '0'
+            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '91407477630dfe4287aa84750a3ec344d4d929fe', class: "feature-accordion__image-container" }, h("div", { key: '5a5f537b6e38f250ed821e0dfaecf059e88e4251', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'e974ce7cc07d28768447a106eeb7f714e93069a9', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '4e0e981e30d9ad3a10048715f71681dfacff76b4', class: "feature-accordion__image-placeholder" }, h("slot", { key: 'c98c9302c6fdd0db75b63ae20a56273bf64638b6', name: "image" }))))))))));
+    }
+    static get is() { return "af-feature-accordion"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-feature-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-feature-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Give AI agents your paperwork'"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string of accordion items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "'[]'"
+            },
+            "cycleInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cycle-interval",
+                "defaultValue": "6000"
+            },
+            "autoCycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether auto-cycling is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-cycle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expandedIndex": {},
+            "timerProgress": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoCycle",
+                "methodName": "handleAutoCycleChange"
+            }];
+    }
+}
+//# sourceMappingURL=af-feature-accordion.js.map

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-feature-accordion.js","sourceRoot":"","sources":["../../../src/components/af-feature-accordion/af-feature-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAShF;;;;GAIG;AAOH,MAAM,OAAO,kBAAkB;IAN/B;QASE,sBAAsB;QACd,YAAO,GAAW,+BAA+B,CAAC;QAE1D,qCAAqC;QAC7B,UAAK,GAAW,IAAI,CAAC;QAE7B,wEAAwE;QAChE,kBAAa,GAAW,IAAI,CAAC;QAErC,sCAAsC;QAC9B,cAAS,GAAY,IAAI,CAAC;QAElC,oCAAoC;QAC3B,kBAAa,GAAW,CAAC,CAAC;QAEnC,wCAAwC;QAC/B,kBAAa,GAAW,GAAG,CAAC;QAE7B,kBAAa,GAAkB,IAAI,CAAC;QACpC,sBAAiB,GAAW,CAAC,CAAC;KA8JvC;IA5JC,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,qBAAqB,CAAC,QAAiB;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QAEzB,2BAA2B;QAC3B,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACpD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;YAE/C,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,CAAC;gBAC5D,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;IAC7D,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7D,6CAA6C;QAC7C,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,+BAA+B;QAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,iDAAiD;QACjD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,8BAA8B;oBACvC,2DAAI,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAM;oBAE1D,4DAAK,KAAK,EAAC,4BAA4B;wBAErC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,WACE,KAAK,EAAE;gCACL,gBAAgB,EAAE,IAAI;gCACtB,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;6BACzD,EACD,GAAG,EAAE,KAAK;4BAEV,cACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,mBAC3B,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gCAE9D,UAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM;gCACnD,YAAM,KAAK,EAAC,sBAAsB,IAC/B,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,CAC9B,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oCAC5F,YAAM,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAE,CAC9E,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oCAC5F,YAAM,CAAC,EAAC,kBAAkB,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAE,CACtF,CACP,CACI,CACA;4BACT,WACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;oCACL,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;oCACvD,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;iCAClD;gCAED,SAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,WAAW,CAAK;gCAC5D,IAAI,CAAC,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,CACjD,WAAK,KAAK,EAAC,6BAA6B;oCACtC,WACE,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,GACrC,CACH,CACP,CACG,CACF,CACP,CAAC,CACE;wBAGN,4DAAK,KAAK,EAAC,oCAAoC;4BAC7C,4DAAK,KAAK,EAAC,kCAAkC;gCAC1C,WAAW,EAAE,QAAQ,IAAI,CACxB,4DACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,GAAG,EAAE,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,EAC9C,KAAK,EAAC,0BAA0B,GAChC,CACH;gCACA,CAAC,WAAW,EAAE,QAAQ,IAAI,CACzB,4DAAK,KAAK,EAAC,sCAAsC;oCAC/C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACF,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n  title: string;\n  description: string;\n  imageUrl?: string;\n  imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image\n * Used for showcasing product features with visual examples\n * Features auto-cycling through items with a progress timer\n */\n@Component({\n  tag: 'af-feature-accordion',\n  styleUrl: 'af-feature-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureAccordion {\n  @Element() el!: HTMLElement;\n\n  /** Section heading */\n  @Prop() heading: string = 'Give AI agents your paperwork';\n\n  /** JSON string of accordion items */\n  @Prop() items: string = '[]';\n\n  /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n  @Prop() cycleInterval: number = 6000;\n\n  /** Whether auto-cycling is enabled */\n  @Prop() autoCycle: boolean = true;\n\n  /** Currently expanded item index */\n  @State() expandedIndex: number = 0;\n\n  /** Progress of current timer (0-100) */\n  @State() timerProgress: number = 100;\n\n  private progressTimer: number | null = null;\n  private progressStartTime: number = 0;\n\n  componentDidLoad() {\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopCycling();\n  }\n\n  @Watch('autoCycle')\n  handleAutoCycleChange(newValue: boolean) {\n    if (newValue) {\n      this.startCycling();\n    } else {\n      this.stopCycling();\n    }\n  }\n\n  private getItems(): FeatureAccordionItem[] {\n    try {\n      return JSON.parse(this.items);\n    } catch {\n      return [];\n    }\n  }\n\n  private startCycling() {\n    this.stopCycling();\n    this.progressStartTime = Date.now();\n    this.timerProgress = 100;\n    \n    // Progress animation frame\n    const updateProgress = () => {\n      const elapsed = Date.now() - this.progressStartTime;\n      const remaining = this.cycleInterval - elapsed;\n      \n      if (remaining <= 0) {\n        this.moveToNextItem();\n      } else {\n        this.timerProgress = (remaining / this.cycleInterval) * 100;\n        this.progressTimer = requestAnimationFrame(updateProgress);\n      }\n    };\n    \n    this.progressTimer = requestAnimationFrame(updateProgress);\n  }\n\n  private stopCycling() {\n    if (this.progressTimer) {\n      cancelAnimationFrame(this.progressTimer);\n      this.progressTimer = null;\n    }\n  }\n\n  private moveToNextItem() {\n    const items = this.getItems();\n    if (items.length === 0) return;\n    \n    this.expandedIndex = (this.expandedIndex + 1) % items.length;\n    // Restart the cycling timer for the new item\n    this.startCycling();\n  }\n\n  private handleItemClick(index: number) {\n    // Reset timer when user clicks\n    this.expandedIndex = index;\n    // Restart the cycling timer for the clicked item\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  render() {\n    const items = this.getItems();\n    const currentItem = items[this.expandedIndex];\n\n    return (\n      <Host>\n        <div class=\"feature-accordion\">\n          <div class=\"feature-accordion__container\">\n            <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n            \n            <div class=\"feature-accordion__content\">\n              {/* Left side - Accordion */}\n              <div class=\"feature-accordion__list\">\n                {items.map((item, index) => (\n                  <div \n                    class={{\n                      'accordion-item': true,\n                      'accordion-item--expanded': this.expandedIndex === index\n                    }}\n                    key={index}\n                  >\n                    <button \n                      class=\"accordion-item__header\"\n                      onClick={() => this.handleItemClick(index)}\n                      aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n                    >\n                      <h4 class=\"accordion-item__title\">{item.title}</h4>\n                      <span class=\"accordion-item__icon\">\n                        {this.expandedIndex === index ? (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        ) : (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    </button>\n                    <div \n                      class=\"accordion-item__content\"\n                      style={{ \n                        maxHeight: this.expandedIndex === index ? '200px' : '0',\n                        opacity: this.expandedIndex === index ? '1' : '0'\n                      }}\n                    >\n                      <p class=\"accordion-item__description\">{item.description}</p>\n                      {this.expandedIndex === index && this.autoCycle && (\n                        <div class=\"accordion-item__timer-track\">\n                          <div \n                            class=\"accordion-item__timer-progress\"\n                            style={{ width: `${this.timerProgress}%` }}\n                          ></div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n\n              {/* Right side - Image */}\n              <div class=\"feature-accordion__image-container\">\n                <div class=\"feature-accordion__image-wrapper\">\n                  {currentItem?.imageUrl && (\n                    <img \n                      src={currentItem.imageUrl} \n                      alt={currentItem.imageAlt || currentItem.title}\n                      class=\"feature-accordion__image\"\n                    />\n                  )}\n                  {!currentItem?.imageUrl && (\n                    <div class=\"feature-accordion__image-placeholder\">\n                      <slot name=\"image\"></slot>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-hero-section/af-hero-section.js

@@ -12,7 +12,7 @@ export class AfHeroSection {
         this.minHeight = '60vh';
     }
     render() {
-        return (h(Host, { key: '85061979e5f4d2a766574cbc355e2f833160050b' }, h("div", { key: 'f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6', class: "hero-decoration" }, h("slot", { key: 'f8c629d60b6fbb0627e0720967bbc5bfeecbfecd', name: "decoration" }))), h("af-container", { key: '07ed025ef1b11880896a0ca72916592f4b36dddf' }, h("div", { key: 'dbe586394c6e10ed672d12326e21832376661ed1', class: "hero-content" }, h("slot", { key: 'd3906e6fd0bdb1439df2c4e6b48e090472bcc2e5' }))))));
+        return (h(Host, { key: '632fa6929a3cfbf9cc563419289bf794f95c7579' }, h("div", { key: 'a69a52476a7e891e9b78a00dcd40c53ec9b93977', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '50514445b760b9b8c00b7605409431799caef0a8', class: "hero-decoration" }, h("slot", { key: 'd46b422d9e9f0f2a62dc02e3f2d7f0c497e4eb3c', name: "decoration" }))), h("af-container", { key: 'd4bf7bd11a621ce964aa9c502010b5d585cc54db' }, h("div", { key: '0c9d2e67f747fc58e394b9d8e7255a542625b8bd', class: "hero-content" }, h("slot", { key: '82e132764ad876f796ca2b94787be349ccffdcf3' }))))));
     }
     static get is() { return "af-hero-section"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-logo-well/af-logo-well.css

@@ -3,25 +3,40 @@
 }
 
 .logo-well {
-  background: var(--colour-tints-inkwell-600, #1A3038);
+  background: rgb(32, 62, 69); /* Slightly lighter than inkwell for contrast */
   border-radius: 16px;
-  height: 88px;
+  height: 72px;
+  width: 184px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 40px;
+  padding: 20px 32px;
   box-sizing: border-box;
-  min-width: 120px;
 }
 
 ::slotted(img) {
-  max-height: 40px;
+  max-height: 32px;
+  max-width: 120px;
   width: auto;
+  height: auto;
   display: block;
+  object-fit: contain;
   filter: brightness(0) invert(1); /* Make logos white */
 }
 
+::slotted(svg) {
+  max-height: 32px;
+  max-width: 120px;
+  width: auto;
+  height: auto;
+  display: block;
+}
+
 ::slotted(div) {
   white-space: nowrap;
+  color: white;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 600;
+  font-size: 16px;
 }
 

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: '6443fda91c37fd9f2efd49fbd10b1899f311cd54' }, h("div", { key: '30ec1e2891dfd89af7cc310986d3c5c48e05c556', class: "logo-well" }, h("slot", { key: '4601797d3cef6ed117dc6c93083652dd22f51f05' }))));
+        return (h(Host, { key: 'a890852e16b4e6cc849102c3a172c5049c86da4b' }, h("div", { key: '54935155d4cc9f30519252017c6c23b62aabd009', class: "logo-well" }, h("slot", { key: '5cf33bdb4332eb25a653d443f21f2fc4505473fa' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-navbar/af-navbar.css

@@ -22,6 +22,7 @@
   justify-content: space-between;
   padding: 8px 8px 8px 40px;
   box-sizing: border-box;
+  flex-wrap: nowrap; /* Prevent wrapping */
 }
 
 /* Left section */
@@ -29,6 +30,7 @@
   display: flex;
   align-items: center;
   gap: 32px;
+  flex-shrink: 0;
 }
 
 .logo {
@@ -56,6 +58,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: nowrap;
 }
 
 /* Right section */
@@ -63,6 +66,7 @@
   display: flex;
   align-items: center;
   gap: 20px;
+  flex-shrink: 0;
 }
 
 .nav-actions {
@@ -76,6 +80,21 @@
   align-items: center;
 }
 
+/* 
+ * Breakpoint 1: Hide "Talk to us" and "Log in" (nav-actions) 
+ * This happens first as the viewport gets narrower
+ * Matches affinda.com behavior at ~1100px
+ */
+@media (max-width: 1099px) {
+  .nav-actions {
+    display: none;
+  }
+  
+  .navbar-right {
+    gap: 0;
+  }
+}
+
 /* Tablet adjustments */
 @media (max-width: 1024px) {
   .navbar-container {
@@ -91,8 +110,11 @@
   }
 }
 
-/* Mobile adjustments */
-@media (max-width: 767px) {
+/* 
+ * Breakpoint 2: Switch to hamburger menu
+ * Matches affinda.com behavior at 991px
+ */
+@media (max-width: 991px) {
   .navbar-container {
     padding: 16px 16px 0;
   }
@@ -102,6 +124,7 @@
     flex-direction: column;
     border-radius: 16px;
     gap: 0;
+    flex-wrap: wrap; /* Allow wrapping in mobile menu */
   }
 
   .navbar-left {
@@ -125,6 +148,7 @@
     align-items: stretch;
     gap: 0;
     margin-top: 16px;
+    flex-wrap: wrap;
   }
 
   /* Show nav links when menu is open */
@@ -147,7 +171,9 @@
     display: flex;
   }
 
+  /* Show nav-actions again in mobile menu */
   .nav-actions {
+    display: flex;
     width: 100%;
     flex-direction: column;
     align-items: stretch;

package/dist/collection/components/af-section/af-section.js

@@ -12,8 +12,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: '269517d1852d1e459db9dc2673b88b4d8042f61b' });
-        return (h(Host, { key: 'a080f296f2f7178db29e973cce05048847e66c83' }, h("div", { key: '54bdca28715bdd18e38d85e2ed95a5699f793d3e', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '3c8c5e1b316afac68685fe32f512fadac62e00f7' });
+        return (h(Host, { key: '343991533b792f1c78e65eab65420a206bdfcfbc' }, h("div", { key: 'a2efe0c402b515e4160309dce5356e79b69f9677', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-testimonial/af-testimonial.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class AfTestimonial {
     render() {
-        return (h(Host, { key: 'b4a23c841092c119b7e8abd4249b75985f8edf95' }, h("div", { key: '65fec4f695a746ef51d4539b33dc166d4f1cb95c', class: "testimonial-card" }, h("div", { key: 'ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '4e51da94bd106ae50c63186c7cbedee3e86d341e', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e', class: "testimonial-logo" }, h("img", { key: '5f2225a849003d6b4b5ccc08073da121e3d27cf4', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9e6dbb02f4d87829af74c66029bd93ce3f3c65dd', class: "testimonial-content" }, h("div", { key: 'efd25f8dc722d79006835406a972da0d5fd7f77f', class: "testimonial-quote-section" }, h("div", { key: '46064d44eeed1712130c6c24007f5481b9cc3cf7', class: "testimonial-quote-icon" }, h("slot", { key: 'e1389d94a5cbb1181862963fd799d7c14b2d3ee5', name: "quote-icon" }, h("svg", { key: '6a935e48920b1964036f02fbc830b1319a20f057', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf0de3883bdf5a39cd377591ec34a02d75afd39c', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: 'db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9', class: "testimonial-text" }, this.quote), h("p", { key: 'ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '8042208ced311c39c8d91968ac1bc37c76971ec1', class: "testimonial-stats" }, h("slot", { key: 'b5c40fdb83b6776b2de0a57e37045a1fde50e78f', name: "stats" })), h("div", { key: '1b19fc1264136cf90cb0c32841678129f5dd711d', class: "testimonial-footer" }, h("div", { key: '77058648a8e25ed63b622c7bbf873c299e39e42d', class: "testimonial-nav" }, h("slot", { key: '9231316a8dd17ae30c754e1ff1ba9ea70c327c82', name: "navigation" })), this.readMoreLink && (h("a", { key: '01072189417f44da780b5c5a8849e9e66a2a9b0d', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '8c5008a42d4c4160bb4950f562872a67ac26c15c' }, "Read full story"), h("svg", { key: '881176b723a0f4c3d941d2be0f8983ddc0468ee6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd8fd8469aa2c45286891751b269c692ee90426c0', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+        return (h(Host, { key: '140eb69f7306717ae75d38b838fc58b1122fff56' }, h("div", { key: '1a54c4603fae73894796e62cb7cc83d9a96b7d12', class: "testimonial-card" }, h("div", { key: 'eb0df92d60f8d307a10982bd70e9d97705b57585', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '0a6b9005a96e42e9dd6b0664ada910c12ab6bbe9', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '0ba830a85ef37b0f3c01d386fcd916272264e9fa', class: "testimonial-logo" }, h("img", { key: '275dec6170c69349a41f44f325ec0214c219de02', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'f24c19c3a46c7007ed15a3ebd1794ff8023822fc', class: "testimonial-content" }, h("div", { key: 'd3559ba097b0eac517fa05079c27505a24cb1832', class: "testimonial-quote-section" }, h("div", { key: '1d8851985509ac43c88e375194adf1441c4e119d', class: "testimonial-quote-icon" }, h("slot", { key: 'a666ea9b0fa13fb8d4d853a61f1ac449af66469a', name: "quote-icon" }, h("svg", { key: '3e2df27c9a8f2d2bc20ad4aef45459235efab2b9', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd77d4c447cf53c3ce3890342356f476332d309f9', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '342293249e60e142db1d13541c1cdee5b5e0adc0', class: "testimonial-text" }, this.quote), h("p", { key: '68ff2c4e99403f533877f30829c58bd30029d8bb', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'c3a810a398d0c2ae23a81cec50862bd036816115', class: "testimonial-stats" }, h("slot", { key: '798b98ca93deaff16c71e80bc82aabc1394ae3e7', name: "stats" })), h("div", { key: 'cb194830eb8bcdb3bcdeca2f2882e920160fb0bf', class: "testimonial-footer" }, h("div", { key: 'c3bf10a964df92ffbb06e89fb1884473177f0f76', class: "testimonial-nav" }, h("slot", { key: '25479342ec5b206a96c7291d619370558b6942a6', name: "navigation" })), this.readMoreLink && (h("a", { key: '7267d68860040775393fa5d11d77f70015654b17', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '706d1e088640e463b3df22b783893cc9142ba22d' }, "Read full story"), h("svg", { key: '9f3c15b16c949412b7860dba79e69827671fe6d3', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ee2b49e1a6a6dde48334ae05203e65ea4ee89094', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js

@@ -65,7 +65,7 @@ export class AfTestimonialCarousel {
     render() {
         const hasPrev = this.currentIndex > 0;
         const hasNext = this.currentIndex < this.testimonialCount - 1;
-        return (h(Host, { key: '93e4222eaa683eda0e5d68d445691e5dcf764b10' }, h("div", { key: '8679d282c0644b463eee86fa90282f59ba1c6cb5', class: "testimonial-carousel" }, h("div", { key: '6779793a882493c73b31bdf5742e2d068b8db72f', class: "testimonial-slides" }, h("slot", { key: '4326f6b06a60174edc2ba74c3d5704707965bf5d' })), this.testimonialCount > 1 && (h("div", { key: 'ba63a40e6a0789df3af7ff51d36a0f9c2e0651c6', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
+        return (h(Host, { key: '5fd0c47f2034eb0c63ccab1aa0442fae52b7523e' }, h("div", { key: '9eae24dbbdd8c211df3ec37dc3561ca4e96f0bf7', class: "testimonial-carousel" }, h("div", { key: '85f4fb256f727426689654fe8f95496b017cd5bf', class: "testimonial-slides" }, h("slot", { key: 'c4fe967e71964c671c705f7407daa4bbc7f254b5' })), this.testimonialCount > 1 && (h("div", { key: 'bf80d9aabffbcde4d69f36014a6ba73f2425216a', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
                 if (!this.isAnimating && index !== this.currentIndex) {
                     this.isAnimating = true;
                     this.currentIndex = index;
@@ -74,7 +74,7 @@ export class AfTestimonialCarousel {
                         this.isAnimating = false;
                     }, 500);
                 }
-            } }))))), this.testimonialCount > 1 && (h("div", { key: 'e15676334f291d496302381e3625b8c18f46626d', class: "carousel-navigation" }, h("button", { key: '511c7cf3b514d07ec4b2c6e9a6a2231a6c98b1d3', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '477016d99fb337bed5ae757ff14dc290819450ba', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '989e2119171bb332ca39a45d9b18d46736e0a82f', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5b52c2b3d6aef2b17e144ae30eebd6c6a3c07323', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9d03ebe923108338a4fdab149d02c04e19df6e5e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'a90a52e8cfb3df339d42894448b184b1229f429d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+            } }))))), this.testimonialCount > 1 && (h("div", { key: '5b1f2e123b2be2efccdc0c744f18ff19edf388ad', class: "carousel-navigation" }, h("button", { key: 'ad93e570662d8d77af764803b5d3139a687044bb', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '48dbcc2bb6161d39dabd56c3bd92f1035f9cb168', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd5b600df7aa327667083b264e7306242976509f8', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '366c751d511308fb240c549043908284a74d7667', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9498a3f67bc4c6f80b8082722d11496d223e08e6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c3fb745ae116752613a30b93550ed25e97b4c9c1', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "af-testimonial-carousel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js

@@ -7,7 +7,7 @@ export class AfTestimonialStat {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '38055fcad76047030e7907ad11933c229e33fe05' }, h("div", { key: 'ae01845c6494f9da213f7b823aa5a57b51d94e96', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: 'd1ee0c278a840f343e442178fa2c8ae35e04304e', class: "stat-value" }, this.value), h("p", { key: '29322d5a6e3048f6c1a3df68393f6367bb4b6631', class: "stat-description" }, this.description))));
+        return (h(Host, { key: 'fbe463de5d163fca0559c87db94559db3ff47241' }, h("div", { key: 'bbc9ff2c9ae235e26019064eae17f1467f55cde4', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '911458749440dec349d483c1b1210b8fd580d7e0', class: "stat-value" }, this.value), h("p", { key: '7e5f1308ead2e9ee614004db7c2e54312a6de1aa', class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/af-aspect-ratio.js

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-BMl1ggbQ.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-PLXzXWgX.js';
 
 const AfAspectRatio = AfAspectRatio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button-group.js

@@ -1,4 +1,4 @@
-import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-BeQlNDyY.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-7a3XpKXs.js';
 
 const AfButtonGroup = AfButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button.js

@@ -1,4 +1,4 @@
-import { A as AfButton$1, d as defineCustomElement$1 } from './p-CcNomA2o.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-BKGrl8ua.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-card.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
 
 const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-heading.sc-af-card,.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-heading.sc-af-card,.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}";
 

package/dist/components/af-client-carousel.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
 
 const afClientCarouselCss = ":host{display:block;width:100%;background-color:var(--colour-brand-inkwell, #14343B)}.client-carousel{padding:48px 80px;display:flex;flex-direction:column;gap:40px;align-items:center}.headline{text-align:center;padding:24px 220px}.headline h3{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-0.68px;color:var(--colour-brand-mist-green, #C6D5D1);margin:0}.carousel-container{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.carousel-row{display:flex;width:100%;overflow:hidden;position:relative}.logo-track{display:flex;gap:16px;animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left .logo-track{animation-name:scroll-left;animation-duration:40s}.scroll-right .logo-track{animation-name:scroll-right;animation-duration:40s}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}::slotted(*){flex-shrink:0}@media (max-width: 1024px){.client-carousel{padding:32px 40px}.headline{padding:16px 40px}}@media (max-width: 767px){.client-carousel{padding:24px 16px}.headline{padding:16px}.headline h3{font-size:25px}}";
 

package/dist/components/af-color-swatch.js

@@ -1,4 +1,4 @@
-import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-BSewwIfD.js';
+import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-BBivIwbE.js';
 
 const AfColorSwatch = AfColorSwatch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-container.js

@@ -1,4 +1,4 @@
-import { A as AfContainer$1, d as defineCustomElement$1 } from './p-BpXkQGDQ.js';
+import { A as AfContainer$1, d as defineCustomElement$1 } from './p-BkEmrXbw.js';
 
 const AfContainer = AfContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-cta-section.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfCtaSection extends Components.AfCtaSection, HTMLElement {}
+export const AfCtaSection: {
+    prototype: AfCtaSection;
+    new (): AfCtaSection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-cta-section.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+
+const afCtaSectionCss = ".cta-section.sc-af-cta-section{padding:32px}.cta-section__container.sc-af-cta-section{position:relative;display:flex;align-items:center;gap:48px;padding:64px 80px;background-color:#D6E8E4;border-radius:24px;overflow:hidden;max-width:1200px;margin:0 auto}.cta-section__wave-bg.sc-af-cta-section{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}.cta-section__wave-svg.sc-af-cta-section{position:absolute;bottom:-50px;right:-50px;width:120%;height:120%;opacity:0.8}.cta-section__illustration.sc-af-cta-section{position:relative;z-index:1;flex-shrink:0;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.cta-section__illustration-img.sc-af-cta-section{width:100%;height:100%;object-fit:contain}.cta-section__illustration.sc-af-cta-section svg.sc-af-cta-section{width:100%;height:100%}.cta-section__content.sc-af-cta-section{position:relative;z-index:1;flex:1}.cta-section__heading.sc-af-cta-section{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(28px, 4vw, 40px);line-height:1.1;letter-spacing:-0.02em;color:var(--colour-brand-inkwell, #14343b);margin:0 0 12px 0;font-style:normal}.cta-section__description.sc-af-cta-section{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:18px;line-height:1.5;color:var(--colour-brand-inkwell, #14343b);margin:0 0 24px 0;opacity:0.85}.cta-section__buttons.sc-af-cta-section{display:flex;gap:12px;flex-wrap:wrap}.cta-section__button.sc-af-cta-section{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:100px;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:16px;line-height:1.25;text-decoration:none;transition:all 0.2s ease;cursor:pointer}.cta-section__button--primary.sc-af-cta-section{background-color:var(--colour-brand-teal, #6ECCC8);color:var(--colour-brand-inkwell, #14343b);border:2px solid var(--colour-brand-inkwell, #14343b)}.cta-section__button--primary.sc-af-cta-section:hover{background-color:#5BBBB7}.cta-section__button--secondary.sc-af-cta-section{background-color:white;color:var(--colour-brand-inkwell, #14343b);border:2px solid var(--colour-brand-inkwell, #14343b)}.cta-section__button--secondary.sc-af-cta-section:hover{background-color:var(--colour-brand-inkwell, #14343b);color:white}@media (max-width: 768px){.cta-section__container.sc-af-cta-section{flex-direction:column;padding:48px 32px;gap:32px;text-align:center}.cta-section__illustration.sc-af-cta-section{width:150px;height:150px}.cta-section__buttons.sc-af-cta-section{justify-content:center}.cta-section__heading.sc-af-cta-section{font-size:28px}}@media (max-width: 480px){.cta-section.sc-af-cta-section{padding:16px}.cta-section__container.sc-af-cta-section{padding:32px 24px}.cta-section__buttons.sc-af-cta-section{flex-direction:column;width:100%}.cta-section__button.sc-af-cta-section{width:100%}}";
+
+const AfCtaSection$1 = /*@__PURE__*/ proxyCustomElement(class AfCtaSection extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Section heading */
+        this.heading = 'See what our AI agents can do for you';
+        /** Section description */
+        this.description = 'Upload your documents and watch our AI agents get to work.';
+        /** Primary button text */
+        this.primaryButtonText = 'Try for free';
+        /** Primary button URL */
+        this.primaryButtonUrl = '#';
+        /** Secondary button text */
+        this.secondaryButtonText = 'Talk to us';
+        /** Secondary button URL */
+        this.secondaryButtonUrl = '#';
+        /** Illustration URL - if provided, displays this image */
+        this.illustrationUrl = '';
+    }
+    render() {
+        return (h(Host, { key: '4799cecb74e6ed366615d0f6431b801b697104c1' }, h("div", { key: '5ec289c687484ea343bbe235b8e5ff275834bb1c', class: "cta-section" }, h("div", { key: 'd4ace70049c68d389e4ad6bfa0c33df90e40228c', class: "cta-section__container" }, h("div", { key: '44bff410dfa32e62d71d07a083ac796d8f2c4701', class: "cta-section__wave-bg" }, h("svg", { key: 'eaaa575510c3c9eb0151c3a9b429b05d63f091d2', viewBox: "0 0 1200 400", preserveAspectRatio: "none", class: "cta-section__wave-svg" }, h("ellipse", { key: '3efdf781f5d90f3a6171ce89d05b47d031dba87d', cx: "900", cy: "450", rx: "600", ry: "350", fill: "rgba(255,255,255,0.2)" }), h("ellipse", { key: '1b8bb8fe8629e8c1a38401a437f9ebc81448fd89', cx: "1000", cy: "500", rx: "400", ry: "250", fill: "rgba(255,255,255,0.15)" }))), h("div", { key: 'd5b18a8738c88cebe47501bbd3f4f8cb21e5b570', class: "cta-section__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "cta-section__illustration-img" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'a1aaf9056f0f4efbc1e8932c2bd7499c2109fe53', class: "cta-section__content" }, h("h2", { key: '6615663e27005aceab17e23cfc393b4d34c2eeec', class: "cta-section__heading" }, this.heading), h("p", { key: '13cd23b082ff90d2aaefcded32695ab64c0be51a', class: "cta-section__description" }, this.description), h("div", { key: '60c1b7e486fabc5bca71e1d4ec6e7ef5a88250e7', class: "cta-section__buttons" }, h("a", { key: '8b38088923d1b558bf9600957c36ea21468ea4f7', href: this.primaryButtonUrl, class: "cta-section__button cta-section__button--primary" }, this.primaryButtonText), h("a", { key: '9f38363587db152fb6cc04f0349ba4e7a8eac125', href: this.secondaryButtonUrl, class: "cta-section__button cta-section__button--secondary" }, this.secondaryButtonText)))))));
+    }
+    static get style() { return afCtaSectionCss; }
+}, [262, "af-cta-section", {
+        "heading": [1],
+        "description": [1],
+        "primaryButtonText": [1, "primary-button-text"],
+        "primaryButtonUrl": [1, "primary-button-url"],
+        "secondaryButtonText": [1, "secondary-button-text"],
+        "secondaryButtonUrl": [1, "secondary-button-url"],
+        "illustrationUrl": [1, "illustration-url"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-cta-section"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-cta-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfCtaSection$1);
+            }
+            break;
+    } });
+}
+
+const AfCtaSection = AfCtaSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfCtaSection, defineCustomElement };
+//# sourceMappingURL=af-cta-section.js.map
+
+//# sourceMappingURL=af-cta-section.js.map

package/dist/components/af-cta-section.js.map

@@ -0,0 +1 @@
+{"file":"af-cta-section.js","mappings":"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","names":["AfCtaSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-cta-section/af-cta-section.css?tag=af-cta-section&encapsulation=scoped","src/components/af-cta-section/af-cta-section.tsx"],"sourcesContent":[".cta-section {\n  padding: 32px;\n}\n\n.cta-section__container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 48px;\n  padding: 64px 80px;\n  /* Match the exact background color from affinda.com */\n  background-color: #D6E8E4;\n  border-radius: 24px;\n  overflow: hidden;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n/* Decorative wave background */\n.cta-section__wave-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: hidden;\n}\n\n.cta-section__wave-svg {\n  position: absolute;\n  bottom: -50px;\n  right: -50px;\n  width: 120%;\n  height: 120%;\n  opacity: 0.8;\n}\n\n/* Illustration container */\n.cta-section__illustration {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  width: 200px;\n  height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.cta-section__illustration-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.cta-section__illustration svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Content area */\n.cta-section__content {\n  position: relative;\n  z-index: 1;\n  flex: 1;\n}\n\n.cta-section__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: clamp(28px, 4vw, 40px);\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin: 0 0 12px 0;\n  /* Remove italic - use normal style */\n  font-style: normal;\n}\n\n.cta-section__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 1.5;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin: 0 0 24px 0;\n  opacity: 0.85;\n}\n\n.cta-section__buttons {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.cta-section__button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 24px;\n  border-radius: 100px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 1.25;\n  text-decoration: none;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n/* Primary button - matches other CTA buttons on the page */\n.cta-section__button--primary {\n  background-color: var(--colour-brand-teal, #6ECCC8);\n  color: var(--colour-brand-inkwell, #14343b);\n  border: 2px solid var(--colour-brand-inkwell, #14343b);\n}\n\n.cta-section__button--primary:hover {\n  background-color: #5BBBB7;\n}\n\n/* Secondary button - white with black outline */\n.cta-section__button--secondary {\n  background-color: white;\n  color: var(--colour-brand-inkwell, #14343b);\n  border: 2px solid var(--colour-brand-inkwell, #14343b);\n}\n\n.cta-section__button--secondary:hover {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: white;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .cta-section__container {\n    flex-direction: column;\n    padding: 48px 32px;\n    gap: 32px;\n    text-align: center;\n  }\n\n  .cta-section__illustration {\n    width: 150px;\n    height: 150px;\n  }\n\n  .cta-section__buttons {\n    justify-content: center;\n  }\n\n  .cta-section__heading {\n    font-size: 28px;\n  }\n}\n\n@media (max-width: 480px) {\n  .cta-section {\n    padding: 16px;\n  }\n\n  .cta-section__container {\n    padding: 32px 24px;\n  }\n\n  .cta-section__buttons {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .cta-section__button {\n    width: 100%;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Call-to-action section component with illustration and decorative background\n * Styled to match the affinda.com \"See what our AI agents can do for you\" section\n */\n@Component({\n  tag: 'af-cta-section',\n  styleUrl: 'af-cta-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCtaSection {\n  /** Section heading */\n  @Prop() heading: string = 'See what our AI agents can do for you';\n\n  /** Section description */\n  @Prop() description: string = 'Upload your documents and watch our AI agents get to work.';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = 'Try for free';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text */\n  @Prop() secondaryButtonText: string = 'Talk to us';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** Illustration URL - if provided, displays this image */\n  @Prop() illustrationUrl: string = '';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"cta-section\">\n          <div class=\"cta-section__container\">\n            {/* Decorative wave background */}\n            <div class=\"cta-section__wave-bg\">\n              <svg viewBox=\"0 0 1200 400\" preserveAspectRatio=\"none\" class=\"cta-section__wave-svg\">\n                {/* Large curved wave */}\n                <ellipse \n                  cx=\"900\" \n                  cy=\"450\" \n                  rx=\"600\" \n                  ry=\"350\" \n                  fill=\"rgba(255,255,255,0.2)\"\n                />\n                {/* Smaller accent curve */}\n                <ellipse \n                  cx=\"1000\" \n                  cy=\"500\" \n                  rx=\"400\" \n                  ry=\"250\" \n                  fill=\"rgba(255,255,255,0.15)\"\n                />\n              </svg>\n            </div>\n\n            {/* Illustration */}\n            <div class=\"cta-section__illustration\">\n              {this.illustrationUrl ? (\n                <img src={this.illustrationUrl} alt=\"\" class=\"cta-section__illustration-img\" />\n              ) : (\n                <slot name=\"illustration\"></slot>\n              )}\n            </div>\n\n            {/* Content */}\n            <div class=\"cta-section__content\">\n              <h2 class=\"cta-section__heading\">{this.heading}</h2>\n              <p class=\"cta-section__description\">{this.description}</p>\n              <div class=\"cta-section__buttons\">\n                <a href={this.primaryButtonUrl} class=\"cta-section__button cta-section__button--primary\">\n                  {this.primaryButtonText}\n                </a>\n                <a href={this.secondaryButtonUrl} class=\"cta-section__button cta-section__button--secondary\">\n                  {this.secondaryButtonText}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}