@mdxui/named 6.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 +221 -0
- package/dist/components/index.js +1167 -0
- package/dist/components/index.js.map +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +1173 -0
- package/dist/index.js.map +1 -0
- package/dist/shared/index.d.ts +86 -0
- package/dist/shared/index.js +313 -0
- package/dist/shared/index.js.map +1 -0
- package/package.json +85 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,1173 @@
|
|
|
1
|
+
// src/components/hero/hero.tsx
|
|
2
|
+
import Image from "next/image";
|
|
3
|
+
import { HiChevronRight } from "react-icons/hi";
|
|
4
|
+
|
|
5
|
+
// src/shared/scroll-reveal/scroll-reveal.tsx
|
|
6
|
+
import { motion } from "motion/react";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
var directionVariants = {
|
|
9
|
+
up: {
|
|
10
|
+
hidden: { opacity: 0, y: 50 },
|
|
11
|
+
visible: { opacity: 1, y: 0 }
|
|
12
|
+
},
|
|
13
|
+
down: {
|
|
14
|
+
hidden: { opacity: 0, y: -50 },
|
|
15
|
+
visible: { opacity: 1, y: 0 }
|
|
16
|
+
},
|
|
17
|
+
left: {
|
|
18
|
+
hidden: { opacity: 0, x: -50 },
|
|
19
|
+
visible: { opacity: 1, x: 0 }
|
|
20
|
+
},
|
|
21
|
+
right: {
|
|
22
|
+
hidden: { opacity: 0, x: 50 },
|
|
23
|
+
visible: { opacity: 1, x: 0 }
|
|
24
|
+
},
|
|
25
|
+
none: {
|
|
26
|
+
hidden: { opacity: 0 },
|
|
27
|
+
visible: { opacity: 1 }
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
function ScrollReveal({
|
|
31
|
+
children,
|
|
32
|
+
className,
|
|
33
|
+
delay = 0,
|
|
34
|
+
direction = "up",
|
|
35
|
+
duration = 0.5,
|
|
36
|
+
trigger = "inView",
|
|
37
|
+
once = true,
|
|
38
|
+
margin = "-100px"
|
|
39
|
+
}) {
|
|
40
|
+
if (trigger === "mount") {
|
|
41
|
+
return /* @__PURE__ */ jsx(
|
|
42
|
+
motion.div,
|
|
43
|
+
{
|
|
44
|
+
initial: "hidden",
|
|
45
|
+
animate: "visible",
|
|
46
|
+
transition: { duration, delay, ease: "easeOut" },
|
|
47
|
+
variants: directionVariants[direction],
|
|
48
|
+
className,
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
return /* @__PURE__ */ jsx(
|
|
54
|
+
motion.div,
|
|
55
|
+
{
|
|
56
|
+
initial: "hidden",
|
|
57
|
+
whileInView: "visible",
|
|
58
|
+
viewport: { once, margin },
|
|
59
|
+
transition: { duration, delay, ease: "easeOut" },
|
|
60
|
+
variants: directionVariants[direction],
|
|
61
|
+
className,
|
|
62
|
+
children
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// src/lib/utils.ts
|
|
68
|
+
import { clsx } from "clsx";
|
|
69
|
+
import { twMerge } from "tailwind-merge";
|
|
70
|
+
function cn(...inputs) {
|
|
71
|
+
return twMerge(clsx(inputs));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// src/shared/marquee/marquee.tsx
|
|
75
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
76
|
+
function Marquee({
|
|
77
|
+
className,
|
|
78
|
+
reverse = false,
|
|
79
|
+
pauseOnHover = false,
|
|
80
|
+
children,
|
|
81
|
+
vertical = false,
|
|
82
|
+
repeat = 4,
|
|
83
|
+
...props
|
|
84
|
+
}) {
|
|
85
|
+
return /* @__PURE__ */ jsx2(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
...props,
|
|
89
|
+
className: cn(
|
|
90
|
+
"group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
|
|
91
|
+
{
|
|
92
|
+
"flex-row": !vertical,
|
|
93
|
+
"flex-col": vertical
|
|
94
|
+
},
|
|
95
|
+
className
|
|
96
|
+
),
|
|
97
|
+
children: Array(repeat).fill(0).map((_, i) => /* @__PURE__ */ jsx2(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
className: cn("flex shrink-0 justify-around [gap:var(--gap)]", {
|
|
101
|
+
"animate-marquee flex-row": !vertical,
|
|
102
|
+
"animate-marquee-vertical flex-col": vertical,
|
|
103
|
+
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
|
104
|
+
"[animation-direction:reverse]": reverse
|
|
105
|
+
}),
|
|
106
|
+
children
|
|
107
|
+
},
|
|
108
|
+
i
|
|
109
|
+
))
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// src/components/hero/hero.tsx
|
|
115
|
+
import { Button } from "@mdxui/primitives";
|
|
116
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
117
|
+
function Hero({
|
|
118
|
+
badgeEmoji = "",
|
|
119
|
+
badgeText = "Meet Priya",
|
|
120
|
+
badgeHref = "#",
|
|
121
|
+
heading = "Your AI Product Manager for GitHub",
|
|
122
|
+
description = "Priya triages issues, plans sprints, and grooms your backlog automatically. You focus on building.",
|
|
123
|
+
ctaText = "Get Started",
|
|
124
|
+
ctaHref = "#pricing",
|
|
125
|
+
ctaVariant = "default",
|
|
126
|
+
rightImageSrc = "/images/hero/hero-main.png",
|
|
127
|
+
rightImageAlt = "Portfolio showcase",
|
|
128
|
+
rightImageSizes = "(max-width: 768px) 100vw, 500px",
|
|
129
|
+
showIconOverlay: _showIconOverlay = true,
|
|
130
|
+
marqueeTitle = "Tools I work with",
|
|
131
|
+
marqueeImages = Array.from({ length: 12 }).map(
|
|
132
|
+
() => "https://zapier-images.imgix.net/storage/services/c63f7c57dc0afb733535a5adccce4d01.png?auto=format&fit=crop&ixlib=react-9.10.0&q=50&w=60&h=60&dpr=2"
|
|
133
|
+
),
|
|
134
|
+
className
|
|
135
|
+
}) {
|
|
136
|
+
return /* @__PURE__ */ jsx3("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--color-bg-secondary,#f9f7f6)_0%,rgba(247,244,242,0)_83.55%)]", children: [
|
|
137
|
+
/* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-8 lg:gap-16 items-start mb-16 lg:mb-20", children: [
|
|
138
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-6 lg:pt-8", children: [
|
|
139
|
+
/* @__PURE__ */ jsx3(ScrollReveal, { direction: "down", delay: 0.1, children: /* @__PURE__ */ jsx3("div", { className: "inline-block", children: /* @__PURE__ */ jsxs(
|
|
140
|
+
"a",
|
|
141
|
+
{
|
|
142
|
+
href: badgeHref,
|
|
143
|
+
target: "_blank",
|
|
144
|
+
rel: "noopener noreferrer",
|
|
145
|
+
className: "inline-flex items-center gap-2.5 px-4 py-2 rounded-full transition-colors border border-black/10 bg-(--color-btn-white)",
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx3("span", { className: "text-base", children: badgeEmoji }),
|
|
148
|
+
/* @__PURE__ */ jsx3("p", { className: "font-normal text-sm tracking-wide leading-snug text-(--color-text-dark) uppercase", children: badgeText })
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
) }) }),
|
|
152
|
+
/* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx3("h1", { className: "font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-(--color-text-dark) font-halant", children: heading }) }),
|
|
153
|
+
/* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx3("p", { className: "text-lg leading-relaxed max-w-lg", children: description }) }),
|
|
154
|
+
/* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: /* @__PURE__ */ jsx3(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
|
|
155
|
+
ctaText,
|
|
156
|
+
/* @__PURE__ */ jsx3(HiChevronRight, { className: "w-4 h-4" })
|
|
157
|
+
] }) }) }) })
|
|
158
|
+
] }),
|
|
159
|
+
/* @__PURE__ */ jsx3(ScrollReveal, { direction: "right", delay: 0.2, children: /* @__PURE__ */ jsx3("div", { className: "relative flex justify-center lg:justify-end", children: /* @__PURE__ */ jsx3("div", { className: "relative w-full max-w-lg", children: /* @__PURE__ */ jsx3("div", { className: "relative w-full aspect-square", children: /* @__PURE__ */ jsx3(
|
|
160
|
+
Image,
|
|
161
|
+
{
|
|
162
|
+
src: rightImageSrc,
|
|
163
|
+
alt: rightImageAlt,
|
|
164
|
+
fill: true,
|
|
165
|
+
className: "object-cover object-left-center",
|
|
166
|
+
style: { borderRadius: "var(--radius-image)" },
|
|
167
|
+
priority: true,
|
|
168
|
+
sizes: rightImageSizes
|
|
169
|
+
}
|
|
170
|
+
) }) }) }) })
|
|
171
|
+
] }),
|
|
172
|
+
/* @__PURE__ */ jsxs(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: [
|
|
173
|
+
/* @__PURE__ */ jsx3("div", { className: "mt-12", children: /* @__PURE__ */ jsx3("p", { className: "text-base text-(--color-text-muted) text-center", children: marqueeTitle }) }),
|
|
174
|
+
/* @__PURE__ */ jsxs("div", { className: "relative mt-4 sm:mt-6", children: [
|
|
175
|
+
/* @__PURE__ */ jsx3(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
className: "pointer-events-none absolute inset-y-0 left-0 w-20 sm:w-28 z-10",
|
|
179
|
+
style: { background: "linear-gradient(to right, var(--color-bg-light), transparent)" }
|
|
180
|
+
}
|
|
181
|
+
),
|
|
182
|
+
/* @__PURE__ */ jsx3(
|
|
183
|
+
"div",
|
|
184
|
+
{
|
|
185
|
+
className: "pointer-events-none absolute inset-y-0 right-0 w-20 sm:w-28 z-10",
|
|
186
|
+
style: { background: "linear-gradient(to left, var(--color-bg-light), transparent)" }
|
|
187
|
+
}
|
|
188
|
+
),
|
|
189
|
+
/* @__PURE__ */ jsx3(Marquee, { className: "relative z-0 py-2 [--gap:1.25rem] sm:[--gap:3rem]", children: marqueeImages.map((src, i) => /* @__PURE__ */ jsx3("img", { src, alt: "Placeholder", className: "h-16 w-16 rounded-xl bg-white/50 p-2" }, `${src}-${i}`)) })
|
|
190
|
+
] })
|
|
191
|
+
] })
|
|
192
|
+
] }) });
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// src/components/features/features.tsx
|
|
196
|
+
import { CheckCircle } from "lucide-react";
|
|
197
|
+
|
|
198
|
+
// src/shared/code-window/code-window.tsx
|
|
199
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
200
|
+
function CodeWindow({ code, className }) {
|
|
201
|
+
const highlightCode = (code2) => {
|
|
202
|
+
const lines = code2.split("\n");
|
|
203
|
+
const result = [];
|
|
204
|
+
let prevWasComment = false;
|
|
205
|
+
let prevWasCode = false;
|
|
206
|
+
for (let i = 0; i < lines.length; i++) {
|
|
207
|
+
const line = lines[i];
|
|
208
|
+
const isComment = line.trim().startsWith("//");
|
|
209
|
+
const isEmpty = line.trim() === "";
|
|
210
|
+
const isCode = !isComment && !isEmpty;
|
|
211
|
+
if (isComment && prevWasCode) {
|
|
212
|
+
result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, `space-before-${i}`));
|
|
213
|
+
}
|
|
214
|
+
if (prevWasComment && isCode) {
|
|
215
|
+
result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, `space-after-${i}`));
|
|
216
|
+
}
|
|
217
|
+
if (isEmpty) {
|
|
218
|
+
result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, i));
|
|
219
|
+
prevWasComment = false;
|
|
220
|
+
prevWasCode = false;
|
|
221
|
+
continue;
|
|
222
|
+
}
|
|
223
|
+
if (isComment) {
|
|
224
|
+
result.push(
|
|
225
|
+
/* @__PURE__ */ jsx4("div", { className: "text-[#7d8590]", children: line }, i)
|
|
226
|
+
);
|
|
227
|
+
prevWasComment = true;
|
|
228
|
+
prevWasCode = false;
|
|
229
|
+
continue;
|
|
230
|
+
}
|
|
231
|
+
let highlighted = line;
|
|
232
|
+
highlighted = highlighted.replace(
|
|
233
|
+
/\$\.(\w+)\.(\w+)/g,
|
|
234
|
+
'<span class="text-[#79c0ff]">$</span>.<span class="text-[#d2a8ff]">$1</span>.<span class="text-[#ffa657]">$2</span>'
|
|
235
|
+
);
|
|
236
|
+
highlighted = highlighted.replace(/(\w+):/g, '<span class="text-[#79c0ff]">$1</span>:');
|
|
237
|
+
highlighted = highlighted.replace(/'([^']*)'/g, `<span class="text-[#a5d6ff]">'$1'</span>`);
|
|
238
|
+
highlighted = highlighted.replace(/\b(\d+)\b/g, '<span class="text-[#79c0ff]">$1</span>');
|
|
239
|
+
result.push(/* @__PURE__ */ jsx4("div", { dangerouslySetInnerHTML: { __html: highlighted } }, i));
|
|
240
|
+
prevWasComment = false;
|
|
241
|
+
prevWasCode = true;
|
|
242
|
+
}
|
|
243
|
+
return result;
|
|
244
|
+
};
|
|
245
|
+
return /* @__PURE__ */ jsx4("div", { className: `w-full h-full bg-[#0d1117] rounded-lg overflow-hidden ${className ?? ""}`, children: /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-auto p-6 lg:p-8", children: /* @__PURE__ */ jsx4("pre", { className: "text-sm lg:text-sm leading-relaxed font-mono text-[#e6edf3]", children: highlightCode(code) }) }) });
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// src/components/features/features.tsx
|
|
249
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
250
|
+
var defaultFeatures = [
|
|
251
|
+
{
|
|
252
|
+
title: "Automatic Issue Triage",
|
|
253
|
+
description: "Every new issue gets analyzed, labeled, prioritized, and assigned to the right person\u2014automatically in seconds.",
|
|
254
|
+
items: [{ text: "Smart labels based on content" }, { text: "Priority using impact + urgency" }, { text: "Auto-assigned to right person" }],
|
|
255
|
+
code: `// New issue arrives
|
|
256
|
+
$.Priya.triage({
|
|
257
|
+
issue: '#347'
|
|
258
|
+
})
|
|
259
|
+
|
|
260
|
+
// Priya handles everything:
|
|
261
|
+
// \u2192 Reads issue content
|
|
262
|
+
// \u2192 Applies correct labels
|
|
263
|
+
// \u2192 Sets priority level
|
|
264
|
+
// \u2192 Assigns to team member
|
|
265
|
+
// \u2192 Adds to project board`,
|
|
266
|
+
badge: "01"
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
title: "Sprint Planning",
|
|
270
|
+
description: "Priya reviews your backlog, calculates what your team can handle, and builds the sprint for you.",
|
|
271
|
+
items: [{ text: "Capacity based on team velocity" }, { text: "Best issues selected automatically" }, { text: "Sprint board ready to go" }],
|
|
272
|
+
code: `// Sprint planning day
|
|
273
|
+
$.Priya.planSprint({
|
|
274
|
+
capacity: 40,
|
|
275
|
+
startDate: 'Monday'
|
|
276
|
+
})
|
|
277
|
+
|
|
278
|
+
// Priya prepares:
|
|
279
|
+
// \u2192 Reviews all backlog items
|
|
280
|
+
// \u2192 Calculates team velocity
|
|
281
|
+
// \u2192 Selects optimal issues
|
|
282
|
+
// \u2192 Organizes sprint board
|
|
283
|
+
// \u2192 Notifies team`,
|
|
284
|
+
badge: "02"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
title: "Backlog Grooming",
|
|
288
|
+
description: "Your backlog stays healthy automatically\u2014prioritized, organized, and actionable.",
|
|
289
|
+
items: [{ text: "Always prioritized correctly" }, { text: "No more zombie issues" }, { text: "Epics become user stories" }],
|
|
290
|
+
code: `// Runs continuously
|
|
291
|
+
$.Priya.groomBacklog({
|
|
292
|
+
framework: 'RICE'
|
|
293
|
+
})
|
|
294
|
+
|
|
295
|
+
// Priya maintains:
|
|
296
|
+
// \u2192 Applies RICE scoring
|
|
297
|
+
// \u2192 Closes stale issues
|
|
298
|
+
// \u2192 Breaks down epics
|
|
299
|
+
// \u2192 Updates priorities
|
|
300
|
+
// \u2192 Tracks dependencies`,
|
|
301
|
+
badge: "03"
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
title: "Status Reports",
|
|
305
|
+
description: "Weekly progress reports generated and shared automatically. No more manual updates.",
|
|
306
|
+
items: [{ text: "Automatic progress tracking" }, { text: "Blockers surfaced early" }, { text: "Team stays informed" }],
|
|
307
|
+
code: `// Every Friday
|
|
308
|
+
$.Priya.statusReport({
|
|
309
|
+
period: 'week'
|
|
310
|
+
})
|
|
311
|
+
|
|
312
|
+
// Priya reports:
|
|
313
|
+
// \u2192 Issues closed
|
|
314
|
+
// \u2192 PRs merged
|
|
315
|
+
// \u2192 Sprint progress
|
|
316
|
+
// \u2192 Blockers identified
|
|
317
|
+
// \u2192 Shares with team`,
|
|
318
|
+
badge: "04"
|
|
319
|
+
}
|
|
320
|
+
];
|
|
321
|
+
function Features({ heading = "How It Works", description = "Priya handles the repetitive work so you can focus on what matters. Here's how she automates your entire product workflow.", features = defaultFeatures, className }) {
|
|
322
|
+
return /* @__PURE__ */ jsx5("section", { id: "features", className: cn("flex justify-center items-center pb-0 md:pb-10 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsxs2("div", { className: "features-gradient flex flex-col items-center w-full relative overflow-visible rounded-[36px] gap-16 h-min max-w-[1400px] py-10 sm:py-20", children: [
|
|
323
|
+
/* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "text-center w-full px-4 md:px-6 space-y-4", children: [
|
|
324
|
+
/* @__PURE__ */ jsx5("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) font-halant", children: heading }),
|
|
325
|
+
/* @__PURE__ */ jsx5("p", { className: "text-base md:text-lg text-(--color-text-muted) max-w-2xl mx-auto", children: description })
|
|
326
|
+
] }) }),
|
|
327
|
+
/* @__PURE__ */ jsx5("div", { className: "w-full px-4 lg:px-18 space-y-10", children: features.map((feature, index) => /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: index * 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "grid md:grid-cols-2 overflow-hidden bg-(--color-bg-cream) w-full rounded-3xl feature-card-shadow opacity-100 border border-black/5", children: [
|
|
328
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", children: [
|
|
329
|
+
/* @__PURE__ */ jsx5("div", { className: "mb-4", children: /* @__PURE__ */ jsx5("span", { className: "inline-flex size-10 items-center justify-center rounded-lg font-mono text-sm font-medium bg-white dark:bg-white/10 border border-black/10 dark:border-white/20 text-(--color-text-dark)", children: feature.badge }) }),
|
|
330
|
+
/* @__PURE__ */ jsx5("h3", { className: "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl text-(--color-text-dark)", children: feature.title }),
|
|
331
|
+
/* @__PURE__ */ jsx5("div", { className: "mb-8 text-sm sm:mb-10 md:text-base text-(--color-text-muted)", children: feature.description }),
|
|
332
|
+
/* @__PURE__ */ jsx5("ul", { className: "space-y-2 sm:space-y-3", children: feature.items.map((item, itemIndex) => /* @__PURE__ */ jsxs2("li", { className: "flex gap-x-3 items-start", children: [
|
|
333
|
+
/* @__PURE__ */ jsx5(CheckCircle, { className: "mt-1 size-4 shrink-0 text-(--color-teal-dark)" }),
|
|
334
|
+
/* @__PURE__ */ jsx5("p", { className: "text-sm md:text-base text-(--color-text-dark)", children: item.text })
|
|
335
|
+
] }, itemIndex)) })
|
|
336
|
+
] }),
|
|
337
|
+
/* @__PURE__ */ jsx5("div", { className: "relative order-last md:order-last h-96 md:h-[500px] p-4 md:p-8 lg:p-10", children: /* @__PURE__ */ jsx5(CodeWindow, { code: feature.code }) })
|
|
338
|
+
] }) }, index)) })
|
|
339
|
+
] }) });
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// src/components/pricing/pricing.tsx
|
|
343
|
+
import { Check } from "lucide-react";
|
|
344
|
+
import { Button as Button2 } from "@mdxui/primitives";
|
|
345
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
346
|
+
var defaultFeatures2 = [
|
|
347
|
+
{ text: "Automated backups" },
|
|
348
|
+
{ text: "24/7 support" },
|
|
349
|
+
{ text: "Unlimited projects" },
|
|
350
|
+
{ text: "Unlimited users" },
|
|
351
|
+
{ text: "Custom domain" },
|
|
352
|
+
{ text: "Custom branding" },
|
|
353
|
+
{ text: "Advanced analytics" },
|
|
354
|
+
{ text: "Custom permissions" },
|
|
355
|
+
{ text: "Advanced reports" }
|
|
356
|
+
];
|
|
357
|
+
function Pricing({
|
|
358
|
+
heading = "Simple, transparent pricing",
|
|
359
|
+
subheading = "Start automating your product workflow in minutes. No credit card required to get started.",
|
|
360
|
+
price = "$16",
|
|
361
|
+
priceUnit = "/ month",
|
|
362
|
+
trialText = "With a 7-day free trial",
|
|
363
|
+
ctaText = "Get Started",
|
|
364
|
+
ctaHref = "#contact",
|
|
365
|
+
featuresHeading = "What's included",
|
|
366
|
+
features = defaultFeatures2,
|
|
367
|
+
backgroundColor = "bg-(--color-bg-light)",
|
|
368
|
+
securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
|
|
369
|
+
className
|
|
370
|
+
}) {
|
|
371
|
+
return /* @__PURE__ */ jsx6("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
|
|
372
|
+
/* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs3("div", { className: "text-center my-16 sm:my-12", children: [
|
|
373
|
+
/* @__PURE__ */ jsx6("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }),
|
|
374
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
|
|
375
|
+
] }) }),
|
|
376
|
+
/* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs3("div", { className: "bg-(--color-bg-cream) mx-auto flex w-full md:max-w-md lg:max-w-3xl flex-col rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow p-6 md:p-8 px-6", children: [
|
|
377
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
|
|
378
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex justify-start sm:justify-center items-baseline", children: [
|
|
379
|
+
/* @__PURE__ */ jsx6("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: price }),
|
|
380
|
+
/* @__PURE__ */ jsx6("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: priceUnit })
|
|
381
|
+
] }),
|
|
382
|
+
trialText && /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-(--color-text-muted) mt-3 text-sm", children: trialText }),
|
|
383
|
+
/* @__PURE__ */ jsx6(Button2, { asChild: true, variant: "default", className: "mt-5 w-full md:w-64", children: /* @__PURE__ */ jsx6("a", { href: ctaHref, children: ctaText }) })
|
|
384
|
+
] }),
|
|
385
|
+
/* @__PURE__ */ jsxs3("div", { className: "mt-8", children: [
|
|
386
|
+
/* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-lg font-semibold text-(--color-text-dark) mb-4", children: featuresHeading }),
|
|
387
|
+
/* @__PURE__ */ jsx6("ul", { className: "grid gap-y-3 gap-x-6 md:grid-cols-2 lg:grid-cols-3 ", children: features.map((feature, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start text-left", children: [
|
|
388
|
+
/* @__PURE__ */ jsx6(Check, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
|
|
389
|
+
/* @__PURE__ */ jsx6("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
|
|
390
|
+
] }, index)) })
|
|
391
|
+
] })
|
|
392
|
+
] }) }),
|
|
393
|
+
securityNote && /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx6("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-(--color-text-muted)", children: [
|
|
394
|
+
/* @__PURE__ */ jsx6("strong", { children: "Your code stays private." }),
|
|
395
|
+
" ",
|
|
396
|
+
securityNote
|
|
397
|
+
] }) }) })
|
|
398
|
+
] }) });
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// src/components/pricing/pricing-tiers.tsx
|
|
402
|
+
import { Check as Check2 } from "lucide-react";
|
|
403
|
+
import Image2 from "next/image";
|
|
404
|
+
import { Button as Button3 } from "@mdxui/primitives";
|
|
405
|
+
import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
406
|
+
var defaultTiers = [
|
|
407
|
+
{
|
|
408
|
+
title: "Business",
|
|
409
|
+
description: "For growing teams that need more power and priority support.",
|
|
410
|
+
price: "$299",
|
|
411
|
+
priceUnit: "/ month",
|
|
412
|
+
ctaText: "Get Started",
|
|
413
|
+
ctaVariant: "primary",
|
|
414
|
+
ctaHref: "#contact",
|
|
415
|
+
features: [
|
|
416
|
+
{ text: "Unlimited repositories" },
|
|
417
|
+
{ text: "Unlimited issues & projects" },
|
|
418
|
+
{ text: "Unlimited team members" },
|
|
419
|
+
{ text: "Priority support" },
|
|
420
|
+
{ text: "Custom workflows" },
|
|
421
|
+
{ text: "Advanced analytics" }
|
|
422
|
+
],
|
|
423
|
+
image: "/images/hero/hero-main.png",
|
|
424
|
+
imageAlt: "Business Plan",
|
|
425
|
+
featured: true
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
title: "Team",
|
|
429
|
+
description: "Perfect for small teams getting started with AI product management.",
|
|
430
|
+
price: "$99",
|
|
431
|
+
priceUnit: "/ month",
|
|
432
|
+
ctaText: "Get Started",
|
|
433
|
+
ctaVariant: "secondary",
|
|
434
|
+
ctaHref: "#contact",
|
|
435
|
+
features: [{ text: "Up to 10 repositories" }, { text: "Unlimited issues & projects" }, { text: "Unlimited team members" }, { text: "Email support" }],
|
|
436
|
+
featured: false
|
|
437
|
+
}
|
|
438
|
+
];
|
|
439
|
+
function PricingTiers({
|
|
440
|
+
heading = "Simple, transparent pricing",
|
|
441
|
+
subheading = "Start automating your product workflow in minutes. No credit card required to get started.",
|
|
442
|
+
tiers = defaultTiers,
|
|
443
|
+
backgroundColor = "bg-(--color-bg-light)",
|
|
444
|
+
securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
|
|
445
|
+
className
|
|
446
|
+
}) {
|
|
447
|
+
return /* @__PURE__ */ jsx7("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
|
|
448
|
+
/* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs4("div", { className: "text-center my-16 sm:my-12", children: [
|
|
449
|
+
/* @__PURE__ */ jsx7("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }),
|
|
450
|
+
/* @__PURE__ */ jsx7("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
|
|
451
|
+
] }) }),
|
|
452
|
+
/* @__PURE__ */ jsx7("ul", { className: "grid gap-6 lg:grid-cols-3 lg:items-stretch", children: tiers.map((tier, index) => /* @__PURE__ */ jsx7("li", { className: tier.featured ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx7(
|
|
453
|
+
"div",
|
|
454
|
+
{
|
|
455
|
+
className: tier.featured ? "bg-(--color-bg-cream) flex w-full h-full flex-col-reverse rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow md:flex-row" : "bg-(--color-bg-cream) w-full h-full rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow p-6 md:p-8",
|
|
456
|
+
children: tier.featured ? /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
457
|
+
tier.image && /* @__PURE__ */ jsx7("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx7("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx7(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
|
|
458
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex flex-col p-6 md:p-8 xl:w-1/2", children: [
|
|
459
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
|
|
460
|
+
/* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-(--color-text-dark)", children: tier.title }),
|
|
461
|
+
/* @__PURE__ */ jsx7("p", { className: "text-(--color-text-muted) mt-3", children: tier.description }),
|
|
462
|
+
/* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
|
|
463
|
+
/* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: tier.price }),
|
|
464
|
+
/* @__PURE__ */ jsx7("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: tier.priceUnit })
|
|
465
|
+
] }),
|
|
466
|
+
/* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) })
|
|
467
|
+
] }),
|
|
468
|
+
/* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
|
|
469
|
+
/* @__PURE__ */ jsx7(Check2, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
|
|
470
|
+
/* @__PURE__ */ jsx7("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
|
|
471
|
+
] }, featureIndex)) }) })
|
|
472
|
+
] })
|
|
473
|
+
] }) : /* @__PURE__ */ jsx7("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxs4("div", { children: [
|
|
474
|
+
/* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-(--color-text-dark)", children: tier.title }),
|
|
475
|
+
/* @__PURE__ */ jsx7("p", { className: "text-(--color-text-muted) mt-3", children: tier.description }),
|
|
476
|
+
/* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
|
|
477
|
+
/* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: tier.price }),
|
|
478
|
+
/* @__PURE__ */ jsx7("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: tier.priceUnit })
|
|
479
|
+
] }),
|
|
480
|
+
/* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }),
|
|
481
|
+
/* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
|
|
482
|
+
/* @__PURE__ */ jsx7(Check2, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
|
|
483
|
+
/* @__PURE__ */ jsx7("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
|
|
484
|
+
] }, featureIndex)) }) })
|
|
485
|
+
] }) })
|
|
486
|
+
}
|
|
487
|
+
) }) }, index)) }),
|
|
488
|
+
securityNote && /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.4, children: /* @__PURE__ */ jsx7("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-(--color-text-muted)", children: [
|
|
489
|
+
/* @__PURE__ */ jsx7("strong", { children: "Your code stays private." }),
|
|
490
|
+
" ",
|
|
491
|
+
securityNote
|
|
492
|
+
] }) }) })
|
|
493
|
+
] }) });
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
// src/components/cta/cta.tsx
|
|
497
|
+
import { HiArrowRight } from "react-icons/hi";
|
|
498
|
+
import { Button as Button4 } from "@mdxui/primitives";
|
|
499
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
500
|
+
var defaultButtons = [
|
|
501
|
+
{
|
|
502
|
+
text: "Get Started",
|
|
503
|
+
href: "#pricing",
|
|
504
|
+
variant: "primary",
|
|
505
|
+
showArrow: true
|
|
506
|
+
}
|
|
507
|
+
];
|
|
508
|
+
var backgroundColorMap = {
|
|
509
|
+
light: "bg-(--color-btn-white)",
|
|
510
|
+
blue: "bg-(--color-blue-light)",
|
|
511
|
+
green: "bg-(--color-green-light)",
|
|
512
|
+
purple: "bg-(--color-purple-light)",
|
|
513
|
+
orange: "bg-(--color-orange-light)"
|
|
514
|
+
};
|
|
515
|
+
function CTA({ heading = "Ready to Save 15 Hours Per Week?", subheading = "Setup with Github \u2013 takes 5 minutes.", buttons = defaultButtons, backgroundColor = "blue", className }) {
|
|
516
|
+
const bgClass = backgroundColorMap[backgroundColor];
|
|
517
|
+
return /* @__PURE__ */ jsx8("section", { className: cn(`py-20 md:py-32 px-4 md:px-6 ${bgClass}`, className), children: /* @__PURE__ */ jsx8("div", { className: "max-w-3xl mx-auto text-center", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
|
|
518
|
+
/* @__PURE__ */ jsx8("h2", { className: "font-normal text-(--color-text-dark) text-[clamp(32px,5vw,52px)] leading-tight tracking-tight font-halant", children: heading }),
|
|
519
|
+
/* @__PURE__ */ jsx8("p", { className: "max-w-2xl mx-auto text-[clamp(16px,2vw,18px)] leading-relaxed text-(--color-text-muted)", children: subheading }),
|
|
520
|
+
/* @__PURE__ */ jsx8("div", { className: "flex flex-col sm:flex-row gap-3 justify-center items-center pt-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx8(Button4, { asChild: true, variant: button.variant === "primary" ? "default" : "secondary", children: /* @__PURE__ */ jsxs5("a", { href: button.href, children: [
|
|
521
|
+
button.text,
|
|
522
|
+
button.showArrow && /* @__PURE__ */ jsx8(HiArrowRight, { className: "w-4 h-4" })
|
|
523
|
+
] }) }, index)) })
|
|
524
|
+
] }) }) }) });
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
// src/components/faq/faq.tsx
|
|
528
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@mdxui/primitives";
|
|
529
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
530
|
+
var defaultFaqs = [
|
|
531
|
+
{
|
|
532
|
+
question: "How do I get started?",
|
|
533
|
+
answer: "Choose your plan, connect your GitHub account, and Priya starts working. Setup takes 5 minutes."
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
question: "Does it work with private repos?",
|
|
537
|
+
answer: "Yes, both plans work with private and public repositories."
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
question: "What if it makes a mistake?",
|
|
541
|
+
answer: "You can override any decision. Priya learns from your corrections."
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
question: "Can I switch plans later?",
|
|
545
|
+
answer: "Yes, upgrade or downgrade anytime. Changes take effect immediately."
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
question: "What about Enterprise?",
|
|
549
|
+
answer: "Contact us for custom solutions tailored to your organization's needs, including dedicated support, custom workflows, and enterprise-grade SLAs."
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
question: "Is Priya SOC 2 and HIPAA compliant?",
|
|
553
|
+
answer: "Yes, Priya is SOC 2 Type II certified and HIPAA compliant, ensuring your data is handled with the highest security and privacy standards."
|
|
554
|
+
}
|
|
555
|
+
];
|
|
556
|
+
function FAQ({ heading = "FAQs", faqs = defaultFaqs, backgroundColor = "bg-(--color-bg-light)", className }) {
|
|
557
|
+
return /* @__PURE__ */ jsx9("section", { id: "faq", className: cn(`py-20 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl mx-auto", children: [
|
|
558
|
+
/* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx9("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsx9("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }) }) }),
|
|
559
|
+
/* @__PURE__ */ jsx9(Accordion, { type: "single", collapsible: true, className: "space-y-4", children: faqs.map((faq, index) => /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.15 + index * 0.05, children: /* @__PURE__ */ jsxs6(AccordionItem, { value: `item-${index}`, className: "rounded-xl px-6 border border-black/5 bg-(--color-btn-white) card-shadow/50", children: [
|
|
560
|
+
/* @__PURE__ */ jsx9(AccordionTrigger, { className: "hover:no-underline py-5 text-base font-medium text-(--color-text-dark)", children: faq.question }),
|
|
561
|
+
/* @__PURE__ */ jsx9(AccordionContent, { className: "pb-5 text-sm text-(--color-text-dark)/70 leading-relaxed", children: faq.answer })
|
|
562
|
+
] }) }, index)) })
|
|
563
|
+
] }) });
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
// src/components/problem/problem.tsx
|
|
567
|
+
import { FaInbox, FaCalendarAlt, FaListUl, FaFileAlt, FaRocket, FaProjectDiagram, FaBug, FaLightbulb } from "react-icons/fa";
|
|
568
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
569
|
+
var defaultWorkflows = [
|
|
570
|
+
{ icon: FaInbox, label: "Issue triage" },
|
|
571
|
+
{ icon: FaCalendarAlt, label: "Sprint planning" },
|
|
572
|
+
{ icon: FaListUl, label: "Backlog grooming" },
|
|
573
|
+
{ icon: FaFileAlt, label: "Status updates" },
|
|
574
|
+
{ icon: FaRocket, label: "Release planning" },
|
|
575
|
+
{ icon: FaProjectDiagram, label: "Dependency tracking" },
|
|
576
|
+
{ icon: FaBug, label: "Bug prioritization" },
|
|
577
|
+
{ icon: FaLightbulb, label: "Feature requests" }
|
|
578
|
+
];
|
|
579
|
+
function Problem({
|
|
580
|
+
heading: _heading = "Product managers <strong>spend 15+ hours</strong> per week on busywork",
|
|
581
|
+
workflows = defaultWorkflows,
|
|
582
|
+
subheading = "What if all of that just... ",
|
|
583
|
+
subheadingHighlight = "happened automatically?",
|
|
584
|
+
highlightColor = "bg-(--color-green-light)",
|
|
585
|
+
marqueeDuration = "30s",
|
|
586
|
+
marqueeGap = "0.5rem",
|
|
587
|
+
backgroundColor = "bg-(--color-bg-light)",
|
|
588
|
+
className
|
|
589
|
+
}) {
|
|
590
|
+
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: [
|
|
591
|
+
/* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs7("h2", { className: "font-normal text-[clamp(36px,4vw,40px)] leading-tight text-(--color-text-dark)", children: [
|
|
592
|
+
/* @__PURE__ */ jsx10("span", { className: "block md:inline", children: "Product managers" }),
|
|
593
|
+
" ",
|
|
594
|
+
/* @__PURE__ */ jsx10("span", { className: "block md:inline", children: /* @__PURE__ */ jsx10("strong", { children: "spend 15+ hours" }) }),
|
|
595
|
+
" ",
|
|
596
|
+
/* @__PURE__ */ jsx10("span", { className: "block md:inline", children: "per week on busywork" })
|
|
597
|
+
] }) }),
|
|
598
|
+
/* @__PURE__ */ jsx10(ScrollReveal, { direction: "none", delay: 0.2, children: /* @__PURE__ */ jsxs7("div", { className: "relative py-6", children: [
|
|
599
|
+
/* @__PURE__ */ jsx10("div", { className: "absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-(--color-bg-light) to-transparent z-10 pointer-events-none" }),
|
|
600
|
+
/* @__PURE__ */ jsx10("div", { className: "absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-(--color-bg-light) to-transparent z-10 pointer-events-none" }),
|
|
601
|
+
/* @__PURE__ */ jsx10(
|
|
602
|
+
Marquee,
|
|
603
|
+
{
|
|
604
|
+
className: "[--duration:30s] [--gap:0.5rem]",
|
|
605
|
+
style: {
|
|
606
|
+
"--duration": marqueeDuration,
|
|
607
|
+
"--gap": marqueeGap
|
|
608
|
+
},
|
|
609
|
+
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-(--color-bg-cream) border border-(--color-text-dark)/10 rounded-full", children: [
|
|
610
|
+
/* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-(--color-bg-light)", children: /* @__PURE__ */ jsx10(workflow.icon, { className: "w-3.5 h-3.5 text-(--color-text-dark)" }) }),
|
|
611
|
+
/* @__PURE__ */ jsx10("span", { className: "text-sm text-(--color-text-dark) whitespace-nowrap", children: workflow.label })
|
|
612
|
+
] }, index))
|
|
613
|
+
}
|
|
614
|
+
)
|
|
615
|
+
] }) }),
|
|
616
|
+
/* @__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-(--color-text-dark)", children: [
|
|
617
|
+
subheading,
|
|
618
|
+
/* @__PURE__ */ jsxs7("span", { className: "relative inline-block", children: [
|
|
619
|
+
/* @__PURE__ */ jsx10("span", { className: "relative z-10", children: subheadingHighlight }),
|
|
620
|
+
/* @__PURE__ */ jsx10("span", { className: `absolute bottom-1 left-0 w-full h-3 ${highlightColor} opacity-30 -rotate-1` })
|
|
621
|
+
] })
|
|
622
|
+
] }) }) })
|
|
623
|
+
] }) }) });
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// src/components/navigation/navigation.tsx
|
|
627
|
+
import { useState, useEffect } from "react";
|
|
628
|
+
import Link from "next/link";
|
|
629
|
+
import { Menu, X } from "lucide-react";
|
|
630
|
+
import { motion as motion2, AnimatePresence } from "motion/react";
|
|
631
|
+
import { Button as Button5 } from "@mdxui/primitives";
|
|
632
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
633
|
+
function Navigation({
|
|
634
|
+
logo = "Priya",
|
|
635
|
+
logoHref = "/",
|
|
636
|
+
links = [
|
|
637
|
+
{ label: "Features", href: "#features" },
|
|
638
|
+
{ label: "Pricing", href: "#pricing" },
|
|
639
|
+
{ label: "FAQ", href: "#faq" }
|
|
640
|
+
],
|
|
641
|
+
ctaText = "Hire me",
|
|
642
|
+
ctaHref = "#pricing",
|
|
643
|
+
ctaVariant = "secondary",
|
|
644
|
+
className,
|
|
645
|
+
maxWidth = "7xl",
|
|
646
|
+
sticky = true,
|
|
647
|
+
showScrollEffect = true
|
|
648
|
+
}) {
|
|
649
|
+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
650
|
+
const [isScrolled, setIsScrolled] = useState(false);
|
|
651
|
+
useEffect(() => {
|
|
652
|
+
if (!showScrollEffect) return;
|
|
653
|
+
const handleScroll = () => {
|
|
654
|
+
setIsScrolled(window.scrollY > 10);
|
|
655
|
+
};
|
|
656
|
+
window.addEventListener("scroll", handleScroll);
|
|
657
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
658
|
+
}, [showScrollEffect]);
|
|
659
|
+
const maxWidthClass = {
|
|
660
|
+
sm: "max-w-sm",
|
|
661
|
+
md: "max-w-md",
|
|
662
|
+
lg: "max-w-lg",
|
|
663
|
+
xl: "max-w-xl",
|
|
664
|
+
"2xl": "max-w-2xl",
|
|
665
|
+
"3xl": "max-w-3xl",
|
|
666
|
+
"4xl": "max-w-4xl",
|
|
667
|
+
"5xl": "max-w-5xl",
|
|
668
|
+
"6xl": "max-w-6xl",
|
|
669
|
+
"7xl": "max-w-7xl",
|
|
670
|
+
full: "max-w-full"
|
|
671
|
+
}[maxWidth];
|
|
672
|
+
return /* @__PURE__ */ jsx11(
|
|
673
|
+
"nav",
|
|
674
|
+
{
|
|
675
|
+
className: cn(
|
|
676
|
+
"z-50 w-full transition-all duration-300",
|
|
677
|
+
sticky && "sticky top-0",
|
|
678
|
+
showScrollEffect && isScrolled ? "bg-(--color-bg-light)/95 backdrop-blur-md" : "bg-(--color-bg-light)",
|
|
679
|
+
className
|
|
680
|
+
),
|
|
681
|
+
children: /* @__PURE__ */ jsxs8("div", { className: cn(maxWidthClass, "mx-auto px-6 lg:px-12 py-4"), children: [
|
|
682
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
|
|
683
|
+
/* @__PURE__ */ jsx11("div", { className: "flex items-center", children: /* @__PURE__ */ jsx11(Link, { href: logoHref, className: "flex items-center", children: typeof logo === "string" ? /* @__PURE__ */ jsx11("span", { className: "text-3xl font-base text-(--color-text-dark) font-halant", children: logo }) : logo }) }),
|
|
684
|
+
links && links.length > 0 && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center gap-8", children: links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "text-sm text-(--color-text-dark) hover:opacity-60 transition-opacity", children: link.label }, link.href)) }),
|
|
685
|
+
ctaText && ctaHref && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center", children: /* @__PURE__ */ jsx11(Button5, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) }) }),
|
|
686
|
+
/* @__PURE__ */ jsx11("button", { className: "lg:hidden p-2 text-(--color-text-dark)", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle menu", children: mobileMenuOpen ? /* @__PURE__ */ jsx11(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx11(Menu, { className: "w-6 h-6" }) })
|
|
687
|
+
] }),
|
|
688
|
+
/* @__PURE__ */ jsx11(AnimatePresence, { children: mobileMenuOpen && /* @__PURE__ */ jsx11(
|
|
689
|
+
motion2.div,
|
|
690
|
+
{
|
|
691
|
+
initial: { opacity: 0, height: 0 },
|
|
692
|
+
animate: { opacity: 1, height: "auto" },
|
|
693
|
+
exit: { opacity: 0, height: 0 },
|
|
694
|
+
transition: { duration: 0.3, ease: "easeInOut" },
|
|
695
|
+
className: "lg:hidden overflow-hidden",
|
|
696
|
+
children: /* @__PURE__ */ jsx11("div", { className: "mt-4 py-4 rounded-xl bg-(--color-btn-white)", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 px-6", children: [
|
|
697
|
+
links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "py-2 text-(--color-text-dark) hover:opacity-70 transition-colors", onClick: () => setMobileMenuOpen(false), children: link.label }, link.href)),
|
|
698
|
+
ctaText && ctaHref && /* @__PURE__ */ jsx11(Button5, { asChild: true, variant: ctaVariant, className: "mt-2", onClick: () => setMobileMenuOpen(false), children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) })
|
|
699
|
+
] }) })
|
|
700
|
+
}
|
|
701
|
+
) })
|
|
702
|
+
] })
|
|
703
|
+
}
|
|
704
|
+
);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
// src/components/footer/footer.tsx
|
|
708
|
+
import Link2 from "next/link";
|
|
709
|
+
import { FaGithub, FaXTwitter } from "react-icons/fa6";
|
|
710
|
+
import { SiNpm } from "react-icons/si";
|
|
711
|
+
import { FaArrowRight } from "react-icons/fa6";
|
|
712
|
+
import { Input } from "@mdxui/primitives";
|
|
713
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
714
|
+
function Footer({
|
|
715
|
+
logo = "Priya",
|
|
716
|
+
description = "Your AI Product Manager for GitHub. Automate issue triage, sprint planning, and backlog grooming.",
|
|
717
|
+
socialLinks = [
|
|
718
|
+
{ href: "https://github.com", icon: FaGithub, label: "GitHub" },
|
|
719
|
+
{ href: "https://npmjs.com", icon: SiNpm, label: "npm" },
|
|
720
|
+
{ href: "https://twitter.com", icon: FaXTwitter, label: "X (Twitter)" }
|
|
721
|
+
],
|
|
722
|
+
quickLinks = [
|
|
723
|
+
{ href: "/#pricing", label: "Pricing" },
|
|
724
|
+
{ href: "/#features", label: "How it works" },
|
|
725
|
+
{ href: "/contact", label: "Contact" }
|
|
726
|
+
],
|
|
727
|
+
contactTitle = "Stay in touch",
|
|
728
|
+
emailPlaceholder = "Enter your email",
|
|
729
|
+
onEmailSubmit,
|
|
730
|
+
copyrightText = "Priya.do \xA9 2025. All rights reserved.",
|
|
731
|
+
className
|
|
732
|
+
}) {
|
|
733
|
+
const handleEmailSubmit = (e) => {
|
|
734
|
+
e.preventDefault();
|
|
735
|
+
const form = e.currentTarget;
|
|
736
|
+
const formData = new FormData(form);
|
|
737
|
+
const email = formData.get("email");
|
|
738
|
+
if (onEmailSubmit) {
|
|
739
|
+
onEmailSubmit(email);
|
|
740
|
+
}
|
|
741
|
+
form.reset();
|
|
742
|
+
};
|
|
743
|
+
return /* @__PURE__ */ jsx12("footer", { className: cn("py-16 px-6 lg:px-12 bg-[#111011] text-white", className), children: /* @__PURE__ */ jsxs9("div", { className: "max-w-7xl mx-auto", children: [
|
|
744
|
+
/* @__PURE__ */ jsxs9("div", { className: "grid md:grid-cols-5 gap-12 mb-12", children: [
|
|
745
|
+
/* @__PURE__ */ jsxs9("div", { className: "md:col-span-2", children: [
|
|
746
|
+
/* @__PURE__ */ jsx12(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx12("div", { className: "text-3xl font-base text-white font-halant", children: logo }) }),
|
|
747
|
+
/* @__PURE__ */ jsx12("p", { className: "max-w-md text-sm leading-relaxed text-white/70 mb-6", children: description }),
|
|
748
|
+
/* @__PURE__ */ jsx12("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => {
|
|
749
|
+
const Icon = link.icon;
|
|
750
|
+
return /* @__PURE__ */ jsx12(
|
|
751
|
+
Link2,
|
|
752
|
+
{
|
|
753
|
+
href: link.href,
|
|
754
|
+
target: "_blank",
|
|
755
|
+
rel: "noopener noreferrer",
|
|
756
|
+
className: "text-white/70 transition-colors hover:text-white",
|
|
757
|
+
"aria-label": link.label,
|
|
758
|
+
children: /* @__PURE__ */ jsx12(Icon, { className: "w-5 h-5" })
|
|
759
|
+
},
|
|
760
|
+
link.label
|
|
761
|
+
);
|
|
762
|
+
}) })
|
|
763
|
+
] }),
|
|
764
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
765
|
+
/* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-white", children: "Quick Links" }),
|
|
766
|
+
/* @__PURE__ */ jsx12("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12(Link2, { href: link.href, className: "text-sm text-white/70 transition-colors hover:text-white", children: link.label }) }, link.label)) })
|
|
767
|
+
] }),
|
|
768
|
+
/* @__PURE__ */ jsx12("div", { className: "w-full md:col-span-2 md:flex md:flex-col md:items-end", children: /* @__PURE__ */ jsxs9("div", { className: "w-full md:max-w-sm", children: [
|
|
769
|
+
/* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-white", children: contactTitle }),
|
|
770
|
+
/* @__PURE__ */ jsxs9("form", { onSubmit: handleEmailSubmit, className: "relative", children: [
|
|
771
|
+
/* @__PURE__ */ jsx12(
|
|
772
|
+
Input,
|
|
773
|
+
{
|
|
774
|
+
type: "email",
|
|
775
|
+
name: "email",
|
|
776
|
+
placeholder: emailPlaceholder,
|
|
777
|
+
required: true,
|
|
778
|
+
className: "w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 pr-12"
|
|
779
|
+
}
|
|
780
|
+
),
|
|
781
|
+
/* @__PURE__ */ jsx12(
|
|
782
|
+
"button",
|
|
783
|
+
{
|
|
784
|
+
type: "submit",
|
|
785
|
+
className: "absolute right-1 top-1/2 -translate-y-1/2 bg-white text-gray-900 hover:bg-white/90 active:bg-[#111011] active:text-white px-3 py-3 rounded-md transition-colors",
|
|
786
|
+
"aria-label": "Submit email",
|
|
787
|
+
children: /* @__PURE__ */ jsx12(FaArrowRight, { className: "w-3 h-3" })
|
|
788
|
+
}
|
|
789
|
+
)
|
|
790
|
+
] })
|
|
791
|
+
] }) })
|
|
792
|
+
] }),
|
|
793
|
+
/* @__PURE__ */ jsx12("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx12("p", { className: "text-sm text-white/60", children: copyrightText }) }) })
|
|
794
|
+
] }) });
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
// src/components/contact/contact.tsx
|
|
798
|
+
import { useState as useState2 } from "react";
|
|
799
|
+
import { Button as Button6, Input as Input2, Label, Textarea } from "@mdxui/primitives";
|
|
800
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
801
|
+
var defaultFields = [
|
|
802
|
+
{
|
|
803
|
+
id: "name",
|
|
804
|
+
label: "Name",
|
|
805
|
+
type: "text",
|
|
806
|
+
required: true
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
id: "email",
|
|
810
|
+
label: "Company Email",
|
|
811
|
+
type: "email",
|
|
812
|
+
required: true
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
id: "message",
|
|
816
|
+
label: "Message",
|
|
817
|
+
type: "textarea",
|
|
818
|
+
placeholder: "Tell us about your use case, team size, or any other questions you may have.",
|
|
819
|
+
required: true
|
|
820
|
+
}
|
|
821
|
+
];
|
|
822
|
+
function Contact({
|
|
823
|
+
heading = "Get in touch",
|
|
824
|
+
subheading = "Have questions about use cases, pricing, or anything else? Let's chat!",
|
|
825
|
+
fields = defaultFields,
|
|
826
|
+
submitButtonText = "Submit",
|
|
827
|
+
successMessage = "Thanks for reaching out! I'll get back to you within 24 hours.",
|
|
828
|
+
errorMessage = "Hmm, something went wrong. Mind trying again?",
|
|
829
|
+
onSubmit,
|
|
830
|
+
backgroundColor = "bg-(--color-bg-light)",
|
|
831
|
+
className
|
|
832
|
+
}) {
|
|
833
|
+
const [isSubmitting, setIsSubmitting] = useState2(false);
|
|
834
|
+
const [formData, setFormData] = useState2({});
|
|
835
|
+
const [submitStatus, setSubmitStatus] = useState2("idle");
|
|
836
|
+
const handleSubmit = async (e) => {
|
|
837
|
+
e.preventDefault();
|
|
838
|
+
setIsSubmitting(true);
|
|
839
|
+
setSubmitStatus("idle");
|
|
840
|
+
try {
|
|
841
|
+
if (onSubmit) {
|
|
842
|
+
await onSubmit(formData);
|
|
843
|
+
}
|
|
844
|
+
setSubmitStatus("success");
|
|
845
|
+
setFormData({});
|
|
846
|
+
e.target.reset();
|
|
847
|
+
} catch {
|
|
848
|
+
setSubmitStatus("error");
|
|
849
|
+
} finally {
|
|
850
|
+
setIsSubmitting(false);
|
|
851
|
+
}
|
|
852
|
+
};
|
|
853
|
+
const handleChange = (e) => {
|
|
854
|
+
setFormData((prev) => ({
|
|
855
|
+
...prev,
|
|
856
|
+
[e.target.id]: e.target.value
|
|
857
|
+
}));
|
|
858
|
+
};
|
|
859
|
+
return /* @__PURE__ */ jsx13("section", { className: cn(`relative py-12 md:py-32 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
|
|
860
|
+
/* @__PURE__ */ jsx13(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs10("div", { className: "mb-14 text-center", children: [
|
|
861
|
+
/* @__PURE__ */ jsx13("h1", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) mb-4", children: heading }),
|
|
862
|
+
/* @__PURE__ */ jsx13("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
|
|
863
|
+
] }) }),
|
|
864
|
+
/* @__PURE__ */ jsx13(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs10(
|
|
865
|
+
"form",
|
|
866
|
+
{
|
|
867
|
+
onSubmit: handleSubmit,
|
|
868
|
+
className: "mx-auto flex max-w-lg flex-col gap-6 bg-(--color-bg-cream) p-6 md:p-8 rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow",
|
|
869
|
+
children: [
|
|
870
|
+
fields.map((field) => /* @__PURE__ */ jsxs10("div", { className: "grid w-full items-center gap-2", children: [
|
|
871
|
+
/* @__PURE__ */ jsxs10(Label, { htmlFor: field.id, className: "text-(--color-text-dark)", children: [
|
|
872
|
+
field.label,
|
|
873
|
+
field.required && /* @__PURE__ */ jsx13("span", { className: "text-red-500 ml-1", children: "*" })
|
|
874
|
+
] }),
|
|
875
|
+
field.type === "textarea" ? /* @__PURE__ */ jsx13(Textarea, { id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange, className: "min-h-[120px]" }) : /* @__PURE__ */ jsx13(Input2, { type: field.type, id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange })
|
|
876
|
+
] }, field.id)),
|
|
877
|
+
/* @__PURE__ */ jsx13(Button6, { type: "submit", className: "w-full", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : submitButtonText }),
|
|
878
|
+
submitStatus === "success" && /* @__PURE__ */ jsx13("p", { className: "text-green-600 text-sm text-center", children: successMessage }),
|
|
879
|
+
submitStatus === "error" && /* @__PURE__ */ jsx13("p", { className: "text-red-600 text-sm text-center", children: errorMessage })
|
|
880
|
+
]
|
|
881
|
+
}
|
|
882
|
+
) })
|
|
883
|
+
] }) });
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
// src/components/integration/integration.tsx
|
|
887
|
+
import { forwardRef, useRef, useEffect as useEffect3, useState as useState4 } from "react";
|
|
888
|
+
|
|
889
|
+
// src/shared/animated-beam/animated-beam.tsx
|
|
890
|
+
import { useEffect as useEffect2, useId, useState as useState3 } from "react";
|
|
891
|
+
import { motion as motion3 } from "motion/react";
|
|
892
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
893
|
+
function AnimatedBeam({
|
|
894
|
+
className,
|
|
895
|
+
containerRef,
|
|
896
|
+
fromRef,
|
|
897
|
+
toRef,
|
|
898
|
+
curvature = 0,
|
|
899
|
+
reverse = false,
|
|
900
|
+
duration = Math.random() * 3 + 4,
|
|
901
|
+
delay = 0,
|
|
902
|
+
pathColor = "gray",
|
|
903
|
+
pathWidth = 2,
|
|
904
|
+
pathOpacity = 0.2,
|
|
905
|
+
gradientStartColor = "#ffaa40",
|
|
906
|
+
gradientStopColor = "#9c40ff",
|
|
907
|
+
startXOffset = 0,
|
|
908
|
+
startYOffset = 0,
|
|
909
|
+
endXOffset = 0,
|
|
910
|
+
endYOffset = 0
|
|
911
|
+
}) {
|
|
912
|
+
const id = useId();
|
|
913
|
+
const [pathD, setPathD] = useState3("");
|
|
914
|
+
const [svgDimensions, setSvgDimensions] = useState3({ width: 0, height: 0 });
|
|
915
|
+
const gradientCoordinates = reverse ? {
|
|
916
|
+
x1: ["90%", "-10%"],
|
|
917
|
+
x2: ["100%", "0%"],
|
|
918
|
+
y1: ["0%", "0%"],
|
|
919
|
+
y2: ["0%", "0%"]
|
|
920
|
+
} : {
|
|
921
|
+
x1: ["10%", "110%"],
|
|
922
|
+
x2: ["0%", "100%"],
|
|
923
|
+
y1: ["0%", "0%"],
|
|
924
|
+
y2: ["0%", "0%"]
|
|
925
|
+
};
|
|
926
|
+
useEffect2(() => {
|
|
927
|
+
const updatePath = () => {
|
|
928
|
+
if (containerRef.current && fromRef.current && toRef.current) {
|
|
929
|
+
const containerRect = containerRef.current.getBoundingClientRect();
|
|
930
|
+
const rectA = fromRef.current.getBoundingClientRect();
|
|
931
|
+
const rectB = toRef.current.getBoundingClientRect();
|
|
932
|
+
const svgWidth = containerRect.width;
|
|
933
|
+
const svgHeight = containerRect.height;
|
|
934
|
+
setSvgDimensions({ width: svgWidth, height: svgHeight });
|
|
935
|
+
const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
|
|
936
|
+
const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
|
|
937
|
+
const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
|
|
938
|
+
const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
|
|
939
|
+
const controlY = startY - curvature;
|
|
940
|
+
const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
|
|
941
|
+
setPathD(d);
|
|
942
|
+
}
|
|
943
|
+
};
|
|
944
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
945
|
+
updatePath();
|
|
946
|
+
});
|
|
947
|
+
if (containerRef.current) {
|
|
948
|
+
resizeObserver.observe(containerRef.current);
|
|
949
|
+
}
|
|
950
|
+
updatePath();
|
|
951
|
+
return () => {
|
|
952
|
+
resizeObserver.disconnect();
|
|
953
|
+
};
|
|
954
|
+
}, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
|
|
955
|
+
return /* @__PURE__ */ jsxs11(
|
|
956
|
+
"svg",
|
|
957
|
+
{
|
|
958
|
+
fill: "none",
|
|
959
|
+
width: svgDimensions.width,
|
|
960
|
+
height: svgDimensions.height,
|
|
961
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
962
|
+
className: cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className),
|
|
963
|
+
viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
|
|
964
|
+
children: [
|
|
965
|
+
/* @__PURE__ */ jsx14("path", { d: pathD, stroke: pathColor, strokeWidth: pathWidth, strokeOpacity: pathOpacity, strokeLinecap: "round" }),
|
|
966
|
+
/* @__PURE__ */ jsx14("path", { d: pathD, strokeWidth: pathWidth, stroke: `url(#${id})`, strokeOpacity: "1", strokeLinecap: "round" }),
|
|
967
|
+
/* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs11(
|
|
968
|
+
motion3.linearGradient,
|
|
969
|
+
{
|
|
970
|
+
className: "transform-gpu",
|
|
971
|
+
id,
|
|
972
|
+
gradientUnits: "userSpaceOnUse",
|
|
973
|
+
initial: {
|
|
974
|
+
x1: "0%",
|
|
975
|
+
x2: "0%",
|
|
976
|
+
y1: "0%",
|
|
977
|
+
y2: "0%"
|
|
978
|
+
},
|
|
979
|
+
animate: {
|
|
980
|
+
x1: gradientCoordinates.x1,
|
|
981
|
+
x2: gradientCoordinates.x2,
|
|
982
|
+
y1: gradientCoordinates.y1,
|
|
983
|
+
y2: gradientCoordinates.y2
|
|
984
|
+
},
|
|
985
|
+
transition: {
|
|
986
|
+
delay,
|
|
987
|
+
duration,
|
|
988
|
+
ease: [0.16, 1, 0.3, 1],
|
|
989
|
+
repeat: Infinity,
|
|
990
|
+
repeatDelay: 0
|
|
991
|
+
},
|
|
992
|
+
children: [
|
|
993
|
+
/* @__PURE__ */ jsx14("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
|
|
994
|
+
/* @__PURE__ */ jsx14("stop", { stopColor: gradientStartColor }),
|
|
995
|
+
/* @__PURE__ */ jsx14("stop", { offset: "32.5%", stopColor: gradientStopColor }),
|
|
996
|
+
/* @__PURE__ */ jsx14("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
|
|
997
|
+
]
|
|
998
|
+
}
|
|
999
|
+
) })
|
|
1000
|
+
]
|
|
1001
|
+
}
|
|
1002
|
+
);
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
// src/shared/grid-pattern/grid-pattern.tsx
|
|
1006
|
+
import { useId as useId2 } from "react";
|
|
1007
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1008
|
+
function GridPattern({
|
|
1009
|
+
width = 40,
|
|
1010
|
+
height = 40,
|
|
1011
|
+
x = -1,
|
|
1012
|
+
y = -1,
|
|
1013
|
+
strokeDasharray = "0",
|
|
1014
|
+
squares,
|
|
1015
|
+
className,
|
|
1016
|
+
...props
|
|
1017
|
+
}) {
|
|
1018
|
+
const id = useId2();
|
|
1019
|
+
return /* @__PURE__ */ jsxs12(
|
|
1020
|
+
"svg",
|
|
1021
|
+
{
|
|
1022
|
+
"aria-hidden": "true",
|
|
1023
|
+
className: cn("pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30", className),
|
|
1024
|
+
...props,
|
|
1025
|
+
children: [
|
|
1026
|
+
/* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("pattern", { id, width, height, patternUnits: "userSpaceOnUse", x, y, children: /* @__PURE__ */ jsx15("path", { d: `M.5 ${height}V.5H${width}`, fill: "none", strokeDasharray }) }) }),
|
|
1027
|
+
/* @__PURE__ */ jsx15("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
|
|
1028
|
+
squares && /* @__PURE__ */ jsx15("svg", { x, y, className: "overflow-visible", children: squares.map(([sx, sy]) => /* @__PURE__ */ jsx15("rect", { strokeWidth: "0", width: width - 1, height: height - 1, x: sx * width + 1, y: sy * height + 1 }, `${sx}-${sy}`)) })
|
|
1029
|
+
]
|
|
1030
|
+
}
|
|
1031
|
+
);
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
// src/components/integration/integration.tsx
|
|
1035
|
+
import Image3 from "next/image";
|
|
1036
|
+
import { Button as Button7 } from "@mdxui/primitives";
|
|
1037
|
+
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1038
|
+
var Square = forwardRef(({ className, children }, ref) => {
|
|
1039
|
+
return /* @__PURE__ */ jsx16(
|
|
1040
|
+
"div",
|
|
1041
|
+
{
|
|
1042
|
+
ref,
|
|
1043
|
+
className: cn("z-10 flex size-16 items-center justify-center rounded-lg bg-(--color-btn-white) border border-(--color-btn-border) p-3 integration-square-shadow", className),
|
|
1044
|
+
children
|
|
1045
|
+
}
|
|
1046
|
+
);
|
|
1047
|
+
});
|
|
1048
|
+
Square.displayName = "Square";
|
|
1049
|
+
function Integration({
|
|
1050
|
+
title = "Connect in Seconds",
|
|
1051
|
+
description = "Just connect your account and get started immediately \u2013 no configuration, no setup, no hassle.",
|
|
1052
|
+
buttonText = "Get Started",
|
|
1053
|
+
buttonHref = "#pricing",
|
|
1054
|
+
leftNode,
|
|
1055
|
+
rightNode,
|
|
1056
|
+
beamAnimations = [
|
|
1057
|
+
{ startYOffset: 10, endYOffset: 10, curvature: -20, duration: 3 },
|
|
1058
|
+
{ startYOffset: -10, endYOffset: -10, curvature: 20, duration: 3, reverse: true }
|
|
1059
|
+
],
|
|
1060
|
+
gridPatternWidth = 30,
|
|
1061
|
+
gridPatternHeight = 30,
|
|
1062
|
+
maxWidth = "5xl",
|
|
1063
|
+
className,
|
|
1064
|
+
contentOrder = "left"
|
|
1065
|
+
}) {
|
|
1066
|
+
const containerRef = useRef(null);
|
|
1067
|
+
const leftRef = useRef(null);
|
|
1068
|
+
const rightRef = useRef(null);
|
|
1069
|
+
const [isDark, setIsDark] = useState4(false);
|
|
1070
|
+
useEffect3(() => {
|
|
1071
|
+
const checkDarkMode = () => {
|
|
1072
|
+
const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
1073
|
+
setIsDark(isDarkMode);
|
|
1074
|
+
};
|
|
1075
|
+
checkDarkMode();
|
|
1076
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
1077
|
+
const observer = new MutationObserver(checkDarkMode);
|
|
1078
|
+
mediaQuery.addEventListener("change", checkDarkMode);
|
|
1079
|
+
observer.observe(document.documentElement, {
|
|
1080
|
+
attributes: true,
|
|
1081
|
+
attributeFilter: ["class"]
|
|
1082
|
+
});
|
|
1083
|
+
return () => {
|
|
1084
|
+
mediaQuery.removeEventListener("change", checkDarkMode);
|
|
1085
|
+
observer.disconnect();
|
|
1086
|
+
};
|
|
1087
|
+
}, []);
|
|
1088
|
+
const renderNode = (node, ref) => {
|
|
1089
|
+
const squareContent = (() => {
|
|
1090
|
+
if (node.type === "image" && typeof node.content === "string") {
|
|
1091
|
+
return /* @__PURE__ */ jsx16("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx16(Image3, { src: node.content, alt: node.alt || "Integration", fill: true, className: "object-cover rounded-lg" }) });
|
|
1092
|
+
}
|
|
1093
|
+
if (node.type === "icon" && typeof node.content === "string") {
|
|
1094
|
+
return /* @__PURE__ */ jsx16("div", { className: cn("text-gray-900 dark:text-white", node.className), children: node.content });
|
|
1095
|
+
}
|
|
1096
|
+
return node.content;
|
|
1097
|
+
})();
|
|
1098
|
+
return /* @__PURE__ */ jsx16(Square, { ref, className: cn("size-20", node.type === "image" ? "p-0" : "", node.className), children: squareContent });
|
|
1099
|
+
};
|
|
1100
|
+
const maxWidthClasses = {
|
|
1101
|
+
sm: "max-w-sm",
|
|
1102
|
+
md: "max-w-md",
|
|
1103
|
+
lg: "max-w-lg",
|
|
1104
|
+
xl: "max-w-xl",
|
|
1105
|
+
"2xl": "max-w-2xl",
|
|
1106
|
+
"3xl": "max-w-3xl",
|
|
1107
|
+
"4xl": "max-w-4xl",
|
|
1108
|
+
"5xl": "max-w-5xl",
|
|
1109
|
+
"6xl": "max-w-6xl",
|
|
1110
|
+
"7xl": "max-w-7xl"
|
|
1111
|
+
};
|
|
1112
|
+
const content = /* @__PURE__ */ jsxs13("div", { className: "space-y-6", children: [
|
|
1113
|
+
/* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx16("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark)", children: title }) }),
|
|
1114
|
+
/* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx16("p", { className: "text-base text-(--color-text-muted) max-w-lg", children: description }) }),
|
|
1115
|
+
buttonText && buttonHref && /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx16(Button7, { asChild: true, variant: "default", children: /* @__PURE__ */ jsx16("a", { href: buttonHref, children: buttonText }) }) })
|
|
1116
|
+
] });
|
|
1117
|
+
const animation = /* @__PURE__ */ jsx16(ScrollReveal, { direction: contentOrder === "left" ? "right" : "left", delay: 0.2, children: /* @__PURE__ */ jsxs13("div", { className: "relative flex aspect-square max-w-md mx-auto w-full items-center justify-center overflow-hidden rounded-lg", ref: containerRef, children: [
|
|
1118
|
+
/* @__PURE__ */ jsx16(
|
|
1119
|
+
GridPattern,
|
|
1120
|
+
{
|
|
1121
|
+
width: gridPatternWidth,
|
|
1122
|
+
height: gridPatternHeight,
|
|
1123
|
+
className: "opacity-30 mask-[radial-gradient(ellipse_at_center,black_40%,transparent_85%)] dark:mask-[radial-gradient(ellipse_at_center,white_40%,transparent_85%)]"
|
|
1124
|
+
}
|
|
1125
|
+
),
|
|
1126
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex size-full flex-row items-center justify-center gap-20 relative z-10", children: [
|
|
1127
|
+
/* @__PURE__ */ jsx16("div", { className: "flex flex-col justify-center", children: renderNode(leftNode, leftRef) }),
|
|
1128
|
+
/* @__PURE__ */ jsx16("div", { className: "flex flex-col justify-center", children: renderNode(rightNode, rightRef) })
|
|
1129
|
+
] }),
|
|
1130
|
+
beamAnimations.map((config, index) => /* @__PURE__ */ jsx16(
|
|
1131
|
+
AnimatedBeam,
|
|
1132
|
+
{
|
|
1133
|
+
containerRef,
|
|
1134
|
+
fromRef: leftRef,
|
|
1135
|
+
toRef: rightRef,
|
|
1136
|
+
startYOffset: config.startYOffset,
|
|
1137
|
+
endYOffset: config.endYOffset,
|
|
1138
|
+
curvature: config.curvature,
|
|
1139
|
+
duration: config.duration,
|
|
1140
|
+
reverse: config.reverse,
|
|
1141
|
+
pathColor: isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"
|
|
1142
|
+
},
|
|
1143
|
+
index
|
|
1144
|
+
))
|
|
1145
|
+
] }) });
|
|
1146
|
+
return /* @__PURE__ */ jsx16("section", { className: cn("pt-10 sm:pt-0 px-8 lg:px-24 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsx16("div", { className: cn(maxWidthClasses[maxWidth], "mx-auto"), children: /* @__PURE__ */ jsx16("div", { className: "grid lg:grid-cols-2 gap-1 items-center", children: contentOrder === "left" ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
|
|
1147
|
+
content,
|
|
1148
|
+
animation
|
|
1149
|
+
] }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
|
|
1150
|
+
animation,
|
|
1151
|
+
content
|
|
1152
|
+
] }) }) }) });
|
|
1153
|
+
}
|
|
1154
|
+
export {
|
|
1155
|
+
AnimatedBeam,
|
|
1156
|
+
CTA,
|
|
1157
|
+
CodeWindow,
|
|
1158
|
+
Contact,
|
|
1159
|
+
FAQ,
|
|
1160
|
+
Features,
|
|
1161
|
+
Footer,
|
|
1162
|
+
GridPattern,
|
|
1163
|
+
Hero,
|
|
1164
|
+
Integration,
|
|
1165
|
+
Marquee,
|
|
1166
|
+
Navigation,
|
|
1167
|
+
Pricing,
|
|
1168
|
+
PricingTiers,
|
|
1169
|
+
Problem,
|
|
1170
|
+
ScrollReveal,
|
|
1171
|
+
cn
|
|
1172
|
+
};
|
|
1173
|
+
//# sourceMappingURL=index.js.map
|