@zenpatient-org/healthspan-marketing-ui 0.1.115 → 0.1.117
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Benefit/Benefit.cjs.js +1 -1
- package/dist/components/Benefit/Benefit.d.ts +1 -1
- package/dist/components/Benefit/Benefit.es.js +7 -7
- package/dist/healthspan-marketing-ui.css +1 -1
- package/dist/modules/FollowTheScience/FollowTheScience.cjs.js +1 -1
- package/dist/modules/FollowTheScience/FollowTheScience.d.ts +1 -1
- package/dist/modules/FollowTheScience/FollowTheScience.es.js +12 -12
- package/dist/modules/OptimalHealth/components/ClockImages/ClockImages.cjs.js +1 -1
- package/dist/modules/OptimalHealth/components/ClockImages/ClockImages.es.js +16 -16
- package/dist/modules/Studies/Studies.cjs.js +1 -1
- package/dist/modules/Studies/Studies.d.ts +2 -1
- package/dist/modules/Studies/Studies.es.js +17 -17
- package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.cjs.js +1 -1
- package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.es.js +3 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css */;/* empty css */;/* empty css */const x=require("../../node_modules/swiper/modules/navigation.cjs.js"),c=require("../../node_modules/swiper/swiper-react.cjs.js"),g=require("../../components/Benefit/Benefit.cjs.js"),f=require("../../components/Icon/constants.cjs.js"),_=require("../../components/Label/Label.cjs.js"),a=require("../../components/ProgressButton/ProgressButton.cjs.js"),q=require("../../components/TextButton/TextButton.cjs.js"),B=require("../../utils/useSwiper/useSwiper.cjs.js"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css */;/* empty css */;/* empty css */const x=require("../../node_modules/swiper/modules/navigation.cjs.js"),c=require("../../node_modules/swiper/swiper-react.cjs.js"),g=require("../../components/Benefit/Benefit.cjs.js"),f=require("../../components/Icon/constants.cjs.js"),_=require("../../components/Label/Label.cjs.js"),a=require("../../components/ProgressButton/ProgressButton.cjs.js"),q=require("../../components/TextButton/TextButton.cjs.js"),B=require("../../utils/useSwiper/useSwiper.cjs.js"),i=require("./followTheScience.module.css.cjs.js"),j=[x.default];function v({labelText:d,benefits:u}){const{setIsEnd:h,isEnd:n,isBeginning:t,hideNav:o,handleSlideChange:p,handlePrevClick:r,handleNextClick:l,onSwiperInit:S,handleSwiperResize:m}=B.useSwiper();return e.jsxs("section",{className:i.default.container,children:[e.jsxs("div",{className:i.default.heading,children:[e.jsx(_.Label,{color:"white",size:"lg",children:d}),!o&&e.jsx("div",{className:i.default.progressButtons,"data-device":"desktop",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:t},right:{disabled:n,onClick:l}})})]}),e.jsx("div",{className:i.default.content,children:e.jsx(c.Swiper,{onSwiper:S,onResize:m,onSlideChange:p,onReachEnd:()=>h(!0),modules:j,spaceBetween:0,slidesPerView:"auto",className:i.default.swiper,children:u.map((s,w)=>e.jsx(c.SwiperSlide,{className:i.default.swiperSlide,children:e.jsx(g.Benefit,{title:s.title,description:s.description,button:s.link?e.jsx(q.TextButton,{as:"a",size:"sm",color:"white",suffixIcon:f.EIconName.ARROW_FORWARD,href:s.link,children:s.buttonText||"READ THE STUDY"}):void 0})},w))})}),!o&&e.jsx("div",{className:i.default.progressButtons,"data-device":"mobile",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:t},right:{onClick:l,disabled:n}})})]})}exports.FollowTheScience=v;
|
|
@@ -6,8 +6,8 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
|
6
6
|
import w from "../../node_modules/swiper/modules/navigation.es.js";
|
|
7
7
|
import { Swiper as g, SwiperSlide as N } from "../../node_modules/swiper/swiper-react.es.js";
|
|
8
8
|
import { Benefit as v } from "../../components/Benefit/Benefit.es.js";
|
|
9
|
-
import { EIconName as
|
|
10
|
-
import { Label as
|
|
9
|
+
import { EIconName as k } from "../../components/Icon/constants.es.js";
|
|
10
|
+
import { Label as R } from "../../components/Label/Label.es.js";
|
|
11
11
|
import { ProgressButton as a } from "../../components/ProgressButton/ProgressButton.es.js";
|
|
12
12
|
import { TextButton as C } from "../../components/TextButton/TextButton.es.js";
|
|
13
13
|
import { useSwiper as E } from "../../utils/useSwiper/useSwiper.es.js";
|
|
@@ -22,12 +22,12 @@ function U({ labelText: c, benefits: m }) {
|
|
|
22
22
|
handleSlideChange: h,
|
|
23
23
|
handlePrevClick: n,
|
|
24
24
|
handleNextClick: l,
|
|
25
|
-
onSwiperInit:
|
|
26
|
-
handleSwiperResize:
|
|
25
|
+
onSwiperInit: u,
|
|
26
|
+
handleSwiperResize: S
|
|
27
27
|
} = E();
|
|
28
28
|
return /* @__PURE__ */ d("section", { className: i.container, children: [
|
|
29
29
|
/* @__PURE__ */ d("div", { className: i.heading, children: [
|
|
30
|
-
/* @__PURE__ */ e(
|
|
30
|
+
/* @__PURE__ */ e(R, { color: "white", size: "lg", children: c }),
|
|
31
31
|
!s && /* @__PURE__ */ e("div", { className: i.progressButtons, "data-device": "desktop", children: /* @__PURE__ */ e(
|
|
32
32
|
a,
|
|
33
33
|
{
|
|
@@ -45,32 +45,32 @@ function U({ labelText: c, benefits: m }) {
|
|
|
45
45
|
/* @__PURE__ */ e("div", { className: i.content, children: /* @__PURE__ */ e(
|
|
46
46
|
g,
|
|
47
47
|
{
|
|
48
|
-
onSwiper:
|
|
49
|
-
onResize:
|
|
48
|
+
onSwiper: u,
|
|
49
|
+
onResize: S,
|
|
50
50
|
onSlideChange: h,
|
|
51
51
|
onReachEnd: () => p(!0),
|
|
52
52
|
modules: x,
|
|
53
53
|
spaceBetween: 0,
|
|
54
54
|
slidesPerView: "auto",
|
|
55
55
|
className: i.swiper,
|
|
56
|
-
children: m.map((o,
|
|
56
|
+
children: m.map((o, f) => /* @__PURE__ */ e(N, { className: i.swiperSlide, children: /* @__PURE__ */ e(
|
|
57
57
|
v,
|
|
58
58
|
{
|
|
59
59
|
title: o.title,
|
|
60
60
|
description: o.description,
|
|
61
|
-
button: /* @__PURE__ */ e(
|
|
61
|
+
button: o.link ? /* @__PURE__ */ e(
|
|
62
62
|
C,
|
|
63
63
|
{
|
|
64
64
|
as: "a",
|
|
65
65
|
size: "sm",
|
|
66
66
|
color: "white",
|
|
67
|
-
suffixIcon:
|
|
67
|
+
suffixIcon: k.ARROW_FORWARD,
|
|
68
68
|
href: o.link,
|
|
69
69
|
children: o.buttonText || "READ THE STUDY"
|
|
70
70
|
}
|
|
71
|
-
)
|
|
71
|
+
) : void 0
|
|
72
72
|
}
|
|
73
|
-
) },
|
|
73
|
+
) }, f))
|
|
74
74
|
}
|
|
75
75
|
) }),
|
|
76
76
|
!s && /* @__PURE__ */ e("div", { className: i.progressButtons, "data-device": "mobile", children: /* @__PURE__ */ e(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("../../../../node_modules/gsap/index.cjs.js"),m=require("react"),n=require("../../../../node_modules/gsap/ScrollTrigger.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),e=require("./clockImages.module.css.cjs.js");g.gsap.registerPlugin(n.ScrollTrigger);const o=[{key:"smallSquareImage1",className:e.default.smallSquareImage,to:{x:100,y:60}},{key:"rectImage2",className:e.default.rectImage,to:{x:70,y:70}},{key:"smallSquareImage3",className:e.default.smallSquareImage,to:{x:40,y:60}},{key:"largeSquareImage4",className:e.default.largeSquareImage,to:{x:-110,y:55}},{key:"rectImage5",className:e.default.rectImage,to:{x:-150,y:69}},{key:"smallSquareImage6",className:e.default.smallSquareImage,to:{x:-100,y:9}},{key:"rectImage7",className:e.default.rectImage,to:{x:-65,y:-100}},{key:"smallSquareImage8",className:e.default.smallSquareImage,to:{x:50,y:-100}},{key:"rectImage9",className:e.default.rectImage,to:{x:50,y:-50}},{key:"largeSquareImage10",className:e.default.largeSquareImage,to:{x:56,y:13}}],y=({images:l})=>{const r=m.useRef(null);return m.useEffect(()=>{r.current&&o.forEach(({key:a,to:t})=>{var c;const s=(c=r.current)==null?void 0:c.querySelector(`[data-ohealth-image-key="${a}"]`);s&&g.gsap.fromTo(s,{x:0,y:0},{x:t.x,y:t.y,duration:5,ease:"power2.out",scrollTrigger:{trigger:r.current,start:"top 80%",end:"+=500",once:!0,scrub:!1,toggleActions:"play none none reverse"}})})},[l]),u.jsx("div",{ref:r,className:e.default.root,children:o.map(({key:a,className:t})=>u.jsx("img",{src:l[a],className:i.cn(e.default.image,t,e.default[a]),"data-ohealth-image-key":a,alt:a},a))})};exports.ClockImages=y;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o } from "react/jsx-runtime";
|
|
3
3
|
import { gsap as g } from "../../../../node_modules/gsap/index.es.js";
|
|
4
|
-
import {
|
|
4
|
+
import { useRef as u, useEffect as n } from "react";
|
|
5
|
+
import { ScrollTrigger as i } from "../../../../node_modules/gsap/ScrollTrigger.es.js";
|
|
6
|
+
import { cn as y } from "../../../../utils/cn/cn.es.js";
|
|
5
7
|
import e from "./clockImages.module.css.es.js";
|
|
6
|
-
|
|
7
|
-
import { useRef as i, useEffect as y } from "react";
|
|
8
|
-
g.registerPlugin(n);
|
|
8
|
+
g.registerPlugin(i);
|
|
9
9
|
const c = [
|
|
10
10
|
{ key: "smallSquareImage1", className: e.smallSquareImage, to: { x: 100, y: 60 } },
|
|
11
11
|
{ key: "rectImage2", className: e.rectImage, to: { x: 70, y: 70 } },
|
|
@@ -17,24 +17,24 @@ const c = [
|
|
|
17
17
|
{ key: "smallSquareImage8", className: e.smallSquareImage, to: { x: 50, y: -100 } },
|
|
18
18
|
{ key: "rectImage9", className: e.rectImage, to: { x: 50, y: -50 } },
|
|
19
19
|
{ key: "largeSquareImage10", className: e.largeSquareImage, to: { x: 56, y: 13 } }
|
|
20
|
-
],
|
|
21
|
-
const r =
|
|
22
|
-
return
|
|
23
|
-
r.current && c.forEach(({ key: a, to:
|
|
20
|
+
], N = ({ images: t }) => {
|
|
21
|
+
const r = u(null);
|
|
22
|
+
return n(() => {
|
|
23
|
+
r.current && c.forEach(({ key: a, to: m }) => {
|
|
24
24
|
var l;
|
|
25
25
|
const s = (l = r.current) == null ? void 0 : l.querySelector(`[data-ohealth-image-key="${a}"]`);
|
|
26
26
|
s && g.fromTo(
|
|
27
27
|
s,
|
|
28
28
|
{ x: 0, y: 0 },
|
|
29
29
|
{
|
|
30
|
-
x:
|
|
31
|
-
y:
|
|
30
|
+
x: m.x,
|
|
31
|
+
y: m.y,
|
|
32
32
|
duration: 5,
|
|
33
33
|
ease: "power2.out",
|
|
34
34
|
scrollTrigger: {
|
|
35
35
|
trigger: r.current,
|
|
36
|
-
start: "
|
|
37
|
-
end: "
|
|
36
|
+
start: "top 80%",
|
|
37
|
+
end: "+=500",
|
|
38
38
|
once: !0,
|
|
39
39
|
scrub: !1,
|
|
40
40
|
toggleActions: "play none none reverse"
|
|
@@ -42,11 +42,11 @@ const c = [
|
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
});
|
|
45
|
-
}, [
|
|
45
|
+
}, [t]), /* @__PURE__ */ o("div", { ref: r, className: e.root, children: c.map(({ key: a, className: m }) => /* @__PURE__ */ o(
|
|
46
46
|
"img",
|
|
47
47
|
{
|
|
48
|
-
src:
|
|
49
|
-
className:
|
|
48
|
+
src: t[a],
|
|
49
|
+
className: y(e.image, m, e[a]),
|
|
50
50
|
"data-ohealth-image-key": a,
|
|
51
51
|
alt: a
|
|
52
52
|
},
|
|
@@ -54,5 +54,5 @@ const c = [
|
|
|
54
54
|
)) });
|
|
55
55
|
};
|
|
56
56
|
export {
|
|
57
|
-
|
|
57
|
+
N as ClockImages
|
|
58
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),h=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),s=require("./studies.module.css.cjs.js");function g({title:o,description:d,articles:l,allStudiesLink:n}){const a=l.reduce((t,i)=>{const r=t[t.length-1];return r.length<2?r.push(i):t.push([i]),t},[[]]);return e.jsx("section",{className:s.default.root,children:e.jsxs("div",{className:s.default.container,children:[e.jsxs("div",{className:s.default.header,children:[e.jsx(c.HighlightedTitle,{title:o}),d&&e.jsx(p.Typography,{as:"p",defaultVariant:"bodyLg",className:s.default.description,children:d}),n&&e.jsx("div",{children:e.jsx(u.Button,{as:"a",variant:"muted",size:"lg",href:n,children:"view all studies"})})]}),e.jsx("div",{className:s.default.articles,children:a.map((t,i)=>e.jsx("div",{className:s.default.row,children:t.map(r=>e.jsx(h.StudyGridCard,{...r},r.title))},i))})]})})}exports.Studies=g;
|
|
@@ -5,5 +5,6 @@ export type StudiesProps = {
|
|
|
5
5
|
title: ReactNode;
|
|
6
6
|
description?: string;
|
|
7
7
|
articles: Array<StudyGridCardProps>;
|
|
8
|
+
allStudiesLink?: string;
|
|
8
9
|
};
|
|
9
|
-
export declare function Studies({ title, description, articles }: StudiesProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function Studies({ title, description, articles, allStudiesLink }: StudiesProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Button as
|
|
3
|
-
import { HighlightedTitle as
|
|
4
|
-
import { StudyGridCard as
|
|
5
|
-
import { Typography as
|
|
1
|
+
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { Button as h } from "../../components/Button/Button.es.js";
|
|
3
|
+
import { HighlightedTitle as p } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
4
|
+
import { StudyGridCard as c } from "../../components/StudyGridCard/StudyGridCard.es.js";
|
|
5
|
+
import { Typography as u } from "../../components/Typography/Typography.es.js";
|
|
6
6
|
import i from "./studies.module.css.es.js";
|
|
7
|
-
function
|
|
8
|
-
const
|
|
9
|
-
(
|
|
10
|
-
const s =
|
|
11
|
-
return s.length < 2 ? s.push(t) :
|
|
7
|
+
function x({ title: l, description: o, articles: m, allStudiesLink: d }) {
|
|
8
|
+
const n = m.reduce(
|
|
9
|
+
(e, t) => {
|
|
10
|
+
const s = e[e.length - 1];
|
|
11
|
+
return s.length < 2 ? s.push(t) : e.push([t]), e;
|
|
12
12
|
},
|
|
13
13
|
[[]]
|
|
14
14
|
);
|
|
15
|
-
return /* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
o && /* @__PURE__ */
|
|
19
|
-
/* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ r("section", { className: i.root, children: /* @__PURE__ */ a("div", { className: i.container, children: [
|
|
16
|
+
/* @__PURE__ */ a("div", { className: i.header, children: [
|
|
17
|
+
/* @__PURE__ */ r(p, { title: l }),
|
|
18
|
+
o && /* @__PURE__ */ r(u, { as: "p", defaultVariant: "bodyLg", className: i.description, children: o }),
|
|
19
|
+
d && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(h, { as: "a", variant: "muted", size: "lg", href: d, children: "view all studies" }) })
|
|
20
20
|
] }),
|
|
21
|
-
/* @__PURE__ */
|
|
21
|
+
/* @__PURE__ */ r("div", { className: i.articles, children: n.map((e, t) => /* @__PURE__ */ r("div", { className: i.row, children: e.map((s) => /* @__PURE__ */ r(c, { ...s }, s.title)) }, t)) })
|
|
22
22
|
] }) });
|
|
23
23
|
}
|
|
24
24
|
export {
|
|
25
|
-
|
|
25
|
+
x as Studies
|
|
26
26
|
};
|
|
@@ -1 +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)},
|
|
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/61f89782d9ecee002014f33e",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/61f89782d9ecee002014f33e",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;
|