@ttoss/landing-pages 0.4.2 → 0.4.4

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.
Files changed (4) hide show
  1. package/dist/esm/index.js +256 -222
  2. package/dist/index.d.ts +7 -7
  3. package/dist/index.js +256 -222
  4. package/package.json +5 -5
package/dist/esm/index.js CHANGED
@@ -15,61 +15,77 @@ var Hero = ({
15
15
  ctaLabel
16
16
  }) => {
17
17
  const isCentered = alignment === "center";
18
- return /* @__PURE__ */ jsxs(Flex, {
19
- sx: {
20
- justifyContent: "space-between",
21
- paddingY: "10vh",
22
- paddingX: "186px"
23
- },
24
- children: [
25
- /* @__PURE__ */ jsxs(Flex, {
26
- sx: {
27
- flexDirection: "column",
28
- alignItems: isCentered ? "center" : "start",
29
- backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
30
- width: isCentered ? "100%" : void 0,
31
- minHeight: isCentered ? "80vh" : void 0,
32
- justifyContent: isCentered ? "center" : void 0
33
- },
34
- children: [
35
- /* @__PURE__ */ jsx(Heading, {
36
- sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
37
- as: "h1",
38
- children: headerText
39
- }),
40
- /* @__PURE__ */ jsx(Text, {
18
+ return /* @__PURE__ */ jsxs(
19
+ Flex,
20
+ {
21
+ sx: {
22
+ justifyContent: "space-between",
23
+ paddingY: "10vh",
24
+ paddingX: "186px"
25
+ },
26
+ children: [
27
+ /* @__PURE__ */ jsxs(
28
+ Flex,
29
+ {
41
30
  sx: {
42
- fontSize: "24px",
43
- color: isCentered ? "white" : void 0,
44
- marginTop: "54px",
45
- marginBottom: "71px"
31
+ flexDirection: "column",
32
+ alignItems: isCentered ? "center" : "start",
33
+ backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
34
+ width: isCentered ? "100%" : void 0,
35
+ minHeight: isCentered ? "80vh" : void 0,
36
+ justifyContent: isCentered ? "center" : void 0
46
37
  },
47
- as: "h2",
48
- children: subHeaderText
49
- }),
50
- /* @__PURE__ */ jsx(Button, {
38
+ children: [
39
+ /* @__PURE__ */ jsx(
40
+ Heading,
41
+ {
42
+ sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
43
+ as: "h1",
44
+ children: headerText
45
+ }
46
+ ),
47
+ /* @__PURE__ */ jsx(
48
+ Text,
49
+ {
50
+ sx: {
51
+ fontSize: "24px",
52
+ color: isCentered ? "white" : void 0,
53
+ marginTop: "54px",
54
+ marginBottom: "71px"
55
+ },
56
+ as: "h2",
57
+ children: subHeaderText
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsx(
61
+ Button,
62
+ {
63
+ sx: {
64
+ background: isCentered ? "white" : "black",
65
+ color: isCentered ? "black" : void 0,
66
+ borderRadius: "10px",
67
+ fontSize: "16px"
68
+ },
69
+ children: ctaLabel
70
+ }
71
+ )
72
+ ]
73
+ }
74
+ ),
75
+ !isCentered && /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
76
+ Image,
77
+ {
51
78
  sx: {
52
- background: isCentered ? "white" : "black",
53
- color: isCentered ? "black" : void 0,
54
- borderRadius: "10px",
55
- fontSize: "16px"
79
+ maxWidth: "60vw",
80
+ maxHeight: "623px"
56
81
  },
57
- children: ctaLabel
58
- })
59
- ]
60
- }),
61
- !isCentered && /* @__PURE__ */ jsx(Flex, {
62
- children: /* @__PURE__ */ jsx(Image, {
63
- sx: {
64
- maxWidth: "60vw",
65
- maxHeight: "623px"
66
- },
67
- src: imageSrc,
68
- alt: imageAlt
69
- })
70
- })
71
- ]
72
- });
82
+ src: imageSrc,
83
+ alt: imageAlt
84
+ }
85
+ ) })
86
+ ]
87
+ }
88
+ );
73
89
  };
74
90
 
75
91
  // src/HeroCarousel/HeroCarousel.tsx
@@ -99,129 +115,149 @@ var HeroCarousel = ({ images = [] }) => {
99
115
  const result = images.find((item) => item.id === selectedImage);
100
116
  return result;
101
117
  }, [selectedImage, images]);
102
- return /* @__PURE__ */ jsx2(Flex2, {
103
- sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
104
- children: /* @__PURE__ */ jsxs2(Flex2, {
105
- sx: {
106
- width: "100%",
107
- height: "50vw",
108
- position: "relative",
109
- flexDirection: "column"
110
- },
111
- children: [
112
- /* @__PURE__ */ jsxs2(Flex2, {
113
- sx: { height: "100%", alignItems: "center", gap: 3 },
114
- children: [
115
- /* @__PURE__ */ jsx2(Flex2, {
116
- sx: {
117
- cursor: "pointer",
118
- height: "100%",
119
- alignItems: "center"
120
- },
121
- onClick: handleLeft,
122
- children: /* @__PURE__ */ jsx2(Icon, {
123
- icon: "akar-icons:chevron-left"
124
- })
125
- }),
126
- image && /* @__PURE__ */ jsx2(Image2, {
127
- sx: { height: "100%", width: "100%" },
128
- src: image.src
129
- }),
130
- /* @__PURE__ */ jsx2(Flex2, {
131
- sx: {
132
- cursor: "pointer",
133
- height: "100%",
134
- alignItems: "center"
135
- },
136
- onClick: handleRight,
137
- children: /* @__PURE__ */ jsx2(Icon, {
138
- icon: "akar-icons:chevron-right"
139
- })
140
- })
141
- ]
142
- }),
143
- /* @__PURE__ */ jsx2(Flex2, {
118
+ return /* @__PURE__ */ jsx2(
119
+ Flex2,
120
+ {
121
+ sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
122
+ children: /* @__PURE__ */ jsxs2(
123
+ Flex2,
124
+ {
144
125
  sx: {
145
- marginTop: 2,
146
- alignSelf: "center",
147
- gap: 3
126
+ width: "100%",
127
+ height: "50vw",
128
+ position: "relative",
129
+ flexDirection: "column"
148
130
  },
149
- children: images.map((image2) => {
150
- return /* @__PURE__ */ jsx2(Box, {
151
- role: "button",
152
- onClick: () => setSelectedImage(image2.id),
153
- sx: {
154
- background: image2.id === selectedImage ? "gray" : "black",
155
- width: 10,
156
- height: 10,
157
- borderRadius: "50%",
158
- cursor: "pointer"
131
+ children: [
132
+ /* @__PURE__ */ jsxs2(Flex2, { sx: { height: "100%", alignItems: "center", gap: 3 }, children: [
133
+ /* @__PURE__ */ jsx2(
134
+ Flex2,
135
+ {
136
+ sx: {
137
+ cursor: "pointer",
138
+ height: "100%",
139
+ alignItems: "center"
140
+ },
141
+ onClick: handleLeft,
142
+ children: /* @__PURE__ */ jsx2(Icon, { icon: "akar-icons:chevron-left" })
143
+ }
144
+ ),
145
+ image && /* @__PURE__ */ jsx2(Image2, { sx: { height: "100%", width: "100%" }, src: image.src }),
146
+ /* @__PURE__ */ jsx2(
147
+ Flex2,
148
+ {
149
+ sx: {
150
+ cursor: "pointer",
151
+ height: "100%",
152
+ alignItems: "center"
153
+ },
154
+ onClick: handleRight,
155
+ children: /* @__PURE__ */ jsx2(Icon, { icon: "akar-icons:chevron-right" })
156
+ }
157
+ )
158
+ ] }),
159
+ /* @__PURE__ */ jsx2(
160
+ Flex2,
161
+ {
162
+ sx: {
163
+ marginTop: 2,
164
+ alignSelf: "center",
165
+ gap: 3
166
+ },
167
+ children: images.map((image2) => {
168
+ return /* @__PURE__ */ jsx2(
169
+ Box,
170
+ {
171
+ role: "button",
172
+ onClick: () => setSelectedImage(image2.id),
173
+ sx: {
174
+ background: image2.id === selectedImage ? "gray" : "black",
175
+ width: 10,
176
+ height: 10,
177
+ borderRadius: "50%",
178
+ cursor: "pointer"
179
+ }
180
+ },
181
+ image2.id
182
+ );
183
+ })
159
184
  }
160
- }, image2.id);
161
- })
162
- })
163
- ]
164
- })
165
- });
185
+ )
186
+ ]
187
+ }
188
+ )
189
+ }
190
+ );
166
191
  };
167
192
 
168
193
  // src/Footer/Footer.tsx
169
194
  import { Flex as Flex3, Grid, Icon as Icon2, Image as Image3, Link, Text as Text2 } from "@ttoss/ui";
170
195
  import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
171
196
  var Footer = ({ links, logo, socialMedia, reserved }) => {
172
- return /* @__PURE__ */ jsxs3(Flex3, {
173
- sx: { flexDirection: "column", paddingY: "40px" },
174
- children: [
175
- /* @__PURE__ */ jsx3(Image3, {
197
+ return /* @__PURE__ */ jsxs3(Flex3, { sx: { flexDirection: "column", paddingY: "40px" }, children: [
198
+ /* @__PURE__ */ jsx3(
199
+ Image3,
200
+ {
176
201
  sx: {
177
202
  maxWidth: ["90px", "212px"],
178
203
  alignSelf: "center",
179
204
  marginBottom: [3, 4]
180
205
  },
181
206
  src: logo
182
- }),
183
- /* @__PURE__ */ jsxs3(Flex3, {
207
+ }
208
+ ),
209
+ /* @__PURE__ */ jsxs3(
210
+ Flex3,
211
+ {
184
212
  sx: {
185
213
  flexDirection: ["column", "row"],
186
214
  justifyContent: ["unset", "center"],
187
215
  paddingX: 3
188
216
  },
189
217
  children: [
190
- /* @__PURE__ */ jsx3(Grid, {
191
- sx: {
192
- justifyContent: "center",
193
- gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
194
- },
195
- children: links.map((link, idx) => {
196
- return /* @__PURE__ */ jsx3(Link, {
197
- sx: {
198
- fontSize: "xs",
199
- fontFamily: "body",
200
- textDecorationLine: "none"
201
- },
202
- href: link.href,
203
- children: link.label
204
- }, `link-${link.label}-${idx}`);
205
- })
206
- }),
207
- /* @__PURE__ */ jsx3(Flex3, {
208
- sx: {
209
- marginTop: [3],
210
- gap: [4],
211
- justifyContent: "center"
212
- },
213
- children: socialMedia.map((social) => {
214
- return /* @__PURE__ */ jsx3(Link, {
215
- href: social.href,
216
- children: /* @__PURE__ */ jsx3(Icon2, {
217
- icon: social.icon
218
- })
219
- }, `social-media-${social.icon}`);
220
- })
221
- })
218
+ /* @__PURE__ */ jsx3(
219
+ Grid,
220
+ {
221
+ sx: {
222
+ justifyContent: "center",
223
+ gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
224
+ },
225
+ children: links.map((link, idx) => {
226
+ return /* @__PURE__ */ jsx3(
227
+ Link,
228
+ {
229
+ sx: {
230
+ fontSize: "xs",
231
+ fontFamily: "body",
232
+ textDecorationLine: "none"
233
+ },
234
+ href: link.href,
235
+ children: link.label
236
+ },
237
+ `link-${link.label}-${idx}`
238
+ );
239
+ })
240
+ }
241
+ ),
242
+ /* @__PURE__ */ jsx3(
243
+ Flex3,
244
+ {
245
+ sx: {
246
+ marginTop: [3],
247
+ gap: [4],
248
+ justifyContent: "center"
249
+ },
250
+ children: socialMedia.map((social) => {
251
+ return /* @__PURE__ */ jsx3(Link, { href: social.href, children: /* @__PURE__ */ jsx3(Icon2, { icon: social.icon }) }, `social-media-${social.icon}`);
252
+ })
253
+ }
254
+ )
222
255
  ]
223
- }),
224
- /* @__PURE__ */ jsx3(Text2, {
256
+ }
257
+ ),
258
+ /* @__PURE__ */ jsx3(
259
+ Text2,
260
+ {
225
261
  sx: {
226
262
  fontSize: "xxs",
227
263
  color: "gray",
@@ -231,9 +267,9 @@ var Footer = ({ links, logo, socialMedia, reserved }) => {
231
267
  marginTop: [3, 4]
232
268
  },
233
269
  children: reserved
234
- })
235
- ]
236
- });
270
+ }
271
+ )
272
+ ] });
237
273
  };
238
274
 
239
275
  // src/Navbar/Navbar.tsx
@@ -264,41 +300,44 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
264
300
  justifySelfLogo: "center"
265
301
  };
266
302
  }, [type]);
267
- return /* @__PURE__ */ jsxs4(Fragment, {
268
- children: [
269
- /* @__PURE__ */ jsxs4(Flex4, {
270
- sx: { flexDirection: "column", display: ["flex", "none"] },
271
- children: [
272
- /* @__PURE__ */ jsxs4(Grid2, {
273
- sx: {
274
- justifyContent: "space-between",
275
- alignItems: "center",
276
- gridTemplateColumns: "1fr 1fr 1fr"
277
- },
278
- children: [
279
- /* @__PURE__ */ jsx4(Icon3, {
303
+ return /* @__PURE__ */ jsxs4(Fragment, { children: [
304
+ /* @__PURE__ */ jsxs4(Flex4, { sx: { flexDirection: "column", display: ["flex", "none"] }, children: [
305
+ /* @__PURE__ */ jsxs4(
306
+ Grid2,
307
+ {
308
+ sx: {
309
+ justifyContent: "space-between",
310
+ alignItems: "center",
311
+ gridTemplateColumns: "1fr 1fr 1fr"
312
+ },
313
+ children: [
314
+ /* @__PURE__ */ jsx4(
315
+ Icon3,
316
+ {
280
317
  sx: { cursor: "pointer", justifySelf: "start", fontSize: "3xl" },
281
318
  onClick: () => setIsMenuOpen((prev) => !prev),
282
319
  icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
283
- }),
284
- /* @__PURE__ */ jsx4(Image4, {
285
- src: logo,
286
- sx: { maxWidth: "112px" }
287
- }),
288
- /* @__PURE__ */ jsx4(Flex4, {
320
+ }
321
+ ),
322
+ /* @__PURE__ */ jsx4(Image4, { src: logo, sx: { maxWidth: "112px" } }),
323
+ /* @__PURE__ */ jsx4(
324
+ Flex4,
325
+ {
289
326
  sx: { justifyContent: "end", width: "100%", alignItems: "center" },
290
- children: cta && /* @__PURE__ */ jsx4(Link2, {
291
- sx: { fontSize: "xs" },
292
- href: cta.href,
293
- children: cta.label
294
- })
295
- })
296
- ]
297
- }),
298
- /* @__PURE__ */ jsx4(Collapse, {
299
- isOpened: isMenuOpen,
300
- initialStyle: { height: 0, overflow: "hidden" },
301
- children: /* @__PURE__ */ jsx4(Flex4, {
327
+ children: cta && /* @__PURE__ */ jsx4(Link2, { sx: { fontSize: "xs" }, href: cta.href, children: cta.label })
328
+ }
329
+ )
330
+ ]
331
+ }
332
+ ),
333
+ /* @__PURE__ */ jsx4(
334
+ Collapse,
335
+ {
336
+ isOpened: isMenuOpen,
337
+ initialStyle: { height: 0, overflow: "hidden" },
338
+ children: /* @__PURE__ */ jsx4(
339
+ Flex4,
340
+ {
302
341
  sx: {
303
342
  flexDirection: "column",
304
343
  width: "100%",
@@ -307,17 +346,16 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
307
346
  paddingLeft: 3
308
347
  },
309
348
  children: links.map((link) => {
310
- return /* @__PURE__ */ jsx4(Link2, {
311
- sx: { fontSize: "xs" },
312
- href: link.href,
313
- children: link.label
314
- }, link.label);
349
+ return /* @__PURE__ */ jsx4(Link2, { sx: { fontSize: "xs" }, href: link.href, children: link.label }, link.label);
315
350
  })
316
- })
317
- })
318
- ]
319
- }),
320
- /* @__PURE__ */ jsxs4(Grid2, {
351
+ }
352
+ )
353
+ }
354
+ )
355
+ ] }),
356
+ /* @__PURE__ */ jsxs4(
357
+ Grid2,
358
+ {
321
359
  sx: {
322
360
  display: ["none", "grid"],
323
361
  gridTemplateAreas,
@@ -327,27 +365,23 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
327
365
  paddingY: 4
328
366
  },
329
367
  children: [
330
- /* @__PURE__ */ jsx4(Image4, {
331
- sx: {
332
- gridArea: "logo",
333
- height: heightLogo,
334
- justifySelf: justifySelfLogo
335
- },
336
- src: logo
337
- }),
338
- /* @__PURE__ */ jsx4(Flex4, {
339
- sx: { gridArea: "links", justifyContent: "space-around" },
340
- children: links.map((link) => {
341
- return /* @__PURE__ */ jsx4(Link2, {
342
- sx: { fontSize: "2xl" },
343
- href: link.href,
344
- children: link.label
345
- }, link.label);
346
- })
347
- }),
348
- /* @__PURE__ */ jsx4(Flex4, {
349
- sx: { gridArea: "cta", justifyContent: "end" },
350
- children: cta && /* @__PURE__ */ jsx4(Link2, {
368
+ /* @__PURE__ */ jsx4(
369
+ Image4,
370
+ {
371
+ sx: {
372
+ gridArea: "logo",
373
+ height: heightLogo,
374
+ justifySelf: justifySelfLogo
375
+ },
376
+ src: logo
377
+ }
378
+ ),
379
+ /* @__PURE__ */ jsx4(Flex4, { sx: { gridArea: "links", justifyContent: "space-around" }, children: links.map((link) => {
380
+ return /* @__PURE__ */ jsx4(Link2, { sx: { fontSize: "2xl" }, href: link.href, children: link.label }, link.label);
381
+ }) }),
382
+ /* @__PURE__ */ jsx4(Flex4, { sx: { gridArea: "cta", justifyContent: "end" }, children: cta && /* @__PURE__ */ jsx4(
383
+ Link2,
384
+ {
351
385
  href: cta.href,
352
386
  sx: {
353
387
  backgroundColor: "background",
@@ -361,12 +395,12 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
361
395
  },
362
396
  as: "button",
363
397
  children: cta.label
364
- })
365
- })
398
+ }
399
+ ) })
366
400
  ]
367
- })
368
- ]
369
- });
401
+ }
402
+ )
403
+ ] });
370
404
  };
371
405
  export {
372
406
  Footer,
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare type HeroProps = {
1
+ type HeroProps = {
2
2
  headerText: string;
3
3
  subHeaderText: string;
4
4
  alignment: 'left' | 'center';
@@ -8,7 +8,7 @@ declare type HeroProps = {
8
8
  };
9
9
  declare const Hero: ({ alignment, headerText, subHeaderText, imageSrc, imageAlt, ctaLabel, }: HeroProps) => JSX.Element;
10
10
 
11
- declare type HeroCarouselProps = {
11
+ type HeroCarouselProps = {
12
12
  images: {
13
13
  id: string;
14
14
  alt: string;
@@ -17,15 +17,15 @@ declare type HeroCarouselProps = {
17
17
  };
18
18
  declare const HeroCarousel: ({ images }: HeroCarouselProps) => JSX.Element;
19
19
 
20
- declare type FooterLink = {
20
+ type FooterLink = {
21
21
  label: string;
22
22
  href: string;
23
23
  };
24
- declare type SocialMedia = {
24
+ type SocialMedia = {
25
25
  icon: string;
26
26
  href: string;
27
27
  };
28
- declare type FooterProps = {
28
+ type FooterProps = {
29
29
  links: FooterLink[];
30
30
  logo: string;
31
31
  socialMedia: SocialMedia[];
@@ -33,11 +33,11 @@ declare type FooterProps = {
33
33
  };
34
34
  declare const Footer: ({ links, logo, socialMedia, reserved }: FooterProps) => JSX.Element;
35
35
 
36
- declare type NavbarLink = {
36
+ type NavbarLink = {
37
37
  label: string;
38
38
  href: string;
39
39
  };
40
- declare type NavbarProps = {
40
+ type NavbarProps = {
41
41
  type?: '1' | '2';
42
42
  logo: string;
43
43
  cta?: {
package/dist/index.js CHANGED
@@ -49,61 +49,77 @@ var Hero = ({
49
49
  ctaLabel
50
50
  }) => {
51
51
  const isCentered = alignment === "center";
52
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, {
53
- sx: {
54
- justifyContent: "space-between",
55
- paddingY: "10vh",
56
- paddingX: "186px"
57
- },
58
- children: [
59
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, {
60
- sx: {
61
- flexDirection: "column",
62
- alignItems: isCentered ? "center" : "start",
63
- backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
64
- width: isCentered ? "100%" : void 0,
65
- minHeight: isCentered ? "80vh" : void 0,
66
- justifyContent: isCentered ? "center" : void 0
67
- },
68
- children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Heading, {
70
- sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
71
- as: "h1",
72
- children: headerText
73
- }),
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, {
52
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
53
+ import_ui.Flex,
54
+ {
55
+ sx: {
56
+ justifyContent: "space-between",
57
+ paddingY: "10vh",
58
+ paddingX: "186px"
59
+ },
60
+ children: [
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
62
+ import_ui.Flex,
63
+ {
75
64
  sx: {
76
- fontSize: "24px",
77
- color: isCentered ? "white" : void 0,
78
- marginTop: "54px",
79
- marginBottom: "71px"
65
+ flexDirection: "column",
66
+ alignItems: isCentered ? "center" : "start",
67
+ backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
68
+ width: isCentered ? "100%" : void 0,
69
+ minHeight: isCentered ? "80vh" : void 0,
70
+ justifyContent: isCentered ? "center" : void 0
80
71
  },
81
- as: "h2",
82
- children: subHeaderText
83
- }),
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, {
72
+ children: [
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_ui.Heading,
75
+ {
76
+ sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
77
+ as: "h1",
78
+ children: headerText
79
+ }
80
+ ),
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
82
+ import_ui.Text,
83
+ {
84
+ sx: {
85
+ fontSize: "24px",
86
+ color: isCentered ? "white" : void 0,
87
+ marginTop: "54px",
88
+ marginBottom: "71px"
89
+ },
90
+ as: "h2",
91
+ children: subHeaderText
92
+ }
93
+ ),
94
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
95
+ import_ui.Button,
96
+ {
97
+ sx: {
98
+ background: isCentered ? "white" : "black",
99
+ color: isCentered ? "black" : void 0,
100
+ borderRadius: "10px",
101
+ fontSize: "16px"
102
+ },
103
+ children: ctaLabel
104
+ }
105
+ )
106
+ ]
107
+ }
108
+ ),
109
+ !isCentered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
110
+ import_ui.Image,
111
+ {
85
112
  sx: {
86
- background: isCentered ? "white" : "black",
87
- color: isCentered ? "black" : void 0,
88
- borderRadius: "10px",
89
- fontSize: "16px"
113
+ maxWidth: "60vw",
114
+ maxHeight: "623px"
90
115
  },
91
- children: ctaLabel
92
- })
93
- ]
94
- }),
95
- !isCentered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Flex, {
96
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Image, {
97
- sx: {
98
- maxWidth: "60vw",
99
- maxHeight: "623px"
100
- },
101
- src: imageSrc,
102
- alt: imageAlt
103
- })
104
- })
105
- ]
106
- });
116
+ src: imageSrc,
117
+ alt: imageAlt
118
+ }
119
+ ) })
120
+ ]
121
+ }
122
+ );
107
123
  };
108
124
 
109
125
  // src/HeroCarousel/HeroCarousel.tsx
@@ -133,129 +149,149 @@ var HeroCarousel = ({ images = [] }) => {
133
149
  const result = images.find((item) => item.id === selectedImage);
134
150
  return result;
135
151
  }, [selectedImage, images]);
136
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
137
- sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
138
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
139
- sx: {
140
- width: "100%",
141
- height: "50vw",
142
- position: "relative",
143
- flexDirection: "column"
144
- },
145
- children: [
146
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
147
- sx: { height: "100%", alignItems: "center", gap: 3 },
148
- children: [
149
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
150
- sx: {
151
- cursor: "pointer",
152
- height: "100%",
153
- alignItems: "center"
154
- },
155
- onClick: handleLeft,
156
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, {
157
- icon: "akar-icons:chevron-left"
158
- })
159
- }),
160
- image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Image, {
161
- sx: { height: "100%", width: "100%" },
162
- src: image.src
163
- }),
164
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
165
- sx: {
166
- cursor: "pointer",
167
- height: "100%",
168
- alignItems: "center"
169
- },
170
- onClick: handleRight,
171
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, {
172
- icon: "akar-icons:chevron-right"
173
- })
174
- })
175
- ]
176
- }),
177
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
152
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
153
+ import_ui2.Flex,
154
+ {
155
+ sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
156
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
157
+ import_ui2.Flex,
158
+ {
178
159
  sx: {
179
- marginTop: 2,
180
- alignSelf: "center",
181
- gap: 3
160
+ width: "100%",
161
+ height: "50vw",
162
+ position: "relative",
163
+ flexDirection: "column"
182
164
  },
183
- children: images.map((image2) => {
184
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Box, {
185
- role: "button",
186
- onClick: () => setSelectedImage(image2.id),
187
- sx: {
188
- background: image2.id === selectedImage ? "gray" : "black",
189
- width: 10,
190
- height: 10,
191
- borderRadius: "50%",
192
- cursor: "pointer"
165
+ children: [
166
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui2.Flex, { sx: { height: "100%", alignItems: "center", gap: 3 }, children: [
167
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
168
+ import_ui2.Flex,
169
+ {
170
+ sx: {
171
+ cursor: "pointer",
172
+ height: "100%",
173
+ alignItems: "center"
174
+ },
175
+ onClick: handleLeft,
176
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, { icon: "akar-icons:chevron-left" })
177
+ }
178
+ ),
179
+ image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Image, { sx: { height: "100%", width: "100%" }, src: image.src }),
180
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
181
+ import_ui2.Flex,
182
+ {
183
+ sx: {
184
+ cursor: "pointer",
185
+ height: "100%",
186
+ alignItems: "center"
187
+ },
188
+ onClick: handleRight,
189
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, { icon: "akar-icons:chevron-right" })
190
+ }
191
+ )
192
+ ] }),
193
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
194
+ import_ui2.Flex,
195
+ {
196
+ sx: {
197
+ marginTop: 2,
198
+ alignSelf: "center",
199
+ gap: 3
200
+ },
201
+ children: images.map((image2) => {
202
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
203
+ import_ui2.Box,
204
+ {
205
+ role: "button",
206
+ onClick: () => setSelectedImage(image2.id),
207
+ sx: {
208
+ background: image2.id === selectedImage ? "gray" : "black",
209
+ width: 10,
210
+ height: 10,
211
+ borderRadius: "50%",
212
+ cursor: "pointer"
213
+ }
214
+ },
215
+ image2.id
216
+ );
217
+ })
193
218
  }
194
- }, image2.id);
195
- })
196
- })
197
- ]
198
- })
199
- });
219
+ )
220
+ ]
221
+ }
222
+ )
223
+ }
224
+ );
200
225
  };
201
226
 
202
227
  // src/Footer/Footer.tsx
203
228
  var import_ui3 = require("@ttoss/ui");
204
229
  var import_jsx_runtime3 = require("react/jsx-runtime");
205
230
  var Footer = ({ links, logo, socialMedia, reserved }) => {
206
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
207
- sx: { flexDirection: "column", paddingY: "40px" },
208
- children: [
209
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Image, {
231
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { sx: { flexDirection: "column", paddingY: "40px" }, children: [
232
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
233
+ import_ui3.Image,
234
+ {
210
235
  sx: {
211
236
  maxWidth: ["90px", "212px"],
212
237
  alignSelf: "center",
213
238
  marginBottom: [3, 4]
214
239
  },
215
240
  src: logo
216
- }),
217
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
241
+ }
242
+ ),
243
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
244
+ import_ui3.Flex,
245
+ {
218
246
  sx: {
219
247
  flexDirection: ["column", "row"],
220
248
  justifyContent: ["unset", "center"],
221
249
  paddingX: 3
222
250
  },
223
251
  children: [
224
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Grid, {
225
- sx: {
226
- justifyContent: "center",
227
- gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
228
- },
229
- children: links.map((link, idx) => {
230
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Link, {
231
- sx: {
232
- fontSize: "xs",
233
- fontFamily: "body",
234
- textDecorationLine: "none"
235
- },
236
- href: link.href,
237
- children: link.label
238
- }, `link-${link.label}-${idx}`);
239
- })
240
- }),
241
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Flex, {
242
- sx: {
243
- marginTop: [3],
244
- gap: [4],
245
- justifyContent: "center"
246
- },
247
- children: socialMedia.map((social) => {
248
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Link, {
249
- href: social.href,
250
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Icon, {
251
- icon: social.icon
252
- })
253
- }, `social-media-${social.icon}`);
254
- })
255
- })
252
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
253
+ import_ui3.Grid,
254
+ {
255
+ sx: {
256
+ justifyContent: "center",
257
+ gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
258
+ },
259
+ children: links.map((link, idx) => {
260
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
261
+ import_ui3.Link,
262
+ {
263
+ sx: {
264
+ fontSize: "xs",
265
+ fontFamily: "body",
266
+ textDecorationLine: "none"
267
+ },
268
+ href: link.href,
269
+ children: link.label
270
+ },
271
+ `link-${link.label}-${idx}`
272
+ );
273
+ })
274
+ }
275
+ ),
276
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
277
+ import_ui3.Flex,
278
+ {
279
+ sx: {
280
+ marginTop: [3],
281
+ gap: [4],
282
+ justifyContent: "center"
283
+ },
284
+ children: socialMedia.map((social) => {
285
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Link, { href: social.href, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Icon, { icon: social.icon }) }, `social-media-${social.icon}`);
286
+ })
287
+ }
288
+ )
256
289
  ]
257
- }),
258
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, {
290
+ }
291
+ ),
292
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
293
+ import_ui3.Text,
294
+ {
259
295
  sx: {
260
296
  fontSize: "xxs",
261
297
  color: "gray",
@@ -265,9 +301,9 @@ var Footer = ({ links, logo, socialMedia, reserved }) => {
265
301
  marginTop: [3, 4]
266
302
  },
267
303
  children: reserved
268
- })
269
- ]
270
- });
304
+ }
305
+ )
306
+ ] });
271
307
  };
272
308
 
273
309
  // src/Navbar/Navbar.tsx
@@ -298,41 +334,44 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
298
334
  justifySelfLogo: "center"
299
335
  };
300
336
  }, [type]);
301
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, {
302
- children: [
303
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
304
- sx: { flexDirection: "column", display: ["flex", "none"] },
305
- children: [
306
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
307
- sx: {
308
- justifyContent: "space-between",
309
- alignItems: "center",
310
- gridTemplateColumns: "1fr 1fr 1fr"
311
- },
312
- children: [
313
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Icon, {
337
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
338
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Flex, { sx: { flexDirection: "column", display: ["flex", "none"] }, children: [
339
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
340
+ import_ui4.Grid,
341
+ {
342
+ sx: {
343
+ justifyContent: "space-between",
344
+ alignItems: "center",
345
+ gridTemplateColumns: "1fr 1fr 1fr"
346
+ },
347
+ children: [
348
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
349
+ import_ui4.Icon,
350
+ {
314
351
  sx: { cursor: "pointer", justifySelf: "start", fontSize: "3xl" },
315
352
  onClick: () => setIsMenuOpen((prev) => !prev),
316
353
  icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
317
- }),
318
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Image, {
319
- src: logo,
320
- sx: { maxWidth: "112px" }
321
- }),
322
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
354
+ }
355
+ ),
356
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Image, { src: logo, sx: { maxWidth: "112px" } }),
357
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
358
+ import_ui4.Flex,
359
+ {
323
360
  sx: { justifyContent: "end", width: "100%", alignItems: "center" },
324
- children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
325
- sx: { fontSize: "xs" },
326
- href: cta.href,
327
- children: cta.label
328
- })
329
- })
330
- ]
331
- }),
332
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_collapse.Collapse, {
333
- isOpened: isMenuOpen,
334
- initialStyle: { height: 0, overflow: "hidden" },
335
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
361
+ children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, { sx: { fontSize: "xs" }, href: cta.href, children: cta.label })
362
+ }
363
+ )
364
+ ]
365
+ }
366
+ ),
367
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
368
+ import_react_collapse.Collapse,
369
+ {
370
+ isOpened: isMenuOpen,
371
+ initialStyle: { height: 0, overflow: "hidden" },
372
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
373
+ import_ui4.Flex,
374
+ {
336
375
  sx: {
337
376
  flexDirection: "column",
338
377
  width: "100%",
@@ -341,17 +380,16 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
341
380
  paddingLeft: 3
342
381
  },
343
382
  children: links.map((link) => {
344
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
345
- sx: { fontSize: "xs" },
346
- href: link.href,
347
- children: link.label
348
- }, link.label);
383
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, { sx: { fontSize: "xs" }, href: link.href, children: link.label }, link.label);
349
384
  })
350
- })
351
- })
352
- ]
353
- }),
354
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
385
+ }
386
+ )
387
+ }
388
+ )
389
+ ] }),
390
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
391
+ import_ui4.Grid,
392
+ {
355
393
  sx: {
356
394
  display: ["none", "grid"],
357
395
  gridTemplateAreas,
@@ -361,27 +399,23 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
361
399
  paddingY: 4
362
400
  },
363
401
  children: [
364
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Image, {
365
- sx: {
366
- gridArea: "logo",
367
- height: heightLogo,
368
- justifySelf: justifySelfLogo
369
- },
370
- src: logo
371
- }),
372
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
373
- sx: { gridArea: "links", justifyContent: "space-around" },
374
- children: links.map((link) => {
375
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
376
- sx: { fontSize: "2xl" },
377
- href: link.href,
378
- children: link.label
379
- }, link.label);
380
- })
381
- }),
382
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
383
- sx: { gridArea: "cta", justifyContent: "end" },
384
- children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
402
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
403
+ import_ui4.Image,
404
+ {
405
+ sx: {
406
+ gridArea: "logo",
407
+ height: heightLogo,
408
+ justifySelf: justifySelfLogo
409
+ },
410
+ src: logo
411
+ }
412
+ ),
413
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, { sx: { gridArea: "links", justifyContent: "space-around" }, children: links.map((link) => {
414
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, { sx: { fontSize: "2xl" }, href: link.href, children: link.label }, link.label);
415
+ }) }),
416
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, { sx: { gridArea: "cta", justifyContent: "end" }, children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
417
+ import_ui4.Link,
418
+ {
385
419
  href: cta.href,
386
420
  sx: {
387
421
  backgroundColor: "background",
@@ -395,12 +429,12 @@ var Navbar = ({ links, logo, cta, type = "1" }) => {
395
429
  },
396
430
  as: "button",
397
431
  children: cta.label
398
- })
399
- })
432
+ }
433
+ ) })
400
434
  ]
401
- })
402
- ]
403
- });
435
+ }
436
+ )
437
+ ] });
404
438
  };
405
439
  // Annotate the CommonJS export names for ESM import in node:
406
440
  0 && (module.exports = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/landing-pages",
3
- "version": "0.4.2",
3
+ "version": "0.4.4",
4
4
  "description": "Package for creating landing pages.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -28,9 +28,9 @@
28
28
  "react": ">=18.0.0"
29
29
  },
30
30
  "devDependencies": {
31
- "@ttoss/config": "^1.22.0",
32
- "@ttoss/test-utils": "^1.18.2",
33
- "@ttoss/ui": "^1.26.2",
31
+ "@ttoss/config": "^1.25.0",
32
+ "@ttoss/test-utils": "^1.18.3",
33
+ "@ttoss/ui": "^1.27.0",
34
34
  "@types/jest": "^29.2.4",
35
35
  "@types/react-collapse": "^5.0.1",
36
36
  "jest": "^29.3.1",
@@ -43,5 +43,5 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
- "gitHead": "00ce34857256c353cd910ad1bf8c7f2a5986a88f"
46
+ "gitHead": "9159bd57009f4fee620218bc1a0e7bbac28acccd"
47
47
  }