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

package/dist/modules/AllInOne/AllInOne.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),F=require("../../node_modules/@gsap/react/src/index.cjs.js"),e=require("../../node_modules/gsap/index.cjs.js"),E=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),G=require("../../node_modules/gsap/CustomEase.cjs.js"),a=require("react"),k=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),U=require("../../components/Typography/Typography.cjs.js"),A=require("../../utils/cn/cn.cjs.js"),J=require("../CallToAction/CallToAction.cjs.js"),K=require("./allInOneData.cjs.js"),i=require("./allInOne.module.css.cjs.js"),Q=require("../../utils/useIsMobile.cjs.js");e.gsap.registerPlugin(E.ScrollTrigger);e.gsap.registerPlugin(G.CustomEase);const{subtitle:Y,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:se,descriptionText:ie,hsaText:re,buttonText:ne,buttonLink:oe,backgroundImage:le,title1:ae,title2:ce,scrollLabels:v,images:N}=K.default,pe=()=>{const[I,M]=a.useState(!1),T=1300,W=Q.useIsMobile(T),h=a.useRef(null),p=a.useRef(null),S=a.useRef(null),f=a.useRef(null),m=a.useRef(null),b=a.useRef(null),u=a.useRef(null),H=a.useRef(!1),D=e.gsap.matchMedia(),B=a.useCallback(()=>{if(!p.current||!S.current||!h.current||!f.current||!m.current||!b.current||!u.current)return;const r=h.current,n=p.current,l=f.current,o=m.current,d=b.current,L=u.current,q=d.querySelectorAll("p");if(q.length===0)return;q.forEach((c,t)=>{c.style.zIndex=String(q.length-t)});const x=n.querySelectorAll('[data-type="image"]'),j=x.length;x.forEach((c,t)=>{c.style.zIndex=String(j-t)});const y=r.scrollHeight/j,O=.7;j>0&&x.forEach((c,t)=>{const $=t*y,R=(t+1)*y-O*y;e.gsap.fromTo([c,q[t]],{opacity:1},{opacity:0,scrollTrigger:{trigger:r,start:()=>`top+=${$} top`,end:()=>`top+=${R} top`,scrub:!0}})});const C=n.getBoundingClientRect(),P=S.current.getBoundingClientRect(),V=l.getBoundingClientRect(),z=r.getBoundingClientRect();e.gsap.set(d,{y:()=>`${C.bottom-z.top+20}px`}),D.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},c=>{const t=c.conditions,$=t==null?void 0:t.isMobile;(t==null?void 0:t.isDesktop)&&(e.gsap.set(l,{x:()=>`${C.left-V.width-50}px`}),e.gsap.set(o,{x:()=>`${C.right+25}px`})),$&&(e.gsap.set(l,{top:`${C.top-P.top-o.clientHeight-40}px`}),e.gsap.set(o,{top:`${C.top-P.top-o.clientHeight}px`}))}),e.gsap.to(n,{scale:1,ease:"power1.in",scrollTrigger:{trigger:r,start:"top top",end:"100% bottom",scrub:!0,onUpdate:c=>{if(!p.current||!u.current||!l||!o)return;const t=n.getBoundingClientRect();D.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},R=>{const g=R.conditions,w=g==null?void 0:g.isMobile;(g==null?void 0:g.isDesktop)&&(e.gsap.set(l,{x:()=>`${t.left-V.width-50}px`}),e.gsap.set(o,{x:()=>`${t.right+25}px`})),w&&(e.gsap.set(l,{top:()=>`${t.top-o.clientHeight-50}px`}),e.gsap.set(o,{top:()=>`${t.top-50}px`}))}),e.gsap.set(d,{y:`${t.bottom+20}px`});const $=u.current.getBoundingClientRect();if(t.bottom+60>=$.top?e.gsap.to(L,{opacity:0,duration:.3}):e.gsap.to(L,{opacity:1,duration:.3}),c.progress>=.99)e.gsap.to(n,{borderRadius:0,duration:.3,ease:"power1.inOut"}),e.gsap.to(l,{opacity:1}),e.gsap.to(o,{opacity:1}),H.current||(H.current=!0,M(!0),e.gsap.to([x,d.querySelectorAll("p")],{opacity:0,duration:.8,delay:.2,ease:"power2.out",overwrite:!0}));else if(e.gsap.to(n,{borderRadius:999,duration:.3,ease:"power1.inOut"}),e.gsap.to(l,{opacity:1}),e.gsap.to(o,{opacity:1}),H.current){H.current=!1,M(!1),e.gsap.set(n,{borderRadius:999}),e.gsap.killTweensOf([x,d.querySelectorAll("p")]);const R=d.querySelectorAll("p");x.forEach((g,w)=>{const _=w*y,X=(w+1)*y-O*y;e.gsap.fromTo([g,R[w]],{opacity:1},{opacity:0,scrollTrigger:{trigger:r,start:()=>`top+=${_} top`,end:()=>`top+=${X} top`,scrub:!0}})}),E.ScrollTrigger.refresh()}}}})},[p,f,m,b,u,I]);return F.useGSAP(()=>{if(!p.current||!h.current||!f.current||!m||!b.current||!u.current)return;const r=p.current,n=f.current,l=m.current,o=b.current,d=u.current;return W?e.gsap.set(r,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.gsap.set(r,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),B(),()=>{e.gsap.killTweensOf([r,o,n,l,d])}},{scope:h,dependencies:[h,p,f,m,b,B]}),s.jsx("div",{className:i.default.root,children:s.jsx("div",{ref:h,className:i.default.container,children:s.jsxs("div",{ref:S,className:i.default.pillContainerWrapper,children:[s.jsxs("div",{ref:p,className:A.cn("pillContainer",i.default.pillContainer),children:[N==null?void 0:N.map((r,n)=>s.jsx("div",{className:i.default.imageBlock,"data-type":"image",style:{backgroundImage:`url(${r})`}},n)),s.jsx("div",{className:i.default.callToActionContainer,children:I&&s.jsx(J.CallToAction,{subtitle:Y,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:ie,hsaText:re,buttonText:ne,buttonLink:oe,backgroundImage:le})})]}),s.jsx("div",{ref:f,className:i.default.fixedHeader,children:s.jsx(k.HighlightedTitle,{className:i.default.title1,as:"div",defaultVariant:"displayXs",title:ae})}),s.jsx("div",{ref:m,className:i.default.fixedHeader,children:s.jsx(k.HighlightedTitle,{className:i.default.title2,as:"div",defaultVariant:"displayXs",title:ce})}),s.jsx("div",{ref:b,className:A.cn("scrollableLabels",i.default.scrollableLabels),children:v==null?void 0:v.map((r,n)=>s.jsx(U.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:i.default.scrollLabel,children:r},n))}),s.jsx("div",{ref:u,className:A.cn("description",i.default.description),children:s.jsx(k.HighlightedTitle,{as:"div",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:se,className:i.default.descriptionText})})]})})})};exports.AllInOne=pe;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),F=require("@gsap/react"),e=require("gsap"),_=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),G=require("../../node_modules/gsap/CustomEase.cjs.js"),c=require("react"),k=require("../../utils/cn/cn.cjs.js"),U=require("./allInOneData.cjs.js"),r=require("../../src/modules/AllInOne/allInOne.module.css"),J=require("../../utils/useIsMobile.cjs.js"),K=require("../CallToAction/CallToAction.cjs.js"),A=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),Q=require("../../components/Typography/Typography.cjs.js");e.registerPlugin(_.ScrollTrigger);e.registerPlugin(G.CustomEase);const{subtitle:Y,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:ie,descriptionText:re,hsaText:se,buttonText:ne,buttonLink:oe,backgroundImage:le,title1:ce,title2:ae,scrollLabels:v,images:N}=U.default,ue=()=>{const[I,M]=c.useState(!1),T=1300,W=J.useIsMobile(T),h=c.useRef(null),u=c.useRef(null),S=c.useRef(null),f=c.useRef(null),m=c.useRef(null),b=c.useRef(null),p=c.useRef(null),H=c.useRef(!1),D=e.matchMedia(),B=c.useCallback(()=>{if(!u.current||!S.current||!h.current||!f.current||!m.current||!b.current||!p.current)return;const s=h.current,n=u.current,l=f.current,o=m.current,d=b.current,L=p.current,q=d.querySelectorAll("p");if(q.length===0)return;q.forEach((a,t)=>{a.style.zIndex=String(q.length-t)});const x=n.querySelectorAll('[data-type="image"]'),j=x.length;x.forEach((a,t)=>{a.style.zIndex=String(j-t)});const y=s.scrollHeight/j,P=.7;j>0&&x.forEach((a,t)=>{const $=t*y,R=(t+1)*y-P*y;e.fromTo([a,q[t]],{opacity:1},{opacity:0,scrollTrigger:{trigger:s,start:()=>`top+=${$} top`,end:()=>`top+=${R} top`,scrub:!0}})});const C=n.getBoundingClientRect(),V=S.current.getBoundingClientRect(),E=l.getBoundingClientRect(),z=s.getBoundingClientRect();e.set(d,{y:()=>`${C.bottom-z.top+20}px`}),D.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},a=>{const t=a.conditions,$=t==null?void 0:t.isMobile;(t==null?void 0:t.isDesktop)&&(e.set(l,{x:()=>`${C.left-E.width-50}px`}),e.set(o,{x:()=>`${C.right+25}px`})),$&&(e.set(l,{top:`${C.top-V.top-o.clientHeight-40}px`}),e.set(o,{top:`${C.top-V.top-o.clientHeight}px`}))}),e.to(n,{scale:1,ease:"power1.in",scrollTrigger:{trigger:s,start:"top top",end:"100% bottom",scrub:!0,onUpdate:a=>{if(!u.current||!p.current||!l||!o)return;const t=n.getBoundingClientRect();D.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},R=>{const g=R.conditions,w=g==null?void 0:g.isMobile;(g==null?void 0:g.isDesktop)&&(e.set(l,{x:()=>`${t.left-E.width-50}px`}),e.set(o,{x:()=>`${t.right+25}px`})),w&&(e.set(l,{top:()=>`${t.top-o.clientHeight-50}px`}),e.set(o,{top:()=>`${t.top-50}px`}))}),e.set(d,{y:`${t.bottom+20}px`});const $=p.current.getBoundingClientRect();if(t.bottom+60>=$.top?e.to(L,{opacity:0,duration:.3}):e.to(L,{opacity:1,duration:.3}),a.progress>=.99)e.to(n,{borderRadius:0,duration:.3,ease:"power1.inOut"}),e.to(l,{opacity:1}),e.to(o,{opacity:1}),H.current||(H.current=!0,M(!0),e.to([x,d.querySelectorAll("p")],{opacity:0,duration:.8,delay:.2,ease:"power2.out",overwrite:!0}));else if(e.to(n,{borderRadius:999,duration:.3,ease:"power1.inOut"}),e.to(l,{opacity:1}),e.to(o,{opacity:1}),H.current){H.current=!1,M(!1),e.set(n,{borderRadius:999}),e.killTweensOf([x,d.querySelectorAll("p")]);const R=d.querySelectorAll("p");x.forEach((g,w)=>{const O=w*y,X=(w+1)*y-P*y;e.fromTo([g,R[w]],{opacity:1},{opacity:0,scrollTrigger:{trigger:s,start:()=>`top+=${O} top`,end:()=>`top+=${X} top`,scrub:!0}})}),_.ScrollTrigger.refresh()}}}})},[u,f,m,b,p,I]);return F.useGSAP(()=>{if(!u.current||!h.current||!f.current||!m||!b.current||!p.current)return;const s=u.current,n=f.current,l=m.current,o=b.current,d=p.current;return W?e.set(s,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.set(s,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),B(),()=>{e.killTweensOf([s,o,n,l,d])}},{scope:h,dependencies:[h,u,f,m,b,B]}),i.jsx("div",{className:r.root,children:i.jsx("div",{ref:h,className:r.container,children:i.jsxs("div",{ref:S,className:r.pillContainerWrapper,children:[i.jsxs("div",{ref:u,className:k.cn("pillContainer",r.pillContainer),children:[N==null?void 0:N.map((s,n)=>i.jsx("div",{className:r.imageBlock,"data-type":"image",style:{backgroundImage:`url(${s})`}},n)),i.jsx("div",{className:r.callToActionContainer,children:I&&i.jsx(K.CallToAction,{subtitle:Y,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:re,hsaText:se,buttonText:ne,buttonLink:oe,backgroundImage:le})})]}),i.jsx("div",{ref:f,className:r.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:r.title1,as:"div",defaultVariant:"displayXs",title:ce})}),i.jsx("div",{ref:m,className:r.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:r.title2,as:"div",defaultVariant:"displayXs",title:ae})}),i.jsx("div",{ref:b,className:k.cn("scrollableLabels",r.scrollableLabels),children:v==null?void 0:v.map((s,n)=>i.jsx(Q.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:r.scrollLabel,children:s},n))}),i.jsx("div",{ref:p,className:k.cn("description",r.description),children:i.jsx(A.HighlightedTitle,{as:"div",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:ie,className:r.descriptionText})})]})})})};exports.AllInOne=ue;

package/dist/modules/AllInOne/AllInOne.es.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as n, jsxs as j } from "react/jsx-runtime";
-import { useGSAP as U } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as e } from "../../node_modules/gsap/index.es.js";
+import { useGSAP as U } from "@gsap/react";
+import e from "gsap";
 import { ScrollTrigger as z } from "../../node_modules/gsap/ScrollTrigger.es.js";
 import { CustomEase as J } from "../../node_modules/gsap/CustomEase.es.js";
 import { useState as K, useRef as f, useCallback as Q } from "react";
-import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as Y } from "../../components/Typography/Typography.es.js";
-import { cn as A } from "../../utils/cn/cn.es.js";
-import { CallToAction as Z } from "../CallToAction/CallToAction.es.js";
-import _ from "./allInOneData.es.js";
-import r from "./allInOne.module.css.es.js";
-import { useIsMobile as ee } from "../../utils/useIsMobile.es.js";
+import { cn as S } from "../../utils/cn/cn.es.js";
+import Y from "./allInOneData.es.js";
+import r from "../../modules/AllInOne/allInOne.module.css";
+import { useIsMobile as Z } from "../../utils/useIsMobile.es.js";
+import { CallToAction as _ } from "../CallToAction/CallToAction.es.js";
+import { HighlightedTitle as A } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as ee } from "../../components/Typography/Typography.es.js";
 e.registerPlugin(z);
 e.registerPlugin(J);
 const {
@@ -29,21 +29,21 @@ const {
   title2: ue,
   scrollLabels: D,
   images: I
-} = _, ke = () => {
-  const [M, B] = K(!1), C = 1300, X = ee(C), h = f(null), c = f(null), S = f(null), m = f(null), g = f(null), b = f(null), p = f(null), H = f(!1), L = e.matchMedia(), V = Q(() => {
-    if (!c.current || !S.current || !h.current || !m.current || !g.current || !b.current || !p.current)
+} = Y, ke = () => {
+  const [M, B] = K(!1), C = 1300, X = Z(C), h = f(null), c = f(null), v = f(null), m = f(null), g = f(null), b = f(null), p = f(null), H = f(!1), L = e.matchMedia(), V = Q(() => {
+    if (!c.current || !v.current || !h.current || !m.current || !g.current || !b.current || !p.current)
       return;
     const i = h.current, o = c.current, l = m.current, s = g.current, d = b.current, P = p.current, k = d.querySelectorAll("p");
     if (k.length === 0) return;
     k.forEach((a, t) => {
       a.style.zIndex = String(k.length - t);
     });
-    const x = o.querySelectorAll('[data-type="image"]'), v = x.length;
+    const x = o.querySelectorAll('[data-type="image"]'), N = x.length;
     x.forEach((a, t) => {
-      a.style.zIndex = String(v - t);
+      a.style.zIndex = String(N - t);
     });
-    const y = i.scrollHeight / v, E = 0.7;
-    v > 0 && x.forEach((a, t) => {
+    const y = i.scrollHeight / N, E = 0.7;
+    N > 0 && x.forEach((a, t) => {
       const w = t * y, R = (t + 1) * y - E * y;
       e.fromTo(
         [a, k[t]],
@@ -59,7 +59,7 @@ const {
         }
       );
     });
-    const $ = o.getBoundingClientRect(), O = S.current.getBoundingClientRect(), W = l.getBoundingClientRect(), F = i.getBoundingClientRect();
+    const $ = o.getBoundingClientRect(), O = v.current.getBoundingClientRect(), q = l.getBoundingClientRect(), F = i.getBoundingClientRect();
     e.set(d, {
       y: () => `${$.bottom - F.top + 20}px`
     }), L.add(
@@ -70,7 +70,7 @@ const {
       (a) => {
         const t = a.conditions, w = t == null ? void 0 : t.isMobile;
         (t == null ? void 0 : t.isDesktop) && (e.set(l, {
-          x: () => `${$.left - W.width - 50}px`
+          x: () => `${$.left - q.width - 50}px`
         }), e.set(s, {
           x: () => `${$.right + 25}px`
         })), w && (e.set(l, {
@@ -99,7 +99,7 @@ const {
             (R) => {
               const u = R.conditions, T = u == null ? void 0 : u.isMobile;
               (u == null ? void 0 : u.isDesktop) && (e.set(l, {
-                x: () => `${t.left - W.width - 50}px`
+                x: () => `${t.left - q.width - 50}px`
               }), e.set(s, {
                 x: () => `${t.right + 25}px`
               })), T && (e.set(l, {
@@ -132,7 +132,7 @@ const {
             H.current = !1, B(!1), e.set(o, { borderRadius: 999 }), e.killTweensOf([x, d.querySelectorAll("p")]);
             const R = d.querySelectorAll("p");
             x.forEach((u, T) => {
-              const q = T * y, G = (T + 1) * y - E * y;
+              const W = T * y, G = (T + 1) * y - E * y;
               e.fromTo(
                 [u, R[T]],
                 { opacity: 1 },
@@ -140,7 +140,7 @@ const {
                   opacity: 0,
                   scrollTrigger: {
                     trigger: i,
-                    start: () => `top+=${q} top`,
+                    start: () => `top+=${W} top`,
                     end: () => `top+=${G} top`,
                     scrub: !0
                   }
@@ -185,8 +185,8 @@ const {
         V
       ]
     }
-  ), /* @__PURE__ */ n("div", { className: r.root, children: /* @__PURE__ */ n("div", { ref: h, className: r.container, children: /* @__PURE__ */ j("div", { ref: S, className: r.pillContainerWrapper, children: [
-    /* @__PURE__ */ j("div", { ref: c, className: A("pillContainer", r.pillContainer), children: [
+  ), /* @__PURE__ */ n("div", { className: r.root, children: /* @__PURE__ */ n("div", { ref: h, className: r.container, children: /* @__PURE__ */ j("div", { ref: v, className: r.pillContainerWrapper, children: [
+    /* @__PURE__ */ j("div", { ref: c, className: S("pillContainer", r.pillContainer), children: [
       I == null ? void 0 : I.map((i, o) => /* @__PURE__ */ n(
         "div",
         {
@@ -197,7 +197,7 @@ const {
         o
       )),
       /* @__PURE__ */ n("div", { className: r.callToActionContainer, children: M && /* @__PURE__ */ n(
-        Z,
+        _,
         {
           subtitle: te,
           titleTop: re,
@@ -212,7 +212,7 @@ const {
       ) })
     ] }),
     /* @__PURE__ */ n("div", { ref: m, className: r.fixedHeader, children: /* @__PURE__ */ n(
-      N,
+      A,
       {
         className: r.title1,
         as: "div",
@@ -221,7 +221,7 @@ const {
       }
     ) }),
     /* @__PURE__ */ n("div", { ref: g, className: r.fixedHeader, children: /* @__PURE__ */ n(
-      N,
+      A,
       {
         className: r.title2,
         as: "div",
@@ -229,8 +229,8 @@ const {
         title: ue
       }
     ) }),
-    /* @__PURE__ */ n("div", { ref: b, className: A("scrollableLabels", r.scrollableLabels), children: D == null ? void 0 : D.map((i, o) => /* @__PURE__ */ n(
-      Y,
+    /* @__PURE__ */ n("div", { ref: b, className: S("scrollableLabels", r.scrollableLabels), children: D == null ? void 0 : D.map((i, o) => /* @__PURE__ */ n(
+      ee,
       {
         as: "p",
         defaultVariant: "labelLg",
@@ -240,8 +240,8 @@ const {
       },
       o
     )) }),
-    /* @__PURE__ */ n("div", { ref: p, className: A("description", r.description), children: /* @__PURE__ */ n(
-      N,
+    /* @__PURE__ */ n("div", { ref: p, className: S("description", r.description), children: /* @__PURE__ */ n(
+      A,
       {
         as: "div",
         defaultVariant: "preambleMd",

package/dist/modules/AllInOne/allInOne.module.css

@@ -0,0 +1,118 @@
+.root {
+  --navigation-height: 80px;
+
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 100vw;
+  min-height: 700vh;
+}
+
+.pillContainerWrapper {
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow: hidden;
+}
+
+.pillContainer {
+  height: 100%;
+  width: 100%;
+  height: calc(100% - var(--navigation-height));
+  overflow: hidden;
+  border-radius: var(--border-radius-full);
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: var(--navigation-height);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    inset: 0;
+  }
+
+  .callToActionContainer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
+.imageBlock {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center top;
+  position: absolute;
+  pointer-events: none;
+}
+
+.fixedHeader {
+  --half-navigation: calc(var(--navigation-height) / 2);
+  --half-block-height: 24px;
+  position: absolute;
+  top: 50%;
+  top: calc(50% + var(--half-navigation) - var(--half-block-height));
+  align-self: center;
+  transform-origin: center right;
+  overflow: hidden;
+  p {
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  @media (width <= 1299px) {
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    justify-self: center;
+  }
+}
+
+.scrollableLabels {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+
+  p {
+    width: 100%;
+    position: absolute;
+    background-color: var(--color-white);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 600px;
+    letter-spacing: var(--letter-spacing-xxl);
+   font-family: var(--font-decorative);
+    text-transform: uppercase;
+    text-align: center;
+  }
+}
+
+.description {
+  position: absolute;
+  bottom: 2rem;
+  width: 100%;
+
+  .descriptionText {
+    justify-content: center;
+  }
+
+  p {
+    margin: 0 auto;
+    text-align: center;
+    max-width: 600px;
+    text-wrap: pretty;
+  }
+}

package/dist/modules/Benefits/Benefits.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("./components/BenefitTag/BenefitTag.cjs.js"),c=require("./components/BenefitItem/BenefitItem.cjs.js"),h=require("../../components/Typography/Typography.cjs.js"),a=require("./benefits.module.css.cjs.js"),f=({label:o,title:m,image:i,benefits:l,tags:r,colorScheme:d="light"})=>{const u=l.length===1;return e.jsx("section",{className:a.default.root,"data-color-scheme":d,children:u?e.jsx("div",{className:a.default.soloContainer,children:e.jsxs("div",{className:a.default.soloContent,children:[e.jsxs("div",{className:a.default.soloImageWrapper,children:[e.jsx("img",{src:i,alt:"image",className:a.default.soloImage}),r.map((s,t)=>e.jsx(n.BenefitTag,{text:s,className:a.default[`tag${t+1}`]},t))]}),e.jsx("div",{className:a.default.soloItem,children:e.jsx(c.BenefitItem,{index:0,title:l[0].title,description:l[0].description})})]})}):e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(h.Typography,{defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.default.label,children:o}),e.jsx(g.HighlightedTitle,{title:m,colorScheme:d,defaultVariant:"displayMd",mobileVariant:"headingLg"})]}),e.jsxs("div",{className:a.default.content,children:[e.jsxs("div",{className:a.default.imageWrapper,children:[e.jsx("img",{src:i,alt:"image",className:a.default.image}),r.map((s,t)=>e.jsx(n.BenefitTag,{text:s,className:a.default[`tag${t+1}`]},t))]}),e.jsx("div",{className:a.default.benefits,children:l.map((s,t)=>e.jsx(c.BenefitItem,{index:t+1,title:s.title,description:s.description},t))})]})]})})};exports.Benefits=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../src/modules/Benefits/benefits.module.css"),c=require("./components/BenefitTag/BenefitTag.cjs.js"),o=require("./components/BenefitItem/BenefitItem.cjs.js"),h=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),j=({label:m,title:d,image:l,benefits:t,tags:r,colorScheme:n="light"})=>{const g=t.length===1;return e.jsx("section",{className:s.root,"data-color-scheme":n,children:g?e.jsx("div",{className:s.soloContainer,children:e.jsxs("div",{className:s.soloContent,children:[e.jsxs("div",{className:s.soloImageWrapper,children:[e.jsx("img",{src:l,alt:"image",className:s.soloImage}),r.map((a,i)=>e.jsx(c.BenefitTag,{text:a,className:s[`tag${i+1}`]},i))]}),e.jsx("div",{className:s.soloItem,children:e.jsx(o.BenefitItem,{index:0,title:t[0].title,description:t[0].description})})]})}):e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.header,children:[e.jsx(h.Typography,{defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:s.label,children:m}),e.jsx(p.HighlightedTitle,{title:d,colorScheme:n,defaultVariant:"displayMd",mobileVariant:"headingLg"})]}),e.jsxs("div",{className:s.content,children:[e.jsxs("div",{className:s.imageWrapper,children:[e.jsx("img",{src:l,alt:"image",className:s.image}),r.map((a,i)=>e.jsx(c.BenefitTag,{text:a,className:s[`tag${i+1}`]},i))]}),e.jsx("div",{className:s.benefits,children:t.map((a,i)=>e.jsx(o.BenefitItem,{index:i+1,title:a.title,description:a.description},i))})]})]})})};exports.Benefits=j;

package/dist/modules/Benefits/Benefits.es.js

@@ -1,9 +1,9 @@
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { HighlightedTitle as g } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import e from "../../modules/Benefits/benefits.module.css";
 import { BenefitTag as c } from "./components/BenefitTag/BenefitTag.es.js";
 import { BenefitItem as d } from "./components/BenefitItem/BenefitItem.es.js";
-import { Typography as N } from "../../components/Typography/Typography.es.js";
-import e from "./benefits.module.css.es.js";
+import { Typography as g } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 const V = ({ label: n, title: p, image: r, benefits: t, tags: m, colorScheme: o = "light" }) => {
   const h = t.length === 1;
   return /* @__PURE__ */ a("section", { className: e.root, "data-color-scheme": o, children: h ? /* @__PURE__ */ a("div", { className: e.soloContainer, children: /* @__PURE__ */ s("div", { className: e.soloContent, children: [
@@ -14,9 +14,9 @@ const V = ({ label: n, title: p, image: r, benefits: t, tags: m, colorScheme: o
     /* @__PURE__ */ a("div", { className: e.soloItem, children: /* @__PURE__ */ a(d, { index: 0, title: t[0].title, description: t[0].description }) })
   ] }) }) : /* @__PURE__ */ s("div", { className: e.container, children: [
     /* @__PURE__ */ s("div", { className: e.header, children: [
-      /* @__PURE__ */ a(N, { defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: n }),
+      /* @__PURE__ */ a(g, { defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: n }),
       /* @__PURE__ */ a(
-        g,
+        N,
         {
           title: p,
           colorScheme: o,

package/dist/modules/Benefits/benefits.module.css

@@ -0,0 +1,185 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.root[data-color-scheme='dark'] {
+    background-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+.container,
+.soloContainer {
+    padding: var(--spacing-80) var(--spacing-120);
+    max-width: var(--content-max-width);
+    width: 100%;
+}
+
+.soloContainer {
+    padding: 90px 120px 90px 180px;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: var(--spacing-64);
+    text-align: center;
+    text-wrap: balance;
+}
+
+.label {
+    margin-bottom: var(--spacing-20);
+}
+
+.content {
+    display: flex;
+    justify-content: center;
+    gap: 90px;
+}
+
+.soloContent {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.imageWrapper,
+.soloImageWrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+    width: 480px;
+    height: 600px;
+    position: relative;
+    margin-right: 30px;
+}
+
+.soloImageWrapper {
+    width: 480px;
+    margin: 0;
+}
+
+.image,
+.soloImage {
+    display: block;
+    max-width: 480px;
+    max-height: 600px;
+    border-radius: var(--border-radius-full);
+}
+
+.soloImage {
+    max-width: 480px;
+    width: 480px;
+}
+
+.tag1 {
+    top: 60px;
+    right: -32px;
+}
+
+.tag2 {
+    top: 300px;
+    left: 30px;
+}
+
+.tag3 {
+    top: 392px;
+    right: -34px;
+}
+
+.benefits,
+.soloItem {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 32px;
+    width: 100%;
+    max-width: 624px;
+}
+
+.soloItem {
+    gap: 24px;
+    max-width: 452px;
+    margin-left: 120px;
+    margin-right: 120px;
+}
+
+@media (width <= 1024px) {
+    .soloContainer {
+        padding: 80px 20px;
+    }
+
+    .soloContent{
+        align-items: center;
+        justify-content: center;
+        flex-direction: column-reverse;
+        gap: 40px;
+    }
+
+    .container {
+        padding: var(--spacing-40) var(--spacing-20);
+    }
+
+    .header {
+        margin-bottom: 30px;
+    }
+
+    .label {
+        margin-bottom: var(--spacing-16);
+    }
+
+    .content {
+        flex-direction: column;
+        align-items: center;
+        gap: 40px;
+    }
+
+    .benefits {
+        order: 1;
+        gap: 16px;
+    }
+
+    .imageWrapper{
+        order: 2;
+        width: 335px;
+        height: 420px;
+        margin-right: 0;
+    }
+
+    .soloImageWrapper {
+        width: 335px;
+        height: 420px;
+    }
+
+    .soloImage{
+        max-width: 335px;
+    }
+
+    .soloItem{
+        margin: 0;
+    }
+
+    .image {
+        max-width: 335px;
+    }
+
+    .tag1 {
+        top: 42px;
+        right: 7px;
+    }
+
+    .tag2 {
+        top: 210px;
+        left: 20px;
+    }
+
+    .tag3 {
+        top: 273px;
+        right: 29px;
+    }
+}

package/dist/modules/Benefits/components/BenefitItem/BenefitItem.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../../components/Typography/Typography.cjs.js"),e=require("./benefitItem.module.css.cjs.js"),r=require("../../../../utils/cn/cn.cjs.js"),o=({index:l,title:s,description:n,colorScheme:d})=>{const a=l===0;return t.jsxs("div",{className:e.default.benefit,children:[!a&&t.jsx(i.Typography,{defaultVariant:"labelXl",emphasis:!0,className:e.default.benefitIndex,children:`(0${l})`}),t.jsxs("div",{className:r.cn(e.default.benefitDetails,{[e.default.soloDetails]:a}),children:[t.jsx(i.Typography,{defaultVariant:a?"displayXs":"headingLg",mobileVariant:a?"headingXl":"headingXs",className:e.default.benefitTitle,children:s}),t.jsx(i.Typography,{defaultVariant:a?"bodyLg":"bodyMd",mobileVariant:"bodySm",className:e.default.benefitDesc,children:n})]})]})};exports.BenefitItem=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../../src/modules/Benefits/components/BenefitItem/benefitItem.module.css"),r=require("../../../../utils/cn/cn.cjs.js"),i=require("../../../../components/Typography/Typography.cjs.js"),o=({index:t,title:n,description:l,colorScheme:c})=>{const s=t===0;return a.jsxs("div",{className:e.benefit,children:[!s&&a.jsx(i.Typography,{defaultVariant:"labelXl",emphasis:!0,className:e.benefitIndex,children:`(0${t})`}),a.jsxs("div",{className:r.cn(e.benefitDetails,{[e.soloDetails]:s}),children:[a.jsx(i.Typography,{defaultVariant:s?"displayXs":"headingLg",mobileVariant:s?"headingXl":"headingXs",className:e.benefitTitle,children:n}),a.jsx(i.Typography,{defaultVariant:s?"bodyLg":"bodyMd",mobileVariant:"bodySm",className:e.benefitDesc,children:l})]})]})};exports.BenefitItem=o;

package/dist/modules/Benefits/components/BenefitItem/BenefitItem.es.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { Typography as t } from "../../../../components/Typography/Typography.es.js";
-import e from "./benefitItem.module.css.es.js";
+import e from "../../../../modules/Benefits/components/BenefitItem/benefitItem.module.css";
 import { cn as o } from "../../../../utils/cn/cn.es.js";
+import { Typography as t } from "../../../../components/Typography/Typography.es.js";
 const h = ({ index: l, title: r, description: n, colorScheme: m }) => {
   const a = l === 0;
   return /* @__PURE__ */ s("div", { className: e.benefit, children: [

package/dist/modules/Benefits/components/BenefitItem/benefitItem.module.css

@@ -0,0 +1,30 @@
+.benefit {
+    display: flex;
+}
+
+.benefit:not(:last-child) {
+    border-bottom: 1px solid var(--border-color-light);
+    padding-bottom: 32px;
+}
+
+.benefitIndex {
+    display: flex;
+    flex: 0 0 auto;
+    width: 80px;
+}
+
+.benefitDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.soloDetails {
+    gap: 24px;
+}
+
+@media (width <= 768px) {
+    .benefit:not(:last-child) {
+        padding-bottom: 16px;
+    }
+}

package/dist/modules/Benefits/components/BenefitTag/BenefitTag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./benefitTag.module.css.cjs.js"),n=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),o=({text:t,className:a})=>e.jsx("div",{className:i.cn(r.default.root,a),children:e.jsx(n.Typography,{emphasis:!0,defaultVariant:"labelLg",mobileVariant:"labelSm",className:r.default.benefitTag,children:t})});exports.BenefitTag=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../src/modules/Benefits/components/BenefitTag/benefitTag.module.css"),a=require("../../../../utils/cn/cn.cjs.js"),s=require("../../../../components/Typography/Typography.cjs.js"),i=({text:r,className:n})=>e.jsx("div",{className:a.cn(t.root,n),children:e.jsx(s.Typography,{emphasis:!0,defaultVariant:"labelLg",mobileVariant:"labelSm",className:t.benefitTag,children:r})});exports.BenefitTag=i;

package/dist/modules/Benefits/components/BenefitTag/BenefitTag.es.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import e from "./benefitTag.module.css.es.js";
-import { Typography as o } from "../../../../components/Typography/Typography.es.js";
-import { cn as i } from "../../../../utils/cn/cn.es.js";
-const p = ({ text: a, className: t }) => /* @__PURE__ */ r("div", { className: i(e.root, t), children: /* @__PURE__ */ r(o, { emphasis: !0, defaultVariant: "labelLg", mobileVariant: "labelSm", className: e.benefitTag, children: a }) });
+import e from "../../../../modules/Benefits/components/BenefitTag/benefitTag.module.css";
+import { cn as o } from "../../../../utils/cn/cn.es.js";
+import { Typography as i } from "../../../../components/Typography/Typography.es.js";
+const p = ({ text: a, className: t }) => /* @__PURE__ */ r("div", { className: o(e.root, t), children: /* @__PURE__ */ r(i, { emphasis: !0, defaultVariant: "labelLg", mobileVariant: "labelSm", className: e.benefitTag, children: a }) });
 export {
   p as BenefitTag
 };

package/dist/modules/Benefits/components/BenefitTag/benefitTag.module.css

@@ -0,0 +1,29 @@
+.root {
+    display: inline-flex;
+    align-items: center;
+    padding: 15px 24px;
+    border-radius: var(--border-radius-full);
+    background:
+        linear-gradient(180deg, rgba(129, 177, 226, 0) 0%, rgba(129, 177, 226, 0.5) 100%),
+        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(6px);
+    position: absolute;
+}
+
+.benefitTag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 8px;
+    color: var(--color-text-primary-inverted);
+}
+
+@media (width <= 768px) {
+    .root {
+        padding: 10px 16px;
+    }
+
+    .benefitTag {
+        padding: 3px 6px;
+    }
+}