@fayz-ai/plugin-linkinbio 0.10.0 → 0.10.1

package/src/public/blocks/VenueListSection.tsx

@@ -1,91 +0,0 @@
-import type { VenueListSection as VenueListSectionType } from '../../types';
-
-interface Props {
-  section: VenueListSectionType;
-}
-
-export default function VenueListSection({ section }: Props) {
-  const layout = section.layout ?? 'grid';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-10"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {layout === 'logo-cloud' ? (
-          <div className="flex flex-wrap justify-center gap-6 md:gap-8">
-            {section.venues.map((venue, i) => (
-              <div key={i} className="flex flex-col items-center gap-2">
-                {venue.logoUrl ? (
-                  <img src={venue.logoUrl} alt={venue.name} className="h-12 w-12 object-contain opacity-70" loading="lazy" />
-                ) : (
-                  <div
-                    className="h-12 w-12 flex items-center justify-center text-lg font-bold opacity-70"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.06)', color: 'var(--pk-text)', borderRadius: 'var(--pk-radius)' }}
-                  >
-                    {venue.name[0]}
-                  </div>
-                )}
-                <span className="text-xs text-center" style={{ color: 'var(--pk-muted)' }}>{venue.name}</span>
-              </div>
-            ))}
-          </div>
-        ) : layout === 'list' ? (
-          <div className="space-y-3">
-            {section.venues.map((venue, i) => (
-              <div
-                key={i}
-                className="flex items-center justify-between py-3 px-4"
-                style={{ backgroundColor: 'rgba(255,255,255,0.04)', borderRadius: 'var(--pk-radius)' }}
-              >
-                <span className="font-medium" style={{ color: 'var(--pk-text)' }}>{venue.name}</span>
-                <span className="text-sm" style={{ color: 'var(--pk-muted)' }}>
-                  {[venue.city, venue.year].filter(Boolean).join(' · ')}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : (
-          /* Organic flowing tag cloud */
-          <div className="flex flex-wrap gap-3">
-            {section.venues.map((venue, i) => {
-              // Vary sizes based on name length and position for organic feel
-              const isLong = venue.name.length > 12;
-              const isShort = venue.name.length < 6;
-              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';
-              // Alternate subtle visual weight
-              const isHighlight = i % 5 === 0 || i % 7 === 0;
-              return (
-                <div
-                  key={i}
-                  className={`inline-flex flex-col items-start transition-all duration-300 hover:scale-105 ${sizeClass}`}
-                  style={{
-                    backgroundColor: isHighlight ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.03)',
-                    border: isHighlight ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.06)',
-                    borderRadius: '9999px',
-                  }}
-                >
-                  <span className="font-semibold whitespace-nowrap" style={{ color: 'var(--pk-text)' }}>
-                    {venue.name}
-                    {venue.city && (
-                      <span className="font-normal ml-2 opacity-50" style={{ color: 'var(--pk-muted)', fontSize: '0.8em' }}>
-                        {venue.city}
-                      </span>
-                    )}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/VideoGridSection.tsx

@@ -1,105 +0,0 @@
-import type { VideoGridSection as VideoGridSectionType } from '../../types';
-
-interface Props {
-  section: VideoGridSectionType;
-}
-
-export default function VideoGridSection({ section }: Props) {
-  const isFeatured = section.layout === 'featured';
-  const isList = section.layout === 'list';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl 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>
-        )}
-
-        {isFeatured && section.videos.length > 0 ? (
-          <div className="space-y-6">
-            {/* Featured video */}
-            <div className="aspect-video w-full overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-              <iframe
-                src={`https://www.youtube.com/embed/${section.videos[0].videoId}`}
-                title={section.videos[0].title ?? 'Video'}
-                className="h-full w-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                loading="lazy"
-              />
-            </div>
-            {section.videos[0].title && (
-              <p className="text-sm font-medium" style={{ color: 'var(--pk-muted)' }}>
-                {section.videos[0].title}
-              </p>
-            )}
-            {/* Remaining videos */}
-            {section.videos.length > 1 && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {section.videos.slice(1).map((video, i) => (
-                  <div key={i}>
-                    <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-                      <iframe
-                        src={`https://www.youtube.com/embed/${video.videoId}`}
-                        title={video.title ?? 'Video'}
-                        className="h-full w-full"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen
-                        loading="lazy"
-                      />
-                    </div>
-                    {video.title && (
-                      <p className="mt-2 text-sm" style={{ color: 'var(--pk-muted)' }}>
-                        {video.title}
-                      </p>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className={`grid gap-4 md:gap-6 ${isList ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}>
-            {section.videos.map((video, i) => (
-              <div key={i}>
-                <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-                  <iframe
-                    src={`https://www.youtube.com/embed/${video.videoId}`}
-                    title={video.title ?? 'Video'}
-                    className="h-full w-full"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    loading="lazy"
-                  />
-                </div>
-                {video.title && (
-                  <p className="mt-2 text-sm" style={{ color: 'var(--pk-muted)' }}>
-                    {video.title}
-                  </p>
-                )}
-              </div>
-            ))}
-            {section.channelUrl && (
-              <a
-                href={section.channelUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="aspect-video overflow-hidden flex items-center justify-center border border-white/10 hover:border-white/30 transition-colors"
-                style={{ borderRadius: 'var(--pk-radius)', background: 'var(--pk-alt-bg, rgba(255,255,255,0.05))' }}
-              >
-                <span className="text-lg font-semibold" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>
-                  Ver todos →
-                </span>
-              </a>
-            )}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/index.ts

@@ -1,16 +0,0 @@
-export { default as HeroSection } from './HeroSection';
-export { default as BioSection } from './BioSection';
-export { default as GallerySection } from './GallerySection';
-export { default as VideoGridSection } from './VideoGridSection';
-export { default as SocialLinksSection } from './SocialLinksSection';
-export { default as EmbedSection } from './EmbedSection';
-export { default as ProjectSection } from './ProjectSection';
-export { default as StatsSection } from './StatsSection';
-export { default as VenueListSection } from './VenueListSection';
-export { default as CTASection } from './CTASection';
-export { default as TextSection } from './TextSection';
-export { default as ProfileHeader } from './ProfileHeader';
-export { default as LinksBlock } from './LinksBlock';
-export { default as MusicReleasesBlock } from './MusicReleasesBlock';
-export { default as TourDatesBlock } from './TourDatesBlock';
-export { default as FeaturedBlock } from './FeaturedBlock';

package/src/public/components/Carousel.tsx

@@ -1,90 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-/**
- * Komi-style horizontal collection: a section title with prev/next controls and
- * a snap-scrolling track. Mobile-first — the track scrolls by touch and the
- * arrows nudge it by ~80% of the viewport. Arrows disable at the track ends.
- */
-export function Carousel({ title, children }: { title?: string; children: ReactNode }) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const [atStart, setAtStart] = useState(true);
-  const [atEnd, setAtEnd] = useState(false);
-
-  const update = () => {
-    const el = trackRef.current;
-    if (!el) return;
-    setAtStart(el.scrollLeft <= 2);
-    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 2);
-  };
-
-  useEffect(() => {
-    update();
-    const el = trackRef.current;
-    if (!el) return;
-    el.addEventListener('scroll', update, { passive: true });
-    window.addEventListener('resize', update);
-    return () => {
-      el.removeEventListener('scroll', update);
-      window.removeEventListener('resize', update);
-    };
-  }, []);
-
-  const nudge = (dir: 1 | -1) => {
-    const el = trackRef.current;
-    if (!el) return;
-    el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: 'smooth' });
-  };
-
-  const arrowStyle = (disabled: boolean) => ({
-    backgroundColor: 'rgba(255,255,255,0.06)',
-    color: 'var(--pk-text)',
-    opacity: disabled ? 0.25 : 1,
-    borderRadius: '9999px',
-  });
-
-  return (
-    <div>
-      {(title || true) && (
-        <div className="flex items-center justify-between mb-4 px-1">
-          {title && (
-            <h2
-              className="text-xl md:text-2xl font-bold"
-              style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-            >
-              {title}
-            </h2>
-          )}
-          <div className="flex gap-2">
-            <button
-              type="button"
-              aria-label="Anterior"
-              onClick={() => nudge(-1)}
-              disabled={atStart}
-              className="flex items-center justify-center w-9 h-9 transition-opacity"
-              style={arrowStyle(atStart)}
-            >
-              <ChevronLeft size={18} />
-            </button>
-            <button
-              type="button"
-              aria-label="Próximo"
-              onClick={() => nudge(1)}
-              disabled={atEnd}
-              className="flex items-center justify-center w-9 h-9 transition-opacity"
-              style={arrowStyle(atEnd)}
-            >
-              <ChevronRight size={18} />
-            </button>
-          </div>
-        </div>
-      )}
-      <div
-        ref={trackRef}
-        className="flex gap-3 overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-1"
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/public/components/MediaKit.tsx

@@ -1,249 +0,0 @@
-import { useMemo, useState, type CSSProperties } from 'react';
-import { createPortal } from 'react-dom';
-import { Download, X, Copy, Check, FileText, ExternalLink } from 'lucide-react';
-import type { BioPage, BioMediaItem } from '../../types';
-import { getBrandingVars } from '../utils';
-
-interface Asset {
-  label: string;
-  url: string;
-  kind: 'image' | 'logo' | 'doc' | 'audio' | 'link';
-}
-
-/** Derive downloadable assets from the page (logo, photos, bio text) + explicit mediaKit. */
-function derive(page: BioPage): { images: Asset[]; bioText: string; extras: Asset[]; driveUrl?: string } {
-  const seen = new Set<string>();
-  const images: Asset[] = [];
-  const pushImg = (label: string, url: string, kind: Asset['kind'] = 'image') => {
-    if (!url || seen.has(url) || !url.startsWith('/')) return; // only local (own) assets
-    seen.add(url);
-    images.push({ label, url, kind });
-  };
-
-  if (page.branding.logoUrl) pushImg('Logo', page.branding.logoUrl, 'logo');
-
-  let bioText = '';
-  for (const s of page.sections) {
-    if (s.type === 'profile-header' && s.imageUrl) pushImg('Foto de capa', s.imageUrl);
-    if (s.type === 'hero' && s.backgroundImageUrl) pushImg('Foto de capa', s.backgroundImageUrl);
-    if (s.type === 'gallery') s.media.forEach((m: BioMediaItem, i: number) => m.type === 'image' && pushImg(`Foto ${i + 1}`, m.url));
-    if (s.type === 'bio' || s.type === 'text') {
-      if (s.content) bioText += `${s.title ? `## ${s.title}\n\n` : ''}${s.content}\n\n`;
-      if (s.type === 'bio' && s.imageUrl) pushImg('Foto', s.imageUrl);
-    }
-  }
-
-  const extras = (page.mediaKit?.assets ?? []).map(
-    (a: { label: string; url: string; kind?: Asset['kind'] }): Asset => ({ label: a.label, url: a.url, kind: a.kind ?? 'link' }),
-  );
-
-  return { images, bioText: bioText.trim(), extras, driveUrl: page.mediaKit?.driveUrl };
-}
-
-function fileName(url: string, fallback: string): string {
-  const base = url.split('/').pop()?.split('?')[0];
-  return base && base.includes('.') ? base : fallback;
-}
-
-export function MediaKit({ page, variant = 'inline' }: { page: BioPage; variant?: 'inline' | 'fab' }) {
-  const [open, setOpen] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const { images, bioText, extras, driveUrl } = useMemo(() => derive(page), [page]);
-
-  if (!images.length && !bioText && !extras.length && !driveUrl) return null;
-
-  const copyBio = async () => {
-    try {
-      await navigator.clipboard.writeText(bioText);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1800);
-    } catch {
-      /* clipboard unavailable */
-    }
-  };
-
-  const downloadBio = () => {
-    const blob = new Blob([bioText], { type: 'text/plain;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${page.identity.slug || 'bio'}-bio.txt`;
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
-  };
-
-  const modal = (
-    <div
-      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4"
-      style={{
-        ...(getBrandingVars(page.branding) as CSSProperties),
-        background: 'rgba(0,0,0,0.6)',
-        backdropFilter: 'blur(4px)',
-        fontFamily: 'var(--pk-font-body)',
-      }}
-      onClick={() => setOpen(false)}
-    >
-      <div
-        className="w-full sm:max-w-lg max-h-[88vh] overflow-y-auto rounded-t-3xl sm:rounded-3xl"
-        style={{ backgroundColor: 'var(--pk-bg)', border: '1px solid rgba(255,255,255,0.1)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div
-          className="sticky top-0 flex items-center justify-between px-5 py-4 z-10"
-          style={{ backgroundColor: 'var(--pk-bg)', borderBottom: '1px solid rgba(255,255,255,0.08)' }}
-        >
-          <div className="flex items-center gap-2">
-            <Download size={18} style={{ color: 'var(--pk-primary)' }} />
-            <h3 className="text-base font-bold" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>
-              Mídia Kit
-            </h3>
-          </div>
-          <button
-            type="button"
-            aria-label="Fechar"
-            onClick={() => setOpen(false)}
-            className="flex items-center justify-center w-8 h-8 rounded-full"
-            style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--pk-text)' }}
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        <div className="px-5 py-5 space-y-6">
-          {/* Full kit (Drive) */}
-          {driveUrl && (
-            <a
-              href={driveUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-3 p-3 rounded-xl transition-transform hover:scale-[1.01]"
-              style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
-            >
-              <ExternalLink size={18} />
-              <span className="text-sm font-semibold">Abrir kit completo (Drive)</span>
-            </a>
-          )}
-
-          {/* Bio */}
-          {bioText && (
-            <section>
-              <h4 className="text-xs font-bold uppercase tracking-wider mb-2 opacity-60" style={{ color: 'var(--pk-muted)' }}>
-                Bio / Release
-              </h4>
-              <p
-                className="text-sm leading-relaxed max-h-32 overflow-y-auto p-3 rounded-xl"
-                style={{ color: 'var(--pk-muted)', backgroundColor: 'rgba(255,255,255,0.04)' }}
-              >
-                {bioText.replace(/[*#]/g, '')}
-              </p>
-              <div className="flex gap-2 mt-2">
-                <button
-                  type="button"
-                  onClick={copyBio}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full"
-                  style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--pk-text)' }}
-                >
-                  {copied ? <Check size={13} /> : <Copy size={13} />} {copied ? 'Copiado' : 'Copiar'}
-                </button>
-                <button
-                  type="button"
-                  onClick={downloadBio}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full"
-                  style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--pk-text)' }}
-                >
-                  <FileText size={13} /> .txt
-                </button>
-              </div>
-            </section>
-          )}
-
-          {/* Photos + logo */}
-          {images.length > 0 && (
-            <section>
-              <h4 className="text-xs font-bold uppercase tracking-wider mb-2 opacity-60" style={{ color: 'var(--pk-muted)' }}>
-                Fotos & Logo
-              </h4>
-              <div className="grid grid-cols-3 gap-2">
-                {images.map((img) => (
-                  <a
-                    key={img.url}
-                    href={img.url}
-                    download={fileName(img.url, `${page.identity.slug}-${img.label}`)}
-                    className="group relative aspect-square overflow-hidden rounded-xl"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}
-                    title={`Baixar ${img.label}`}
-                  >
-                    <img
-                      src={img.url}
-                      alt={img.label}
-                      className={`w-full h-full ${img.kind === 'logo' ? 'object-contain p-3' : '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.45)' }}
-                    >
-                      <Download size={20} style={{ color: '#fff' }} />
-                    </div>
-                  </a>
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Extra resources */}
-          {extras.length > 0 && (
-            <section>
-              <h4 className="text-xs font-bold uppercase tracking-wider mb-2 opacity-60" style={{ color: 'var(--pk-muted)' }}>
-                Recursos
-              </h4>
-              <div className="flex flex-col gap-2">
-                {extras.map((a) => (
-                  <a
-                    key={a.url}
-                    href={a.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    download={a.kind !== 'link' ? fileName(a.url, a.label) : undefined}
-                    className="flex items-center gap-3 p-3 rounded-xl"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.05)', color: 'var(--pk-text)' }}
-                  >
-                    {a.kind === 'link' ? <ExternalLink size={16} /> : <FileText size={16} />}
-                    <span className="text-sm font-medium">{a.label}</span>
-                    <Download size={15} className="ml-auto opacity-50" />
-                  </a>
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  const isFab = variant === 'fab';
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        aria-label="Baixar mídia kit"
-        title="Mídia Kit"
-        className={`flex items-center justify-center rounded-full transition-transform hover:scale-110 ${isFab ? 'w-12 h-12' : 'w-11 h-11'}`}
-        style={
-          isFab
-            ? {
-                color: 'var(--pk-primary)',
-                border: '1.5px solid var(--pk-primary)',
-                backgroundColor: 'color-mix(in srgb, var(--pk-bg) 70%, transparent)',
-                backdropFilter: 'blur(6px)',
-              }
-            : { backgroundColor: 'rgba(255,255,255,0.07)', color: 'var(--pk-text)' }
-        }
-      >
-        <Download size={isFab ? 20 : 19} />
-      </button>
-      {open && typeof document !== 'undefined' && createPortal(modal, document.body)}
-    </>
-  );
-}

package/src/public/components/PlatformIcon.tsx

@@ -1,56 +0,0 @@
-import type { CSSProperties, ComponentType } from 'react';
-import {
-  SiInstagram,
-  SiYoutube,
-  SiSoundcloud,
-  SiTiktok,
-  SiSpotify,
-  SiWhatsapp,
-  SiApplemusic,
-  SiBandcamp,
-  SiFacebook,
-  SiX,
-  SiTelegram,
-  SiBeatport,
-  SiGoogledrive,
-  SiMixcloud,
-} from 'react-icons/si';
-import { Globe, Mail, ExternalLink } from 'lucide-react';
-
-type IconProps = { size?: number | string; style?: CSSProperties; className?: string };
-
-// Real brand glyphs for social/platform links (react-icons → simple-icons set).
-const BRAND: Record<string, ComponentType<IconProps>> = {
-  instagram: SiInstagram,
-  youtube: SiYoutube,
-  soundcloud: SiSoundcloud,
-  tiktok: SiTiktok,
-  spotify: SiSpotify,
-  whatsapp: SiWhatsapp,
-  'apple-music': SiApplemusic,
-  bandcamp: SiBandcamp,
-  facebook: SiFacebook,
-  twitter: SiX,
-  telegram: SiTelegram,
-  beatport: SiBeatport,
-  mixcloud: SiMixcloud,
-  drive: SiGoogledrive,
-  email: Mail,
-  website: Globe,
-};
-
-/** Renders the real brand icon for a platform, falling back to a generic link glyph. */
-export function PlatformIcon({
-  platform,
-  size = 20,
-  style,
-  className,
-}: {
-  platform: string;
-  size?: number;
-  style?: CSSProperties;
-  className?: string;
-}) {
-  const Icon = BRAND[platform] ?? ExternalLink;
-  return <Icon size={size} style={style} className={className} />;
-}

package/src/public/components/Reveal.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-
-/**
- * Scroll-reveal wrapper: fades + lifts its children into view the first time
- * they intersect the viewport. Respects prefers-reduced-motion (renders shown).
- * Works inside the page's `fixed inset-0` scroll container because the default
- * IntersectionObserver root is the viewport.
- */
-export function Reveal({
-  children,
-  delay = 0,
-  className,
-}: {
-  children: ReactNode;
-  delay?: number;
-  className?: string;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [shown, setShown] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const reduce =
-      typeof window !== 'undefined' &&
-      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    if (reduce || typeof IntersectionObserver === 'undefined') {
-      setShown(true);
-      return;
-    }
-    const io = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setShown(true);
-          io.disconnect();
-        }
-      },
-      { threshold: 0.1, rootMargin: '0px 0px -6% 0px' },
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={className}
-      style={{
-        opacity: shown ? 1 : 0,
-        transform: shown ? 'none' : 'translateY(22px)',
-        transition: `opacity 0.6s ease ${delay}ms, transform 0.6s cubic-bezier(0.2,0.7,0.2,1) ${delay}ms`,
-        willChange: 'opacity, transform',
-      }}
-    >
-      {children}
-    </div>
-  );
-}