@riligar/components-kit 1.0.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.
@@ -0,0 +1,1823 @@
1
+ import { createTheme, Stack, Text, Title, Center, Box, Button, Container, Paper, Group, SimpleGrid, Image, List, ThemeIcon, Grid, Badge, Code, RingProgress, Divider, SegmentedControl, Accordion, Avatar, Anchor, ActionIcon } from '@mantine/core';
2
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
+ import { useWindowScroll } from '@mantine/hooks';
4
+ import { IconCheck, IconBolt, IconQuote, IconCircleCheck } from '@tabler/icons-react';
5
+ import { Fragment as Fragment$1 } from 'react';
6
+
7
+ // RiLiGar Design System Theme — same as console
8
+ const theme = createTheme({
9
+ fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
10
+ headings: {
11
+ fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
12
+ fontWeight: "900"
13
+ },
14
+ colors: {
15
+ // RiLiGar Monochrome Palette - Zen Optimized
16
+ gray: ["#FFFFFF",
17
+ // 0: App Base (Pure White)
18
+ "#F9FAFB",
19
+ // 1: Hover / Secondary Background
20
+ "#F3F4F6",
21
+ // 2: Border Standard
22
+ "#E5E7EB",
23
+ // 3: Disabled / Muted Border
24
+ "#9CA3AF",
25
+ // 4: Quaternary Text
26
+ "#6B7280",
27
+ // 5: Tertiary Text (Labels)
28
+ "#4B5563",
29
+ // 6: Secondary Text
30
+ "#374151",
31
+ // 7: Secondary Text Dark
32
+ "#1F2937",
33
+ // 8: Primary Text Dark
34
+ "#11181C" // 9: Primary Text (RiLiGar Absolute)
35
+ ]
36
+ },
37
+ primaryColor: "gray",
38
+ primaryShade: 9,
39
+ autoContrast: true,
40
+ defaultRadius: "0",
41
+ // Zen prefers sharp or very subtle radius, defaulting to 0 for inputs/buttons
42
+
43
+ components: {
44
+ Container: {
45
+ defaultProps: {
46
+ size: "xl",
47
+ // Zen uses XL containers
48
+ px: "md"
49
+ }
50
+ },
51
+ Paper: {
52
+ defaultProps: {
53
+ withBorder: true,
54
+ shadow: "none",
55
+ radius: "0",
56
+ bg: "white"
57
+ }
58
+ },
59
+ Card: {
60
+ defaultProps: {
61
+ withBorder: false,
62
+ // Zen reduces borders
63
+ shadow: "none",
64
+ radius: "0",
65
+ padding: "xl",
66
+ bg: "transparent"
67
+ }
68
+ },
69
+ Button: {
70
+ defaultProps: {
71
+ size: "md",
72
+ fw: 800,
73
+ radius: "0",
74
+ variant: "filled",
75
+ color: "gray.9"
76
+ },
77
+ styles: {
78
+ root: {
79
+ textTransform: "uppercase",
80
+ letterSpacing: "1px"
81
+ }
82
+ }
83
+ },
84
+ TextInput: {
85
+ defaultProps: {
86
+ size: "lg",
87
+ radius: "0",
88
+ variant: "unstyled" // Zen Minimalist Inputs
89
+ },
90
+ styles: {
91
+ input: {
92
+ borderBottom: "1px solid var(--mantine-color-gray-2)",
93
+ paddingLeft: 0,
94
+ paddingRight: 0
95
+ }
96
+ }
97
+ },
98
+ Title: {
99
+ defaultProps: {
100
+ lh: 1.1,
101
+ c: "gray.9",
102
+ ls: "-0.04em" // Zen Massive Hierarchy
103
+ }
104
+ },
105
+ Text: {
106
+ defaultProps: {
107
+ lh: 1.6,
108
+ c: "gray.9",
109
+ size: "md"
110
+ }
111
+ },
112
+ Badge: {
113
+ defaultProps: {
114
+ variant: "dot",
115
+ // Zen Subtle Badges
116
+ color: "gray",
117
+ radius: "0",
118
+ size: "sm"
119
+ },
120
+ styles: {
121
+ root: {
122
+ textTransform: "uppercase",
123
+ letterSpacing: "1.5px",
124
+ fontWeight: 800
125
+ }
126
+ }
127
+ },
128
+ ThemeIcon: {
129
+ defaultProps: {
130
+ variant: "light",
131
+ color: "gray",
132
+ radius: "0",
133
+ size: "lg"
134
+ }
135
+ },
136
+ Divider: {
137
+ defaultProps: {
138
+ color: "gray.2"
139
+ }
140
+ }
141
+ }
142
+ });
143
+
144
+ function SectionHeader({
145
+ subtitle,
146
+ title,
147
+ titleOrder = 2,
148
+ titleFz = "var(--fz-section-title)",
149
+ ta = "left",
150
+ maw
151
+ }) {
152
+ if (!title && !subtitle) return null;
153
+ return /*#__PURE__*/jsxs(Stack, {
154
+ gap: "xs",
155
+ align: ta === "center" ? "center" : "flex-start",
156
+ ta: ta,
157
+ children: [subtitle && /*#__PURE__*/jsx(Text, {
158
+ c: "gray.4",
159
+ size: "xs",
160
+ fw: 800,
161
+ tt: "uppercase",
162
+ ls: "1.5px",
163
+ children: subtitle
164
+ }), title && /*#__PURE__*/jsx(Title, {
165
+ order: titleOrder,
166
+ fz: titleFz,
167
+ maw: maw,
168
+ children: title
169
+ })]
170
+ });
171
+ }
172
+
173
+ function MediaBlock({
174
+ video,
175
+ image,
176
+ width = "100%",
177
+ alt
178
+ }) {
179
+ if (video) {
180
+ return /*#__PURE__*/jsx(Center, {
181
+ children: /*#__PURE__*/jsx(Box, {
182
+ component: "video",
183
+ src: video.src,
184
+ autoPlay: true,
185
+ loop: true,
186
+ muted: true,
187
+ playsInline: true,
188
+ "aria-label": alt || "Demonstração em vídeo",
189
+ w: video.width || width,
190
+ h: "auto",
191
+ style: {
192
+ filter: video.filter || "none"
193
+ }
194
+ })
195
+ });
196
+ }
197
+ if (image) {
198
+ return /*#__PURE__*/jsx(Center, {
199
+ children: /*#__PURE__*/jsx(Box, {
200
+ component: "img",
201
+ src: image,
202
+ alt: alt || "",
203
+ w: width,
204
+ h: "auto"
205
+ })
206
+ });
207
+ }
208
+ return null;
209
+ }
210
+
211
+ function CTAButton({
212
+ label,
213
+ href,
214
+ onClick,
215
+ icon,
216
+ size = "lg",
217
+ variant = "filled",
218
+ color,
219
+ target,
220
+ px,
221
+ fullWidth,
222
+ leftSection,
223
+ ...rest
224
+ }) {
225
+ return /*#__PURE__*/jsx(Button, {
226
+ size: size,
227
+ component: href ? "a" : "button",
228
+ href: href,
229
+ onClick: onClick,
230
+ target: target,
231
+ rightSection: icon,
232
+ leftSection: leftSection,
233
+ variant: variant,
234
+ color: color,
235
+ px: px,
236
+ fullWidth: fullWidth,
237
+ ...rest,
238
+ children: label
239
+ });
240
+ }
241
+
242
+ function Layout({
243
+ children,
244
+ title,
245
+ subtitle,
246
+ id,
247
+ bg = "white",
248
+ py = {
249
+ base: 80,
250
+ md: 120
251
+ },
252
+ maw = 800,
253
+ ta = "left",
254
+ stackGap = "xl"
255
+ }) {
256
+ return /*#__PURE__*/jsx(Box, {
257
+ component: "section",
258
+ id: id,
259
+ bg: bg,
260
+ py: py,
261
+ style: {
262
+ overflow: "hidden"
263
+ },
264
+ children: /*#__PURE__*/jsx(Container, {
265
+ size: "lg",
266
+ children: /*#__PURE__*/jsxs(Stack, {
267
+ gap: stackGap,
268
+ children: [/*#__PURE__*/jsx(SectionHeader, {
269
+ subtitle: subtitle,
270
+ title: title,
271
+ ta: ta,
272
+ maw: maw
273
+ }), /*#__PURE__*/jsx(Box, {
274
+ children: children
275
+ })]
276
+ })
277
+ })
278
+ });
279
+ }
280
+
281
+ function Header({
282
+ logo,
283
+ navLinks = [],
284
+ loginCta,
285
+ signupCta
286
+ }) {
287
+ const [scroll] = useWindowScroll();
288
+ const scrolled = scroll.y > 10;
289
+ const handleNavClick = target => {
290
+ if (target === "top") {
291
+ window.scrollTo({
292
+ top: 0,
293
+ behavior: "smooth"
294
+ });
295
+ } else {
296
+ document.getElementById(target)?.scrollIntoView({
297
+ behavior: "smooth"
298
+ });
299
+ }
300
+ };
301
+ const handleNavKeyDown = (e, target) => {
302
+ if (e.key === "Enter" || e.key === " ") {
303
+ e.preventDefault();
304
+ handleNavClick(target);
305
+ }
306
+ };
307
+ return /*#__PURE__*/jsx(Box, {
308
+ component: "header",
309
+ pos: "sticky",
310
+ top: 0,
311
+ w: "100%",
312
+ style: {
313
+ zIndex: 100,
314
+ pointerEvents: "none"
315
+ },
316
+ children: /*#__PURE__*/jsx(Container, {
317
+ size: "xl",
318
+ py: "md",
319
+ children: /*#__PURE__*/jsx(Paper, {
320
+ shadow: scrolled ? "sm" : "none",
321
+ radius: "0",
322
+ p: "xs",
323
+ bg: "white",
324
+ bd: scrolled ? "1px solid var(--mantine-color-gray-2)" : "1px solid transparent",
325
+ style: {
326
+ pointerEvents: "auto",
327
+ transition: "all 0.2s ease"
328
+ },
329
+ children: /*#__PURE__*/jsxs(Group, {
330
+ justify: "space-between",
331
+ align: "center",
332
+ px: {
333
+ base: "xs",
334
+ sm: "md"
335
+ },
336
+ children: [logo && /*#__PURE__*/jsx("a", {
337
+ href: "#",
338
+ "aria-label": "Voltar ao topo",
339
+ onClick: e => {
340
+ e.preventDefault();
341
+ window.scrollTo({
342
+ top: 0,
343
+ behavior: "smooth"
344
+ });
345
+ },
346
+ style: {
347
+ display: "inline-flex"
348
+ },
349
+ children: /*#__PURE__*/jsx("img", {
350
+ src: logo.src,
351
+ alt: logo.alt || "",
352
+ height: logo.height || 32,
353
+ style: {
354
+ objectFit: "contain"
355
+ }
356
+ })
357
+ }), navLinks.length > 0 && /*#__PURE__*/jsx(Group, {
358
+ gap: "xl",
359
+ visibleFrom: "sm",
360
+ component: "nav",
361
+ role: "navigation",
362
+ "aria-label": "Menu principal",
363
+ children: navLinks.map(link => /*#__PURE__*/jsx(Text, {
364
+ size: "sm",
365
+ fw: 900,
366
+ tt: "uppercase",
367
+ ls: "1px",
368
+ c: "dark",
369
+ role: "link",
370
+ tabIndex: 0,
371
+ style: {
372
+ cursor: "pointer"
373
+ },
374
+ onClick: () => handleNavClick(link.target),
375
+ onKeyDown: e => handleNavKeyDown(e, link.target),
376
+ children: link.label
377
+ }, link.label))
378
+ }), /*#__PURE__*/jsxs(Group, {
379
+ gap: "sm",
380
+ children: [loginCta && /*#__PURE__*/jsx(Button, {
381
+ variant: "subtle",
382
+ component: loginCta.href ? "a" : "button",
383
+ href: loginCta.href,
384
+ onClick: loginCta.onClick,
385
+ c: "gray.7",
386
+ size: "sm",
387
+ radius: "0",
388
+ visibleFrom: "xs",
389
+ fw: 900,
390
+ children: loginCta.label
391
+ }), signupCta && /*#__PURE__*/jsxs(Button, {
392
+ component: signupCta.href ? "a" : "button",
393
+ href: signupCta.href,
394
+ onClick: signupCta.onClick,
395
+ size: "sm",
396
+ radius: "0",
397
+ color: "dark",
398
+ variant: "filled",
399
+ children: [/*#__PURE__*/jsx(Text, {
400
+ span: true,
401
+ visibleFrom: "sm",
402
+ c: "white",
403
+ fw: 900,
404
+ size: "sm",
405
+ children: signupCta.label
406
+ }), /*#__PURE__*/jsx(Text, {
407
+ span: true,
408
+ hiddenFrom: "sm",
409
+ c: "white",
410
+ fw: 900,
411
+ size: "xs",
412
+ children: signupCta.labelMobile || signupCta.label
413
+ })]
414
+ })]
415
+ })]
416
+ })
417
+ })
418
+ })
419
+ });
420
+ }
421
+
422
+ /** @deprecated Use Header instead */
423
+ const Navbar = Header;
424
+
425
+ function Hero({
426
+ subtitle,
427
+ title,
428
+ description,
429
+ cta,
430
+ video,
431
+ image
432
+ }) {
433
+ return /*#__PURE__*/jsx(Box, {
434
+ py: {
435
+ base: 80,
436
+ sm: 100,
437
+ md: 140
438
+ },
439
+ id: "hero",
440
+ bg: "white",
441
+ children: /*#__PURE__*/jsx(Container, {
442
+ size: "lg",
443
+ children: /*#__PURE__*/jsxs(SimpleGrid, {
444
+ cols: {
445
+ base: 1,
446
+ md: 2
447
+ },
448
+ spacing: {
449
+ base: 60,
450
+ md: 100
451
+ },
452
+ verticalSpacing: 60,
453
+ children: [/*#__PURE__*/jsxs(Stack, {
454
+ align: {
455
+ base: "center",
456
+ md: "flex-start"
457
+ },
458
+ justify: "center",
459
+ gap: {
460
+ base: 32,
461
+ md: 48
462
+ },
463
+ ta: {
464
+ base: "center",
465
+ md: "left"
466
+ },
467
+ children: [/*#__PURE__*/jsx(SectionHeader, {
468
+ subtitle: subtitle,
469
+ title: title,
470
+ titleOrder: 1,
471
+ titleFz: "var(--fz-hero)",
472
+ ta: "inherit"
473
+ }), description && /*#__PURE__*/jsx(Center, {
474
+ children: /*#__PURE__*/jsx(Text, {
475
+ size: "xl",
476
+ c: "gray.6",
477
+ lh: 1.6,
478
+ maw: 600,
479
+ children: description
480
+ })
481
+ }), cta && /*#__PURE__*/jsx(Center, {
482
+ children: /*#__PURE__*/jsx(Group, {
483
+ gap: "md",
484
+ justify: {
485
+ base: "center",
486
+ md: "flex-start"
487
+ },
488
+ children: /*#__PURE__*/jsx(CTAButton, {
489
+ label: cta.label,
490
+ href: cta.href,
491
+ icon: cta.icon,
492
+ size: cta.size || "xl",
493
+ px: cta.px || 48,
494
+ variant: cta.variant,
495
+ color: cta.color
496
+ })
497
+ })
498
+ })]
499
+ }), /*#__PURE__*/jsx(MediaBlock, {
500
+ video: video,
501
+ image: image,
502
+ alt: "Demonstra\xE7\xE3o do produto"
503
+ })]
504
+ })
505
+ })
506
+ });
507
+ }
508
+
509
+ function LogoItem({
510
+ logo,
511
+ index
512
+ }) {
513
+ const imageProps = {
514
+ src: logo.src,
515
+ alt: logo.alt || `Logo ${index}`,
516
+ h: logo.height || 50,
517
+ w: "auto",
518
+ style: {
519
+ filter: "grayscale(1) opacity(0.4)",
520
+ transition: "filter 0.3s ease, opacity 0.3s ease",
521
+ ...logo.style
522
+ },
523
+ onMouseEnter: e => {
524
+ e.currentTarget.style.filter = "grayscale(0) opacity(0.8)";
525
+ },
526
+ onMouseLeave: e => {
527
+ e.currentTarget.style.filter = "grayscale(1) opacity(0.4)";
528
+ }
529
+ };
530
+ if (logo.url) {
531
+ return /*#__PURE__*/jsx(Center, {
532
+ children: /*#__PURE__*/jsx("a", {
533
+ href: logo.url,
534
+ target: "_blank",
535
+ rel: "noopener noreferrer",
536
+ children: /*#__PURE__*/jsx(Image, {
537
+ ...imageProps
538
+ })
539
+ })
540
+ });
541
+ }
542
+ return /*#__PURE__*/jsx(Center, {
543
+ children: /*#__PURE__*/jsx(Image, {
544
+ ...imageProps
545
+ })
546
+ });
547
+ }
548
+
549
+ /**
550
+ * SocialProof - Logo bar showing partner/client logos.
551
+ *
552
+ * @param {string} id - Section ID for scroll navigation
553
+ * @param {string} title - Optional heading text
554
+ * @param {array} logos - [{ src, alt, height, url?, style? }]
555
+ */
556
+ function SocialProof({
557
+ id,
558
+ title,
559
+ logos
560
+ }) {
561
+ if (!logos || logos.length === 0) return null;
562
+ return /*#__PURE__*/jsx(Box, {
563
+ component: "section",
564
+ id: id,
565
+ py: {
566
+ base: 40,
567
+ md: 60
568
+ },
569
+ bg: "white",
570
+ bd: {
571
+ bottom: "1px solid var(--mantine-color-gray-1)"
572
+ },
573
+ children: /*#__PURE__*/jsx(Container, {
574
+ size: "lg",
575
+ children: /*#__PURE__*/jsxs(Stack, {
576
+ align: "center",
577
+ ta: "center",
578
+ gap: "xl",
579
+ children: [title && /*#__PURE__*/jsx(Text, {
580
+ fw: 500,
581
+ c: "gray.5",
582
+ size: "sm",
583
+ tt: "uppercase",
584
+ ls: "0.1em",
585
+ children: title
586
+ }), /*#__PURE__*/jsx(Group, {
587
+ justify: "space-between",
588
+ gap: {
589
+ base: 40,
590
+ md: 80
591
+ },
592
+ style: {
593
+ rowGap: 40
594
+ },
595
+ w: "100%",
596
+ children: logos.map((logo, i) => /*#__PURE__*/jsx(LogoItem, {
597
+ logo: logo,
598
+ index: i
599
+ }, i))
600
+ })]
601
+ })
602
+ })
603
+ });
604
+ }
605
+
606
+ function FeatureSplit({
607
+ id,
608
+ subtitle,
609
+ title,
610
+ description,
611
+ featuresList,
612
+ cta,
613
+ video,
614
+ image,
615
+ reverse = false,
616
+ bg
617
+ }) {
618
+ const listComponent = featuresList && featuresList.length > 0 && /*#__PURE__*/jsx(List, {
619
+ spacing: "md",
620
+ size: "md",
621
+ center: true,
622
+ icon: /*#__PURE__*/jsx(ThemeIcon, {
623
+ color: "gray.2",
624
+ size: 24,
625
+ radius: "0",
626
+ children: /*#__PURE__*/jsx(IconCheck, {
627
+ size: 14,
628
+ color: "var(--mantine-color-gray-9)"
629
+ })
630
+ }),
631
+ children: featuresList.map((item, index) => /*#__PURE__*/jsx(List.Item, {
632
+ children: item
633
+ }, index))
634
+ });
635
+ const contentCol = /*#__PURE__*/jsxs(Stack, {
636
+ justify: "center",
637
+ gap: "lg",
638
+ children: [description && /*#__PURE__*/jsx(Text, {
639
+ c: "gray.6",
640
+ size: "xl",
641
+ lh: 1.6,
642
+ children: description
643
+ }), listComponent, cta && /*#__PURE__*/jsx(Group, {
644
+ mt: "md",
645
+ children: /*#__PURE__*/jsx(CTAButton, {
646
+ label: cta.label,
647
+ href: cta.href,
648
+ icon: cta.icon,
649
+ size: cta.size || "lg",
650
+ variant: cta.variant,
651
+ color: cta.color
652
+ })
653
+ })]
654
+ });
655
+ const mediaCol = (video || image) && /*#__PURE__*/jsx(MediaBlock, {
656
+ video: video,
657
+ image: image,
658
+ width: "80%"
659
+ });
660
+ return /*#__PURE__*/jsx(Layout, {
661
+ id: id,
662
+ subtitle: subtitle,
663
+ title: title,
664
+ bg: bg,
665
+ children: /*#__PURE__*/jsx(SimpleGrid, {
666
+ cols: {
667
+ base: 1,
668
+ md: 2
669
+ },
670
+ spacing: {
671
+ base: 40,
672
+ md: 80
673
+ },
674
+ verticalSpacing: {
675
+ base: 40,
676
+ md: 50
677
+ },
678
+ children: reverse ? /*#__PURE__*/jsxs(Fragment, {
679
+ children: [mediaCol, contentCol]
680
+ }) : /*#__PURE__*/jsxs(Fragment, {
681
+ children: [contentCol, mediaCol]
682
+ })
683
+ })
684
+ });
685
+ }
686
+
687
+ function FeaturesGrid({
688
+ id,
689
+ subtitle,
690
+ title,
691
+ bg = "gray.0",
692
+ items = []
693
+ }) {
694
+ return /*#__PURE__*/jsx(Layout, {
695
+ id: id,
696
+ subtitle: subtitle,
697
+ title: title,
698
+ bg: bg,
699
+ children: /*#__PURE__*/jsx(Grid, {
700
+ gutter: "lg",
701
+ children: items.map((item, idx) => /*#__PURE__*/jsx(FeatureCard, {
702
+ ...item
703
+ }, idx))
704
+ })
705
+ });
706
+ }
707
+ function FeatureCard({
708
+ icon: Icon,
709
+ iconVariant,
710
+ iconColor,
711
+ label,
712
+ title,
713
+ titleSize,
714
+ description,
715
+ descriptionSize,
716
+ descriptionMaw,
717
+ span = {
718
+ base: 12,
719
+ md: 6
720
+ },
721
+ bg = "white",
722
+ dark = false,
723
+ visual,
724
+ secondaryVisual,
725
+ layout = "stacked",
726
+ badges,
727
+ codeBlock,
728
+ decorativeContent,
729
+ style: extraStyle,
730
+ ...props
731
+ }) {
732
+ const textColor = dark ? "white" : undefined;
733
+ const descColor = dark ? "gray.4" : "gray.6";
734
+ const labelColor = "gray.5";
735
+ const resolvedIconVariant = iconVariant || (dark ? "filled" : "light");
736
+ const resolvedIconColor = iconColor || (dark ? "gray.7" : "gray");
737
+ const resolvedTitleSize = titleSize || (layout === "compact" ? "h4" : "h3");
738
+ const resolvedDescSize = descriptionSize || (layout === "compact" ? "sm" : "lg");
739
+ const headerContent = /*#__PURE__*/jsxs(Box, {
740
+ children: [Icon && /*#__PURE__*/jsx(ThemeIcon, {
741
+ size: 48,
742
+ radius: "0",
743
+ variant: resolvedIconVariant,
744
+ color: resolvedIconColor,
745
+ mb: "lg",
746
+ style: dark ? {
747
+ color: "white"
748
+ } : undefined,
749
+ children: /*#__PURE__*/jsx(Icon, {
750
+ size: 24,
751
+ stroke: 1.5
752
+ })
753
+ }), label && /*#__PURE__*/jsx(Text, {
754
+ size: "sm",
755
+ fw: 800,
756
+ tt: "uppercase",
757
+ ls: "1.5px",
758
+ c: labelColor,
759
+ mb: "xs",
760
+ children: label
761
+ }), title && /*#__PURE__*/jsx(Text, {
762
+ fz: resolvedTitleSize,
763
+ fw: 900,
764
+ lh: 1.2,
765
+ mb: "sm",
766
+ c: textColor,
767
+ children: title
768
+ }), description && /*#__PURE__*/jsx(Text, {
769
+ c: descColor,
770
+ size: resolvedDescSize,
771
+ maw: descriptionMaw,
772
+ mb: badges ? "xl" : layout === "compact" ? "lg" : undefined,
773
+ children: description
774
+ }), badges && badges.length > 0 && /*#__PURE__*/jsx(Group, {
775
+ children: badges.map((badge, i) => /*#__PURE__*/jsx(Badge, {
776
+ variant: "dot",
777
+ color: "gray",
778
+ radius: "0",
779
+ children: badge
780
+ }, i))
781
+ })]
782
+ });
783
+ const visualContent = visual ? renderVisual(visual, dark) : null;
784
+ const secondaryVisualContent = secondaryVisual ? renderVisual(secondaryVisual, dark) : null;
785
+
786
+ // Split layout: text left, visual/code right (via inner Grid)
787
+ if (layout === "split") {
788
+ return /*#__PURE__*/jsx(Grid.Col, {
789
+ span: span,
790
+ children: /*#__PURE__*/jsx(Paper, {
791
+ h: "100%",
792
+ p: {
793
+ base: "xl",
794
+ md: 40
795
+ },
796
+ radius: "0",
797
+ bg: bg,
798
+ bd: "1px solid var(--mantine-color-gray-2)",
799
+ style: extraStyle,
800
+ ...props,
801
+ children: /*#__PURE__*/jsxs(Grid, {
802
+ align: "center",
803
+ gutter: "xl",
804
+ children: [/*#__PURE__*/jsx(Grid.Col, {
805
+ span: {
806
+ base: 12,
807
+ sm: 6
808
+ },
809
+ children: headerContent
810
+ }), /*#__PURE__*/jsxs(Grid.Col, {
811
+ span: {
812
+ base: 12,
813
+ sm: 6
814
+ },
815
+ children: [visualContent, codeBlock && /*#__PURE__*/jsx(Code, {
816
+ block: true,
817
+ color: "gray.0",
818
+ c: "gray.7",
819
+ style: {
820
+ fontSize: 12,
821
+ lineHeight: 1.4,
822
+ borderRadius: 0
823
+ },
824
+ children: codeBlock
825
+ })]
826
+ })]
827
+ })
828
+ })
829
+ });
830
+ }
831
+
832
+ // Compact layout: simpler card
833
+ if (layout === "compact") {
834
+ return /*#__PURE__*/jsx(Grid.Col, {
835
+ span: span,
836
+ children: /*#__PURE__*/jsxs(Paper, {
837
+ h: "100%",
838
+ p: {
839
+ base: "xl",
840
+ md: 40
841
+ },
842
+ radius: "0",
843
+ bg: bg,
844
+ bd: "1px solid var(--mantine-color-gray-2)",
845
+ style: extraStyle,
846
+ ...props,
847
+ children: [headerContent, visualContent]
848
+ })
849
+ });
850
+ }
851
+
852
+ // Stacked layout with decorative content on the side (e.g. device icons)
853
+ if (decorativeContent) {
854
+ return /*#__PURE__*/jsx(Grid.Col, {
855
+ span: span,
856
+ children: /*#__PURE__*/jsx(Paper, {
857
+ h: "100%",
858
+ p: {
859
+ base: "xl",
860
+ md: 40
861
+ },
862
+ radius: "0",
863
+ bg: bg,
864
+ bd: "1px solid var(--mantine-color-gray-2)",
865
+ pos: "relative",
866
+ style: extraStyle,
867
+ ...props,
868
+ children: /*#__PURE__*/jsxs(Grid, {
869
+ gutter: 0,
870
+ pos: "relative",
871
+ children: [/*#__PURE__*/jsx(Grid.Col, {
872
+ span: {
873
+ base: 12,
874
+ sm: 7
875
+ },
876
+ style: {
877
+ zIndex: 1
878
+ },
879
+ children: headerContent
880
+ }), /*#__PURE__*/jsx(Grid.Col, {
881
+ span: 5,
882
+ visibleFrom: "sm",
883
+ children: decorativeContent
884
+ })]
885
+ })
886
+ })
887
+ });
888
+ }
889
+
890
+ // Default stacked layout
891
+ return /*#__PURE__*/jsx(Grid.Col, {
892
+ span: span,
893
+ children: /*#__PURE__*/jsxs(Paper, {
894
+ h: "100%",
895
+ p: {
896
+ base: "xl",
897
+ md: 40
898
+ },
899
+ radius: "0",
900
+ bg: bg,
901
+ bd: "1px solid var(--mantine-color-gray-2)",
902
+ display: "flex",
903
+ style: {
904
+ flexDirection: "column",
905
+ justifyContent: "space-between",
906
+ ...extraStyle
907
+ },
908
+ ...props,
909
+ children: [headerContent, visualContent && secondaryVisualContent ? /*#__PURE__*/jsxs(Group, {
910
+ gap: 40,
911
+ align: "center",
912
+ children: [visualContent, secondaryVisualContent]
913
+ }) : visualContent]
914
+ })
915
+ });
916
+ }
917
+ function renderVisual(visual, dark) {
918
+ if (!visual) return null;
919
+ switch (visual.type) {
920
+ case "ring":
921
+ return /*#__PURE__*/jsx(RingProgress, {
922
+ size: visual.size || 140,
923
+ thickness: visual.thickness || 12,
924
+ sections: [{
925
+ value: visual.value || 100,
926
+ color: "gray.9"
927
+ }],
928
+ label: /*#__PURE__*/jsx(Center, {
929
+ children: /*#__PURE__*/jsxs(Stack, {
930
+ gap: 0,
931
+ align: "center",
932
+ children: [/*#__PURE__*/jsx(Text, {
933
+ fw: 900,
934
+ size: "xl",
935
+ lh: 1,
936
+ children: visual.label
937
+ }), visual.sublabel && /*#__PURE__*/jsx(Text, {
938
+ size: "xs",
939
+ c: "gray.5",
940
+ fw: 700,
941
+ children: visual.sublabel
942
+ })]
943
+ })
944
+ })
945
+ });
946
+ case "metric":
947
+ return /*#__PURE__*/jsxs(Stack, {
948
+ gap: 0,
949
+ children: [/*#__PURE__*/jsx(Text, {
950
+ fw: 900,
951
+ fz: 32,
952
+ c: "gray.9",
953
+ lh: 1,
954
+ children: visual.value
955
+ }), /*#__PURE__*/jsx(Text, {
956
+ size: "sm",
957
+ c: "gray.5",
958
+ mt: 4,
959
+ children: visual.label
960
+ }), visual.badge && /*#__PURE__*/jsx(Badge, {
961
+ mt: "md",
962
+ color: "gray",
963
+ variant: "dot",
964
+ radius: "0",
965
+ children: visual.badge
966
+ })]
967
+ });
968
+ case "bars":
969
+ return /*#__PURE__*/jsx(Group, {
970
+ align: "flex-end",
971
+ gap: 8,
972
+ h: visual.height || 100,
973
+ preventGrowOverflow: false,
974
+ children: (visual.data || []).map((h, i) => /*#__PURE__*/jsx(Box, {
975
+ w: 20,
976
+ h: `${h}%`,
977
+ bg: i === visual.highlight ? "gray.9" : "gray.2",
978
+ radius: "0"
979
+ }, i))
980
+ });
981
+ case "typography":
982
+ return /*#__PURE__*/jsx(Center, {
983
+ h: visual.height || 160,
984
+ bg: dark ? "gray.8" : "gray.1",
985
+ radius: "0",
986
+ children: /*#__PURE__*/jsx(Text, {
987
+ fz: visual.fontSize || 100,
988
+ fw: 900,
989
+ c: dark ? "gray.6" : "gray.3",
990
+ style: {
991
+ letterSpacing: -6
992
+ },
993
+ children: visual.text || "Aa"
994
+ })
995
+ });
996
+ case "icon-large":
997
+ {
998
+ const LargeIcon = visual.icon;
999
+ if (!LargeIcon) return null;
1000
+ return /*#__PURE__*/jsx(LargeIcon, {
1001
+ size: visual.size || 64,
1002
+ stroke: visual.stroke || 1,
1003
+ color: visual.color || "var(--mantine-color-gray-2)"
1004
+ });
1005
+ }
1006
+ default:
1007
+ return null;
1008
+ }
1009
+ }
1010
+
1011
+ function Comparison({
1012
+ id,
1013
+ subtitle,
1014
+ title,
1015
+ traditionalCol,
1016
+ newCol
1017
+ }) {
1018
+ return /*#__PURE__*/jsx(Layout, {
1019
+ id: id,
1020
+ subtitle: subtitle,
1021
+ title: title,
1022
+ bg: "white",
1023
+ children: /*#__PURE__*/jsx(Paper, {
1024
+ radius: "0",
1025
+ bd: "1px solid var(--mantine-color-gray-2)",
1026
+ style: {
1027
+ overflow: "hidden"
1028
+ },
1029
+ children: /*#__PURE__*/jsxs(SimpleGrid, {
1030
+ cols: {
1031
+ base: 1,
1032
+ md: 2
1033
+ },
1034
+ spacing: 0,
1035
+ children: [/*#__PURE__*/jsx(Box, {
1036
+ bg: "gray.0",
1037
+ p: {
1038
+ base: 30,
1039
+ md: 60
1040
+ },
1041
+ children: /*#__PURE__*/jsxs(Stack, {
1042
+ gap: "xl",
1043
+ children: [/*#__PURE__*/jsxs(Box, {
1044
+ children: [/*#__PURE__*/jsx(Text, {
1045
+ fw: 900,
1046
+ fz: "h2",
1047
+ c: "gray.9",
1048
+ mb: 4,
1049
+ children: traditionalCol.title
1050
+ }), /*#__PURE__*/jsx(Text, {
1051
+ size: "sm",
1052
+ fw: 800,
1053
+ tt: "uppercase",
1054
+ ls: "1.5px",
1055
+ c: "gray.5",
1056
+ children: traditionalCol.subtitle
1057
+ })]
1058
+ }), /*#__PURE__*/jsx(Stack, {
1059
+ gap: "md",
1060
+ mb: 40,
1061
+ children: traditionalCol.items.map((item, index) => /*#__PURE__*/jsxs(Fragment$1, {
1062
+ children: [/*#__PURE__*/jsxs(Group, {
1063
+ justify: "space-between",
1064
+ children: [/*#__PURE__*/jsx(Text, {
1065
+ size: "sm",
1066
+ c: "gray.6",
1067
+ children: item.label
1068
+ }), /*#__PURE__*/jsx(Text, {
1069
+ fw: 700,
1070
+ c: "gray.9",
1071
+ children: item.value
1072
+ })]
1073
+ }), index < traditionalCol.items.length - 1 && /*#__PURE__*/jsx(Divider, {
1074
+ color: "var(--mantine-color-gray-2)"
1075
+ })]
1076
+ }, index))
1077
+ }), /*#__PURE__*/jsxs(Box, {
1078
+ bg: "white",
1079
+ p: "lg",
1080
+ radius: "0",
1081
+ bd: "1px solid var(--mantine-color-gray-2)",
1082
+ children: [/*#__PURE__*/jsxs(Group, {
1083
+ justify: "space-between",
1084
+ children: [/*#__PURE__*/jsx(Text, {
1085
+ fw: 900,
1086
+ c: "gray.7",
1087
+ children: traditionalCol.totalLabel || "Total Estimado"
1088
+ }), /*#__PURE__*/jsx(Text, {
1089
+ fw: 900,
1090
+ fz: 32,
1091
+ c: "gray.9",
1092
+ children: traditionalCol.totalValue
1093
+ })]
1094
+ }), traditionalCol.footerText && /*#__PURE__*/jsx(Text, {
1095
+ size: "xs",
1096
+ c: "red.6",
1097
+ ta: "right",
1098
+ mt: 4,
1099
+ children: traditionalCol.footerText
1100
+ })]
1101
+ })]
1102
+ })
1103
+ }), /*#__PURE__*/jsx(Box, {
1104
+ bg: "white",
1105
+ p: {
1106
+ base: 30,
1107
+ md: 60
1108
+ },
1109
+ pos: "relative",
1110
+ children: /*#__PURE__*/jsxs(Stack, {
1111
+ gap: "xl",
1112
+ h: "100%",
1113
+ children: [/*#__PURE__*/jsxs(Box, {
1114
+ children: [/*#__PURE__*/jsxs(Group, {
1115
+ gap: "xs",
1116
+ children: [/*#__PURE__*/jsx(Text, {
1117
+ fw: 900,
1118
+ fz: "h2",
1119
+ c: "gray.9",
1120
+ mb: 4,
1121
+ children: newCol.title
1122
+ }), newCol.badge && /*#__PURE__*/jsx(Badge, {
1123
+ color: "gray.9",
1124
+ variant: "filled",
1125
+ radius: "0",
1126
+ children: newCol.badge
1127
+ })]
1128
+ }), /*#__PURE__*/jsx(Text, {
1129
+ size: "sm",
1130
+ c: "gray.6",
1131
+ children: newCol.description
1132
+ })]
1133
+ }), /*#__PURE__*/jsx(List, {
1134
+ spacing: "md",
1135
+ size: "md",
1136
+ c: "gray.6",
1137
+ icon: /*#__PURE__*/jsx(ThemeIcon, {
1138
+ color: "gray.0",
1139
+ size: 20,
1140
+ radius: "0",
1141
+ bd: "1px solid var(--mantine-color-gray-2)",
1142
+ children: /*#__PURE__*/jsx(IconCheck, {
1143
+ size: 12,
1144
+ color: "var(--mantine-color-gray-9)"
1145
+ })
1146
+ }),
1147
+ children: newCol.items.map((item, index) => /*#__PURE__*/jsx(List.Item, {
1148
+ children: item
1149
+ }, index))
1150
+ }), newCol.pricingBox && /*#__PURE__*/jsx(Box, {
1151
+ bg: "gray.0",
1152
+ p: "lg",
1153
+ radius: "0",
1154
+ bd: "1px solid var(--mantine-color-gray-2)",
1155
+ children: /*#__PURE__*/jsxs(Stack, {
1156
+ gap: 4,
1157
+ children: [/*#__PURE__*/jsx(Text, {
1158
+ size: "sm",
1159
+ fw: 800,
1160
+ tt: "uppercase",
1161
+ ls: "1.5px",
1162
+ c: "gray.5",
1163
+ children: newCol.pricingBox.label
1164
+ }), /*#__PURE__*/jsx(Text, {
1165
+ fw: 900,
1166
+ fz: 48,
1167
+ c: "gray.9",
1168
+ lh: 1,
1169
+ children: newCol.pricingBox.price
1170
+ }), newCol.pricingBox.subtext && /*#__PURE__*/jsx(Text, {
1171
+ size: "xs",
1172
+ c: "gray.5",
1173
+ mt: "sm",
1174
+ children: newCol.pricingBox.subtext
1175
+ })]
1176
+ })
1177
+ }), newCol.cta && /*#__PURE__*/jsx(Box, {
1178
+ mt: "xl",
1179
+ children: /*#__PURE__*/jsx(CTAButton, {
1180
+ label: newCol.cta.label,
1181
+ href: newCol.cta.href,
1182
+ icon: newCol.cta.icon,
1183
+ size: newCol.cta.size || "lg",
1184
+ color: newCol.cta.color || "gray.9",
1185
+ fullWidth: true
1186
+ })
1187
+ })]
1188
+ })
1189
+ })]
1190
+ })
1191
+ })
1192
+ });
1193
+ }
1194
+
1195
+ function Pricing({
1196
+ id,
1197
+ subtitle,
1198
+ title,
1199
+ billingOptions = [{
1200
+ label: "Mensal",
1201
+ value: "monthly"
1202
+ }, {
1203
+ label: "Anual",
1204
+ value: "annual"
1205
+ }],
1206
+ billing,
1207
+ setBilling,
1208
+ promoBadge,
1209
+ plans
1210
+ }) {
1211
+ return /*#__PURE__*/jsxs(Layout, {
1212
+ id: id,
1213
+ subtitle: subtitle,
1214
+ title: title,
1215
+ ta: "center",
1216
+ children: [billingOptions && billingOptions.length > 0 && /*#__PURE__*/jsx(Stack, {
1217
+ align: "center",
1218
+ gap: "xl",
1219
+ mb: 80,
1220
+ children: /*#__PURE__*/jsxs(Group, {
1221
+ gap: "xs",
1222
+ children: [/*#__PURE__*/jsx(SegmentedControl, {
1223
+ value: billing,
1224
+ onChange: setBilling,
1225
+ radius: "0",
1226
+ size: "md",
1227
+ data: billingOptions,
1228
+ color: "gray.9",
1229
+ bg: "white",
1230
+ style: {
1231
+ border: "1px solid var(--mantine-color-gray-2)"
1232
+ }
1233
+ }), billing === "annual" && promoBadge && /*#__PURE__*/jsx(Badge, {
1234
+ variant: "filled",
1235
+ color: "gray.9",
1236
+ radius: "0",
1237
+ size: "lg",
1238
+ children: promoBadge
1239
+ })]
1240
+ })
1241
+ }), /*#__PURE__*/jsx(SimpleGrid, {
1242
+ cols: {
1243
+ base: 1,
1244
+ md: plans.length <= 3 ? plans.length : 3
1245
+ },
1246
+ spacing: "xl",
1247
+ verticalSpacing: "xl",
1248
+ children: plans.map(plan => /*#__PURE__*/jsxs(Paper, {
1249
+ p: "xl",
1250
+ radius: "0",
1251
+ withBorder: true,
1252
+ bd: plan.highlight ? "2px solid var(--mantine-color-gray-9)" : "1px solid var(--mantine-color-gray-2)",
1253
+ display: "flex",
1254
+ h: "100%",
1255
+ style: {
1256
+ flexDirection: "column"
1257
+ },
1258
+ bg: "white",
1259
+ children: [/*#__PURE__*/jsxs(Stack, {
1260
+ gap: "md",
1261
+ mb: "xl",
1262
+ children: [/*#__PURE__*/jsxs(Group, {
1263
+ justify: "space-between",
1264
+ align: "center",
1265
+ children: [/*#__PURE__*/jsx(Text, {
1266
+ size: "xs",
1267
+ fw: 800,
1268
+ tt: "uppercase",
1269
+ ls: "1.5px",
1270
+ c: "gray.4",
1271
+ children: plan.name
1272
+ }), plan.highlight && /*#__PURE__*/jsx(Badge, {
1273
+ variant: "dot",
1274
+ color: "gray.9",
1275
+ children: plan.highlightBadge || "RECOMENDADO"
1276
+ })]
1277
+ }), /*#__PURE__*/jsx(Text, {
1278
+ size: "sm",
1279
+ c: "gray.6",
1280
+ fw: 500,
1281
+ lh: 1.5,
1282
+ h: {
1283
+ md: 42
1284
+ },
1285
+ children: plan.description
1286
+ })]
1287
+ }), /*#__PURE__*/jsxs(Box, {
1288
+ mb: "xl",
1289
+ children: [/*#__PURE__*/jsx(Text, {
1290
+ size: "xs",
1291
+ c: "gray.4",
1292
+ fw: 800,
1293
+ tt: "uppercase",
1294
+ ls: "1px",
1295
+ mb: 4,
1296
+ children: plan.pricePrefix || "A partir de"
1297
+ }), /*#__PURE__*/jsxs(Group, {
1298
+ gap: 8,
1299
+ align: "flex-start",
1300
+ children: [/*#__PURE__*/jsx(Text, {
1301
+ size: "xl",
1302
+ fw: 900,
1303
+ c: "gray.9",
1304
+ style: {
1305
+ marginTop: 8
1306
+ },
1307
+ children: plan.priceDisplay?.currency
1308
+ }), /*#__PURE__*/jsxs(Group, {
1309
+ gap: 4,
1310
+ align: "flex-end",
1311
+ children: [/*#__PURE__*/jsx(Text, {
1312
+ fz: "var(--fz-big-metric)",
1313
+ fw: 900,
1314
+ ls: "-0.04em",
1315
+ lh: 0.8,
1316
+ c: "gray.9",
1317
+ children: plan.priceDisplay?.whole
1318
+ }), plan.priceDisplay?.fraction && /*#__PURE__*/jsxs(Stack, {
1319
+ gap: 0,
1320
+ mb: 6,
1321
+ children: [/*#__PURE__*/jsxs(Text, {
1322
+ size: "xl",
1323
+ fw: 900,
1324
+ lh: 1,
1325
+ c: "gray.9",
1326
+ children: [",", plan.priceDisplay.fraction]
1327
+ }), /*#__PURE__*/jsx(Text, {
1328
+ size: "xs",
1329
+ c: "gray.5",
1330
+ fw: 800,
1331
+ tt: "uppercase",
1332
+ ls: "0.5px",
1333
+ children: plan.period || plan.priceSuffix || "/mês"
1334
+ })]
1335
+ })]
1336
+ })]
1337
+ })]
1338
+ }), /*#__PURE__*/jsx(Divider, {
1339
+ mb: "xl",
1340
+ color: "gray.1"
1341
+ }), /*#__PURE__*/jsx(Stack, {
1342
+ gap: "sm",
1343
+ mb: 40,
1344
+ style: {
1345
+ flex: 1
1346
+ },
1347
+ children: plan.features.map((feature, i) => /*#__PURE__*/jsxs(Group, {
1348
+ gap: "sm",
1349
+ wrap: "nowrap",
1350
+ align: "flex-start",
1351
+ children: [/*#__PURE__*/jsx(IconCheck, {
1352
+ size: 16,
1353
+ color: "var(--mantine-color-gray-9)",
1354
+ style: {
1355
+ marginTop: 2,
1356
+ flexShrink: 0
1357
+ }
1358
+ }), /*#__PURE__*/jsx(Text, {
1359
+ size: "sm",
1360
+ fw: 500,
1361
+ c: "gray.6",
1362
+ lh: 1.4,
1363
+ children: feature
1364
+ })]
1365
+ }, i))
1366
+ }), /*#__PURE__*/jsx(Box, {
1367
+ mt: "auto",
1368
+ children: /*#__PURE__*/jsx(CTAButton, {
1369
+ label: plan.cta.label,
1370
+ href: plan.cta.href,
1371
+ size: plan.cta.size || "xl",
1372
+ variant: plan.cta.variant,
1373
+ color: plan.cta.color || "gray.9",
1374
+ fullWidth: true
1375
+ })
1376
+ })]
1377
+ }, plan.name))
1378
+ })]
1379
+ });
1380
+ }
1381
+
1382
+ function FAQ({
1383
+ id,
1384
+ subtitle,
1385
+ title,
1386
+ questions = [],
1387
+ contactCard
1388
+ }) {
1389
+ const accordionStyles = {
1390
+ item: {
1391
+ backgroundColor: "white",
1392
+ border: "1px solid var(--mantine-color-gray-2)"
1393
+ },
1394
+ control: {
1395
+ padding: "1.25rem"
1396
+ },
1397
+ content: {
1398
+ padding: "0 1.25rem 1.25rem 1.25rem"
1399
+ },
1400
+ label: {
1401
+ fontWeight: 900,
1402
+ color: "var(--mantine-color-gray-9)"
1403
+ },
1404
+ chevron: {
1405
+ color: "var(--mantine-color-gray-5)"
1406
+ }
1407
+ };
1408
+ return /*#__PURE__*/jsxs(Layout, {
1409
+ id: id,
1410
+ subtitle: subtitle,
1411
+ title: title,
1412
+ bg: "white",
1413
+ children: [/*#__PURE__*/jsxs(SimpleGrid, {
1414
+ cols: {
1415
+ base: 1,
1416
+ md: 2
1417
+ },
1418
+ spacing: "xl",
1419
+ children: [/*#__PURE__*/jsx(Accordion, {
1420
+ variant: "separated",
1421
+ radius: "0",
1422
+ chevronPosition: "right",
1423
+ styles: accordionStyles,
1424
+ children: questions.slice(0, Math.ceil(questions.length / 2)).map((item, i) => /*#__PURE__*/jsxs(Accordion.Item, {
1425
+ value: item.value || String(i),
1426
+ mb: "md",
1427
+ children: [/*#__PURE__*/jsx(Accordion.Control, {
1428
+ icon: /*#__PURE__*/jsx(ThemeIcon, {
1429
+ variant: "light",
1430
+ color: "gray",
1431
+ radius: "0",
1432
+ children: /*#__PURE__*/jsx(IconBolt, {
1433
+ size: 16
1434
+ })
1435
+ }),
1436
+ children: item.question
1437
+ }), /*#__PURE__*/jsx(Accordion.Panel, {
1438
+ c: "gray.6",
1439
+ children: item.answer
1440
+ })]
1441
+ }, item.value || i))
1442
+ }), /*#__PURE__*/jsx(Accordion, {
1443
+ variant: "separated",
1444
+ radius: "0",
1445
+ chevronPosition: "right",
1446
+ styles: accordionStyles,
1447
+ children: questions.slice(Math.ceil(questions.length / 2)).map((item, i) => /*#__PURE__*/jsxs(Accordion.Item, {
1448
+ value: item.value || String(i),
1449
+ mb: "md",
1450
+ children: [/*#__PURE__*/jsx(Accordion.Control, {
1451
+ icon: /*#__PURE__*/jsx(ThemeIcon, {
1452
+ variant: "light",
1453
+ color: "gray",
1454
+ radius: "0",
1455
+ children: /*#__PURE__*/jsx(IconBolt, {
1456
+ size: 16
1457
+ })
1458
+ }),
1459
+ children: item.question
1460
+ }), /*#__PURE__*/jsx(Accordion.Panel, {
1461
+ c: "gray.6",
1462
+ children: item.answer
1463
+ })]
1464
+ }, item.value || i))
1465
+ })]
1466
+ }), contactCard && /*#__PURE__*/jsx(Paper, {
1467
+ mt: {
1468
+ base: 40,
1469
+ md: 80
1470
+ },
1471
+ radius: "0",
1472
+ p: {
1473
+ base: "xl",
1474
+ md: 60
1475
+ },
1476
+ bg: "gray.0",
1477
+ bd: "1px solid var(--mantine-color-gray-1)",
1478
+ pos: "relative",
1479
+ style: {
1480
+ overflow: "hidden"
1481
+ },
1482
+ children: /*#__PURE__*/jsxs(SimpleGrid, {
1483
+ cols: {
1484
+ base: 1,
1485
+ md: 2
1486
+ },
1487
+ spacing: "xl",
1488
+ style: {
1489
+ position: "relative",
1490
+ zIndex: 1,
1491
+ alignItems: "center"
1492
+ },
1493
+ children: [/*#__PURE__*/jsxs(Stack, {
1494
+ gap: "sm",
1495
+ ta: {
1496
+ base: "center",
1497
+ md: "left"
1498
+ },
1499
+ align: {
1500
+ base: "center",
1501
+ md: "flex-start"
1502
+ },
1503
+ children: [/*#__PURE__*/jsx(Text, {
1504
+ fz: "h2",
1505
+ fw: 900,
1506
+ c: "gray.9",
1507
+ lh: 1.2,
1508
+ children: contactCard.title
1509
+ }), /*#__PURE__*/jsx(Text, {
1510
+ c: "gray.6",
1511
+ maw: 500,
1512
+ size: "lg",
1513
+ children: contactCard.description
1514
+ })]
1515
+ }), /*#__PURE__*/jsx(Stack, {
1516
+ align: {
1517
+ base: "center",
1518
+ md: "flex-end"
1519
+ },
1520
+ children: /*#__PURE__*/jsx(CTAButton, {
1521
+ label: contactCard.cta.label,
1522
+ href: contactCard.cta.href,
1523
+ target: contactCard.cta.target,
1524
+ leftSection: contactCard.cta.icon,
1525
+ size: contactCard.cta.size || "xl",
1526
+ color: contactCard.cta.color || "dark"
1527
+ })
1528
+ })]
1529
+ })
1530
+ })]
1531
+ });
1532
+ }
1533
+
1534
+ function Testimonials({
1535
+ id,
1536
+ bg = "gray.0",
1537
+ title,
1538
+ subtitle,
1539
+ items = []
1540
+ }) {
1541
+ return /*#__PURE__*/jsx(Layout, {
1542
+ id: id,
1543
+ bg: bg,
1544
+ title: title,
1545
+ subtitle: subtitle,
1546
+ children: /*#__PURE__*/jsx(SimpleGrid, {
1547
+ cols: {
1548
+ base: 1,
1549
+ md: items.length > 3 ? 4 : items.length || 3
1550
+ },
1551
+ spacing: "xl",
1552
+ children: items.map((item, index) => /*#__PURE__*/jsx(Paper, {
1553
+ p: "xl",
1554
+ radius: "0",
1555
+ bd: "1px solid var(--mantine-color-gray-2)",
1556
+ bg: "white",
1557
+ children: /*#__PURE__*/jsxs(Stack, {
1558
+ gap: "md",
1559
+ align: "flex-start",
1560
+ h: "100%",
1561
+ children: [/*#__PURE__*/jsx(IconQuote, {
1562
+ size: 32,
1563
+ color: "var(--mantine-color-gray-3)"
1564
+ }), /*#__PURE__*/jsxs(Text, {
1565
+ size: "lg",
1566
+ c: "gray.7",
1567
+ lh: 1.6,
1568
+ fs: "italic",
1569
+ flex: 1,
1570
+ children: ["\"", item.content, "\""]
1571
+ }), /*#__PURE__*/jsxs(Group, {
1572
+ gap: "sm",
1573
+ mt: "xl",
1574
+ children: [/*#__PURE__*/jsx(Avatar, {
1575
+ size: "md",
1576
+ radius: "0",
1577
+ color: "gray",
1578
+ src: item.avatarSrc,
1579
+ children: item.initials
1580
+ }), /*#__PURE__*/jsxs(Stack, {
1581
+ gap: 0,
1582
+ children: [/*#__PURE__*/jsx(Text, {
1583
+ size: "sm",
1584
+ fw: 900,
1585
+ children: item.name
1586
+ }), /*#__PURE__*/jsx(Text, {
1587
+ size: "xs",
1588
+ fw: 800,
1589
+ tt: "uppercase",
1590
+ ls: "1px",
1591
+ c: "gray.5",
1592
+ children: item.role
1593
+ })]
1594
+ })]
1595
+ })]
1596
+ })
1597
+ }, index))
1598
+ })
1599
+ });
1600
+ }
1601
+
1602
+ function CTABanner({
1603
+ id,
1604
+ title,
1605
+ description,
1606
+ cta,
1607
+ bg = "gray.0"
1608
+ }) {
1609
+ return /*#__PURE__*/jsx(Layout, {
1610
+ id: id,
1611
+ bg: bg,
1612
+ ta: "center",
1613
+ children: /*#__PURE__*/jsx(Paper, {
1614
+ p: {
1615
+ base: "xl",
1616
+ sm: 80
1617
+ },
1618
+ bg: "white",
1619
+ radius: "0",
1620
+ bd: "1px solid var(--mantine-color-gray-2)",
1621
+ style: {
1622
+ borderTop: "4px solid var(--mantine-color-gray-9)"
1623
+ },
1624
+ children: /*#__PURE__*/jsxs(Stack, {
1625
+ align: "center",
1626
+ ta: "center",
1627
+ gap: "xl",
1628
+ children: [title && /*#__PURE__*/jsx(Text, {
1629
+ fz: "var(--fz-section-title)",
1630
+ fw: 900,
1631
+ lh: 1.2,
1632
+ ls: "-0.04em",
1633
+ maw: 700,
1634
+ children: title
1635
+ }), description && /*#__PURE__*/jsx(Text, {
1636
+ c: "gray.7",
1637
+ size: "xl",
1638
+ maw: 550,
1639
+ children: description
1640
+ }), cta && /*#__PURE__*/jsx(Box, {
1641
+ mt: "md",
1642
+ children: /*#__PURE__*/jsx(CTAButton, {
1643
+ label: cta.label,
1644
+ href: cta.href,
1645
+ size: cta.size || "xl",
1646
+ px: cta.px || {
1647
+ base: 32,
1648
+ md: 60
1649
+ },
1650
+ variant: cta.variant,
1651
+ color: cta.color
1652
+ })
1653
+ })]
1654
+ })
1655
+ })
1656
+ });
1657
+ }
1658
+
1659
+ /** @deprecated Use CTABanner instead */
1660
+ const SecondaryCTA = CTABanner;
1661
+
1662
+ function TrustBadge({
1663
+ text = "Selo Exclusivo RiLiGar",
1664
+ color = "green.6"
1665
+ }) {
1666
+ return /*#__PURE__*/jsx(Box, {
1667
+ p: "xs",
1668
+ bg: "gray.1",
1669
+ style: {
1670
+ borderRadius: "8px",
1671
+ border: "1px solid var(--mantine-color-gray-2)",
1672
+ display: "inline-block"
1673
+ },
1674
+ children: /*#__PURE__*/jsxs(Group, {
1675
+ gap: "xs",
1676
+ children: [/*#__PURE__*/jsx(ThemeIcon, {
1677
+ color: color,
1678
+ variant: "light",
1679
+ size: "sm",
1680
+ radius: "xl",
1681
+ children: /*#__PURE__*/jsx(IconCircleCheck, {
1682
+ size: 14,
1683
+ "aria-hidden": "true"
1684
+ })
1685
+ }), /*#__PURE__*/jsx(Text, {
1686
+ size: "xs",
1687
+ fw: 700,
1688
+ c: "gray.7",
1689
+ tt: "uppercase",
1690
+ lts: 0.5,
1691
+ children: text
1692
+ })]
1693
+ })
1694
+ });
1695
+ }
1696
+
1697
+ /** @deprecated Use TrustBadge instead */
1698
+ const SeloExclusivo = TrustBadge;
1699
+
1700
+ function Footer({
1701
+ logo,
1702
+ description,
1703
+ sections = [],
1704
+ socialLinks = [],
1705
+ copyrightText,
1706
+ madeByText,
1707
+ bg = "gray.0"
1708
+ }) {
1709
+ return /*#__PURE__*/jsx(Box, {
1710
+ component: "footer",
1711
+ py: "xl",
1712
+ bg: bg,
1713
+ bd: {
1714
+ top: "1px solid var(--mantine-color-gray-2)"
1715
+ },
1716
+ children: /*#__PURE__*/jsxs(Container, {
1717
+ size: "xl",
1718
+ children: [/*#__PURE__*/jsxs(SimpleGrid, {
1719
+ cols: {
1720
+ base: 1,
1721
+ sm: 2
1722
+ },
1723
+ spacing: "xl",
1724
+ children: [/*#__PURE__*/jsxs(Stack, {
1725
+ gap: "lg",
1726
+ children: [logo && /*#__PURE__*/jsx("img", {
1727
+ src: logo.src,
1728
+ alt: logo.alt || "",
1729
+ height: logo.height || 32,
1730
+ style: {
1731
+ objectFit: "contain",
1732
+ objectPosition: "left"
1733
+ }
1734
+ }), description && /*#__PURE__*/jsx(Text, {
1735
+ size: "md",
1736
+ c: "gray.6",
1737
+ lh: 1.6,
1738
+ maw: 400,
1739
+ children: description
1740
+ })]
1741
+ }), /*#__PURE__*/jsxs(SimpleGrid, {
1742
+ cols: {
1743
+ base: 2,
1744
+ sm: sections.length || 4
1745
+ },
1746
+ spacing: "xl",
1747
+ children: [sections.map((section, idx) => /*#__PURE__*/jsxs(Stack, {
1748
+ gap: "md",
1749
+ children: [/*#__PURE__*/jsx(Text, {
1750
+ fw: 900,
1751
+ size: "xs",
1752
+ tt: "uppercase",
1753
+ ls: "1.5px",
1754
+ children: section.title
1755
+ }), /*#__PURE__*/jsx(Stack, {
1756
+ gap: "xs",
1757
+ children: section.links.map((link, linkIdx) => /*#__PURE__*/jsx(Anchor, {
1758
+ c: "gray.6",
1759
+ size: "sm",
1760
+ component: link.href ? "a" : "button",
1761
+ href: link.href,
1762
+ onClick: link.onClick,
1763
+ fw: 500,
1764
+ children: link.label
1765
+ }, linkIdx))
1766
+ })]
1767
+ }, idx)), socialLinks && socialLinks.length > 0 && /*#__PURE__*/jsxs(Stack, {
1768
+ gap: "md",
1769
+ children: [/*#__PURE__*/jsx(Text, {
1770
+ fw: 900,
1771
+ size: "xs",
1772
+ tt: "uppercase",
1773
+ ls: "1.5px",
1774
+ children: "Social"
1775
+ }), /*#__PURE__*/jsx(Group, {
1776
+ gap: "xs",
1777
+ children: socialLinks.map((social, socialIdx) => /*#__PURE__*/jsx(ActionIcon, {
1778
+ size: "md",
1779
+ variant: "subtle",
1780
+ color: "gray",
1781
+ component: "a",
1782
+ href: social.href,
1783
+ target: "_blank",
1784
+ radius: "0",
1785
+ "aria-label": social.label || `Social link ${socialIdx + 1}`,
1786
+ children: social.icon
1787
+ }, socialIdx))
1788
+ })]
1789
+ })]
1790
+ })]
1791
+ }), /*#__PURE__*/jsx(Divider, {
1792
+ my: "xl",
1793
+ color: "gray.2"
1794
+ }), /*#__PURE__*/jsxs(Group, {
1795
+ justify: "space-between",
1796
+ mt: 30,
1797
+ wrap: "wrap",
1798
+ gap: "sm",
1799
+ children: [/*#__PURE__*/jsx(Text, {
1800
+ size: "xs",
1801
+ fw: 800,
1802
+ tt: "uppercase",
1803
+ ls: "1px",
1804
+ c: "gray.5",
1805
+ children: copyrightText
1806
+ }), madeByText && /*#__PURE__*/jsx(Group, {
1807
+ gap: "sm",
1808
+ children: /*#__PURE__*/jsx(Text, {
1809
+ size: "xs",
1810
+ fw: 800,
1811
+ tt: "uppercase",
1812
+ ls: "1px",
1813
+ c: "gray.5",
1814
+ children: madeByText
1815
+ })
1816
+ })]
1817
+ })]
1818
+ })
1819
+ });
1820
+ }
1821
+
1822
+ export { CTABanner, CTAButton, Comparison, FAQ, FeatureSplit, FeaturesGrid, Footer, Header, Hero, Layout, MediaBlock, Navbar, Pricing, SecondaryCTA, SectionHeader, SeloExclusivo, SocialProof, Testimonials, TrustBadge, theme };
1823
+ //# sourceMappingURL=index.esm.js.map