@fayz-ai/plugin-linkinbio 0.10.0 → 0.10.1

package/src/public/blocks/ProfileHeader.tsx

@@ -1,174 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import type { ProfileHeaderSection, BioPage } from '../../types';
-import { platformLabels } from '../utils';
-import { PlatformIcon } from '../components/PlatformIcon';
-
-interface Props {
-  section: ProfileHeaderSection;
-  page: BioPage;
-}
-
-export default function ProfileHeader({ section, page }: Props) {
-  const { identity, branding } = page;
-  const isHub = page.layout === 'hub';
-  const socials = section.socials ?? page.socialLinks ?? [];
-  const hasLogo = section.showLogo && branding.logoUrl;
-
-  // Scroll-driven parallax: the image lags while the logo lifts + fades on its
-  // own curve, so the hero opens clean (just the logo) and dissolves on scroll.
-  const heroRef = useRef<HTMLDivElement>(null);
-  const [sy, setSy] = useState(0);
-  useEffect(() => {
-    const container = document.querySelector('.fixed.inset-0') as HTMLElement | null;
-    if (!container) return;
-    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    if (reduce) return;
-    let raf = 0;
-    const onScroll = () => {
-      if (raf) return;
-      raf = requestAnimationFrame(() => {
-        setSy(container.scrollTop);
-        raf = 0;
-      });
-    };
-    container.addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-      container.removeEventListener('scroll', onScroll);
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, []);
-
-  const heroH = heroRef.current?.offsetHeight ?? 700;
-  const p = Math.min(1, sy / heroH); // 0 → 1 over the hero's height
-  // imageOffsetTop nudges the image content DOWN inside the frame (not a margin);
-  // the baseline scale (>1) leaves overflow room so no gap opens at the top.
-  const imageOffsetTop = section.imageOffsetTop ?? '0px';
-  const imageTransform = `translateY(calc(${imageOffsetTop} + ${sy * 0.22}px)) scale(1.18)`;
-  const logoTransform = `translateY(${-sy * 0.5}px) scale(${1 - p * 0.12})`;
-  const logoOpacity = Math.max(0, 1 - p * 1.25);
-  const hintOpacity = Math.max(0, 1 - p * 4);
-
-  const scrollTo = (id: string) => {
-    const el = typeof document !== 'undefined' ? document.getElementById(id) : null;
-    el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  };
-
-  return (
-    <header id={section.id} className="relative">
-      {/* Hero — fills the viewport so the page opens clean on just the logo. */}
-      <div
-        ref={heroRef}
-        className={`relative w-full h-[86vh] max-h-[880px] overflow-hidden ${
-          isHub ? 'sm:rounded-[26px]' : ''
-        }`}
-      >
-        {section.imageUrl && (
-          <img
-            src={section.imageUrl}
-            alt={identity.name}
-            className="absolute inset-0 h-full w-full object-cover will-change-transform"
-            style={{ transform: imageTransform, objectPosition: section.imageObjectPosition }}
-          />
-        )}
-        <div
-          className="absolute inset-0"
-          style={{
-            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%)',
-          }}
-        />
-
-        {/* Logo (or name) overlaid — its own motion curve */}
-        <div className="absolute inset-x-0 bottom-0 flex flex-col items-center text-center px-6 pb-14">
-          {hasLogo ? (
-            <img
-              src={branding.logoUrl}
-              alt={`${identity.name} logo`}
-              className="w-[82%] max-w-[380px] h-auto object-contain drop-shadow-[0_4px_24px_rgba(0,0,0,0.55)] will-change-transform"
-              style={{ transform: logoTransform, opacity: logoOpacity }}
-            />
-          ) : (
-            <h1
-              className="text-5xl sm:text-6xl font-bold tracking-tight drop-shadow-lg will-change-transform"
-              style={{
-                fontFamily: 'var(--pk-font-heading)',
-                color: 'var(--pk-text)',
-                transform: logoTransform,
-                opacity: logoOpacity,
-              }}
-            >
-              {identity.name}
-            </h1>
-          )}
-        </div>
-
-        {/* Scroll hint */}
-        <div
-          className="absolute bottom-4 left-1/2 -translate-x-1/2 animate-bounce"
-          style={{ opacity: hintOpacity, color: 'var(--pk-text)' }}
-        >
-          <ChevronDown size={22} />
-        </div>
-      </div>
-
-      {/* Below the hero (revealed on scroll): tagline, socials, nav */}
-      {(identity.tagline || (section.showLocation && identity.location)) && (
-        <div className="text-center mt-5 px-4">
-          {identity.tagline && (
-            <p className="text-base font-medium" style={{ color: 'var(--pk-text)' }}>
-              {identity.tagline}
-            </p>
-          )}
-          {section.showLocation && identity.location && (
-            <p className="text-xs mt-1 opacity-60" style={{ color: 'var(--pk-muted)' }}>
-              {identity.location}
-            </p>
-          )}
-        </div>
-      )}
-
-      {/* Social + media-kit icon row */}
-      <div className="flex flex-wrap items-center justify-center gap-3 mt-4 px-4">
-        {socials.map((link) => (
-          <a
-            key={link.platform + link.url}
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={link.label ?? platformLabels[link.platform] ?? 'Link'}
-            className="flex items-center justify-center w-11 h-11 rounded-full transition-transform hover:scale-110"
-            style={{ backgroundColor: 'rgba(255,255,255,0.07)', color: 'var(--pk-text)' }}
-          >
-            <PlatformIcon platform={link.platform} size={19} />
-          </a>
-        ))}
-      </div>
-
-      {/* Quick-nav pills */}
-      {section.navPills && section.navPills.length > 0 && (
-        <nav
-          className="flex gap-2 overflow-x-auto scrollbar-hide mt-4 px-4 pb-1 justify-start sm:justify-center"
-          aria-label="Seções"
-        >
-          {section.navPills.map((pill) => (
-            <button
-              key={pill.targetId}
-              type="button"
-              onClick={() => scrollTo(pill.targetId)}
-              className="whitespace-nowrap px-4 py-2 text-sm font-medium rounded-full transition-colors shrink-0"
-              style={{
-                backgroundColor: 'rgba(255,255,255,0.06)',
-                color: 'var(--pk-text)',
-                border: '1px solid rgba(255,255,255,0.08)',
-              }}
-            >
-              {pill.label}
-            </button>
-          ))}
-        </nav>
-      )}
-    </header>
-  );
-}

package/src/public/blocks/ProjectSection.tsx

@@ -1,158 +0,0 @@
-import type { ProjectSection as ProjectSectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: ProjectSectionType;
-}
-
-export default function ProjectSection({ section }: Props) {
-  const isSideBySide = section.layout === 'side-by-side';
-  const hasMedia = section.media && section.media.length > 0;
-  const firstMedia = hasMedia ? section.media![0] : null;
-  const isVideo = firstMedia?.type === 'video';
-
-  const MediaBlock = () => {
-    if (!firstMedia) return null;
-    if (isVideo) {
-      return (
-        <div className="relative w-full" style={{ paddingBottom: '56.25%', borderRadius: 'var(--pk-radius)', overflow: 'hidden' }}>
-          <iframe
-            src={firstMedia.url}
-            className="absolute inset-0 w-full h-full"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            loading="lazy"
-            title={firstMedia.alt ?? section.title ?? 'Video'}
-          />
-        </div>
-      );
-    }
-    return (
-      <img
-        src={firstMedia.url}
-        alt={firstMedia.alt ?? ''}
-        className="w-full h-full object-cover"
-        style={{ borderRadius: 'var(--pk-radius)' }}
-        loading="lazy"
-      />
-    );
-  };
-
-  const ContentBlock = () => (
-    <div className="flex flex-col justify-center">
-      {section.label && (
-        <span
-          className="inline-block self-start px-4 py-1.5 text-xs font-bold uppercase tracking-[0.15em] mb-5"
-          style={{
-            backgroundColor: 'transparent',
-            color: 'var(--pk-accent)',
-            border: '1px solid var(--pk-accent)',
-            borderRadius: '4px',
-          }}
-        >
-          {section.label}
-        </span>
-      )}
-
-      {section.title && (
-        <h2
-          className="text-3xl md:text-4xl lg:text-5xl font-bold mb-5"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-
-      {section.content && (
-        <div
-          className="text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_strong]:text-white [&_em]:italic"
-          style={{ color: 'var(--pk-muted)' }}
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-        />
-      )}
-
-      {section.tags && section.tags.length > 0 && (
-        <div className="flex flex-wrap gap-2 mt-5">
-          {section.tags.map((tag) => (
-            <span
-              key={tag}
-              className="px-3 py-1 text-xs font-medium"
-              style={{
-                color: 'var(--pk-muted)',
-                border: '1px solid rgba(255,255,255,0.1)',
-                borderRadius: 'var(--pk-radius)',
-              }}
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {section.links && section.links.length > 0 && (
-        <div className="flex flex-wrap gap-4 mt-6">
-          {section.links.map((link) => (
-            <a
-              key={link.url}
-              href={link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium underline underline-offset-4 hover:opacity-80 transition-opacity"
-              style={{ color: 'var(--pk-primary)' }}
-            >
-              {link.label}
-            </a>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <section className="py-20 md:py-28 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {isSideBySide && hasMedia ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
-            <div className="order-1">
-              <ContentBlock />
-            </div>
-            <div className="order-2">
-              <MediaBlock />
-            </div>
-          </div>
-        ) : (
-          <div>
-            <ContentBlock />
-            {hasMedia && (
-              <div className={`grid grid-cols-1 gap-4 mt-8 ${section.media!.length > 1 ? 'md:grid-cols-2' : ''}`}>
-                {section.media!.map((item, i) =>
-                  item.type === 'video' ? (
-                    <div key={i} className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-                      <iframe
-                        src={item.url}
-                        className="h-full w-full"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen
-                        loading="lazy"
-                        title={item.alt ?? 'Video'}
-                      />
-                    </div>
-                  ) : (
-                    <img
-                      key={i}
-                      src={item.url}
-                      alt={item.alt ?? ''}
-                      className="w-full aspect-[4/3] object-cover"
-                      style={{ borderRadius: 'var(--pk-radius)' }}
-                      loading="lazy"
-                    />
-                  )
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/SocialLinksSection.tsx

@@ -1,125 +0,0 @@
-import { ExternalLink } from 'lucide-react';
-import type { SocialLinksSection as SocialLinksSectionType } from '../../types';
-import { platformColors, platformLabels } from '../utils';
-import { PlatformIcon } from '../components/PlatformIcon';
-
-interface Props {
-  section: SocialLinksSectionType;
-}
-
-export default function SocialLinksSection({ section }: Props) {
-  const layout = section.layout ?? 'buttons';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-10 text-center"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {layout === 'icons' && (
-          <div className="flex flex-wrap justify-center gap-5">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex items-center justify-center w-16 h-16 rounded-full transition-all duration-300 hover:scale-110 hover:shadow-lg"
-                  style={{
-                    backgroundColor: color + '15',
-                    boxShadow: `0 0 0 1px ${color}25`,
-                  }}
-                  title={link.label ?? platformLabels[link.platform]}
-                >
-                  <PlatformIcon platform={link.platform} size={26} style={{ color }} />
-                </a>
-              );
-            })}
-          </div>
-        )}
-
-        {layout === 'buttons' && (
-          <div className="flex flex-col gap-3">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group relative flex items-center gap-5 px-6 py-4 font-medium transition-all duration-300 hover:scale-[1.02] overflow-hidden"
-                  style={{
-                    backgroundColor: color + '10',
-                    color: 'var(--pk-text)',
-                    borderRadius: 'var(--pk-radius)',
-                    border: `1px solid ${color}30`,
-                  }}
-                >
-                  {/* Hover glow */}
-                  <div
-                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    style={{ background: `linear-gradient(135deg, ${color}18, transparent 60%)` }}
-                  />
-
-                  <div className="relative z-10 flex items-center justify-center w-10 h-10 rounded-full shrink-0"
-                    style={{ backgroundColor: color + '20' }}
-                  >
-                    <PlatformIcon platform={link.platform} size={20} style={{ color }} />
-                  </div>
-
-                  <span className="relative z-10 text-base">{link.label ?? platformLabels[link.platform]}</span>
-
-                  <ExternalLink
-                    size={16}
-                    className="relative z-10 ml-auto opacity-0 group-hover:opacity-50 transition-opacity duration-300"
-                    style={{ color: 'var(--pk-text)' }}
-                  />
-                </a>
-              );
-            })}
-          </div>
-        )}
-
-        {layout === 'list' && (
-          <div className="space-y-1">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex items-center gap-4 py-4 px-3 transition-all duration-200 hover:bg-white/5 rounded-lg"
-                >
-                  <div className="flex items-center justify-center w-9 h-9 rounded-full shrink-0"
-                    style={{ backgroundColor: color + '18' }}
-                  >
-                    <PlatformIcon platform={link.platform} size={18} style={{ color }} />
-                  </div>
-                  <span className="text-sm font-medium" style={{ color: 'var(--pk-text)' }}>
-                    {link.label ?? platformLabels[link.platform]}
-                  </span>
-                  <ExternalLink
-                    size={14}
-                    className="ml-auto opacity-0 group-hover:opacity-40 transition-opacity"
-                    style={{ color: 'var(--pk-text)' }}
-                  />
-                </a>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/StatsSection.tsx

@@ -1,46 +0,0 @@
-import type { StatsSection as StatsSectionType } from '../../types';
-
-interface Props {
-  section: StatsSectionType;
-}
-
-export default function StatsSection({ section }: Props) {
-  const isGrid = section.layout === 'grid';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8 text-center"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div
-          className={
-            isGrid
-              ? 'grid grid-cols-2 md:grid-cols-4 gap-6'
-              : 'flex flex-wrap justify-center gap-8 md:gap-12'
-          }
-        >
-          {section.stats.map((stat, i) => (
-            <div key={i} className="text-center">
-              <div
-                className="text-3xl md:text-4xl font-bold mb-1"
-                style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-primary)' }}
-              >
-                {stat.value}
-              </div>
-              <div className="text-sm" style={{ color: 'var(--pk-muted)' }}>
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/TextSection.tsx

@@ -1,29 +0,0 @@
-import type { TextSection as TextSectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: TextSectionType;
-}
-
-export default function TextSection({ section }: Props) {
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-3xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div
-          className="text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_em]:italic [&_a]:underline [&_a]:decoration-[var(--pk-primary)]"
-          style={{ color: 'var(--pk-muted)' }}
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-        />
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/TourDatesBlock.tsx

@@ -1,83 +0,0 @@
-import { MapPin } from 'lucide-react';
-import type { TourDatesSection, TourDateItem } from '../../types';
-
-interface Props {
-  section: TourDatesSection;
-}
-
-const MONTHS_PT = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
-
-function parseDate(date: string): { month: string; day: string; year: string } {
-  const m = date.match(/^(\d{4})-(\d{2})-(\d{2})/);
-  if (m) {
-    const monthIdx = Math.min(11, Math.max(0, parseInt(m[2], 10) - 1));
-    return { month: MONTHS_PT[monthIdx], day: String(parseInt(m[3], 10)), year: m[1] };
-  }
-  return { month: '', day: date, year: '' };
-}
-
-function DateRow({ item, cta }: { item: TourDateItem; cta: string }) {
-  const { month, day, year } = parseDate(item.date);
-  const hasLink = !!item.url;
-  const label = hasLink ? cta : item.soldOut ? 'Esgotado' : 'Em breve';
-  const Tag = hasLink ? 'a' : 'div';
-  return (
-    <Tag
-      {...(hasLink ? { href: item.url, target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={`flex items-center gap-4 p-3 transition-all duration-200 ${hasLink ? 'hover:scale-[1.01]' : 'cursor-default'}`}
-      style={{
-        backgroundColor: 'rgba(255,255,255,0.04)',
-        border: '1px solid rgba(255,255,255,0.07)',
-        borderRadius: 'var(--pk-radius)',
-      }}
-    >
-      <div
-        className="shrink-0 flex flex-col items-center justify-center w-14 h-16"
-        style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 'calc(var(--pk-radius) - 4px)' }}
-      >
-        <span className="text-[10px] font-bold tracking-wider" style={{ color: 'var(--pk-primary)' }}>{month}</span>
-        <span className="text-xl font-bold leading-none" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>{day}</span>
-        <span className="text-[10px] opacity-60" style={{ color: 'var(--pk-muted)' }}>{year}</span>
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>{item.venue}</p>
-        {item.city && (
-          <p className="text-xs truncate flex items-center gap-1 mt-0.5" style={{ color: 'var(--pk-muted)' }}>
-            <MapPin size={11} /> {item.city}
-          </p>
-        )}
-      </div>
-      <span
-        className="shrink-0 px-4 py-1.5 text-xs font-semibold rounded-full"
-        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)' }
-        }
-      >
-        {label}
-      </span>
-    </Tag>
-  );
-}
-
-export default function TourDatesBlock({ section }: Props) {
-  const cta = section.ctaLabel ?? 'Ingressos';
-  return (
-    <section className="py-6" id={section.id}>
-      {section.title && (
-        <h2
-          className="text-xl md:text-2xl font-bold mb-4 px-1"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-      <div className="flex flex-col gap-3">
-        {section.dates.map((item, i) => (
-          <DateRow key={item.date + item.venue + i} item={item} cta={cta} />
-        ))}
-      </div>
-    </section>
-  );
-}