rothzerg-ui 0.1.14 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/app-download/AppDownload.cjs +1 -1
- package/dist/blocks/app-download/AppDownload.d.ts +23 -1
- package/dist/blocks/app-download/AppDownload.js +108 -63
- package/dist/blocks/app-download/index.d.ts +1 -1
- package/dist/blocks/hero/Hero.cjs +1 -1
- package/dist/blocks/hero/Hero.d.ts +6 -4
- package/dist/blocks/hero/Hero.js +47 -29
- package/dist/blocks/index.d.ts +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("react"),q=require("../../components/carousel/Carousel.cjs"),A=require("../../utils/cn.cjs");;/* empty css */const T=require("../../components/rows/Rows.cjs"),s=require("../../components/text/Text.cjs");function S(){return a.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"})})}function M(){return a.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M3.18 23.48c-.39-.23-.68-.64-.68-1.15V1.67c0-.51.29-.92.68-1.15l.12-.06 12.1 12.1v.28L3.3 23.54l-.12-.06zm16.46-9.76l-2.93 1.69-3.23-3.23 3.23-3.23 2.93 1.69c.84.48.84 1.6 0 2.08zm-4.95-4.78L3.41.66C3.71.5 4.07.52 4.41.68l.12.07L17 8.35l-2.31 2.59z"})})}function B(){return a.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:a.jsx("polyline",{points:"20 6 9 17 4 12"})})}function D(){return a.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})})}const I={appstore:{sub:"Download on the",name:"App Store",Icon:S},googleplay:{sub:"Get it on",name:"Google Play",Icon:M}};function L({title:_="Take it with you",description:w="Download our app and stay connected wherever you go. Available on iOS and Android.",eyebrow:d="Mobile App",stores:j=[{type:"appstore"},{type:"googleplay"}],features:i=[{text:"Works offline — sync when back online"},{text:"Native push notifications"},{text:"Biometric authentication"},{text:"Free forever, no credit card required"}],rating:c,ratingCount:t,showMockup:v=!0,showQR:z=!1,screenshots:n,screenshotSrc:r,screenshotAlt:p="",screenshotCarouselAutoPlay:N=0,screenshotCarouselShowArrows:g=!1,screenshotFit:f="cover",layout:u="split",className:k=""}){const h=["rz-app-download",`rz-app-download--${u}`,k].filter(Boolean).join(" "),l=C.useMemo(()=>n!=null&&n.length?n:r?[{src:r,alt:p}]:[],[n,r,p]),y=l.length>1?a.jsx("div",{className:"rz-app-download__mockup-carousel",children:a.jsx(q.Carousel,{slidesPerView:1,loop:!1,showArrows:g,showDots:!0,gap:"none",autoPlay:N,className:"rz-app-download__carousel",children:l.map((e,o)=>a.jsx("img",{src:e.src,alt:e.alt,className:"rz-app-download__mockup-shot",decoding:"async",draggable:!1},`${e.src}-${o}`))})}):l.length===1?a.jsx("img",{src:l[0].src,alt:l[0].alt,className:"rz-app-download__mockup-shot",decoding:"async"}):null,x=a.jsxs(T.Rows,{className:"rz-app-download__content",children:[d&&a.jsx(s.Text,{as:"p",className:"rz-app-download__eyebrow",children:d}),a.jsx(s.Text,{as:"h2",className:"rz-app-download__title",children:_}),a.jsx(s.Text,{as:"p",className:"rz-app-download__description",children:w}),a.jsx("div",{className:"rz-app-download__buttons",children:j.map(e=>{const o=I[e.type];return a.jsxs("a",{href:e.href??"#",className:"rz-app-download__store-btn",onClick:e.onClick?b=>{b.preventDefault(),e.onClick()}:void 0,"aria-label":`${o.name}`,children:[a.jsx(o.Icon,{}),a.jsxs("div",{children:[a.jsx("span",{className:"rz-app-download__store-sub",children:o.sub}),a.jsx("span",{className:"rz-app-download__store-name",children:o.name})]})]},e.type)})}),c!==void 0&&a.jsxs("div",{className:"rz-app-download__rating",children:[a.jsx("div",{className:"rz-app-download__stars",children:Array.from({length:5}).map((e,o)=>a.jsx(D,{},o))}),a.jsxs("span",{children:[a.jsx("strong",{children:c})," / 5"]}),t&&a.jsxs("span",{children:["(",t," reviews)"]})]}),i.length>0&&a.jsx("div",{className:"rz-app-download__features",children:i.map((e,o)=>a.jsxs("div",{className:"rz-app-download__feature",children:[a.jsx("span",{className:"rz-app-download__feature-icon",children:a.jsx(B,{})}),e.text]},o))})]}),m=z?a.jsx("div",{className:"rz-app-download__visual",children:a.jsxs("div",{className:"rz-app-download__qr",children:[a.jsx("div",{className:"rz-app-download__qr-placeholder","aria-hidden":"true"}),a.jsx(s.Text,{as:"p",className:"rz-app-download__qr-label",children:"Scan to download"})]})}):v?a.jsx("div",{className:"rz-app-download__visual",children:a.jsx("div",{className:"rz-app-download__mockup",children:a.jsx("div",{className:"rz-app-download__mockup-screen",children:a.jsx("div",{className:A.cn("rz-app-download__mockup-media",f==="contain"&&"rz-app-download__mockup-media--contain"),children:y})})})}):null;return u==="centered"?a.jsx("section",{className:h,"aria-label":"App download",children:a.jsxs("div",{className:"rz-app-download__inner",children:[x,m]})}):a.jsx("section",{className:h,"aria-label":"App download",children:a.jsxs("div",{className:"rz-app-download__inner",children:[x,m]})})}exports.AppDownload=L;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type AppDownloadLayout = 'centered' | 'split';
|
|
2
|
+
export type AppDownloadScreenshotFit = 'cover' | 'contain';
|
|
2
3
|
export interface AppStore {
|
|
3
4
|
type: 'appstore' | 'googleplay';
|
|
4
5
|
href?: string;
|
|
@@ -7,6 +8,10 @@ export interface AppStore {
|
|
|
7
8
|
export interface AppFeature {
|
|
8
9
|
text: string;
|
|
9
10
|
}
|
|
11
|
+
export interface AppDownloadScreenshot {
|
|
12
|
+
src: string;
|
|
13
|
+
alt: string;
|
|
14
|
+
}
|
|
10
15
|
export interface AppDownloadProps {
|
|
11
16
|
title?: string;
|
|
12
17
|
description?: string;
|
|
@@ -17,7 +22,24 @@ export interface AppDownloadProps {
|
|
|
17
22
|
ratingCount?: string;
|
|
18
23
|
showMockup?: boolean;
|
|
19
24
|
showQR?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Screenshots inside the phone mockup. Two or more enable swipe + dot navigation.
|
|
27
|
+
* If empty, falls back to `screenshotSrc` / `screenshotAlt` when set.
|
|
28
|
+
*/
|
|
29
|
+
screenshots?: AppDownloadScreenshot[];
|
|
30
|
+
/** Image URL (e.g. `/images/app-screenshot.png`) when `screenshots` is omitted or empty. */
|
|
31
|
+
screenshotSrc?: string;
|
|
32
|
+
screenshotAlt?: string;
|
|
33
|
+
/** Auto-advance carousel in ms; 0 = off. Only applies with 2+ screenshots. */
|
|
34
|
+
screenshotCarouselAutoPlay?: number;
|
|
35
|
+
/** Show prev/next arrows on the mockup carousel (default false; dots + swipe usually enough). */
|
|
36
|
+
screenshotCarouselShowArrows?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* How screenshots fill the mockup. `cover` fills the frame (may crop). `contain` shows the full image
|
|
39
|
+
* (letterboxing) — better for tall phone captures in a fixed-height frame.
|
|
40
|
+
*/
|
|
41
|
+
screenshotFit?: AppDownloadScreenshotFit;
|
|
20
42
|
layout?: AppDownloadLayout;
|
|
21
43
|
className?: string;
|
|
22
44
|
}
|
|
23
|
-
export declare function AppDownload({ title, description, eyebrow, stores, features, rating, ratingCount, showMockup, showQR, layout, className, }: AppDownloadProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare function AppDownload({ title, description, eyebrow, stores, features, rating, ratingCount, showMockup, showQR, screenshots, screenshotSrc, screenshotAlt, screenshotCarouselAutoPlay, screenshotCarouselShowArrows, screenshotFit, layout, className, }: AppDownloadProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,95 +1,140 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as a, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as B } from "react";
|
|
3
|
+
import { Carousel as I } from "../../components/carousel/Carousel.js";
|
|
4
|
+
import { cn as M } from "../../utils/cn.js";
|
|
2
5
|
/* empty css */
|
|
3
|
-
import { Rows as
|
|
4
|
-
import { Text as
|
|
5
|
-
function
|
|
6
|
-
return /* @__PURE__ */
|
|
6
|
+
import { Rows as S } from "../../components/rows/Rows.js";
|
|
7
|
+
import { Text as d } from "../../components/text/Text.js";
|
|
8
|
+
function D() {
|
|
9
|
+
return /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) });
|
|
7
10
|
}
|
|
8
|
-
function
|
|
9
|
-
return /* @__PURE__ */
|
|
11
|
+
function L() {
|
|
12
|
+
return /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M3.18 23.48c-.39-.23-.68-.64-.68-1.15V1.67c0-.51.29-.92.68-1.15l.12-.06 12.1 12.1v.28L3.3 23.54l-.12-.06zm16.46-9.76l-2.93 1.69-3.23-3.23 3.23-3.23 2.93 1.69c.84.48.84 1.6 0 2.08zm-4.95-4.78L3.41.66C3.71.5 4.07.52 4.41.68l.12.07L17 8.35l-2.31 2.59z" }) });
|
|
10
13
|
}
|
|
11
|
-
function
|
|
12
|
-
return /* @__PURE__ */
|
|
14
|
+
function j() {
|
|
15
|
+
return /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ a("polyline", { points: "20 6 9 17 4 12" }) });
|
|
13
16
|
}
|
|
14
|
-
function
|
|
15
|
-
return /* @__PURE__ */
|
|
17
|
+
function q() {
|
|
18
|
+
return /* @__PURE__ */ a("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) });
|
|
16
19
|
}
|
|
17
|
-
const
|
|
18
|
-
appstore: { sub: "Download on the", name: "App Store", Icon:
|
|
19
|
-
googleplay: { sub: "Get it on", name: "Google Play", Icon:
|
|
20
|
+
const P = {
|
|
21
|
+
appstore: { sub: "Download on the", name: "App Store", Icon: D },
|
|
22
|
+
googleplay: { sub: "Get it on", name: "Google Play", Icon: L }
|
|
20
23
|
};
|
|
21
|
-
function
|
|
22
|
-
title:
|
|
23
|
-
description:
|
|
24
|
-
eyebrow:
|
|
25
|
-
stores:
|
|
26
|
-
features:
|
|
24
|
+
function W({
|
|
25
|
+
title: v = "Take it with you",
|
|
26
|
+
description: z = "Download our app and stay connected wherever you go. Available on iOS and Android.",
|
|
27
|
+
eyebrow: c = "Mobile App",
|
|
28
|
+
stores: f = [{ type: "appstore" }, { type: "googleplay" }],
|
|
29
|
+
features: p = [
|
|
27
30
|
{ text: "Works offline — sync when back online" },
|
|
28
31
|
{ text: "Native push notifications" },
|
|
29
32
|
{ text: "Biometric authentication" },
|
|
30
33
|
{ text: "Free forever, no credit card required" }
|
|
31
34
|
],
|
|
32
|
-
rating:
|
|
33
|
-
ratingCount:
|
|
34
|
-
showMockup:
|
|
35
|
-
showQR:
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
rating: s,
|
|
36
|
+
ratingCount: t,
|
|
37
|
+
showMockup: N = !0,
|
|
38
|
+
showQR: g = !1,
|
|
39
|
+
screenshots: n,
|
|
40
|
+
screenshotSrc: i,
|
|
41
|
+
screenshotAlt: m = "",
|
|
42
|
+
screenshotCarouselAutoPlay: k = 0,
|
|
43
|
+
screenshotCarouselShowArrows: y = !1,
|
|
44
|
+
screenshotFit: b = "cover",
|
|
45
|
+
layout: h = "split",
|
|
46
|
+
className: x = ""
|
|
38
47
|
}) {
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
const _ = ["rz-app-download", `rz-app-download--${h}`, x].filter(Boolean).join(" "), r = B(() => n != null && n.length ? n : i ? [{ src: i, alt: m }] : [], [n, i, m]), C = r.length > 1 ? /* @__PURE__ */ a("div", { className: "rz-app-download__mockup-carousel", children: /* @__PURE__ */ a(
|
|
49
|
+
I,
|
|
50
|
+
{
|
|
51
|
+
slidesPerView: 1,
|
|
52
|
+
loop: !1,
|
|
53
|
+
showArrows: y,
|
|
54
|
+
showDots: !0,
|
|
55
|
+
gap: "none",
|
|
56
|
+
autoPlay: k,
|
|
57
|
+
className: "rz-app-download__carousel",
|
|
58
|
+
children: r.map((o, e) => /* @__PURE__ */ a(
|
|
59
|
+
"img",
|
|
60
|
+
{
|
|
61
|
+
src: o.src,
|
|
62
|
+
alt: o.alt,
|
|
63
|
+
className: "rz-app-download__mockup-shot",
|
|
64
|
+
decoding: "async",
|
|
65
|
+
draggable: !1
|
|
66
|
+
},
|
|
67
|
+
`${o.src}-${e}`
|
|
68
|
+
))
|
|
69
|
+
}
|
|
70
|
+
) }) : r.length === 1 ? /* @__PURE__ */ a(
|
|
71
|
+
"img",
|
|
72
|
+
{
|
|
73
|
+
src: r[0].src,
|
|
74
|
+
alt: r[0].alt,
|
|
75
|
+
className: "rz-app-download__mockup-shot",
|
|
76
|
+
decoding: "async"
|
|
77
|
+
}
|
|
78
|
+
) : null, u = /* @__PURE__ */ l(S, { className: "rz-app-download__content", children: [
|
|
79
|
+
c && /* @__PURE__ */ a(d, { as: "p", className: "rz-app-download__eyebrow", children: c }),
|
|
80
|
+
/* @__PURE__ */ a(d, { as: "h2", className: "rz-app-download__title", children: v }),
|
|
81
|
+
/* @__PURE__ */ a(d, { as: "p", className: "rz-app-download__description", children: z }),
|
|
82
|
+
/* @__PURE__ */ a("div", { className: "rz-app-download__buttons", children: f.map((o) => {
|
|
83
|
+
const e = P[o.type];
|
|
84
|
+
return /* @__PURE__ */ l(
|
|
46
85
|
"a",
|
|
47
86
|
{
|
|
48
|
-
href:
|
|
87
|
+
href: o.href ?? "#",
|
|
49
88
|
className: "rz-app-download__store-btn",
|
|
50
|
-
onClick:
|
|
51
|
-
|
|
89
|
+
onClick: o.onClick ? (A) => {
|
|
90
|
+
A.preventDefault(), o.onClick();
|
|
52
91
|
} : void 0,
|
|
53
|
-
"aria-label": `${
|
|
92
|
+
"aria-label": `${e.name}`,
|
|
54
93
|
children: [
|
|
55
|
-
/* @__PURE__ */ e
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
/* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ a(e.Icon, {}),
|
|
95
|
+
/* @__PURE__ */ l("div", { children: [
|
|
96
|
+
/* @__PURE__ */ a("span", { className: "rz-app-download__store-sub", children: e.sub }),
|
|
97
|
+
/* @__PURE__ */ a("span", { className: "rz-app-download__store-name", children: e.name })
|
|
59
98
|
] })
|
|
60
99
|
]
|
|
61
100
|
},
|
|
62
|
-
|
|
101
|
+
o.type
|
|
63
102
|
);
|
|
64
103
|
}) }),
|
|
65
|
-
|
|
66
|
-
/* @__PURE__ */
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
104
|
+
s !== void 0 && /* @__PURE__ */ l("div", { className: "rz-app-download__rating", children: [
|
|
105
|
+
/* @__PURE__ */ a("div", { className: "rz-app-download__stars", children: Array.from({ length: 5 }).map((o, e) => /* @__PURE__ */ a(q, {}, e)) }),
|
|
106
|
+
/* @__PURE__ */ l("span", { children: [
|
|
107
|
+
/* @__PURE__ */ a("strong", { children: s }),
|
|
69
108
|
" / 5"
|
|
70
109
|
] }),
|
|
71
|
-
|
|
110
|
+
t && /* @__PURE__ */ l("span", { children: [
|
|
72
111
|
"(",
|
|
73
|
-
|
|
112
|
+
t,
|
|
74
113
|
" reviews)"
|
|
75
114
|
] })
|
|
76
115
|
] }),
|
|
77
|
-
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
|
|
80
|
-
] },
|
|
81
|
-
] }),
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
] }) }) :
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
116
|
+
p.length > 0 && /* @__PURE__ */ a("div", { className: "rz-app-download__features", children: p.map((o, e) => /* @__PURE__ */ l("div", { className: "rz-app-download__feature", children: [
|
|
117
|
+
/* @__PURE__ */ a("span", { className: "rz-app-download__feature-icon", children: /* @__PURE__ */ a(j, {}) }),
|
|
118
|
+
o.text
|
|
119
|
+
] }, e)) })
|
|
120
|
+
] }), w = g ? /* @__PURE__ */ a("div", { className: "rz-app-download__visual", children: /* @__PURE__ */ l("div", { className: "rz-app-download__qr", children: [
|
|
121
|
+
/* @__PURE__ */ a("div", { className: "rz-app-download__qr-placeholder", "aria-hidden": "true" }),
|
|
122
|
+
/* @__PURE__ */ a(d, { as: "p", className: "rz-app-download__qr-label", children: "Scan to download" })
|
|
123
|
+
] }) }) : N ? /* @__PURE__ */ a("div", { className: "rz-app-download__visual", children: /* @__PURE__ */ a("div", { className: "rz-app-download__mockup", children: /* @__PURE__ */ a("div", { className: "rz-app-download__mockup-screen", children: /* @__PURE__ */ a(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
className: M("rz-app-download__mockup-media", b === "contain" && "rz-app-download__mockup-media--contain"),
|
|
127
|
+
children: C
|
|
128
|
+
}
|
|
129
|
+
) }) }) }) : null;
|
|
130
|
+
return h === "centered" ? /* @__PURE__ */ a("section", { className: _, "aria-label": "App download", children: /* @__PURE__ */ l("div", { className: "rz-app-download__inner", children: [
|
|
131
|
+
u,
|
|
132
|
+
w
|
|
133
|
+
] }) }) : /* @__PURE__ */ a("section", { className: _, "aria-label": "App download", children: /* @__PURE__ */ l("div", { className: "rz-app-download__inner", children: [
|
|
134
|
+
u,
|
|
135
|
+
w
|
|
91
136
|
] }) });
|
|
92
137
|
}
|
|
93
138
|
export {
|
|
94
|
-
|
|
139
|
+
W as AppDownload
|
|
95
140
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { AppDownload } from './AppDownload';
|
|
2
|
-
export type { AppDownloadProps, AppDownloadLayout, AppStore, AppFeature } from './AppDownload';
|
|
2
|
+
export type { AppDownloadProps, AppDownloadLayout, AppDownloadScreenshotFit, AppStore, AppFeature, AppDownloadScreenshot, } from './AppDownload';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs");;/* empty css */const g=require("../../components/rows/Rows.cjs"),o=require("../../components/text/Text.cjs"),d=require("../../components/columns/Columns.cjs");function z({variant:r="centered",eyebrow:s,title:p,description:a,actions:l,stats:c,socialProof:h,media:n,showGrid:t=!1,showGradient:_=!0,className:m}){const u=r==="split"||r==="mobile-app",x=r==="mobile-app"&&_;return e.jsxs("section",{className:i.cn("rz-hero",`rz-hero--${r}`,m),children:[t&&r!=="mobile-app"&&e.jsx("div",{className:"rz-hero__bg-grid","aria-hidden":"true"}),_&&r!=="mobile-app"&&e.jsx("div",{className:"rz-hero__bg-gradient","aria-hidden":"true"}),x&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"rz-hero__bg-app rz-hero__bg-app--glow-a","aria-hidden":"true"}),e.jsx("div",{className:"rz-hero__bg-app rz-hero__bg-app--glow-b","aria-hidden":"true"}),e.jsx("div",{className:"rz-hero__bg-app rz-hero__bg-app--mesh","aria-hidden":"true"})]}),e.jsxs("div",{className:"rz-hero__container",children:[e.jsxs(g.Rows,{className:"rz-hero__content",children:[s&&e.jsxs(o.Text,{as:"span",className:i.cn("rz-hero__eyebrow",r==="mobile-app"&&"rz-hero__eyebrow--pill"),children:[r==="mobile-app"&&e.jsx("span",{className:"rz-hero__eyebrow-dot","aria-hidden":"true"}),s]}),e.jsx(o.Text,{as:"h1",className:"rz-hero__title",children:p}),a&&e.jsx(o.Text,{as:"p",className:"rz-hero__description",children:a}),l&&e.jsx(d.Columns,{className:"rz-hero__actions",children:l}),r==="mobile-app"&&c&&e.jsx("div",{className:"rz-hero__stats",children:c}),h&&e.jsx(d.Columns,{className:"rz-hero__social-proof",children:h})]}),u&&n&&e.jsx("div",{className:"rz-hero__media",children:n})]})]})}function b({children:r,className:s}){return e.jsx("span",{className:i.cn("rz-hero__title-highlight",s),children:r})}exports.Hero=z;exports.HeroHighlight=b;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
export interface HeroProps {
|
|
3
3
|
/** Layout variant */
|
|
4
|
-
variant?: 'centered' | 'split';
|
|
4
|
+
variant?: 'centered' | 'split' | 'mobile-app';
|
|
5
5
|
/** Small label above the title */
|
|
6
6
|
eyebrow?: React.ReactNode;
|
|
7
7
|
/** Main headline. Use <HeroHighlight> to color part of it. */
|
|
@@ -10,9 +10,11 @@ export interface HeroProps {
|
|
|
10
10
|
description?: React.ReactNode;
|
|
11
11
|
/** Primary + secondary CTA buttons */
|
|
12
12
|
actions?: React.ReactNode;
|
|
13
|
+
/** Metrics row (e.g. 200+ plans). Shown when `variant` is `mobile-app`. */
|
|
14
|
+
stats?: React.ReactNode;
|
|
13
15
|
/** Social proof (e.g. avatar group + "X teams trust us") */
|
|
14
16
|
socialProof?: React.ReactNode;
|
|
15
|
-
/** Image or component in the split layout's
|
|
17
|
+
/** Image or component in the split / mobile-app layout's second column */
|
|
16
18
|
media?: React.ReactNode;
|
|
17
19
|
/** Show decorative grid background */
|
|
18
20
|
showGrid?: boolean;
|
|
@@ -23,7 +25,7 @@ export interface HeroProps {
|
|
|
23
25
|
/**
|
|
24
26
|
* Hero
|
|
25
27
|
*
|
|
26
|
-
* A full-page hero section with centered or
|
|
28
|
+
* A full-page hero section with centered, split, or mobile-app (marketing + device) layouts.
|
|
27
29
|
* Compose with `HeroHighlight` for colored headline accents.
|
|
28
30
|
*
|
|
29
31
|
* @example
|
|
@@ -36,7 +38,7 @@ export interface HeroProps {
|
|
|
36
38
|
* showGrid
|
|
37
39
|
* />
|
|
38
40
|
*/
|
|
39
|
-
export declare function Hero({ variant, eyebrow, title, description, actions, socialProof, media, showGrid, showGradient, className, }: HeroProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export declare function Hero({ variant, eyebrow, title, description, actions, stats, socialProof, media, showGrid, showGradient, className, }: HeroProps): import("react/jsx-runtime").JSX.Element;
|
|
40
42
|
/** Highlight a portion of the hero title with the primary color */
|
|
41
43
|
export declare function HeroHighlight({ children, className }: {
|
|
42
44
|
children: React.ReactNode;
|
package/dist/blocks/hero/Hero.js
CHANGED
|
@@ -1,40 +1,58 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { cn as
|
|
1
|
+
import { jsxs as o, jsx as e, Fragment as N } from "react/jsx-runtime";
|
|
2
|
+
import { cn as s } from "../../utils/cn.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { Rows as
|
|
5
|
-
import { Text as
|
|
6
|
-
import { Columns as
|
|
7
|
-
function
|
|
8
|
-
variant:
|
|
9
|
-
eyebrow:
|
|
10
|
-
title:
|
|
11
|
-
description:
|
|
4
|
+
import { Rows as u } from "../../components/rows/Rows.js";
|
|
5
|
+
import { Text as i } from "../../components/text/Text.js";
|
|
6
|
+
import { Columns as d } from "../../components/columns/Columns.js";
|
|
7
|
+
function y({
|
|
8
|
+
variant: r = "centered",
|
|
9
|
+
eyebrow: a,
|
|
10
|
+
title: n,
|
|
11
|
+
description: l,
|
|
12
12
|
actions: h,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
stats: p,
|
|
14
|
+
socialProof: _,
|
|
15
|
+
media: c,
|
|
16
|
+
showGrid: t = !1,
|
|
17
|
+
showGradient: m = !0,
|
|
17
18
|
className: z
|
|
18
19
|
}) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
const b = r === "split" || r === "mobile-app", g = r === "mobile-app" && m;
|
|
21
|
+
return /* @__PURE__ */ o("section", { className: s("rz-hero", `rz-hero--${r}`, z), children: [
|
|
22
|
+
t && r !== "mobile-app" && /* @__PURE__ */ e("div", { className: "rz-hero__bg-grid", "aria-hidden": "true" }),
|
|
23
|
+
m && r !== "mobile-app" && /* @__PURE__ */ e("div", { className: "rz-hero__bg-gradient", "aria-hidden": "true" }),
|
|
24
|
+
g && /* @__PURE__ */ o(N, { children: [
|
|
25
|
+
/* @__PURE__ */ e("div", { className: "rz-hero__bg-app rz-hero__bg-app--glow-a", "aria-hidden": "true" }),
|
|
26
|
+
/* @__PURE__ */ e("div", { className: "rz-hero__bg-app rz-hero__bg-app--glow-b", "aria-hidden": "true" }),
|
|
27
|
+
/* @__PURE__ */ e("div", { className: "rz-hero__bg-app rz-hero__bg-app--mesh", "aria-hidden": "true" })
|
|
28
|
+
] }),
|
|
29
|
+
/* @__PURE__ */ o("div", { className: "rz-hero__container", children: [
|
|
30
|
+
/* @__PURE__ */ o(u, { className: "rz-hero__content", children: [
|
|
31
|
+
a && /* @__PURE__ */ o(
|
|
32
|
+
i,
|
|
33
|
+
{
|
|
34
|
+
as: "span",
|
|
35
|
+
className: s("rz-hero__eyebrow", r === "mobile-app" && "rz-hero__eyebrow--pill"),
|
|
36
|
+
children: [
|
|
37
|
+
r === "mobile-app" && /* @__PURE__ */ e("span", { className: "rz-hero__eyebrow-dot", "aria-hidden": "true" }),
|
|
38
|
+
a
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
/* @__PURE__ */ e(i, { as: "h1", className: "rz-hero__title", children: n }),
|
|
43
|
+
l && /* @__PURE__ */ e(i, { as: "p", className: "rz-hero__description", children: l }),
|
|
44
|
+
h && /* @__PURE__ */ e(d, { className: "rz-hero__actions", children: h }),
|
|
45
|
+
r === "mobile-app" && p && /* @__PURE__ */ e("div", { className: "rz-hero__stats", children: p }),
|
|
46
|
+
_ && /* @__PURE__ */ e(d, { className: "rz-hero__social-proof", children: _ })
|
|
29
47
|
] }),
|
|
30
|
-
|
|
48
|
+
b && c && /* @__PURE__ */ e("div", { className: "rz-hero__media", children: c })
|
|
31
49
|
] })
|
|
32
50
|
] });
|
|
33
51
|
}
|
|
34
|
-
function
|
|
35
|
-
return /* @__PURE__ */
|
|
52
|
+
function A({ children: r, className: a }) {
|
|
53
|
+
return /* @__PURE__ */ e("span", { className: s("rz-hero__title-highlight", a), children: r });
|
|
36
54
|
}
|
|
37
55
|
export {
|
|
38
|
-
|
|
39
|
-
|
|
56
|
+
y as Hero,
|
|
57
|
+
A as HeroHighlight
|
|
40
58
|
};
|
package/dist/blocks/index.d.ts
CHANGED
|
@@ -61,7 +61,7 @@ export type { ChangelogProps, ChangelogEntry, ChangeItem, ChangeType } from './c
|
|
|
61
61
|
export { Newsletter } from './newsletter';
|
|
62
62
|
export type { NewsletterProps, NewsletterLayout, NewsletterBackground, NewsletterStat } from './newsletter';
|
|
63
63
|
export { AppDownload } from './app-download';
|
|
64
|
-
export type { AppDownloadProps, AppDownloadLayout, AppStore, AppFeature } from './app-download';
|
|
64
|
+
export type { AppDownloadProps, AppDownloadLayout, AppDownloadScreenshotFit, AppStore, AppFeature, AppDownloadScreenshot, } from './app-download';
|
|
65
65
|
export { PricingComparison } from './pricing-comparison';
|
|
66
66
|
export type { PricingComparisonProps, ComparisonPlan, ComparisonFeature, ComparisonSection, FeatureValue } from './pricing-comparison';
|
|
67
67
|
export { ActivityFeed } from './activity-feed';
|