@ttoss/landing-pages 0.6.13 → 0.6.15

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