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

package/dist/pageComponents/Bubbles/bubbles.module.css

@@ -0,0 +1,168 @@
+.root {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    height: 810px;
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 67.2%, var(--color-bg-base-light) 96%), #E2EAEE;
+    padding-top: 40px;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    z-index: 0;
+}
+
+.bubble {
+    position: absolute;
+    border-radius: var(--border-radius-full);
+    background: radial-gradient(
+        circle at 50% 50%,
+        var(--color-midnight-500) 0%,
+        var(--color-midnight-500) 60%,
+        var(--color-navy-500) 98%
+    );
+    box-shadow: -20px -20px 60px 0 var(--color-navy-500);
+    filter: blur(6px);
+    transition: top 3s ease, left 3s ease;
+    will-change: transform, top, left;
+
+    &[data-index="3"],
+    &[data-index="9"],
+    &[data-index="10"],
+    &[data-size="sm"],
+    &[data-size="xl"] {
+        background: var(--color-midnight-500);
+        box-shadow: none;
+    }
+
+    &[data-size="xs"] { width: 182px; height: 182px; }
+    &[data-size="sm"] { width: 314px; height: 314px; }
+    &[data-size="md"] { width: 364px; height: 364px; }
+    &[data-size="lg"] { width: 426px; height: 426px; }
+    &[data-size="xl"] { width: 480px; height: 480px; }
+}
+
+.bubble::before {
+    content: '';
+    position: absolute;
+    inset: -3%;
+    z-index: -1;
+    border-radius: inherit;
+    box-shadow: -20px -20px 60px 0 var(--color-navy-500);
+    filter: blur(20px);
+    pointer-events: none;
+}
+
+.bubble[data-index="3"]::before,
+.bubble[data-index="9"]::before,
+.bubble[data-index="10"]::before,
+.bubble[data-size="sm"]::before,
+.bubble[data-size="xl"]::before {
+    display: none;
+}
+
+.bubble,
+.bubbleReverse {
+    &[data-index="0"]  { top: 27%;  left: 1050px; }
+    &[data-index="1"]  { top: 28.4%; left: 450px; }
+    &[data-index="2"]  { top: 40%; left: 112px; }
+    &[data-index="3"]  { top: 55%; left: 250px; }
+    &[data-index="4"]  { top: 6.3%;  left: 369px; }
+    &[data-index="5"]  { top: 75.9%; left: 474px; }
+    &[data-index="6"]  { top: 50%; left: 1000px; }
+    &[data-index="7"]  { top: 14.8%; left: 0px; }
+    &[data-index="8"] { top: 27.5%; left: 1025px; }
+    &[data-index="9"] { top: 61.4%; left: 1280px; }
+    &[data-index="10"] { top: 50%; left: 1250px; }
+    &[data-index="11"]  { top: 86%; left: 343px; }
+    &[data-index="12"]  { top: 84%; left: -150px; }
+}
+
+.bubbleFinished {
+    &[data-index="0"]  { top: 68%; }
+    &[data-index="1"]  { top: 63%; }
+    &[data-index="2"]  { top: 60%; }
+    &[data-index="3"]  { top: 87.5%; }
+    &[data-index="4"]  { top: 88.4%; }
+    &[data-index="5"]  { top: 95.9%; }
+    &[data-index="6"]  { top: 80%; left: 850px }
+    &[data-index="7"]  { top: 64.8%; }
+    &[data-index="8"]  { top: 47.5%; }
+    &[data-index="9"]  { top: 81.4%; }
+    &[data-index="10"] { top: 45%; }
+    &[data-index="11"] { top: 87%; }
+    &[data-index="12"] { top: 85%; }
+}
+
+
+@media screen and (width < 1024px) {
+    .root {
+        height: 522px;
+    }
+
+    .bubble {
+        transition: top 5s ease, left 5s ease;
+
+        &[data-size="xs"] { width: 131px; height: 131px; }
+        &[data-size="sm"] { width: 197px; height: 197px; }
+        &[data-size="md"] { width: 222px; height: 222px; }
+        &[data-size="lg"] { width: 263px; height: 263px; }
+        &[data-size="xl"] { width: 280px; height: 280px; }
+    }
+
+    .bubble,
+    .bubbleReverse,
+    .bubbleFinished {
+        &[data-index="0"]  { left: 360px; }
+        &[data-index="1"]  { left: 30px; }
+        &[data-index="2"]  { left: 0px; }
+        &[data-index="3"]  { left: 10px; }
+        &[data-index="4"]  { left: 69px; }
+        &[data-index="5"]  { left: 74px; }
+        &[data-index="6"]  { left: 400px; }
+        &[data-index="7"]  { left: 0px; }
+        &[data-index="8"]  { left: 365px; }
+        &[data-index="9"]  { left: 520px; top: 75%}
+        &[data-index="10"] { left: 290px; }
+        &[data-index="11"] { left: 43px; }
+        &[data-index="12"] { left: -150px; }
+    }
+}
+
+@media screen and (width < 768px) {
+    .root {
+        height: 522px;
+    }
+
+    .bubble {
+        transition: top 5s ease, left 5s ease;
+
+        &[data-size="xs"] { width: 91px; height: 91px; }
+        &[data-size="sm"] { width: 157px; height: 157px; }
+        &[data-size="md"] { width: 182px; height: 182px; }
+        &[data-size="lg"] { width: 223px; height: 223px; }
+        &[data-size="xl"] { width: 240px; height: 240px; }
+    }
+
+    .bubble,
+    .bubbleReverse,
+    .bubbleFinished {
+        &[data-index="0"]  { left: 350px; }
+        &[data-index="1"]  { left: 30px; }
+        &[data-index="2"]  { left: 0px; }
+        &[data-index="3"]  { left: 10px; }
+        &[data-index="4"]  { left: 69px; }
+        &[data-index="5"]  { left: 74px; }
+        &[data-index="6"]  { left: 350px; }
+        &[data-index="7"]  { left: 0px; }
+        &[data-index="8"]  { left: 325px; }
+        &[data-index="9"]  { left: 480px; }
+        &[data-index="10"] { left: 250px; }
+        &[data-index="11"] { left: 43px; }
+        &[data-index="12"] { left: -150px; }
+    }
+}

package/dist/pageComponents/ContactUs/ContactUs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../components/Typography/Typography.cjs.js"),t=require("../../components/Button/Button.cjs.js"),n=require("../../utils/cn/cn.cjs.js"),a=require("./contactUs.module.css.cjs.js"),i=()=>e.jsx("div",{className:a.default.root,children:e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.headline,children:[e.jsx(s.Typography,{as:"h2",defaultVariant:"displayLg",mobileVariant:"displayXs",children:"Contact Us"}),e.jsx(s.Typography,{defaultVariant:"headingXl",mobileVariant:"headingXs",children:"From general questions to specific issues, we're eager to chat with you about any aspect of Healthspan."})]}),e.jsxs("div",{className:a.default.itemContainer,children:[e.jsx(s.Typography,{defaultVariant:"headingLg",mobileVariant:"headingSm",children:"Message Us"}),e.jsxs("div",{className:a.default.messageBlock,children:[e.jsx(s.Typography,{className:a.default.messageResponse,defaultVariant:"labelMd",mobileVariant:"labelSm",children:"RESPONSE TYPICALLY WITHIN 24 HOURS"}),e.jsxs(s.Typography,{className:a.default.messageDescription,defaultVariant:"headingMd",mobileVariant:"headingXs",children:["Current and former members are welcome to get in touch at anytime, for any reason.",e.jsx("br",{}),e.jsx("br",{})," Simply log in to your account and send us a message — we're here to help."]}),e.jsx("div",{className:n.cn(a.default.messageButton,a.default.mobile),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/login?redirectPath=/messages",variant:"primary",size:"md",children:"Log In"})}),e.jsx("div",{className:n.cn(a.default.messageButton,a.default.desktop),children:e.jsx(t.Button,{as:"a",href:"https://app.gethealthspan.com/#/login?redirectPath=/messages",variant:"primary",size:"lg",children:"Log In"})})]}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]}),e.jsxs("div",{className:a.default.itemContainer,children:[e.jsx(s.Typography,{defaultVariant:"headingLg",mobileVariant:"headingSm",children:"Submit Question"}),e.jsxs("div",{className:a.default.questionBlock,children:[e.jsx(s.Typography,{className:a.default.questionResponse,defaultVariant:"labelMd",mobileVariant:"labelSm",children:"RESPONSE TYPICALLY 24-72 HOURS"}),e.jsx(s.Typography,{className:a.default.questionDescription,defaultVariant:"headingMd",mobileVariant:"headingXs",children:"Have a question about a Healthspan but you're not a member? Let's talk!"}),e.jsxs("div",{className:a.default.buttonWrap,children:[e.jsx("div",{className:n.cn(a.default.questionButton,a.default.mobile),children:e.jsx(t.Button,{as:"a",href:"https://healthspan.zendesk.com/hc/en-us/requests/new",variant:"primary",size:"md",children:"Send A Message"})}),e.jsx("div",{className:n.cn(a.default.questionButton,a.default.desktop),children:e.jsx(t.Button,{as:"a",href:"https://healthspan.zendesk.com/hc/en-us/requests/new",variant:"primary",size:"lg",children:"Send a Message"})}),e.jsx("div",{className:n.cn(a.default.phoneButton,a.default.mobile),children:e.jsx(t.Button,{as:"a",href:"tel:6505638696",variant:"muted",size:"md",children:"call (650) 563-8696"})}),e.jsx("div",{className:n.cn(a.default.phoneButton,a.default.desktop),children:e.jsx(t.Button,{as:"a",href:"tel:6505638696",variant:"muted",size:"lg",children:"call (650) 563-8696"})})]})]}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]})]})});exports.ContactUs=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn/cn.cjs.js"),a=require("../../src/pageComponents/ContactUs/contactUs.module.css"),s=require("../../components/Typography/Typography.cjs.js"),n=require("../../components/Button/Button.cjs.js"),i=()=>e.jsx("div",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.headline,children:[e.jsx(s.Typography,{as:"h2",defaultVariant:"displayLg",mobileVariant:"displayXs",children:"Contact Us"}),e.jsx(s.Typography,{defaultVariant:"headingXl",mobileVariant:"headingXs",children:"From general questions to specific issues, we're eager to chat with you about any aspect of Healthspan."})]}),e.jsxs("div",{className:a.itemContainer,children:[e.jsx(s.Typography,{defaultVariant:"headingLg",mobileVariant:"headingSm",children:"Message Us"}),e.jsxs("div",{className:a.messageBlock,children:[e.jsx(s.Typography,{className:a.messageResponse,defaultVariant:"labelMd",mobileVariant:"labelSm",children:"RESPONSE TYPICALLY WITHIN 24 HOURS"}),e.jsxs(s.Typography,{className:a.messageDescription,defaultVariant:"headingMd",mobileVariant:"headingXs",children:["Current and former members are welcome to get in touch at anytime, for any reason.",e.jsx("br",{}),e.jsx("br",{})," Simply log in to your account and send us a message — we're here to help."]}),e.jsx("div",{className:t.cn(a.messageButton,a.mobile),children:e.jsx(n.Button,{as:"a",href:"https://app.gethealthspan.com/#/login?redirectPath=/messages",variant:"primary",size:"md",children:"Log In"})}),e.jsx("div",{className:t.cn(a.messageButton,a.desktop),children:e.jsx(n.Button,{as:"a",href:"https://app.gethealthspan.com/#/login?redirectPath=/messages",variant:"primary",size:"lg",children:"Log In"})})]}),e.jsx("div",{className:a.leftBorder}),e.jsx("div",{className:a.rightBorder})]}),e.jsxs("div",{className:a.itemContainer,children:[e.jsx(s.Typography,{defaultVariant:"headingLg",mobileVariant:"headingSm",children:"Submit Question"}),e.jsxs("div",{className:a.questionBlock,children:[e.jsx(s.Typography,{className:a.questionResponse,defaultVariant:"labelMd",mobileVariant:"labelSm",children:"RESPONSE TYPICALLY 24-72 HOURS"}),e.jsx(s.Typography,{className:a.questionDescription,defaultVariant:"headingMd",mobileVariant:"headingXs",children:"Have a question about a Healthspan but you're not a member? Let's talk!"}),e.jsxs("div",{className:a.buttonWrap,children:[e.jsx("div",{className:t.cn(a.questionButton,a.mobile),children:e.jsx(n.Button,{as:"a",href:"https://healthspan.zendesk.com/hc/en-us/requests/new",variant:"primary",size:"md",children:"Send A Message"})}),e.jsx("div",{className:t.cn(a.questionButton,a.desktop),children:e.jsx(n.Button,{as:"a",href:"https://healthspan.zendesk.com/hc/en-us/requests/new",variant:"primary",size:"lg",children:"Send a Message"})}),e.jsx("div",{className:t.cn(a.phoneButton,a.mobile),children:e.jsx(n.Button,{as:"a",href:"tel:6505638696",variant:"muted",size:"md",children:"call (650) 563-8696"})}),e.jsx("div",{className:t.cn(a.phoneButton,a.desktop),children:e.jsx(n.Button,{as:"a",href:"tel:6505638696",variant:"muted",size:"lg",children:"call (650) 563-8696"})})]})]}),e.jsx("div",{className:a.leftBorder}),e.jsx("div",{className:a.rightBorder})]})]})});exports.ContactUs=i;

package/dist/pageComponents/ContactUs/ContactUs.es.js

@@ -1,8 +1,8 @@
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import e from "../../pageComponents/ContactUs/contactUs.module.css";
 import { Typography as i } from "../../components/Typography/Typography.es.js";
-import { Button as t } from "../../components/Button/Button.es.js";
-import { cn as n } from "../../utils/cn/cn.es.js";
-import e from "./contactUs.module.css.es.js";
+import { Button as n } from "../../components/Button/Button.es.js";
 const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PURE__ */ s("div", { className: e.container, children: [
   /* @__PURE__ */ s("div", { className: e.headline, children: [
     /* @__PURE__ */ a(i, { as: "h2", defaultVariant: "displayLg", mobileVariant: "displayXs", children: "Contact Us" }),
@@ -26,8 +26,8 @@ const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PU
           ]
         }
       ),
-      /* @__PURE__ */ a("div", { className: n(e.messageButton, e.mobile), children: /* @__PURE__ */ a(
-        t,
+      /* @__PURE__ */ a("div", { className: t(e.messageButton, e.mobile), children: /* @__PURE__ */ a(
+        n,
         {
           as: "a",
           href: "https://app.gethealthspan.com/#/login?redirectPath=/messages",
@@ -36,8 +36,8 @@ const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PU
           children: "Log In"
         }
       ) }),
-      /* @__PURE__ */ a("div", { className: n(e.messageButton, e.desktop), children: /* @__PURE__ */ a(
-        t,
+      /* @__PURE__ */ a("div", { className: t(e.messageButton, e.desktop), children: /* @__PURE__ */ a(
+        n,
         {
           as: "a",
           href: "https://app.gethealthspan.com/#/login?redirectPath=/messages",
@@ -64,8 +64,8 @@ const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PU
         }
       ),
       /* @__PURE__ */ s("div", { className: e.buttonWrap, children: [
-        /* @__PURE__ */ a("div", { className: n(e.questionButton, e.mobile), children: /* @__PURE__ */ a(
-          t,
+        /* @__PURE__ */ a("div", { className: t(e.questionButton, e.mobile), children: /* @__PURE__ */ a(
+          n,
           {
             as: "a",
             href: "https://healthspan.zendesk.com/hc/en-us/requests/new",
@@ -74,8 +74,8 @@ const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PU
             children: "Send A Message"
           }
         ) }),
-        /* @__PURE__ */ a("div", { className: n(e.questionButton, e.desktop), children: /* @__PURE__ */ a(
-          t,
+        /* @__PURE__ */ a("div", { className: t(e.questionButton, e.desktop), children: /* @__PURE__ */ a(
+          n,
           {
             as: "a",
             href: "https://healthspan.zendesk.com/hc/en-us/requests/new",
@@ -84,8 +84,8 @@ const c = () => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PU
             children: "Send a Message"
           }
         ) }),
-        /* @__PURE__ */ a("div", { className: n(e.phoneButton, e.mobile), children: /* @__PURE__ */ a(t, { as: "a", href: "tel:6505638696", variant: "muted", size: "md", children: "call (650) 563-8696" }) }),
-        /* @__PURE__ */ a("div", { className: n(e.phoneButton, e.desktop), children: /* @__PURE__ */ a(t, { as: "a", href: "tel:6505638696", variant: "muted", size: "lg", children: "call (650) 563-8696" }) })
+        /* @__PURE__ */ a("div", { className: t(e.phoneButton, e.mobile), children: /* @__PURE__ */ a(n, { as: "a", href: "tel:6505638696", variant: "muted", size: "md", children: "call (650) 563-8696" }) }),
+        /* @__PURE__ */ a("div", { className: t(e.phoneButton, e.desktop), children: /* @__PURE__ */ a(n, { as: "a", href: "tel:6505638696", variant: "muted", size: "lg", children: "call (650) 563-8696" }) })
       ] })
     ] }),
     /* @__PURE__ */ a("div", { className: e.leftBorder }),

package/dist/pageComponents/ContactUs/contactUs.module.css

@@ -0,0 +1,152 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    max-width: var(--content-max-width);
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 140px 60px 131px 60px;
+}
+
+.headline {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 960px;
+    margin-bottom: 126px;
+}
+
+.itemContainer:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 12px;
+    right: 12px;
+    height: var(--border-width-sm);
+    background: var(--border-color-alpha-black-10);
+}
+
+.itemContainer:last-child::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 12px;
+    right: 12px;
+    height: var(--border-width-sm);
+    background: var(--border-color-alpha-black-10);
+}
+
+.itemContainer {
+    position: relative;
+    padding: 64px 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.itemContainer .leftBorder,
+.itemContainer .rightBorder {
+    position: absolute;
+    top: 12px;
+    bottom: 12px;
+    width: var(--border-width-sm);
+    background: var(--border-color-alpha-black-10);
+}
+
+.itemContainer .leftBorder {
+    left: 0;
+}
+
+.itemContainer .rightBorder {
+    right: 0;
+}
+
+.messageBlock,
+.questionBlock {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+.messageDescription,
+.questionDescription {
+    margin-top: 12px;
+}
+
+.questionResponse,
+.messageResponse {
+    color: var(--color-text-secondary);
+}
+
+.messageButton {
+    margin-top: 40px;
+    width: fit-content;
+}
+
+.buttonWrap {
+    margin-top: 40px;
+    gap: 16px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mobile {
+    display: none;
+}
+
+.desktop {
+    display: block;
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        padding: 120px 20px 42px 20px;
+    }
+
+    .headline {
+        margin-bottom: 48px;
+    }
+
+    .itemContainer {
+        padding: 24px;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .messageBlock,
+    .questionBlock {
+        width: 100%;
+    }
+
+    .messageResponse,
+    .questionResponse {
+        margin-top: 24px;
+    }
+
+    .messageDescription,
+    .questionDescription {
+        margin-top: 12px;
+    }
+
+    .messageButton {
+        margin-top: 40px;
+        width: fit-content;
+    }
+
+    .mobile {
+        display: block;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/pageComponents/DiscoverTheStory/DiscoverTheStory.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../components/Typography/Typography.cjs.js"),o=require("./assets/content-img.png.cjs.js"),t=require("./discoverTheStory.module.css.cjs.js"),a=()=>e.jsx("div",{className:t.default.root,children:e.jsxs("div",{className:t.default.container,children:[e.jsx("img",{src:o.default,alt:"content image",className:t.default.contentImg}),e.jsxs("div",{className:t.default.contentTextContainer,children:[e.jsx(r.Typography,{defaultVariant:"displayMd",mobileVariant:"headingXl",children:"Discover the story behind your numbers"}),e.jsx(r.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:"Our intuitive interface makes complex biomarker data easy to understand. Personalized reports provide context and meaning to your results, so you can see the full picture of your health."})]})]})});exports.DiscoverTheStory=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./assets/content-img.png.cjs.js"),t=require("../../src/pageComponents/DiscoverTheStory/discoverTheStory.module.css"),r=require("../../components/Typography/Typography.cjs.js"),n=()=>e.jsx("div",{className:t.root,children:e.jsxs("div",{className:t.container,children:[e.jsx("img",{src:o.default,alt:"content image",className:t.contentImg}),e.jsxs("div",{className:t.contentTextContainer,children:[e.jsx(r.Typography,{defaultVariant:"displayMd",mobileVariant:"headingXl",children:"Discover the story behind your numbers"}),e.jsx(r.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:"Our intuitive interface makes complex biomarker data easy to understand. Personalized reports provide context and meaning to your results, so you can see the full picture of your health."})]})]})});exports.DiscoverTheStory=n;

package/dist/pageComponents/DiscoverTheStory/DiscoverTheStory.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
 import a from "./assets/content-img.png.es.js";
-import t from "./discoverTheStory.module.css.es.js";
+import t from "../../pageComponents/DiscoverTheStory/discoverTheStory.module.css";
+import { Typography as o } from "../../components/Typography/Typography.es.js";
 const c = () => /* @__PURE__ */ e("div", { className: t.root, children: /* @__PURE__ */ r("div", { className: t.container, children: [
   /* @__PURE__ */ e("img", { src: a, alt: "content image", className: t.contentImg }),
   /* @__PURE__ */ r("div", { className: t.contentTextContainer, children: [

package/dist/pageComponents/DiscoverTheStory/discoverTheStory.module.css

@@ -0,0 +1,107 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: center / cover no-repeat url('./assets/bg-img.jpg');
+}
+
+.container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 180px;
+    min-height: 810px;
+    position: relative;
+    overflow: hidden;
+}
+
+.contentImg {
+    display: block;
+    max-width: 660px;
+    max-height: 764px;
+    width: auto;
+    height: auto;
+    position: absolute;
+    left: -7px;
+    bottom: -74px;
+}
+
+.contentTextContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    color: var(--color-text-primary-inverted);
+    width: 100%;
+    max-width: 480px;
+    z-index: 10;
+}
+
+@media (width <= 1330px) {
+    .container {
+        padding: 120px;
+    }
+}
+
+@media (width <= 1270px) {
+    .container {
+        padding: 90px;
+    }
+}
+
+@media (width <= 1230px) {
+    .container {
+        padding: 60px;
+    }
+}
+
+@media (width <= 1200px) {
+    .container {
+        padding: 30px;
+    }
+
+    .contentImg {
+        left: -92px;
+        bottom: -88px;
+    }
+}
+
+@media (width <= 1100px) {
+    .contentImg {
+        max-width: 542px;
+    }
+}
+
+@media (width <= 1024px) {
+    .contentImg {
+        max-width: 442px;
+    }
+}
+
+@media (width <= 768px) {
+    .root {
+        background: center / cover no-repeat url('./assets/bg-img-mobile.jpg');
+    }
+
+    .container {
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 45px 20px;
+        min-height: 590px;
+        max-height: 790px;
+    }
+
+    .contentImg {
+        max-width: 442px;
+        max-height: 542px;
+        left: -92px;
+        bottom: -88px;
+    }
+
+    .contentTextContainer {
+        max-width: 100%;
+        margin-bottom: 410px;
+    }
+}

package/dist/pageComponents/Footer/Footer.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("../../components/Icon/Icon.cjs.js");const o=require("../../components/Icon/constants.cjs.js"),s=require("../../components/IconButton/IconButton.cjs.js"),d=require("./components/FooterAbout/FooterAbout.cjs.js"),h=require("./components/FooterLinksBlock/FooterLinksBlock.cjs.js"),j=require("./components/NewsLetter/NewsLetter.cjs.js");require("react");require("../../components/Button/Button.cjs.js");const x=require("./components/TopTreatmentsSlider/TopTreatmentsSlider.cjs.js"),N=require("./components/LinksColumn/LinksColumn.cjs.js"),v=require("./assets/CompanyName.svg.cjs.js"),p=require("../../types/analytics/analytics.cjs.js"),n=require("./footer.module.css.cjs.js"),l={title:"Treatments",content:[{title:"All Treatments",href:"/treatments"},{title:"Personalized Protocols",href:"/personalized-protocols"},{title:"Labs",href:"/labs"},{title:"Medications",href:"/medications"},{title:"Supplements",href:"/supplements"}]},q=({socialMedia:t,products:r,trackingEvent:i,trackingLocation:c})=>{const m=u=>{var a;if(i){const f={event:i,location:c||"",type:p.EAnalyticsEventType.interaction,payload:{email:u,pageTitle:document.title,component:"Footer",element:"NewsLetter"}};(a=window.eventBus)==null||a.emit("analytics",f)}};return e.jsx("footer",{className:n.default.root,children:e.jsxs("div",{className:n.default.container,children:[e.jsxs("div",{className:n.default.content,children:[e.jsx("div",{className:n.default.footerLeft,children:e.jsx(j.NewsLetter,{onSubmit:m})}),e.jsxs("div",{className:n.default.footerRight,children:[e.jsxs("div",{className:n.default.columns,children:[e.jsx(N.LinksColumn,{title:l.title,links:l.content},l.title),r&&(r==null?void 0:r.length)>0&&e.jsx(x.TopTreatmentsSlider,{title:"Top Treatments",products:r})]}),e.jsx("div",{className:n.default.footerLinks,children:e.jsx(h.FooterLinksBlock,{})}),e.jsxs("div",{className:n.default.about,children:[e.jsx(d.FooterAbout,{}),e.jsxs("div",{className:n.default.socials,children:[(t==null?void 0:t.facebook)&&e.jsx("a",{href:t.facebook,target:"_blank",rel:"noopener noreferrer",children:e.jsx(s.IconButton,{iconName:o.EIconName.FACEBOOK,variant:"muted-invert",size:"lg"})}),(t==null?void 0:t.instagram)&&e.jsx("a",{href:t.instagram,target:"_blank",rel:"noopener noreferrer",children:e.jsx(s.IconButton,{iconName:o.EIconName.INSTAGRAM,variant:"muted-invert",size:"lg"})}),(t==null?void 0:t.twitter)&&e.jsx("a",{href:t.twitter,target:"_blank",rel:"noopener noreferrer",children:e.jsx(s.IconButton,{iconName:o.EIconName.X,variant:"muted-invert",size:"lg"})})]})]})]})]}),e.jsx("div",{className:n.default.img,children:e.jsx(v.default,{width:"100%",height:"100%",preserveAspectRatio:"xMidYMid meet"})})]})})};exports.Footer=q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("./assets/CompanyName.svg.cjs.js"),x=require("../../types/analytics/analytics.cjs.js"),n=require("../../src/pageComponents/Footer/footer.module.css"),N=require("./components/NewsLetter/NewsLetter.cjs.js"),f=require("./components/LinksColumn/LinksColumn.cjs.js"),v=require("./components/TopTreatmentsSlider/TopTreatmentsSlider.cjs.js"),p=require("./components/FooterLinksBlock/FooterLinksBlock.cjs.js"),d=require("./components/FooterAbout/FooterAbout.cjs.js"),o=require("../../components/IconButton/IconButton.cjs.js"),s=require("../../components/Icon/constants.cjs.js"),i={title:"Treatments",content:[{title:"All Treatments",href:"/treatments"},{title:"Personalized Protocols",href:"/personalized-protocols"},{title:"Labs",href:"/labs"},{title:"Medications",href:"/medications"},{title:"Supplements",href:"/supplements"}]},b=({socialMedia:t,products:r,trackingEvent:l,trackingLocation:m})=>{const a=u=>{var c;if(l){const h={event:l,location:m||"",type:x.EAnalyticsEventType.interaction,payload:{email:u,pageTitle:document.title,component:"Footer",element:"NewsLetter"}};(c=window.eventBus)==null||c.emit("analytics",h)}};return e.jsx("footer",{className:n.root,children:e.jsxs("div",{className:n.container,children:[e.jsxs("div",{className:n.content,children:[e.jsx("div",{className:n.footerLeft,children:e.jsx(N.NewsLetter,{onSubmit:a})}),e.jsxs("div",{className:n.footerRight,children:[e.jsxs("div",{className:n.columns,children:[e.jsx(f.LinksColumn,{title:i.title,links:i.content},i.title),r&&(r==null?void 0:r.length)>0&&e.jsx(v.TopTreatmentsSlider,{title:"Top Treatments",products:r})]}),e.jsx("div",{className:n.footerLinks,children:e.jsx(p.FooterLinksBlock,{})}),e.jsxs("div",{className:n.about,children:[e.jsx(d.FooterAbout,{}),e.jsxs("div",{className:n.socials,children:[(t==null?void 0:t.facebook)&&e.jsx("a",{href:t.facebook,target:"_blank",rel:"noopener noreferrer",children:e.jsx(o.IconButton,{iconName:s.EIconName.FACEBOOK,variant:"muted-invert",size:"lg"})}),(t==null?void 0:t.instagram)&&e.jsx("a",{href:t.instagram,target:"_blank",rel:"noopener noreferrer",children:e.jsx(o.IconButton,{iconName:s.EIconName.INSTAGRAM,variant:"muted-invert",size:"lg"})}),(t==null?void 0:t.twitter)&&e.jsx("a",{href:t.twitter,target:"_blank",rel:"noopener noreferrer",children:e.jsx(o.IconButton,{iconName:s.EIconName.X,variant:"muted-invert",size:"lg"})})]})]})]})]}),e.jsx("div",{className:n.img,children:e.jsx(j.default,{width:"100%",height:"100%",preserveAspectRatio:"xMidYMid meet"})})]})})};exports.Footer=b;

package/dist/pageComponents/Footer/Footer.es.js

@@ -1,18 +1,15 @@
 "use client";
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import "../../components/Icon/Icon.es.js";
-import { EIconName as m } from "../../components/Icon/constants.es.js";
-import { IconButton as i } from "../../components/IconButton/IconButton.es.js";
-import { FooterAbout as v } from "./components/FooterAbout/FooterAbout.es.js";
-import { FooterLinksBlock as N } from "./components/FooterLinksBlock/FooterLinksBlock.es.js";
+import v from "./assets/CompanyName.svg.es.js";
+import { EAnalyticsEventType as N } from "../../types/analytics/analytics.es.js";
+import r from "../../pageComponents/Footer/footer.module.css";
 import { NewsLetter as d } from "./components/NewsLetter/NewsLetter.es.js";
-import "react";
-import "../../components/Button/Button.es.js";
-import { TopTreatmentsSlider as g } from "./components/TopTreatmentsSlider/TopTreatmentsSlider.es.js";
-import { LinksColumn as b } from "./components/LinksColumn/LinksColumn.es.js";
-import u from "./assets/CompanyName.svg.es.js";
-import { EAnalyticsEventType as k } from "../../types/analytics/analytics.es.js";
-import r from "./footer.module.css.es.js";
+import { LinksColumn as g } from "./components/LinksColumn/LinksColumn.es.js";
+import { TopTreatmentsSlider as b } from "./components/TopTreatmentsSlider/TopTreatmentsSlider.es.js";
+import { FooterLinksBlock as u } from "./components/FooterLinksBlock/FooterLinksBlock.es.js";
+import { FooterAbout as k } from "./components/FooterAbout/FooterAbout.es.js";
+import { IconButton as m } from "../../components/IconButton/IconButton.es.js";
+import { EIconName as i } from "../../components/Icon/constants.es.js";
 const l = {
   title: "Treatments",
   content: [
@@ -22,22 +19,22 @@ const l = {
     { title: "Medications", href: "/medications" },
     { title: "Supplements", href: "/supplements" }
   ]
-}, _ = ({ socialMedia: t, products: o, trackingEvent: s, trackingLocation: c }) => {
-  const f = (p) => {
+}, E = ({ socialMedia: t, products: o, trackingEvent: s, trackingLocation: c }) => {
+  const f = (h) => {
     var a;
     if (s) {
-      const h = {
+      const p = {
         event: s,
         location: c || "",
-        type: k.interaction,
+        type: N.interaction,
         payload: {
-          email: p,
+          email: h,
           pageTitle: document.title,
           component: "Footer",
           element: "NewsLetter"
         }
       };
-      (a = window.eventBus) == null || a.emit("analytics", h);
+      (a = window.eventBus) == null || a.emit("analytics", p);
     }
   };
   return /* @__PURE__ */ e("footer", { className: r.root, children: /* @__PURE__ */ n("div", { className: r.container, children: [
@@ -45,23 +42,23 @@ const l = {
       /* @__PURE__ */ e("div", { className: r.footerLeft, children: /* @__PURE__ */ e(d, { onSubmit: f }) }),
       /* @__PURE__ */ n("div", { className: r.footerRight, children: [
         /* @__PURE__ */ n("div", { className: r.columns, children: [
-          /* @__PURE__ */ e(b, { title: l.title, links: l.content }, l.title),
-          o && (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ e(g, { title: "Top Treatments", products: o })
+          /* @__PURE__ */ e(g, { title: l.title, links: l.content }, l.title),
+          o && (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ e(b, { title: "Top Treatments", products: o })
         ] }),
-        /* @__PURE__ */ e("div", { className: r.footerLinks, children: /* @__PURE__ */ e(N, {}) }),
+        /* @__PURE__ */ e("div", { className: r.footerLinks, children: /* @__PURE__ */ e(u, {}) }),
         /* @__PURE__ */ n("div", { className: r.about, children: [
-          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(k, {}),
           /* @__PURE__ */ n("div", { className: r.socials, children: [
-            (t == null ? void 0 : t.facebook) && /* @__PURE__ */ e("a", { href: t.facebook, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(i, { iconName: m.FACEBOOK, variant: "muted-invert", size: "lg" }) }),
-            (t == null ? void 0 : t.instagram) && /* @__PURE__ */ e("a", { href: t.instagram, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(i, { iconName: m.INSTAGRAM, variant: "muted-invert", size: "lg" }) }),
-            (t == null ? void 0 : t.twitter) && /* @__PURE__ */ e("a", { href: t.twitter, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(i, { iconName: m.X, variant: "muted-invert", size: "lg" }) })
+            (t == null ? void 0 : t.facebook) && /* @__PURE__ */ e("a", { href: t.facebook, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(m, { iconName: i.FACEBOOK, variant: "muted-invert", size: "lg" }) }),
+            (t == null ? void 0 : t.instagram) && /* @__PURE__ */ e("a", { href: t.instagram, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(m, { iconName: i.INSTAGRAM, variant: "muted-invert", size: "lg" }) }),
+            (t == null ? void 0 : t.twitter) && /* @__PURE__ */ e("a", { href: t.twitter, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(m, { iconName: i.X, variant: "muted-invert", size: "lg" }) })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: r.img, children: /* @__PURE__ */ e(u, { width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet" }) })
+    /* @__PURE__ */ e("div", { className: r.img, children: /* @__PURE__ */ e(v, { width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet" }) })
   ] }) });
 };
 export {
-  _ as Footer
+  E as Footer
 };