@salesmind-ai/design-system 0.3.1 → 0.3.2
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/admin/index.cjs +68 -2928
- package/dist/admin/index.cjs.map +1 -1
- package/dist/admin/index.js +5 -2915
- package/dist/admin/index.js.map +1 -1
- package/dist/blog/index.cjs +53 -1064
- package/dist/blog/index.cjs.map +1 -1
- package/dist/blog/index.js +8 -1054
- package/dist/blog/index.js.map +1 -1
- package/dist/charts/index.cjs +46 -2694
- package/dist/charts/index.cjs.map +1 -1
- package/dist/charts/index.js +3 -2680
- package/dist/charts/index.js.map +1 -1
- package/dist/chunk-2GARWEJK.js +17 -0
- package/dist/chunk-2GARWEJK.js.map +1 -0
- package/dist/chunk-3NKRFUAR.js +37 -0
- package/dist/chunk-3NKRFUAR.js.map +1 -0
- package/dist/chunk-3TGSIILM.cjs +201 -0
- package/dist/chunk-3TGSIILM.cjs.map +1 -0
- package/dist/chunk-4GM5BGBN.cjs +801 -0
- package/dist/chunk-4GM5BGBN.cjs.map +1 -0
- package/dist/chunk-5LGDEZWY.cjs +2434 -0
- package/dist/chunk-5LGDEZWY.cjs.map +1 -0
- package/dist/chunk-6H4DSTXR.js +786 -0
- package/dist/chunk-6H4DSTXR.js.map +1 -0
- package/dist/chunk-6UNG76Y2.js +153 -0
- package/dist/chunk-6UNG76Y2.js.map +1 -0
- package/dist/chunk-7PX2AZ6Y.js +39 -0
- package/dist/chunk-7PX2AZ6Y.js.map +1 -0
- package/dist/chunk-B6AVAX4F.js +1415 -0
- package/dist/chunk-B6AVAX4F.js.map +1 -0
- package/dist/chunk-BILT5KD3.js +264 -0
- package/dist/chunk-BILT5KD3.js.map +1 -0
- package/dist/chunk-C2BCDNAV.js +24 -0
- package/dist/chunk-C2BCDNAV.js.map +1 -0
- package/dist/chunk-CH42VPWE.cjs +421 -0
- package/dist/chunk-CH42VPWE.cjs.map +1 -0
- package/dist/chunk-CJ2MKVAF.cjs +46 -0
- package/dist/chunk-CJ2MKVAF.cjs.map +1 -0
- package/dist/chunk-DP74LUXG.cjs +98 -0
- package/dist/chunk-DP74LUXG.cjs.map +1 -0
- package/dist/chunk-E7D6EKJ4.cjs +44 -0
- package/dist/chunk-E7D6EKJ4.cjs.map +1 -0
- package/dist/chunk-ECXBTUH6.cjs +584 -0
- package/dist/chunk-ECXBTUH6.cjs.map +1 -0
- package/dist/chunk-EFRAP5ES.js +157 -0
- package/dist/chunk-EFRAP5ES.js.map +1 -0
- package/dist/chunk-F6YYWMME.js +485 -0
- package/dist/chunk-F6YYWMME.js.map +1 -0
- package/dist/chunk-FAFAP4L5.js +183 -0
- package/dist/chunk-FAFAP4L5.js.map +1 -0
- package/dist/chunk-GUZIMHWS.js +1608 -0
- package/dist/chunk-GUZIMHWS.js.map +1 -0
- package/dist/chunk-H2Y6BSTL.cjs +69 -0
- package/dist/chunk-H2Y6BSTL.cjs.map +1 -0
- package/dist/chunk-HN4PHABT.js +126 -0
- package/dist/chunk-HN4PHABT.js.map +1 -0
- package/dist/chunk-HRENHNDJ.js +211 -0
- package/dist/chunk-HRENHNDJ.js.map +1 -0
- package/dist/chunk-I75BFEYT.cjs +2561 -0
- package/dist/chunk-I75BFEYT.cjs.map +1 -0
- package/dist/chunk-IFRATNLU.js +562 -0
- package/dist/chunk-IFRATNLU.js.map +1 -0
- package/dist/chunk-IYPXJ6YC.cjs +69 -0
- package/dist/chunk-IYPXJ6YC.cjs.map +1 -0
- package/dist/chunk-JPJN4YBC.js +409 -0
- package/dist/chunk-JPJN4YBC.js.map +1 -0
- package/dist/chunk-KBA2LFBG.js +62 -0
- package/dist/chunk-KBA2LFBG.js.map +1 -0
- package/dist/chunk-KCKUSU2M.cjs +166 -0
- package/dist/chunk-KCKUSU2M.cjs.map +1 -0
- package/dist/chunk-KJ2OXQF4.js +287 -0
- package/dist/chunk-KJ2OXQF4.js.map +1 -0
- package/dist/chunk-KNQEIU7O.cjs +1202 -0
- package/dist/chunk-KNQEIU7O.cjs.map +1 -0
- package/dist/chunk-KVGSVGRK.cjs +569 -0
- package/dist/chunk-KVGSVGRK.cjs.map +1 -0
- package/dist/chunk-L352JRV6.cjs +105 -0
- package/dist/chunk-L352JRV6.cjs.map +1 -0
- package/dist/chunk-LJADZITX.cjs +298 -0
- package/dist/chunk-LJADZITX.cjs.map +1 -0
- package/dist/chunk-LMJPWXTZ.cjs +194 -0
- package/dist/chunk-LMJPWXTZ.cjs.map +1 -0
- package/dist/chunk-LOWEAQST.js +701 -0
- package/dist/chunk-LOWEAQST.js.map +1 -0
- package/dist/chunk-MDB2WCRQ.cjs +137 -0
- package/dist/chunk-MDB2WCRQ.cjs.map +1 -0
- package/dist/chunk-MQDEE7HC.cjs +283 -0
- package/dist/chunk-MQDEE7HC.cjs.map +1 -0
- package/dist/chunk-MQRB634A.cjs +34 -0
- package/dist/chunk-MQRB634A.cjs.map +1 -0
- package/dist/chunk-MTI27RDV.js +185 -0
- package/dist/chunk-MTI27RDV.js.map +1 -0
- package/dist/chunk-MU6GW5ZV.js +2317 -0
- package/dist/chunk-MU6GW5ZV.js.map +1 -0
- package/dist/chunk-NN3TUHIH.js +28 -0
- package/dist/chunk-NN3TUHIH.js.map +1 -0
- package/dist/chunk-NT4LBP7D.cjs +111 -0
- package/dist/chunk-NT4LBP7D.cjs.map +1 -0
- package/dist/chunk-OLV7OD3X.cjs +502 -0
- package/dist/chunk-OLV7OD3X.cjs.map +1 -0
- package/dist/chunk-OXNXEQY7.js +2538 -0
- package/dist/chunk-OXNXEQY7.js.map +1 -0
- package/dist/chunk-P5BOFE5A.js +546 -0
- package/dist/chunk-P5BOFE5A.js.map +1 -0
- package/dist/chunk-Q2MFGYTE.cjs +1449 -0
- package/dist/chunk-Q2MFGYTE.cjs.map +1 -0
- package/dist/chunk-Q75DBVDY.cjs +68 -0
- package/dist/chunk-Q75DBVDY.cjs.map +1 -0
- package/dist/chunk-REQ5Q6ZI.js +1022 -0
- package/dist/chunk-REQ5Q6ZI.js.map +1 -0
- package/dist/chunk-SICKWUWB.js +62 -0
- package/dist/chunk-SICKWUWB.js.map +1 -0
- package/dist/chunk-T343CCH5.js +1190 -0
- package/dist/chunk-T343CCH5.js.map +1 -0
- package/dist/chunk-TEC62D4A.cjs +1624 -0
- package/dist/chunk-TEC62D4A.cjs.map +1 -0
- package/dist/chunk-TW5JB35D.js +2122 -0
- package/dist/chunk-TW5JB35D.js.map +1 -0
- package/dist/chunk-VC5LMUVQ.cjs +20 -0
- package/dist/chunk-VC5LMUVQ.cjs.map +1 -0
- package/dist/chunk-VM7WFMKI.cjs +76 -0
- package/dist/chunk-VM7WFMKI.cjs.map +1 -0
- package/dist/chunk-W2WTP6HS.cjs +233 -0
- package/dist/chunk-W2WTP6HS.cjs.map +1 -0
- package/dist/chunk-WH7PYHZY.cjs +35 -0
- package/dist/chunk-WH7PYHZY.cjs.map +1 -0
- package/dist/chunk-XQZVY7JJ.cjs +717 -0
- package/dist/chunk-XQZVY7JJ.cjs.map +1 -0
- package/dist/chunk-XU3OMQ7V.js +98 -0
- package/dist/chunk-XU3OMQ7V.js.map +1 -0
- package/dist/chunk-XWPDRMZG.js +62 -0
- package/dist/chunk-XWPDRMZG.js.map +1 -0
- package/dist/chunk-Y3CPKNB7.js +67 -0
- package/dist/chunk-Y3CPKNB7.js.map +1 -0
- package/dist/chunk-YNVRDD2P.js +98 -0
- package/dist/chunk-YNVRDD2P.js.map +1 -0
- package/dist/chunk-YSYR54XR.js +92 -0
- package/dist/chunk-YSYR54XR.js.map +1 -0
- package/dist/chunk-YTYDQBVY.cjs +162 -0
- package/dist/chunk-YTYDQBVY.cjs.map +1 -0
- package/dist/chunk-ZDLOA2UT.cjs +1042 -0
- package/dist/chunk-ZDLOA2UT.cjs.map +1 -0
- package/dist/chunk-ZWUKRCOJ.cjs +2162 -0
- package/dist/chunk-ZWUKRCOJ.cjs.map +1 -0
- package/dist/core/index.cjs +807 -4333
- package/dist/core/index.cjs.map +1 -1
- package/dist/core/index.js +14 -4130
- package/dist/core/index.js.map +1 -1
- package/dist/i18n/index.cjs +86 -558
- package/dist/i18n/index.cjs.map +1 -1
- package/dist/i18n/index.js +1 -544
- package/dist/i18n/index.js.map +1 -1
- package/dist/index.cjs +1432 -17140
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +31 -16785
- package/dist/index.js.map +1 -1
- package/dist/marketing/index.cjs +142 -3072
- package/dist/marketing/index.cjs.map +1 -1
- package/dist/marketing/index.js +11 -3042
- package/dist/marketing/index.js.map +1 -1
- package/dist/motion/index.cjs +26 -1222
- package/dist/motion/index.cjs.map +1 -1
- package/dist/motion/index.js +2 -1215
- package/dist/motion/index.js.map +1 -1
- package/dist/nav/index.cjs +101 -1518
- package/dist/nav/index.cjs.map +1 -1
- package/dist/nav/index.js +4 -1498
- package/dist/nav/index.js.map +1 -1
- package/dist/report/index.cjs +171 -2403
- package/dist/report/index.cjs.map +1 -1
- package/dist/report/index.js +3 -2363
- package/dist/report/index.js.map +1 -1
- package/dist/sections/index.cjs +28 -378
- package/dist/sections/index.cjs.map +1 -1
- package/dist/sections/index.js +4 -372
- package/dist/sections/index.js.map +1 -1
- package/dist/social-proof/index.cjs +53 -1250
- package/dist/social-proof/index.cjs.map +1 -1
- package/dist/social-proof/index.js +6 -1235
- package/dist/social-proof/index.js.map +1 -1
- package/dist/theme/index.cjs +38 -565
- package/dist/theme/index.cjs.map +1 -1
- package/dist/theme/index.js +2 -555
- package/dist/theme/index.js.map +1 -1
- package/dist/web/client/index.cjs +38 -491
- package/dist/web/client/index.cjs.map +1 -1
- package/dist/web/client/index.js +4 -483
- package/dist/web/client/index.js.map +1 -1
- package/dist/web/index.cjs +158 -1346
- package/dist/web/index.cjs.map +1 -1
- package/dist/web/index.js +9 -1305
- package/dist/web/index.js.map +1 -1
- package/dist/web/server/index.cjs +26 -563
- package/dist/web/server/index.cjs.map +1 -1
- package/dist/web/server/index.js +1 -560
- package/dist/web/server/index.js.map +1 -1
- package/package.json +1 -1
package/dist/motion/index.cjs
CHANGED
|
@@ -1,1230 +1,34 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var clsx2 = require('clsx');
|
|
4
|
+
var chunkKNQEIU7O_cjs = require('../chunk-KNQEIU7O.cjs');
|
|
5
|
+
require('../chunk-L352JRV6.cjs');
|
|
8
6
|
|
|
9
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
7
|
|
|
11
|
-
var React3__default = /*#__PURE__*/_interopDefault(React3);
|
|
12
|
-
var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
|
|
13
8
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}};
|
|
39
|
-
var MOTION = {
|
|
40
|
-
DURATION,
|
|
41
|
-
EASING};
|
|
42
|
-
var MotionContainer = ({
|
|
43
|
-
children,
|
|
44
|
-
viewportMargin = "-10%",
|
|
45
|
-
once = true,
|
|
46
|
-
stagger = false,
|
|
47
|
-
delay = 0,
|
|
48
|
-
className,
|
|
49
|
-
...props
|
|
50
|
-
}) => {
|
|
51
|
-
const ref = React3.useRef(null);
|
|
52
|
-
const isInView = framerMotion.useInView(ref, {
|
|
53
|
-
once,
|
|
54
|
-
margin: viewportMargin
|
|
55
|
-
});
|
|
56
|
-
const variants = stagger ? VARIANTS.staggerContainer : VARIANTS.fadeIn;
|
|
57
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
58
|
-
framerMotion.motion.div,
|
|
59
|
-
{
|
|
60
|
-
ref,
|
|
61
|
-
initial: "hidden",
|
|
62
|
-
animate: isInView ? "visible" : "hidden",
|
|
63
|
-
variants,
|
|
64
|
-
transition: { delay },
|
|
65
|
-
className,
|
|
66
|
-
...props,
|
|
67
|
-
children
|
|
68
|
-
}
|
|
69
|
-
);
|
|
70
|
-
};
|
|
71
|
-
var MotionText = ({
|
|
72
|
-
text,
|
|
73
|
-
type = "word",
|
|
74
|
-
highlightWords = [],
|
|
75
|
-
className,
|
|
76
|
-
...props
|
|
77
|
-
}) => {
|
|
78
|
-
const items = type === "word" ? text.split(" ") : text.split("");
|
|
79
|
-
const containerVariants = {
|
|
80
|
-
hidden: { opacity: 0 },
|
|
81
|
-
visible: {
|
|
82
|
-
opacity: 1,
|
|
83
|
-
transition: {
|
|
84
|
-
staggerChildren: type === "word" ? 0.05 : 0.02,
|
|
85
|
-
delayChildren: 0.1
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
const itemVariants = {
|
|
90
|
-
hidden: { opacity: 0, y: 10 },
|
|
91
|
-
visible: {
|
|
92
|
-
opacity: 1,
|
|
93
|
-
y: 0,
|
|
94
|
-
transition: { duration: MOTION.DURATION.short, ease: MOTION.EASING.standard }
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
-
framerMotion.motion.div,
|
|
99
|
-
{
|
|
100
|
-
variants: containerVariants,
|
|
101
|
-
initial: "hidden",
|
|
102
|
-
whileInView: "visible",
|
|
103
|
-
viewport: { once: true, margin: "-10%" },
|
|
104
|
-
className,
|
|
105
|
-
...props,
|
|
106
|
-
style: {
|
|
107
|
-
display: "flex",
|
|
108
|
-
flexWrap: "wrap",
|
|
109
|
-
gap: type === "word" ? "0.25em" : "0.05em",
|
|
110
|
-
...props.style
|
|
111
|
-
},
|
|
112
|
-
children: items.map((item, i) => {
|
|
113
|
-
const isHighlighted = highlightWords.includes(item.replace(/[^a-zA-Z0-9]/g, ""));
|
|
114
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
115
|
-
framerMotion.motion.span,
|
|
116
|
-
{
|
|
117
|
-
variants: itemVariants,
|
|
118
|
-
style: {
|
|
119
|
-
color: isHighlighted ? "var(--brand-pink)" : "inherit",
|
|
120
|
-
fontWeight: isHighlighted ? 600 : "inherit"
|
|
121
|
-
},
|
|
122
|
-
children: [
|
|
123
|
-
item,
|
|
124
|
-
type === "word" && "\xA0"
|
|
125
|
-
]
|
|
126
|
-
},
|
|
127
|
-
i
|
|
128
|
-
);
|
|
129
|
-
})
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
};
|
|
133
|
-
var CursorSpotlight = ({
|
|
134
|
-
children,
|
|
135
|
-
color = "var(--accent-rgb)",
|
|
136
|
-
size = 400,
|
|
137
|
-
opacity = 0.15,
|
|
138
|
-
borderGlow = true,
|
|
139
|
-
className,
|
|
140
|
-
disabled = false
|
|
141
|
-
}) => {
|
|
142
|
-
const containerRef = React3.useRef(null);
|
|
143
|
-
const [position, setPosition] = React3.useState({ x: 0, y: 0 });
|
|
144
|
-
const [isHovering, setIsHovering] = React3.useState(false);
|
|
145
|
-
const [reducedMotion, setReducedMotion] = React3.useState(false);
|
|
146
|
-
React3.useEffect(() => {
|
|
147
|
-
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
148
|
-
setReducedMotion(mediaQuery.matches);
|
|
149
|
-
const handler = (e) => setReducedMotion(e.matches);
|
|
150
|
-
mediaQuery.addEventListener("change", handler);
|
|
151
|
-
return () => mediaQuery.removeEventListener("change", handler);
|
|
152
|
-
}, []);
|
|
153
|
-
const isDisabled = disabled || reducedMotion;
|
|
154
|
-
const handleMouseMove = React3.useCallback(
|
|
155
|
-
(e) => {
|
|
156
|
-
if (!containerRef.current || isDisabled) return;
|
|
157
|
-
const rect = containerRef.current.getBoundingClientRect();
|
|
158
|
-
setPosition({
|
|
159
|
-
x: e.clientX - rect.left,
|
|
160
|
-
y: e.clientY - rect.top
|
|
161
|
-
});
|
|
162
|
-
},
|
|
163
|
-
[isDisabled]
|
|
164
|
-
);
|
|
165
|
-
const handleMouseEnter = React3.useCallback(() => {
|
|
166
|
-
if (!isDisabled) setIsHovering(true);
|
|
167
|
-
}, [isDisabled]);
|
|
168
|
-
const handleMouseLeave = React3.useCallback(() => {
|
|
169
|
-
setIsHovering(false);
|
|
170
|
-
}, []);
|
|
171
|
-
React3.useEffect(() => {
|
|
172
|
-
const container = containerRef.current;
|
|
173
|
-
if (!container || isDisabled) return;
|
|
174
|
-
container.addEventListener("mousemove", handleMouseMove);
|
|
175
|
-
container.addEventListener("mouseenter", handleMouseEnter);
|
|
176
|
-
container.addEventListener("mouseleave", handleMouseLeave);
|
|
177
|
-
return () => {
|
|
178
|
-
container.removeEventListener("mousemove", handleMouseMove);
|
|
179
|
-
container.removeEventListener("mouseenter", handleMouseEnter);
|
|
180
|
-
container.removeEventListener("mouseleave", handleMouseLeave);
|
|
181
|
-
};
|
|
182
|
-
}, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);
|
|
183
|
-
const spotlightColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, ${opacity})` : color.includes(",") ? `rgba(${color}, ${opacity})` : color;
|
|
184
|
-
const borderColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, 0.5)` : color.includes(",") ? `rgba(${color}, 0.5)` : color;
|
|
185
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
186
|
-
"div",
|
|
187
|
-
{
|
|
188
|
-
ref: containerRef,
|
|
189
|
-
className: `ds-cursor-spotlight ${className || ""}`,
|
|
190
|
-
style: {
|
|
191
|
-
"--spotlight-x": `${position.x}px`,
|
|
192
|
-
"--spotlight-y": `${position.y}px`,
|
|
193
|
-
"--spotlight-size": `${size}px`,
|
|
194
|
-
"--spotlight-color": spotlightColor,
|
|
195
|
-
"--spotlight-border-color": borderColor,
|
|
196
|
-
"--spotlight-opacity": isHovering ? 1 : 0
|
|
197
|
-
},
|
|
198
|
-
"data-hovering": isHovering,
|
|
199
|
-
"data-border-glow": borderGlow,
|
|
200
|
-
children: [
|
|
201
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__glow", "aria-hidden": "true" }),
|
|
202
|
-
borderGlow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__border", "aria-hidden": "true" }),
|
|
203
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__content", children })
|
|
204
|
-
]
|
|
205
|
-
}
|
|
206
|
-
);
|
|
207
|
-
};
|
|
208
|
-
CursorSpotlight.displayName = "CursorSpotlight";
|
|
209
|
-
var SpotlightCard = ({
|
|
210
|
-
title,
|
|
211
|
-
description,
|
|
212
|
-
icon,
|
|
213
|
-
children,
|
|
214
|
-
onClick,
|
|
215
|
-
...spotlightProps
|
|
216
|
-
}) => {
|
|
217
|
-
return /* @__PURE__ */ jsxRuntime.jsx(CursorSpotlight, { ...spotlightProps, className: "ds-spotlight-card", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
218
|
-
"div",
|
|
219
|
-
{
|
|
220
|
-
className: "ds-spotlight-card__inner",
|
|
221
|
-
onClick,
|
|
222
|
-
role: onClick ? "button" : void 0,
|
|
223
|
-
tabIndex: onClick ? 0 : void 0,
|
|
224
|
-
onKeyDown: onClick ? (e) => {
|
|
225
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
226
|
-
e.preventDefault();
|
|
227
|
-
onClick();
|
|
228
|
-
}
|
|
229
|
-
} : void 0,
|
|
230
|
-
children: [
|
|
231
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-spotlight-card__icon", children: icon }),
|
|
232
|
-
title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-spotlight-card__title", children: title }),
|
|
233
|
-
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-spotlight-card__description", children: description }),
|
|
234
|
-
children
|
|
235
|
-
]
|
|
236
|
-
}
|
|
237
|
-
) });
|
|
238
|
-
};
|
|
239
|
-
SpotlightCard.displayName = "SpotlightCard";
|
|
240
|
-
var steps = [
|
|
241
|
-
{
|
|
242
|
-
id: "test",
|
|
243
|
-
label: "Test Audience & Messaging",
|
|
244
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
245
|
-
"svg",
|
|
246
|
-
{
|
|
247
|
-
width: "24",
|
|
248
|
-
height: "24",
|
|
249
|
-
viewBox: "0 0 24 24",
|
|
250
|
-
fill: "none",
|
|
251
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
252
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
253
|
-
"path",
|
|
254
|
-
{
|
|
255
|
-
d: "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z",
|
|
256
|
-
stroke: "currentColor",
|
|
257
|
-
strokeWidth: "2",
|
|
258
|
-
strokeLinecap: "round",
|
|
259
|
-
strokeLinejoin: "round"
|
|
260
|
-
}
|
|
261
|
-
)
|
|
262
|
-
}
|
|
263
|
-
)
|
|
264
|
-
},
|
|
265
|
-
{
|
|
266
|
-
id: "execute",
|
|
267
|
-
label: "Execute Outreach",
|
|
268
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
269
|
-
"svg",
|
|
270
|
-
{
|
|
271
|
-
width: "24",
|
|
272
|
-
height: "24",
|
|
273
|
-
viewBox: "0 0 24 24",
|
|
274
|
-
fill: "none",
|
|
275
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
276
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
277
|
-
"path",
|
|
278
|
-
{
|
|
279
|
-
d: "M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2Z",
|
|
280
|
-
stroke: "currentColor",
|
|
281
|
-
strokeWidth: "2",
|
|
282
|
-
strokeLinecap: "round",
|
|
283
|
-
strokeLinejoin: "round"
|
|
284
|
-
}
|
|
285
|
-
)
|
|
286
|
-
}
|
|
287
|
-
)
|
|
288
|
-
},
|
|
289
|
-
{
|
|
290
|
-
id: "results",
|
|
291
|
-
label: "Book Meetings",
|
|
292
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
293
|
-
"svg",
|
|
294
|
-
{
|
|
295
|
-
width: "24",
|
|
296
|
-
height: "24",
|
|
297
|
-
viewBox: "0 0 24 24",
|
|
298
|
-
fill: "none",
|
|
299
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
300
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
301
|
-
"path",
|
|
302
|
-
{
|
|
303
|
-
d: "M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z",
|
|
304
|
-
stroke: "currentColor",
|
|
305
|
-
strokeWidth: "2",
|
|
306
|
-
strokeLinecap: "round",
|
|
307
|
-
strokeLinejoin: "round"
|
|
308
|
-
}
|
|
309
|
-
)
|
|
310
|
-
}
|
|
311
|
-
)
|
|
312
|
-
}
|
|
313
|
-
];
|
|
314
|
-
var RevenueAutomationLoop = ({ className }) => {
|
|
315
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("ds-revenue-loop", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__circle", children: [
|
|
316
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
317
|
-
"svg",
|
|
318
|
-
{
|
|
319
|
-
className: "ds-revenue-loop__ring",
|
|
320
|
-
viewBox: "0 0 400 400",
|
|
321
|
-
fill: "none",
|
|
322
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
323
|
-
children: [
|
|
324
|
-
/* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
325
|
-
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "loopGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
|
|
326
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
|
|
327
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "var(--brand-yellow)" }),
|
|
328
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-pink)" })
|
|
329
|
-
] }),
|
|
330
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
331
|
-
"marker",
|
|
332
|
-
{
|
|
333
|
-
id: "arrowhead",
|
|
334
|
-
markerWidth: "10",
|
|
335
|
-
markerHeight: "7",
|
|
336
|
-
refX: "9",
|
|
337
|
-
refY: "3.5",
|
|
338
|
-
orient: "auto",
|
|
339
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "url(#loopGradient)" })
|
|
340
|
-
}
|
|
341
|
-
)
|
|
342
|
-
] }),
|
|
343
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
344
|
-
"circle",
|
|
345
|
-
{
|
|
346
|
-
cx: "200",
|
|
347
|
-
cy: "200",
|
|
348
|
-
r: "190",
|
|
349
|
-
stroke: "var(--rim-light-bottom)",
|
|
350
|
-
strokeWidth: "1",
|
|
351
|
-
strokeDasharray: "4 4",
|
|
352
|
-
className: "ds-revenue-loop__track"
|
|
353
|
-
}
|
|
354
|
-
),
|
|
355
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
356
|
-
framerMotion.motion.circle,
|
|
357
|
-
{
|
|
358
|
-
cx: "200",
|
|
359
|
-
cy: "200",
|
|
360
|
-
r: "190",
|
|
361
|
-
stroke: "url(#loopGradient)",
|
|
362
|
-
strokeWidth: "2",
|
|
363
|
-
fill: "none",
|
|
364
|
-
strokeLinecap: "round",
|
|
365
|
-
initial: { pathLength: 0, rotate: -90 },
|
|
366
|
-
animate: { pathLength: 1, rotate: -90 },
|
|
367
|
-
transition: {
|
|
368
|
-
duration: 4,
|
|
369
|
-
ease: "linear",
|
|
370
|
-
repeat: Infinity
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
)
|
|
374
|
-
]
|
|
375
|
-
}
|
|
376
|
-
),
|
|
377
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__hub", children: [
|
|
378
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__hub-glow" }),
|
|
379
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__hub-content", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-revenue-loop__logo", children: "AI" }) })
|
|
380
|
-
] }),
|
|
381
|
-
steps.map((step, index) => {
|
|
382
|
-
const angle = index * 360 / steps.length - 90;
|
|
383
|
-
const radius = 190;
|
|
384
|
-
const x = 200 + radius * Math.cos(angle * Math.PI / 180);
|
|
385
|
-
const y = 200 + radius * Math.sin(angle * Math.PI / 180);
|
|
386
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
387
|
-
framerMotion.motion.div,
|
|
388
|
-
{
|
|
389
|
-
className: "ds-revenue-loop__node",
|
|
390
|
-
style: {
|
|
391
|
-
left: `${x / 400 * 100}%`,
|
|
392
|
-
top: `${y / 400 * 100}%`
|
|
393
|
-
},
|
|
394
|
-
initial: { opacity: 0, scale: 0.8 },
|
|
395
|
-
animate: { opacity: 1, scale: 1 },
|
|
396
|
-
transition: { delay: index * 0.5 },
|
|
397
|
-
children: [
|
|
398
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__icon", children: step.icon }),
|
|
399
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__label", children: step.label })
|
|
400
|
-
]
|
|
401
|
-
},
|
|
402
|
-
step.id
|
|
403
|
-
);
|
|
404
|
-
})
|
|
405
|
-
] }) });
|
|
406
|
-
};
|
|
407
|
-
var EASE_PREMIUM = [0.22, 1, 0.36, 1];
|
|
408
|
-
var SCENE_TIMING = {
|
|
409
|
-
init: 0,
|
|
410
|
-
funnel: 1500,
|
|
411
|
-
qualification: 3500,
|
|
412
|
-
meeting: 5500,
|
|
413
|
-
mapping: 6500,
|
|
414
|
-
scaling: 8500
|
|
415
|
-
};
|
|
416
|
-
var HOLD_DURATION = 1200;
|
|
417
|
-
var TOTAL_DURATION = 1e4 + HOLD_DURATION;
|
|
418
|
-
var LINKEDIN_STEPS = [
|
|
419
|
-
{ id: "follow", label: "Profile Follow" },
|
|
420
|
-
{ id: "visit", label: "Profile Visit" },
|
|
421
|
-
{ id: "connect", label: "Connection Request" },
|
|
422
|
-
{ id: "msg1", label: "Message 1" },
|
|
423
|
-
{ id: "msg2", label: "Message 2" },
|
|
424
|
-
{ id: "msg3", label: "Message 3" }
|
|
425
|
-
];
|
|
426
|
-
var FUNNEL_STAGES = [
|
|
427
|
-
{ id: "awareness", label: "Awareness", num: 1 },
|
|
428
|
-
{ id: "discovery", label: "Discovery", num: 2 },
|
|
429
|
-
{ id: "evaluation", label: "Evaluation", num: 3 },
|
|
430
|
-
{ id: "intent", label: "Intent", num: 4 },
|
|
431
|
-
{ id: "negotiation", label: "Negotiation", num: 5 },
|
|
432
|
-
{ id: "purchase", label: "Purchase", num: 6 }
|
|
433
|
-
];
|
|
434
|
-
var WINNING_BULLETS = [
|
|
435
|
-
"Target audience validated & segmented",
|
|
436
|
-
"Messaging sequence A/B tested",
|
|
437
|
-
"Optimal send times confirmed",
|
|
438
|
-
"Response rate > benchmark threshold",
|
|
439
|
-
"Conversion path verified end-to-end"
|
|
440
|
-
];
|
|
441
|
-
var SCALING_CHECKS = [
|
|
442
|
-
"Volume multiplied to 9 senders",
|
|
443
|
-
"All sequences templated & locked",
|
|
444
|
-
"Auto-qualification active",
|
|
445
|
-
"Meeting pipeline on autopilot"
|
|
446
|
-
];
|
|
447
|
-
var AntSVG = ({ size = 28, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
448
|
-
"svg",
|
|
449
|
-
{
|
|
450
|
-
className,
|
|
451
|
-
width: size,
|
|
452
|
-
height: size,
|
|
453
|
-
viewBox: "0 0 28 28",
|
|
454
|
-
fill: "none",
|
|
455
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
456
|
-
"aria-hidden": "true",
|
|
457
|
-
children: [
|
|
458
|
-
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
|
|
459
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
|
|
460
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
|
|
461
|
-
] }) }),
|
|
462
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14", cy: "6", r: "4", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
|
|
463
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
464
|
-
"line",
|
|
465
|
-
{
|
|
466
|
-
x1: "11",
|
|
467
|
-
y1: "3",
|
|
468
|
-
x2: "7",
|
|
469
|
-
y2: "0.5",
|
|
470
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
471
|
-
strokeWidth: "1",
|
|
472
|
-
strokeLinecap: "round"
|
|
473
|
-
}
|
|
474
|
-
),
|
|
475
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
476
|
-
"line",
|
|
477
|
-
{
|
|
478
|
-
x1: "17",
|
|
479
|
-
y1: "3",
|
|
480
|
-
x2: "21",
|
|
481
|
-
y2: "0.5",
|
|
482
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
483
|
-
strokeWidth: "1",
|
|
484
|
-
strokeLinecap: "round"
|
|
485
|
-
}
|
|
486
|
-
),
|
|
487
|
-
/* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "14", cy: "13", rx: "3.5", ry: "3", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
|
|
488
|
-
/* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "14", cy: "22", rx: "5", ry: "5", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
|
|
489
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
490
|
-
"line",
|
|
491
|
-
{
|
|
492
|
-
x1: "10.5",
|
|
493
|
-
y1: "11",
|
|
494
|
-
x2: "5",
|
|
495
|
-
y2: "9",
|
|
496
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
497
|
-
strokeWidth: "0.8",
|
|
498
|
-
strokeLinecap: "round"
|
|
499
|
-
}
|
|
500
|
-
),
|
|
501
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
502
|
-
"line",
|
|
503
|
-
{
|
|
504
|
-
x1: "17.5",
|
|
505
|
-
y1: "11",
|
|
506
|
-
x2: "23",
|
|
507
|
-
y2: "9",
|
|
508
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
509
|
-
strokeWidth: "0.8",
|
|
510
|
-
strokeLinecap: "round"
|
|
511
|
-
}
|
|
512
|
-
),
|
|
513
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
514
|
-
"line",
|
|
515
|
-
{
|
|
516
|
-
x1: "10.5",
|
|
517
|
-
y1: "13",
|
|
518
|
-
x2: "4",
|
|
519
|
-
y2: "14",
|
|
520
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
521
|
-
strokeWidth: "0.8",
|
|
522
|
-
strokeLinecap: "round"
|
|
523
|
-
}
|
|
524
|
-
),
|
|
525
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
526
|
-
"line",
|
|
527
|
-
{
|
|
528
|
-
x1: "17.5",
|
|
529
|
-
y1: "13",
|
|
530
|
-
x2: "24",
|
|
531
|
-
y2: "14",
|
|
532
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
533
|
-
strokeWidth: "0.8",
|
|
534
|
-
strokeLinecap: "round"
|
|
535
|
-
}
|
|
536
|
-
),
|
|
537
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
538
|
-
"line",
|
|
539
|
-
{
|
|
540
|
-
x1: "10.5",
|
|
541
|
-
y1: "15",
|
|
542
|
-
x2: "5",
|
|
543
|
-
y2: "18",
|
|
544
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
545
|
-
strokeWidth: "0.8",
|
|
546
|
-
strokeLinecap: "round"
|
|
547
|
-
}
|
|
548
|
-
),
|
|
549
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
550
|
-
"line",
|
|
551
|
-
{
|
|
552
|
-
x1: "17.5",
|
|
553
|
-
y1: "15",
|
|
554
|
-
x2: "23",
|
|
555
|
-
y2: "18",
|
|
556
|
-
stroke: "rgba(255,255,255,0.1)",
|
|
557
|
-
strokeWidth: "0.8",
|
|
558
|
-
strokeLinecap: "round"
|
|
559
|
-
}
|
|
560
|
-
),
|
|
561
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" }),
|
|
562
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" })
|
|
563
|
-
]
|
|
564
|
-
}
|
|
565
|
-
);
|
|
566
|
-
var SwarmAntSVG = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
567
|
-
"svg",
|
|
568
|
-
{
|
|
569
|
-
width: "16",
|
|
570
|
-
height: "16",
|
|
571
|
-
viewBox: "0 0 16 16",
|
|
572
|
-
fill: "none",
|
|
573
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
574
|
-
"aria-hidden": "true",
|
|
575
|
-
children: [
|
|
576
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "3.5", r: "2.5", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
|
|
577
|
-
/* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "8", cy: "8", rx: "2", ry: "1.8", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
|
|
578
|
-
/* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "8", cy: "13", rx: "3", ry: "3", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" })
|
|
579
|
-
]
|
|
580
|
-
}
|
|
581
|
-
);
|
|
582
|
-
var CalendarIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
583
|
-
"svg",
|
|
584
|
-
{
|
|
585
|
-
width: "20",
|
|
586
|
-
height: "20",
|
|
587
|
-
viewBox: "0 0 20 20",
|
|
588
|
-
fill: "none",
|
|
589
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
590
|
-
"aria-hidden": "true",
|
|
591
|
-
children: [
|
|
592
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "16", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
593
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
594
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
595
|
-
"line",
|
|
596
|
-
{
|
|
597
|
-
x1: "6",
|
|
598
|
-
y1: "2",
|
|
599
|
-
x2: "6",
|
|
600
|
-
y2: "6",
|
|
601
|
-
stroke: "currentColor",
|
|
602
|
-
strokeWidth: "1.5",
|
|
603
|
-
strokeLinecap: "round"
|
|
604
|
-
}
|
|
605
|
-
),
|
|
606
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
607
|
-
"line",
|
|
608
|
-
{
|
|
609
|
-
x1: "14",
|
|
610
|
-
y1: "2",
|
|
611
|
-
x2: "14",
|
|
612
|
-
y2: "6",
|
|
613
|
-
stroke: "currentColor",
|
|
614
|
-
strokeWidth: "1.5",
|
|
615
|
-
strokeLinecap: "round"
|
|
616
|
-
}
|
|
617
|
-
),
|
|
618
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "10", width: "3", height: "3", rx: "0.5", fill: "currentColor", opacity: "0.5" })
|
|
619
|
-
]
|
|
620
|
-
}
|
|
621
|
-
);
|
|
622
|
-
var LockIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
623
|
-
"svg",
|
|
624
|
-
{
|
|
625
|
-
width: "12",
|
|
626
|
-
height: "12",
|
|
627
|
-
viewBox: "0 0 12 12",
|
|
628
|
-
fill: "none",
|
|
629
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
630
|
-
"aria-hidden": "true",
|
|
631
|
-
children: [
|
|
632
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
|
|
633
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
634
|
-
"path",
|
|
635
|
-
{
|
|
636
|
-
d: "M4 5V3.5C4 2.4 4.9 1.5 6 1.5C7.1 1.5 8 2.4 8 3.5V5",
|
|
637
|
-
stroke: "currentColor",
|
|
638
|
-
strokeWidth: "1.2",
|
|
639
|
-
strokeLinecap: "round"
|
|
640
|
-
}
|
|
641
|
-
)
|
|
642
|
-
]
|
|
643
|
-
}
|
|
644
|
-
);
|
|
645
|
-
var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
646
|
-
"svg",
|
|
647
|
-
{
|
|
648
|
-
className: "ds-funnel-scaling__scaling-check",
|
|
649
|
-
width: "14",
|
|
650
|
-
height: "14",
|
|
651
|
-
viewBox: "0 0 14 14",
|
|
652
|
-
fill: "none",
|
|
653
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
654
|
-
"aria-hidden": "true",
|
|
655
|
-
children: [
|
|
656
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.2" }),
|
|
657
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
658
|
-
"polyline",
|
|
659
|
-
{
|
|
660
|
-
points: "4,7 6,9.5 10,4.5",
|
|
661
|
-
stroke: "currentColor",
|
|
662
|
-
strokeWidth: "1.4",
|
|
663
|
-
strokeLinecap: "round",
|
|
664
|
-
strokeLinejoin: "round",
|
|
665
|
-
fill: "none"
|
|
666
|
-
}
|
|
667
|
-
)
|
|
668
|
-
]
|
|
669
|
-
}
|
|
670
|
-
);
|
|
671
|
-
var NodeDot = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
672
|
-
"svg",
|
|
673
|
-
{
|
|
674
|
-
className: "ds-funnel-scaling__flow-icon",
|
|
675
|
-
width: "20",
|
|
676
|
-
height: "20",
|
|
677
|
-
viewBox: "0 0 20 20",
|
|
678
|
-
fill: "none",
|
|
679
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
680
|
-
"aria-hidden": "true",
|
|
681
|
-
children: [
|
|
682
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
683
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
|
|
684
|
-
]
|
|
685
|
-
}
|
|
686
|
-
);
|
|
687
|
-
var containerStagger = {
|
|
688
|
-
hidden: { opacity: 0 },
|
|
689
|
-
show: {
|
|
690
|
-
opacity: 1,
|
|
691
|
-
transition: { staggerChildren: 0.1 }
|
|
692
|
-
}
|
|
693
|
-
};
|
|
694
|
-
var cardReveal = {
|
|
695
|
-
hidden: { opacity: 0, y: 40 },
|
|
696
|
-
show: {
|
|
697
|
-
opacity: 1,
|
|
698
|
-
y: 0,
|
|
699
|
-
transition: { duration: 0.6, ease: EASE_PREMIUM }
|
|
700
|
-
}
|
|
701
|
-
};
|
|
702
|
-
var bulletStagger = {
|
|
703
|
-
hidden: { opacity: 0, x: -8 },
|
|
704
|
-
show: {
|
|
705
|
-
opacity: 1,
|
|
706
|
-
x: 0,
|
|
707
|
-
transition: { duration: 0.3, ease: EASE_PREMIUM }
|
|
708
|
-
}
|
|
709
|
-
};
|
|
710
|
-
var stepNode = {
|
|
711
|
-
hidden: { opacity: 0, scaleY: 0.85 },
|
|
712
|
-
show: {
|
|
713
|
-
opacity: 1,
|
|
714
|
-
scaleY: 1,
|
|
715
|
-
transition: { duration: 0.35, ease: EASE_PREMIUM }
|
|
716
|
-
}
|
|
717
|
-
};
|
|
718
|
-
var funnelLayer = {
|
|
719
|
-
hidden: { opacity: 0, y: 20 },
|
|
720
|
-
show: {
|
|
721
|
-
opacity: 1,
|
|
722
|
-
y: 0,
|
|
723
|
-
transition: { duration: 0.4, ease: EASE_PREMIUM }
|
|
724
|
-
}
|
|
725
|
-
};
|
|
726
|
-
var fadeSlideUp = {
|
|
727
|
-
hidden: { opacity: 0, y: 30 },
|
|
728
|
-
show: {
|
|
729
|
-
opacity: 1,
|
|
730
|
-
y: 0,
|
|
731
|
-
transition: { duration: 0.5, ease: EASE_PREMIUM }
|
|
732
|
-
}
|
|
733
|
-
};
|
|
734
|
-
var scalePulse = {
|
|
735
|
-
hidden: { scale: 1 },
|
|
736
|
-
show: {
|
|
737
|
-
scale: [1, 1.04, 1],
|
|
738
|
-
transition: { duration: 0.6, ease: EASE_PREMIUM }
|
|
739
|
-
}
|
|
740
|
-
};
|
|
741
|
-
var swarmEntry = {
|
|
742
|
-
hidden: { opacity: 0, scale: 0.8 },
|
|
743
|
-
show: {
|
|
744
|
-
opacity: 1,
|
|
745
|
-
scale: 1,
|
|
746
|
-
transition: { duration: 0.35, ease: EASE_PREMIUM }
|
|
747
|
-
}
|
|
748
|
-
};
|
|
749
|
-
var qualBlockLeft = {
|
|
750
|
-
hidden: { opacity: 0, x: -60 },
|
|
751
|
-
show: {
|
|
752
|
-
opacity: 1,
|
|
753
|
-
x: 0,
|
|
754
|
-
transition: { duration: 0.5, ease: EASE_PREMIUM }
|
|
755
|
-
}
|
|
756
|
-
};
|
|
757
|
-
var qualBlockRight = {
|
|
758
|
-
hidden: { opacity: 0, x: 60 },
|
|
759
|
-
show: {
|
|
760
|
-
opacity: 1,
|
|
761
|
-
x: 0,
|
|
762
|
-
transition: { duration: 0.5, ease: EASE_PREMIUM }
|
|
763
|
-
}
|
|
764
|
-
};
|
|
765
|
-
function useSceneTimeline(isInView, autoPlay, loop, reducedMotion) {
|
|
766
|
-
const [scene, setScene] = React3.useState("idle");
|
|
767
|
-
const timerRef = React3.useRef([]);
|
|
768
|
-
const clearTimers = React3.useCallback(() => {
|
|
769
|
-
timerRef.current.forEach(clearTimeout);
|
|
770
|
-
timerRef.current = [];
|
|
771
|
-
}, []);
|
|
772
|
-
const startTimeline = React3.useCallback(() => {
|
|
773
|
-
clearTimers();
|
|
774
|
-
const scenes = [
|
|
775
|
-
"init",
|
|
776
|
-
"funnel",
|
|
777
|
-
"qualification",
|
|
778
|
-
"meeting",
|
|
779
|
-
"mapping",
|
|
780
|
-
"scaling"
|
|
781
|
-
];
|
|
782
|
-
if (reducedMotion) {
|
|
783
|
-
setScene("scaling");
|
|
784
|
-
return;
|
|
785
|
-
}
|
|
786
|
-
scenes.forEach((s) => {
|
|
787
|
-
const id = setTimeout(() => setScene(s), SCENE_TIMING[s]);
|
|
788
|
-
timerRef.current.push(id);
|
|
789
|
-
});
|
|
790
|
-
if (loop) {
|
|
791
|
-
const loopId = setTimeout(() => {
|
|
792
|
-
setScene("idle");
|
|
793
|
-
const restartId = setTimeout(() => startTimeline(), 100);
|
|
794
|
-
timerRef.current.push(restartId);
|
|
795
|
-
}, TOTAL_DURATION);
|
|
796
|
-
timerRef.current.push(loopId);
|
|
797
|
-
}
|
|
798
|
-
}, [clearTimers, loop, reducedMotion]);
|
|
799
|
-
React3.useEffect(() => {
|
|
800
|
-
if (isInView && autoPlay) {
|
|
801
|
-
startTimeline();
|
|
802
|
-
}
|
|
803
|
-
return clearTimers;
|
|
804
|
-
}, [isInView, autoPlay, startTimeline, clearTimers]);
|
|
805
|
-
return scene;
|
|
806
|
-
}
|
|
807
|
-
function isAtOrPast(current, target) {
|
|
808
|
-
const order = [
|
|
809
|
-
"idle",
|
|
810
|
-
"init",
|
|
811
|
-
"funnel",
|
|
812
|
-
"qualification",
|
|
813
|
-
"meeting",
|
|
814
|
-
"mapping",
|
|
815
|
-
"scaling"
|
|
816
|
-
];
|
|
817
|
-
return order.indexOf(current) >= order.indexOf(target);
|
|
818
|
-
}
|
|
819
|
-
var FunnelScalingSender = ({
|
|
820
|
-
className,
|
|
821
|
-
autoPlay = true,
|
|
822
|
-
loop = true
|
|
823
|
-
}) => {
|
|
824
|
-
const containerRef = React3.useRef(null);
|
|
825
|
-
const isInView = framerMotion.useInView(containerRef, { once: false, amount: 0.3 });
|
|
826
|
-
const reducedMotion = framerMotion.useReducedMotion();
|
|
827
|
-
const scene = useSceneTimeline(isInView, autoPlay, loop, reducedMotion);
|
|
828
|
-
const isActive = scene !== "idle";
|
|
829
|
-
const showInit = isAtOrPast(scene, "init");
|
|
830
|
-
const showFunnel = isAtOrPast(scene, "funnel");
|
|
831
|
-
const showQualification = isAtOrPast(scene, "qualification");
|
|
832
|
-
const showMeeting = isAtOrPast(scene, "meeting");
|
|
833
|
-
const showMapping = isAtOrPast(scene, "mapping");
|
|
834
|
-
const showScaling = isAtOrPast(scene, "scaling");
|
|
835
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
836
|
-
"div",
|
|
837
|
-
{
|
|
838
|
-
ref: containerRef,
|
|
839
|
-
className: clsx2__default.default("ds-funnel-scaling", className),
|
|
840
|
-
role: "img",
|
|
841
|
-
"aria-label": "Animated illustration: SalesMind scaling funnel from the sender perspective \u2014 showing how validated outreach becomes an automated pipeline machine",
|
|
842
|
-
children: [
|
|
843
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
844
|
-
framerMotion.motion.div,
|
|
845
|
-
{
|
|
846
|
-
className: "ds-funnel-scaling__bg",
|
|
847
|
-
initial: { opacity: 0 },
|
|
848
|
-
animate: { opacity: isActive ? 1 : 0 },
|
|
849
|
-
transition: { duration: 0.4 }
|
|
850
|
-
}
|
|
851
|
-
),
|
|
852
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
853
|
-
framerMotion.motion.div,
|
|
854
|
-
{
|
|
855
|
-
className: "ds-funnel-scaling__grid",
|
|
856
|
-
initial: { opacity: 0 },
|
|
857
|
-
animate: { opacity: isActive ? 1 : 0 },
|
|
858
|
-
transition: { duration: 0.4, delay: 0.6 }
|
|
859
|
-
}
|
|
860
|
-
),
|
|
861
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
862
|
-
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
|
|
863
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
|
|
864
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
|
|
865
|
-
] }),
|
|
866
|
-
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "fscFlowGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
867
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
|
|
868
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
|
|
869
|
-
] }),
|
|
870
|
-
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "fscQualGrad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
871
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
|
|
872
|
-
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
|
|
873
|
-
] })
|
|
874
|
-
] }) }),
|
|
875
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__canvas", children: [
|
|
876
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
877
|
-
framerMotion.motion.div,
|
|
878
|
-
{
|
|
879
|
-
className: "ds-funnel-scaling__winning-card",
|
|
880
|
-
variants: cardReveal,
|
|
881
|
-
initial: "hidden",
|
|
882
|
-
animate: showInit ? "show" : "hidden",
|
|
883
|
-
children: [
|
|
884
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__winning-header", children: "Solution" }),
|
|
885
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__winning-title", children: "Winning Combination" }),
|
|
886
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
887
|
-
framerMotion.motion.ul,
|
|
888
|
-
{
|
|
889
|
-
className: "ds-funnel-scaling__winning-bullets",
|
|
890
|
-
variants: containerStagger,
|
|
891
|
-
initial: "hidden",
|
|
892
|
-
animate: showInit ? "show" : "hidden",
|
|
893
|
-
children: WINNING_BULLETS.map((bullet) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
894
|
-
framerMotion.motion.li,
|
|
895
|
-
{
|
|
896
|
-
className: "ds-funnel-scaling__winning-bullet",
|
|
897
|
-
variants: bulletStagger,
|
|
898
|
-
children: bullet
|
|
899
|
-
},
|
|
900
|
-
bullet
|
|
901
|
-
))
|
|
902
|
-
}
|
|
903
|
-
),
|
|
904
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
905
|
-
framerMotion.motion.div,
|
|
906
|
-
{
|
|
907
|
-
className: "ds-funnel-scaling__winning-lock",
|
|
908
|
-
initial: { opacity: 0 },
|
|
909
|
-
animate: { opacity: showInit ? 1 : 0 },
|
|
910
|
-
transition: { delay: 0.8, duration: 0.4 },
|
|
911
|
-
children: [
|
|
912
|
-
/* @__PURE__ */ jsxRuntime.jsx(LockIcon, {}),
|
|
913
|
-
" Validated & Locked"
|
|
914
|
-
]
|
|
915
|
-
}
|
|
916
|
-
)
|
|
917
|
-
]
|
|
918
|
-
}
|
|
919
|
-
),
|
|
920
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
921
|
-
framerMotion.motion.div,
|
|
922
|
-
{
|
|
923
|
-
className: "ds-funnel-scaling__flow",
|
|
924
|
-
variants: containerStagger,
|
|
925
|
-
initial: "hidden",
|
|
926
|
-
animate: showFunnel ? "show" : "hidden",
|
|
927
|
-
children: [
|
|
928
|
-
LINKEDIN_STEPS.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
|
|
929
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
930
|
-
framerMotion.motion.div,
|
|
931
|
-
{
|
|
932
|
-
className: clsx2__default.default(
|
|
933
|
-
"ds-funnel-scaling__flow-node",
|
|
934
|
-
showFunnel && "ds-funnel-scaling__flow-node--active"
|
|
935
|
-
),
|
|
936
|
-
variants: stepNode,
|
|
937
|
-
custom: i,
|
|
938
|
-
children: [
|
|
939
|
-
/* @__PURE__ */ jsxRuntime.jsx(NodeDot, {}),
|
|
940
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__flow-label", children: step.label })
|
|
941
|
-
]
|
|
942
|
-
}
|
|
943
|
-
),
|
|
944
|
-
i < LINKEDIN_STEPS.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
945
|
-
framerMotion.motion.svg,
|
|
946
|
-
{
|
|
947
|
-
className: "ds-funnel-scaling__flow-connector",
|
|
948
|
-
width: "2",
|
|
949
|
-
height: "12",
|
|
950
|
-
viewBox: "0 0 2 12",
|
|
951
|
-
initial: { scaleY: 0, opacity: 0 },
|
|
952
|
-
animate: showFunnel ? { scaleY: 1, opacity: 1 } : { scaleY: 0, opacity: 0 },
|
|
953
|
-
transition: { duration: 0.3, delay: 0.1 * (i + 1), ease: EASE_PREMIUM },
|
|
954
|
-
style: { transformOrigin: "top" },
|
|
955
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "2", height: "12", fill: "url(#fscFlowGrad)", rx: "1" })
|
|
956
|
-
}
|
|
957
|
-
)
|
|
958
|
-
] }, step.id)),
|
|
959
|
-
showFunnel && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", height: 0 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
960
|
-
framerMotion.motion.div,
|
|
961
|
-
{
|
|
962
|
-
className: "ds-funnel-scaling__ant ds-funnel-scaling__ant--ghost",
|
|
963
|
-
initial: { opacity: 0, x: -20 + i * 15, y: -10 },
|
|
964
|
-
animate: showFunnel ? { opacity: 0.35, x: -10 + i * 18, y: 0 } : { opacity: 0 },
|
|
965
|
-
transition: { delay: 1.2 + i * 0.15, duration: 0.4, ease: EASE_PREMIUM },
|
|
966
|
-
style: { position: "absolute" },
|
|
967
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(AntSVG, { size: 20 })
|
|
968
|
-
},
|
|
969
|
-
`ghost-${i}`
|
|
970
|
-
)) })
|
|
971
|
-
]
|
|
972
|
-
}
|
|
973
|
-
),
|
|
974
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
975
|
-
framerMotion.motion.div,
|
|
976
|
-
{
|
|
977
|
-
className: "ds-funnel-scaling__qualification",
|
|
978
|
-
initial: { opacity: 0, scale: 0.9 },
|
|
979
|
-
animate: showQualification ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 },
|
|
980
|
-
transition: { duration: 0.6, ease: EASE_PREMIUM },
|
|
981
|
-
children: [
|
|
982
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__qual-ring", children: [
|
|
983
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 180 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
984
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "90", r: "70", stroke: "rgba(255,255,255,0.06)", strokeWidth: "1" }),
|
|
985
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
986
|
-
framerMotion.motion.circle,
|
|
987
|
-
{
|
|
988
|
-
cx: "90",
|
|
989
|
-
cy: "90",
|
|
990
|
-
r: "70",
|
|
991
|
-
stroke: "url(#fscQualGrad)",
|
|
992
|
-
strokeWidth: "2",
|
|
993
|
-
fill: "none",
|
|
994
|
-
strokeLinecap: "round",
|
|
995
|
-
strokeDasharray: "440",
|
|
996
|
-
initial: { strokeDashoffset: 440 },
|
|
997
|
-
animate: showQualification ? { strokeDashoffset: 0 } : { strokeDashoffset: 440 },
|
|
998
|
-
transition: { duration: 0.8, ease: EASE_PREMIUM }
|
|
999
|
-
}
|
|
1000
|
-
),
|
|
1001
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1002
|
-
framerMotion.motion.polygon,
|
|
1003
|
-
{
|
|
1004
|
-
points: "155,80 165,90 155,100",
|
|
1005
|
-
fill: "var(--brand-pink)",
|
|
1006
|
-
initial: { opacity: 0 },
|
|
1007
|
-
animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
|
|
1008
|
-
transition: { delay: 0.6, duration: 0.3 }
|
|
1009
|
-
}
|
|
1010
|
-
),
|
|
1011
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1012
|
-
framerMotion.motion.polygon,
|
|
1013
|
-
{
|
|
1014
|
-
points: "25,100 15,90 25,80",
|
|
1015
|
-
fill: "var(--brand-yellow)",
|
|
1016
|
-
initial: { opacity: 0 },
|
|
1017
|
-
animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
|
|
1018
|
-
transition: { delay: 0.7, duration: 0.3 }
|
|
1019
|
-
}
|
|
1020
|
-
)
|
|
1021
|
-
] }),
|
|
1022
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1023
|
-
framerMotion.motion.div,
|
|
1024
|
-
{
|
|
1025
|
-
className: "ds-funnel-scaling__qual-center",
|
|
1026
|
-
initial: { opacity: 0 },
|
|
1027
|
-
animate: showQualification ? { opacity: 1 } : { opacity: 0 },
|
|
1028
|
-
transition: { delay: 0.8, duration: 0.4 },
|
|
1029
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__qual-text", children: "Qualification happens during the conversation" })
|
|
1030
|
-
}
|
|
1031
|
-
),
|
|
1032
|
-
showQualification && !reducedMotion && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: showScaling ? 9 : 3 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1033
|
-
framerMotion.motion.div,
|
|
1034
|
-
{
|
|
1035
|
-
className: "ds-funnel-scaling__swarm-ant",
|
|
1036
|
-
variants: swarmEntry,
|
|
1037
|
-
initial: "hidden",
|
|
1038
|
-
animate: "show",
|
|
1039
|
-
transition: { delay: i * 0.08 },
|
|
1040
|
-
style: {
|
|
1041
|
-
animationDelay: `${-(i * (3 / (showScaling ? 9 : 3)))}s`
|
|
1042
|
-
},
|
|
1043
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(SwarmAntSVG, {})
|
|
1044
|
-
},
|
|
1045
|
-
`swarm-${i}`
|
|
1046
|
-
)) })
|
|
1047
|
-
] }),
|
|
1048
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__qual-blocks", children: [
|
|
1049
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1050
|
-
framerMotion.motion.div,
|
|
1051
|
-
{
|
|
1052
|
-
className: "ds-funnel-scaling__qual-block",
|
|
1053
|
-
variants: qualBlockLeft,
|
|
1054
|
-
initial: "hidden",
|
|
1055
|
-
animate: showQualification ? "show" : "hidden",
|
|
1056
|
-
children: "Reply Handling"
|
|
1057
|
-
}
|
|
1058
|
-
),
|
|
1059
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1060
|
-
framerMotion.motion.div,
|
|
1061
|
-
{
|
|
1062
|
-
className: "ds-funnel-scaling__qual-block",
|
|
1063
|
-
variants: qualBlockRight,
|
|
1064
|
-
initial: "hidden",
|
|
1065
|
-
animate: showQualification ? "show" : "hidden",
|
|
1066
|
-
children: "Follow-up Sequence"
|
|
1067
|
-
}
|
|
1068
|
-
)
|
|
1069
|
-
] })
|
|
1070
|
-
]
|
|
1071
|
-
}
|
|
1072
|
-
),
|
|
1073
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1074
|
-
framerMotion.motion.div,
|
|
1075
|
-
{
|
|
1076
|
-
className: "ds-funnel-scaling__funnel",
|
|
1077
|
-
variants: containerStagger,
|
|
1078
|
-
initial: "hidden",
|
|
1079
|
-
animate: showMapping ? "show" : "hidden",
|
|
1080
|
-
children: [
|
|
1081
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__funnel-header", children: "Sales Funnel Stages" }),
|
|
1082
|
-
FUNNEL_STAGES.map((stage) => {
|
|
1083
|
-
const isHighlight = stage.id === "evaluation" || stage.id === "intent";
|
|
1084
|
-
const isDim = showMapping && !isHighlight;
|
|
1085
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1086
|
-
framerMotion.motion.div,
|
|
1087
|
-
{
|
|
1088
|
-
className: clsx2__default.default(
|
|
1089
|
-
"ds-funnel-scaling__funnel-stage",
|
|
1090
|
-
isHighlight && showMapping && "ds-funnel-scaling__funnel-stage--highlight",
|
|
1091
|
-
isDim && "ds-funnel-scaling__funnel-stage--dim"
|
|
1092
|
-
),
|
|
1093
|
-
variants: funnelLayer,
|
|
1094
|
-
children: [
|
|
1095
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__funnel-num", children: stage.num }),
|
|
1096
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__funnel-label", children: stage.label })
|
|
1097
|
-
]
|
|
1098
|
-
},
|
|
1099
|
-
stage.id
|
|
1100
|
-
);
|
|
1101
|
-
})
|
|
1102
|
-
]
|
|
1103
|
-
}
|
|
1104
|
-
)
|
|
1105
|
-
] }),
|
|
1106
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1107
|
-
framerMotion.motion.div,
|
|
1108
|
-
{
|
|
1109
|
-
className: "ds-funnel-scaling__meeting",
|
|
1110
|
-
variants: fadeSlideUp,
|
|
1111
|
-
initial: "hidden",
|
|
1112
|
-
animate: showMeeting ? "show" : "hidden",
|
|
1113
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1114
|
-
framerMotion.motion.div,
|
|
1115
|
-
{
|
|
1116
|
-
variants: scalePulse,
|
|
1117
|
-
initial: "hidden",
|
|
1118
|
-
animate: showMeeting ? "show" : "hidden",
|
|
1119
|
-
style: { display: "flex", alignItems: "center", gap: "12px" },
|
|
1120
|
-
children: [
|
|
1121
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__meeting-icon", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }),
|
|
1122
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__meeting-label", children: "Meeting Booked" })
|
|
1123
|
-
]
|
|
1124
|
-
}
|
|
1125
|
-
)
|
|
1126
|
-
}
|
|
1127
|
-
),
|
|
1128
|
-
showMeeting && showMapping && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1129
|
-
framerMotion.motion.svg,
|
|
1130
|
-
{
|
|
1131
|
-
className: "ds-funnel-scaling__data-line",
|
|
1132
|
-
style: { right: 240, bottom: 80, width: 120, height: 200 },
|
|
1133
|
-
viewBox: "0 0 120 200",
|
|
1134
|
-
initial: { opacity: 0 },
|
|
1135
|
-
animate: { opacity: 0.4 },
|
|
1136
|
-
transition: { delay: 0.3, duration: 0.5 },
|
|
1137
|
-
children: [
|
|
1138
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1139
|
-
framerMotion.motion.path,
|
|
1140
|
-
{
|
|
1141
|
-
d: "M 0 200 C 20 150, 80 100, 120 40",
|
|
1142
|
-
stroke: "url(#fscFlowGrad)",
|
|
1143
|
-
strokeWidth: "1.5",
|
|
1144
|
-
fill: "none",
|
|
1145
|
-
strokeLinecap: "round",
|
|
1146
|
-
initial: { pathLength: 0 },
|
|
1147
|
-
animate: { pathLength: 1 },
|
|
1148
|
-
transition: { duration: 0.8, ease: EASE_PREMIUM, delay: 0.2 }
|
|
1149
|
-
}
|
|
1150
|
-
),
|
|
1151
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1152
|
-
framerMotion.motion.circle,
|
|
1153
|
-
{
|
|
1154
|
-
cx: "120",
|
|
1155
|
-
cy: "40",
|
|
1156
|
-
r: "3",
|
|
1157
|
-
fill: "var(--brand-pink)",
|
|
1158
|
-
initial: { opacity: 0, scale: 0 },
|
|
1159
|
-
animate: { opacity: 1, scale: 1 },
|
|
1160
|
-
transition: { delay: 1, duration: 0.3 }
|
|
1161
|
-
}
|
|
1162
|
-
)
|
|
1163
|
-
]
|
|
1164
|
-
}
|
|
1165
|
-
),
|
|
1166
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1167
|
-
framerMotion.motion.div,
|
|
1168
|
-
{
|
|
1169
|
-
className: "ds-funnel-scaling__scaling-panel",
|
|
1170
|
-
initial: { opacity: 0, y: 20 },
|
|
1171
|
-
animate: showScaling ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },
|
|
1172
|
-
transition: { duration: 0.5, ease: EASE_PREMIUM },
|
|
1173
|
-
children: [
|
|
1174
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__scaling-header", children: [
|
|
1175
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 1L11 6L6 11L1 6Z", stroke: "currentColor", strokeWidth: "1.2" }) }),
|
|
1176
|
-
"Scaling Mode"
|
|
1177
|
-
] }),
|
|
1178
|
-
SCALING_CHECKS.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1179
|
-
framerMotion.motion.div,
|
|
1180
|
-
{
|
|
1181
|
-
className: "ds-funnel-scaling__scaling-item",
|
|
1182
|
-
initial: { opacity: 0, x: -10 },
|
|
1183
|
-
animate: showScaling ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 },
|
|
1184
|
-
transition: { delay: 0.15 + i * 0.12, duration: 0.35, ease: EASE_PREMIUM },
|
|
1185
|
-
children: [
|
|
1186
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1187
|
-
framerMotion.motion.div,
|
|
1188
|
-
{
|
|
1189
|
-
initial: { scale: 0 },
|
|
1190
|
-
animate: showScaling ? { scale: 1 } : { scale: 0 },
|
|
1191
|
-
transition: { delay: 0.25 + i * 0.12, duration: 0.3, ease: EASE_PREMIUM },
|
|
1192
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
|
|
1193
|
-
}
|
|
1194
|
-
),
|
|
1195
|
-
item
|
|
1196
|
-
]
|
|
1197
|
-
},
|
|
1198
|
-
item
|
|
1199
|
-
))
|
|
1200
|
-
]
|
|
1201
|
-
}
|
|
1202
|
-
),
|
|
1203
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1204
|
-
framerMotion.motion.div,
|
|
1205
|
-
{
|
|
1206
|
-
className: "ds-funnel-scaling__ant",
|
|
1207
|
-
initial: { opacity: 0, x: -40, y: 100 },
|
|
1208
|
-
animate: showScaling ? { opacity: 1, x: 280, y: 60 } : showMapping ? { opacity: 1, x: 240, y: 160 } : showMeeting ? { opacity: 1, x: 400, y: 280 } : showQualification ? { opacity: 1, x: 380, y: 200 } : showFunnel ? { opacity: 1, x: 320, y: 40 } : showInit ? { opacity: 1, x: 220, y: 30 } : { opacity: 0, x: -40, y: 100 },
|
|
1209
|
-
transition: {
|
|
1210
|
-
duration: 0.8,
|
|
1211
|
-
ease: EASE_PREMIUM,
|
|
1212
|
-
opacity: { duration: 0.4 }
|
|
1213
|
-
},
|
|
1214
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(AntSVG, {})
|
|
1215
|
-
}
|
|
1216
|
-
)
|
|
1217
|
-
]
|
|
1218
|
-
}
|
|
1219
|
-
);
|
|
1220
|
-
};
|
|
1221
|
-
FunnelScalingSender.displayName = "FunnelScalingSender";
|
|
1222
|
-
|
|
1223
|
-
exports.CursorSpotlight = CursorSpotlight;
|
|
1224
|
-
exports.FunnelScalingSender = FunnelScalingSender;
|
|
1225
|
-
exports.MotionContainer = MotionContainer;
|
|
1226
|
-
exports.MotionText = MotionText;
|
|
1227
|
-
exports.RevenueAutomationLoop = RevenueAutomationLoop;
|
|
1228
|
-
exports.SpotlightCard = SpotlightCard;
|
|
9
|
+
Object.defineProperty(exports, "CursorSpotlight", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () { return chunkKNQEIU7O_cjs.CursorSpotlight; }
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "FunnelScalingSender", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return chunkKNQEIU7O_cjs.FunnelScalingSender; }
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "MotionContainer", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return chunkKNQEIU7O_cjs.MotionContainer; }
|
|
20
|
+
});
|
|
21
|
+
Object.defineProperty(exports, "MotionText", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return chunkKNQEIU7O_cjs.MotionText; }
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "RevenueAutomationLoop", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return chunkKNQEIU7O_cjs.RevenueAutomationLoop; }
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "SpotlightCard", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () { return chunkKNQEIU7O_cjs.SpotlightCard; }
|
|
32
|
+
});
|
|
1229
33
|
//# sourceMappingURL=out.js.map
|
|
1230
34
|
//# sourceMappingURL=index.cjs.map
|