@zenpatient-org/healthspan-marketing-ui 0.1.47 → 0.1.52

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.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/Button/Button.cjs.js"),n=require("./components/MiddleCarousel/MiddleCarousel.cjs.js"),r=require("../../utils/cn/cn.cjs.js"),a=require("./homepageHero.module.css.cjs.js");function l(){return e.jsxs("section",{className:a.default.root,children:[e.jsx("div",{className:a.default.backgroundImage}),e.jsxs("div",{className:a.default.contentContainer,children:[e.jsx("div",{className:a.default.headline,children:e.jsx(s.HighlightedTitle,{colorScheme:"dark",title:e.jsx(t.Typography,{as:"div",defaultVariant:"displayXs",mobileVariant:"headingLg",children:e.jsxs("p",{children:[e.jsx("b",{children:"Transform your quality of living"})," through the science of aging."]})})})}),e.jsx("div",{className:a.default.carouselArea,children:e.jsx(n.MiddleCarousel,{})}),e.jsxs("div",{className:a.default.callAction,children:[e.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:a.default.text,children:"Achieve levels of health that redefine aging with research-driven protocols tailored to you by leading longevity experts."}),e.jsx("div",{className:r.cn(a.default.buttonWrapper,a.default.desktop),children:e.jsx(i.Button,{as:"a",href:"/join",variant:"secondary",size:"lg",children:"Join Healthspan"})}),e.jsx("div",{className:r.cn(a.default.buttonWrapper,a.default.mobile),children:e.jsx(i.Button,{as:"a",href:"/join",variant:"secondary",size:"md",children:"Join Healthspan"})})]})]})]})}exports.HomepageHero=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/Button/Button.cjs.js"),n=require("./components/MiddleCarousel/MiddleCarousel.cjs.js"),r=require("../../utils/cn/cn.cjs.js"),a=require("./homepageHero.module.css.cjs.js");function o(){return e.jsxs("section",{className:a.default.root,"data-type":"hero",children:[e.jsx("div",{className:a.default.backgroundImage}),e.jsxs("div",{className:a.default.contentContainer,children:[e.jsx("div",{className:a.default.headline,children:e.jsx(s.HighlightedTitle,{colorScheme:"dark",title:e.jsx(t.Typography,{as:"div",defaultVariant:"displayXs",mobileVariant:"headingLg",children:e.jsxs("p",{children:[e.jsx("b",{children:"Transform your quality of living"})," through the science of aging."]})})})}),e.jsx("div",{className:a.default.carouselArea,children:e.jsx(n.MiddleCarousel,{})}),e.jsxs("div",{className:a.default.callAction,children:[e.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:a.default.text,children:"Achieve levels of health that redefine aging with research-driven protocols tailored to you by leading longevity experts."}),e.jsx("div",{className:r.cn(a.default.buttonWrapper,a.default.desktop),children:e.jsx(i.Button,{as:"a",href:"/join",variant:"secondary",size:"lg",children:"Join Healthspan"})}),e.jsx("div",{className:r.cn(a.default.buttonWrapper,a.default.mobile),children:e.jsx(i.Button,{as:"a",href:"/join",variant:"secondary",size:"md",children:"Join Healthspan"})})]})]})]})}exports.HomepageHero=o;
@@ -1,16 +1,16 @@
1
1
  import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
- import { HighlightedTitle as t } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
2
+ import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
3
3
  import { Typography as r } from "../../components/Typography/Typography.es.js";
4
4
  import { Button as o } from "../../components/Button/Button.es.js";
5
5
  import { MiddleCarousel as l } from "./components/MiddleCarousel/MiddleCarousel.es.js";
6
- import { cn as n } from "../../utils/cn/cn.es.js";
6
+ import { cn as t } from "../../utils/cn/cn.es.js";
7
7
  import a from "./homepageHero.module.css.es.js";
8
8
  function f() {
9
- return /* @__PURE__ */ i("section", { className: a.root, children: [
9
+ return /* @__PURE__ */ i("section", { className: a.root, "data-type": "hero", children: [
10
10
  /* @__PURE__ */ e("div", { className: a.backgroundImage }),
11
11
  /* @__PURE__ */ i("div", { className: a.contentContainer, children: [
12
12
  /* @__PURE__ */ e("div", { className: a.headline, children: /* @__PURE__ */ e(
13
- t,
13
+ n,
14
14
  {
15
15
  colorScheme: "dark",
16
16
  title: /* @__PURE__ */ e(r, { as: "div", defaultVariant: "displayXs", mobileVariant: "headingLg", children: /* @__PURE__ */ i("p", { children: [
@@ -22,8 +22,8 @@ function f() {
22
22
  /* @__PURE__ */ e("div", { className: a.carouselArea, children: /* @__PURE__ */ e(l, {}) }),
23
23
  /* @__PURE__ */ i("div", { className: a.callAction, children: [
24
24
  /* @__PURE__ */ e(r, { as: "p", defaultVariant: "bodyLg", mobileVariant: "bodySm", className: a.text, children: "Achieve levels of health that redefine aging with research-driven protocols tailored to you by leading longevity experts." }),
25
- /* @__PURE__ */ e("div", { className: n(a.buttonWrapper, a.desktop), children: /* @__PURE__ */ e(o, { as: "a", href: "/join", variant: "secondary", size: "lg", children: "Join Healthspan" }) }),
26
- /* @__PURE__ */ e("div", { className: n(a.buttonWrapper, a.mobile), children: /* @__PURE__ */ e(o, { as: "a", href: "/join", variant: "secondary", size: "md", children: "Join Healthspan" }) })
25
+ /* @__PURE__ */ e("div", { className: t(a.buttonWrapper, a.desktop), children: /* @__PURE__ */ e(o, { as: "a", href: "/join", variant: "secondary", size: "lg", children: "Join Healthspan" }) }),
26
+ /* @__PURE__ */ e("div", { className: t(a.buttonWrapper, a.mobile), children: /* @__PURE__ */ e(o, { as: "a", href: "/join", variant: "secondary", size: "md", children: "Join Healthspan" }) })
27
27
  ] })
28
28
  ] })
29
29
  ] });
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../components/Typography/Typography.cjs.js"),s=require("./assets/Container.png.cjs.js"),o=require("./assets/people.png.cjs.js"),a=require("./howItWorksHero.module.css.cjs.js"),t=()=>e.jsx("section",{className:a.default.root,"data-type":"hero",children:e.jsxs("div",{className:a.default.container,children:[e.jsx(r.Typography,{className:a.default.headline,as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:"Our simple process to slow the aging process."}),e.jsx("img",{className:a.default.protGraphic,src:s.default,alt:"Measurement Graphics"}),e.jsx("img",{className:a.default.heroFace,src:o.default,alt:"Aging Process Couple"}),e.jsx("div",{className:a.default.rectShade})]})});exports.HowItWorksHero=t;
@@ -0,0 +1,14 @@
1
+ import { jsx as a, jsxs as e } from "react/jsx-runtime";
2
+ import { Typography as s } from "../../components/Typography/Typography.es.js";
3
+ import o from "./assets/Container.png.es.js";
4
+ import i from "./assets/people.png.es.js";
5
+ import r from "./howItWorksHero.module.css.es.js";
6
+ const n = () => /* @__PURE__ */ a("section", { className: r.root, "data-type": "hero", children: /* @__PURE__ */ e("div", { className: r.container, children: [
7
+ /* @__PURE__ */ a(s, { className: r.headline, as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: "Our simple process to slow the aging process." }),
8
+ /* @__PURE__ */ a("img", { className: r.protGraphic, src: o, alt: "Measurement Graphics" }),
9
+ /* @__PURE__ */ a("img", { className: r.heroFace, src: i, alt: "Aging Process Couple" }),
10
+ /* @__PURE__ */ a("div", { className: r.rectShade })
11
+ ] }) });
12
+ export {
13
+ n as HowItWorksHero
14
+ };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("../../components/Button/Button.cjs.js"),r=require("./assets/icon1.png.cjs.js"),c=require("./assets/icon2.png.cjs.js"),n=require("./assets/icon3.png.cjs.js"),d=require("./assets/img1.png.cjs.js"),o=require("./assets/img2.png.cjs.js"),u=require("./assets/img3.png.cjs.js"),m=require("./assets/svg1.svg.cjs.js"),g=require("./assets/svg2.svg.cjs.js"),f=require("./assets/svg3.svg.cjs.js"),a=require("./labsHero.module.css.cjs.js"),p=()=>e.jsxs("section",{className:a.default.root,children:[e.jsxs("div",{className:a.default.container,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(l.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:s.cn(a.default.buttonWrap,a.default.mobile),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/61f89782d9ecee002014f33e",variant:"secondary",size:"md",children:"Get Started"})}),e.jsx("div",{className:s.cn(a.default.buttonWrap,a.default.desktop),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/61f89782d9ecee002014f33e",variant:"secondary",size:"lg",children:"Get Started"})})]}),e.jsxs("div",{className:a.default.animationContainer,children:[e.jsxs("div",{className:s.cn(a.default.imageSet,a.default.active),children:[e.jsx("img",{src:r.default,className:a.default.set1Icon,alt:"Image Icon"}),e.jsx("img",{src:d.default,className:a.default.set1Image,alt:"Product Image"}),e.jsx(m.default,{className:a.default.set1Svg})]}),e.jsxs("div",{className:a.default.imageSet,children:[e.jsx("img",{src:c.default,className:a.default.set2Icon,alt:"Image Icon"}),e.jsx("img",{src:o.default,className:a.default.set2Image,alt:"Product Image"}),e.jsx(g.default,{className:a.default.set2Svg})]}),e.jsxs("div",{className:a.default.imageSet,children:[e.jsx("img",{src:n.default,className:a.default.set3Icon,alt:"Image Icon"}),e.jsx("img",{src:u.default,className:a.default.set3Image,alt:"Product Image"}),e.jsx(f.default,{className:a.default.set3Svg})]})]})]});exports.LabsHero=p;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("../../components/Button/Button.cjs.js"),r=require("./assets/icon1.png.cjs.js"),c=require("./assets/icon2.png.cjs.js"),n=require("./assets/icon3.png.cjs.js"),d=require("./assets/img1.png.cjs.js"),o=require("./assets/img2.png.cjs.js"),u=require("./assets/img3.png.cjs.js"),m=require("./assets/svg1.svg.cjs.js"),g=require("./assets/svg2.svg.cjs.js"),p=require("./assets/svg3.svg.cjs.js"),a=require("./labsHero.module.css.cjs.js"),f=()=>e.jsxs("section",{className:a.default.root,"data-type":"hero",children:[e.jsxs("div",{className:a.default.container,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(l.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:s.cn(a.default.buttonWrap,a.default.mobile),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/61f89782d9ecee002014f33e",variant:"secondary",size:"md",children:"Get Started"})}),e.jsx("div",{className:s.cn(a.default.buttonWrap,a.default.desktop),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/product/signup/61f89782d9ecee002014f33e",variant:"secondary",size:"lg",children:"Get Started"})})]}),e.jsxs("div",{className:a.default.animationContainer,children:[e.jsxs("div",{className:s.cn(a.default.imageSet,a.default.active),children:[e.jsx("img",{src:r.default,className:a.default.set1Icon,alt:"Image Icon"}),e.jsx("img",{src:d.default,className:a.default.set1Image,alt:"Product Image"}),e.jsx(m.default,{className:a.default.set1Svg})]}),e.jsxs("div",{className:a.default.imageSet,children:[e.jsx("img",{src:c.default,className:a.default.set2Icon,alt:"Image Icon"}),e.jsx("img",{src:o.default,className:a.default.set2Image,alt:"Product Image"}),e.jsx(g.default,{className:a.default.set2Svg})]}),e.jsxs("div",{className:a.default.imageSet,children:[e.jsx("img",{src:n.default,className:a.default.set3Icon,alt:"Image Icon"}),e.jsx("img",{src:u.default,className:a.default.set3Image,alt:"Product Image"}),e.jsx(p.default,{className:a.default.set3Svg})]})]})]});exports.LabsHero=f;
@@ -1,5 +1,5 @@
1
- import { jsxs as s, jsx as a, Fragment as r } from "react/jsx-runtime";
2
- import { cn as t } from "../../utils/cn/cn.es.js";
1
+ import { jsxs as t, jsx as a, Fragment as r } from "react/jsx-runtime";
2
+ import { cn as s } from "../../utils/cn/cn.es.js";
3
3
  import { Typography as o } from "../../components/Typography/Typography.es.js";
4
4
  import { HighlightedTitle as m } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
5
5
  import { Button as i } from "../../components/Button/Button.es.js";
@@ -13,8 +13,8 @@ import h from "./assets/svg1.svg.es.js";
13
13
  import f from "./assets/svg2.svg.es.js";
14
14
  import v from "./assets/svg3.svg.es.js";
15
15
  import e from "./labsHero.module.css.es.js";
16
- const M = () => /* @__PURE__ */ s("section", { className: e.root, children: [
17
- /* @__PURE__ */ s("div", { className: e.container, children: [
16
+ const M = () => /* @__PURE__ */ t("section", { className: e.root, "data-type": "hero", children: [
17
+ /* @__PURE__ */ t("div", { className: e.container, children: [
18
18
  /* @__PURE__ */ a("div", { className: e.title, children: /* @__PURE__ */ a(
19
19
  m,
20
20
  {
@@ -22,14 +22,14 @@ const M = () => /* @__PURE__ */ s("section", { className: e.root, children: [
22
22
  colorScheme: "dark",
23
23
  defaultVariant: "displayMd",
24
24
  mobileVariant: "displayXs",
25
- title: /* @__PURE__ */ s(r, { children: [
25
+ title: /* @__PURE__ */ t(r, { children: [
26
26
  "To see results, you need to ",
27
27
  /* @__PURE__ */ a("b", { children: "see your results" })
28
28
  ] })
29
29
  }
30
30
  ) }),
31
31
  /* @__PURE__ */ a(o, { 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." }),
32
- /* @__PURE__ */ a("div", { className: t(e.buttonWrap, e.mobile), children: /* @__PURE__ */ a(
32
+ /* @__PURE__ */ a("div", { className: s(e.buttonWrap, e.mobile), children: /* @__PURE__ */ a(
33
33
  i,
34
34
  {
35
35
  as: "a",
@@ -39,7 +39,7 @@ const M = () => /* @__PURE__ */ s("section", { className: e.root, children: [
39
39
  children: "Get Started"
40
40
  }
41
41
  ) }),
42
- /* @__PURE__ */ a("div", { className: t(e.buttonWrap, e.desktop), children: /* @__PURE__ */ a(
42
+ /* @__PURE__ */ a("div", { className: s(e.buttonWrap, e.desktop), children: /* @__PURE__ */ a(
43
43
  i,
44
44
  {
45
45
  as: "a",
@@ -50,18 +50,18 @@ const M = () => /* @__PURE__ */ s("section", { className: e.root, children: [
50
50
  }
51
51
  ) })
52
52
  ] }),
53
- /* @__PURE__ */ s("div", { className: e.animationContainer, children: [
54
- /* @__PURE__ */ s("div", { className: t(e.imageSet, e.active), children: [
53
+ /* @__PURE__ */ t("div", { className: e.animationContainer, children: [
54
+ /* @__PURE__ */ t("div", { className: s(e.imageSet, e.active), children: [
55
55
  /* @__PURE__ */ a("img", { src: c, className: e.set1Icon, alt: "Image Icon" }),
56
56
  /* @__PURE__ */ a("img", { src: d, className: e.set1Image, alt: "Product Image" }),
57
57
  /* @__PURE__ */ a(h, { className: e.set1Svg })
58
58
  ] }),
59
- /* @__PURE__ */ s("div", { className: e.imageSet, children: [
59
+ /* @__PURE__ */ t("div", { className: e.imageSet, children: [
60
60
  /* @__PURE__ */ a("img", { src: l, className: e.set2Icon, alt: "Image Icon" }),
61
61
  /* @__PURE__ */ a("img", { src: p, className: e.set2Image, alt: "Product Image" }),
62
62
  /* @__PURE__ */ a(f, { className: e.set2Svg })
63
63
  ] }),
64
- /* @__PURE__ */ s("div", { className: e.imageSet, children: [
64
+ /* @__PURE__ */ t("div", { className: e.imageSet, children: [
65
65
  /* @__PURE__ */ a("img", { src: n, className: e.set3Icon, alt: "Image Icon" }),
66
66
  /* @__PURE__ */ a("img", { src: g, className: e.set3Image, alt: "Product Image" }),
67
67
  /* @__PURE__ */ a(v, { className: e.set3Svg })
@@ -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"),f=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.png.cjs.js"),j=require("./assets/pill2.png.cjs.js"),b=require("./assets/pill3.png.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,p]=r.useState(0),[h,g]=r.useState(0),[s,u]=r.useState(!1);r.useEffect(()=>{const c=setInterval(()=>{const o=(i+1)%n.length;p(o),setTimeout(()=>{u(!0),setTimeout(()=>{g(o),u(!1)},300)},800)},5e3);return()=>clearInterval(c)},[i]);const d=n[h];return a.jsx("section",{className:e.default.root,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(f.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(f.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;
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.png.cjs.js"),j=require("./assets/pill2.png.cjs.js"),b=require("./assets/pill3.png.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)},300)},800)},5e3);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;
@@ -54,7 +54,7 @@ const n = [
54
54
  return () => clearInterval(c);
55
55
  }, [d]);
56
56
  const s = n[g];
57
- return /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ t("div", { className: e.container, children: [
57
+ return /* @__PURE__ */ a("section", { className: e.root, "data-type": "hero", children: /* @__PURE__ */ t("div", { className: e.container, children: [
58
58
  /* @__PURE__ */ t("div", { className: e.leftContent, children: [
59
59
  /* @__PURE__ */ a("div", { className: e.title, children: /* @__PURE__ */ a(
60
60
  x,
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),u=require("../../components/Button/Button.cjs.js"),o=require("../../components/Typography/Typography.cjs.js"),c=require("./components/TreatmentHeroCard/TreatmentHeroCard.cjs.js"),t=require("./treatmentsHero.module.css.cjs.js"),d=(r,l)=>r?e.jsx(u.Button,{variant:"primary",as:"a",href:r.link,size:l,children:r.text}):null,h=({title:r,description:l,button:a,cards:n})=>e.jsxs("section",{className:t.default.root,children:[e.jsx("div",{className:t.default.headerContainer,children:e.jsxs("div",{className:t.default.headerContent,children:[e.jsxs("div",{className:t.default.headerText,children:[e.jsx(o.Typography,{as:"h1",defaultVariant:"displayMd",mobileVariant:"headingXl",weight:"regular",children:r}),e.jsx(o.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",weight:"regular",children:l})]}),a&&e.jsx("div",{className:s.cn(t.default.headerButton,t.default.mobile),children:d(a,"md")}),a&&e.jsx("div",{className:s.cn(t.default.headerButton,t.default.desktop),children:d(a,"lg")})]})}),!!(n!=null&&n.length)&&e.jsx("div",{className:t.default.cardsContainer,children:n.map(i=>e.jsx(c.TreatmentHeroCard,{title:i.title,link:i.link,image:i.image},i.link))})]});exports.TreatmentsHero=h;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),u=require("../../components/Button/Button.cjs.js"),o=require("../../components/Typography/Typography.cjs.js"),c=require("./components/TreatmentHeroCard/TreatmentHeroCard.cjs.js"),t=require("./treatmentsHero.module.css.cjs.js"),d=(r,l)=>r?e.jsx(u.Button,{variant:"primary",as:"a",href:r.link,size:l,children:r.text}):null,h=({title:r,description:l,button:a,cards:n})=>e.jsxs("section",{className:t.default.root,"data-type":"hero",children:[e.jsx("div",{className:t.default.headerContainer,children:e.jsxs("div",{className:t.default.headerContent,children:[e.jsxs("div",{className:t.default.headerText,children:[e.jsx(o.Typography,{as:"h1",defaultVariant:"displayMd",mobileVariant:"headingXl",weight:"regular",children:r}),e.jsx(o.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",weight:"regular",children:l})]}),a&&e.jsx("div",{className:s.cn(t.default.headerButton,t.default.mobile),children:d(a,"md")}),a&&e.jsx("div",{className:s.cn(t.default.headerButton,t.default.desktop),children:d(a,"lg")})]})}),!!(n!=null&&n.length)&&e.jsx("div",{className:t.default.cardsContainer,children:n.map(i=>e.jsx(c.TreatmentHeroCard,{title:i.title,link:i.link,image:i.image},i.link))})]});exports.TreatmentsHero=h;
@@ -2,9 +2,9 @@ import { jsxs as m, jsx as r } from "react/jsx-runtime";
2
2
  import { cn as o } from "../../utils/cn/cn.es.js";
3
3
  import { Button as h } from "../../components/Button/Button.es.js";
4
4
  import { Typography as d } from "../../components/Typography/Typography.es.js";
5
- import { TreatmentHeroCard as c } from "./components/TreatmentHeroCard/TreatmentHeroCard.es.js";
5
+ import { TreatmentHeroCard as p } from "./components/TreatmentHeroCard/TreatmentHeroCard.es.js";
6
6
  import e from "./treatmentsHero.module.css.es.js";
7
- const s = (i, n) => i ? /* @__PURE__ */ r(h, { variant: "primary", as: "a", href: i.link, size: n, children: i.text }) : null, N = ({ title: i, description: n, button: a, cards: t }) => /* @__PURE__ */ m("section", { className: e.root, children: [
7
+ const s = (i, n) => i ? /* @__PURE__ */ r(h, { variant: "primary", as: "a", href: i.link, size: n, children: i.text }) : null, N = ({ title: i, description: n, button: a, cards: t }) => /* @__PURE__ */ m("section", { className: e.root, "data-type": "hero", children: [
8
8
  /* @__PURE__ */ r("div", { className: e.headerContainer, children: /* @__PURE__ */ m("div", { className: e.headerContent, children: [
9
9
  /* @__PURE__ */ m("div", { className: e.headerText, children: [
10
10
  /* @__PURE__ */ r(d, { as: "h1", defaultVariant: "displayMd", mobileVariant: "headingXl", weight: "regular", children: i }),
@@ -13,7 +13,7 @@ const s = (i, n) => i ? /* @__PURE__ */ r(h, { variant: "primary", as: "a", href
13
13
  a && /* @__PURE__ */ r("div", { className: o(e.headerButton, e.mobile), children: s(a, "md") }),
14
14
  a && /* @__PURE__ */ r("div", { className: o(e.headerButton, e.desktop), children: s(a, "lg") })
15
15
  ] }) }),
16
- !!(t != null && t.length) && /* @__PURE__ */ r("div", { className: e.cardsContainer, children: t.map((l) => /* @__PURE__ */ r(c, { title: l.title, link: l.link, image: l.image }, l.link)) })
16
+ !!(t != null && t.length) && /* @__PURE__ */ r("div", { className: e.cardsContainer, children: t.map((l) => /* @__PURE__ */ r(p, { title: l.title, link: l.link, image: l.image }, l.link)) })
17
17
  ] });
18
18
  export {
19
19
  N as TreatmentsHero
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zenpatient-org/healthspan-marketing-ui",
3
- "version": "0.1.47",
3
+ "version": "0.1.52",
4
4
  "description": "Design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
@@ -19,7 +19,8 @@
19
19
  "lint:fix": "eslint src --fix",
20
20
  "format": "prettier --write .",
21
21
  "check-format": "prettier --check .",
22
- "prepare": "husky"
22
+ "prepare": "husky",
23
+ "prepublishOnly": "npm run build"
23
24
  },
24
25
  "lint-staged": {
25
26
  "*.{ts,tsx,js,jsx}": [
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../components/Typography/Typography.cjs.js"),a=require("./HowItWorksHero/assets/Container.png.cjs.js"),o=require("./HowItWorksHero/assets/people.png.cjs.js"),s=require("./HowItWorksHero/howItWorksHero.module.css.cjs.js"),t=()=>e.jsx("section",{className:s.default.root,children:e.jsxs("div",{className:s.default.container,children:[e.jsx(r.Typography,{className:s.default.headline,as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:"Our simple process to slow the aging process."}),e.jsx("img",{className:s.default.protGraphic,src:a.default,alt:"Measurement Graphics"}),e.jsx("img",{className:s.default.heroFace,src:o.default,alt:"Aging Process Couple"}),e.jsx("div",{className:s.default.rectShade})]})});exports.HowItWorksHero=t;
@@ -1,14 +0,0 @@
1
- import { jsx as s, jsxs as a } from "react/jsx-runtime";
2
- import { Typography as e } from "../components/Typography/Typography.es.js";
3
- import o from "./HowItWorksHero/assets/Container.png.es.js";
4
- import i from "./HowItWorksHero/assets/people.png.es.js";
5
- import r from "./HowItWorksHero/howItWorksHero.module.css.es.js";
6
- const n = () => /* @__PURE__ */ s("section", { className: r.root, children: /* @__PURE__ */ a("div", { className: r.container, children: [
7
- /* @__PURE__ */ s(e, { className: r.headline, as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: "Our simple process to slow the aging process." }),
8
- /* @__PURE__ */ s("img", { className: r.protGraphic, src: o, alt: "Measurement Graphics" }),
9
- /* @__PURE__ */ s("img", { className: r.heroFace, src: i, alt: "Aging Process Couple" }),
10
- /* @__PURE__ */ s("div", { className: r.rectShade })
11
- ] }) });
12
- export {
13
- n as HowItWorksHero
14
- };