@fayz-ai/plugin-linkinbio 0.9.1 → 0.10.1

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.
Files changed (62) hide show
  1. package/dist/public/{data.d.ts → data/index.d.ts} +2 -2
  2. package/dist/public/data/index.d.ts.map +1 -0
  3. package/dist/public/{data.supabase.d.ts → data/supabase.d.ts} +2 -2
  4. package/dist/public/data/supabase.d.ts.map +1 -0
  5. package/dist/public/index.d.ts +8 -8
  6. package/dist/public/index.d.ts.map +1 -1
  7. package/dist/public/index.js +2 -2
  8. package/dist/public/index.js.map +1 -1
  9. package/dist/public/{registry.d.ts → lib/registry.d.ts} +1 -1
  10. package/dist/public/lib/registry.d.ts.map +1 -0
  11. package/dist/public/{utils.d.ts → lib/utils.d.ts} +1 -1
  12. package/dist/public/lib/utils.d.ts.map +1 -0
  13. package/dist/public/views/BioPage.d.ts.map +1 -0
  14. package/dist/public/{BioPageRenderer.d.ts → views/BioPageRenderer.d.ts} +1 -1
  15. package/dist/public/views/BioPageRenderer.d.ts.map +1 -0
  16. package/package.json +12 -15
  17. package/dist/index.cjs +0 -33
  18. package/dist/index.cjs.map +0 -1
  19. package/dist/public/BioPage.d.ts.map +0 -1
  20. package/dist/public/BioPageRenderer.d.ts.map +0 -1
  21. package/dist/public/__tests__/manifest.test.d.ts +0 -2
  22. package/dist/public/__tests__/manifest.test.d.ts.map +0 -1
  23. package/dist/public/data.d.ts.map +0 -1
  24. package/dist/public/data.supabase.d.ts.map +0 -1
  25. package/dist/public/index.cjs +0 -1984
  26. package/dist/public/index.cjs.map +0 -1
  27. package/dist/public/registry.d.ts.map +0 -1
  28. package/dist/public/utils.d.ts.map +0 -1
  29. package/src/index.ts +0 -56
  30. package/src/public/BioPage.tsx +0 -123
  31. package/src/public/BioPageRenderer.tsx +0 -251
  32. package/src/public/__tests__/manifest.test.ts +0 -39
  33. package/src/public/blocks/BioSection.tsx +0 -66
  34. package/src/public/blocks/CTASection.tsx +0 -56
  35. package/src/public/blocks/EmbedSection.tsx +0 -53
  36. package/src/public/blocks/FeaturedBlock.tsx +0 -70
  37. package/src/public/blocks/GallerySection.tsx +0 -148
  38. package/src/public/blocks/HeroSection.tsx +0 -107
  39. package/src/public/blocks/LinksBlock.tsx +0 -80
  40. package/src/public/blocks/MusicReleasesBlock.tsx +0 -83
  41. package/src/public/blocks/ProfileHeader.tsx +0 -174
  42. package/src/public/blocks/ProjectSection.tsx +0 -158
  43. package/src/public/blocks/SocialLinksSection.tsx +0 -125
  44. package/src/public/blocks/StatsSection.tsx +0 -46
  45. package/src/public/blocks/TextSection.tsx +0 -29
  46. package/src/public/blocks/TourDatesBlock.tsx +0 -83
  47. package/src/public/blocks/VenueListSection.tsx +0 -91
  48. package/src/public/blocks/VideoGridSection.tsx +0 -105
  49. package/src/public/blocks/index.ts +0 -16
  50. package/src/public/components/Carousel.tsx +0 -90
  51. package/src/public/components/MediaKit.tsx +0 -249
  52. package/src/public/components/PlatformIcon.tsx +0 -56
  53. package/src/public/components/Reveal.tsx +0 -58
  54. package/src/public/context.tsx +0 -30
  55. package/src/public/createPublicLinkInBioPlugin.ts +0 -81
  56. package/src/public/data.supabase.ts +0 -31
  57. package/src/public/data.ts +0 -29
  58. package/src/public/index.ts +0 -75
  59. package/src/public/registry.ts +0 -40
  60. package/src/public/utils.ts +0 -102
  61. package/src/types.ts +0 -337
  62. /package/dist/public/{BioPage.d.ts → views/BioPage.d.ts} +0 -0
@@ -1,1984 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
- var core = require('@fayz-ai/core');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var reactRouterDom = require('react-router-dom');
7
- var lucideReact = require('lucide-react');
8
- var reactDom = require('react-dom');
9
- var si = require('react-icons/si');
10
-
11
- // src/public/createPublicLinkInBioPlugin.ts
12
-
13
- // src/public/data.ts
14
- function createMockBioPageProvider(options = {}) {
15
- const seed = options.seed ?? {};
16
- return {
17
- async getBySlug(slug) {
18
- return seed[slug] ?? null;
19
- }
20
- };
21
- }
22
- function createSupabaseBioPageProvider(options = {}) {
23
- const table = options.table ?? "press_kits";
24
- return {
25
- async getBySlug(slug) {
26
- const client = core.getSupabaseClientOptional();
27
- if (!client) return null;
28
- const { data, error } = await client.from(table).select("data, is_published").eq("slug", slug).maybeSingle();
29
- if (error || !data) return null;
30
- if (!data.is_published) return null;
31
- return data.data;
32
- }
33
- };
34
- }
35
- var LinkInBioContext = react.createContext(null);
36
- function LinkInBioProvider({
37
- value,
38
- children
39
- }) {
40
- return /* @__PURE__ */ jsxRuntime.jsx(LinkInBioContext.Provider, { value, children });
41
- }
42
- function useLinkInBio() {
43
- const ctx = react.useContext(LinkInBioContext);
44
- if (!ctx) {
45
- throw new Error("useLinkInBio must be used within a LinkInBioProvider (mount the plugin Provider).");
46
- }
47
- return ctx;
48
- }
49
- function renderMarkdown(md) {
50
- return md.split(/\n\n+/).map((block) => {
51
- const html = block.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>').replace(/\n/g, "<br />");
52
- return `<p>${html}</p>`;
53
- }).join("");
54
- }
55
- var platformColors = {
56
- instagram: "#E4405F",
57
- spotify: "#1DB954",
58
- soundcloud: "#FF5500",
59
- youtube: "#FF0000",
60
- tiktok: "#000000",
61
- whatsapp: "#25D366",
62
- email: "#EA4335",
63
- twitter: "#1DA1F2",
64
- facebook: "#1877F2",
65
- bandcamp: "#629AA9",
66
- mixcloud: "#5000FF",
67
- beatport: "#94D500",
68
- "apple-music": "#FC3C44",
69
- deezer: "#FEAA2D",
70
- telegram: "#0088CC",
71
- website: "#888888",
72
- custom: "#888888"
73
- };
74
- var platformLabels = {
75
- instagram: "Instagram",
76
- spotify: "Spotify",
77
- soundcloud: "SoundCloud",
78
- youtube: "YouTube",
79
- tiktok: "TikTok",
80
- whatsapp: "WhatsApp",
81
- email: "Email",
82
- twitter: "Twitter / X",
83
- facebook: "Facebook",
84
- bandcamp: "Bandcamp",
85
- mixcloud: "Mixcloud",
86
- beatport: "Beatport",
87
- "apple-music": "Apple Music",
88
- deezer: "Deezer",
89
- telegram: "Telegram",
90
- website: "Website",
91
- custom: "Link"
92
- };
93
- var platformIconMap = {
94
- instagram: lucideReact.Instagram,
95
- spotify: lucideReact.Music,
96
- soundcloud: lucideReact.Music,
97
- youtube: lucideReact.Youtube,
98
- tiktok: lucideReact.Music,
99
- whatsapp: lucideReact.Phone,
100
- email: lucideReact.Mail,
101
- twitter: lucideReact.Twitter,
102
- facebook: lucideReact.Facebook,
103
- bandcamp: lucideReact.Music,
104
- mixcloud: lucideReact.Music,
105
- beatport: lucideReact.Music,
106
- "apple-music": lucideReact.Music,
107
- deezer: lucideReact.Music,
108
- telegram: lucideReact.Globe,
109
- website: lucideReact.Globe,
110
- custom: lucideReact.Globe
111
- };
112
- var borderRadiusMap = {
113
- none: "0px",
114
- sm: "4px",
115
- md: "8px",
116
- lg: "16px",
117
- full: "9999px"
118
- };
119
- function getBrandingVars(branding) {
120
- return {
121
- "--pk-primary": branding.primaryColor,
122
- "--pk-secondary": branding.secondaryColor,
123
- "--pk-accent": branding.accentColor,
124
- "--pk-bg": branding.backgroundColor,
125
- "--pk-text": branding.textColor,
126
- "--pk-muted": branding.mutedTextColor,
127
- "--pk-radius": borderRadiusMap[branding.borderRadius ?? "md"],
128
- "--pk-font-heading": branding.fontHeading ?? "'Space Grotesk', sans-serif",
129
- "--pk-font-body": branding.fontBody ?? "'DM Sans', sans-serif",
130
- "--pk-alt-bg": branding.sectionAltBg ?? branding.backgroundColor,
131
- "--pk-alt-bg2": branding.sectionAltBg2 ?? branding.backgroundColor
132
- };
133
- }
134
-
135
- // src/public/registry.ts
136
- var registry = /* @__PURE__ */ new Map();
137
- function registerBlock(type, component) {
138
- registry.set(type, component);
139
- }
140
- function getBlock(type) {
141
- return registry.get(type);
142
- }
143
- function hasBlock(type) {
144
- return registry.has(type);
145
- }
146
- function Reveal({
147
- children,
148
- delay = 0,
149
- className
150
- }) {
151
- const ref = react.useRef(null);
152
- const [shown, setShown] = react.useState(false);
153
- react.useEffect(() => {
154
- const el = ref.current;
155
- if (!el) return;
156
- const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
157
- if (reduce || typeof IntersectionObserver === "undefined") {
158
- setShown(true);
159
- return;
160
- }
161
- const io = new IntersectionObserver(
162
- ([entry]) => {
163
- if (entry.isIntersecting) {
164
- setShown(true);
165
- io.disconnect();
166
- }
167
- },
168
- { threshold: 0.1, rootMargin: "0px 0px -6% 0px" }
169
- );
170
- io.observe(el);
171
- return () => io.disconnect();
172
- }, []);
173
- return /* @__PURE__ */ jsxRuntime.jsx(
174
- "div",
175
- {
176
- ref,
177
- className,
178
- style: {
179
- opacity: shown ? 1 : 0,
180
- transform: shown ? "none" : "translateY(22px)",
181
- transition: `opacity 0.6s ease ${delay}ms, transform 0.6s cubic-bezier(0.2,0.7,0.2,1) ${delay}ms`,
182
- willChange: "opacity, transform"
183
- },
184
- children
185
- }
186
- );
187
- }
188
- function derive(page) {
189
- const seen = /* @__PURE__ */ new Set();
190
- const images = [];
191
- const pushImg = (label, url, kind = "image") => {
192
- if (!url || seen.has(url) || !url.startsWith("/")) return;
193
- seen.add(url);
194
- images.push({ label, url, kind });
195
- };
196
- if (page.branding.logoUrl) pushImg("Logo", page.branding.logoUrl, "logo");
197
- let bioText = "";
198
- for (const s of page.sections) {
199
- if (s.type === "profile-header" && s.imageUrl) pushImg("Foto de capa", s.imageUrl);
200
- if (s.type === "hero" && s.backgroundImageUrl) pushImg("Foto de capa", s.backgroundImageUrl);
201
- if (s.type === "gallery") s.media.forEach((m, i) => m.type === "image" && pushImg(`Foto ${i + 1}`, m.url));
202
- if (s.type === "bio" || s.type === "text") {
203
- if (s.content) bioText += `${s.title ? `## ${s.title}
204
-
205
- ` : ""}${s.content}
206
-
207
- `;
208
- if (s.type === "bio" && s.imageUrl) pushImg("Foto", s.imageUrl);
209
- }
210
- }
211
- const extras = (page.mediaKit?.assets ?? []).map(
212
- (a) => ({ label: a.label, url: a.url, kind: a.kind ?? "link" })
213
- );
214
- return { images, bioText: bioText.trim(), extras, driveUrl: page.mediaKit?.driveUrl };
215
- }
216
- function fileName(url, fallback) {
217
- const base = url.split("/").pop()?.split("?")[0];
218
- return base && base.includes(".") ? base : fallback;
219
- }
220
- function MediaKit({ page, variant = "inline" }) {
221
- const [open, setOpen] = react.useState(false);
222
- const [copied, setCopied] = react.useState(false);
223
- const { images, bioText, extras, driveUrl } = react.useMemo(() => derive(page), [page]);
224
- if (!images.length && !bioText && !extras.length && !driveUrl) return null;
225
- const copyBio = async () => {
226
- try {
227
- await navigator.clipboard.writeText(bioText);
228
- setCopied(true);
229
- setTimeout(() => setCopied(false), 1800);
230
- } catch {
231
- }
232
- };
233
- const downloadBio = () => {
234
- const blob = new Blob([bioText], { type: "text/plain;charset=utf-8" });
235
- const url = URL.createObjectURL(blob);
236
- const a = document.createElement("a");
237
- a.href = url;
238
- a.download = `${page.identity.slug || "bio"}-bio.txt`;
239
- a.click();
240
- setTimeout(() => URL.revokeObjectURL(url), 1e3);
241
- };
242
- const modal = /* @__PURE__ */ jsxRuntime.jsx(
243
- "div",
244
- {
245
- className: "fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4",
246
- style: {
247
- ...getBrandingVars(page.branding),
248
- background: "rgba(0,0,0,0.6)",
249
- backdropFilter: "blur(4px)",
250
- fontFamily: "var(--pk-font-body)"
251
- },
252
- onClick: () => setOpen(false),
253
- children: /* @__PURE__ */ jsxRuntime.jsxs(
254
- "div",
255
- {
256
- className: "w-full sm:max-w-lg max-h-[88vh] overflow-y-auto rounded-t-3xl sm:rounded-3xl",
257
- style: { backgroundColor: "var(--pk-bg)", border: "1px solid rgba(255,255,255,0.1)" },
258
- onClick: (e) => e.stopPropagation(),
259
- children: [
260
- /* @__PURE__ */ jsxRuntime.jsxs(
261
- "div",
262
- {
263
- className: "sticky top-0 flex items-center justify-between px-5 py-4 z-10",
264
- style: { backgroundColor: "var(--pk-bg)", borderBottom: "1px solid rgba(255,255,255,0.08)" },
265
- children: [
266
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
267
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 18, style: { color: "var(--pk-primary)" } }),
268
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold", style: { color: "var(--pk-text)", fontFamily: "var(--pk-font-heading)" }, children: "M\xEDdia Kit" })
269
- ] }),
270
- /* @__PURE__ */ jsxRuntime.jsx(
271
- "button",
272
- {
273
- type: "button",
274
- "aria-label": "Fechar",
275
- onClick: () => setOpen(false),
276
- className: "flex items-center justify-center w-8 h-8 rounded-full",
277
- style: { backgroundColor: "rgba(255,255,255,0.08)", color: "var(--pk-text)" },
278
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
279
- }
280
- )
281
- ]
282
- }
283
- ),
284
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-5 space-y-6", children: [
285
- driveUrl && /* @__PURE__ */ jsxRuntime.jsxs(
286
- "a",
287
- {
288
- href: driveUrl,
289
- target: "_blank",
290
- rel: "noopener noreferrer",
291
- className: "flex items-center gap-3 p-3 rounded-xl transition-transform hover:scale-[1.01]",
292
- style: { backgroundColor: "var(--pk-primary)", color: "var(--pk-bg)" },
293
- children: [
294
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 18 }),
295
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Abrir kit completo (Drive)" })
296
- ]
297
- }
298
- ),
299
- bioText && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
300
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-bold uppercase tracking-wider mb-2 opacity-60", style: { color: "var(--pk-muted)" }, children: "Bio / Release" }),
301
- /* @__PURE__ */ jsxRuntime.jsx(
302
- "p",
303
- {
304
- className: "text-sm leading-relaxed max-h-32 overflow-y-auto p-3 rounded-xl",
305
- style: { color: "var(--pk-muted)", backgroundColor: "rgba(255,255,255,0.04)" },
306
- children: bioText.replace(/[*#]/g, "")
307
- }
308
- ),
309
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mt-2", children: [
310
- /* @__PURE__ */ jsxRuntime.jsxs(
311
- "button",
312
- {
313
- type: "button",
314
- onClick: copyBio,
315
- className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full",
316
- style: { backgroundColor: "rgba(255,255,255,0.08)", color: "var(--pk-text)" },
317
- children: [
318
- copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 13 }),
319
- " ",
320
- copied ? "Copiado" : "Copiar"
321
- ]
322
- }
323
- ),
324
- /* @__PURE__ */ jsxRuntime.jsxs(
325
- "button",
326
- {
327
- type: "button",
328
- onClick: downloadBio,
329
- className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full",
330
- style: { backgroundColor: "rgba(255,255,255,0.08)", color: "var(--pk-text)" },
331
- children: [
332
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 13 }),
333
- " .txt"
334
- ]
335
- }
336
- )
337
- ] })
338
- ] }),
339
- images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
340
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-bold uppercase tracking-wider mb-2 opacity-60", style: { color: "var(--pk-muted)" }, children: "Fotos & Logo" }),
341
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: images.map((img) => /* @__PURE__ */ jsxRuntime.jsxs(
342
- "a",
343
- {
344
- href: img.url,
345
- download: fileName(img.url, `${page.identity.slug}-${img.label}`),
346
- className: "group relative aspect-square overflow-hidden rounded-xl",
347
- style: { backgroundColor: "rgba(255,255,255,0.06)" },
348
- title: `Baixar ${img.label}`,
349
- children: [
350
- /* @__PURE__ */ jsxRuntime.jsx(
351
- "img",
352
- {
353
- src: img.url,
354
- alt: img.label,
355
- className: `w-full h-full ${img.kind === "logo" ? "object-contain p-3" : "object-cover"}`,
356
- loading: "lazy"
357
- }
358
- ),
359
- /* @__PURE__ */ jsxRuntime.jsx(
360
- "div",
361
- {
362
- className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
363
- style: { background: "rgba(0,0,0,0.45)" },
364
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 20, style: { color: "#fff" } })
365
- }
366
- )
367
- ]
368
- },
369
- img.url
370
- )) })
371
- ] }),
372
- extras.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
373
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-bold uppercase tracking-wider mb-2 opacity-60", style: { color: "var(--pk-muted)" }, children: "Recursos" }),
374
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: extras.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
375
- "a",
376
- {
377
- href: a.url,
378
- target: "_blank",
379
- rel: "noopener noreferrer",
380
- download: a.kind !== "link" ? fileName(a.url, a.label) : void 0,
381
- className: "flex items-center gap-3 p-3 rounded-xl",
382
- style: { backgroundColor: "rgba(255,255,255,0.05)", color: "var(--pk-text)" },
383
- children: [
384
- a.kind === "link" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 16 }),
385
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: a.label }),
386
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 15, className: "ml-auto opacity-50" })
387
- ]
388
- },
389
- a.url
390
- )) })
391
- ] })
392
- ] })
393
- ]
394
- }
395
- )
396
- }
397
- );
398
- const isFab = variant === "fab";
399
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
400
- /* @__PURE__ */ jsxRuntime.jsx(
401
- "button",
402
- {
403
- type: "button",
404
- onClick: () => setOpen(true),
405
- "aria-label": "Baixar m\xEDdia kit",
406
- title: "M\xEDdia Kit",
407
- className: `flex items-center justify-center rounded-full transition-transform hover:scale-110 ${isFab ? "w-12 h-12" : "w-11 h-11"}`,
408
- style: isFab ? {
409
- color: "var(--pk-primary)",
410
- border: "1.5px solid var(--pk-primary)",
411
- backgroundColor: "color-mix(in srgb, var(--pk-bg) 70%, transparent)",
412
- backdropFilter: "blur(6px)"
413
- } : { backgroundColor: "rgba(255,255,255,0.07)", color: "var(--pk-text)" },
414
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: isFab ? 20 : 19 })
415
- }
416
- ),
417
- open && typeof document !== "undefined" && reactDom.createPortal(modal, document.body)
418
- ] });
419
- }
420
- function HeroSection({ section, identity, branding }) {
421
- const hasLogo = section.showLogo && branding.logoUrl;
422
- return /* @__PURE__ */ jsxRuntime.jsxs(
423
- "section",
424
- {
425
- className: "relative flex flex-col items-center justify-center min-h-screen overflow-hidden",
426
- id: section.id,
427
- children: [
428
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
429
- section.backgroundImageUrl && /* @__PURE__ */ jsxRuntime.jsx(
430
- "img",
431
- {
432
- src: section.backgroundImageUrl,
433
- alt: identity.name,
434
- className: "h-full w-full object-cover"
435
- }
436
- ),
437
- section.overlayGradient && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", style: { background: section.overlayGradient } })
438
- ] }),
439
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col items-center text-center px-6 pt-20 pb-24", children: [
440
- hasLogo ? /* @__PURE__ */ jsxRuntime.jsx(
441
- "img",
442
- {
443
- src: branding.logoUrl,
444
- alt: `${identity.name} logo`,
445
- className: "mb-6 h-48 w-auto md:h-64 lg:h-80 object-contain drop-shadow-2xl"
446
- }
447
- ) : /* @__PURE__ */ jsxRuntime.jsx(
448
- "h1",
449
- {
450
- className: "text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-4 drop-shadow-lg",
451
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
452
- children: identity.name
453
- }
454
- ),
455
- identity.tagline && /* @__PURE__ */ jsxRuntime.jsx(
456
- "p",
457
- {
458
- className: "text-lg md:text-xl mb-6 max-w-lg opacity-70",
459
- style: { color: "var(--pk-text)" },
460
- children: identity.tagline
461
- }
462
- ),
463
- section.showGenres && identity.genres.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-2 mb-4", children: identity.genres.map((genre) => /* @__PURE__ */ jsxRuntime.jsx(
464
- "span",
465
- {
466
- className: "px-4 py-1.5 text-sm font-semibold backdrop-blur-sm",
467
- style: {
468
- backgroundColor: "rgba(255,255,255,0.08)",
469
- color: "var(--pk-primary)",
470
- border: "1px solid rgba(255,255,255,0.12)",
471
- borderRadius: "9999px"
472
- },
473
- children: genre
474
- },
475
- genre
476
- )) }),
477
- section.showLocation && identity.location && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2 opacity-50", style: { color: "var(--pk-text)" }, children: identity.location }),
478
- section.ctaText && section.ctaUrl && /* @__PURE__ */ jsxRuntime.jsx(
479
- "a",
480
- {
481
- href: section.ctaUrl,
482
- target: "_blank",
483
- rel: "noopener noreferrer",
484
- className: "mt-8 inline-block px-10 py-4 font-bold text-lg tracking-wider transition-transform hover:scale-105",
485
- style: {
486
- backgroundColor: "var(--pk-primary)",
487
- color: "var(--pk-bg)",
488
- borderRadius: "9999px"
489
- },
490
- children: section.ctaText
491
- }
492
- )
493
- ] }),
494
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce opacity-40", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "var(--pk-text)" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12l7 7 7-7" }) }) })
495
- ]
496
- }
497
- );
498
- }
499
- function BioSection({ section }) {
500
- const hasImage = section.imageUrl && section.imagePosition !== "none";
501
- const isTop = section.imagePosition === "top";
502
- const isSide = section.imagePosition === "left" || section.imagePosition === "right";
503
- const isRight = section.imagePosition === "right";
504
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto", children: [
505
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
506
- "h2",
507
- {
508
- className: "text-3xl md:text-4xl font-bold mb-8",
509
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
510
- children: section.title
511
- }
512
- ),
513
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isSide && hasImage ? `grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start` : "", children: [
514
- hasImage && isTop && /* @__PURE__ */ jsxRuntime.jsx(
515
- "img",
516
- {
517
- src: section.imageUrl,
518
- alt: "",
519
- className: "w-full max-h-96 object-cover mb-8",
520
- style: { borderRadius: "var(--pk-radius)" },
521
- loading: "lazy"
522
- }
523
- ),
524
- hasImage && isSide && !isRight && /* @__PURE__ */ jsxRuntime.jsx(
525
- "img",
526
- {
527
- src: section.imageUrl,
528
- alt: "",
529
- className: "w-full aspect-[3/4] object-cover",
530
- style: { borderRadius: "var(--pk-radius)" },
531
- loading: "lazy"
532
- }
533
- ),
534
- /* @__PURE__ */ jsxRuntime.jsx(
535
- "div",
536
- {
537
- className: "prose prose-invert max-w-none text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_a]:underline [&_a]:decoration-[var(--pk-primary)]",
538
- style: { color: "var(--pk-muted)" },
539
- dangerouslySetInnerHTML: { __html: renderMarkdown(section.content) }
540
- }
541
- ),
542
- hasImage && isSide && isRight && /* @__PURE__ */ jsxRuntime.jsx(
543
- "img",
544
- {
545
- src: section.imageUrl,
546
- alt: "",
547
- className: "w-full aspect-[3/4] object-cover",
548
- style: { borderRadius: "var(--pk-radius)" },
549
- loading: "lazy"
550
- }
551
- )
552
- ] })
553
- ] }) });
554
- }
555
- function isInstagramEmbed(item) {
556
- return item.url.includes("instagram.com");
557
- }
558
- function getInstagramEmbedUrl(url) {
559
- const match = url.match(/instagram\.com\/(reel|p)\/([^/?]+)/);
560
- if (match) return `https://www.instagram.com/${match[1]}/${match[2]}/embed`;
561
- return url;
562
- }
563
- function MediaItem({ item, index, cols, isFeatured, onImageClick }) {
564
- if (isInstagramEmbed(item)) {
565
- return /* @__PURE__ */ jsxRuntime.jsx(
566
- "div",
567
- {
568
- className: `overflow-hidden ${isFeatured && index === 0 ? "col-span-2" : ""}`,
569
- style: { borderRadius: "var(--pk-radius)" },
570
- children: /* @__PURE__ */ jsxRuntime.jsx(
571
- "iframe",
572
- {
573
- src: getInstagramEmbedUrl(item.url),
574
- className: "w-full border-0",
575
- style: { minHeight: cols <= 2 ? "500px" : "420px" },
576
- loading: "lazy",
577
- allowtransparency: "true",
578
- allow: "encrypted-media",
579
- title: item.alt ?? "Instagram"
580
- }
581
- )
582
- }
583
- );
584
- }
585
- return /* @__PURE__ */ jsxRuntime.jsx(
586
- "img",
587
- {
588
- src: item.url,
589
- alt: item.alt ?? "",
590
- className: `w-full object-cover cursor-pointer hover:opacity-90 transition-opacity ${isFeatured && index === 0 ? "col-span-2 aspect-[16/9]" : "aspect-square"}`,
591
- style: { borderRadius: "var(--pk-radius)" },
592
- loading: "lazy",
593
- onClick: () => onImageClick(index)
594
- }
595
- );
596
- }
597
- function GallerySection({ section }) {
598
- const [lightboxIdx, setLightboxIdx] = react.useState(null);
599
- const cols = section.columns ?? 3;
600
- const isFeatured = section.layout === "featured-grid";
601
- const isCarousel = section.layout === "carousel";
602
- const imageItems = section.media.filter((m) => !isInstagramEmbed(m));
603
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto", children: [
604
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
605
- "h2",
606
- {
607
- className: "text-3xl md:text-4xl font-bold mb-8",
608
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
609
- children: section.title
610
- }
611
- ),
612
- isCarousel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 -mx-6 px-6 scrollbar-hide", children: section.media.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none w-72 md:w-96 snap-center", children: /* @__PURE__ */ jsxRuntime.jsx(MediaItem, { item, index: i, cols, isFeatured: false, onImageClick: setLightboxIdx }) }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx(
613
- "div",
614
- {
615
- className: `grid gap-3 md:gap-4 ${isFeatured ? "grid-cols-2" : cols === 2 ? "grid-cols-1 sm:grid-cols-2" : cols === 4 ? "grid-cols-2 md:grid-cols-4" : "grid-cols-2 md:grid-cols-3"}`,
616
- children: section.media.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(MediaItem, { item, index: i, cols, isFeatured, onImageClick: setLightboxIdx }, i))
617
- }
618
- ),
619
- lightboxIdx !== null && imageItems[lightboxIdx] && /* @__PURE__ */ jsxRuntime.jsxs(
620
- "div",
621
- {
622
- className: "fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4",
623
- onClick: () => setLightboxIdx(null),
624
- children: [
625
- /* @__PURE__ */ jsxRuntime.jsx(
626
- "button",
627
- {
628
- className: "absolute top-4 right-4 text-white text-3xl font-light hover:opacity-70 z-10",
629
- onClick: () => setLightboxIdx(null),
630
- children: "\xD7"
631
- }
632
- ),
633
- /* @__PURE__ */ jsxRuntime.jsx(
634
- "button",
635
- {
636
- className: "absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10",
637
- onClick: (e) => {
638
- e.stopPropagation();
639
- setLightboxIdx((lightboxIdx - 1 + imageItems.length) % imageItems.length);
640
- },
641
- children: "\u2039"
642
- }
643
- ),
644
- /* @__PURE__ */ jsxRuntime.jsx(
645
- "button",
646
- {
647
- className: "absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10",
648
- onClick: (e) => {
649
- e.stopPropagation();
650
- setLightboxIdx((lightboxIdx + 1) % imageItems.length);
651
- },
652
- children: "\u203A"
653
- }
654
- ),
655
- /* @__PURE__ */ jsxRuntime.jsx(
656
- "img",
657
- {
658
- src: imageItems[lightboxIdx].url,
659
- alt: imageItems[lightboxIdx].alt ?? "",
660
- className: "max-h-[85vh] max-w-[90vw] object-contain",
661
- onClick: (e) => e.stopPropagation()
662
- }
663
- )
664
- ]
665
- }
666
- )
667
- ] }) });
668
- }
669
- function VideoGridSection({ section }) {
670
- const isFeatured = section.layout === "featured";
671
- const isList = section.layout === "list";
672
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto", children: [
673
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
674
- "h2",
675
- {
676
- className: "text-3xl md:text-4xl font-bold mb-8",
677
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
678
- children: section.title
679
- }
680
- ),
681
- isFeatured && section.videos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
682
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full overflow-hidden", style: { borderRadius: "var(--pk-radius)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
683
- "iframe",
684
- {
685
- src: `https://www.youtube.com/embed/${section.videos[0].videoId}`,
686
- title: section.videos[0].title ?? "Video",
687
- className: "h-full w-full",
688
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
689
- allowFullScreen: true,
690
- loading: "lazy"
691
- }
692
- ) }),
693
- section.videos[0].title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", style: { color: "var(--pk-muted)" }, children: section.videos[0].title }),
694
- section.videos.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: section.videos.slice(1).map((video, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
695
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden", style: { borderRadius: "var(--pk-radius)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
696
- "iframe",
697
- {
698
- src: `https://www.youtube.com/embed/${video.videoId}`,
699
- title: video.title ?? "Video",
700
- className: "h-full w-full",
701
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
702
- allowFullScreen: true,
703
- loading: "lazy"
704
- }
705
- ) }),
706
- video.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm", style: { color: "var(--pk-muted)" }, children: video.title })
707
- ] }, i)) })
708
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid gap-4 md:gap-6 ${isList ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`, children: [
709
- section.videos.map((video, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
710
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden", style: { borderRadius: "var(--pk-radius)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
711
- "iframe",
712
- {
713
- src: `https://www.youtube.com/embed/${video.videoId}`,
714
- title: video.title ?? "Video",
715
- className: "h-full w-full",
716
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
717
- allowFullScreen: true,
718
- loading: "lazy"
719
- }
720
- ) }),
721
- video.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm", style: { color: "var(--pk-muted)" }, children: video.title })
722
- ] }, i)),
723
- section.channelUrl && /* @__PURE__ */ jsxRuntime.jsx(
724
- "a",
725
- {
726
- href: section.channelUrl,
727
- target: "_blank",
728
- rel: "noopener noreferrer",
729
- className: "aspect-video overflow-hidden flex items-center justify-center border border-white/10 hover:border-white/30 transition-colors",
730
- style: { borderRadius: "var(--pk-radius)", background: "var(--pk-alt-bg, rgba(255,255,255,0.05))" },
731
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", style: { color: "var(--pk-text)", fontFamily: "var(--pk-font-heading)" }, children: "Ver todos \u2192" })
732
- }
733
- )
734
- ] })
735
- ] }) });
736
- }
737
- var BRAND = {
738
- instagram: si.SiInstagram,
739
- youtube: si.SiYoutube,
740
- soundcloud: si.SiSoundcloud,
741
- tiktok: si.SiTiktok,
742
- spotify: si.SiSpotify,
743
- whatsapp: si.SiWhatsapp,
744
- "apple-music": si.SiApplemusic,
745
- bandcamp: si.SiBandcamp,
746
- facebook: si.SiFacebook,
747
- twitter: si.SiX,
748
- telegram: si.SiTelegram,
749
- beatport: si.SiBeatport,
750
- mixcloud: si.SiMixcloud,
751
- drive: si.SiGoogledrive,
752
- email: lucideReact.Mail,
753
- website: lucideReact.Globe
754
- };
755
- function PlatformIcon({
756
- platform,
757
- size = 20,
758
- style,
759
- className
760
- }) {
761
- const Icon = BRAND[platform] ?? lucideReact.ExternalLink;
762
- return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size, style, className });
763
- }
764
- function SocialLinksSection({ section }) {
765
- const layout = section.layout ?? "buttons";
766
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl mx-auto", children: [
767
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
768
- "h2",
769
- {
770
- className: "text-3xl md:text-4xl font-bold mb-10 text-center",
771
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
772
- children: section.title
773
- }
774
- ),
775
- layout === "icons" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5", children: section.links.map((link) => {
776
- const color = platformColors[link.platform];
777
- return /* @__PURE__ */ jsxRuntime.jsx(
778
- "a",
779
- {
780
- href: link.url,
781
- target: "_blank",
782
- rel: "noopener noreferrer",
783
- className: "group flex items-center justify-center w-16 h-16 rounded-full transition-all duration-300 hover:scale-110 hover:shadow-lg",
784
- style: {
785
- backgroundColor: color + "15",
786
- boxShadow: `0 0 0 1px ${color}25`
787
- },
788
- title: link.label ?? platformLabels[link.platform],
789
- children: /* @__PURE__ */ jsxRuntime.jsx(PlatformIcon, { platform: link.platform, size: 26, style: { color } })
790
- },
791
- link.platform + link.url
792
- );
793
- }) }),
794
- layout === "buttons" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: section.links.map((link) => {
795
- const color = platformColors[link.platform];
796
- return /* @__PURE__ */ jsxRuntime.jsxs(
797
- "a",
798
- {
799
- href: link.url,
800
- target: "_blank",
801
- rel: "noopener noreferrer",
802
- className: "group relative flex items-center gap-5 px-6 py-4 font-medium transition-all duration-300 hover:scale-[1.02] overflow-hidden",
803
- style: {
804
- backgroundColor: color + "10",
805
- color: "var(--pk-text)",
806
- borderRadius: "var(--pk-radius)",
807
- border: `1px solid ${color}30`
808
- },
809
- children: [
810
- /* @__PURE__ */ jsxRuntime.jsx(
811
- "div",
812
- {
813
- className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
814
- style: { background: `linear-gradient(135deg, ${color}18, transparent 60%)` }
815
- }
816
- ),
817
- /* @__PURE__ */ jsxRuntime.jsx(
818
- "div",
819
- {
820
- className: "relative z-10 flex items-center justify-center w-10 h-10 rounded-full shrink-0",
821
- style: { backgroundColor: color + "20" },
822
- children: /* @__PURE__ */ jsxRuntime.jsx(PlatformIcon, { platform: link.platform, size: 20, style: { color } })
823
- }
824
- ),
825
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 text-base", children: link.label ?? platformLabels[link.platform] }),
826
- /* @__PURE__ */ jsxRuntime.jsx(
827
- lucideReact.ExternalLink,
828
- {
829
- size: 16,
830
- className: "relative z-10 ml-auto opacity-0 group-hover:opacity-50 transition-opacity duration-300",
831
- style: { color: "var(--pk-text)" }
832
- }
833
- )
834
- ]
835
- },
836
- link.platform + link.url
837
- );
838
- }) }),
839
- layout === "list" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: section.links.map((link) => {
840
- const color = platformColors[link.platform];
841
- return /* @__PURE__ */ jsxRuntime.jsxs(
842
- "a",
843
- {
844
- href: link.url,
845
- target: "_blank",
846
- rel: "noopener noreferrer",
847
- className: "group flex items-center gap-4 py-4 px-3 transition-all duration-200 hover:bg-white/5 rounded-lg",
848
- children: [
849
- /* @__PURE__ */ jsxRuntime.jsx(
850
- "div",
851
- {
852
- className: "flex items-center justify-center w-9 h-9 rounded-full shrink-0",
853
- style: { backgroundColor: color + "18" },
854
- children: /* @__PURE__ */ jsxRuntime.jsx(PlatformIcon, { platform: link.platform, size: 18, style: { color } })
855
- }
856
- ),
857
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--pk-text)" }, children: link.label ?? platformLabels[link.platform] }),
858
- /* @__PURE__ */ jsxRuntime.jsx(
859
- lucideReact.ExternalLink,
860
- {
861
- size: 14,
862
- className: "ml-auto opacity-0 group-hover:opacity-40 transition-opacity",
863
- style: { color: "var(--pk-text)" }
864
- }
865
- )
866
- ]
867
- },
868
- link.platform + link.url
869
- );
870
- }) })
871
- ] }) });
872
- }
873
- function EmbedSection({ section }) {
874
- const isVideo = section.aspectRatio === "16:9" || section.embedType === "youtube";
875
- const height = section.height ?? (isVideo ? void 0 : 352);
876
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto", children: [
877
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
878
- "h2",
879
- {
880
- className: "text-3xl md:text-4xl font-bold mb-8",
881
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
882
- children: section.title
883
- }
884
- ),
885
- section.embedHtml && section.embedType === "custom" ? /* @__PURE__ */ jsxRuntime.jsx(
886
- "div",
887
- {
888
- className: "overflow-hidden",
889
- style: { borderRadius: "var(--pk-radius)" },
890
- dangerouslySetInnerHTML: { __html: section.embedHtml }
891
- }
892
- ) : isVideo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden", style: { borderRadius: "var(--pk-radius)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
893
- "iframe",
894
- {
895
- src: section.embedUrl,
896
- className: "h-full w-full",
897
- allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
898
- loading: "lazy",
899
- title: section.title ?? "Embed"
900
- }
901
- ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", style: { borderRadius: "var(--pk-radius)", height }, children: /* @__PURE__ */ jsxRuntime.jsx(
902
- "iframe",
903
- {
904
- src: section.embedUrl,
905
- className: "w-full h-full",
906
- allow: "autoplay; clipboard-write; encrypted-media; fullscreen",
907
- loading: "lazy",
908
- title: section.title ?? "Embed"
909
- }
910
- ) })
911
- ] }) });
912
- }
913
- function ProjectSection({ section }) {
914
- const isSideBySide = section.layout === "side-by-side";
915
- const hasMedia = section.media && section.media.length > 0;
916
- const firstMedia = hasMedia ? section.media[0] : null;
917
- const isVideo = firstMedia?.type === "video";
918
- const MediaBlock = () => {
919
- if (!firstMedia) return null;
920
- if (isVideo) {
921
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full", style: { paddingBottom: "56.25%", borderRadius: "var(--pk-radius)", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
922
- "iframe",
923
- {
924
- src: firstMedia.url,
925
- className: "absolute inset-0 w-full h-full",
926
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
927
- allowFullScreen: true,
928
- loading: "lazy",
929
- title: firstMedia.alt ?? section.title ?? "Video"
930
- }
931
- ) });
932
- }
933
- return /* @__PURE__ */ jsxRuntime.jsx(
934
- "img",
935
- {
936
- src: firstMedia.url,
937
- alt: firstMedia.alt ?? "",
938
- className: "w-full h-full object-cover",
939
- style: { borderRadius: "var(--pk-radius)" },
940
- loading: "lazy"
941
- }
942
- );
943
- };
944
- const ContentBlock = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
945
- section.label && /* @__PURE__ */ jsxRuntime.jsx(
946
- "span",
947
- {
948
- className: "inline-block self-start px-4 py-1.5 text-xs font-bold uppercase tracking-[0.15em] mb-5",
949
- style: {
950
- backgroundColor: "transparent",
951
- color: "var(--pk-accent)",
952
- border: "1px solid var(--pk-accent)",
953
- borderRadius: "4px"
954
- },
955
- children: section.label
956
- }
957
- ),
958
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
959
- "h2",
960
- {
961
- className: "text-3xl md:text-4xl lg:text-5xl font-bold mb-5",
962
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
963
- children: section.title
964
- }
965
- ),
966
- section.content && /* @__PURE__ */ jsxRuntime.jsx(
967
- "div",
968
- {
969
- className: "text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_strong]:text-white [&_em]:italic",
970
- style: { color: "var(--pk-muted)" },
971
- dangerouslySetInnerHTML: { __html: renderMarkdown(section.content) }
972
- }
973
- ),
974
- section.tags && section.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-5", children: section.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
975
- "span",
976
- {
977
- className: "px-3 py-1 text-xs font-medium",
978
- style: {
979
- color: "var(--pk-muted)",
980
- border: "1px solid rgba(255,255,255,0.1)",
981
- borderRadius: "var(--pk-radius)"
982
- },
983
- children: tag
984
- },
985
- tag
986
- )) }),
987
- section.links && section.links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-4 mt-6", children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
988
- "a",
989
- {
990
- href: link.url,
991
- target: "_blank",
992
- rel: "noopener noreferrer",
993
- className: "text-sm font-medium underline underline-offset-4 hover:opacity-80 transition-opacity",
994
- style: { color: "var(--pk-primary)" },
995
- children: link.label
996
- },
997
- link.url
998
- )) })
999
- ] });
1000
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-20 md:py-28 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl mx-auto", children: isSideBySide && hasMedia ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center", children: [
1001
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-1", children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, {}) }),
1002
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2", children: /* @__PURE__ */ jsxRuntime.jsx(MediaBlock, {}) })
1003
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1004
- /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, {}),
1005
- hasMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 gap-4 mt-8 ${section.media.length > 1 ? "md:grid-cols-2" : ""}`, children: section.media.map(
1006
- (item, i) => item.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden", style: { borderRadius: "var(--pk-radius)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1007
- "iframe",
1008
- {
1009
- src: item.url,
1010
- className: "h-full w-full",
1011
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
1012
- allowFullScreen: true,
1013
- loading: "lazy",
1014
- title: item.alt ?? "Video"
1015
- }
1016
- ) }, i) : /* @__PURE__ */ jsxRuntime.jsx(
1017
- "img",
1018
- {
1019
- src: item.url,
1020
- alt: item.alt ?? "",
1021
- className: "w-full aspect-[4/3] object-cover",
1022
- style: { borderRadius: "var(--pk-radius)" },
1023
- loading: "lazy"
1024
- },
1025
- i
1026
- )
1027
- ) })
1028
- ] }) }) });
1029
- }
1030
- function StatsSection({ section }) {
1031
- const isGrid = section.layout === "grid";
1032
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto", children: [
1033
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1034
- "h2",
1035
- {
1036
- className: "text-3xl md:text-4xl font-bold mb-8 text-center",
1037
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1038
- children: section.title
1039
- }
1040
- ),
1041
- /* @__PURE__ */ jsxRuntime.jsx(
1042
- "div",
1043
- {
1044
- className: isGrid ? "grid grid-cols-2 md:grid-cols-4 gap-6" : "flex flex-wrap justify-center gap-8 md:gap-12",
1045
- children: section.stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
1046
- /* @__PURE__ */ jsxRuntime.jsx(
1047
- "div",
1048
- {
1049
- className: "text-3xl md:text-4xl font-bold mb-1",
1050
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-primary)" },
1051
- children: stat.value
1052
- }
1053
- ),
1054
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", style: { color: "var(--pk-muted)" }, children: stat.label })
1055
- ] }, i))
1056
- }
1057
- )
1058
- ] }) });
1059
- }
1060
- function VenueListSection({ section }) {
1061
- const layout = section.layout ?? "grid";
1062
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto", children: [
1063
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1064
- "h2",
1065
- {
1066
- className: "text-3xl md:text-4xl font-bold mb-10",
1067
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1068
- children: section.title
1069
- }
1070
- ),
1071
- layout === "logo-cloud" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-6 md:gap-8", children: section.venues.map((venue, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
1072
- venue.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: venue.logoUrl, alt: venue.name, className: "h-12 w-12 object-contain opacity-70", loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(
1073
- "div",
1074
- {
1075
- className: "h-12 w-12 flex items-center justify-center text-lg font-bold opacity-70",
1076
- style: { backgroundColor: "rgba(255,255,255,0.06)", color: "var(--pk-text)", borderRadius: "var(--pk-radius)" },
1077
- children: venue.name[0]
1078
- }
1079
- ),
1080
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-center", style: { color: "var(--pk-muted)" }, children: venue.name })
1081
- ] }, i)) }) : layout === "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: section.venues.map((venue, i) => /* @__PURE__ */ jsxRuntime.jsxs(
1082
- "div",
1083
- {
1084
- className: "flex items-center justify-between py-3 px-4",
1085
- style: { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: "var(--pk-radius)" },
1086
- children: [
1087
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--pk-text)" }, children: venue.name }),
1088
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--pk-muted)" }, children: [venue.city, venue.year].filter(Boolean).join(" \xB7 ") })
1089
- ]
1090
- },
1091
- i
1092
- )) }) : (
1093
- /* Organic flowing tag cloud */
1094
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: section.venues.map((venue, i) => {
1095
- const isLong = venue.name.length > 12;
1096
- const isShort = venue.name.length < 6;
1097
- const sizeClass = isLong ? "text-base md:text-lg px-6 py-3" : isShort ? "text-sm px-4 py-2.5" : "text-sm md:text-base px-5 py-3";
1098
- const isHighlight = i % 5 === 0 || i % 7 === 0;
1099
- return /* @__PURE__ */ jsxRuntime.jsx(
1100
- "div",
1101
- {
1102
- className: `inline-flex flex-col items-start transition-all duration-300 hover:scale-105 ${sizeClass}`,
1103
- style: {
1104
- backgroundColor: isHighlight ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.03)",
1105
- border: isHighlight ? "1px solid rgba(255,255,255,0.12)" : "1px solid rgba(255,255,255,0.06)",
1106
- borderRadius: "9999px"
1107
- },
1108
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold whitespace-nowrap", style: { color: "var(--pk-text)" }, children: [
1109
- venue.name,
1110
- venue.city && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal ml-2 opacity-50", style: { color: "var(--pk-muted)", fontSize: "0.8em" }, children: venue.city })
1111
- ] })
1112
- },
1113
- i
1114
- );
1115
- }) })
1116
- )
1117
- ] }) });
1118
- }
1119
- function CTASection({ section }) {
1120
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-24 md:py-36 px-6 text-center", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto", children: [
1121
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1122
- "h2",
1123
- {
1124
- className: "text-4xl md:text-5xl lg:text-6xl font-bold mb-6",
1125
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1126
- children: section.title
1127
- }
1128
- ),
1129
- section.content && /* @__PURE__ */ jsxRuntime.jsx(
1130
- "div",
1131
- {
1132
- className: "text-base md:text-lg mb-10 [&_p]:mb-2",
1133
- style: { color: "var(--pk-muted)" },
1134
- dangerouslySetInnerHTML: { __html: renderMarkdown(section.content) }
1135
- }
1136
- ),
1137
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-5", children: section.ctaButtons.map((btn) => {
1138
- const isPrimary = btn.variant === "primary";
1139
- const isOutline = btn.variant === "outline";
1140
- return /* @__PURE__ */ jsxRuntime.jsx(
1141
- "a",
1142
- {
1143
- href: btn.url,
1144
- target: "_blank",
1145
- rel: "noopener noreferrer",
1146
- className: "inline-flex items-center justify-center px-10 py-4 text-base font-bold tracking-[0.1em] uppercase transition-all duration-300 hover:scale-105 min-w-[200px]",
1147
- style: {
1148
- backgroundColor: isPrimary ? "var(--pk-primary)" : isOutline ? "transparent" : "var(--pk-secondary)",
1149
- color: isPrimary ? "var(--pk-bg)" : "var(--pk-text)",
1150
- border: isOutline ? "2px solid rgba(255,255,255,0.2)" : "none",
1151
- borderRadius: "9999px",
1152
- boxShadow: isPrimary ? "0 8px 32px rgba(0,0,0,0.3)" : "none"
1153
- },
1154
- children: btn.label
1155
- },
1156
- btn.url
1157
- );
1158
- }) })
1159
- ] }) });
1160
- }
1161
- function TextSection({ section }) {
1162
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 md:py-24 px-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto", children: [
1163
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1164
- "h2",
1165
- {
1166
- className: "text-3xl md:text-4xl font-bold mb-8",
1167
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1168
- children: section.title
1169
- }
1170
- ),
1171
- /* @__PURE__ */ jsxRuntime.jsx(
1172
- "div",
1173
- {
1174
- className: "text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_em]:italic [&_a]:underline [&_a]:decoration-[var(--pk-primary)]",
1175
- style: { color: "var(--pk-muted)" },
1176
- dangerouslySetInnerHTML: { __html: renderMarkdown(section.content) }
1177
- }
1178
- )
1179
- ] }) });
1180
- }
1181
- function ProfileHeader({ section, page }) {
1182
- const { identity, branding } = page;
1183
- const isHub = page.layout === "hub";
1184
- const socials = section.socials ?? page.socialLinks ?? [];
1185
- const hasLogo = section.showLogo && branding.logoUrl;
1186
- const heroRef = react.useRef(null);
1187
- const [sy, setSy] = react.useState(0);
1188
- react.useEffect(() => {
1189
- const container = document.querySelector(".fixed.inset-0");
1190
- if (!container) return;
1191
- const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
1192
- if (reduce) return;
1193
- let raf = 0;
1194
- const onScroll = () => {
1195
- if (raf) return;
1196
- raf = requestAnimationFrame(() => {
1197
- setSy(container.scrollTop);
1198
- raf = 0;
1199
- });
1200
- };
1201
- container.addEventListener("scroll", onScroll, { passive: true });
1202
- return () => {
1203
- container.removeEventListener("scroll", onScroll);
1204
- if (raf) cancelAnimationFrame(raf);
1205
- };
1206
- }, []);
1207
- const heroH = heroRef.current?.offsetHeight ?? 700;
1208
- const p = Math.min(1, sy / heroH);
1209
- const imageOffsetTop = section.imageOffsetTop ?? "0px";
1210
- const imageTransform = `translateY(calc(${imageOffsetTop} + ${sy * 0.22}px)) scale(1.18)`;
1211
- const logoTransform = `translateY(${-sy * 0.5}px) scale(${1 - p * 0.12})`;
1212
- const logoOpacity = Math.max(0, 1 - p * 1.25);
1213
- const hintOpacity = Math.max(0, 1 - p * 4);
1214
- const scrollTo = (id) => {
1215
- const el = typeof document !== "undefined" ? document.getElementById(id) : null;
1216
- el?.scrollIntoView({ behavior: "smooth", block: "start" });
1217
- };
1218
- return /* @__PURE__ */ jsxRuntime.jsxs("header", { id: section.id, className: "relative", children: [
1219
- /* @__PURE__ */ jsxRuntime.jsxs(
1220
- "div",
1221
- {
1222
- ref: heroRef,
1223
- className: `relative w-full h-[86vh] max-h-[880px] overflow-hidden ${isHub ? "sm:rounded-[26px]" : ""}`,
1224
- children: [
1225
- section.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
1226
- "img",
1227
- {
1228
- src: section.imageUrl,
1229
- alt: identity.name,
1230
- className: "absolute inset-0 h-full w-full object-cover will-change-transform",
1231
- style: { transform: imageTransform, objectPosition: section.imageObjectPosition }
1232
- }
1233
- ),
1234
- /* @__PURE__ */ jsxRuntime.jsx(
1235
- "div",
1236
- {
1237
- className: "absolute inset-0",
1238
- style: {
1239
- background: section.overlayGradient ?? "linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 60%, var(--pk-bg) 100%)"
1240
- }
1241
- }
1242
- ),
1243
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-center text-center px-6 pb-14", children: hasLogo ? /* @__PURE__ */ jsxRuntime.jsx(
1244
- "img",
1245
- {
1246
- src: branding.logoUrl,
1247
- alt: `${identity.name} logo`,
1248
- className: "w-[82%] max-w-[380px] h-auto object-contain drop-shadow-[0_4px_24px_rgba(0,0,0,0.55)] will-change-transform",
1249
- style: { transform: logoTransform, opacity: logoOpacity }
1250
- }
1251
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1252
- "h1",
1253
- {
1254
- className: "text-5xl sm:text-6xl font-bold tracking-tight drop-shadow-lg will-change-transform",
1255
- style: {
1256
- fontFamily: "var(--pk-font-heading)",
1257
- color: "var(--pk-text)",
1258
- transform: logoTransform,
1259
- opacity: logoOpacity
1260
- },
1261
- children: identity.name
1262
- }
1263
- ) }),
1264
- /* @__PURE__ */ jsxRuntime.jsx(
1265
- "div",
1266
- {
1267
- className: "absolute bottom-4 left-1/2 -translate-x-1/2 animate-bounce",
1268
- style: { opacity: hintOpacity, color: "var(--pk-text)" },
1269
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 22 })
1270
- }
1271
- )
1272
- ]
1273
- }
1274
- ),
1275
- (identity.tagline || section.showLocation && identity.location) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mt-5 px-4", children: [
1276
- identity.tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium", style: { color: "var(--pk-text)" }, children: identity.tagline }),
1277
- section.showLocation && identity.location && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1 opacity-60", style: { color: "var(--pk-muted)" }, children: identity.location })
1278
- ] }),
1279
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-3 mt-4 px-4", children: socials.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
1280
- "a",
1281
- {
1282
- href: link.url,
1283
- target: "_blank",
1284
- rel: "noopener noreferrer",
1285
- "aria-label": link.label ?? platformLabels[link.platform] ?? "Link",
1286
- className: "flex items-center justify-center w-11 h-11 rounded-full transition-transform hover:scale-110",
1287
- style: { backgroundColor: "rgba(255,255,255,0.07)", color: "var(--pk-text)" },
1288
- children: /* @__PURE__ */ jsxRuntime.jsx(PlatformIcon, { platform: link.platform, size: 19 })
1289
- },
1290
- link.platform + link.url
1291
- )) }),
1292
- section.navPills && section.navPills.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1293
- "nav",
1294
- {
1295
- className: "flex gap-2 overflow-x-auto scrollbar-hide mt-4 px-4 pb-1 justify-start sm:justify-center",
1296
- "aria-label": "Se\xE7\xF5es",
1297
- children: section.navPills.map((pill) => /* @__PURE__ */ jsxRuntime.jsx(
1298
- "button",
1299
- {
1300
- type: "button",
1301
- onClick: () => scrollTo(pill.targetId),
1302
- className: "whitespace-nowrap px-4 py-2 text-sm font-medium rounded-full transition-colors shrink-0",
1303
- style: {
1304
- backgroundColor: "rgba(255,255,255,0.06)",
1305
- color: "var(--pk-text)",
1306
- border: "1px solid rgba(255,255,255,0.08)"
1307
- },
1308
- children: pill.label
1309
- },
1310
- pill.targetId
1311
- ))
1312
- }
1313
- )
1314
- ] });
1315
- }
1316
- function LinkCard({ item }) {
1317
- return /* @__PURE__ */ jsxRuntime.jsxs(
1318
- "a",
1319
- {
1320
- href: item.url,
1321
- target: "_blank",
1322
- rel: "noopener noreferrer",
1323
- className: "group flex items-center gap-4 p-3 transition-all duration-200 hover:scale-[1.015] active:scale-[0.99]",
1324
- style: {
1325
- backgroundColor: "rgba(255,255,255,0.05)",
1326
- border: "1px solid rgba(255,255,255,0.07)",
1327
- borderRadius: "var(--pk-radius)"
1328
- },
1329
- children: [
1330
- /* @__PURE__ */ jsxRuntime.jsx(
1331
- "div",
1332
- {
1333
- className: "shrink-0 flex items-center justify-center w-12 h-12 overflow-hidden",
1334
- style: { borderRadius: "calc(var(--pk-radius) - 4px)", backgroundColor: "rgba(255,255,255,0.06)" },
1335
- children: item.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.thumbnailUrl, alt: "", className: "w-full h-full object-cover", loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(PlatformIcon, { platform: item.icon ?? "custom", size: 20, style: { color: "var(--pk-primary)" } })
1336
- }
1337
- ),
1338
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
1339
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1340
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold truncate", style: { color: "var(--pk-text)" }, children: item.title }),
1341
- item.badge && /* @__PURE__ */ jsxRuntime.jsx(
1342
- "span",
1343
- {
1344
- className: "text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full shrink-0",
1345
- style: { backgroundColor: "var(--pk-primary)", color: "var(--pk-bg)" },
1346
- children: item.badge
1347
- }
1348
- )
1349
- ] }),
1350
- item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs truncate mt-0.5", style: { color: "var(--pk-muted)" }, children: item.subtitle })
1351
- ] }),
1352
- /* @__PURE__ */ jsxRuntime.jsx(
1353
- lucideReact.ChevronRight,
1354
- {
1355
- size: 18,
1356
- className: "shrink-0 opacity-40 group-hover:opacity-80 group-hover:translate-x-0.5 transition-all",
1357
- style: { color: "var(--pk-text)" }
1358
- }
1359
- )
1360
- ]
1361
- }
1362
- );
1363
- }
1364
- function LinksBlock({ section }) {
1365
- const isGrid = section.layout === "grid";
1366
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-6", id: section.id, children: [
1367
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1368
- "h2",
1369
- {
1370
- className: "text-xl md:text-2xl font-bold mb-4 px-1",
1371
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1372
- children: section.title
1373
- }
1374
- ),
1375
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: isGrid ? "grid grid-cols-2 gap-3" : "flex flex-col gap-3", children: section.links.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(LinkCard, { item }, item.url + i)) })
1376
- ] });
1377
- }
1378
- function Carousel({ title, children }) {
1379
- const trackRef = react.useRef(null);
1380
- const [atStart, setAtStart] = react.useState(true);
1381
- const [atEnd, setAtEnd] = react.useState(false);
1382
- const update = () => {
1383
- const el = trackRef.current;
1384
- if (!el) return;
1385
- setAtStart(el.scrollLeft <= 2);
1386
- setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 2);
1387
- };
1388
- react.useEffect(() => {
1389
- update();
1390
- const el = trackRef.current;
1391
- if (!el) return;
1392
- el.addEventListener("scroll", update, { passive: true });
1393
- window.addEventListener("resize", update);
1394
- return () => {
1395
- el.removeEventListener("scroll", update);
1396
- window.removeEventListener("resize", update);
1397
- };
1398
- }, []);
1399
- const nudge = (dir) => {
1400
- const el = trackRef.current;
1401
- if (!el) return;
1402
- el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: "smooth" });
1403
- };
1404
- const arrowStyle = (disabled) => ({
1405
- backgroundColor: "rgba(255,255,255,0.06)",
1406
- color: "var(--pk-text)",
1407
- opacity: disabled ? 0.25 : 1,
1408
- borderRadius: "9999px"
1409
- });
1410
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1411
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [
1412
- title && /* @__PURE__ */ jsxRuntime.jsx(
1413
- "h2",
1414
- {
1415
- className: "text-xl md:text-2xl font-bold",
1416
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1417
- children: title
1418
- }
1419
- ),
1420
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
1421
- /* @__PURE__ */ jsxRuntime.jsx(
1422
- "button",
1423
- {
1424
- type: "button",
1425
- "aria-label": "Anterior",
1426
- onClick: () => nudge(-1),
1427
- disabled: atStart,
1428
- className: "flex items-center justify-center w-9 h-9 transition-opacity",
1429
- style: arrowStyle(atStart),
1430
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 18 })
1431
- }
1432
- ),
1433
- /* @__PURE__ */ jsxRuntime.jsx(
1434
- "button",
1435
- {
1436
- type: "button",
1437
- "aria-label": "Pr\xF3ximo",
1438
- onClick: () => nudge(1),
1439
- disabled: atEnd,
1440
- className: "flex items-center justify-center w-9 h-9 transition-opacity",
1441
- style: arrowStyle(atEnd),
1442
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 18 })
1443
- }
1444
- )
1445
- ] })
1446
- ] }),
1447
- /* @__PURE__ */ jsxRuntime.jsx(
1448
- "div",
1449
- {
1450
- ref: trackRef,
1451
- className: "flex gap-3 overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-1",
1452
- children
1453
- }
1454
- )
1455
- ] });
1456
- }
1457
- function ReleaseCard({ item, cta, wide }) {
1458
- return /* @__PURE__ */ jsxRuntime.jsxs(
1459
- "a",
1460
- {
1461
- href: item.url,
1462
- target: "_blank",
1463
- rel: "noopener noreferrer",
1464
- className: `group ${wide ? "flex-none w-40 snap-start" : ""} flex flex-col transition-transform hover:scale-[1.02]`,
1465
- children: [
1466
- /* @__PURE__ */ jsxRuntime.jsxs(
1467
- "div",
1468
- {
1469
- className: "relative w-full aspect-square overflow-hidden",
1470
- style: { borderRadius: "var(--pk-radius)", backgroundColor: "rgba(255,255,255,0.05)" },
1471
- children: [
1472
- /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.artworkUrl, alt: item.title, className: "w-full h-full object-cover", loading: "lazy" }),
1473
- /* @__PURE__ */ jsxRuntime.jsx(
1474
- "div",
1475
- {
1476
- className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
1477
- style: { background: "rgba(0,0,0,0.35)" },
1478
- children: /* @__PURE__ */ jsxRuntime.jsx(
1479
- "span",
1480
- {
1481
- className: "flex items-center justify-center w-11 h-11 rounded-full",
1482
- style: { backgroundColor: "var(--pk-primary)", color: "var(--pk-bg)" },
1483
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { size: 20, fill: "currentColor" })
1484
- }
1485
- )
1486
- }
1487
- )
1488
- ]
1489
- }
1490
- ),
1491
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 px-0.5", children: [
1492
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold truncate", style: { color: "var(--pk-text)" }, children: item.title }),
1493
- item.artist && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs truncate", style: { color: "var(--pk-muted)" }, children: item.artist }),
1494
- /* @__PURE__ */ jsxRuntime.jsxs(
1495
- "span",
1496
- {
1497
- className: "inline-flex items-center gap-1 mt-1.5 px-3 py-1 text-xs font-semibold rounded-full",
1498
- style: { backgroundColor: "rgba(255,255,255,0.08)", color: "var(--pk-text)" },
1499
- children: [
1500
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { size: 11, fill: "currentColor" }),
1501
- " ",
1502
- cta
1503
- ]
1504
- }
1505
- )
1506
- ] })
1507
- ]
1508
- }
1509
- );
1510
- }
1511
- function MusicReleasesBlock({ section }) {
1512
- const cta = section.ctaLabel ?? "Ouvir";
1513
- if (section.layout === "grid") {
1514
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-6", id: section.id, children: [
1515
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1516
- "h2",
1517
- {
1518
- className: "text-xl md:text-2xl font-bold mb-4 px-1",
1519
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1520
- children: section.title
1521
- }
1522
- ),
1523
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: section.releases.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(ReleaseCard, { item, cta }, item.url + i)) })
1524
- ] });
1525
- }
1526
- return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-6", id: section.id, children: /* @__PURE__ */ jsxRuntime.jsx(Carousel, { title: section.title, children: section.releases.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(ReleaseCard, { item, cta, wide: true }, item.url + i)) }) });
1527
- }
1528
- var MONTHS_PT = ["JAN", "FEV", "MAR", "ABR", "MAI", "JUN", "JUL", "AGO", "SET", "OUT", "NOV", "DEZ"];
1529
- function parseDate(date) {
1530
- const m = date.match(/^(\d{4})-(\d{2})-(\d{2})/);
1531
- if (m) {
1532
- const monthIdx = Math.min(11, Math.max(0, parseInt(m[2], 10) - 1));
1533
- return { month: MONTHS_PT[monthIdx], day: String(parseInt(m[3], 10)), year: m[1] };
1534
- }
1535
- return { month: "", day: date, year: "" };
1536
- }
1537
- function DateRow({ item, cta }) {
1538
- const { month, day, year } = parseDate(item.date);
1539
- const hasLink = !!item.url;
1540
- const label = hasLink ? cta : item.soldOut ? "Esgotado" : "Em breve";
1541
- const Tag = hasLink ? "a" : "div";
1542
- return /* @__PURE__ */ jsxRuntime.jsxs(
1543
- Tag,
1544
- {
1545
- ...hasLink ? { href: item.url, target: "_blank", rel: "noopener noreferrer" } : {},
1546
- className: `flex items-center gap-4 p-3 transition-all duration-200 ${hasLink ? "hover:scale-[1.01]" : "cursor-default"}`,
1547
- style: {
1548
- backgroundColor: "rgba(255,255,255,0.04)",
1549
- border: "1px solid rgba(255,255,255,0.07)",
1550
- borderRadius: "var(--pk-radius)"
1551
- },
1552
- children: [
1553
- /* @__PURE__ */ jsxRuntime.jsxs(
1554
- "div",
1555
- {
1556
- className: "shrink-0 flex flex-col items-center justify-center w-14 h-16",
1557
- style: { backgroundColor: "rgba(255,255,255,0.05)", borderRadius: "calc(var(--pk-radius) - 4px)" },
1558
- children: [
1559
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-wider", style: { color: "var(--pk-primary)" }, children: month }),
1560
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-bold leading-none", style: { color: "var(--pk-text)", fontFamily: "var(--pk-font-heading)" }, children: day }),
1561
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] opacity-60", style: { color: "var(--pk-muted)" }, children: year })
1562
- ]
1563
- }
1564
- ),
1565
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
1566
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold truncate", style: { color: "var(--pk-text)" }, children: item.venue }),
1567
- item.city && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs truncate flex items-center gap-1 mt-0.5", style: { color: "var(--pk-muted)" }, children: [
1568
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { size: 11 }),
1569
- " ",
1570
- item.city
1571
- ] })
1572
- ] }),
1573
- /* @__PURE__ */ jsxRuntime.jsx(
1574
- "span",
1575
- {
1576
- className: "shrink-0 px-4 py-1.5 text-xs font-semibold rounded-full",
1577
- style: hasLink ? { backgroundColor: "var(--pk-primary)", color: "var(--pk-bg)" } : { backgroundColor: "transparent", color: "var(--pk-muted)", border: "1px solid rgba(255,255,255,0.12)" },
1578
- children: label
1579
- }
1580
- )
1581
- ]
1582
- }
1583
- );
1584
- }
1585
- function TourDatesBlock({ section }) {
1586
- const cta = section.ctaLabel ?? "Ingressos";
1587
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-6", id: section.id, children: [
1588
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1589
- "h2",
1590
- {
1591
- className: "text-xl md:text-2xl font-bold mb-4 px-1",
1592
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1593
- children: section.title
1594
- }
1595
- ),
1596
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: section.dates.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(DateRow, { item, cta }, item.date + item.venue + i)) })
1597
- ] });
1598
- }
1599
- function FeaturedBlock({ section }) {
1600
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-6", id: section.id, children: [
1601
- section.title && /* @__PURE__ */ jsxRuntime.jsx(
1602
- "h2",
1603
- {
1604
- className: "text-xl md:text-2xl font-bold mb-4 px-1",
1605
- style: { fontFamily: "var(--pk-font-heading)", color: "var(--pk-text)" },
1606
- children: section.title
1607
- }
1608
- ),
1609
- /* @__PURE__ */ jsxRuntime.jsxs(
1610
- "a",
1611
- {
1612
- href: section.url,
1613
- target: "_blank",
1614
- rel: "noopener noreferrer",
1615
- className: "group flex items-center gap-4 p-4 overflow-hidden transition-all duration-300 hover:scale-[1.01]",
1616
- style: {
1617
- borderRadius: "var(--pk-radius)",
1618
- border: "1px solid rgba(255,255,255,0.09)",
1619
- background: "linear-gradient(135deg, color-mix(in srgb, var(--pk-primary) 14%, transparent), rgba(255,255,255,0.03) 55%)"
1620
- },
1621
- children: [
1622
- section.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
1623
- "div",
1624
- {
1625
- className: "shrink-0 w-20 h-20 overflow-hidden",
1626
- style: { borderRadius: "calc(var(--pk-radius) - 4px)" },
1627
- children: /* @__PURE__ */ jsxRuntime.jsx(
1628
- "img",
1629
- {
1630
- src: section.imageUrl,
1631
- alt: section.headline,
1632
- className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500",
1633
- loading: "lazy"
1634
- }
1635
- )
1636
- }
1637
- ),
1638
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
1639
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-bold leading-tight", style: { color: "var(--pk-text)", fontFamily: "var(--pk-font-heading)" }, children: section.headline }),
1640
- section.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1 line-clamp-2", style: { color: "var(--pk-muted)" }, children: section.subtitle }),
1641
- section.ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
1642
- "span",
1643
- {
1644
- className: "inline-flex items-center gap-1 mt-2 px-3 py-1 text-xs font-semibold rounded-full",
1645
- style: { backgroundColor: "var(--pk-primary)", color: "var(--pk-bg)" },
1646
- children: section.ctaLabel
1647
- }
1648
- )
1649
- ] }),
1650
- /* @__PURE__ */ jsxRuntime.jsx(
1651
- lucideReact.ArrowUpRight,
1652
- {
1653
- size: 20,
1654
- className: "shrink-0 opacity-50 group-hover:opacity-90 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all",
1655
- style: { color: "var(--pk-text)" }
1656
- }
1657
- )
1658
- ]
1659
- }
1660
- )
1661
- ] });
1662
- }
1663
- var ALT_BG_TYPES = /* @__PURE__ */ new Set(["bio", "gallery", "video-grid", "project", "embed", "stats", "venue-list", "text", "social-links"]);
1664
- function BioPageRenderer({ page, poweredBy }) {
1665
- const { identity, branding, sections, floatingCta } = page;
1666
- const isHub = page.layout === "hub";
1667
- const scrollRef = react.useRef(null);
1668
- const [scrollProgress, setScrollProgress] = react.useState(0);
1669
- const [showFloatingCta, setShowFloatingCta] = react.useState(false);
1670
- react.useEffect(() => {
1671
- const container = scrollRef.current?.closest(".fixed.inset-0");
1672
- if (!container) return;
1673
- const onScroll = () => {
1674
- const { scrollTop, scrollHeight, clientHeight } = container;
1675
- const progress = scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0;
1676
- setScrollProgress(progress);
1677
- setShowFloatingCta(scrollTop > clientHeight * 0.5);
1678
- };
1679
- container.addEventListener("scroll", onScroll, { passive: true });
1680
- return () => container.removeEventListener("scroll", onScroll);
1681
- }, []);
1682
- let altIndex = 0;
1683
- const sectionBgs = /* @__PURE__ */ new Map();
1684
- if (!isHub) {
1685
- for (const s of sections) {
1686
- if (s.visible === false) continue;
1687
- if (ALT_BG_TYPES.has(s.type)) {
1688
- const bgs = [void 0, "var(--pk-alt-bg)", "var(--pk-alt-bg2)"];
1689
- sectionBgs.set(s.id, bgs[altIndex % bgs.length]);
1690
- altIndex++;
1691
- }
1692
- }
1693
- }
1694
- function renderInner(section) {
1695
- const Custom = getBlock(section.type);
1696
- if (Custom) return /* @__PURE__ */ jsxRuntime.jsx(Custom, { block: section, page });
1697
- switch (section.type) {
1698
- case "hero":
1699
- return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, identity, branding });
1700
- case "profile-header":
1701
- return /* @__PURE__ */ jsxRuntime.jsx(ProfileHeader, { section, page });
1702
- case "bio":
1703
- return /* @__PURE__ */ jsxRuntime.jsx(BioSection, { section });
1704
- case "gallery":
1705
- return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { section });
1706
- case "video-grid":
1707
- return /* @__PURE__ */ jsxRuntime.jsx(VideoGridSection, { section });
1708
- case "social-links":
1709
- return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section });
1710
- case "embed":
1711
- return /* @__PURE__ */ jsxRuntime.jsx(EmbedSection, { section });
1712
- case "project":
1713
- return /* @__PURE__ */ jsxRuntime.jsx(ProjectSection, { section });
1714
- case "stats":
1715
- return /* @__PURE__ */ jsxRuntime.jsx(StatsSection, { section });
1716
- case "venue-list":
1717
- return /* @__PURE__ */ jsxRuntime.jsx(VenueListSection, { section });
1718
- case "cta":
1719
- return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { section });
1720
- case "text":
1721
- return /* @__PURE__ */ jsxRuntime.jsx(TextSection, { section });
1722
- case "links":
1723
- return /* @__PURE__ */ jsxRuntime.jsx(LinksBlock, { section });
1724
- case "music-releases":
1725
- return /* @__PURE__ */ jsxRuntime.jsx(MusicReleasesBlock, { section });
1726
- case "tour-dates":
1727
- return /* @__PURE__ */ jsxRuntime.jsx(TourDatesBlock, { section });
1728
- case "featured":
1729
- return /* @__PURE__ */ jsxRuntime.jsx(FeaturedBlock, { section });
1730
- default:
1731
- return null;
1732
- }
1733
- }
1734
- function renderSection(section, index) {
1735
- if (section.visible === false) return null;
1736
- const inner = renderInner(section);
1737
- if (inner === null) return null;
1738
- if (isHub) {
1739
- if (section.type === "profile-header")
1740
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-3 -mt-3 sm:mx-0 sm:mt-0", children: inner }, section.id);
1741
- return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { children: inner }, section.id);
1742
- }
1743
- if (section.type === "hero") return /* @__PURE__ */ jsxRuntime.jsx("div", { children: inner }, section.id);
1744
- const bg = sectionBgs.get(section.id);
1745
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: bg ? { backgroundColor: bg } : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Reveal, { delay: index === 0 ? 0 : 40, children: inner }) }, section.id);
1746
- }
1747
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: scrollRef, className: "min-h-full", children: [
1748
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-0 left-0 right-0 z-50 h-[3px]", style: { backgroundColor: "transparent" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1749
- "div",
1750
- {
1751
- className: "h-full transition-[width] duration-100 ease-out",
1752
- style: {
1753
- width: `${scrollProgress * 100}%`,
1754
- background: `linear-gradient(90deg, var(--pk-primary), var(--pk-accent))`
1755
- }
1756
- }
1757
- ) }),
1758
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isHub ? "max-w-[480px] mx-auto px-3 sm:px-4 pt-3 pb-6" : "", children: [
1759
- sections.map(renderSection),
1760
- /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "pt-10 pb-24 px-6 text-center", style: { backgroundColor: "var(--pk-bg)" }, children: [
1761
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs opacity-40", style: { color: "var(--pk-muted)" }, children: [
1762
- "\xA9 ",
1763
- (/* @__PURE__ */ new Date()).getFullYear(),
1764
- " ",
1765
- identity.name
1766
- ] }),
1767
- poweredBy && /* @__PURE__ */ jsxRuntime.jsx(
1768
- "a",
1769
- {
1770
- href: poweredBy.url,
1771
- className: "text-xs opacity-25 mt-1 hover:opacity-40 transition-opacity",
1772
- style: { color: "var(--pk-muted)" },
1773
- children: poweredBy.label
1774
- }
1775
- )
1776
- ] })
1777
- ] }),
1778
- isHub ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed z-50 right-4 bottom-6 flex flex-col items-center gap-3", children: [
1779
- /* @__PURE__ */ jsxRuntime.jsx(
1780
- "button",
1781
- {
1782
- type: "button",
1783
- "aria-label": "Voltar ao topo",
1784
- onClick: () => scrollRef.current?.closest(".fixed.inset-0")?.scrollTo({
1785
- top: 0,
1786
- behavior: "smooth"
1787
- }),
1788
- className: "flex items-center justify-center w-11 h-11 rounded-full transition-all duration-300",
1789
- style: {
1790
- opacity: showFloatingCta ? 1 : 0,
1791
- transform: showFloatingCta ? "none" : "translateY(12px)",
1792
- pointerEvents: showFloatingCta ? "auto" : "none",
1793
- color: "var(--pk-primary)",
1794
- border: "1.5px solid var(--pk-primary)",
1795
- backgroundColor: "color-mix(in srgb, var(--pk-bg) 70%, transparent)",
1796
- backdropFilter: "blur(6px)"
1797
- },
1798
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 20 })
1799
- }
1800
- ),
1801
- /* @__PURE__ */ jsxRuntime.jsx(MediaKit, { page, variant: "fab" }),
1802
- floatingCta && /* @__PURE__ */ jsxRuntime.jsx(
1803
- "a",
1804
- {
1805
- href: floatingCta.url,
1806
- target: "_blank",
1807
- rel: "noopener noreferrer",
1808
- "aria-label": floatingCta.label,
1809
- className: "flex items-center justify-center w-14 h-14 rounded-full transition-transform hover:scale-105",
1810
- style: {
1811
- backgroundColor: "var(--pk-primary)",
1812
- color: "var(--pk-bg)",
1813
- boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
1814
- },
1815
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { size: 24 })
1816
- }
1817
- )
1818
- ] }) : floatingCta && /* @__PURE__ */ jsxRuntime.jsx(
1819
- "a",
1820
- {
1821
- href: floatingCta.url,
1822
- target: "_blank",
1823
- rel: "noopener noreferrer",
1824
- className: "fixed z-50 transition-all duration-500 ease-out",
1825
- style: {
1826
- bottom: showFloatingCta ? "2rem" : "-4rem",
1827
- left: "50%",
1828
- transform: "translateX(-50%)",
1829
- opacity: showFloatingCta ? 1 : 0,
1830
- backgroundColor: "var(--pk-primary)",
1831
- color: "var(--pk-bg)",
1832
- fontFamily: "var(--pk-font-heading)",
1833
- borderRadius: "9999px",
1834
- padding: "1rem 2.5rem",
1835
- fontSize: "1rem",
1836
- fontWeight: 700,
1837
- letterSpacing: "0.1em",
1838
- boxShadow: "0 8px 32px rgba(0,0,0,0.4)"
1839
- },
1840
- children: floatingCta.label
1841
- }
1842
- )
1843
- ] });
1844
- }
1845
- function BioPage() {
1846
- const { slug } = reactRouterDom.useParams();
1847
- const { provider, poweredBy, titleSuffix } = useLinkInBio();
1848
- const [page, setPage] = react.useState(null);
1849
- const [resolved, setResolved] = react.useState(false);
1850
- react.useEffect(() => {
1851
- if (!slug) {
1852
- setResolved(true);
1853
- return;
1854
- }
1855
- let cancelled = false;
1856
- setResolved(false);
1857
- provider.getBySlug(slug).then((pk) => {
1858
- if (cancelled) return;
1859
- setPage(pk);
1860
- setResolved(true);
1861
- }).catch(() => {
1862
- if (cancelled) return;
1863
- setResolved(true);
1864
- });
1865
- return () => {
1866
- cancelled = true;
1867
- };
1868
- }, [slug, provider]);
1869
- react.useEffect(() => {
1870
- if (!page) return;
1871
- document.title = page.seo.title ?? `${page.identity.name} | ${titleSuffix}`;
1872
- const metaDesc = document.querySelector('meta[name="description"]');
1873
- if (metaDesc && page.seo.description) {
1874
- metaDesc.setAttribute("content", page.seo.description);
1875
- }
1876
- const fontsToLoad = [];
1877
- const { fontHeading, fontBody } = page.branding;
1878
- if (fontHeading && !fontHeading.includes("Space Grotesk")) {
1879
- const family = fontHeading.replace(/['"]/g, "").split(",")[0].trim();
1880
- fontsToLoad.push(family);
1881
- }
1882
- if (fontBody && !fontBody.includes("DM Sans")) {
1883
- const family = fontBody.replace(/['"]/g, "").split(",")[0].trim();
1884
- fontsToLoad.push(family);
1885
- }
1886
- const linkElements = [];
1887
- if (fontsToLoad.length > 0) {
1888
- const families = fontsToLoad.map((f) => `family=${f.replace(/\s/g, "+")}:wght@400;600;700`).join("&");
1889
- const link = document.createElement("link");
1890
- link.rel = "stylesheet";
1891
- link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
1892
- document.head.appendChild(link);
1893
- linkElements.push(link);
1894
- }
1895
- return () => {
1896
- linkElements.forEach((el) => el.remove());
1897
- };
1898
- }, [page, titleSuffix]);
1899
- if (!resolved) {
1900
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dark fixed inset-0 flex items-center justify-center bg-background text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-foreground/40 animate-pulse", "aria-label": "carregando" }) });
1901
- }
1902
- if (!page) {
1903
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dark fixed inset-0 flex items-center justify-center bg-background text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center px-6", children: [
1904
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-large font-bold mb-4", style: { fontFamily: "var(--font-display)" }, children: "404" }),
1905
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground-secondary mb-6", children: "P\xE1gina n\xE3o encontrada." }),
1906
- /* @__PURE__ */ jsxRuntime.jsx(
1907
- "a",
1908
- {
1909
- href: "/",
1910
- className: "text-sm underline underline-offset-4 text-foreground-secondary hover:text-foreground transition-colors",
1911
- children: "voltar ao in\xEDcio"
1912
- }
1913
- )
1914
- ] }) });
1915
- }
1916
- const brandingVars = getBrandingVars(page.branding);
1917
- return /* @__PURE__ */ jsxRuntime.jsx(
1918
- "div",
1919
- {
1920
- className: "fixed inset-0 overflow-y-auto overflow-x-hidden",
1921
- style: {
1922
- ...brandingVars,
1923
- backgroundColor: "var(--pk-bg)",
1924
- color: "var(--pk-text)",
1925
- fontFamily: "var(--pk-font-body)"
1926
- },
1927
- children: /* @__PURE__ */ jsxRuntime.jsx(BioPageRenderer, { page, poweredBy })
1928
- }
1929
- );
1930
- }
1931
-
1932
- // src/public/createPublicLinkInBioPlugin.ts
1933
- function createPublicLinkInBioPlugin(options = {}) {
1934
- const basePath = options.basePath ?? "/p";
1935
- const table = options.table ?? "press_kits";
1936
- const seed = options.seed ?? {};
1937
- const provider = options.dataProvider ?? (options.useSupabase === false ? createMockBioPageProvider({ seed }) : core.createSafeDataProvider(
1938
- () => createSupabaseBioPageProvider({ table }),
1939
- () => createMockBioPageProvider({ seed })
1940
- ));
1941
- const contextValue = {
1942
- provider,
1943
- poweredBy: options.poweredBy,
1944
- titleSuffix: options.titleSuffix ?? "Bio"
1945
- };
1946
- const Provider = ({ children }) => react.createElement(LinkInBioProvider, { value: contextValue, children });
1947
- Provider.displayName = "LinkInBioProvider";
1948
- const manifest = {
1949
- id: "linkinbio",
1950
- name: "Link in Bio",
1951
- icon: "Link",
1952
- version: "0.1.0",
1953
- scope: options.scope ?? "universal",
1954
- verticalId: options.verticalId,
1955
- scaffolds: ["website", "landing_page"],
1956
- defaultEnabled: options.defaultEnabled ?? true,
1957
- dependencies: [],
1958
- navigation: [],
1959
- routes: [{ path: `${basePath}/:slug`, component: BioPage, guard: "public", fullBleed: true }],
1960
- widgets: []
1961
- };
1962
- return { manifest, Provider, dataProvider: provider };
1963
- }
1964
-
1965
- exports.BioPage = BioPage;
1966
- exports.BioPageRenderer = BioPageRenderer;
1967
- exports.Carousel = Carousel;
1968
- exports.LinkInBioProvider = LinkInBioProvider;
1969
- exports.Reveal = Reveal;
1970
- exports.borderRadiusMap = borderRadiusMap;
1971
- exports.createMockBioPageProvider = createMockBioPageProvider;
1972
- exports.createPublicLinkInBioPlugin = createPublicLinkInBioPlugin;
1973
- exports.createSupabaseBioPageProvider = createSupabaseBioPageProvider;
1974
- exports.getBlock = getBlock;
1975
- exports.getBrandingVars = getBrandingVars;
1976
- exports.hasBlock = hasBlock;
1977
- exports.platformColors = platformColors;
1978
- exports.platformIconMap = platformIconMap;
1979
- exports.platformLabels = platformLabels;
1980
- exports.registerBlock = registerBlock;
1981
- exports.renderMarkdown = renderMarkdown;
1982
- exports.useLinkInBio = useLinkInBio;
1983
- //# sourceMappingURL=index.cjs.map
1984
- //# sourceMappingURL=index.cjs.map