@mdxui/named 6.4.0 → 7.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.
- package/dist/components/index.d.ts +1 -51
- package/dist/components/index.js +32 -453
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.js +48 -324
- package/dist/index.js.map +1 -1
- package/dist/schemas/index.d.ts +2 -10
- package/dist/schemas/index.js +1 -72
- package/dist/schemas/index.js.map +1 -1
- package/dist/view/index.d.ts +3 -55
- package/dist/view/index.js +10 -488
- package/dist/view/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/problem-B2-XszSB.d.ts +0 -22
package/dist/view/index.js
CHANGED
|
@@ -602,458 +602,11 @@ function FAQ({ heading = "FAQs", faqs = defaultFaqs, backgroundColor = "bg-backg
|
|
|
602
602
|
] }) });
|
|
603
603
|
}
|
|
604
604
|
|
|
605
|
-
// src/components/problem/problem.tsx
|
|
606
|
-
import { FaInbox, FaCalendarAlt, FaListUl, FaFileAlt, FaRocket, FaProjectDiagram, FaBug, FaLightbulb } from "react-icons/fa";
|
|
607
|
-
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
608
|
-
var defaultWorkflows = [
|
|
609
|
-
{ icon: FaInbox, label: "Issue triage" },
|
|
610
|
-
{ icon: FaCalendarAlt, label: "Sprint planning" },
|
|
611
|
-
{ icon: FaListUl, label: "Backlog grooming" },
|
|
612
|
-
{ icon: FaFileAlt, label: "Status updates" },
|
|
613
|
-
{ icon: FaRocket, label: "Release planning" },
|
|
614
|
-
{ icon: FaProjectDiagram, label: "Dependency tracking" },
|
|
615
|
-
{ icon: FaBug, label: "Bug prioritization" },
|
|
616
|
-
{ icon: FaLightbulb, label: "Feature requests" }
|
|
617
|
-
];
|
|
618
|
-
function Problem({
|
|
619
|
-
heading = "Product managers <strong>spend 15+ hours</strong> per week on busywork",
|
|
620
|
-
workflows = defaultWorkflows,
|
|
621
|
-
subheading = "What if all of that just... ",
|
|
622
|
-
subheadingHighlight = "happened automatically?",
|
|
623
|
-
highlightColor = "bg-primary/20",
|
|
624
|
-
marqueeDuration = "30s",
|
|
625
|
-
marqueeGap = "0.5rem",
|
|
626
|
-
backgroundColor = "bg-background",
|
|
627
|
-
className
|
|
628
|
-
}) {
|
|
629
|
-
return /* @__PURE__ */ jsx10("section", { id: "problem", className: cn(`py-20 md:pb-32 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsx10("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsxs7("div", { className: "text-center space-y-8", children: [
|
|
630
|
-
/* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx10(
|
|
631
|
-
"h2",
|
|
632
|
-
{
|
|
633
|
-
className: "font-normal text-[clamp(36px,4vw,40px)] leading-tight text-foreground",
|
|
634
|
-
dangerouslySetInnerHTML: { __html: heading }
|
|
635
|
-
}
|
|
636
|
-
) }),
|
|
637
|
-
/* @__PURE__ */ jsx10(ScrollReveal, { direction: "none", delay: 0.2, children: /* @__PURE__ */ jsxs7("div", { className: "relative py-6", children: [
|
|
638
|
-
/* @__PURE__ */ jsx10("div", { className: "absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none" }),
|
|
639
|
-
/* @__PURE__ */ jsx10("div", { className: "absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none" }),
|
|
640
|
-
/* @__PURE__ */ jsx10(
|
|
641
|
-
Marquee,
|
|
642
|
-
{
|
|
643
|
-
className: "[--duration:30s] [--gap:0.5rem]",
|
|
644
|
-
style: {
|
|
645
|
-
"--duration": marqueeDuration,
|
|
646
|
-
"--gap": marqueeGap
|
|
647
|
-
},
|
|
648
|
-
children: workflows.map((workflow, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2.5 pl-1.5 pr-3.5 py-1.5 bg-card border border-border rounded-full", children: [
|
|
649
|
-
/* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-background", children: /* @__PURE__ */ jsx10(workflow.icon, { className: "w-3.5 h-3.5 text-foreground" }) }),
|
|
650
|
-
/* @__PURE__ */ jsx10("span", { className: "text-sm text-foreground whitespace-nowrap", children: workflow.label })
|
|
651
|
-
] }, index))
|
|
652
|
-
}
|
|
653
|
-
)
|
|
654
|
-
] }) }),
|
|
655
|
-
/* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx10("div", { className: "pt-2 md:pt-4", children: /* @__PURE__ */ jsxs7("h3", { className: "font-normal text-[clamp(26px,3.5vw,32px)] leading-tight text-foreground", children: [
|
|
656
|
-
subheading,
|
|
657
|
-
/* @__PURE__ */ jsxs7("span", { className: "relative inline-block", children: [
|
|
658
|
-
/* @__PURE__ */ jsx10("span", { className: "relative z-10", children: subheadingHighlight }),
|
|
659
|
-
/* @__PURE__ */ jsx10("span", { className: `absolute bottom-1 left-0 w-full h-3 ${highlightColor} opacity-30 -rotate-1` })
|
|
660
|
-
] })
|
|
661
|
-
] }) }) })
|
|
662
|
-
] }) }) });
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
// src/components/contact/contact.tsx
|
|
666
|
-
import { useState } from "react";
|
|
667
|
-
import { Button as Button5, Input, Label, Textarea } from "@mdxui/primitives";
|
|
668
|
-
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
669
|
-
var defaultFields = [
|
|
670
|
-
{
|
|
671
|
-
id: "name",
|
|
672
|
-
label: "Name",
|
|
673
|
-
type: "text",
|
|
674
|
-
required: true
|
|
675
|
-
},
|
|
676
|
-
{
|
|
677
|
-
id: "email",
|
|
678
|
-
label: "Company Email",
|
|
679
|
-
type: "email",
|
|
680
|
-
required: true
|
|
681
|
-
},
|
|
682
|
-
{
|
|
683
|
-
id: "message",
|
|
684
|
-
label: "Message",
|
|
685
|
-
type: "textarea",
|
|
686
|
-
placeholder: "Tell us about your use case, team size, or any other questions you may have.",
|
|
687
|
-
required: true
|
|
688
|
-
}
|
|
689
|
-
];
|
|
690
|
-
function Contact({
|
|
691
|
-
heading = "Get in touch",
|
|
692
|
-
subheading = "Have questions about use cases, pricing, or anything else? Let's chat!",
|
|
693
|
-
fields = defaultFields,
|
|
694
|
-
submitButtonText = "Submit",
|
|
695
|
-
successMessage = "Thanks for reaching out! I'll get back to you within 24 hours.",
|
|
696
|
-
errorMessage = "Hmm, something went wrong. Mind trying again?",
|
|
697
|
-
onSubmit,
|
|
698
|
-
backgroundColor = "bg-background",
|
|
699
|
-
className
|
|
700
|
-
}) {
|
|
701
|
-
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
702
|
-
const [formData, setFormData] = useState({});
|
|
703
|
-
const [submitStatus, setSubmitStatus] = useState("idle");
|
|
704
|
-
const handleSubmit = async (e) => {
|
|
705
|
-
e.preventDefault();
|
|
706
|
-
setIsSubmitting(true);
|
|
707
|
-
setSubmitStatus("idle");
|
|
708
|
-
try {
|
|
709
|
-
if (onSubmit) {
|
|
710
|
-
await onSubmit(formData);
|
|
711
|
-
}
|
|
712
|
-
setSubmitStatus("success");
|
|
713
|
-
setFormData({});
|
|
714
|
-
e.target.reset();
|
|
715
|
-
} catch {
|
|
716
|
-
setSubmitStatus("error");
|
|
717
|
-
} finally {
|
|
718
|
-
setIsSubmitting(false);
|
|
719
|
-
}
|
|
720
|
-
};
|
|
721
|
-
const handleChange = (e) => {
|
|
722
|
-
setFormData((prev) => ({
|
|
723
|
-
...prev,
|
|
724
|
-
[e.target.id]: e.target.value
|
|
725
|
-
}));
|
|
726
|
-
};
|
|
727
|
-
return /* @__PURE__ */ jsx11("section", { className: cn(`relative py-12 md:py-32 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs8("div", { className: "max-w-3xl mx-auto", children: [
|
|
728
|
-
/* @__PURE__ */ jsx11(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs8("div", { className: "mb-14 text-center", children: [
|
|
729
|
-
/* @__PURE__ */ jsx11("h1", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground mb-4", children: heading }),
|
|
730
|
-
/* @__PURE__ */ jsx11("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
|
|
731
|
-
] }) }),
|
|
732
|
-
/* @__PURE__ */ jsx11(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs8(
|
|
733
|
-
"form",
|
|
734
|
-
{
|
|
735
|
-
onSubmit: handleSubmit,
|
|
736
|
-
className: "mx-auto flex max-w-lg flex-col gap-6 bg-card p-6 md:p-8 rounded-3xl border border-border feature-card-shadow",
|
|
737
|
-
children: [
|
|
738
|
-
fields.map((field) => /* @__PURE__ */ jsxs8("div", { className: "grid w-full items-center gap-2", children: [
|
|
739
|
-
/* @__PURE__ */ jsxs8(Label, { htmlFor: field.id, className: "text-foreground", children: [
|
|
740
|
-
field.label,
|
|
741
|
-
field.required && /* @__PURE__ */ jsx11("span", { className: "text-destructive ml-1", children: "*" })
|
|
742
|
-
] }),
|
|
743
|
-
field.type === "textarea" ? /* @__PURE__ */ jsx11(Textarea, { id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange, className: "min-h-[120px]" }) : /* @__PURE__ */ jsx11(Input, { type: field.type, id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange })
|
|
744
|
-
] }, field.id)),
|
|
745
|
-
/* @__PURE__ */ jsx11(Button5, { type: "submit", className: "w-full", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : submitButtonText }),
|
|
746
|
-
submitStatus === "success" && /* @__PURE__ */ jsx11("p", { className: "text-primary text-sm text-center", children: successMessage }),
|
|
747
|
-
submitStatus === "error" && /* @__PURE__ */ jsx11("p", { className: "text-destructive text-sm text-center", children: errorMessage })
|
|
748
|
-
]
|
|
749
|
-
}
|
|
750
|
-
) })
|
|
751
|
-
] }) });
|
|
752
|
-
}
|
|
753
|
-
|
|
754
|
-
// src/components/integration/integration.tsx
|
|
755
|
-
import { forwardRef, useRef, useEffect as useEffect2, useState as useState3 } from "react";
|
|
756
|
-
|
|
757
|
-
// src/shared/animated-beam/animated-beam.tsx
|
|
758
|
-
import { useEffect, useId, useState as useState2 } from "react";
|
|
759
|
-
import { motion as motion2 } from "motion/react";
|
|
760
|
-
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
761
|
-
function AnimatedBeam({
|
|
762
|
-
className,
|
|
763
|
-
containerRef,
|
|
764
|
-
fromRef,
|
|
765
|
-
toRef,
|
|
766
|
-
curvature = 0,
|
|
767
|
-
reverse = false,
|
|
768
|
-
duration = Math.random() * 3 + 4,
|
|
769
|
-
delay = 0,
|
|
770
|
-
pathColor = "gray",
|
|
771
|
-
pathWidth = 2,
|
|
772
|
-
pathOpacity = 0.2,
|
|
773
|
-
gradientStartColor = "#ffaa40",
|
|
774
|
-
gradientStopColor = "#9c40ff",
|
|
775
|
-
startXOffset = 0,
|
|
776
|
-
startYOffset = 0,
|
|
777
|
-
endXOffset = 0,
|
|
778
|
-
endYOffset = 0
|
|
779
|
-
}) {
|
|
780
|
-
const id = useId();
|
|
781
|
-
const [pathD, setPathD] = useState2("");
|
|
782
|
-
const [svgDimensions, setSvgDimensions] = useState2({ width: 0, height: 0 });
|
|
783
|
-
const gradientCoordinates = reverse ? {
|
|
784
|
-
x1: ["90%", "-10%"],
|
|
785
|
-
x2: ["100%", "0%"],
|
|
786
|
-
y1: ["0%", "0%"],
|
|
787
|
-
y2: ["0%", "0%"]
|
|
788
|
-
} : {
|
|
789
|
-
x1: ["10%", "110%"],
|
|
790
|
-
x2: ["0%", "100%"],
|
|
791
|
-
y1: ["0%", "0%"],
|
|
792
|
-
y2: ["0%", "0%"]
|
|
793
|
-
};
|
|
794
|
-
useEffect(() => {
|
|
795
|
-
const updatePath = () => {
|
|
796
|
-
if (containerRef.current && fromRef.current && toRef.current) {
|
|
797
|
-
const containerRect = containerRef.current.getBoundingClientRect();
|
|
798
|
-
const rectA = fromRef.current.getBoundingClientRect();
|
|
799
|
-
const rectB = toRef.current.getBoundingClientRect();
|
|
800
|
-
const svgWidth = containerRect.width;
|
|
801
|
-
const svgHeight = containerRect.height;
|
|
802
|
-
setSvgDimensions({ width: svgWidth, height: svgHeight });
|
|
803
|
-
const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
|
|
804
|
-
const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
|
|
805
|
-
const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
|
|
806
|
-
const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
|
|
807
|
-
const controlY = startY - curvature;
|
|
808
|
-
const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
|
|
809
|
-
setPathD(d);
|
|
810
|
-
}
|
|
811
|
-
};
|
|
812
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
813
|
-
updatePath();
|
|
814
|
-
});
|
|
815
|
-
if (containerRef.current) {
|
|
816
|
-
resizeObserver.observe(containerRef.current);
|
|
817
|
-
}
|
|
818
|
-
updatePath();
|
|
819
|
-
return () => {
|
|
820
|
-
resizeObserver.disconnect();
|
|
821
|
-
};
|
|
822
|
-
}, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
|
|
823
|
-
return /* @__PURE__ */ jsxs9(
|
|
824
|
-
"svg",
|
|
825
|
-
{
|
|
826
|
-
fill: "none",
|
|
827
|
-
width: svgDimensions.width,
|
|
828
|
-
height: svgDimensions.height,
|
|
829
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
830
|
-
className: cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className),
|
|
831
|
-
viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
|
|
832
|
-
children: [
|
|
833
|
-
/* @__PURE__ */ jsx12("path", { d: pathD, stroke: pathColor, strokeWidth: pathWidth, strokeOpacity: pathOpacity, strokeLinecap: "round" }),
|
|
834
|
-
/* @__PURE__ */ jsx12("path", { d: pathD, strokeWidth: pathWidth, stroke: `url(#${id})`, strokeOpacity: "1", strokeLinecap: "round" }),
|
|
835
|
-
/* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs9(
|
|
836
|
-
motion2.linearGradient,
|
|
837
|
-
{
|
|
838
|
-
className: "transform-gpu",
|
|
839
|
-
id,
|
|
840
|
-
gradientUnits: "userSpaceOnUse",
|
|
841
|
-
initial: {
|
|
842
|
-
x1: "0%",
|
|
843
|
-
x2: "0%",
|
|
844
|
-
y1: "0%",
|
|
845
|
-
y2: "0%"
|
|
846
|
-
},
|
|
847
|
-
animate: {
|
|
848
|
-
x1: gradientCoordinates.x1,
|
|
849
|
-
x2: gradientCoordinates.x2,
|
|
850
|
-
y1: gradientCoordinates.y1,
|
|
851
|
-
y2: gradientCoordinates.y2
|
|
852
|
-
},
|
|
853
|
-
transition: {
|
|
854
|
-
delay,
|
|
855
|
-
duration,
|
|
856
|
-
ease: [0.16, 1, 0.3, 1],
|
|
857
|
-
repeat: Infinity,
|
|
858
|
-
repeatDelay: 0
|
|
859
|
-
},
|
|
860
|
-
children: [
|
|
861
|
-
/* @__PURE__ */ jsx12("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
|
|
862
|
-
/* @__PURE__ */ jsx12("stop", { stopColor: gradientStartColor }),
|
|
863
|
-
/* @__PURE__ */ jsx12("stop", { offset: "32.5%", stopColor: gradientStopColor }),
|
|
864
|
-
/* @__PURE__ */ jsx12("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
|
|
865
|
-
]
|
|
866
|
-
}
|
|
867
|
-
) })
|
|
868
|
-
]
|
|
869
|
-
}
|
|
870
|
-
);
|
|
871
|
-
}
|
|
872
|
-
|
|
873
|
-
// src/shared/grid-pattern/grid-pattern.tsx
|
|
874
|
-
import { useId as useId2 } from "react";
|
|
875
|
-
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
876
|
-
function GridPattern({
|
|
877
|
-
width = 40,
|
|
878
|
-
height = 40,
|
|
879
|
-
x = -1,
|
|
880
|
-
y = -1,
|
|
881
|
-
strokeDasharray = "0",
|
|
882
|
-
squares,
|
|
883
|
-
className,
|
|
884
|
-
...props
|
|
885
|
-
}) {
|
|
886
|
-
const id = useId2();
|
|
887
|
-
return /* @__PURE__ */ jsxs10(
|
|
888
|
-
"svg",
|
|
889
|
-
{
|
|
890
|
-
"aria-hidden": "true",
|
|
891
|
-
className: cn("pointer-events-none absolute inset-0 h-full w-full fill-muted-foreground/20 stroke-muted-foreground/20", className),
|
|
892
|
-
...props,
|
|
893
|
-
children: [
|
|
894
|
-
/* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsx13("pattern", { id, width, height, patternUnits: "userSpaceOnUse", x, y, children: /* @__PURE__ */ jsx13("path", { d: `M.5 ${height}V.5H${width}`, fill: "none", strokeDasharray }) }) }),
|
|
895
|
-
/* @__PURE__ */ jsx13("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
|
|
896
|
-
squares && /* @__PURE__ */ jsx13("svg", { x, y, className: "overflow-visible", children: squares.map(([sx, sy]) => /* @__PURE__ */ jsx13("rect", { strokeWidth: "0", width: width - 1, height: height - 1, x: sx * width + 1, y: sy * height + 1 }, `${sx}-${sy}`)) })
|
|
897
|
-
]
|
|
898
|
-
}
|
|
899
|
-
);
|
|
900
|
-
}
|
|
901
|
-
|
|
902
|
-
// src/components/integration/integration.tsx
|
|
903
|
-
import Image3 from "next/image";
|
|
904
|
-
import { Button as Button6 } from "@mdxui/primitives";
|
|
905
|
-
import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
906
|
-
var Square = forwardRef(({ className, children }, ref) => {
|
|
907
|
-
return /* @__PURE__ */ jsx14(
|
|
908
|
-
"div",
|
|
909
|
-
{
|
|
910
|
-
ref,
|
|
911
|
-
className: cn("z-10 flex size-16 items-center justify-center rounded-lg bg-card border border-border p-3 integration-square-shadow", className),
|
|
912
|
-
children
|
|
913
|
-
}
|
|
914
|
-
);
|
|
915
|
-
});
|
|
916
|
-
Square.displayName = "Square";
|
|
917
|
-
function Integration({
|
|
918
|
-
title = "Connect in Seconds",
|
|
919
|
-
description = "Just connect your account and get started immediately \u2013 no configuration, no setup, no hassle.",
|
|
920
|
-
buttonText = "Get Started",
|
|
921
|
-
buttonHref = "#pricing",
|
|
922
|
-
leftNode,
|
|
923
|
-
rightNode,
|
|
924
|
-
beamAnimations = [
|
|
925
|
-
{ startYOffset: 10, endYOffset: 10, curvature: -20, duration: 3 },
|
|
926
|
-
{ startYOffset: -10, endYOffset: -10, curvature: 20, duration: 3, reverse: true }
|
|
927
|
-
],
|
|
928
|
-
gridPatternWidth = 30,
|
|
929
|
-
gridPatternHeight = 30,
|
|
930
|
-
maxWidth = "5xl",
|
|
931
|
-
className,
|
|
932
|
-
contentOrder = "left"
|
|
933
|
-
}) {
|
|
934
|
-
const containerRef = useRef(null);
|
|
935
|
-
const leftRef = useRef(null);
|
|
936
|
-
const rightRef = useRef(null);
|
|
937
|
-
const [isDark, setIsDark] = useState3(false);
|
|
938
|
-
useEffect2(() => {
|
|
939
|
-
const checkDarkMode = () => {
|
|
940
|
-
const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
941
|
-
setIsDark(isDarkMode);
|
|
942
|
-
};
|
|
943
|
-
checkDarkMode();
|
|
944
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
945
|
-
const observer = new MutationObserver(checkDarkMode);
|
|
946
|
-
mediaQuery.addEventListener("change", checkDarkMode);
|
|
947
|
-
observer.observe(document.documentElement, {
|
|
948
|
-
attributes: true,
|
|
949
|
-
attributeFilter: ["class"]
|
|
950
|
-
});
|
|
951
|
-
return () => {
|
|
952
|
-
mediaQuery.removeEventListener("change", checkDarkMode);
|
|
953
|
-
observer.disconnect();
|
|
954
|
-
};
|
|
955
|
-
}, []);
|
|
956
|
-
const renderNode = (node, ref) => {
|
|
957
|
-
const squareContent = (() => {
|
|
958
|
-
if (node.type === "image" && typeof node.content === "string") {
|
|
959
|
-
return /* @__PURE__ */ jsx14("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx14(Image3, { src: node.content, alt: node.alt || "Integration", fill: true, className: "object-cover rounded-lg" }) });
|
|
960
|
-
}
|
|
961
|
-
if (node.type === "icon" && typeof node.content === "string") {
|
|
962
|
-
return /* @__PURE__ */ jsx14("div", { className: cn("text-foreground", node.className), children: node.content });
|
|
963
|
-
}
|
|
964
|
-
return node.content;
|
|
965
|
-
})();
|
|
966
|
-
return /* @__PURE__ */ jsx14(Square, { ref, className: cn("size-20", node.type === "image" ? "p-0" : "", node.className), children: squareContent });
|
|
967
|
-
};
|
|
968
|
-
const maxWidthClasses = {
|
|
969
|
-
sm: "max-w-sm",
|
|
970
|
-
md: "max-w-md",
|
|
971
|
-
lg: "max-w-lg",
|
|
972
|
-
xl: "max-w-xl",
|
|
973
|
-
"2xl": "max-w-2xl",
|
|
974
|
-
"3xl": "max-w-3xl",
|
|
975
|
-
"4xl": "max-w-4xl",
|
|
976
|
-
"5xl": "max-w-5xl",
|
|
977
|
-
"6xl": "max-w-6xl",
|
|
978
|
-
"7xl": "max-w-7xl"
|
|
979
|
-
};
|
|
980
|
-
const content = /* @__PURE__ */ jsxs11("div", { className: "space-y-6", children: [
|
|
981
|
-
/* @__PURE__ */ jsx14(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx14("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground", children: title }) }),
|
|
982
|
-
/* @__PURE__ */ jsx14(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx14("p", { className: "text-base text-muted-foreground max-w-lg", children: description }) }),
|
|
983
|
-
buttonText && buttonHref && /* @__PURE__ */ jsx14(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx14(Button6, { asChild: true, variant: "default", children: /* @__PURE__ */ jsx14("a", { href: buttonHref, children: buttonText }) }) })
|
|
984
|
-
] });
|
|
985
|
-
const animation = /* @__PURE__ */ jsx14(ScrollReveal, { direction: contentOrder === "left" ? "right" : "left", delay: 0.2, children: /* @__PURE__ */ jsxs11("div", { className: "relative flex aspect-square max-w-md mx-auto w-full items-center justify-center overflow-hidden rounded-lg", ref: containerRef, children: [
|
|
986
|
-
/* @__PURE__ */ jsx14(
|
|
987
|
-
GridPattern,
|
|
988
|
-
{
|
|
989
|
-
width: gridPatternWidth,
|
|
990
|
-
height: gridPatternHeight,
|
|
991
|
-
className: "opacity-30 mask-[radial-gradient(ellipse_at_center,black_40%,transparent_85%)] dark:mask-[radial-gradient(ellipse_at_center,white_40%,transparent_85%)]"
|
|
992
|
-
}
|
|
993
|
-
),
|
|
994
|
-
/* @__PURE__ */ jsxs11("div", { className: "flex size-full flex-row items-center justify-center gap-20 relative z-10", children: [
|
|
995
|
-
/* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center", children: renderNode(leftNode, leftRef) }),
|
|
996
|
-
/* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center", children: renderNode(rightNode, rightRef) })
|
|
997
|
-
] }),
|
|
998
|
-
beamAnimations.map((config, index) => /* @__PURE__ */ jsx14(
|
|
999
|
-
AnimatedBeam,
|
|
1000
|
-
{
|
|
1001
|
-
containerRef,
|
|
1002
|
-
fromRef: leftRef,
|
|
1003
|
-
toRef: rightRef,
|
|
1004
|
-
startYOffset: config.startYOffset,
|
|
1005
|
-
endYOffset: config.endYOffset,
|
|
1006
|
-
curvature: config.curvature,
|
|
1007
|
-
duration: config.duration,
|
|
1008
|
-
reverse: config.reverse,
|
|
1009
|
-
pathColor: isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"
|
|
1010
|
-
},
|
|
1011
|
-
index
|
|
1012
|
-
))
|
|
1013
|
-
] }) });
|
|
1014
|
-
return /* @__PURE__ */ jsx14("section", { className: cn("pt-10 sm:pt-0 px-8 lg:px-24 bg-background", className), children: /* @__PURE__ */ jsx14("div", { className: cn(maxWidthClasses[maxWidth], "mx-auto"), children: /* @__PURE__ */ jsx14("div", { className: "grid lg:grid-cols-2 gap-1 items-center", children: contentOrder === "left" ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
|
|
1015
|
-
content,
|
|
1016
|
-
animation
|
|
1017
|
-
] }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
|
|
1018
|
-
animation,
|
|
1019
|
-
content
|
|
1020
|
-
] }) }) }) });
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
|
-
// src/view/mapper.ts
|
|
1024
|
-
import {
|
|
1025
|
-
FaInbox as FaInbox2,
|
|
1026
|
-
FaCalendarAlt as FaCalendarAlt2,
|
|
1027
|
-
FaListUl as FaListUl2,
|
|
1028
|
-
FaFileAlt as FaFileAlt2,
|
|
1029
|
-
FaRocket as FaRocket2,
|
|
1030
|
-
FaProjectDiagram as FaProjectDiagram2,
|
|
1031
|
-
FaBug as FaBug2,
|
|
1032
|
-
FaLightbulb as FaLightbulb2,
|
|
1033
|
-
FaRegDotCircle
|
|
1034
|
-
} from "react-icons/fa";
|
|
1035
|
-
var WORKFLOW_ICONS = {
|
|
1036
|
-
inbox: FaInbox2,
|
|
1037
|
-
calendar: FaCalendarAlt2,
|
|
1038
|
-
list: FaListUl2,
|
|
1039
|
-
file: FaFileAlt2,
|
|
1040
|
-
rocket: FaRocket2,
|
|
1041
|
-
project: FaProjectDiagram2,
|
|
1042
|
-
bug: FaBug2,
|
|
1043
|
-
lightbulb: FaLightbulb2
|
|
1044
|
-
};
|
|
1045
|
-
function resolveWorkflowIcon(hint) {
|
|
1046
|
-
return WORKFLOW_ICONS[hint] ?? FaRegDotCircle;
|
|
1047
|
-
}
|
|
1048
|
-
function mapWorkflows(workflows) {
|
|
1049
|
-
return workflows.map((w) => ({ icon: resolveWorkflowIcon(w.icon), label: w.label }));
|
|
1050
|
-
}
|
|
1051
|
-
|
|
1052
605
|
// src/view/view.tsx
|
|
1053
|
-
import { jsx as
|
|
606
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1054
607
|
function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
1055
|
-
const { hero,
|
|
1056
|
-
return /* @__PURE__ */
|
|
608
|
+
const { hero, features, pricing, faq, cta } = content;
|
|
609
|
+
return /* @__PURE__ */ jsx10(DialectShell, { theme, mode, children: /* @__PURE__ */ jsx10("div", { "data-dialect": "named", children: /* @__PURE__ */ jsxs7(
|
|
1057
610
|
NeoChrome,
|
|
1058
611
|
{
|
|
1059
612
|
brandName,
|
|
@@ -1061,7 +614,7 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1061
614
|
primaryCta: { text: hero.ctaText, url: hero.ctaHref },
|
|
1062
615
|
openInAIPrompt: `Help me decide whether ${brandName} fits my team's workflow`,
|
|
1063
616
|
children: [
|
|
1064
|
-
/* @__PURE__ */
|
|
617
|
+
/* @__PURE__ */ jsx10(
|
|
1065
618
|
Hero,
|
|
1066
619
|
{
|
|
1067
620
|
badgeEmoji: hero.badgeEmoji,
|
|
@@ -1078,16 +631,7 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1078
631
|
marqueeImages: hero.marqueeImages
|
|
1079
632
|
}
|
|
1080
633
|
),
|
|
1081
|
-
/* @__PURE__ */
|
|
1082
|
-
Problem,
|
|
1083
|
-
{
|
|
1084
|
-
heading: problem.heading,
|
|
1085
|
-
workflows: mapWorkflows(problem.workflows),
|
|
1086
|
-
subheading: problem.subheading,
|
|
1087
|
-
subheadingHighlight: problem.subheadingHighlight
|
|
1088
|
-
}
|
|
1089
|
-
),
|
|
1090
|
-
/* @__PURE__ */ jsx15(
|
|
634
|
+
/* @__PURE__ */ jsx10(
|
|
1091
635
|
Features,
|
|
1092
636
|
{
|
|
1093
637
|
heading: features.heading,
|
|
@@ -1095,18 +639,7 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1095
639
|
features: features.features
|
|
1096
640
|
}
|
|
1097
641
|
),
|
|
1098
|
-
|
|
1099
|
-
Integration,
|
|
1100
|
-
{
|
|
1101
|
-
title: integration.title,
|
|
1102
|
-
description: integration.description,
|
|
1103
|
-
buttonText: integration.buttonText,
|
|
1104
|
-
buttonHref: integration.buttonHref,
|
|
1105
|
-
leftNode: integration.leftNode,
|
|
1106
|
-
rightNode: integration.rightNode
|
|
1107
|
-
}
|
|
1108
|
-
),
|
|
1109
|
-
pricing.variant === "single" ? /* @__PURE__ */ jsx15(
|
|
642
|
+
pricing.variant === "single" ? /* @__PURE__ */ jsx10(
|
|
1110
643
|
Pricing,
|
|
1111
644
|
{
|
|
1112
645
|
heading: pricing.heading,
|
|
@@ -1120,7 +653,7 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1120
653
|
features: pricing.features,
|
|
1121
654
|
securityNote: pricing.securityNote
|
|
1122
655
|
}
|
|
1123
|
-
) : /* @__PURE__ */
|
|
656
|
+
) : /* @__PURE__ */ jsx10(
|
|
1124
657
|
PricingTiers,
|
|
1125
658
|
{
|
|
1126
659
|
heading: pricing.heading,
|
|
@@ -1129,17 +662,8 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1129
662
|
securityNote: pricing.securityNote
|
|
1130
663
|
}
|
|
1131
664
|
),
|
|
1132
|
-
/* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
contact && /* @__PURE__ */ jsx15(
|
|
1135
|
-
Contact,
|
|
1136
|
-
{
|
|
1137
|
-
heading: contact.heading,
|
|
1138
|
-
subheading: contact.subheading,
|
|
1139
|
-
fields: contact.fields,
|
|
1140
|
-
submitButtonText: contact.submitButtonText
|
|
1141
|
-
}
|
|
1142
|
-
)
|
|
665
|
+
/* @__PURE__ */ jsx10(FAQ, { heading: faq.heading, faqs: faq.faqs }),
|
|
666
|
+
/* @__PURE__ */ jsx10(CTA, { heading: cta.heading, subheading: cta.subheading, buttons: cta.buttons })
|
|
1143
667
|
]
|
|
1144
668
|
}
|
|
1145
669
|
) }) });
|
|
@@ -1147,8 +671,6 @@ function NamedAgentView({ content, theme, mode, brandName, hostname }) {
|
|
|
1147
671
|
var view_default = NamedAgentView;
|
|
1148
672
|
export {
|
|
1149
673
|
NamedAgentView,
|
|
1150
|
-
view_default as default
|
|
1151
|
-
mapWorkflows,
|
|
1152
|
-
resolveWorkflowIcon
|
|
674
|
+
view_default as default
|
|
1153
675
|
};
|
|
1154
676
|
//# sourceMappingURL=index.js.map
|