@fayz-ai/plugin-linkinbio 0.9.0

package/src/public/blocks/HeroSection.tsx

@@ -0,0 +1,107 @@
+import type { HeroSection as HeroSectionType, BioIdentity, BioBranding } from '../../types';
+
+interface Props {
+  section: HeroSectionType;
+  identity: BioIdentity;
+  branding: BioBranding;
+}
+
+export default function HeroSection({ section, identity, branding }: Props) {
+  const hasLogo = section.showLogo && branding.logoUrl;
+
+  return (
+    <section
+      className="relative flex flex-col items-center justify-center min-h-screen overflow-hidden"
+      id={section.id}
+    >
+      {/* Background image (skipped when no image — overlay carries the visual) */}
+      <div className="absolute inset-0">
+        {section.backgroundImageUrl && (
+          <img
+            src={section.backgroundImageUrl}
+            alt={identity.name}
+            className="h-full w-full object-cover"
+          />
+        )}
+        {section.overlayGradient && (
+          <div className="absolute inset-0" style={{ background: section.overlayGradient }} />
+        )}
+      </div>
+
+      {/* Content — always centered */}
+      <div className="relative z-10 flex flex-col items-center text-center px-6 pt-20 pb-24">
+        {hasLogo ? (
+          <img
+            src={branding.logoUrl}
+            alt={`${identity.name} logo`}
+            className="mb-6 h-48 w-auto md:h-64 lg:h-80 object-contain drop-shadow-2xl"
+          />
+        ) : (
+          <h1
+            className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-4 drop-shadow-lg"
+            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
+          >
+            {identity.name}
+          </h1>
+        )}
+
+        {identity.tagline && (
+          <p
+            className="text-lg md:text-xl mb-6 max-w-lg opacity-70"
+            style={{ color: 'var(--pk-text)' }}
+          >
+            {identity.tagline}
+          </p>
+        )}
+
+        {section.showGenres && identity.genres.length > 0 && (
+          <div className="flex flex-wrap justify-center gap-2 mb-4">
+            {identity.genres.map((genre) => (
+              <span
+                key={genre}
+                className="px-4 py-1.5 text-sm font-semibold backdrop-blur-sm"
+                style={{
+                  backgroundColor: 'rgba(255,255,255,0.08)',
+                  color: 'var(--pk-primary)',
+                  border: '1px solid rgba(255,255,255,0.12)',
+                  borderRadius: '9999px',
+                }}
+              >
+                {genre}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {section.showLocation && identity.location && (
+          <p className="text-sm mt-2 opacity-50" style={{ color: 'var(--pk-text)' }}>
+            {identity.location}
+          </p>
+        )}
+
+        {section.ctaText && section.ctaUrl && (
+          <a
+            href={section.ctaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-8 inline-block px-10 py-4 font-bold text-lg tracking-wider transition-transform hover:scale-105"
+            style={{
+              backgroundColor: 'var(--pk-primary)',
+              color: 'var(--pk-bg)',
+              borderRadius: '9999px',
+            }}
+          >
+            {section.ctaText}
+          </a>
+        )}
+      </div>
+
+      {/* Scroll hint */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce opacity-40">
+        <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)' }}>
+          <path d="M12 5v14M5 12l7 7 7-7" />
+        </svg>
+      </div>
+    </section>
+  );
+}

package/src/public/blocks/LinksBlock.tsx

@@ -0,0 +1,80 @@
+import { ChevronRight } from 'lucide-react';
+import type { LinksSection, LinkCardItem } from '../../types';
+import { PlatformIcon } from '../components/PlatformIcon';
+
+interface Props {
+  section: LinksSection;
+}
+
+function LinkCard({ item }: { item: LinkCardItem }) {
+  return (
+    <a
+      href={item.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center gap-4 p-3 transition-all duration-200 hover:scale-[1.015] active:scale-[0.99]"
+      style={{
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        border: '1px solid rgba(255,255,255,0.07)',
+        borderRadius: 'var(--pk-radius)',
+      }}
+    >
+      <div
+        className="shrink-0 flex items-center justify-center w-12 h-12 overflow-hidden"
+        style={{ borderRadius: 'calc(var(--pk-radius) - 4px)', backgroundColor: 'rgba(255,255,255,0.06)' }}
+      >
+        {item.thumbnailUrl ? (
+          <img src={item.thumbnailUrl} alt="" className="w-full h-full object-cover" loading="lazy" />
+        ) : (
+          <PlatformIcon platform={item.icon ?? 'custom'} size={20} style={{ color: 'var(--pk-primary)' }} />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>
+            {item.title}
+          </span>
+          {item.badge && (
+            <span
+              className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full shrink-0"
+              style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
+            >
+              {item.badge}
+            </span>
+          )}
+        </div>
+        {item.subtitle && (
+          <p className="text-xs truncate mt-0.5" style={{ color: 'var(--pk-muted)' }}>
+            {item.subtitle}
+          </p>
+        )}
+      </div>
+      <ChevronRight
+        size={18}
+        className="shrink-0 opacity-40 group-hover:opacity-80 group-hover:translate-x-0.5 transition-all"
+        style={{ color: 'var(--pk-text)' }}
+      />
+    </a>
+  );
+}
+
+export default function LinksBlock({ section }: Props) {
+  const isGrid = section.layout === 'grid';
+  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={isGrid ? 'grid grid-cols-2 gap-3' : 'flex flex-col gap-3'}>
+        {section.links.map((item, i) => (
+          <LinkCard key={item.url + i} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/public/blocks/MusicReleasesBlock.tsx

@@ -0,0 +1,83 @@
+import { Play } from 'lucide-react';
+import type { MusicReleasesSection, MusicReleaseItem } from '../../types';
+import { Carousel } from '../components/Carousel';
+
+interface Props {
+  section: MusicReleasesSection;
+}
+
+function ReleaseCard({ item, cta, wide }: { item: MusicReleaseItem; cta: string; wide?: boolean }) {
+  return (
+    <a
+      href={item.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`group ${wide ? 'flex-none w-40 snap-start' : ''} flex flex-col transition-transform hover:scale-[1.02]`}
+    >
+      <div
+        className="relative w-full aspect-square overflow-hidden"
+        style={{ borderRadius: 'var(--pk-radius)', backgroundColor: 'rgba(255,255,255,0.05)' }}
+      >
+        <img src={item.artworkUrl} alt={item.title} className="w-full h-full object-cover" loading="lazy" />
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+          style={{ background: 'rgba(0,0,0,0.35)' }}
+        >
+          <span
+            className="flex items-center justify-center w-11 h-11 rounded-full"
+            style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
+          >
+            <Play size={20} fill="currentColor" />
+          </span>
+        </div>
+      </div>
+      <div className="mt-2 px-0.5">
+        <p className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>
+          {item.title}
+        </p>
+        {item.artist && (
+          <p className="text-xs truncate" style={{ color: 'var(--pk-muted)' }}>
+            {item.artist}
+          </p>
+        )}
+        <span
+          className="inline-flex items-center gap-1 mt-1.5 px-3 py-1 text-xs font-semibold rounded-full"
+          style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--pk-text)' }}
+        >
+          <Play size={11} fill="currentColor" /> {cta}
+        </span>
+      </div>
+    </a>
+  );
+}
+
+export default function MusicReleasesBlock({ section }: Props) {
+  const cta = section.ctaLabel ?? 'Ouvir';
+  if (section.layout === 'grid') {
+    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="grid grid-cols-2 gap-4">
+          {section.releases.map((item, i) => (
+            <ReleaseCard key={item.url + i} item={item} cta={cta} />
+          ))}
+        </div>
+      </section>
+    );
+  }
+  return (
+    <section className="py-6" id={section.id}>
+      <Carousel title={section.title}>
+        {section.releases.map((item, i) => (
+          <ReleaseCard key={item.url + i} item={item} cta={cta} wide />
+        ))}
+      </Carousel>
+    </section>
+  );
+}

package/src/public/blocks/ProfileHeader.tsx

@@ -0,0 +1,176 @@
+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 icon row */}
+      {socials.length > 0 && (
+        <div className="flex flex-wrap 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

@@ -0,0 +1,158 @@
+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>
+  );
+}