@zenpatient-org/healthspan-marketing-ui 0.1.170 → 0.2.0

package/dist/pageComponents/HomepageHero/components/MiddleCarousel/cards/protocol.module.css

@@ -0,0 +1,102 @@
+.protocolCard {
+    padding: 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.topContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.textContainer {
+    color: var(--color-solar-200);
+}
+
+.dosageInfo {
+    color: var(--color-white);
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.dosageRate {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.dosageLabel {
+    color: rgba(255, 255, 255, 0.7);
+    white-space: nowrap;
+}
+
+.productName {
+    color: var(--color-white);
+}
+
+.productDosage {
+    color: var(--color-solar-200);
+}
+
+.iconArrow {
+    width: 48px;
+    height: 48px;
+    color: var(--color-solar-200);
+}
+
+.bottomContainer {
+    border-radius: 12px;
+    margin-top: auto;
+    backdrop-filter: blur(10%);
+    -webkit-backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.productCard {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px;
+}
+
+.productImage {
+    width: 90px;
+    height: 90px;
+    background-image: url('./assets/rapamycin.png');
+    background-size: cover;
+    background-position: center;
+    border-radius: var(--border-radius-sm);
+    flex-shrink: 0;
+}
+
+.productInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+@media screen and (width <= 768px) {
+    .protocolCard {
+        padding: 18px;
+        gap: 18px;
+    }
+
+    .productCard {
+        gap: 0;
+        padding: 9px;
+    }
+
+    .productImage {
+        width: 64px;
+        height: 64px;
+    }
+
+    .iconArrow {
+        width: 36px;
+        height: 36px;
+    }
+}

package/dist/pageComponents/HomepageHero/components/MiddleCarousel/middleCarousel.module.css

@@ -0,0 +1,81 @@
+.carousel {
+    position: relative;
+    width: 360px;
+    height: 540px;
+    perspective: 1200px;
+}
+
+.card {
+    position: absolute;
+    width: 360px;
+    height: 540px;
+    border-radius: var(--border-radius-xxl);
+    border: var(--border-width-sm) solid var(--border-color-alpha-white-50);
+    overflow: hidden;
+    transition:
+        transform 1s ease,
+        opacity 0.5s ease;
+    will-change: transform, opacity;
+    opacity: 0.3;
+    z-index: 1;
+    transform-origin: center center;
+}
+
+
+.left {
+    transform: translateX(-450px) rotateY(-15deg) scale(0.9725);
+    opacity: 0.2;
+    z-index: 2;
+}
+
+.center {
+    transform: translateX(0);
+    opacity: 1;
+    z-index: 3;
+    border-color: rgba(255, 255, 255, .6);
+}
+
+.right {
+    transform: translateX(450px) rotateY(15deg) scale(.9725);
+    opacity: 0.2;
+    z-index: 2;
+}
+
+.hidden {
+    transform: translateX(900px);
+    opacity: 0;
+    z-index: 1;
+}
+
+.cardContent {
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.5s ease;
+}
+
+.center .cardContent {
+    opacity: 1;
+    transition-delay: 0.2s;
+}
+
+.left .cardContent,
+.right .cardContent,
+.hidden .cardContent {
+    opacity: 0.2;
+    transition-delay: 0s;
+}
+
+@media screen and (width <= 768px) {
+    .carousel {
+        width: 270px;
+        height: 405px;
+        perspective: 900px;
+    }
+
+    .card {
+        width: 270px;
+        height: 405px;
+        border: var(--border-width-sm) solid var(--border-color-alpha-white-50);
+        border-radius: var(--border-radius-xl);
+    }
+}

package/dist/pageComponents/HomepageHero/homepageHero.module.css

@@ -0,0 +1,140 @@
+.root {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    position: relative;
+    background-image: url('./assets/bg.jpg');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.contentContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-content: center;
+    gap: 48px;
+    width: 100%;
+    max-width: 1200px;
+    min-height: 860px;
+    position: relative;
+    z-index: 2;
+}
+
+.headline {
+    position: relative;
+    width: 360px;
+    margin-right: auto;
+}
+
+.carouselArea {
+    position: absolute;
+    top: 170px;
+    width: 100%;
+    transform: translateX(-50%);
+    left: 50%;
+    height: 540px;
+    overflow: visible;
+    display: flex;
+    justify-content: center;
+}
+
+.callAction {
+    position: relative;
+    width: 360px;
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-left: auto;
+}
+
+.text {
+    color: var(--color-text-primary-inverted);
+}
+
+.buttonWrapper {
+    width: fit-content;
+}
+
+.desktop {
+    display: block;
+}
+
+.mobile {
+    display: none;
+}
+
+@media screen and (width <= 1200px) {
+    .contentContainer {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+        padding: 70px 0 24px;
+    }
+
+    .headline {
+        display: flex;
+        max-width: 700px;
+        width: 100%;
+        margin: 0;
+        text-align: center;
+    }
+
+    .callAction {
+        position: relative;
+        width: 100%;
+        max-width: 800px;
+        margin: 0;
+        align-items: center;
+    }
+
+    .text {
+        text-align: center;
+    }
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        align-items: center;
+        justify-content: center;
+    }
+
+    .contentContainer {
+        min-height: 812px;
+        padding: 92px 0 34px;
+    }
+
+    .headline {
+        max-width: 335px;
+    }
+
+    .carouselArea {
+        top: 217px;
+        width: 270px;
+        left: 50%;
+        transform: translateX(-50%);
+        overflow: visible;
+        display: flex;
+        justify-content: center;
+    }
+
+    .callAction {
+        gap: 16px;
+        max-width: 335px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: block;
+    }
+}

package/dist/pageComponents/HowItWorksHero/HowItWorksHero.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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./assets/Container.png.cjs.js"),a=require("./assets/people.png.cjs.js"),s=require("../../src/pageComponents/HowItWorksHero/howItWorksHero.module.css"),o=require("../../components/Typography/Typography.cjs.js"),t=()=>e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsx(o.Typography,{className:s.headline,as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:"Our simple process to slow the aging process."}),e.jsx("img",{className:s.protGraphic,src:r.default,alt:"Measurement Graphics"}),e.jsx("img",{className:s.heroFace,src:a.default,alt:"Aging Process Couple"}),e.jsx("div",{className:s.rectShade})]})});exports.HowItWorksHero=t;

package/dist/pageComponents/HowItWorksHero/HowItWorksHero.es.js

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as e } from "react/jsx-runtime";
-import { Typography as s } from "../../components/Typography/Typography.es.js";
-import o from "./assets/Container.png.es.js";
-import i from "./assets/people.png.es.js";
-import r from "./howItWorksHero.module.css.es.js";
+import s from "./assets/Container.png.es.js";
+import o from "./assets/people.png.es.js";
+import r from "../../pageComponents/HowItWorksHero/howItWorksHero.module.css";
+import { Typography as i } from "../../components/Typography/Typography.es.js";
 const n = () => /* @__PURE__ */ a("section", { className: r.root, "data-type": "hero", children: /* @__PURE__ */ e("div", { className: r.container, children: [
-  /* @__PURE__ */ a(s, { className: r.headline, as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: "Our simple process to slow the aging process." }),
-  /* @__PURE__ */ a("img", { className: r.protGraphic, src: o, alt: "Measurement Graphics" }),
-  /* @__PURE__ */ a("img", { className: r.heroFace, src: i, alt: "Aging Process Couple" }),
+  /* @__PURE__ */ a(i, { className: r.headline, as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: "Our simple process to slow the aging process." }),
+  /* @__PURE__ */ a("img", { className: r.protGraphic, src: s, alt: "Measurement Graphics" }),
+  /* @__PURE__ */ a("img", { className: r.heroFace, src: o, alt: "Aging Process Couple" }),
   /* @__PURE__ */ a("div", { className: r.rectShade })
 ] }) });
 export {

package/dist/pageComponents/HowItWorksHero/howItWorksHero.module.css

@@ -0,0 +1,84 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: center / cover no-repeat url('./assets/bg.jpg');
+    overflow: hidden;
+}
+
+.container {
+    display: flex;
+    min-height: 1000px;
+    width: 100%;
+    max-width: var(--content-max-width);
+    position: relative;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.heroFace {
+    height: 912px;
+    position: absolute;
+}
+
+.protGraphic {
+    width: 1398px;
+    position: absolute;
+    overflow: visible;
+}
+
+.rectShade {
+    position: absolute;
+    width: 100vw;
+    height: 200px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
+}
+
+.headline {
+    position: relative;
+    text-align: center;
+    margin-bottom: 732px;
+    color: var(--color-white);
+    width: 721px;
+}
+
+.desktop {
+    display: block;
+}
+
+.mobile {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .headline {
+        margin-bottom: 560px;
+        padding: 0 20px;
+        min-width: 335px;
+        width: 100%;
+    }
+
+    .container {
+        min-height: 812px;
+    }
+
+    .heroFace {
+        height: 625px;
+        transform: translateX(24px);
+    }
+
+    .protGraphic {
+        width: 869px;
+        margin-bottom: 39px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: block;
+    }
+}

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

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

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

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