@zenpatient-org/healthspan-marketing-ui 0.2.59 → 0.2.61
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/modules/BasicImageText/basicImageText.module.css +5 -1
- package/dist/modules/ImageWithBenefits/imageWithBenefits.module.css +8 -0
- package/dist/modules/ImageWithText/ImageWithText.cjs.js +1 -1
- package/dist/modules/ImageWithText/ImageWithText.es.js +49 -46
- package/dist/modules/ImageWithText/imageWithText.module.css +36 -10
- package/dist/pageComponents/Footer/components/FooterLinksBlock/FooterLinksBlock.cjs.js +1 -1
- package/dist/pageComponents/Footer/components/FooterLinksBlock/FooterLinksBlock.es.js +1 -0
- package/package.json +1 -1
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
display: flex;
|
|
34
34
|
flex-direction: column;
|
|
35
35
|
gap: 32px;
|
|
36
|
+
flex: 1 1 50%;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
.titleContainer {
|
|
@@ -48,6 +49,8 @@
|
|
|
48
49
|
.imageContainer {
|
|
49
50
|
max-width: 600px;
|
|
50
51
|
max-height: 600px;
|
|
52
|
+
flex: 1 1 50%;
|
|
53
|
+
display: flex;
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.image {
|
|
@@ -72,7 +75,8 @@
|
|
|
72
75
|
}
|
|
73
76
|
|
|
74
77
|
@media (width <= 960px) {
|
|
75
|
-
.container,
|
|
78
|
+
.container,
|
|
79
|
+
.container[data-image-position='left'] {
|
|
76
80
|
flex-direction: column;
|
|
77
81
|
gap: 0px;
|
|
78
82
|
}
|
|
@@ -124,12 +124,20 @@
|
|
|
124
124
|
.content {
|
|
125
125
|
padding: 60px 40px;
|
|
126
126
|
}
|
|
127
|
+
.title {
|
|
128
|
+
max-width: 380px;
|
|
129
|
+
font-size: var(--font-size-heading-lg)
|
|
130
|
+
}
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
@media (width < 820px) and (width >= 768px) {
|
|
130
134
|
.content {
|
|
131
135
|
padding: 32px 48px;
|
|
132
136
|
}
|
|
137
|
+
.title {
|
|
138
|
+
max-width: 320px;
|
|
139
|
+
font-size: var(--font-size-heading-md)
|
|
140
|
+
}
|
|
133
141
|
}
|
|
134
142
|
|
|
135
143
|
@media (width <= 768px) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),n=require("./constants.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),n=require("./constants.cjs.js"),e=require("../../src/modules/ImageWithText/imageWithText.module.css"),T=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),b=({image:g,text:t,title:s,view:i,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:e.root,"data-scheme":u,children:a.jsxs("div",{className:e.container,"data-view":i,children:[a.jsxs("div",{className:e.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:e.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:e.mobileImage})]}),a.jsxs("div",{className:j.cn(e.content,{[e.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[i==="complex"&&a.jsxs("div",{className:e.richTextContainer,style:{"--highlight-color-custom":n.COLORS[c||"white"],"--highlight-emphasize-custom":n.COLORS[r||"white"],"--highlight-color-custom-mobile":n.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":n.COLORS[h||"white"]},children:[s&&a.jsx(T.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",title:s,className:e.richTextContainerTitle,defaultVariant:"headingXl",mobileVariant:"headingLg"}),t&&a.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain"&&t&&a.jsxs("div",{className:e.textContainer,children:[a.jsx(l.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:e.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain_with_title"&&a.jsxs("div",{className:e.plainWithTitleContainer,children:[s&&a.jsx(l.Typography,{as:"h3",defaultVariant:"displaySm",className:e.titleOfPlainWithTitle,children:s}),t&&a.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=b;
|
|
@@ -1,90 +1,93 @@
|
|
|
1
1
|
import { jsx as i, jsxs as l } from "react/jsx-runtime";
|
|
2
|
-
import { cn as
|
|
2
|
+
import { cn as x } from "../../utils/cn/cn.es.js";
|
|
3
3
|
import { COLORS as m } from "./constants.es.js";
|
|
4
4
|
import a from "../../modules/ImageWithText/imageWithText.module.css";
|
|
5
|
-
import { HighlightedTitle as
|
|
6
|
-
import { Typography as
|
|
5
|
+
import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
6
|
+
import { Typography as r } from "../../components/Typography/Typography.es.js";
|
|
7
7
|
import { ButtonWithColors as g } from "./components/ButtonWithColors/ButtonWithColors.es.js";
|
|
8
|
-
const
|
|
8
|
+
const L = ({
|
|
9
9
|
image: p,
|
|
10
|
-
text:
|
|
11
|
-
title:
|
|
12
|
-
view:
|
|
13
|
-
colorScheme:
|
|
10
|
+
text: t,
|
|
11
|
+
title: c,
|
|
12
|
+
view: e,
|
|
13
|
+
colorScheme: N,
|
|
14
14
|
textColor: f,
|
|
15
15
|
mobileTextColor: u,
|
|
16
|
-
titleColor:
|
|
17
|
-
mobileTitleColor:
|
|
16
|
+
titleColor: n,
|
|
17
|
+
mobileTitleColor: s,
|
|
18
18
|
titleHighlightColor: o,
|
|
19
|
-
mobileTitleHighlightColor:
|
|
20
|
-
mobileImage:
|
|
19
|
+
mobileTitleHighlightColor: d,
|
|
20
|
+
mobileImage: b,
|
|
21
21
|
button: h
|
|
22
|
-
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme":
|
|
22
|
+
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": e, children: [
|
|
23
23
|
/* @__PURE__ */ l("div", { className: a.imageContainer, children: [
|
|
24
24
|
/* @__PURE__ */ i("img", { src: p, alt: "background image", className: a.image, "data-color": f }),
|
|
25
|
-
/* @__PURE__ */ i("img", { src:
|
|
25
|
+
/* @__PURE__ */ i("img", { src: b || p, alt: "mobile background image", className: a.mobileImage })
|
|
26
26
|
] }),
|
|
27
27
|
/* @__PURE__ */ l(
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
30
|
-
className:
|
|
31
|
-
[a.textAlignLeft]:
|
|
32
|
-
[a.textAlignRight]:
|
|
30
|
+
className: x(a.content, {
|
|
31
|
+
[a.textAlignLeft]: e === "plain" || e === "plain_with_title",
|
|
32
|
+
[a.textAlignRight]: e === "complex"
|
|
33
33
|
}),
|
|
34
|
-
"data-view":
|
|
34
|
+
"data-view": e,
|
|
35
35
|
"data-text-color": f,
|
|
36
36
|
"data-mobile-text-color": u,
|
|
37
|
-
"data-title-color":
|
|
38
|
-
"data-mobile-title-color":
|
|
37
|
+
"data-title-color": n,
|
|
38
|
+
"data-mobile-title-color": s,
|
|
39
39
|
"data-title-highlight-color": o,
|
|
40
|
-
"data-mobile-title-highlight-color":
|
|
40
|
+
"data-mobile-title-highlight-color": d,
|
|
41
41
|
children: [
|
|
42
|
-
|
|
42
|
+
e === "complex" && /* @__PURE__ */ l(
|
|
43
43
|
"div",
|
|
44
44
|
{
|
|
45
45
|
className: a.richTextContainer,
|
|
46
46
|
style: {
|
|
47
|
-
"--highlight-color-custom": m[
|
|
47
|
+
"--highlight-color-custom": m[n || "white"],
|
|
48
48
|
"--highlight-emphasize-custom": m[o || "white"],
|
|
49
|
-
"--highlight-color-custom-mobile": m[
|
|
50
|
-
"--highlight-emphasize-custom-mobile": m[
|
|
49
|
+
"--highlight-color-custom-mobile": m[s || "white"],
|
|
50
|
+
"--highlight-emphasize-custom-mobile": m[d || "white"]
|
|
51
51
|
},
|
|
52
52
|
children: [
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
c && /* @__PURE__ */ i(
|
|
54
|
+
y,
|
|
55
55
|
{
|
|
56
|
-
colorScheme:
|
|
57
|
-
title:
|
|
58
|
-
|
|
56
|
+
colorScheme: n || o || s || d ? "custom" : "dark",
|
|
57
|
+
title: c,
|
|
58
|
+
className: a.richTextContainerTitle,
|
|
59
|
+
defaultVariant: "headingXl",
|
|
59
60
|
mobileVariant: "headingLg"
|
|
60
61
|
}
|
|
61
62
|
),
|
|
62
|
-
|
|
63
|
+
t && /* @__PURE__ */ i(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: t }),
|
|
63
64
|
/* @__PURE__ */ i(g, { ...h })
|
|
64
65
|
]
|
|
65
66
|
}
|
|
66
67
|
),
|
|
67
|
-
|
|
68
|
-
/* @__PURE__ */ i(
|
|
69
|
-
|
|
70
|
-
] }),
|
|
71
|
-
t === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
|
|
72
|
-
r && /* @__PURE__ */ i(
|
|
73
|
-
c,
|
|
68
|
+
e === "plain" && t && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
|
|
69
|
+
/* @__PURE__ */ i(
|
|
70
|
+
r,
|
|
74
71
|
{
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
as: "p",
|
|
73
|
+
defaultVariant: "headingXl",
|
|
74
|
+
mobileVariant: "headingXs",
|
|
75
|
+
className: a.textOfPlain,
|
|
76
|
+
children: t
|
|
79
77
|
}
|
|
80
78
|
),
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
/* @__PURE__ */ i(g, { ...h })
|
|
80
|
+
] }),
|
|
81
|
+
e === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
|
|
82
|
+
c && /* @__PURE__ */ i(r, { as: "h3", defaultVariant: "displaySm", className: a.titleOfPlainWithTitle, children: c }),
|
|
83
|
+
t && /* @__PURE__ */ i(
|
|
84
|
+
r,
|
|
83
85
|
{
|
|
86
|
+
as: "p",
|
|
84
87
|
defaultVariant: "bodyMd",
|
|
85
88
|
mobileVariant: "bodyMd",
|
|
86
89
|
className: a.textOfPlainWithTitle,
|
|
87
|
-
children:
|
|
90
|
+
children: t
|
|
88
91
|
}
|
|
89
92
|
),
|
|
90
93
|
/* @__PURE__ */ i(g, { ...h })
|
|
@@ -94,5 +97,5 @@ const S = ({
|
|
|
94
97
|
)
|
|
95
98
|
] }) });
|
|
96
99
|
export {
|
|
97
|
-
|
|
100
|
+
L as ImageWithText
|
|
98
101
|
};
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
align-items: center;
|
|
17
17
|
width: 100%;
|
|
18
18
|
max-width: var(--content-max-width);
|
|
19
|
-
|
|
19
|
+
margin: 64px 60px 120px;
|
|
20
20
|
position: relative;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.container[data-view='plain_with_title'] {
|
|
24
|
-
|
|
24
|
+
margin: 120px 60px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.content {
|
|
@@ -33,15 +33,16 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.content[data-view='plain_with_title'] {
|
|
36
|
-
|
|
36
|
+
display: block;
|
|
37
|
+
width: 50%;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
.textAlignLeft {
|
|
40
|
-
left:
|
|
41
|
+
left: 0;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
.textAlignRight {
|
|
44
|
-
right:
|
|
45
|
+
right: 0;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
.textContainer {
|
|
@@ -63,7 +64,6 @@
|
|
|
63
64
|
display: flex;
|
|
64
65
|
flex-direction: column;
|
|
65
66
|
gap: 24px;
|
|
66
|
-
max-width: 480px;
|
|
67
67
|
color: var(--color-text-primary-inverted);
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -96,28 +96,49 @@
|
|
|
96
96
|
.content {
|
|
97
97
|
padding: 40px;
|
|
98
98
|
}
|
|
99
|
-
.
|
|
99
|
+
.content[data-view='complex'] {
|
|
100
|
+
padding: 0px 20px;
|
|
101
|
+
}
|
|
102
|
+
.textOfPlain {
|
|
100
103
|
font-size: var(--font-size-heading-lg);
|
|
101
104
|
}
|
|
105
|
+
.richTextContainer {
|
|
106
|
+
max-width: 440px;
|
|
107
|
+
}
|
|
108
|
+
.titleOfPlainWithTitle {
|
|
109
|
+
font-size: var(--font-size-heading-xl);
|
|
110
|
+
}
|
|
102
111
|
}
|
|
103
112
|
|
|
104
113
|
@media (width < 820px) and (width >= 768px) {
|
|
105
114
|
.content {
|
|
106
115
|
padding: 40px 20px;
|
|
107
116
|
}
|
|
108
|
-
.textContainer
|
|
117
|
+
.textContainer {
|
|
118
|
+
font-size: var(--font-size-heading-sm);
|
|
119
|
+
}
|
|
120
|
+
.textOfPlain {
|
|
109
121
|
font-size: var(--font-size-heading-md);
|
|
110
122
|
}
|
|
123
|
+
.richTextContainer {
|
|
124
|
+
max-width: 440px;
|
|
125
|
+
}
|
|
126
|
+
.richTextContainerTitle {
|
|
127
|
+
font-size: var(--font-size-heading-lg);
|
|
128
|
+
}
|
|
129
|
+
.titleOfPlainWithTitle {
|
|
130
|
+
font-size: var(--font-size-heading-lg);
|
|
131
|
+
}
|
|
111
132
|
}
|
|
112
133
|
|
|
113
134
|
@media (width <= 768px) {
|
|
114
135
|
.container[data-view='plain_with_title'] {
|
|
115
|
-
|
|
136
|
+
margin: 64px 20px;
|
|
116
137
|
}
|
|
117
138
|
|
|
118
139
|
.container {
|
|
119
140
|
gap: 20px;
|
|
120
|
-
|
|
141
|
+
margin: 40px 20px;
|
|
121
142
|
}
|
|
122
143
|
|
|
123
144
|
.content {
|
|
@@ -126,6 +147,7 @@
|
|
|
126
147
|
}
|
|
127
148
|
|
|
128
149
|
.content[data-view='plain_with_title'] {
|
|
150
|
+
width: 100%;
|
|
129
151
|
padding: 0;
|
|
130
152
|
}
|
|
131
153
|
|
|
@@ -143,6 +165,10 @@
|
|
|
143
165
|
gap: 16px;
|
|
144
166
|
}
|
|
145
167
|
|
|
168
|
+
.richTextContainerTitle {
|
|
169
|
+
font-size: var(--font-size-heading-xl);
|
|
170
|
+
}
|
|
171
|
+
|
|
146
172
|
.imageContainer {
|
|
147
173
|
border-radius: var(--border-radius-lg);
|
|
148
174
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../src/pageComponents/Footer/components/FooterLinksBlock/footerLinksBlock.module.css"),n=require("../LinksColumn/LinksColumn.cjs.js"),r=require("../AccordionFooter/AccordionFooter.cjs.js"),i=[{title:"ABOUT",content:[{title:"Our Company",href:"/our-company"},{title:"Our Mission",href:"/our-mission"},{title:"How It Works",href:"/how-it-works"}]},{title:"SCIENCE",content:[{title:"Articles",href:"/research"},{title:"Senescence",href:"/science/senescence"},{title:"Metabolism",href:"/science/metabolism"},{title:"Energy",href:"/science/energy"}]},{title:"SUPPORT",content:[{title:"Contact Us",href:"/contact-us"},{title:"FAQs",href:"/faqs"},{title:"Community",href:"https://community.gethealthspan.com"},{title:"Log In",href:"https://app.gethealthspan.com/#/login"}]}],c=({disableLinks:o=!1})=>e.jsxs("div",{className:t.root,children:[e.jsx("div",{className:t.desktop,children:i.map(s=>e.jsx(n.LinksColumn,{title:s.title,links:s.content,className:t.column,disableLinks:o},s.title))}),e.jsx("div",{className:t.mobile,children:e.jsx(r.AccordionFooter,{items:i})})]});exports.FooterLinksBlock=c;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../src/pageComponents/Footer/components/FooterLinksBlock/footerLinksBlock.module.css"),n=require("../LinksColumn/LinksColumn.cjs.js"),r=require("../AccordionFooter/AccordionFooter.cjs.js"),i=[{title:"ABOUT",content:[{title:"Our Company",href:"/our-company"},{title:"Our Mission",href:"/our-mission"},{title:"How It Works",href:"/how-it-works"}]},{title:"SCIENCE",content:[{title:"Articles",href:"/research"},{title:"Senescence",href:"/science/senescence"},{title:"Metabolism",href:"/science/metabolism"},{title:"Energy",href:"/science/energy"}]},{title:"SUPPORT",content:[{title:"(650) 563-8696",href:"tel:+16505638696"},{title:"Contact Us",href:"/contact-us"},{title:"FAQs",href:"/faqs"},{title:"Community",href:"https://community.gethealthspan.com"},{title:"Log In",href:"https://app.gethealthspan.com/#/login"}]}],c=({disableLinks:o=!1})=>e.jsxs("div",{className:t.root,children:[e.jsx("div",{className:t.desktop,children:i.map(s=>e.jsx(n.LinksColumn,{title:s.title,links:s.content,className:t.column,disableLinks:o},s.title))}),e.jsx("div",{className:t.mobile,children:e.jsx(r.AccordionFooter,{items:i})})]});exports.FooterLinksBlock=c;
|
|
@@ -23,6 +23,7 @@ const o = [
|
|
|
23
23
|
{
|
|
24
24
|
title: "SUPPORT",
|
|
25
25
|
content: [
|
|
26
|
+
{ title: "(650) 563-8696", href: "tel:+16505638696" },
|
|
26
27
|
{ title: "Contact Us", href: "/contact-us" },
|
|
27
28
|
{ title: "FAQs", href: "/faqs" },
|
|
28
29
|
{ title: "Community", href: "https://community.gethealthspan.com" },
|