@zenpatient-org/healthspan-marketing-ui 0.1.169 → 0.1.171

package/dist/pageComponents/LabsHero/LabsHero.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn/cn.cjs.js"),r=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Button/Button.cjs.js"),n=require("./assets/icon1.png.cjs.js"),c=require("./assets/icon2.png.cjs.js"),o=require("./assets/icon3.png.cjs.js"),d=require("./assets/img1.png.cjs.js"),u=require("./assets/img2.png.cjs.js"),m=require("./assets/img3.png.cjs.js"),g=require("./assets/svg1.svg.cjs.js"),f=require("./assets/svg2.svg.cjs.js"),h=require("./assets/svg3.svg.cjs.js"),a=require("./labsHero.module.css.cjs.js"),p=({link:s})=>e.jsx("section",{className:a.default.root,"data-type":"hero",children:e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.headlineContainer,children:[e.jsx("div",{className:a.default.title,children:e.jsx(i.HighlightedTitle,{as:"p",colorScheme:"dark",defaultVariant:"displayMd",mobileVariant:"displayXs",title:e.jsxs(e.Fragment,{children:["To see results, you need to ",e.jsx("b",{children:"see your results"})]})})}),e.jsx(r.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.description,children:"Healthspan's advanced lab panels provide precise data on 100+ biomarkers. Your dedicated clinical care team analyzes and explains the results in plain terms, helping you personalize and optimize your longevity protocol."}),e.jsx("div",{className:t.cn(a.default.buttonWrap,a.default.mobile),children:e.jsx(l.Button,{as:"a",href:s,variant:"secondary",size:"md",children:"Get Started"})}),e.jsx("div",{className:t.cn(a.default.buttonWrap,a.default.desktop),children:e.jsx(l.Button,{as:"a",href:s,variant:"secondary",size:"lg",children:"Get Started"})})]}),e.jsxs("div",{className:a.default.animationContainer,children:[e.jsx("img",{src:n.default,className:a.default.set1Icon,alt:"Image Icon"}),e.jsx("img",{src:d.default,className:a.default.set1Image,alt:"Product Image"}),e.jsx(g.default,{className:a.default.set1Svg}),e.jsx("img",{src:c.default,className:a.default.set2Icon,alt:"Image Icon"}),e.jsx("img",{src:u.default,className:a.default.set2Image,alt:"Product Image"}),e.jsx(f.default,{className:a.default.set2Svg}),e.jsx("img",{src:o.default,className:a.default.set3Icon,alt:"Image Icon"}),e.jsx("img",{src:m.default,className:a.default.set3Image,alt:"Product Image"}),e.jsx(h.default,{className:a.default.set3Svg})]})]})});exports.LabsHero=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn/cn.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/Button/Button.cjs.js"),o=require("./assets/icon1.png.cjs.js"),d=require("./assets/icon2.png.cjs.js"),u=require("./assets/icon3.png.cjs.js"),m=require("./assets/img1.png.cjs.js"),g=require("./assets/img2.png.cjs.js"),p=require("./assets/img3.png.cjs.js"),f=require("./assets/svg1.svg.cjs.js"),y=require("./assets/svg2.svg.cjs.js"),h=require("./assets/svg3.svg.cjs.js"),a=require("./labsHero.module.css.cjs.js"),i=require("../../types/analytics/analytics.cjs.js"),j=({link:t})=>{const s={event:i.EAnalyticsEvent.ctaClicked,type:i.EAnalyticsEventType.interaction,component:"LabsHero",payload:{ctaLink:t}};return e.jsx("section",{className:a.default.root,"data-type":"hero",children:e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.headlineContainer,children:[e.jsx("div",{className:a.default.title,children:e.jsx(c.HighlightedTitle,{as:"p",colorScheme:"dark",defaultVariant:"displayMd",mobileVariant:"displayXs",title:e.jsxs(e.Fragment,{children:["To see results, you need to ",e.jsx("b",{children:"see your results"})]})})}),e.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.description,children:"Healthspan's advanced lab panels provide precise data on 100+ biomarkers. Your dedicated clinical care team analyzes and explains the results in plain terms, helping you personalize and optimize your longevity protocol."}),e.jsx("div",{className:l.cn(a.default.buttonWrap,a.default.mobile),children:e.jsx(r.Button,{as:"a",href:t,variant:"secondary",size:"md",analyticsProps:s,children:"Get Started"})}),e.jsx("div",{className:l.cn(a.default.buttonWrap,a.default.desktop),children:e.jsx(r.Button,{as:"a",href:t,variant:"secondary",size:"lg",analyticsProps:s,children:"Get Started"})})]}),e.jsxs("div",{className:a.default.animationContainer,children:[e.jsx("img",{src:o.default,className:a.default.set1Icon,alt:"Image Icon"}),e.jsx("img",{src:m.default,className:a.default.set1Image,alt:"Product Image"}),e.jsx(f.default,{className:a.default.set1Svg}),e.jsx("img",{src:d.default,className:a.default.set2Icon,alt:"Image Icon"}),e.jsx("img",{src:g.default,className:a.default.set2Image,alt:"Product Image"}),e.jsx(y.default,{className:a.default.set2Svg}),e.jsx("img",{src:u.default,className:a.default.set3Icon,alt:"Image Icon"}),e.jsx("img",{src:p.default,className:a.default.set3Image,alt:"Product Image"}),e.jsx(h.default,{className:a.default.set3Svg})]})]})})};exports.LabsHero=j;

package/dist/pageComponents/LabsHero/LabsHero.es.js

@@ -1,49 +1,60 @@
-import { jsx as a, jsxs as r, Fragment as o } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn/cn.es.js";
-import { Typography as m } from "../../components/Typography/Typography.es.js";
-import { HighlightedTitle as l } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { jsx as a, jsxs as t, Fragment as m } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn/cn.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Button as i } from "../../components/Button/Button.es.js";
-import c from "./assets/icon1.png.es.js";
-import n from "./assets/icon2.png.es.js";
-import d from "./assets/icon3.png.es.js";
-import p from "./assets/img1.png.es.js";
-import g from "./assets/img2.png.es.js";
+import l from "./assets/icon1.png.es.js";
+import d from "./assets/icon2.png.es.js";
+import p from "./assets/icon3.png.es.js";
+import g from "./assets/img1.png.es.js";
+import v from "./assets/img2.png.es.js";
 import h from "./assets/img3.png.es.js";
-import v from "./assets/svg1.svg.es.js";
+import y from "./assets/svg1.svg.es.js";
 import f from "./assets/svg2.svg.es.js";
-import N from "./assets/svg3.svg.es.js";
+import u from "./assets/svg3.svg.es.js";
 import e from "./labsHero.module.css.es.js";
-const M = ({ link: s }) => /* @__PURE__ */ a("section", { className: e.root, "data-type": "hero", children: /* @__PURE__ */ r("div", { className: e.container, children: [
-  /* @__PURE__ */ r("div", { className: e.headlineContainer, children: [
-    /* @__PURE__ */ a("div", { className: e.title, children: /* @__PURE__ */ a(
-      l,
-      {
-        as: "p",
-        colorScheme: "dark",
-        defaultVariant: "displayMd",
-        mobileVariant: "displayXs",
-        title: /* @__PURE__ */ r(o, { children: [
-          "To see results, you need to ",
-          /* @__PURE__ */ a("b", { children: "see your results" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ a(m, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.description, children: "Healthspan's advanced lab panels provide precise data on 100+ biomarkers. Your dedicated clinical care team analyzes and explains the results in plain terms, helping you personalize and optimize your longevity protocol." }),
-    /* @__PURE__ */ a("div", { className: t(e.buttonWrap, e.mobile), children: /* @__PURE__ */ a(i, { as: "a", href: s, variant: "secondary", size: "md", children: "Get Started" }) }),
-    /* @__PURE__ */ a("div", { className: t(e.buttonWrap, e.desktop), children: /* @__PURE__ */ a(i, { as: "a", href: s, variant: "secondary", size: "lg", children: "Get Started" }) })
-  ] }),
-  /* @__PURE__ */ r("div", { className: e.animationContainer, children: [
-    /* @__PURE__ */ a("img", { src: c, className: e.set1Icon, alt: "Image Icon" }),
-    /* @__PURE__ */ a("img", { src: p, className: e.set1Image, alt: "Product Image" }),
-    /* @__PURE__ */ a(v, { className: e.set1Svg }),
-    /* @__PURE__ */ a("img", { src: n, className: e.set2Icon, alt: "Image Icon" }),
-    /* @__PURE__ */ a("img", { src: g, className: e.set2Image, alt: "Product Image" }),
-    /* @__PURE__ */ a(f, { className: e.set2Svg }),
-    /* @__PURE__ */ a("img", { src: d, className: e.set3Icon, alt: "Image Icon" }),
-    /* @__PURE__ */ a("img", { src: h, className: e.set3Image, alt: "Product Image" }),
-    /* @__PURE__ */ a(N, { className: e.set3Svg })
-  ] })
-] }) });
+import { EAnalyticsEventType as N, EAnalyticsEvent as I } from "../../types/analytics/analytics.es.js";
+const W = ({ link: r }) => {
+  const s = {
+    event: I.ctaClicked,
+    type: N.interaction,
+    component: "LabsHero",
+    payload: {
+      ctaLink: r
+    }
+  };
+  return /* @__PURE__ */ a("section", { className: e.root, "data-type": "hero", children: /* @__PURE__ */ t("div", { className: e.container, children: [
+    /* @__PURE__ */ t("div", { className: e.headlineContainer, children: [
+      /* @__PURE__ */ a("div", { className: e.title, children: /* @__PURE__ */ a(
+        n,
+        {
+          as: "p",
+          colorScheme: "dark",
+          defaultVariant: "displayMd",
+          mobileVariant: "displayXs",
+          title: /* @__PURE__ */ t(m, { children: [
+            "To see results, you need to ",
+            /* @__PURE__ */ a("b", { children: "see your results" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ a(c, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.description, children: "Healthspan's advanced lab panels provide precise data on 100+ biomarkers. Your dedicated clinical care team analyzes and explains the results in plain terms, helping you personalize and optimize your longevity protocol." }),
+      /* @__PURE__ */ a("div", { className: o(e.buttonWrap, e.mobile), children: /* @__PURE__ */ a(i, { as: "a", href: r, variant: "secondary", size: "md", analyticsProps: s, children: "Get Started" }) }),
+      /* @__PURE__ */ a("div", { className: o(e.buttonWrap, e.desktop), children: /* @__PURE__ */ a(i, { as: "a", href: r, variant: "secondary", size: "lg", analyticsProps: s, children: "Get Started" }) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: e.animationContainer, children: [
+      /* @__PURE__ */ a("img", { src: l, className: e.set1Icon, alt: "Image Icon" }),
+      /* @__PURE__ */ a("img", { src: g, className: e.set1Image, alt: "Product Image" }),
+      /* @__PURE__ */ a(y, { className: e.set1Svg }),
+      /* @__PURE__ */ a("img", { src: d, className: e.set2Icon, alt: "Image Icon" }),
+      /* @__PURE__ */ a("img", { src: v, className: e.set2Image, alt: "Product Image" }),
+      /* @__PURE__ */ a(f, { className: e.set2Svg }),
+      /* @__PURE__ */ a("img", { src: p, className: e.set3Icon, alt: "Image Icon" }),
+      /* @__PURE__ */ a("img", { src: h, className: e.set3Image, alt: "Product Image" }),
+      /* @__PURE__ */ a(u, { className: e.set3Svg })
+    ] })
+  ] }) });
+};
 export {
-  M as LabsHero
+  W as LabsHero
 };

package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/Button/Button.cjs.js"),t=require("../../utils/cn/cn.cjs.js"),x=require("./assets/prod1.png.cjs.js"),v=require("./assets/prod2.png.cjs.js"),y=require("./assets/prod3.png.cjs.js"),N=require("./assets/pill1.jpg.cjs.js"),j=require("./assets/pill2.jpg.cjs.js"),b=require("./assets/pill3.jpg.cjs.js"),T=require("./assets/graph1.svg.cjs.js"),V=require("./assets/graph2.svg.cjs.js"),I=require("./assets/graph3.svg.cjs.js"),e=require("./personalizedProtocolHero.module.css.cjs.js"),n=[{pill:N.default,product:x.default,protocol:"ENERGY",dosage:{text:"Oxytocin Nasal Spray",value:"3MG"},goal:"REDUCE STRESS",svg:T.default},{pill:j.default,product:v.default,protocol:"METABOLISM",dosage:{text:"Metformin",value:"3MG"},goal:"AUTOPHAGY INDUCTION",svg:V.default},{pill:b.default,product:y.default,protocol:"SENESCENCE",dosage:{text:"Rapamycin",value:"3MG"},goal:"LONGEVITY",svg:I.default}],q=()=>{const[i,f]=r.useState(0),[h,g]=r.useState(0),[s,u]=r.useState(!1);r.useEffect(()=>{const c=setInterval(()=>{const o=(i+1)%n.length;f(o),setTimeout(()=>{u(!0),setTimeout(()=>{g(o),u(!1)},200)},200)},2500);return()=>clearInterval(c)},[i]);const d=n[h];return a.jsx("section",{className:e.default.root,"data-type":"hero",children:a.jsxs("div",{className:e.default.container,children:[a.jsxs("div",{className:e.default.leftContent,children:[a.jsx("div",{className:e.default.title,children:a.jsx(m.HighlightedTitle,{as:"p",colorScheme:"dark",defaultVariant:"displayMd",mobileVariant:"displayXs",title:a.jsxs(a.Fragment,{children:["A longevity protocol that's ",a.jsx("b",{children:"all you"})]})})}),a.jsx(l.Typography,{className:e.default.description,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:"There's nothing more personal than your health, which is why your Healthspan care team works closely with you — using lab testing, data, and coaching — to design and optimize a protocol to fit your unique goals."}),a.jsx("div",{className:t.cn(e.default.buttonWrap,e.default.mobile),children:a.jsx(p.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",variant:"secondary",size:"md",children:"Join Healthspan"})}),a.jsx("div",{className:t.cn(e.default.buttonWrap,e.default.desktop),children:a.jsx(p.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",variant:"secondary",size:"lg",children:"Join Healthspan"})})]}),a.jsx("div",{className:e.default.pillContainer,children:n.map((c,o)=>a.jsx("img",{src:c.pill,className:t.cn(e.default.pillImage,o===i&&e.default.active,o===(i-1+n.length)%n.length&&e.default.exiting),alt:"Pill"},o))}),a.jsxs("div",{className:e.default.textContainer,children:[a.jsxs("div",{className:e.default.protocolContainer,children:[a.jsx(l.Typography,{className:e.default.protocolText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:"Protocol"}),a.jsx("div",{className:t.cn(e.default.protocolFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.protocolValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:d.protocol})})]}),a.jsxs("div",{className:e.default.dosageContainer,children:[a.jsx("div",{className:t.cn(e.default.dosageImageFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx("img",{src:d.product,className:e.default.dosageItem,alt:"Product"})}),a.jsxs("div",{className:e.default.dosageTextBlock,children:[a.jsx("div",{className:t.cn(e.default.dosageTextFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.dosageText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:d.dosage.text})}),a.jsx("div",{className:t.cn(e.default.dosageValueFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.dosageValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:d.dosage.value})})]})]}),a.jsxs("div",{className:e.default.goalContainer,children:[a.jsx(l.Typography,{className:e.default.goalText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:"Goal"}),a.jsx("div",{className:t.cn(e.default.goalFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.goalValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:d.goal})})]}),a.jsx("div",{className:e.default.svgContainer,children:a.jsx("div",{className:t.cn(e.default.svgFade,s?e.default.fadeOut:e.default.fadeIn),children:r.createElement(d.svg,{className:e.default.svg})})})]})]})})};exports.PersonalizedProtocolHero=q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),y=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),f=require("../../components/Button/Button.cjs.js"),t=require("../../utils/cn/cn.cjs.js"),v=require("./assets/prod1.png.cjs.js"),N=require("./assets/prod2.png.cjs.js"),j=require("./assets/prod3.png.cjs.js"),b=require("./assets/pill1.jpg.cjs.js"),T=require("./assets/pill2.jpg.cjs.js"),V=require("./assets/pill3.jpg.cjs.js"),I=require("./assets/graph1.svg.cjs.js"),q=require("./assets/graph2.svg.cjs.js"),C=require("./assets/graph3.svg.cjs.js"),e=require("./personalizedProtocolHero.module.css.cjs.js"),h=require("../../types/analytics/analytics.cjs.js"),i=[{pill:b.default,product:v.default,protocol:"ENERGY",dosage:{text:"Oxytocin Nasal Spray",value:"3MG"},goal:"REDUCE STRESS",svg:I.default},{pill:T.default,product:N.default,protocol:"METABOLISM",dosage:{text:"Metformin",value:"3MG"},goal:"AUTOPHAGY INDUCTION",svg:q.default},{pill:V.default,product:j.default,protocol:"SENESCENCE",dosage:{text:"Rapamycin",value:"3MG"},goal:"LONGEVITY",svg:C.default}],E=()=>{const[c,m]=r.useState(0),[g,x]=r.useState(0),[s,u]=r.useState(!1);r.useEffect(()=>{const d=setInterval(()=>{const n=(c+1)%i.length;m(n),setTimeout(()=>{u(!0),setTimeout(()=>{x(n),u(!1)},200)},200)},2500);return()=>clearInterval(d)},[c]);const o=i[g],p=()=>{var d;(d=window.eventBus)==null||d.emit("analytics",{event:h.EAnalyticsEvent.ctaClicked,type:h.EAnalyticsEventType.interaction,component:"PersonalizedProtocolHero",payload:{link:"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948"}})};return a.jsx("section",{className:e.default.root,"data-type":"hero",children:a.jsxs("div",{className:e.default.container,children:[a.jsxs("div",{className:e.default.leftContent,children:[a.jsx("div",{className:e.default.title,children:a.jsx(y.HighlightedTitle,{as:"p",colorScheme:"dark",defaultVariant:"displayMd",mobileVariant:"displayXs",title:a.jsxs(a.Fragment,{children:["A longevity protocol that's ",a.jsx("b",{children:"all you"})]})})}),a.jsx(l.Typography,{className:e.default.description,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:"There's nothing more personal than your health, which is why your Healthspan care team works closely with you — using lab testing, data, and coaching — to design and optimize a protocol to fit your unique goals."}),a.jsx("div",{className:t.cn(e.default.buttonWrap,e.default.mobile),children:a.jsx(f.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",variant:"secondary",size:"md",onClick:p,children:"Join Healthspan"})}),a.jsx("div",{className:t.cn(e.default.buttonWrap,e.default.desktop),children:a.jsx(f.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",variant:"secondary",size:"lg",onClick:p,children:"Join Healthspan"})})]}),a.jsx("div",{className:e.default.pillContainer,children:i.map((d,n)=>a.jsx("img",{src:d.pill,className:t.cn(e.default.pillImage,n===c&&e.default.active,n===(c-1+i.length)%i.length&&e.default.exiting),alt:"Pill"},n))}),a.jsxs("div",{className:e.default.textContainer,children:[a.jsxs("div",{className:e.default.protocolContainer,children:[a.jsx(l.Typography,{className:e.default.protocolText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:"Protocol"}),a.jsx("div",{className:t.cn(e.default.protocolFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.protocolValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:o.protocol})})]}),a.jsxs("div",{className:e.default.dosageContainer,children:[a.jsx("div",{className:t.cn(e.default.dosageImageFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx("img",{src:o.product,className:e.default.dosageItem,alt:"Product"})}),a.jsxs("div",{className:e.default.dosageTextBlock,children:[a.jsx("div",{className:t.cn(e.default.dosageTextFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.dosageText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:o.dosage.text})}),a.jsx("div",{className:t.cn(e.default.dosageValueFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.dosageValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:o.dosage.value})})]})]}),a.jsxs("div",{className:e.default.goalContainer,children:[a.jsx(l.Typography,{className:e.default.goalText,as:"p",defaultVariant:"labelMd",mobileVariant:"labelXs",children:"Goal"}),a.jsx("div",{className:t.cn(e.default.goalFade,s?e.default.fadeOut:e.default.fadeIn),children:a.jsx(l.Typography,{className:e.default.goalValue,as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,children:o.goal})})]}),a.jsx("div",{className:e.default.svgContainer,children:a.jsx("div",{className:t.cn(e.default.svgFade,s?e.default.fadeOut:e.default.fadeIn),children:r.createElement(o.svg,{className:e.default.svg})})})]})]})})};exports.PersonalizedProtocolHero=E;

package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.es.js

@@ -1,61 +1,72 @@
 "use client";
-import { jsx as e, jsxs as t, Fragment as v } from "react/jsx-runtime";
-import N, { useState as m, useEffect as b } from "react";
+import { jsx as e, jsxs as l, Fragment as N } from "react/jsx-runtime";
+import b, { useState as m, useEffect as y } from "react";
 import { HighlightedTitle as x } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { Button as h } from "../../components/Button/Button.es.js";
-import { cn as l } from "../../utils/cn/cn.es.js";
+import { Button as u } from "../../components/Button/Button.es.js";
+import { cn as t } from "../../utils/cn/cn.es.js";
 import V from "./assets/prod1.png.es.js";
-import y from "./assets/prod2.png.es.js";
-import I from "./assets/prod3.png.es.js";
-import T from "./assets/pill1.jpg.es.js";
-import S from "./assets/pill2.jpg.es.js";
-import C from "./assets/pill3.jpg.es.js";
-import E from "./assets/graph1.svg.es.js";
-import M from "./assets/graph2.svg.es.js";
-import O from "./assets/graph3.svg.es.js";
+import I from "./assets/prod2.png.es.js";
+import T from "./assets/prod3.png.es.js";
+import C from "./assets/pill1.jpg.es.js";
+import E from "./assets/pill2.jpg.es.js";
+import S from "./assets/pill3.jpg.es.js";
+import M from "./assets/graph1.svg.es.js";
+import O from "./assets/graph2.svg.es.js";
+import G from "./assets/graph3.svg.es.js";
 import a from "./personalizedProtocolHero.module.css.es.js";
-const n = [
+import { EAnalyticsEventType as P, EAnalyticsEvent as k } from "../../types/analytics/analytics.es.js";
+const d = [
   {
-    pill: T,
+    pill: C,
     product: V,
     protocol: "ENERGY",
     dosage: { text: "Oxytocin Nasal Spray", value: "3MG" },
     goal: "REDUCE STRESS",
-    svg: E
+    svg: M
   },
   {
-    pill: S,
-    product: y,
+    pill: E,
+    product: I,
     protocol: "METABOLISM",
     dosage: { text: "Metformin", value: "3MG" },
     goal: "AUTOPHAGY INDUCTION",
-    svg: M
+    svg: O
   },
   {
-    pill: C,
-    product: I,
+    pill: S,
+    product: T,
     protocol: "SENESCENCE",
     dosage: { text: "Rapamycin", value: "3MG" },
     goal: "LONGEVITY",
-    svg: O
+    svg: G
   }
-], L = () => {
-  const [d, u] = m(0), [g, f] = m(0), [r, p] = m(!1);
-  b(() => {
-    const c = setInterval(() => {
-      const i = (d + 1) % n.length;
-      u(i), setTimeout(() => {
+], K = () => {
+  const [c, g] = m(0), [f, v] = m(0), [r, p] = m(!1);
+  y(() => {
+    const s = setInterval(() => {
+      const n = (c + 1) % d.length;
+      g(n), setTimeout(() => {
         p(!0), setTimeout(() => {
-          f(i), p(!1);
+          v(n), p(!1);
         }, 200);
       }, 200);
     }, 2500);
-    return () => clearInterval(c);
-  }, [d]);
-  const s = n[g];
-  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ t("div", { className: a.container, children: [
-    /* @__PURE__ */ t("div", { className: a.leftContent, children: [
+    return () => clearInterval(s);
+  }, [c]);
+  const i = d[f], h = () => {
+    var s;
+    (s = window.eventBus) == null || s.emit("analytics", {
+      event: k.ctaClicked,
+      type: P.interaction,
+      component: "PersonalizedProtocolHero",
+      payload: {
+        link: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948"
+      }
+    });
+  };
+  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ l("div", { className: a.container, children: [
+    /* @__PURE__ */ l("div", { className: a.leftContent, children: [
       /* @__PURE__ */ e("div", { className: a.title, children: /* @__PURE__ */ e(
         x,
         {
@@ -63,49 +74,51 @@ const n = [
           colorScheme: "dark",
           defaultVariant: "displayMd",
           mobileVariant: "displayXs",
-          title: /* @__PURE__ */ t(v, { children: [
+          title: /* @__PURE__ */ l(N, { children: [
             "A longevity protocol that's ",
             /* @__PURE__ */ e("b", { children: "all you" })
           ] })
         }
       ) }),
       /* @__PURE__ */ e(o, { className: a.description, as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: "There's nothing more personal than your health, which is why your Healthspan care team works closely with you — using lab testing, data, and coaching — to design and optimize a protocol to fit your unique goals." }),
-      /* @__PURE__ */ e("div", { className: l(a.buttonWrap, a.mobile), children: /* @__PURE__ */ e(
-        h,
+      /* @__PURE__ */ e("div", { className: t(a.buttonWrap, a.mobile), children: /* @__PURE__ */ e(
+        u,
         {
           as: "a",
           href: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",
           variant: "secondary",
           size: "md",
+          onClick: h,
           children: "Join Healthspan"
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: l(a.buttonWrap, a.desktop), children: /* @__PURE__ */ e(
-        h,
+      /* @__PURE__ */ e("div", { className: t(a.buttonWrap, a.desktop), children: /* @__PURE__ */ e(
+        u,
         {
           as: "a",
           href: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",
           variant: "secondary",
           size: "lg",
+          onClick: h,
           children: "Join Healthspan"
         }
       ) })
     ] }),
-    /* @__PURE__ */ e("div", { className: a.pillContainer, children: n.map((c, i) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: a.pillContainer, children: d.map((s, n) => /* @__PURE__ */ e(
       "img",
       {
-        src: c.pill,
-        className: l(
+        src: s.pill,
+        className: t(
           a.pillImage,
-          i === d && a.active,
-          i === (d - 1 + n.length) % n.length && a.exiting
+          n === c && a.active,
+          n === (c - 1 + d.length) % d.length && a.exiting
         ),
         alt: "Pill"
       },
-      i
+      n
     )) }),
-    /* @__PURE__ */ t("div", { className: a.textContainer, children: [
-      /* @__PURE__ */ t("div", { className: a.protocolContainer, children: [
+    /* @__PURE__ */ l("div", { className: a.textContainer, children: [
+      /* @__PURE__ */ l("div", { className: a.protocolContainer, children: [
         /* @__PURE__ */ e(
           o,
           {
@@ -116,7 +129,7 @@ const n = [
             children: "Protocol"
           }
         ),
-        /* @__PURE__ */ e("div", { className: l(a.protocolFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: t(a.protocolFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
           o,
           {
             className: a.protocolValue,
@@ -124,24 +137,24 @@ const n = [
             defaultVariant: "labelSm",
             mobileVariant: "labelXs",
             emphasis: !0,
-            children: s.protocol
+            children: i.protocol
           }
         ) })
       ] }),
-      /* @__PURE__ */ t("div", { className: a.dosageContainer, children: [
-        /* @__PURE__ */ e("div", { className: l(a.dosageImageFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e("img", { src: s.product, className: a.dosageItem, alt: "Product" }) }),
-        /* @__PURE__ */ t("div", { className: a.dosageTextBlock, children: [
-          /* @__PURE__ */ e("div", { className: l(a.dosageTextFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
+      /* @__PURE__ */ l("div", { className: a.dosageContainer, children: [
+        /* @__PURE__ */ e("div", { className: t(a.dosageImageFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e("img", { src: i.product, className: a.dosageItem, alt: "Product" }) }),
+        /* @__PURE__ */ l("div", { className: a.dosageTextBlock, children: [
+          /* @__PURE__ */ e("div", { className: t(a.dosageTextFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
             o,
             {
               className: a.dosageText,
               as: "p",
               defaultVariant: "labelMd",
               mobileVariant: "labelXs",
-              children: s.dosage.text
+              children: i.dosage.text
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: l(a.dosageValueFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: t(a.dosageValueFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
             o,
             {
               className: a.dosageValue,
@@ -149,14 +162,14 @@ const n = [
               defaultVariant: "labelSm",
               mobileVariant: "labelXs",
               emphasis: !0,
-              children: s.dosage.value
+              children: i.dosage.value
             }
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: a.goalContainer, children: [
+      /* @__PURE__ */ l("div", { className: a.goalContainer, children: [
         /* @__PURE__ */ e(o, { className: a.goalText, as: "p", defaultVariant: "labelMd", mobileVariant: "labelXs", children: "Goal" }),
-        /* @__PURE__ */ e("div", { className: l(a.goalFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: t(a.goalFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
           o,
           {
             className: a.goalValue,
@@ -164,16 +177,16 @@ const n = [
             defaultVariant: "labelSm",
             mobileVariant: "labelXs",
             emphasis: !0,
-            children: s.goal
+            children: i.goal
           }
         ) })
       ] }),
-      /* @__PURE__ */ e("div", { className: a.svgContainer, children: /* @__PURE__ */ e("div", { className: l(a.svgFade, r ? a.fadeOut : a.fadeIn), children: N.createElement(s.svg, {
+      /* @__PURE__ */ e("div", { className: a.svgContainer, children: /* @__PURE__ */ e("div", { className: t(a.svgFade, r ? a.fadeOut : a.fadeIn), children: b.createElement(i.svg, {
         className: a.svg
       }) }) })
     ] })
   ] }) });
 };
 export {
-  L as PersonalizedProtocolHero
+  K as PersonalizedProtocolHero
 };

package/dist/types/analytics/analytics.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var c=(e=>(e.pageView="Page view",e.featuredArticleClicked="Featured article clicked",e.scienceCardClicked="Science card clicked",e.articleCategoryClicked="Article category clicked",e.userSelectedPlan="User selected plan",e.mailchimpSubmitClicked="Mailchimp submit clicked",e.articleScrolledBy="Article scrolled by",e))(c||{}),r=(e=>(e.view="view",e.appearance="appearance",e.interaction="interaction",e))(r||{});exports.EAnalyticsEvent=c;exports.EAnalyticsEventType=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var c=(e=>(e.pageView="Page view",e.featuredArticleClicked="Featured article clicked",e.scienceCardClicked="Science card clicked",e.articleCategoryClicked="Article category clicked",e.userSelectedPlan="User selected plan",e.mailchimpSubmitClicked="Mailchimp submit clicked",e.articleScrolledBy="Article scrolled by",e.ctaClicked="CTA clicked",e.productGalleryCardClicked="Product gallery card clicked",e))(c||{}),r=(e=>(e.view="view",e.appearance="appearance",e.interaction="interaction",e))(r||{});exports.EAnalyticsEvent=c;exports.EAnalyticsEventType=r;

package/dist/types/analytics/analytics.es.js

@@ -1,5 +1,5 @@
-var r = /* @__PURE__ */ ((e) => (e.pageView = "Page view", e.featuredArticleClicked = "Featured article clicked", e.scienceCardClicked = "Science card clicked", e.articleCategoryClicked = "Article category clicked", e.userSelectedPlan = "User selected plan", e.mailchimpSubmitClicked = "Mailchimp submit clicked", e.articleScrolledBy = "Article scrolled by", e))(r || {}), c = /* @__PURE__ */ ((e) => (e.view = "view", e.appearance = "appearance", e.interaction = "interaction", e))(c || {});
+var c = /* @__PURE__ */ ((e) => (e.pageView = "Page view", e.featuredArticleClicked = "Featured article clicked", e.scienceCardClicked = "Science card clicked", e.articleCategoryClicked = "Article category clicked", e.userSelectedPlan = "User selected plan", e.mailchimpSubmitClicked = "Mailchimp submit clicked", e.articleScrolledBy = "Article scrolled by", e.ctaClicked = "CTA clicked", e.productGalleryCardClicked = "Product gallery card clicked", e))(c || {}), r = /* @__PURE__ */ ((e) => (e.view = "view", e.appearance = "appearance", e.interaction = "interaction", e))(r || {});
 export {
-  r as EAnalyticsEvent,
-  c as EAnalyticsEventType
+  c as EAnalyticsEvent,
+  r as EAnalyticsEventType
 };

package/dist/types/analytics.d.ts

@@ -5,7 +5,9 @@ export declare enum EAnalyticsEvent {
     articleCategoryClicked = "Article category clicked",
     userSelectedPlan = "User selected plan",
     mailchimpSubmitClicked = "Mailchimp submit clicked",
-    articleScrolledBy = "Article scrolled by"
+    articleScrolledBy = "Article scrolled by",
+    ctaClicked = "CTA clicked",
+    productGalleryCardClicked = "Product gallery card clicked"
 }
 export declare enum EAnalyticsEventType {
     view = "view",
@@ -14,8 +16,10 @@ export declare enum EAnalyticsEventType {
 }
 export type TBasicAnalyticsEvent = {
     event: EAnalyticsEvent;
-    location: string;
+    location?: string;
     type: EAnalyticsEventType;
+    component?: string;
+    element?: string;
 };
 export type TPageViewEvent = TBasicAnalyticsEvent & {
     event: EAnalyticsEvent.pageView;
@@ -50,6 +54,7 @@ export type TArticleCategoryClickedEvent = TBasicAnalyticsEvent & {
 export type TUserSelectedPlanEvent = TBasicAnalyticsEvent & {
     event: EAnalyticsEvent.userSelectedPlan;
     payload: {
+        productId: string;
         planId: string;
         planPrice?: number;
         planDuration?: string;
@@ -71,6 +76,24 @@ export type TarticleScrolledByEvent = TBasicAnalyticsEvent & {
         articleTitle: string;
     };
 };
+export type TCTAClickedEvent = TBasicAnalyticsEvent & {
+    event: EAnalyticsEvent.ctaClicked;
+    payload: {
+        productId?: string;
+        productName?: string;
+        ctaLabel?: string;
+        ctaLink?: string;
+        selectedPlanId?: string;
+    };
+};
+export type TProductGalleryCardClickedEvent = TBasicAnalyticsEvent & {
+    event: EAnalyticsEvent.productGalleryCardClicked;
+    payload: {
+        zenpatientId: string;
+        link: string;
+        productName: string;
+    };
+};
 export interface IEventBus {
     emitAsync<T>(event: string, ...args: T[]): Promise<void>;
     emit<T>(event: string, ...args: T[]): boolean;
@@ -78,4 +101,4 @@ export interface IEventBus {
     off<T>(event: string, listener: (...args: T[]) => void): IEventBus;
     listeners<T>(event: string): Array<(...args: T[]) => void>;
 }
-export type TAnalyticsEvent = TPageViewEvent | TFeaturedArticleClickedEvent | TScienceCardClickedEvent | TArticleCategoryClickedEvent | TUserSelectedPlanEvent | TMailchimpSubmitClickedEvent | TarticleScrolledByEvent;
+export type TAnalyticsEvent = TPageViewEvent | TFeaturedArticleClickedEvent | TScienceCardClickedEvent | TArticleCategoryClickedEvent | TUserSelectedPlanEvent | TMailchimpSubmitClickedEvent | TarticleScrolledByEvent | TCTAClickedEvent | TProductGalleryCardClickedEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.169",
+    "version": "0.1.171",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",