@affinda/wc 0.0.11 → 0.0.12

package/dist/cjs/index.cjs.js

@@ -8,7 +8,7 @@ var afButton_entry = require('./af-button.cjs.entry.js');
 var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
 var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
 var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
-require('./index-D_ItFcqt.js');
+require('./index-DfEVhbS6.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-D_ItFcqt.js');
+var index = require('./index-DfEVhbS6.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar",{"mobileMenuOpen":[32]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar",{"mobileMenuOpen":[32]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-cta-section.cjs",[[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"]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -14,6 +14,8 @@
     "components/af-typography-lockup/af-typography-lockup.js",
     "components/af-card/af-card.js",
     "components/af-client-carousel/af-client-carousel.js",
+    "components/af-cta-section/af-cta-section.js",
+    "components/af-feature-accordion/af-feature-accordion.js",
     "components/af-hero-section/af-hero-section.js",
     "components/af-logo-well/af-logo-well.js",
     "components/af-section/af-section.js",

package/dist/collection/components/af-cta-section/af-cta-section.css

@@ -0,0 +1,175 @@
+.cta-section {
+  padding: 32px;
+}
+
+.cta-section__container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 48px;
+  padding: 64px 80px;
+  /* Match the exact background color from affinda.com */
+  background-color: #D6E8E4;
+  border-radius: 24px;
+  overflow: hidden;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Decorative wave background */
+.cta-section__wave-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cta-section__wave-svg {
+  position: absolute;
+  bottom: -50px;
+  right: -50px;
+  width: 120%;
+  height: 120%;
+  opacity: 0.8;
+}
+
+/* Illustration container */
+.cta-section__illustration {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  width: 200px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cta-section__illustration-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.cta-section__illustration svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content area */
+.cta-section__content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+}
+
+.cta-section__heading {
+  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;
+  /* Remove italic - use normal style */
+  font-style: normal;
+}
+
+.cta-section__description {
+  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 {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cta-section__button {
+  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;
+}
+
+/* Primary button - matches other CTA buttons on the page */
+.cta-section__button--primary {
+  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:hover {
+  background-color: #5BBBB7;
+}
+
+/* Secondary button - white with black outline */
+.cta-section__button--secondary {
+  background-color: white;
+  color: var(--colour-brand-inkwell, #14343b);
+  border: 2px solid var(--colour-brand-inkwell, #14343b);
+}
+
+.cta-section__button--secondary:hover {
+  background-color: var(--colour-brand-inkwell, #14343b);
+  color: white;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .cta-section__container {
+    flex-direction: column;
+    padding: 48px 32px;
+    gap: 32px;
+    text-align: center;
+  }
+
+  .cta-section__illustration {
+    width: 150px;
+    height: 150px;
+  }
+
+  .cta-section__buttons {
+    justify-content: center;
+  }
+
+  .cta-section__heading {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 480px) {
+  .cta-section {
+    padding: 16px;
+  }
+
+  .cta-section__container {
+    padding: 32px 24px;
+  }
+
+  .cta-section__buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .cta-section__button {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,183 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Call-to-action section component with illustration and decorative background
+ * Styled to match the affinda.com "See what our AI agents can do for you" section
+ */
+export class AfCtaSection {
+    constructor() {
+        /** 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 is() { return "af-cta-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-cta-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-cta-section.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": "'See what our AI agents can do for you'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "'Upload your documents and watch our AI agents get to work.'"
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button-text",
+                "defaultValue": "'Try for free'"
+            },
+            "primaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button-url",
+                "defaultValue": "'#'"
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button-text",
+                "defaultValue": "'Talk to us'"
+            },
+            "secondaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary button URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button-url",
+                "defaultValue": "'#'"
+            },
+            "illustrationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Illustration URL - if provided, displays this image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration-url",
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-cta-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-cta-section.js","sourceRoot":"","sources":["../../../src/components/af-cta-section/af-cta-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,YAAY;IANzB;QAOE,sBAAsB;QACd,YAAO,GAAW,uCAAuC,CAAC;QAElE,0BAA0B;QAClB,gBAAW,GAAW,4DAA4D,CAAC;QAE3F,0BAA0B;QAClB,sBAAiB,GAAW,cAAc,CAAC;QAEnD,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,4BAA4B;QACpB,wBAAmB,GAAW,YAAY,CAAC;QAEnD,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC,0DAA0D;QAClD,oBAAe,GAAW,EAAE,CAAC;KAwDtC;IAtDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,aAAa;gBACtB,4DAAK,KAAK,EAAC,wBAAwB;oBAEjC,4DAAK,KAAK,EAAC,sBAAsB;wBAC/B,4DAAK,OAAO,EAAC,cAAc,EAAC,mBAAmB,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB;4BAElF,gEACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,uBAAuB,GAC5B;4BAEF,gEACE,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,wBAAwB,GAC7B,CACE,CACF;oBAGN,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,CAChF,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;oBAGN,4DAAK,KAAK,EAAC,sBAAsB;wBAC/B,2DAAI,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAM;wBACpD,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,WAAW,CAAK;wBAC1D,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,0DAAG,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,kDAAkD,IACrF,IAAI,CAAC,iBAAiB,CACrB;4BACJ,0DAAG,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAC,oDAAoD,IACzF,IAAI,CAAC,mBAAmB,CACvB,CACA,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,220 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.feature-accordion {
+  background-color: var(--colour-background-level1, #E8EFED);
+  padding: 80px 0;
+}
+
+.feature-accordion__container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+
+.feature-accordion__heading {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 400;
+  font-size: clamp(36px, 5vw, 52px);
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  color: var(--colour-brand-inkwell, #14343B);
+  margin: 0 0 56px 0;
+}
+
+.feature-accordion__content {
+  display: flex;
+  gap: 48px;
+}
+
+/* Accordion List */
+.feature-accordion__list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Accordion Item */
+.accordion-item {
+  border-bottom: 1px solid rgba(20, 52, 59, 0.12);
+}
+
+.accordion-item:first-child {
+  border-top: 1px solid rgba(20, 52, 59, 0.12);
+}
+
+.accordion-item__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 24px 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  gap: 16px;
+}
+
+.accordion-item__header:hover .accordion-item__title {
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.accordion-item__title {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  font-size: 22px;
+  line-height: 1.25;
+  color: var(--colour-brand-inkwell, #14343B);
+  margin: 0;
+  flex: 1;
+  transition: color 0.2s ease;
+}
+
+/* Collapsed items have lighter text */
+.accordion-item:not(.accordion-item--expanded) .accordion-item__title {
+  color: rgba(20, 52, 59, 0.7);
+}
+
+.accordion-item__icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--colour-brand-inkwell, #14343B);
+  transition: transform 0.2s ease;
+}
+
+.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {
+  color: rgba(20, 52, 59, 0.5);
+}
+
+.accordion-item__content {
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+.accordion-item__description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 1.6;
+  color: rgba(20, 52, 59, 0.85);
+  margin: 0 0 20px 0;
+  padding-right: 40px;
+}
+
+/* Timer track - the progress bar at the bottom of expanded items */
+.accordion-item__timer-track {
+  height: 3px;
+  background-color: rgba(20, 52, 59, 0.1);
+  border-radius: 2px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  /* Right-align the progress bar so it drains from right to left */
+  display: flex;
+  justify-content: flex-start;
+}
+
+.accordion-item__timer-progress {
+  height: 100%;
+  background-color: var(--colour-brand-teal, #00B5AD);
+  border-radius: 2px;
+  /* Smooth animation for progress */
+  transition: width 0.05s linear;
+}
+
+/* Image Container - stretches full height to align with accordion */
+.feature-accordion__image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #B8C9C5;
+  border-radius: 20px;
+  overflow: hidden;
+  /* Take up remaining space and stretch full height */
+  flex: 1;
+  min-width: 0;
+}
+
+.feature-accordion__image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 32px;
+}
+
+.feature-accordion__image {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.feature-accordion__image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Tablet */
+@media (max-width: 1024px) {
+  .feature-accordion {
+    padding: 60px 0;
+  }
+
+  .feature-accordion__container {
+    padding: 0 24px;
+  }
+
+  .feature-accordion__content {
+    gap: 32px;
+  }
+
+  .feature-accordion__heading {
+    margin-bottom: 40px;
+  }
+
+  .accordion-item__title {
+    font-size: 20px;
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .feature-accordion {
+    padding: 48px 0;
+  }
+
+  .feature-accordion__content {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .feature-accordion__image-container {
+    order: -1;
+    min-height: 280px;
+    flex: none;
+  }
+
+  .feature-accordion__list {
+    flex: none;
+  }
+
+  .accordion-item__title {
+    font-size: 18px;
+  }
+
+  .accordion-item__description {
+    font-size: 15px;
+    padding-right: 0;
+  }
+}