@zenpatient-org/healthspan-marketing-ui 0.2.18 → 0.2.19

package/dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.cjs.js"),o=require("../../components/Button/Button.cjs.js"),s=require("../../src/modules/HomepageHeroV2/homepageHeroV2.module.css"),l=require("../../components/Icon/Icon.cjs.js"),d=require("../../components/Icon/constants.cjs.js"),n=require("../../components/Typography/Typography.cjs.js");function m({title:t,description:i,button:r,buttonInverted:a}){return e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.textContent,children:[e.jsxs("div",{className:s.hsaContainer,children:[e.jsx(l.Icon,{name:d.EIconName.CIRCLE_CHECK,className:s.checkIcon}),e.jsx(n.Typography,{className:s.hsaText,as:"p",defaultVariant:"bodySm",children:"HSA/FSA Eligible"})]}),e.jsx(n.Typography,{className:s.title,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t}),e.jsx(n.Typography,{className:s.description,as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:i}),e.jsxs("div",{className:s.buttonContainer,children:[e.jsx(o.Button,{as:"a",href:r.link,variant:"secondary",size:"md",children:r.text}),a&&e.jsx(o.Button,{as:"a",href:a.link,variant:"muted-invert",size:"md",children:a.text})]})]}),e.jsx("div",{className:s.carouselArea,children:e.jsx(c.MiddleCarousel,{})})]})})}exports.HomepageHeroV2=m;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts

@@ -0,0 +1,13 @@
+export type HomepageHeroV2Props = {
+    title: string;
+    description: string;
+    button: {
+        text: string;
+        link: string;
+    };
+    buttonInverted?: {
+        text: string;
+        link: string;
+    };
+};
+export declare function HomepageHeroV2({ title, description, button, buttonInverted }: HomepageHeroV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.es.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { MiddleCarousel as m } from "../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.es.js";
+import { Button as t } from "../../components/Button/Button.es.js";
+import a from "../../modules/HomepageHeroV2/homepageHeroV2.module.css";
+import { Icon as c } from "../../components/Icon/Icon.es.js";
+import { EIconName as d } from "../../components/Icon/constants.es.js";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+function x({ title: n, description: l, button: o, buttonInverted: r }) {
+  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ i("div", { className: a.container, children: [
+    /* @__PURE__ */ i("div", { className: a.textContent, children: [
+      /* @__PURE__ */ i("div", { className: a.hsaContainer, children: [
+        /* @__PURE__ */ e(c, { name: d.CIRCLE_CHECK, className: a.checkIcon }),
+        /* @__PURE__ */ e(s, { className: a.hsaText, as: "p", defaultVariant: "bodySm", children: "HSA/FSA Eligible" })
+      ] }),
+      /* @__PURE__ */ e(s, { className: a.title, as: "h2", defaultVariant: "displayXs", mobileVariant: "headingLg", children: n }),
+      /* @__PURE__ */ e(s, { className: a.description, as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: l }),
+      /* @__PURE__ */ i("div", { className: a.buttonContainer, children: [
+        /* @__PURE__ */ e(t, { as: "a", href: o.link, variant: "secondary", size: "md", children: o.text }),
+        r && /* @__PURE__ */ e(t, { as: "a", href: r.link, variant: "muted-invert", size: "md", children: r.text })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.carouselArea, children: /* @__PURE__ */ e(m, {}) })
+  ] }) });
+}
+export {
+  x as HomepageHeroV2
+};

package/dist/modules/HomepageHeroV2/homepageHeroV2.module.css

@@ -0,0 +1,125 @@
+.root {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 32px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: var(--content-max-width);
+    align-items: center;
+    border-radius: var(--border-radius-lg);
+    background-image: url('./assets/bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.textContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    color: var(--color-text-primary-inverted);
+    max-width: 480px;
+    margin-left: 88px;
+    margin-bottom: 196px;
+    margin-top: 196px;
+    justify-content: flex-start;
+}
+
+.hsaContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkIcon {
+    margin-top: -2px;
+    width: 20px;
+    height: 20px;
+}
+
+.buttonContainer {
+    display: flex;
+    gap: 12px;
+}
+
+.buttonContainer a {
+    width: fit-content;
+}
+
+.carouselArea {
+    display: flex;
+    position: absolute;
+    width: 360px;
+    height: 540px;
+    left: 50%;
+    transform: translateX(30px);
+    overflow: visible;
+}
+
+@media (width <= 1150px) {
+    .textContent {
+        max-width: 319px;
+        gap: 12px;
+        margin-top: 222px;
+        margin-bottom: 287px;
+        margin-left: 32px;
+    }
+
+    .title {
+        font-size: 32px;
+        line-height: 110%;
+        letter-spacing: -1.28px;
+    }
+
+    .description {
+        font-size: 14px;
+        letter-spacing: -0.28px;
+    }
+
+    .buttonContainer {
+        margin-top: 4px;
+    }
+}
+
+@media (width <= 868px) {
+    .root {
+        padding: 0 4px;
+    }
+
+    .container {
+        background-image: url('./assets/bgmobile.jpg');
+        align-items: center;
+        justify-content: center;
+    }
+
+    .textContent {
+        justify-content: center;
+        text-align: center;
+        margin: unset;
+        margin-top: 221px;
+        padding: 32px 24px;
+        max-width: 510px;
+    }
+
+    .hsaContainer {
+        justify-content: inherit;
+    }
+
+    .buttonContainer {
+        justify-content: inherit;
+    }
+
+    .carouselArea {
+        display: none;
+    }
+}

package/dist/modules/HomepageHeroV2/index.d.ts

@@ -0,0 +1 @@
+export { HomepageHeroV2 } from './HomepageHeroV2';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.18",
+    "version": "0.2.19",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -595,6 +595,11 @@
             "import": "./dist/modules/ScrollingText/ScrollingText.es.js",
             "require": "./dist/modules/ScrollingText/ScrollingText.cjs.js"
         },
+        "./HomepageHeroV2": {
+            "types": "./dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts",
+            "import": "./dist/modules/HomepageHeroV2/HomepageHeroV2.es.js",
+            "require": "./dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",