@stackshift-ui/header 6.0.7 → 6.0.8-beta.0

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/types.js CHANGED
@@ -1,18 +1 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // src/types.ts
17
- var types_exports = {};
18
- module.exports = __toCommonJS(types_exports);
1
+ "use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(n,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of a(t))!o.call(n,e)&&e!==r&&l(n,e,{get:()=>t[e],enumerable:!(i=s(t,e))||i.enumerable});return n};var u=n=>g(l({},"__esModule",{value:!0}),n);var c={};module.exports=u(c);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/header",
3
3
  "description": "",
4
- "version": "6.0.7",
4
+ "version": "6.0.8-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -29,27 +29,27 @@
29
29
  "typescript": "^5.6.2",
30
30
  "vite-tsconfig-paths": "^5.0.1",
31
31
  "vitest": "^2.1.1",
32
- "@stackshift-ui/typescript-config": "6.0.2",
33
- "@stackshift-ui/eslint-config": "6.0.2"
32
+ "@stackshift-ui/eslint-config": "6.0.3-beta.0",
33
+ "@stackshift-ui/typescript-config": "6.0.3-beta.0"
34
34
  },
35
35
  "dependencies": {
36
- "@stackshift-ui/scripts": "6.0.2",
37
- "@stackshift-ui/signin-signup": "6.0.6",
38
- "@stackshift-ui/text": "6.0.3",
39
- "@stackshift-ui/image": "6.0.3",
40
- "@stackshift-ui/heading": "6.0.3",
41
- "@stackshift-ui/system": "6.0.3",
42
- "@stackshift-ui/button": "6.0.3",
43
- "@stackshift-ui/section": "6.0.3",
44
- "@stackshift-ui/flex": "6.0.3",
45
- "@stackshift-ui/container": "6.0.3"
36
+ "@stackshift-ui/scripts": "6.0.3-beta.0",
37
+ "@stackshift-ui/system": "6.0.4-beta.0",
38
+ "@stackshift-ui/button": "6.0.4-beta.0",
39
+ "@stackshift-ui/text": "6.0.4-beta.0",
40
+ "@stackshift-ui/heading": "6.0.4-beta.0",
41
+ "@stackshift-ui/section": "6.0.4-beta.0",
42
+ "@stackshift-ui/signin-signup": "6.0.7-beta.0",
43
+ "@stackshift-ui/image": "6.0.4-beta.0",
44
+ "@stackshift-ui/flex": "6.0.4-beta.0",
45
+ "@stackshift-ui/container": "6.0.4-beta.0"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "@types/react": "16.8 - 19",
49
49
  "next": "10 - 14",
50
50
  "react": "16.8 - 19",
51
51
  "react-dom": "16.8 - 19",
52
- "@stackshift-ui/system": ">=0.0.0"
52
+ "@stackshift-ui/system": ">=6.0.4-beta.0"
53
53
  },
54
54
  "peerDependenciesMeta": {
55
55
  "next": {
@@ -1,89 +0,0 @@
1
- // src/header_d.tsx
2
- import { Button } from "@stackshift-ui/button";
3
- import { Container } from "@stackshift-ui/container";
4
- import { Flex } from "@stackshift-ui/flex";
5
- import { Heading } from "@stackshift-ui/heading";
6
- import { Image } from "@stackshift-ui/image";
7
- import { Section } from "@stackshift-ui/section";
8
- import { Text } from "@stackshift-ui/text";
9
- import React from "react";
10
- import { jsx, jsxs } from "react/jsx-runtime";
11
- function Header_D({
12
- title,
13
- description,
14
- primaryButton,
15
- secondaryButton,
16
- mainImage
17
- }) {
18
- return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
19
- /* @__PURE__ */ jsx(Flex, { align: "center", className: "w-full basis-1/2", direction: "col", children: /* @__PURE__ */ jsxs(Container, { className: "mx-auto items-center text-center lg:text-left", maxWidth: "md", children: [
20
- /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
21
- /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
22
- ] }) }),
23
- /* @__PURE__ */ jsx(MainImage, { mainImage })
24
- ] }) }) });
25
- }
26
- function TitleAndDescription({ title, description }) {
27
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
28
- title ? /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", type: "h1", children: title }) : null,
29
- description ? /* @__PURE__ */ jsx(Text, { className: "my-6", muted: true, children: description }) : null
30
- ] });
31
- }
32
- function Buttons({
33
- primaryButton,
34
- secondaryButton
35
- }) {
36
- var _a, _b;
37
- return /* @__PURE__ */ jsxs(
38
- Flex,
39
- {
40
- align: "center",
41
- className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
42
- gap: 2,
43
- children: [
44
- (primaryButton == null ? void 0 : primaryButton.label) ? /* @__PURE__ */ jsx(
45
- Button,
46
- {
47
- as: "link",
48
- link: primaryButton,
49
- ariaLabel: (_a = primaryButton == null ? void 0 : primaryButton.ariaLabel) != null ? _a : primaryButton == null ? void 0 : primaryButton.label,
50
- variant: "solid",
51
- className: "bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white",
52
- children: primaryButton.label
53
- }
54
- ) : null,
55
- (secondaryButton == null ? void 0 : secondaryButton.label) ? /* @__PURE__ */ jsx(
56
- Button,
57
- {
58
- as: "link",
59
- link: secondaryButton,
60
- ariaLabel: (_b = secondaryButton.ariaLabel) != null ? _b : secondaryButton == null ? void 0 : secondaryButton.label,
61
- variant: "solid",
62
- className: "bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3",
63
- children: secondaryButton.label
64
- }
65
- ) : null
66
- ]
67
- }
68
- );
69
- }
70
- function MainImage({ mainImage }) {
71
- var _a;
72
- if (!(mainImage == null ? void 0 : mainImage.image)) return null;
73
- return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
74
- Image,
75
- {
76
- alt: (_a = mainImage.alt) != null ? _a : "header-main-image",
77
- className: "rounded-md",
78
- height: 700,
79
- sizes: "100vw",
80
- src: `${mainImage == null ? void 0 : mainImage.image}`,
81
- style: { objectFit: "contain" },
82
- width: 1050
83
- }
84
- ) });
85
- }
86
-
87
- export {
88
- Header_D
89
- };
@@ -1,33 +0,0 @@
1
- // src/header.tsx
2
- import { lazy } from "react";
3
- import { jsx } from "react/jsx-runtime";
4
- var Variants = {
5
- variant_a: lazy(() => import("./header_a.mjs")),
6
- variant_b: lazy(() => import("./header_b.mjs")),
7
- variant_c: lazy(() => import("./header_c.mjs")),
8
- variant_d: lazy(() => import("./header_d.mjs")),
9
- variant_e: lazy(() => import("./header_e.mjs"))
10
- };
11
- var displayName = "Header";
12
- var Header = ({ data }) => {
13
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
14
- const variant = data == null ? void 0 : data.variant;
15
- const Variant = variant && Variants[variant];
16
- const props = {
17
- mainImage: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.mainImage) != null ? _b : void 0,
18
- images: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.images) != null ? _d : void 0,
19
- title: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.title) != null ? _f : void 0,
20
- description: (_h = (_g = data == null ? void 0 : data.variants) == null ? void 0 : _g.description) != null ? _h : void 0,
21
- primaryButton: (_j = (_i = data == null ? void 0 : data.variants) == null ? void 0 : _i.primaryButton) != null ? _j : void 0,
22
- secondaryButton: (_l = (_k = data == null ? void 0 : data.variants) == null ? void 0 : _k.secondaryButton) != null ? _l : void 0,
23
- videoLink: (_n = (_m = data == null ? void 0 : data.variants) == null ? void 0 : _m.youtubeLink) != null ? _n : void 0,
24
- formLinks: (_p = (_o = data == null ? void 0 : data.variants) == null ? void 0 : _o.formLinks) != null ? _p : void 0,
25
- form: (_r = (_q = data == null ? void 0 : data.variants) == null ? void 0 : _q.form) != null ? _r : void 0
26
- };
27
- return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
28
- };
29
- Header.displayName = displayName;
30
-
31
- export {
32
- Header
33
- };
@@ -1,65 +0,0 @@
1
- // src/header_c.tsx
2
- import { Button } from "@stackshift-ui/button";
3
- import { Container } from "@stackshift-ui/container";
4
- import { Flex } from "@stackshift-ui/flex";
5
- import { Heading } from "@stackshift-ui/heading";
6
- import { Section } from "@stackshift-ui/section";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- function Header_C({
9
- videoLink,
10
- title,
11
- primaryButton,
12
- secondaryButton
13
- }) {
14
- let videoLinkId;
15
- if (videoLink) {
16
- if (videoLink.includes("embed")) {
17
- videoLinkId = videoLink.split("/")[4];
18
- } else {
19
- videoLinkId = videoLink.split("/watch?v=")[1] || videoLink.split("/")[3];
20
- }
21
- }
22
- return /* @__PURE__ */ jsx(Section, { className: "py-20 md:py-52 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1280, children: [
23
- /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mb-12 text-center md:mb-20", children: [
24
- title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-10", children: title }),
25
- /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
26
- ] }),
27
- /* @__PURE__ */ jsx("div", { className: "md:mx-20 lg:mx-60 xl:mx-60", children: videoLinkId && /* @__PURE__ */ jsx(VideoPlayer, { videoLinkId, title }) })
28
- ] }) });
29
- }
30
- function VideoPlayer({ videoLinkId, title }) {
31
- return /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
32
- "iframe",
33
- {
34
- "aria-label": "Show Video Frame",
35
- className: "w-full h-full border-4 rounded-3xl border-primary",
36
- src: `https://www.youtube.com/embed/${videoLinkId}`,
37
- srcDoc: `<style>*{padding:0;margin:0;overflow:hidden;border-radius:24px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>\u25B6</span></a>`,
38
- loading: "lazy",
39
- allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
40
- allowFullScreen: true
41
- }
42
- ) });
43
- }
44
- function Buttons({
45
- primaryButton,
46
- secondaryButton
47
- }) {
48
- return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, justify: "center", className: "flex-col lg:flex-row", children: [
49
- (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", ariaLabel: primaryButton == null ? void 0 : primaryButton.label, link: primaryButton, children: primaryButton == null ? void 0 : primaryButton.label }),
50
- (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
51
- Button,
52
- {
53
- as: "link",
54
- ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
55
- link: secondaryButton,
56
- className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
57
- children: secondaryButton == null ? void 0 : secondaryButton.label
58
- }
59
- )
60
- ] });
61
- }
62
-
63
- export {
64
- Header_C
65
- };
@@ -1,54 +0,0 @@
1
- // src/header_e.tsx
2
- import { Button } from "@stackshift-ui/button";
3
- import { Container } from "@stackshift-ui/container";
4
- import { Flex } from "@stackshift-ui/flex";
5
- import { Heading } from "@stackshift-ui/heading";
6
- import { Section } from "@stackshift-ui/section";
7
- import { SigninSignup_A } from "@stackshift-ui/signin-signup";
8
- import { Text } from "@stackshift-ui/text";
9
- import React from "react";
10
- import { jsx, jsxs } from "react/jsx-runtime";
11
- function Header_E({
12
- title,
13
- description,
14
- primaryButton,
15
- secondaryButton,
16
- formLinks,
17
- form
18
- }) {
19
- return /* @__PURE__ */ jsx(Section, { className: "relative py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
20
- /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
21
- /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
22
- /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
23
- ] }) }),
24
- /* @__PURE__ */ jsx("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsx("div", { className: "max-w-sm mx-auto text-center", children: /* @__PURE__ */ jsx(SigninSignup_A, { form, formLinks }) }) })
25
- ] }) }) });
26
- }
27
- function TitleAndDescription({ title, description }) {
28
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
29
- title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
30
- description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
31
- ] });
32
- }
33
- function Buttons({
34
- primaryButton,
35
- secondaryButton
36
- }) {
37
- return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, className: "flex-col md:flex-row justify-center lg:justify-start", children: [
38
- (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
39
- (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
40
- Button,
41
- {
42
- as: "link",
43
- link: secondaryButton,
44
- className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
45
- ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
46
- children: secondaryButton == null ? void 0 : secondaryButton.label
47
- }
48
- )
49
- ] });
50
- }
51
-
52
- export {
53
- Header_E
54
- };
@@ -1,139 +0,0 @@
1
- // src/header_a.tsx
2
- import { Button } from "@stackshift-ui/button";
3
- import { Container } from "@stackshift-ui/container";
4
- import { Flex } from "@stackshift-ui/flex";
5
- import { Heading } from "@stackshift-ui/heading";
6
- import { Image } from "@stackshift-ui/image";
7
- import { Section } from "@stackshift-ui/section";
8
- import { Text } from "@stackshift-ui/text";
9
- import React from "react";
10
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
11
- function Header_A({
12
- mainImage,
13
- title,
14
- description,
15
- primaryButton,
16
- secondaryButton
17
- }) {
18
- return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, className: "flex-col lg:flex-row", children: [
19
- /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
20
- /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
21
- /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
22
- ] }) }),
23
- /* @__PURE__ */ jsx(MainImage, { mainImage })
24
- ] }) }) });
25
- }
26
- function TitleAndDescription({ title, description }) {
27
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
28
- title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
29
- description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
30
- ] });
31
- }
32
- function Buttons({
33
- primaryButton,
34
- secondaryButton
35
- }) {
36
- return /* @__PURE__ */ jsxs(
37
- Flex,
38
- {
39
- align: "center",
40
- justify: "center",
41
- gap: 2,
42
- direction: "col",
43
- className: "lg:justify-start md:flex-row",
44
- children: [
45
- (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
46
- (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
47
- Button,
48
- {
49
- as: "link",
50
- link: secondaryButton,
51
- className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
52
- ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
53
- children: secondaryButton == null ? void 0 : secondaryButton.label
54
- }
55
- )
56
- ]
57
- }
58
- );
59
- }
60
- function MainImage({ mainImage }) {
61
- var _a;
62
- if (!(mainImage == null ? void 0 : mainImage.image)) return null;
63
- return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-md", children: [
64
- /* @__PURE__ */ jsx(
65
- Image,
66
- {
67
- className: "overflow-hidden rounded-md object-cover md:rounded-br-none lg:h-[448px] relative z-10",
68
- src: `${mainImage.image}`,
69
- sizes: "(min-width: 520px) 448px, 90vw",
70
- width: 448,
71
- height: 448,
72
- alt: (_a = mainImage.alt) != null ? _a : "header-main-image"
73
- }
74
- ),
75
- /* @__PURE__ */ jsx(DecorativeImages, {})
76
- ] });
77
- }
78
- function DecorativeImages() {
79
- return /* @__PURE__ */ jsxs(Fragment, { children: [
80
- /* @__PURE__ */ jsx(
81
- ImageElement,
82
- {
83
- src: "/assets/elements/webriq-blue-dark-up.png",
84
- alt: "webriq-blue-dark-up-mainImage-element",
85
- className: "absolute hidden md:block",
86
- style: { top: "-2rem", right: "3rem", zIndex: 2 },
87
- width: 112,
88
- height: 112
89
- }
90
- ),
91
- /* @__PURE__ */ jsx(
92
- ImageElement,
93
- {
94
- src: "/assets/elements/wing-webriq-blue-down.png",
95
- alt: "wing-webriq-blue-down-mainImage-element",
96
- className: "absolute hidden md:block",
97
- style: { bottom: "-2rem", right: "-2rem", zIndex: 2 },
98
- width: 144,
99
- height: 144
100
- }
101
- ),
102
- /* @__PURE__ */ jsx(
103
- ImageElement,
104
- {
105
- src: "/assets/elements/bullets-gray-right.svg",
106
- alt: "bullets-gray-right-mainImage-element",
107
- className: "absolute hidden md:block",
108
- style: { top: "3rem", right: "-3rem", zIndex: 2 },
109
- width: 115,
110
- height: 157
111
- }
112
- ),
113
- /* @__PURE__ */ jsx(
114
- ImageElement,
115
- {
116
- src: "/assets/elements/bullets-gray-left.svg",
117
- alt: "bullets-gray-left-mainImage-element",
118
- className: "absolute hidden md:block",
119
- style: { bottom: "2.5rem", left: "-4.5rem", zIndex: 2 },
120
- width: 157,
121
- height: 115
122
- }
123
- )
124
- ] });
125
- }
126
- function ImageElement({
127
- src,
128
- alt,
129
- className,
130
- style,
131
- width,
132
- height
133
- }) {
134
- return /* @__PURE__ */ jsx(Image, { src, alt, className, style, width, height });
135
- }
136
-
137
- export {
138
- Header_A
139
- };
@@ -1,115 +0,0 @@
1
- // src/header_b.tsx
2
- import { Button } from "@stackshift-ui/button";
3
- import { Container } from "@stackshift-ui/container";
4
- import { Flex } from "@stackshift-ui/flex";
5
- import { Heading } from "@stackshift-ui/heading";
6
- import { Image } from "@stackshift-ui/image";
7
- import { Section } from "@stackshift-ui/section";
8
- import { Text } from "@stackshift-ui/text";
9
- import React from "react";
10
- import { jsx, jsxs } from "react/jsx-runtime";
11
- function Header_B({
12
- images,
13
- title,
14
- description,
15
- primaryButton,
16
- secondaryButton
17
- }) {
18
- return /* @__PURE__ */ jsx(Section, { className: "relative z-10 py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", direction: "col", gap: 4, className: "lg:flex-row", children: [
19
- /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
20
- /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
21
- /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
22
- ] }) }),
23
- images && /* @__PURE__ */ jsx(ImageGallery, { images })
24
- ] }) }) });
25
- }
26
- function TitleAndDescription({ title, description }) {
27
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
28
- title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
29
- description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
30
- ] });
31
- }
32
- function Buttons({
33
- primaryButton,
34
- secondaryButton
35
- }) {
36
- return /* @__PURE__ */ jsxs(
37
- Flex,
38
- {
39
- align: "center",
40
- gap: 2,
41
- className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
42
- children: [
43
- (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
44
- (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
45
- Button,
46
- {
47
- as: "link",
48
- link: secondaryButton,
49
- className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
50
- ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
51
- children: secondaryButton == null ? void 0 : secondaryButton.label
52
- }
53
- )
54
- ]
55
- }
56
- );
57
- }
58
- function ImageGallery({ images }) {
59
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
60
- if (!images) return null;
61
- return /* @__PURE__ */ jsxs("div", { className: "w-full px-4 lg:w-1/2", children: [
62
- /* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:ml-6", children: [
63
- ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx(
64
- Image,
65
- {
66
- className: "relative object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:mb-0 sm:w-1/3 md:rounded-3xl lg:rounded-br-none",
67
- sizes: "100vw",
68
- src: `${(_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.image}`,
69
- width: 941,
70
- height: 734,
71
- alt: (_d = (_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.alt) != null ? _d : "header-image-1"
72
- }
73
- ),
74
- ((_e = images == null ? void 0 : images[1]) == null ? void 0 : _e.image) && /* @__PURE__ */ jsx(
75
- Image,
76
- {
77
- className: "relative object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-2/3 md:rounded-3xl lg:rounded-bl-none",
78
- sizes: "100vw",
79
- src: `${(_f = images == null ? void 0 : images[1]) == null ? void 0 : _f.image}`,
80
- width: 1050,
81
- height: 701,
82
- alt: (_h = (_g = images == null ? void 0 : images[1]) == null ? void 0 : _g.alt) != null ? _h : "header-image-2"
83
- }
84
- )
85
- ] }),
86
- /* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:mr-6", children: [
87
- ((_i = images == null ? void 0 : images[2]) == null ? void 0 : _i.image) && /* @__PURE__ */ jsx(
88
- Image,
89
- {
90
- className: "object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:w-2/3 md:mb-0 md:rounded-3xl lg:rounded-br-none",
91
- sizes: "100vw",
92
- src: `${(_j = images == null ? void 0 : images[2]) == null ? void 0 : _j.image}`,
93
- width: 1050,
94
- height: 701,
95
- alt: (_l = (_k = images == null ? void 0 : images[2]) == null ? void 0 : _k.alt) != null ? _l : "header-image-3"
96
- }
97
- ),
98
- ((_m = images == null ? void 0 : images[3]) == null ? void 0 : _m.image) && /* @__PURE__ */ jsx(
99
- Image,
100
- {
101
- className: "object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-1/3 md:rounded-3xl lg:rounded-bl-none",
102
- sizes: "100vw",
103
- src: `${(_n = images == null ? void 0 : images[3]) == null ? void 0 : _n.image}`,
104
- width: 941,
105
- height: 734,
106
- alt: (_p = (_o = images == null ? void 0 : images[3]) == null ? void 0 : _o.alt) != null ? _p : "header-image-4"
107
- }
108
- )
109
- ] })
110
- ] });
111
- }
112
-
113
- export {
114
- Header_B
115
- };