@opensite/ui 0.5.6 → 0.5.7

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.
@@ -414,7 +414,16 @@ function AboutMissionFeatures({
414
414
  if (featuresSlot) return featuresSlot;
415
415
  if (!features || features.length === 0) return null;
416
416
  return features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
417
- /* @__PURE__ */ jsx("div", { className: cn("mb-5 flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground", feature.iconBgClass), children: feature.icon }),
417
+ /* @__PURE__ */ jsx(
418
+ "div",
419
+ {
420
+ className: cn(
421
+ "mb-5 flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground",
422
+ feature.iconBgClass
423
+ ),
424
+ children: feature.icon
425
+ }
426
+ ),
418
427
  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 mb-3 text-lg font-semibold", children: feature.title }) : feature.title),
419
428
  feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
420
429
  ] }, idx));
@@ -427,9 +436,18 @@ function AboutMissionFeatures({
427
436
  pattern,
428
437
  patternOpacity,
429
438
  className: cn(className),
430
- children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-16 lg:gap-28", containerClassName), children: [
439
+ children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
431
440
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
432
- title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold tracking-tighter lg:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
441
+ title && (typeof title === "string" ? /* @__PURE__ */ jsx(
442
+ "h1",
443
+ {
444
+ className: cn(
445
+ "text-4xl font-semibold tracking-tighter lg:text-7xl",
446
+ titleClassName
447
+ ),
448
+ children: title
449
+ }
450
+ ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
433
451
  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
434
452
  ] }),
435
453
  /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
@@ -438,14 +456,20 @@ function AboutMissionFeatures({
438
456
  {
439
457
  src: mainImage.src,
440
458
  alt: mainImage.alt,
441
- className: cn("size-full max-h-96 rounded-2xl object-cover", mainImageClassName),
459
+ className: cn(
460
+ "size-full max-h-96 rounded-2xl object-cover",
461
+ mainImageClassName
462
+ ),
442
463
  optixFlowConfig
443
464
  }
444
465
  ),
445
466
  /* @__PURE__ */ jsxs(
446
467
  "div",
447
468
  {
448
- className: cn("relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl bg-muted p-10", missionSectionClassName),
469
+ className: cn(
470
+ "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl bg-muted p-10",
471
+ missionSectionClassName
472
+ ),
449
473
  children: [
450
474
  missionBackgroundImage && /* @__PURE__ */ jsxs(Fragment, { children: [
451
475
  /* @__PURE__ */ jsx(
@@ -457,18 +481,54 @@ function AboutMissionFeatures({
457
481
  optixFlowConfig
458
482
  }
459
483
  ),
460
- /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-black/30" })
484
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/50 to-black/30" })
461
485
  ] }),
462
- /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold text-white", missionLabelClassName), children: missionLabel }) : /* @__PURE__ */ jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
463
- /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium text-white", missionTextClassName), children: missionText }) : /* @__PURE__ */ jsx("div", { className: missionTextClassName, children: missionText })) })
486
+ /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsx(
487
+ "p",
488
+ {
489
+ className: cn(
490
+ "text-sm font-semibold text-white",
491
+ missionLabelClassName
492
+ ),
493
+ children: missionLabel
494
+ }
495
+ ) : /* @__PURE__ */ jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
496
+ /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsx(
497
+ "p",
498
+ {
499
+ className: cn(
500
+ "text-lg font-medium text-white",
501
+ missionTextClassName
502
+ ),
503
+ children: missionText
504
+ }
505
+ ) : /* @__PURE__ */ jsx("div", { className: missionTextClassName, children: missionText })) })
464
506
  ]
465
507
  }
466
508
  )
467
509
  ] }),
468
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-20", children: [
510
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-12", children: [
469
511
  /* @__PURE__ */ jsxs("div", { className: "max-w-xl", children: [
470
- featuresTitle && (typeof featuresTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-semibold tracking-tight md:text-5xl", featuresTitleClassName), children: featuresTitle }) : /* @__PURE__ */ jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
471
- featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", featuresDescriptionClassName), children: featuresDescription }) : /* @__PURE__ */ jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
512
+ featuresTitle && (typeof featuresTitle === "string" ? /* @__PURE__ */ jsx(
513
+ "h2",
514
+ {
515
+ className: cn(
516
+ "mb-4 text-2xl font-semibold tracking-tight md:text-4xl",
517
+ featuresTitleClassName
518
+ ),
519
+ children: featuresTitle
520
+ }
521
+ ) : /* @__PURE__ */ jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
522
+ featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsx(
523
+ "p",
524
+ {
525
+ className: cn(
526
+ "text-lg text-muted-foreground",
527
+ featuresDescriptionClassName
528
+ ),
529
+ children: featuresDescription
530
+ }
531
+ ) : /* @__PURE__ */ jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
472
532
  ] }),
473
533
  /* @__PURE__ */ jsx("div", { className: cn("grid gap-10 md:grid-cols-3", featuresClassName), children: featuresContent })
474
534
  ] })
@@ -439,76 +439,129 @@ function AboutStatsShowcase({
439
439
  const statsContent = React.useMemo(() => {
440
440
  if (statsSlot) return statsSlot;
441
441
  if (!stats || stats.length === 0) return null;
442
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
443
- stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
444
- stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
445
- ] }, idx)) });
442
+ return /* @__PURE__ */ jsxRuntime.jsx(
443
+ "div",
444
+ {
445
+ className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName),
446
+ children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
447
+ stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
448
+ stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
449
+ ] }, idx))
450
+ }
451
+ );
446
452
  }, [statsSlot, stats, statsClassName]);
447
453
  const logosContent = React.useMemo(() => {
448
454
  if (logosSlot) return logosSlot;
449
455
  if (!logos || logos.length === 0) return null;
450
456
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/50 py-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
451
- logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", logosTitleClassName), children: logosTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: logosTitleClassName, children: logosTitle })),
452
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4", logosClassName), children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
453
- /* @__PURE__ */ jsxRuntime.jsx(
454
- img.Img,
455
- {
456
- src: logo.src,
457
- alt: logo.alt,
458
- className: "h-8 w-auto md:h-14",
459
- optixFlowConfig
460
- }
461
- ),
462
- logo.name && (typeof logo.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold md:text-4xl", children: logo.name }) : logo.name)
463
- ] }, idx)) })
457
+ logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
458
+ "p",
459
+ {
460
+ className: cn(
461
+ "text-center text-xl font-medium",
462
+ logosTitleClassName
463
+ ),
464
+ children: logosTitle
465
+ }
466
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: logosTitleClassName, children: logosTitle })),
467
+ /* @__PURE__ */ jsxRuntime.jsx(
468
+ "div",
469
+ {
470
+ className: cn(
471
+ "grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4",
472
+ logosClassName
473
+ ),
474
+ children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
475
+ img.Img,
476
+ {
477
+ src: logo.src,
478
+ alt: logo.alt,
479
+ className: "h-8 object-contain w-auto md:h-14 max-h-24",
480
+ optixFlowConfig
481
+ }
482
+ ) }, idx))
483
+ }
484
+ )
464
485
  ] }) });
465
- }, [logosSlot, logos, logosTitle, logosTitleClassName, logosClassName, optixFlowConfig]);
486
+ }, [
487
+ logosSlot,
488
+ logos,
489
+ logosTitle,
490
+ logosTitleClassName,
491
+ logosClassName,
492
+ optixFlowConfig
493
+ ]);
466
494
  const benefitsContent = React.useMemo(() => {
467
495
  if (benefitsSlot) return benefitsSlot;
468
496
  if (!benefits || benefits.length === 0) return null;
469
497
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-14", children: [
470
- benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-4xl font-semibold md:text-5xl", benefitsTitleClassName), children: benefitsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
471
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", benefitsClassName), children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
472
- benefit.image && /* @__PURE__ */ jsxRuntime.jsx(
473
- img.Img,
474
- {
475
- src: benefit.image.src,
476
- alt: benefit.image.alt,
477
- className: "max-h-96 w-full rounded-xl object-cover",
478
- optixFlowConfig
479
- }
480
- ),
481
- benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
482
- benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
483
- benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
484
- benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
485
- ] }),
486
- benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
487
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
488
- benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
498
+ benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
499
+ "h2",
500
+ {
501
+ className: cn(
502
+ "text-center font-semibold text-2xl md:text-3xl",
503
+ benefitsTitleClassName
504
+ ),
505
+ children: benefitsTitle
506
+ }
507
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
508
+ /* @__PURE__ */ jsxRuntime.jsx(
509
+ "div",
510
+ {
511
+ className: cn(
512
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
513
+ benefitsClassName
514
+ ),
515
+ children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
516
+ benefit.image && /* @__PURE__ */ jsxRuntime.jsx(
489
517
  img.Img,
490
518
  {
491
- src: benefit.testimonial.logo.src,
492
- alt: benefit.testimonial.logo.alt,
493
- className: "h-7 w-auto",
519
+ src: benefit.image.src,
520
+ alt: benefit.image.alt,
521
+ className: "max-h-96 w-full rounded-xl object-cover",
494
522
  optixFlowConfig
495
523
  }
496
524
  ),
497
- benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
498
- ] }),
499
- benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
500
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
501
- benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
502
- benefit.testimonial.author,
503
- ","
504
- ] }) : benefit.testimonial.author),
505
- benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
506
- ] })
507
- ] })
508
- ] }, idx)) })
525
+ benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
526
+ benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
527
+ benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
528
+ benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
529
+ ] }),
530
+ benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
531
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
532
+ benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
533
+ img.Img,
534
+ {
535
+ src: benefit.testimonial.logo.src,
536
+ alt: benefit.testimonial.logo.alt,
537
+ className: "h-7 w-auto",
538
+ optixFlowConfig
539
+ }
540
+ ),
541
+ benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
542
+ ] }),
543
+ benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
544
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
545
+ benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
546
+ benefit.testimonial.author,
547
+ ","
548
+ ] }) : benefit.testimonial.author),
549
+ benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
550
+ ] })
551
+ ] })
552
+ ] }, idx))
553
+ }
554
+ )
509
555
  ] });
510
- }, [benefitsSlot, benefits, benefitsTitle, benefitsTitleClassName, benefitsClassName, optixFlowConfig]);
511
- return /* @__PURE__ */ jsxRuntime.jsxs(
556
+ }, [
557
+ benefitsSlot,
558
+ benefits,
559
+ benefitsTitle,
560
+ benefitsTitleClassName,
561
+ benefitsClassName,
562
+ optixFlowConfig
563
+ ]);
564
+ return /* @__PURE__ */ jsxRuntime.jsx(
512
565
  Section,
513
566
  {
514
567
  background,
@@ -517,21 +570,48 @@ function AboutStatsShowcase({
517
570
  patternOpacity,
518
571
  className: cn(className),
519
572
  containerClassName,
520
- children: [
521
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-10 text-center md:gap-24", children: [
573
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 md:gap-24", children: [
574
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 text-center md:gap-24 mb-4 md:mb-8", children: [
522
575
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-6", children: [
523
- title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-medium md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
524
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
576
+ title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
577
+ "h1",
578
+ {
579
+ className: cn(
580
+ "text-4xl font-medium md:text-6xl text-balance",
581
+ titleClassName
582
+ ),
583
+ children: title
584
+ }
585
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
586
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
587
+ "p",
588
+ {
589
+ className: cn(
590
+ "text-lg text-muted-foreground md:text-xl text-balance",
591
+ descriptionClassName
592
+ ),
593
+ children: description
594
+ }
595
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
525
596
  ] }),
526
597
  imagesContent
527
598
  ] }),
528
599
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-16", children: [
529
- statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("max-w-3xl text-4xl font-medium md:text-5xl", statsTitleClassName), children: statsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: statsTitleClassName, children: statsTitle })),
600
+ statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
601
+ "h2",
602
+ {
603
+ className: cn(
604
+ "max-w-3xl font-medium text-2xl md:text-3xl",
605
+ statsTitleClassName
606
+ ),
607
+ children: statsTitle
608
+ }
609
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: statsTitleClassName, children: statsTitle })),
530
610
  statsContent
531
611
  ] }),
532
612
  logosContent,
533
613
  benefitsContent
534
- ]
614
+ ] })
535
615
  }
536
616
  );
537
617
  }
@@ -433,76 +433,129 @@ function AboutStatsShowcase({
433
433
  const statsContent = useMemo(() => {
434
434
  if (statsSlot) return statsSlot;
435
435
  if (!stats || stats.length === 0) return null;
436
- return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
437
- stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
438
- stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
439
- ] }, idx)) });
436
+ return /* @__PURE__ */ jsx(
437
+ "div",
438
+ {
439
+ className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName),
440
+ children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
441
+ stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
442
+ stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
443
+ ] }, idx))
444
+ }
445
+ );
440
446
  }, [statsSlot, stats, statsClassName]);
441
447
  const logosContent = useMemo(() => {
442
448
  if (logosSlot) return logosSlot;
443
449
  if (!logos || logos.length === 0) return null;
444
450
  return /* @__PURE__ */ jsx("div", { className: "bg-muted/50 py-24", children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
445
- logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium", logosTitleClassName), children: logosTitle }) : /* @__PURE__ */ jsx("div", { className: logosTitleClassName, children: logosTitle })),
446
- /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4", logosClassName), children: logos.map((logo, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
447
- /* @__PURE__ */ jsx(
448
- Img,
449
- {
450
- src: logo.src,
451
- alt: logo.alt,
452
- className: "h-8 w-auto md:h-14",
453
- optixFlowConfig
454
- }
455
- ),
456
- logo.name && (typeof logo.name === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold md:text-4xl", children: logo.name }) : logo.name)
457
- ] }, idx)) })
451
+ logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsx(
452
+ "p",
453
+ {
454
+ className: cn(
455
+ "text-center text-xl font-medium",
456
+ logosTitleClassName
457
+ ),
458
+ children: logosTitle
459
+ }
460
+ ) : /* @__PURE__ */ jsx("div", { className: logosTitleClassName, children: logosTitle })),
461
+ /* @__PURE__ */ jsx(
462
+ "div",
463
+ {
464
+ className: cn(
465
+ "grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4",
466
+ logosClassName
467
+ ),
468
+ children: logos.map((logo, idx) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
469
+ Img,
470
+ {
471
+ src: logo.src,
472
+ alt: logo.alt,
473
+ className: "h-8 object-contain w-auto md:h-14 max-h-24",
474
+ optixFlowConfig
475
+ }
476
+ ) }, idx))
477
+ }
478
+ )
458
479
  ] }) });
459
- }, [logosSlot, logos, logosTitle, logosTitleClassName, logosClassName, optixFlowConfig]);
480
+ }, [
481
+ logosSlot,
482
+ logos,
483
+ logosTitle,
484
+ logosTitleClassName,
485
+ logosClassName,
486
+ optixFlowConfig
487
+ ]);
460
488
  const benefitsContent = useMemo(() => {
461
489
  if (benefitsSlot) return benefitsSlot;
462
490
  if (!benefits || benefits.length === 0) return null;
463
491
  return /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-14", children: [
464
- benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-center text-4xl font-semibold md:text-5xl", benefitsTitleClassName), children: benefitsTitle }) : /* @__PURE__ */ jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
465
- /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", benefitsClassName), children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
466
- benefit.image && /* @__PURE__ */ jsx(
467
- Img,
468
- {
469
- src: benefit.image.src,
470
- alt: benefit.image.alt,
471
- className: "max-h-96 w-full rounded-xl object-cover",
472
- optixFlowConfig
473
- }
474
- ),
475
- benefit.stat && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
476
- benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
477
- benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
478
- benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
479
- ] }),
480
- benefit.testimonial && /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-background p-4", children: [
481
- /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
482
- benefit.testimonial.logo && /* @__PURE__ */ jsx(
492
+ benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsx(
493
+ "h2",
494
+ {
495
+ className: cn(
496
+ "text-center font-semibold text-2xl md:text-3xl",
497
+ benefitsTitleClassName
498
+ ),
499
+ children: benefitsTitle
500
+ }
501
+ ) : /* @__PURE__ */ jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
502
+ /* @__PURE__ */ jsx(
503
+ "div",
504
+ {
505
+ className: cn(
506
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
507
+ benefitsClassName
508
+ ),
509
+ children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
510
+ benefit.image && /* @__PURE__ */ jsx(
483
511
  Img,
484
512
  {
485
- src: benefit.testimonial.logo.src,
486
- alt: benefit.testimonial.logo.alt,
487
- className: "h-7 w-auto",
513
+ src: benefit.image.src,
514
+ alt: benefit.image.alt,
515
+ className: "max-h-96 w-full rounded-xl object-cover",
488
516
  optixFlowConfig
489
517
  }
490
518
  ),
491
- benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
492
- ] }),
493
- benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
494
- /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
495
- benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
496
- benefit.testimonial.author,
497
- ","
498
- ] }) : benefit.testimonial.author),
499
- benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
500
- ] })
501
- ] })
502
- ] }, idx)) })
519
+ benefit.stat && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
520
+ benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
521
+ benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
522
+ benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
523
+ ] }),
524
+ benefit.testimonial && /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-background p-4", children: [
525
+ /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
526
+ benefit.testimonial.logo && /* @__PURE__ */ jsx(
527
+ Img,
528
+ {
529
+ src: benefit.testimonial.logo.src,
530
+ alt: benefit.testimonial.logo.alt,
531
+ className: "h-7 w-auto",
532
+ optixFlowConfig
533
+ }
534
+ ),
535
+ benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
536
+ ] }),
537
+ benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
538
+ /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
539
+ benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
540
+ benefit.testimonial.author,
541
+ ","
542
+ ] }) : benefit.testimonial.author),
543
+ benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
544
+ ] })
545
+ ] })
546
+ ] }, idx))
547
+ }
548
+ )
503
549
  ] });
504
- }, [benefitsSlot, benefits, benefitsTitle, benefitsTitleClassName, benefitsClassName, optixFlowConfig]);
505
- return /* @__PURE__ */ jsxs(
550
+ }, [
551
+ benefitsSlot,
552
+ benefits,
553
+ benefitsTitle,
554
+ benefitsTitleClassName,
555
+ benefitsClassName,
556
+ optixFlowConfig
557
+ ]);
558
+ return /* @__PURE__ */ jsx(
506
559
  Section,
507
560
  {
508
561
  background,
@@ -511,21 +564,48 @@ function AboutStatsShowcase({
511
564
  patternOpacity,
512
565
  className: cn(className),
513
566
  containerClassName,
514
- children: [
515
- /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-10 text-center md:gap-24", children: [
567
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 md:gap-24", children: [
568
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 text-center md:gap-24 mb-4 md:mb-8", children: [
516
569
  /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-6", children: [
517
- title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-medium md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
518
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
570
+ title && (typeof title === "string" ? /* @__PURE__ */ jsx(
571
+ "h1",
572
+ {
573
+ className: cn(
574
+ "text-4xl font-medium md:text-6xl text-balance",
575
+ titleClassName
576
+ ),
577
+ children: title
578
+ }
579
+ ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
580
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
581
+ "p",
582
+ {
583
+ className: cn(
584
+ "text-lg text-muted-foreground md:text-xl text-balance",
585
+ descriptionClassName
586
+ ),
587
+ children: description
588
+ }
589
+ ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
519
590
  ] }),
520
591
  imagesContent
521
592
  ] }),
522
593
  /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-16", children: [
523
- statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("max-w-3xl text-4xl font-medium md:text-5xl", statsTitleClassName), children: statsTitle }) : /* @__PURE__ */ jsx("div", { className: statsTitleClassName, children: statsTitle })),
594
+ statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsx(
595
+ "h2",
596
+ {
597
+ className: cn(
598
+ "max-w-3xl font-medium text-2xl md:text-3xl",
599
+ statsTitleClassName
600
+ ),
601
+ children: statsTitle
602
+ }
603
+ ) : /* @__PURE__ */ jsx("div", { className: statsTitleClassName, children: statsTitle })),
524
604
  statsContent
525
605
  ] }),
526
606
  logosContent,
527
607
  benefitsContent
528
- ]
608
+ ] })
529
609
  }
530
610
  );
531
611
  }