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

# AI•Pkg

> The universal package registry for AI platform plugins — one package, every AI platform, verified by default.

export const AIpkgFork = () => {
  return <>
      <style>{`
        .aipkg-fork-cta-pub, .aipkg-fork-cta-plat {
          transition: all 0.25s ease !important;
        }
        .aipkg-fork-cta-pub:hover {
          box-shadow: 0 6px 40px rgba(120,64,174,0.35) !important;
          transform: translateY(-2px) !important;
        }
        .aipkg-fork-cta-plat:hover {
          box-shadow: 0 6px 40px rgba(14,128,119,0.35) !important;
          transform: translateY(-2px) !important;
        }
      `}</style>

      <section style={{
    height: '100vh',
    background: '#06060A',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '60px 32px'
  }}>
        {}
        <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    width: '50%',
    background: 'radial-gradient(ellipse at 70% 50%, rgba(120,64,174,0.06) 0%, transparent 65%)',
    pointerEvents: 'none'
  }} />
        <div style={{
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    width: '50%',
    background: 'radial-gradient(ellipse at 30% 50%, rgba(14,128,119,0.06) 0%, transparent 65%)',
    pointerEvents: 'none'
  }} />

        {}
        <div className="fork-divider" style={{
    position: 'absolute',
    top: '10%',
    bottom: '10%',
    left: '50%',
    width: 1,
    background: 'linear-gradient(to bottom, transparent, rgba(238,237,245,0.1), transparent)',
    transform: 'translateX(-50%)',
    pointerEvents: 'none'
  }} />

        {}
        <div className="fork-logo" style={{
    position: 'absolute',
    top: 'calc(50% - 50px)',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 10
  }}>
          <div style={{
    width: 104,
    height: 104,
    borderRadius: '50%',
    background: '#06060A',
    border: '1px solid rgba(238,237,245,0.1)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
            <img src="/images/aipkg.icon.svg" alt="" style={{
    width: 80,
    height: 80
  }} />
          </div>
        </div>

        {}
        <div style={{
    position: 'relative',
    zIndex: 1,
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 80,
    maxWidth: 1000,
    width: '100%',
    alignItems: 'center'
  }}>
          {}
          <div className="fork-left" style={{
    textAlign: 'right',
    padding: '48px 40px'
  }}>
            <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.18em',
    color: '#7840AE',
    marginBottom: 20
  }}>For Publishers</div>
            <h3 style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.2rem, 2.8vw, 2rem)',
    fontWeight: 800,
    color: '#EEEDF5',
    letterSpacing: '-0.025em',
    lineHeight: 1.2,
    margin: '0 0 12px',
    border: 'none'
  }}>You build plugins.</h3>
            <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '0.9rem',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.4)',
    lineHeight: 1.6,
    marginBottom: 32
  }}>Publish once. Reach every platform.</div>
            <a href="/for-publishers" className="aipkg-fork-cta-pub" style={{
    display: 'inline-flex',
    alignItems: 'center',
    padding: '13px 28px',
    background: 'linear-gradient(135deg, #7840AE, #C279F0)',
    color: '#fff',
    fontFamily: "'Poppins', sans-serif",
    fontWeight: 700,
    fontSize: '0.88rem',
    borderRadius: 10,
    textDecoration: 'none',
    border: 'none',
    cursor: 'pointer',
    boxShadow: '0 4px 24px rgba(120,64,174,0.25)'
  }}>Start publishing →</a>
          </div>

          {}
          <div className="fork-right" style={{
    textAlign: 'left',
    padding: '48px 40px'
  }}>
            <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.18em',
    color: '#0E8077',
    marginBottom: 20
  }}>For Platforms</div>
            <h3 style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.2rem, 2.8vw, 2rem)',
    fontWeight: 800,
    color: '#EEEDF5',
    letterSpacing: '-0.025em',
    lineHeight: 1.2,
    margin: '0 0 12px',
    border: 'none'
  }}>You build platforms.</h3>
            <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '0.9rem',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.4)',
    lineHeight: 1.6,
    marginBottom: 32
  }}>Give your users the entire ecosystem.</div>
            <a href="/for-platforms" className="aipkg-fork-cta-plat" style={{
    display: 'inline-flex',
    alignItems: 'center',
    padding: '13px 28px',
    background: 'linear-gradient(135deg, #0E8077, #1A9A90)',
    color: '#fff',
    fontFamily: "'Poppins', sans-serif",
    fontWeight: 700,
    fontSize: '0.88rem',
    borderRadius: 10,
    textDecoration: 'none',
    border: 'none',
    cursor: 'pointer',
    boxShadow: '0 4px 24px rgba(14,128,119,0.25)'
  }}>Integrate the SDK →</a>
          </div>
        </div>

        {}
        <div className="fork-bottom" style={{
    position: 'relative',
    zIndex: 1,
    marginTop: 80,
    textAlign: 'center'
  }}>
          <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '1.64rem',
    fontWeight: 500,
    color: 'rgba(238,237,245,0.2)',
    letterSpacing: '0.01em'
  }}>
            AI{'\u2022'}Pkg is open source. The registry is for everyone.
          </div>
        </div>
      </section>
    </>;
};

export const AIpkgFireFlower = () => {
  return <section style={{
    height: '100vh',
    background: '#06060A',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0 32px'
  }}>
      {}
      <div style={{
    position: 'absolute',
    top: '45%',
    left: '50%',
    width: 1000,
    height: 1000,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(120,64,174,0.07) 0%, rgba(194,121,240,0.03) 40%, transparent 60%)',
    transform: 'translate(-50%, -50%)',
    pointerEvents: 'none'
  }} />

      <div className="ff-content" style={{
    position: 'relative',
    zIndex: 1,
    textAlign: 'center'
  }}>
        <h2 style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(2rem, 4.5vw, 3.6rem)',
    fontWeight: 800,
    letterSpacing: '-0.04em',
    lineHeight: 1.2,
    margin: 0,
    padding: 0,
    border: 'none'
  }}>
          <span className="ff-line ff-line-1" style={{
    display: 'block',
    color: '#EEEDF5'
  }}>
            Publish once.
          </span>
          <span className="ff-line ff-line-2" style={{
    display: 'block',
    color: '#EEEDF5'
  }}>
            Millions of users.
          </span>
          <span className="ff-line ff-line-3" style={{
    display: 'block',
    background: 'linear-gradient(135deg, #C279F0 0%, #9A66E2 50%, #7840AE 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text'
  }}>
            Zero extra effort.
          </span>
        </h2>
      </div>
    </section>;
};

export const AIpkgLifecycle = () => {
  const phases = [{
    phase: '01',
    title: 'Stopped at the gate',
    description: 'The multi-layer pipeline catches vulnerabilities, malicious binaries, and prompt injection before a package ever reaches the registry. Bad packages are rejected — not quarantined, not flagged. Rejected.',
    color: '#B32C38',
    icon: '\u26D4'
  }, {
    phase: '02',
    title: 'Threats found later get handled',
    description: 'When new vulnerabilities surface post-publication, affected packages are flagged, publishers are notified, and packages are de-listed. The supply chain heals itself.',
    color: '#B98112',
    icon: '\u26A0'
  }, {
    phase: '03',
    title: 'Platforms keep users safe',
    description: 'AI platforms check installed packages against the live vulnerability feed. Users are warned automatically — no manual checking, no stale installs sitting in the dark.',
    color: '#0E8077',
    icon: '\u2713'
  }];
  return <section style={{
    height: '100vh',
    background: '#06060A',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0 48px'
  }}>
      {}
      <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    width: 1000,
    height: 1000,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(185,129,18,0.04) 0%, rgba(179,44,56,0.02) 40%, transparent 60%)',
    transform: 'translate(-50%, -50%)',
    pointerEvents: 'none'
  }} />

      <div className="lifecycle-content" style={{
    position: 'relative',
    zIndex: 1,
    maxWidth: 1100,
    margin: '0 auto',
    width: '100%',
    textAlign: 'center'
  }}>
        {}
        <div className="lifecycle-eyebrow" style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.18em',
    color: 'rgba(238,237,245,0.25)',
    marginBottom: 20
  }}>Full lifecycle security</div>

        {}
        <h2 className="lifecycle-headline" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
    fontWeight: 800,
    letterSpacing: '-0.035em',
    lineHeight: 1.15,
    color: '#EEEDF5',
    margin: '0 0 16px',
    border: 'none'
  }}>Protection at every stage.</h2>

        <div className="lifecycle-subline" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(0.9rem, 1.4vw, 1.05rem)',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.35)',
    lineHeight: 1.7,
    marginBottom: 56,
    maxWidth: 560,
    marginLeft: 'auto',
    marginRight: 'auto'
  }}>
          The pipeline is just the beginning. Security extends from the moment
          a package is submitted through every day it remains installed.
        </div>

        {}
        <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 24
  }}>
          {phases.map((phase, i) => <div key={i} className={`lifecycle-card lifecycle-card-${i}`} style={{
    textAlign: 'left',
    padding: '32px 28px',
    background: 'rgba(238,237,245,0.02)',
    border: '1px solid rgba(238,237,245,0.06)',
    borderRadius: 16,
    display: 'flex',
    flexDirection: 'column'
  }}>
              {}
              <div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20
  }}>
                <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.62rem',
    fontWeight: 500,
    letterSpacing: '0.08em',
    color: phase.color,
    background: `${phase.color}12`,
    border: `1px solid ${phase.color}30`,
    borderRadius: 6,
    padding: '4px 10px'
  }}>{phase.phase}</div>
                <div style={{
    width: 36,
    height: 36,
    borderRadius: 10,
    background: `${phase.color}10`,
    border: `1px solid ${phase.color}25`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '1rem',
    color: phase.color
  }}>{phase.icon}</div>
              </div>

              {}
              <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '1.15rem',
    fontWeight: 700,
    color: '#EEEDF5',
    letterSpacing: '-0.02em',
    lineHeight: 1.25,
    marginBottom: 12
  }}>{phase.title}</div>

              {}
              <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '0.85rem',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.35)',
    lineHeight: 1.65,
    flex: 1
  }}>{phase.description}</div>

              {}
              <div style={{
    marginTop: 24,
    height: 2,
    borderRadius: 1,
    background: `linear-gradient(90deg, ${phase.color}50, transparent)`
  }} />
            </div>)}
        </div>
      </div>
    </section>;
};

export const AIpkgTrust = () => {
  const stages = [{
    icon: '\u2191',
    label: 'Upload',
    detail: 'Package pushed to registry',
    color: '#7840AE'
  }, {
    icon: '\u2298',
    label: 'Static Analysis',
    detail: 'Archive integrity, path traversal, ZIP bomb detection',
    color: '#3061A6'
  }, {
    icon: '\u25C9',
    label: 'Vulnerability Scan',
    detail: 'Known CVEs, malicious binary detection, AV engine',
    color: '#B98112'
  }, {
    icon: '\u2B26',
    label: 'Prompt Injection Detection',
    detail: 'AI-powered analysis of skill and prompt content',
    color: '#B32C38'
  }, {
    icon: '\u2726',
    label: 'Code Signing',
    detail: 'Cryptographic signature verification and timestamping',
    color: '#0E8077'
  }, {
    icon: '\u2713',
    label: 'Published',
    detail: 'Content-addressed, signed, available to all platforms',
    color: '#C279F0'
  }];
  return <section style={{
    height: '100vh',
    background: '#040407',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0 48px'
  }}>
      {}
      <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(179,44,56,0.15), transparent)'
  }} />

      <div className="trust-content" style={{
    position: 'relative',
    zIndex: 1,
    maxWidth: 1200,
    margin: '0 auto',
    width: '100%',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 80,
    alignItems: 'center'
  }}>
        {}
        <div className="trust-left" style={{
    paddingRight: 20
  }}>
          {}
          <div className="trust-eyebrow" style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    marginBottom: 28
  }}>
            <div style={{
    width: 7,
    height: 7,
    borderRadius: '50%',
    background: '#B32C38',
    boxShadow: '0 0 10px rgba(179,44,56,0.5)'
  }} />
            <span style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.16em',
    color: '#B32C38'
  }}>Supply Chain Security</span>
          </div>

          <h2 className="trust-headline" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
    fontWeight: 800,
    letterSpacing: '-0.035em',
    lineHeight: 1.1,
    color: '#EEEDF5',
    margin: '0 0 20px',
    border: 'none'
  }}>No package reaches users unchecked.</h2>

          <div className="trust-subline" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(0.9rem, 1.4vw, 1.05rem)',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.35)',
    lineHeight: 1.7,
    marginBottom: 40,
    maxWidth: 480
  }}>
            AI packages control model behavior directly. A malicious prompt is as dangerous
            as a malicious binary. Every package passes a multi-layer security pipeline
            <em style={{
    color: 'rgba(238,237,245,0.5)'
  }}> before</em> publication.
          </div>

          {}
          <div className="trust-callout" style={{
    padding: '20px 24px',
    background: 'rgba(14,128,119,0.06)',
    border: '1px solid rgba(14,128,119,0.15)',
    borderRadius: 14
  }}>
            <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(0.95rem, 1.6vw, 1.15rem)',
    fontWeight: 700,
    color: '#0E8077',
    letterSpacing: '-0.015em',
    lineHeight: 1.4
  }}>Every package verified before it reaches any platform.</div>
          </div>
        </div>

        {}
        <div className="trust-right">
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 0
  }}>
            {stages.map((stage, i) => {
    const isLast = i === stages.length - 1;
    return <div key={i} style={{
      display: 'contents'
    }}>
                  <div className={`trust-stage trust-stage-${i}`} style={{
      display: 'flex',
      alignItems: 'center',
      gap: 16,
      padding: '14px 0'
    }}>
                    <div style={{
      width: 44,
      height: 44,
      borderRadius: 12,
      background: `${stage.color}10`,
      border: `1px solid ${stage.color}30`,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      fontSize: '1.1rem',
      color: stage.color
    }}>{stage.icon}</div>
                    <div style={{
      flex: 1
    }}>
                      <div style={{
      fontFamily: "'Poppins', sans-serif",
      fontSize: '0.95rem',
      fontWeight: 700,
      color: '#EEEDF5',
      marginBottom: 2
    }}>{stage.label}</div>
                      <div style={{
      fontFamily: "'Poppins', sans-serif",
      fontSize: '0.78rem',
      fontWeight: 400,
      color: 'rgba(238,237,245,0.3)',
      lineHeight: 1.4
    }}>{stage.detail}</div>
                    </div>
                    <div className={`trust-badge trust-badge-${i}`} style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: '0.65rem',
      fontWeight: 500,
      color: stage.color,
      letterSpacing: '0.05em'
    }}>{isLast ? 'VERIFIED' : 'PASS'}</div>
                  </div>
                  {!isLast && <div className={`trust-connector trust-conn-${i}`} style={{
      marginLeft: 21,
      width: 2,
      height: 16,
      background: `linear-gradient(to bottom, ${stage.color}40, ${stages[i + 1].color}40)`,
      borderRadius: 1
    }} />}
                </div>;
  })}
          </div>
        </div>
      </div>
    </section>;
};

export const AIpkgCompression = () => {
  const ecosystems = [{
    problem: '.NET had DLL hell.',
    solver: 'NuGet',
    solverColor: '#3061A6',
    stat: '502,000+',
    statLabel: 'packages',
    year: '2010'
  }, {
    problem: 'JavaScript had no module system.',
    solver: 'npm',
    solverColor: '#B32C38',
    stat: '3,900,000+',
    statLabel: 'packages',
    year: '2010'
  }, {
    problem: 'AI tooling has config fragmentation.',
    solver: 'AI\u2022Pkg',
    solverColor: '#7840AE',
    stat: '\u221E',
    statLabel: 'potential',
    year: '2026'
  }];
  return <section style={{
    height: '100vh',
    background: '#06060A',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0 32px'
  }}>
      {}
      <div style={{
    position: 'absolute',
    top: '30%',
    left: '50%',
    width: 800,
    height: 800,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(120,64,174,0.05) 0%, transparent 55%)',
    transform: 'translate(-50%, -50%)',
    pointerEvents: 'none'
  }} />

      <div className="comp-content" style={{
    position: 'relative',
    zIndex: 1,
    maxWidth: 900,
    margin: '0 auto',
    textAlign: 'center'
  }}>
        {}
        <div className="comp-icon" style={{
    marginBottom: 48
  }}>
          <div style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 14,
    padding: '14px 28px',
    background: 'rgba(120,64,174,0.08)',
    border: '1px solid rgba(120,64,174,0.2)',
    borderRadius: 12,
    boxShadow: '0 0 60px rgba(120,64,174,0.1)'
  }}>
            <img src="/images/aipkg.boxonly.svg" alt="" style={{
    width: 24,
    height: 'auto'
  }} />
            <span style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.9rem',
    fontWeight: 500,
    color: '#C279F0',
    letterSpacing: '0.02em'
  }}>.aipkg</span>
          </div>
        </div>

        <div className="comp-eyebrow" style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.18em',
    color: 'rgba(238,237,245,0.25)',
    marginBottom: 20
  }}>A proven recipe</div>

        <h2 className="comp-headline" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.8rem, 4.5vw, 3.2rem)',
    fontWeight: 800,
    letterSpacing: '-0.035em',
    lineHeight: 1.1,
    color: '#EEEDF5',
    margin: '0 0 60px',
    border: 'none'
  }}>This pattern has worked twice.</h2>

        {}
        <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 20,
    marginBottom: 64
  }}>
          {ecosystems.map((eco, i) => <div key={i} className={`comp-card comp-card-${i}`} style={{
    textAlign: 'left',
    padding: '28px 24px',
    background: 'rgba(238,237,245,0.02)',
    border: '1px solid rgba(238,237,245,0.06)',
    borderRadius: 14,
    display: 'flex',
    flexDirection: 'column'
  }}>
              <div style={{
    display: 'inline-block',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.9rem',
    fontWeight: 500,
    letterSpacing: '0.08em',
    color: eco.solverColor,
    background: `${eco.solverColor}12`,
    border: `1px solid ${eco.solverColor}30`,
    borderRadius: 6,
    padding: '3px 10px',
    marginBottom: 18,
    alignSelf: 'flex-start'
  }}>{eco.year}</div>
              <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '0.88rem',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.45)',
    lineHeight: 1.55,
    marginBottom: 20,
    flex: 1
  }}>{eco.problem}</div>
              <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: '1.3rem',
    fontWeight: 800,
    color: eco.solverColor,
    letterSpacing: '-0.02em',
    marginBottom: 6
  }}>{eco.solver}</div>
              <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '1.5rem',
    fontWeight: 500,
    color: 'rgba(238,237,245,0.8)',
    letterSpacing: '-0.02em',
    lineHeight: 1,
    marginBottom: 4
  }}>{eco.stat}</div>
              <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.12em',
    color: 'rgba(238,237,245,0.2)'
  }}>{eco.statLabel}</div>
            </div>)}
        </div>

        <div className="comp-punch" style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.2rem, 3vw, 1.8rem)',
    fontWeight: 700,
    letterSpacing: '-0.025em',
    color: 'rgba(238,237,245,0.55)',
    lineHeight: 1.3
  }}>
          Same recipe. <span style={{
    color: '#C279F0'
  }}>Third time.</span>
        </div>
      </div>
    </section>;
};

export const AIpkgFragmentation = () => {
  const cards = [{
    file: '.claude/settings.json',
    color: '#0E8077'
  }, {
    file: '.mcp.json',
    color: '#7840AE'
  }, {
    file: '.cursor/mcp.json',
    color: '#3061A6'
  }, {
    file: '.github/copilot/mcp.json',
    color: '#B98112'
  }, {
    file: '.windsurf/mcp_config.json',
    color: '#0E8077'
  }, {
    file: '.continue/config.json',
    color: '#B32C38'
  }, {
    file: 'settings.json',
    color: '#3061A6'
  }, {
    file: '.cline/mcp_settings.json',
    color: '#B98112'
  }, {
    file: 'opencode.yaml',
    color: '#0E8077'
  }, {
    file: '.aider/config.yml',
    color: '#B32C38'
  }, {
    file: '.bolt/mcp.json',
    color: '#7840AE'
  }, {
    file: '.codex/config.yaml',
    color: '#B98112'
  }, {
    file: '.devin/config.yaml',
    color: '#3061A6'
  }, {
    file: '.replit/agents.json',
    color: '#0E8077'
  }, {
    file: '.sourcegraph/cody.json',
    color: '#B32C38'
  }, {
    file: '.tabnine/config.json',
    color: '#B98112'
  }, {
    file: '.codeium/config.json',
    color: '#7840AE'
  }, {
    file: '.aide/config.json',
    color: '#0E8077'
  }, {
    file: '.pear/mcp.json',
    color: '#3061A6'
  }, {
    file: '.roo/mcp_settings.json',
    color: '#B32C38'
  }, {
    file: '.mentat/config.json',
    color: '#3061A6'
  }, {
    file: '.sweep/config.yaml',
    color: '#B98112'
  }, {
    file: 'mcp-config.json',
    color: '#7840AE'
  }, {
    file: '.v0/settings.json',
    color: '#0E8077'
  }, {
    file: '.qodo/config.json',
    color: '#B32C38'
  }, {
    file: '.copilot-cli/mcp-config.json',
    color: '#B98112'
  }, {
    file: '.zed/settings.json',
    color: '#3061A6'
  }, {
    file: '.amp/config.json',
    color: '#7840AE'
  }];
  return <section style={{
    height: '100vh',
    background: '#06060A',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
      {}
      <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    width: 1000,
    height: 1000,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(179,44,56,0.06) 0%, rgba(185,129,18,0.03) 35%, transparent 60%)',
    transform: 'translate(-50%, -50%)',
    pointerEvents: 'none'
  }} />

      {}
      <div className="frag-field" style={{
    position: 'relative',
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
        {}
        <div style={{
    position: 'relative',
    width: 0,
    height: 0
  }}>
          {cards.map((card, i) => <div key={i} className="frag-card" style={{
    position: 'absolute',
    left: -75,
    top: -18,
    zIndex: 10
  }}>
              <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    padding: '8px 14px',
    background: 'rgba(6,6,10,0.85)',
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
    border: '1px solid rgba(255,255,255,0.06)',
    borderRadius: 8,
    whiteSpace: 'nowrap',
    boxShadow: '0 2px 16px rgba(0,0,0,0.4)'
  }}>
                <div style={{
    width: 6,
    height: 6,
    borderRadius: '50%',
    background: card.color,
    flexShrink: 0,
    boxShadow: `0 0 8px ${card.color}44`
  }} />
                <span style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.68rem',
    color: 'rgba(238,237,245,0.5)',
    letterSpacing: '0.01em'
  }}>{card.file}</span>
              </div>
            </div>)}
        </div>

        {}
        <div className="frag-center" style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    textAlign: 'center',
    zIndex: 20,
    pointerEvents: 'none'
  }}>
          {}
          <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 420,
    height: 280,
    borderRadius: '50%',
    background: 'radial-gradient(ellipse, rgba(6,6,10,0.85) 0%, rgba(6,6,10,0.6) 40%, transparent 70%)',
    pointerEvents: 'none',
    zIndex: -1
  }} />
          <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(4rem, 10vw, 8rem)',
    fontWeight: 900,
    letterSpacing: '-0.04em',
    lineHeight: 1,
    color: 'rgba(238,237,245,0.35)',
    marginBottom: 16
  }}>47+</div>
          <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(0.85rem, 1.8vw, 1.1rem)',
    fontWeight: 500,
    color: 'rgba(238,237,245,0.5)',
    lineHeight: 1.5,
    maxWidth: 360
  }}>
            AI platforms launched since 2023.<br />
            <span style={{
    color: 'rgba(238,237,245,0.7)'
  }}>
              Every one invented its own config format.
            </span>
          </div>
        </div>

        {}
        <div className="frag-light" style={{
    position: 'absolute',
    top: 'calc(50% - 80px)',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 40,
    height: 40,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(194,121,240,0.9) 0%, rgba(120,64,174,0.6) 40%, transparent 70%)',
    boxShadow: '0 0 60px rgba(194,121,240,0.5), 0 0 120px rgba(120,64,174,0.3)',
    zIndex: 30,
    pointerEvents: 'none'
  }} />

        {}
        <div className="frag-box" style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 25,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 0
  }}>
          <img src="/images/aipkg.boxonly.svg" alt="" style={{
    width: 180,
    height: 'auto',
    filter: 'drop-shadow(0 0 60px rgba(120,64,174,0.4)) drop-shadow(0 0 120px rgba(194,121,240,0.15))'
  }} />
          <div className="frag-box-label" style={{
    textAlign: 'center',
    marginTop: 28
  }}>
            <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 'clamp(1rem, 2.2vw, 1.3rem)',
    fontWeight: 500,
    color: '#C279F0',
    letterSpacing: '0.02em',
    marginBottom: 16
  }}>your-plugin.1.2.0.aipkg</div>
            <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(1.2rem, 3vw, 1.8rem)',
    fontWeight: 800,
    letterSpacing: '-0.03em',
    color: '#EEEDF5',
    lineHeight: 1.2,
    marginBottom: 10
  }}>One package. All platforms.</div>
            <div style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(0.9rem, 1.8vw, 1.1rem)',
    fontWeight: 400,
    color: 'rgba(238,237,245,0.35)',
    lineHeight: 1.5
  }}>28 config files become one universal archive.</div>
          </div>
        </div>
      </div>
    </section>;
};

export const AIpkgStatement = () => {
  return <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
        @keyframes aipkg-orb-drift {
          0%, 100% { transform: translate(-50%, -50%) scale(1); }
          50% { transform: translate(-50%, -50%) scale(1.05); }
        }
        @keyframes aipkg-orb2-drift {
          0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
          33% { transform: translate(-48%, -52%) scale(1.03) rotate(2deg); }
          66% { transform: translate(-52%, -48%) scale(0.97) rotate(-2deg); }
        }
        @keyframes stmt-fade-up {
          from { opacity: 0; transform: translateY(40px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes stmt-fade-in {
          from { opacity: 0; transform: scale(0.8); }
          to   { opacity: 0.9; transform: scale(1); }
        }
        .stmt-logo  { animation: stmt-fade-in 0.8s 0.15s ease-out both; }
        .stmt-line-1 { animation: stmt-fade-up 0.7s 0.35s ease-out both; }
        .stmt-line-2 { animation: stmt-fade-up 0.7s 0.55s ease-out both; }
        .stmt-line-3 { animation: stmt-fade-up 0.7s 0.75s ease-out both; }
      `}</style>

      <section style={{
    height: '100vh',
    background: '#06060A',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    overflow: 'hidden',
    padding: '0 32px'
  }}>
        {}
        <div style={{
    position: 'absolute',
    top: '42%',
    left: '50%',
    width: 1100,
    height: 1100,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(120,64,174,0.09) 0%, rgba(14,128,119,0.035) 35%, transparent 60%)',
    animation: 'aipkg-orb-drift 10s ease-in-out infinite',
    pointerEvents: 'none'
  }} />
        <div style={{
    position: 'absolute',
    top: '55%',
    left: '62%',
    width: 700,
    height: 700,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(185,129,18,0.04) 0%, rgba(179,44,56,0.02) 40%, transparent 65%)',
    animation: 'aipkg-orb2-drift 14s ease-in-out infinite',
    pointerEvents: 'none'
  }} />

        {}
        <div style={{
    position: 'absolute',
    inset: 0,
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")`,
    pointerEvents: 'none',
    opacity: 0.5
  }} />

        {}
        <div className="stmt-content" style={{
    position: 'relative',
    zIndex: 1,
    textAlign: 'center',
    maxWidth: 1200
  }}>
          {}
          <div className="stmt-logo" style={{
    marginBottom: 48,
    display: 'flex',
    justifyContent: 'center'
  }}>
            <img src="/images/aipkg.logo.full.svg" alt="AI Pkg" style={{
    width: 200,
    height: 200
  }} />
          </div>

          {}
          <h1 style={{
    fontFamily: "'Poppins', sans-serif",
    fontSize: 'clamp(2.2rem, 5vw, 4rem)',
    fontWeight: 800,
    letterSpacing: '-0.04em',
    lineHeight: 1.15,
    margin: 0,
    padding: 0,
    border: 'none'
  }}>
            <span className="stmt-line stmt-line-1" style={{
    display: 'block',
    color: '#EEEDF5'
  }}>
              One Package.
            </span>
            <span className="stmt-line stmt-line-2" style={{
    display: 'block',
    color: '#EEEDF5'
  }}>
              Every AI Platform.
            </span>
            <span className="stmt-line stmt-line-3" style={{
    display: 'block',
    background: 'linear-gradient(135deg, #C279F0 0%, #9A66E2 40%, #7840AE 70%, #8A57C6 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text'
  }}>
              Verified by Default.
            </span>
          </h1>
        </div>

        {}
        <div className="stmt-scroll" style={{
    position: 'absolute',
    bottom: 36,
    left: '50%',
    transform: 'translateX(-50%)',
    pointerEvents: 'none'
  }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M5 8l6 6 6-6" stroke="rgba(238,237,245,0.25)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </section>
    </>;
};

<div className="custom-mode">
  <AIpkgStatement />

  <AIpkgFragmentation />

  <AIpkgCompression />

  <AIpkgTrust />

  <AIpkgLifecycle />

  <AIpkgFireFlower />

  <AIpkgFork />
</div>