> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Livepeer Solutions Providers

> Welcome To The Solutions Portal: Explore, Build, Create

export const embodySocials = [{
  icon: 'globe',
  href: 'https://embody.zone/',
  label: 'Embody'
}, {
  icon: 'comment-dots',
  href: 'https://forum.livepeer.org/t/embody-unreal-engine-updates/3186',
  label: 'Livepeer Forum'
}, {
  icon: 'discord',
  href: 'https://discord.gg/livepeer',
  label: 'Livepeer Discord'
}];

export const streamplaceSocials = [{
  icon: 'globe',
  href: 'https://stream.place/',
  label: 'Streamplace'
}, {
  icon: 'file-code',
  href: 'https://stream.place/docs/',
  label: 'Streamplace Docs'
}, {
  icon: 'github',
  href: 'https://github.com/streamplace/streamplace',
  label: 'Streamplace GitHub'
}, {
  icon: 'tower-broadcast',
  href: 'https://stream.place/live',
  label: 'Live Dashboard'
}, {
  icon: 'discord',
  href: 'https://discord.com/invite/EdtZv4UTMU',
  label: 'Streamplace Discord'
}];

export const frameworksSocials = [{
  icon: 'globe',
  href: 'https://frameworks.network/',
  label: 'Frameworks'
}, {
  icon: 'file-code',
  href: 'https://docs.frameworks.network/',
  label: 'Frameworks Docs'
}, {
  icon: 'grid',
  href: 'https://app.frameworks.network/',
  label: 'Frameworks App'
}, {
  icon: 'github',
  href: 'https://github.com/livepeer-frameworks/monorepo',
  label: 'Frameworks GitHub'
}, {
  icon: 'envelope',
  href: 'https://frameworks.network/contact',
  label: 'Contact'
}];

export const studioSocials = [{
  icon: 'globe',
  href: 'https://livepeer.studio/',
  label: 'Livepeer Studio'
}, {
  icon: 'file-code',
  href: 'https://livepeer.studio/docs',
  label: 'Studio Docs'
}, {
  icon: 'github',
  href: 'https://github.com/livepeer/studio',
  label: 'Studio GitHub'
}, {
  icon: 'youtube',
  href: 'https://www.youtube.com/@livepeerstudio5404',
  label: 'Studio YouTube'
}, {
  icon: 'x-twitter',
  href: 'https://x.com/livepeerstudio',
  label: 'Studio X'
}, {
  icon: 'discord',
  href: 'https://discord.gg/livepeer',
  label: 'Livepeer Discord'
}];

export const daydreamSocials = [{
  icon: 'globe',
  href: 'https://daydream.live/',
  label: 'Daydream Website'
}, {
  icon: 'github',
  href: 'https://github.com/daydreamlive/scope',
  label: 'Daydream GitHub'
}, {
  icon: 'file-code',
  href: 'https://docs.daydream.live/',
  label: 'Daydream Docs'
}, {
  icon: 'youtube',
  href: 'https://www.youtube.com/channel/UCviyh_-8H2vkYq9ROHMBffQ',
  label: 'Daydream YouTube'
}, {
  icon: 'x-twitter',
  href: 'https://x.com/daydreamlive',
  label: 'Daydream X'
}, {
  icon: 'discord',
  href: 'https://discord.gg/pF2Akym5bV',
  label: 'Daydream Discord'
}, {
  icon: 'instagram',
  href: 'https://www.instagram.com/daydreamlive_/',
  label: 'Daydream Instagram'
}, {
  icon: 'linkedin',
  href: 'https://www.linkedin.com/company/daydreamlive',
  label: 'Daydream LinkedIn'
}];

export const embodyInfra = [{
  icon: 'plug',
  label: 'api'
}, {
  icon: 'cloud',
  label: 'saas'
}];

export const streamplaceInfra = [{
  icon: 'toolbox',
  label: 'sdk'
}];

export const frameworksInfra = [{
  icon: 'server',
  label: 'self-hosted'
}, {
  icon: 'cloud',
  label: 'saas'
}, {
  icon: 'torii-gate',
  label: 'gateway'
}];

export const studioInfra = [{
  icon: 'plug',
  label: 'api'
}, {
  icon: 'cloud',
  label: 'saas'
}, {
  icon: 'torii-gate',
  label: 'gateway'
}];

export const daydreamInfra = [{
  icon: 'torii-gate',
  label: 'gateway'
}, {
  icon: 'server',
  label: 'self-hosted'
}, {
  icon: 'toolbox',
  label: 'sdk'
}];

export const embodyBadges = [{
  color: 'purple',
  label: 'AI'
}, {
  color: 'green',
  label: 'Realtime AI'
}, {
  color: 'red',
  label: 'Agents'
}];

export const streamplaceBadges = [{
  color: 'blue',
  label: 'Video'
}];

export const frameworksBadges = [{
  color: 'blue',
  label: 'Video'
}];

export const studioBadges = [{
  color: 'blue',
  label: 'Video'
}];

export const daydreamBadges = [{
  color: 'blue',
  label: 'Video'
}, {
  color: 'purple',
  label: 'AI'
}, {
  color: 'green',
  label: 'Realtime AI'
}];

export const YouTubeVideo = ({embedUrl, url, title = "", author = "", hint = "", caption, className = "", style = {}, ...rest}) => {
  const toEmbedUrl = value => {
    if (!value || typeof value !== "string") return "";
    const source = value.trim();
    if (!source) return "";
    try {
      const parsed = new URL(source);
      const host = parsed.hostname.replace(/^www\./, "");
      if (host === "youtube.com" || host === "youtube-nocookie.com") {
        if (parsed.pathname.startsWith("/embed/")) return source;
        const videoId = parsed.pathname.startsWith("/shorts/") ? parsed.pathname.split("/").filter(Boolean)[1] : parsed.searchParams.get("v");
        if (!videoId) return "";
        const params = new URLSearchParams(parsed.search);
        params.delete("v");
        const query = params.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
      if (host === "youtu.be") {
        const videoId = parsed.pathname.split("/").filter(Boolean)[0];
        if (!videoId) return "";
        const query = parsed.searchParams.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
    } catch (_err) {
      return "";
    }
    return "";
  };
  const resolvedEmbedUrl = toEmbedUrl(embedUrl || url);
  if (!resolvedEmbedUrl) {
    return null;
  }
  const isValidYouTubeUrl = resolvedEmbedUrl.includes("youtube.com/embed/");
  if (!isValidYouTubeUrl) {
    console.warn("Invalid YouTube embed URL:", embedUrl || url);
    return null;
  }
  const buildCaption = () => {
    if (caption) return caption;
    if (!author && !title) return null;
    return <span style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      textAlign: "center",
      lineHeight: 1.2
    }}>
        <span>
          {author && <>
              <Icon icon="microphone" size={16} /> <strong>{author}</strong>
            </>}
          {author && title ? `${" "} • ${title}` : title}
        </span>
      </span>;
  };
  const captionContent = buildCaption();
  return <Frame className={className} style={style} {...hint ? {
    hint
  } : {}} {...captionContent ? {
    caption: captionContent
  } : {}} {...rest}>
      <iframe className="w-full aspect-video rounded-xl" src={resolvedEmbedUrl} title={title || author || "YouTube Video"} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </Frame>;
};

export const Starfield = ({density = 1.1, className = "", style = {}, ...rest}) => {
  const canvasRef = useRef(null);
  const readThemeColor = (tokenName, fallback) => {
    if (typeof window === "undefined") return fallback;
    const value = getComputedStyle(document.documentElement).getPropertyValue(tokenName).trim();
    return value || fallback;
  };
  const brightenHex = (hexColor, amount) => {
    const normalized = String(hexColor || "").replace("#", "");
    const expanded = normalized.length === 3 ? normalized.split("").map(char => `${char}${char}`).join("") : normalized;
    if (!(/^[0-9a-fA-F]{6}$/).test(expanded)) {
      return hexColor;
    }
    const channels = expanded.match(/.{2}/g).map(chunk => Number.parseInt(chunk, 16));
    const adjusted = channels.map(channel => Math.max(0, Math.min(255, Math.round(channel + (255 - channel) * amount))));
    return `#${adjusted.map(channel => channel.toString(16).padStart(2, "0")).join("")}`;
  };
  const isDarkMode = () => {
    if (typeof window === "undefined") return false;
    return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
  };
  const getColorPalette = () => {
    const accent = readThemeColor("--accent", "#5DD662");
    const accentDark = readThemeColor("--accent-dark", accent);
    return isDarkMode() ? [accent, accent, accentDark, brightenHex(accent, 0.18)] : [brightenHex(accent, 0.22), brightenHex(accent, 0.22), brightenHex(accent, 0.38), brightenHex(accent, 0.52)];
  };
  const SIZE_BUCKETS = [{
    scale: 0.3,
    weight: 0.50
  }, {
    scale: 0.5,
    weight: 0.20
  }, {
    scale: 0.9,
    weight: 0.15
  }, {
    scale: 1.3,
    weight: 0.10
  }, {
    scale: 1.8,
    weight: 0.05
  }];
  const pickScale = () => {
    const r = Math.random();
    let acc = 0;
    for (const b of SIZE_BUCKETS) {
      acc += b.weight;
      if (r <= acc) return b.scale;
    }
    return 0.25;
  };
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || typeof window === "undefined" || typeof document === "undefined" || typeof Image === "undefined") {
      return;
    }
    const ctx = canvas.getContext("2d");
    if (!ctx) {
      console.warn("[Starfield] Canvas 2D context unavailable");
      return;
    }
    let rafId;
    let stars = [];
    let tintedCache = new Map();
    let cancelled = false;
    const COLORS = Array.isArray(getColorPalette()) ? getColorPalette().filter(Boolean) : [];
    if (COLORS.length === 0) {
      console.warn("[Starfield] Missing color palette");
      return;
    }
    const logo = new Image();
    logo.src = "/snippets/assets/logos/Livepeer-Logo-Symbol-Light.svg";
    const makeTinted = color => {
      if (tintedCache.has(color)) return tintedCache.get(color);
      const off = document.createElement("canvas");
      const octx = off.getContext("2d");
      if (!octx) {
        return null;
      }
      const base = 32;
      off.width = base;
      off.height = base;
      octx.clearRect(0, 0, base, base);
      octx.drawImage(logo, 0, 0, base, base);
      octx.globalCompositeOperation = "source-in";
      octx.fillStyle = color;
      octx.fillRect(0, 0, base, base);
      octx.globalCompositeOperation = "source-over";
      tintedCache.set(color, off);
      return off;
    };
    const resize = () => {
      const dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      if (!rect.width || !rect.height) {
        return;
      }
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const count = Math.floor(rect.width * rect.height / 16000 * density);
      stars = Array.from({
        length: count
      }).map(() => {
        const color = COLORS[Math.floor(Math.random() * COLORS.length)];
        return {
          x: Math.random() * rect.width,
          y: Math.random() * rect.height,
          scale: pickScale(),
          base: Math.random() * 0.45 + 0.25,
          speed: Math.random() * 0.015 + 0.003,
          phase: Math.random() * Math.PI * 2,
          color,
          rotation: Math.random() * Math.PI * 2,
          rotSpeed: Math.random() * 0.002 - 0.001
        };
      });
    };
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (const s of stars) {
        s.phase += s.speed;
        s.rotation += s.rotSpeed;
        const alpha = s.base + Math.sin(s.phase) * 0.25;
        const size = 10 * s.scale;
        ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
        const tinted = makeTinted(s.color);
        if (!tinted) {
          continue;
        }
        ctx.save();
        ctx.translate(s.x, s.y);
        ctx.rotate(s.rotation);
        ctx.drawImage(tinted, -size / 2, -size / 2, size, size);
        ctx.restore();
      }
      rafId = requestAnimationFrame(draw);
    };
    logo.onload = () => {
      if (cancelled) {
        return;
      }
      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      resize();
      if (prefersReducedMotion) {
        draw();
        return;
      }
      draw();
      window.addEventListener("resize", resize);
    };
    logo.onerror = () => {
      console.warn("[Starfield] Failed to load logo asset");
    };
    return () => {
      cancelled = true;
      cancelAnimationFrame(rafId);
      window.removeEventListener("resize", resize);
      logo.onload = null;
      logo.onerror = null;
    };
  }, [density]);
  return <canvas ref={canvasRef} aria-hidden="true" className={className} style={{
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    pointerEvents: "none",
    zIndex: 0,
    ...style
  }} {...rest} />;
};

export const SocialLinks = ({links, size = 20, gap = "var(--lp-spacing-3)", justify = "center", iconColor, color, className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || color;
  const linkStyle = {
    border: "none",
    borderBottom: "none",
    textDecoration: "none",
    display: "inline-flex"
  };
  const colors = {
    discord: resolvedIconColor || "var(--lp-color-brand-discord)",
    twitter: resolvedIconColor || "var(--lp-color-text-primary)",
    github: resolvedIconColor || "var(--lp-color-brand-github)",
    forum: resolvedIconColor || "var(--lp-color-brand-forum)",
    website: resolvedIconColor || "var(--lp-color-accent)",
    blog: resolvedIconColor || "var(--lp-color-accent)",
    globe: resolvedIconColor || "var(--lp-color-brand-globe)",
    twitch: resolvedIconColor || "var(--lp-color-brand-twitch)",
    youtube: resolvedIconColor || "var(--lp-color-brand-youtube)",
    instagram: resolvedIconColor || "var(--lp-color-brand-instagram)",
    linkedin: resolvedIconColor || "var(--lp-color-brand-linkedin)"
  };
  const iconColorMap = {
    discord: "discord",
    "x-twitter": "twitter",
    github: "github",
    "comment-pen": "forum",
    "pen-line": "blog",
    "pencil-line": "blog",
    globe: "globe",
    "book-open": "website",
    twitch: "twitch",
    youtube: "youtube",
    instagram: "instagram",
    linkedin: "linkedin"
  };
  const defaultLinks = [{
    icon: "discord",
    href: "https://discord.com/invite/livepeer",
    label: "Livepeer Discord"
  }, {
    icon: "globe",
    href: "https://livepeer.org",
    label: "Livepeer Website"
  }, {
    icon: "github",
    href: "https://github.com/livepeer",
    label: "Livepeer GitHub"
  }, {
    icon: "comment-pen",
    href: "https://forum.livepeer.org",
    label: "Livepeer Forum"
  }, {
    icon: "pen-line",
    href: "https://livepeer.org/blog",
    label: "Livepeer Blog"
  }, {
    icon: "x-twitter",
    href: "https://x.com/livepeer",
    label: "Livepeer X"
  }];
  const items = links || defaultLinks;
  return <div className={className} style={style} {...rest}>
      <style>{`
        .social-links a {
          border: none;
          border-bottom: none;
        }
      `}</style>
      <span className="social-links" style={{
    display: "flex",
    justifyContent: justify,
    gap: gap,
    marginTop: "var(--lp-spacing-2)"
  }}>
        {items.map((item, i) => <a key={i} href={item.href} target="_blank" rel="noopener noreferrer" aria-label={item.label} style={linkStyle}>
            <Tooltip headline={item.label}>
              <Icon icon={item.icon} size={size} color={colors[iconColorMap[item.icon] || "website"] || "var(--lp-color-accent)"} aria-hidden="true" />
            </Tooltip>
          </a>)}
      </span>
    </div>;
};

export const LazyLoad = ({children, height = "200px", offset = "200px", fadeDuration = 400, className = "", style = {}, ...rest}) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, {
      rootMargin: offset
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  useEffect(() => {
    if (!visible) return;
    const frameId = requestAnimationFrame(() => {
      setReady(true);
    });
    return () => cancelAnimationFrame(frameId);
  }, [visible]);
  const placeholder = <div ref={ref} className={className} style={{
    minHeight: height,
    ...style
  }} {...rest} />;
  if (!visible) return placeholder;
  return <div ref={ref} className={className} style={{
    opacity: ready ? 1 : 0,
    transition: `opacity ${fadeDuration}ms ease-in`,
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const ScrollBox = ({children, maxHeight = 300, showHint = true, ariaLabel = "Scrollable content", style = {}, className = "", ...rest}) => {
  const contentRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);
  useEffect(() => {
    const checkOverflow = () => {
      if (contentRef.current) {
        const maxHeightPx = typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight, 10) || 300;
        setIsOverflowing(contentRef.current.scrollHeight > maxHeightPx);
      }
    };
    checkOverflow();
    window.addEventListener("resize", checkOverflow);
    return () => window.removeEventListener("resize", checkOverflow);
  }, [maxHeight, children]);
  return <div className={className} style={{
    position: "relative",
    ...style
  }} {...rest}>
      <div ref={contentRef} role="region" tabIndex={0} aria-label={ariaLabel} style={{
    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
    overflowY: "auto",
    paddingRight: 4
  }} onScroll={e => {
    const el = e.target;
    const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10;
    const hint = el.parentNode.querySelector("[data-scroll-hint]");
    if (hint) hint.style.opacity = atBottom ? "0" : "1";
  }}>
        {children}
      </div>
      {showHint && isOverflowing && <div data-scroll-hint style={{
    fontSize: 11,
    color: "var(--lp-color-text-muted)",
    textAlign: "center",
    marginTop: 8,
    transition: "opacity 0.2s"
  }}>
          Scroll for more ↓
        </div>}
    </div>;
};

export const IconBadgeWrapper = ({items = [], iconColor, size = 14, gap = "var(--lp-spacing-3)", margin = '0.25rem 0 0.5rem', style = {}, className = '', ...rest}) => {
  const wrapperStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap,
    margin
  };
  const tagStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: "var(--lp-spacing-1)",
    fontSize: `${size}px`,
    color: 'var(--lp-color-text-primary)'
  };
  return <div className={className} style={{
    ...wrapperStyle,
    ...style
  }} {...rest}>
      {items.map((item, i) => <span key={i} style={tagStyle}>
          <Icon icon={item.icon} size={size} color={iconColor || 'currentColor'} />
          {item.label}
        </span>)}
    </div>;
};

export const BadgeWrapper = ({badges, children, gap = '0.4rem', margin = '0.5rem 0 1.5rem 0', style = {}, className = '', ...rest}) => {
  const defaultStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap,
    margin
  };
  return <div className={className} style={{
    ...defaultStyle,
    ...style
  }} {...rest}>
      {badges ? badges.map((b, i) => <Badge key={i} color={b.color}>
              {b.label}
            </Badge>) : children}
    </div>;
};

export const SolutionCard = ({badges, logoSrc, logoAlt, logoHeight = '60px', subtitle, infraTags, blurb, ScrollBox, socialLinks}) => {
  return <div style={{
    margin: '0 0 1rem 0'
  }}>
      {badges}

      {logoSrc && <div style={{
    height: logoHeight,
    display: 'flex',
    alignItems: 'center',
    margin: '0.5rem 0'
  }}>
          <img src={logoSrc} alt={logoAlt || 'solution provider logo'} style={{
    height: '100%',
    width: 'auto',
    maxWidth: '100%',
    objectFit: 'contain',
    marginTop: "var(--lp-spacing-1)"
  }} />
        </div>}

      {subtitle && <>
          <style>{`.solution-card-subtitle { color: white !important; font-style: italic }`}</style>
          <div className="solution-card-subtitle" style={{
    fontWeight: 700,
    fontSize: '1rem'
  }}>
            {subtitle}
          </div>
        </>}

      {infraTags}

      {blurb && ScrollBox && <ScrollBox maxHeight={100} style={{
    fontSize: '0.85rem',
    lineHeight: '1.1rem'
  }}>
          {blurb}
        </ScrollBox>}

      {socialLinks}
    </div>;
};

export const CustomCardTitle = ({icon, title, variant = "card", iconSize, style = {}, className = "", ...rest}) => {
  const variants = {
    card: {
      display: 'flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)",
      marginBottom: "var(--lp-spacing-3)",
      color: 'var(--lp-color-text-primary)',
      fontSize: '1rem',
      fontWeight: 600
    },
    accordion: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)"
    },
    tab: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.4rem',
      fontSize: '0.875rem'
    }
  };
  const sizes = {
    card: 20,
    accordion: 18,
    tab: 14
  };
  const size = iconSize || sizes[variant] || 20;
  const baseStyle = variants[variant] || variants.card;
  return variant === 'card' ? <div className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </div> : <span className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </span>;
};

export const BlinkingIcon = ({icon = 'terminal', size = 16, color, className = '', style = {}, ...rest}) => {
  const resolvedColor = color || 'var(--lp-color-accent)';
  return <span className={className} style={{
    display: 'inline-flex',
    ...style
  }} {...rest}>
      <style>{`
        @keyframes blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.3; }
        }
        @media (prefers-reduced-motion: reduce) {
          * { animation: none !important; }
        }
      `}</style>
      <span style={{
    display: 'inline-flex',
    animation: 'blink 3s ease-in-out infinite'
  }}>
        <Icon icon={icon} size={size} color={resolvedColor} />
      </span>
    </span>;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const P = ({children, icon, iconSize = 16, iconColor, align = "left", gap = "var(--lp-spacing-2)", className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || "var(--p-icon-color)";
  const containerStyle = {
    display: icon ? "flex" : "block",
    alignItems: "center",
    gap: icon ? gap : 0,
    justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
    textAlign: align
  };
  const paragraphStyle = {
    margin: 0,
    color: "var(--lp-color-text-secondary)",
    opacity: 1
  };
  return <div className={className} style={{
    ...containerStyle,
    ...style
  }} {...rest}>
      {icon && <Icon icon={icon} size={iconSize} color={resolvedIconColor} />}
      <p style={paragraphStyle}>{children}</p>
    </div>;
};

export const H5 = ({children, icon, iconSize = 18, iconColor, align = "left", gap = "var(--lp-spacing-2)", className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || "var(--lp-color-accent)";
  const containerStyle = {
    display: icon ? "flex" : "block",
    alignItems: "center",
    gap: icon ? gap : 0,
    justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
    textAlign: align,
    marginBottom: "var(--lp-spacing-2)"
  };
  const headingStyle = {
    margin: 0,
    fontSize: "1.125rem",
    fontWeight: "bold",
    color: "var(--lp-color-text-primary)",
    opacity: 1
  };
  return <div className={className} style={{
    ...containerStyle,
    ...style
  }} {...rest}>
      {icon && <Icon icon={icon} size={iconSize} color={resolvedIconColor} />}
      <h5 style={headingStyle}>{children}</h5>
    </div>;
};

export const H2 = ({children, icon, iconSize = 28, iconColor, align = "left", gap = "var(--lp-spacing-3)", className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || "var(--lp-color-accent)";
  const containerStyle = {
    display: icon ? "flex" : "block",
    alignItems: "center",
    gap: icon ? gap : 0,
    justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
    textAlign: align,
    marginBottom: "var(--lp-spacing-4)"
  };
  const headingStyle = {
    margin: 0,
    fontSize: "1.875rem",
    fontWeight: "bold",
    color: "var(--lp-color-text-primary)",
    opacity: 1
  };
  return <div className={className} style={{
    ...containerStyle,
    ...style
  }} {...rest}>
      {icon && <Icon icon={icon} size={iconSize} color={resolvedIconColor} />}
      <h2 style={headingStyle}>{children}</h2>
    </div>;
};

export const H1 = ({children, icon, iconSize = 32, iconColor, align = "left", gap = "var(--lp-spacing-3)", className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || "var(--lp-color-accent)";
  const containerStyle = {
    display: icon ? "flex" : "block",
    alignItems: "center",
    gap: icon ? gap : 0,
    justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
    textAlign: align
  };
  const headingStyle = {
    margin: "2rem 0 1rem 0",
    fontSize: "2.5rem",
    fontWeight: "bold",
    lineHeight: "1.2",
    color: "var(--lp-color-text-primary)",
    opacity: 1
  };
  return <div className={className} style={{
    ...containerStyle,
    ...style
  }} {...rest}>
      {icon && <Icon icon={icon} size={iconSize} color={resolvedIconColor} />}
      <h1 style={headingStyle}>{children}</h1>
    </div>;
};

export const PortalContentContainer = ({children, className = "", style = {}, ...rest}) => {
  return <div className={["frame-mode-container", className].filter(Boolean).join(" ")} style={style} {...rest}>
            <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "var(--lp-spacing-4)"
  }}>   
                {children}
            </div>
        </div>;
};

export const PortalCardsHeader = ({children, title, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    alignContent: "center",
    justifyContent: "center",
    ...style
  }} {...rest}>
        <H2 icon="signs-post" iconSize={32}>
            {title}
        </H2>

        <div style={{
    display: "flex",
    alignItems: "center",
    gap: "var(--lp-spacing-2)",
    marginBottom: "0.1rem"
  }}>
                <span style={{
    lineHeight: "1",
    color: "var(--text-primary)",
    opacity: 1,
    fontStyle: "italic",
    fontSize: "1.2rem"
  }}>
                    Choose Your Mission:
                </span>
                {children}
        </div>
    </div>;
};

export const HeroSectionContainer = ({children, minHeight = "fit-content", className = "", style = {}, ...rest}) => {
  return <div className={["frame-mode-hero-full", className].filter(Boolean).join(" ")} style={{
    minHeight: minHeight,
    marginBottom: "var(--lp-spacing-2)",
    ...style
  }} {...rest}>
      {children}
      {}
      {}
    </div>;
};

export const HeroContentContainer = ({children, className = "", style = {}, ...rest}) => {
  return <div className={["frame-mode-container", className].filter(Boolean).join(" ")} style={{
    position: "relative",
    zIndex: 1,
    height: "100%",
    marginBottom: 0,
    ...style
  }} {...rest}>
      <div style={{
    position: "relative",
    height: "100%"
  }}>{children}</div>
    </div>;
};

export const LogoHeroContainer = ({src = "/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg", alt = "Livepeer Logo", width = "100%", margin = "1rem auto 0 auto", imgHeight = "20px", imgWidth = "auto", objectFit = "contain", children, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    margin: margin,
    width: width,
    paddingBottom: children ? "3.5rem" : "0",
    ...style
  }} {...rest}>
      <div style={{
    position: "relative",
    display: "inline-block"
  }}>
        <img src={src} alt={alt} style={{
    height: imgHeight,
    width: imgWidth,
    objectFit: objectFit,
    display: "block"
  }} />
        {children && <div style={{
    position: "absolute",
    top: "100%",
    right: "0",
    fontSize: "2rem",
    color: "var(--lp-color-accent)",
    fontWeight: "500",
    lineHeight: "1",
    paddingTop: "var(--lp-spacing-2)"
  }}>
            {children}
          </div>}
      </div>
    </div>;
};

export const HeroImageBackgroundComponent = ({children, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    position: "absolute",
    inset: 0,
    overflow: "hidden",
    zIndex: 0,
    ...style
  }} {...rest}>
      {children}
      {}
    </div>;
};

export const PortalHeroContent = ({zIndex = true, title = "Portal Page", subtitle = "Build - Explore - Create", subtitleIcon = "/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg", description, refCardLink, overview, divider = true, callout = null, titleColor, subtitleColor, children, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    position: "relative",
    zIndex: 1,
    ...style
  }} {...rest}>
      <div style={{
    textAlign: "center",
    marginTop: "var(--lp-spacing-8)",
    marginBottom: "var(--lp-spacing-4)"
  }}>
        <H1 align="center">
          {title}
        </H1>
        {subtitle && <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "var(--lp-spacing-2)"
  }}>
            {subtitleIcon && <span style={{
    marginRight: "var(--lp-spacing-2)"
  }}>
                <Icon icon={subtitleIcon} size={20} />
              </span>}
            <h2 style={{
    fontSize: "1.5rem",
    fontWeight: "500",
    opacity: 1,
    color: subtitleColor || "var(--lp-color-accent)"
  }}>
              {subtitle} {}
              {subtitleIcon && <span style={{
    display: "inline-block",
    transform: "scaleX(-1)",
    marginLeft: "var(--lp-spacing-2)"
  }}>
                  <Icon icon={subtitleIcon} size={20} />
                </span>}
            </h2>
          </div>}
        {description && <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    gap: "1rem 0",
    width: "80%",
    margin: "0 auto",
    fontSize: "1.1rem",
    color: "var(--lp-color-text-secondary)",
    paddingTop: "3rem"
  }}>
            {description}
          </div>}
        {refCardLink && <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "fit-content",
    margin: "0 auto",
    marginTop: "var(--lp-spacing-4)"
  }}>
            {refCardLink}
          </div>}
         <div style={{
    width: "80%",
    margin: "0 auto",
    paddingBottom: "var(--lp-spacing-4)"
  }}>
          {callout && callout}
          {divider ? <CustomDivider /> : null}
          {}
        </div>
        {overview && <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    gap: "1rem 0",
    width: "80%",
    margin: "0 auto",
    fontSize: "1.1rem",
    color: "var(--lp-color-text-secondary)"
  }}>
            {overview}
          </div>}
        <div style={{
    width: "80%",
    margin: "0 auto",
    paddingTop: "var(--lp-spacing-6)",
    paddingBottom: "0.1rem"
  }}>
          {children ? <>{children}<CustomDivider /></> : <CustomDivider />}
        </div>
        </div>
      {}
    </div>;
};

{/* DATA INPORTS */}

<HeroSectionContainer>
  <HeroImageBackgroundComponent>
    <Starfield />
  </HeroImageBackgroundComponent>

  <HeroContentContainer>
    <LogoHeroContainer height="20px" />

    <PortalHeroContent
      title="Integrate Livepeer AI & Video"
      subtitle="Discover – Create – Run"
      refCardLink={
      <Card
        title="livepeer-tbd"
        href="https://github.com/livepeer/"
        icon="github"
        arrow
        horizontal
      />
    }
      overview={
    <>
    Using real-time AI video apps is easy with these ecosytem products and developer platforms.
    {/* "Stream Live Video, Run AI Pipelines, & Build Apps on Livepeer's Real-time AI Video Infrastructure. */}
    <br/>
    <br/>

    Run Agents, AI Video, Live-Stream and embed real-time interactive AI video experiences in your social platforms, apps and more..
      </>
  }
    >
      <YouTubeVideo embedUrl="https://www.youtube.com/embed/t9jhLn2fZcc?si=AM29wXYZwFJWw3UN" title="Discover Daydream" />
    </PortalHeroContent>
  </HeroContentContainer>
</HeroSectionContainer>

<PortalContentContainer>
  <PortalCardsHeader title="Solutions Portal">
    <BlinkingIcon icon="circle-play" size={20} />
  </PortalCardsHeader>

  <LazyLoad>
    <CardGroup cols={2}>
      <Card title={<CustomCardTitle icon="hat-wizard" title="Daydream" />} href="/v2/solutions/daydream/overview" arrow cta="Learn More About Daydream">
        <SolutionCard badges={<BadgeWrapper badges={daydreamBadges} />} logoSrc="/snippets/assets/logos/products/daydream-logo-dark.svg" logoAlt="Daydream Logo" subtitle="Open Toolkit For World Models & Real-time AI Video" infraTags={<IconBadgeWrapper items={daydreamInfra} iconColor="var(--accent)" size={12} />} blurb="Open-source engine for real-time AI video generation. Compose node-based workflows that combine generative video, audio, and computer vision - runs locally or in the cloud. Native integrations with OSC, MIDI, Syphon, Spout, and NDI connect it directly into professional creative toolchains (Ableton, TouchDesigner, OBS, Resolume). Powered by Livepeer's decentralised GPU compute network." ScrollBox={ScrollBox} socialLinks={<SocialLinks links={daydreamSocials} justify="center" className="lp-social-links-tight" />} />
      </Card>

      <Card title={<CustomCardTitle icon="tv" title="Livepeer Studio" />} href="/v2/solutions/livepeer-studio/overview" arrow cta="Learn More About Livepeer Studio">
        <SolutionCard badges={<BadgeWrapper badges={studioBadges} />} logoSrc="/snippets/assets/logos/products/livepeer-studio-logo.svg" logoAlt="Livepeer Studio Logo" subtitle="An Open Performant Video Streaming Stack" infraTags={<IconBadgeWrapper items={studioInfra} iconColor="var(--accent)" size={12} />} blurb="Managed gateway and API platform for Livepeer's decentralised video infrastructure. REST APIs and a dashboard cover live streaming ingest, video-on-demand transcoding, and delivery - with no infrastructure to operate. Usage-based pricing routes jobs to the open orchestrator network, giving applications cost and scale properties unavailable from centralised providers." ScrollBox={ScrollBox} socialLinks={<SocialLinks links={studioSocials} justify="center" className="lp-social-links-tight" />} />
      </Card>

      <Card title={<CustomCardTitle icon="video" title="Frameworks" />} href="/v2/solutions/frameworks/overview" arrow cta="Learn More About Frameworks">
        <SolutionCard badges={<BadgeWrapper badges={frameworksBadges} />} logoSrc="https://frameworks.network/frameworks-dark-horizontal-lockup-transparent.svg" logoAlt="Frameworks Logo" subtitle="Full-Stack Live Video Infrastructure" infraTags={<IconBadgeWrapper items={frameworksInfra} iconColor="var(--accent)" size={12} />} blurb="Full-stack video streaming platform built by the MistServer team, combining a self-hosted open-source core with optional hosted processing. Deploy the full stack on your own infrastructure, use Frameworks' hosted tier, or run a hybrid. No vendor lock-in: the infrastructure stack travels with you. Built on Livepeer's decentralised protocol and subsidised by the Livepeer treasury." ScrollBox={ScrollBox} socialLinks={<SocialLinks links={frameworksSocials} justify="center" className="lp-social-links-tight" />} />
      </Card>

      <Card title={<CustomCardTitle icon="cubes" title="Streamplace" />} href="/v2/solutions/streamplace/overview" arrow cta="Learn More About Streamplace">
        <SolutionCard badges={<BadgeWrapper badges={streamplaceBadges} />} logoSrc="/snippets/assets/logos/products/streamplace-logo.svg" logoAlt="Streamplace Logo" subtitle="Open Video Infrastucture For Social Networks" infraTags={<IconBadgeWrapper items={streamplaceInfra} iconColor="var(--accent)" size={12} />} blurb="Open-source video infrastructure layer for AT Protocol-native applications. Provides identity, distribution, monetisation, and content-authenticity primitives as composable building blocks for social networks, livestreaming platforms, and web3 applications. Preserves user sovereignty and content provenance at the protocol level." ScrollBox={ScrollBox} socialLinks={<SocialLinks links={streamplaceSocials} justify="center" className="lp-social-links-tight" />} />
      </Card>

      <Card title={<CustomCardTitle icon="person-rays" title="Embody" />} href="/v2/solutions/embody/overview" arrow cta="Learn More About Embody">
        <SolutionCard badges={<BadgeWrapper badges={embodyBadges} />} logoSrc="/snippets/assets/logos/products/embody-logo.png" logoAlt="Embody Logo" logoHeight="90px" subtitle="Enterprise-Grade AI Avatars for Real-Time Telepresence" infraTags={<IconBadgeWrapper items={embodyInfra} iconColor="var(--accent)" size={12} />} blurb="Enterprise AI avatar platform for real-time telepresence and on-demand branded content. Integrates into learning platforms, communication tools, and content pipelines to deliver embodied AI presence at scale - covering tutoring, enterprise telepresence, and branded video without live camera requirements." ScrollBox={ScrollBox} socialLinks={<SocialLinks links={embodySocials} justify="center" className="lp-social-links-tight" />} />
      </Card>

      <Card title="More Ecosystem Products" img="https://mintlify.s3.us-west-1.amazonaws.com/na-36/snippets/assets/logos/products/solutionProviders.png" icon="webhook" href="/v2/solutions/solution-providers" arrow cta="Go to All Platforms">
        See all platforms available to builders in the Livepeer Ecosystem
      </Card>
    </CardGroup>
  </LazyLoad>

  <br />
</PortalContentContainer>