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

# Upsun Dispatch

> Docs, guides, and references for Upsun Dispatch, governed AI-agent workflows to plan, code, review, and optimize your software. Connect a repo, leave a comment, and Upsun Dispatch takes it from there.

export const HeroMockAnimation = () => {
  const commands = ['implement this', 'review', 'full review'];
  const [lineIndex, setLineIndex] = useState(0);
  const [charIndex, setCharIndex] = useState(0);
  const [showArrow, setShowArrow] = useState(false);
  const [showBubble, setShowBubble] = useState(false);
  useEffect(() => {
    if (lineIndex >= commands.length) return;
    if (charIndex < commands[lineIndex].length) {
      const typeTimer = setTimeout(() => setCharIndex(charIndex + 1), 45);
      return () => clearTimeout(typeTimer);
    }
    const nextLineTimer = setTimeout(() => {
      setLineIndex(lineIndex + 1);
      setCharIndex(0);
    }, 400);
    return () => clearTimeout(nextLineTimer);
  }, [lineIndex, charIndex]);
  useEffect(() => {
    if (lineIndex < commands.length) return;
    const arrowTimer = setTimeout(() => setShowArrow(true), 300);
    return () => clearTimeout(arrowTimer);
  }, [lineIndex]);
  useEffect(() => {
    if (!showArrow) return;
    const bubbleTimer = setTimeout(() => setShowBubble(true), 400);
    return () => clearTimeout(bubbleTimer);
  }, [showArrow]);
  useEffect(() => {
    if (!showBubble) return;
    const resetTimer = setTimeout(() => {
      setShowBubble(false);
      setShowArrow(false);
      setLineIndex(0);
      setCharIndex(0);
    }, 1400);
    return () => clearTimeout(resetTimer);
  }, [showBubble]);
  return <div className="p-8 flex items-center justify-center min-h-[220px]">
      <div className="flex flex-col items-start gap-4" style={{
    minWidth: '19rem',
    fontFamily: "'Space Grotesk', monospace"
  }}>
        <div className="space-y-1">
          {commands.slice(0, lineIndex).map(cmd => <div key={cmd} className="text-base"><span className="text-accent-light">@upsun-dispatch</span> <span className="text-on-dark">{cmd}</span></div>)}
          {lineIndex < commands.length && <div className="text-base">
              <span className="text-accent-light">@upsun-dispatch</span> <span className="text-on-dark">{commands[lineIndex].slice(0, charIndex)}<span className="animate-pulse">|</span></span>
            </div>}
        </div>
        {(showArrow || showBubble) && <div className="flex flex-col items-center gap-4" style={{
    marginLeft: '12.5ch',
    width: '1px'
  }}>
            {showArrow && <svg className="w-5 h-5 text-on-dark-muted shrink-0" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14m0 0 6-6m-6 6-6-6" /></svg>}
            {showBubble && <div className="inline-flex items-center gap-2 rounded-full px-4 py-2 shrink-0" style={{
    backgroundColor: '#D5F800',
    color: '#0C0F10'
  }}>
                <span className="font-bold">✓</span>
                <span className="text-sm font-medium">Shipped</span>
              </div>}
          </div>}
      </div>
    </div>;
};

export const WorkflowBuilderAnimation = () => {
  const layouts = [[{
    type: 'dispatch',
    col: 1,
    row: 2
  }, {
    type: 'cloud',
    col: 2,
    row: 2
  }, {
    type: 'custom',
    col: 1,
    row: 1
  }, {
    type: 'dispatch',
    col: 3,
    row: 2
  }, {
    type: 'cloud',
    col: 2,
    row: 1
  }, {
    type: 'custom',
    col: 4,
    row: 2
  }, {
    type: 'dispatch',
    col: 3,
    row: 1
  }, {
    type: 'cloud',
    col: 4,
    row: 1
  }], [{
    type: 'cloud',
    col: 1,
    row: 1
  }, {
    type: 'cloud',
    col: 1,
    row: 2
  }, {
    type: 'dispatch',
    col: 2,
    row: 1
  }, {
    type: 'custom',
    col: 2,
    row: 2
  }, {
    type: 'dispatch',
    col: 3,
    row: 1
  }, {
    type: 'custom',
    col: 3,
    row: 2
  }, {
    type: 'dispatch',
    col: 4,
    row: 1
  }, {
    type: 'cloud',
    col: 4,
    row: 2
  }], [{
    type: 'dispatch',
    col: 2,
    row: 1
  }, {
    type: 'dispatch',
    col: 3,
    row: 1
  }, {
    type: 'custom',
    col: 1,
    row: 1
  }, {
    type: 'cloud',
    col: 4,
    row: 1
  }, {
    type: 'cloud',
    col: 1,
    row: 2
  }, {
    type: 'dispatch',
    col: 2,
    row: 2
  }, {
    type: 'custom',
    col: 3,
    row: 2
  }, {
    type: 'cloud',
    col: 4,
    row: 2
  }]];
  const sizes = {
    dispatch: 34,
    cloud: 22,
    custom: 18
  };
  const colors = {
    dispatch: '#E81CEC',
    cloud: '#6046FF',
    custom: '#FFFFFF'
  };
  const cell = 44;
  const gap = 10;
  const width = 4 * cell + 3 * gap;
  const height = 2 * cell + gap;
  const centerOf = (col, row) => ({
    x: (col - 1) * (cell + gap) + cell / 2,
    y: (row - 1) * (cell + gap) + cell / 2
  });
  const [layoutIndex, setLayoutIndex] = useState(0);
  const [revealed, setRevealed] = useState(0);
  const [visible, setVisible] = useState(true);
  const blocks = layouts[layoutIndex];
  useEffect(() => {
    if (revealed >= blocks.length) return;
    const typeTimer = setTimeout(() => setRevealed(revealed + 1), 320);
    return () => clearTimeout(typeTimer);
  }, [revealed, layoutIndex]);
  useEffect(() => {
    if (revealed < blocks.length) return;
    const holdTimer = setTimeout(() => setVisible(false), 1900);
    return () => clearTimeout(holdTimer);
  }, [revealed, blocks.length]);
  useEffect(() => {
    if (visible) return;
    const resetTimer = setTimeout(() => {
      setRevealed(0);
      setLayoutIndex(i => (i + 1) % layouts.length);
      setVisible(true);
    }, 700);
    return () => clearTimeout(resetTimer);
  }, [visible]);
  return <div className="flex items-center justify-center">
      <div className="relative transition-opacity duration-700" style={{
    width,
    height,
    opacity: visible ? 1 : 0
  }}>
        <svg className="absolute inset-0" width={width} height={height}>
          {blocks.slice(1).map((b, idx) => {
    const i = idx + 1;
    const from = centerOf(blocks[i - 1].col, blocks[i - 1].row);
    const to = centerOf(b.col, b.row);
    return <line key={i} x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke="rgba(255,255,255,0.3)" strokeWidth={2} style={{
      opacity: i < revealed ? 1 : 0,
      transition: 'opacity 300ms'
    }} />;
  })}
        </svg>
        {blocks.map((b, i) => {
    const center = centerOf(b.col, b.row);
    const size = sizes[b.type];
    return <div key={i} className="absolute rounded-md transition-all duration-300" style={{
      left: center.x - size / 2,
      top: center.y - size / 2,
      width: size,
      height: size,
      backgroundColor: colors[b.type],
      opacity: i < revealed ? 1 : 0,
      transform: i < revealed ? 'scale(1)' : 'scale(0.4)'
    }}></div>;
  })}
      </div>
    </div>;
};

<div className="w-full">
  <div className="relative overflow-hidden">
    <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 flex justify-center">
      <div
        className="h-[24rem] w-[46rem] max-w-full opacity-20"
        style={{
      background:
        'radial-gradient(50% 50% at 50% 50%, rgba(96,70,255,0.45) 0%, rgba(96,70,255,0.15) 45%, rgba(96,70,255,0) 100%)',
      filter: 'blur(60px)',
    }}
      />
    </div>

    <div className="relative max-w-3xl mx-auto px-6 pt-24 pb-24 text-center">
      <div className="inline-flex items-center gap-2 px-3 py-1 mb-6 rounded-full bg-accent-badge border border-accent-soft">
        <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />

        <span className="text-xs font-semibold text-accent tracking-wide">Part of the Upsun platform</span>
      </div>

      <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white leading-[1.1] mb-5 tracking-heading">
        Less backlog, more shipped code

        <span className="block mt-2">
          with{' '}

          <span
            style={{
          backgroundImage: 'linear-gradient(120deg, #E81CEC 0%, #6046FF 100%)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent',
          WebkitTextFillColor: 'transparent',
        }}
          >
            Upsun Dispatch™.
          </span>
        </span>
      </h1>

      <p className="text-lg max-w-md mx-auto mb-2 leading-relaxed text-muted">
        Upsun Dispatch reviews your pull requests and turns issues into pull requests.
      </p>

      <p className="text-lg max-w-md mx-auto mb-8 leading-relaxed text-muted">
        Connect a repo, leave a comment, and Upsun Dispatch takes it from there.
      </p>

      <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
        <a href="/dispatch/docs/get-started" className="hero-get-started-btn inline-flex items-center justify-center gap-2 w-full sm:w-56 whitespace-nowrap px-7 py-3.5 btn-primary rounded-full transition-colors text-sm">
          Get started

          <Icon icon="arrow-right" size={16} className="icon-current" />
        </a>

        <a href="/dispatch/docs/get-started" className="hero-what-is-upsun-btn inline-flex items-center justify-center gap-2 w-full sm:w-56 whitespace-nowrap px-7 py-3.5 btn-secondary rounded-full transition-colors text-sm">
          Browse docs
        </a>
      </div>
    </div>
  </div>

  <div className="max-w-7xl mx-auto px-6">
    <div className="pb-16">
      <div className="rounded-2xl bg-card border-theme shadow-sm p-6 md:p-8">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white text-center mb-4 tracking-subheading">One platform, full lifecycle coverage</h3>

        <div className="flex flex-col items-center gap-8 md:grid md:items-start md:gap-0 mb-2" style={{gridTemplateColumns: '1fr auto 1fr', '--lifecycle-box-h': '3rem', '--lifecycle-row-gap': '0.75rem'}}>
          <div className="flex flex-col items-center gap-3" style={{justifySelf: 'end'}}>
            <span className="text-xs font-semibold" style={{color: '#E81CEC'}}>Upsun Dispatch</span>

            <div style={{width: '100%', height: '8px', borderLeft: '2px solid #E81CEC', borderRight: '2px solid #E81CEC', borderTop: '2px solid #E81CEC'}} />

            <div className="flex flex-col items-center gap-2 md:gap-[var(--lifecycle-row-gap)]">
              <div className="flex items-center gap-2 md:gap-3">
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg text-sm md:text-base font-semibold whitespace-nowrap text-center" style={{backgroundColor: 'rgba(232,28,236,0.08)', borderWidth: '1px', borderColor: 'rgba(232,28,236,0.2)', color: '#E81CEC'}}>Plan</span>
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg text-sm md:text-base font-semibold whitespace-nowrap text-center" style={{backgroundColor: 'rgba(232,28,236,0.08)', borderWidth: '1px', borderColor: 'rgba(232,28,236,0.2)', color: '#E81CEC'}}>Code</span>
              </div>

              <div className="flex items-center gap-2 md:gap-3">
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg text-sm md:text-base font-semibold whitespace-nowrap text-center" style={{backgroundColor: '#E81CEC', color: '#ffffff'}}>Review</span>
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg text-sm md:text-base font-semibold whitespace-nowrap text-center" style={{backgroundColor: '#E81CEC', color: '#ffffff'}}>Optimize</span>
              </div>
            </div>
          </div>

          <div className="flex flex-col items-center gap-3 md:px-6">
            <div className="flex md:hidden flex-col items-center gap-2">
              <div style={{height: '1.5rem', borderLeft: '2px dashed #9CA3AF'}} />

              <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white border border-gray-200 shadow-sm shrink-0 whitespace-nowrap">
                <span className="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold" style={{backgroundColor: '#22C55E', color: '#ffffff'}}>✓</span>
                <span className="text-xs font-semibold text-gray-900">Git push</span>
              </div>

              <div className="flex flex-col items-center">
                <div style={{height: '1.5rem', borderLeft: '2px dashed #9CA3AF'}} />

                <Icon icon="chevron-down" size={20} className="icon-current text-gray-400 -mt-1.5" />
              </div>
            </div>

            <div className="hidden md:flex flex-col items-center gap-3">
              <span className="text-xs font-semibold invisible" aria-hidden="true">Upsun Dispatch</span>

              <div className="invisible" style={{width: '100%', height: '8px'}} />

              <div className="flex items-center justify-center" style={{height: 'calc(var(--lifecycle-box-h) * 2 + var(--lifecycle-row-gap))'}}>
                <div className="flex items-center gap-2">
                  <div style={{width: '2rem', borderTop: '2px dashed #9CA3AF'}} />

                  <div className="inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-white border border-gray-200 shadow-sm shrink-0 whitespace-nowrap">
                    <span className="inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-bold" style={{backgroundColor: '#22C55E', color: '#ffffff'}}>✓</span>
                    <span className="text-sm font-semibold text-gray-900">Git push</span>
                  </div>

                  <div className="flex items-center" style={{width: '2rem'}}>
                    <div style={{flexGrow: 1, borderTop: '2px dashed #9CA3AF'}} />

                    <Icon icon="arrow-right" size={12} className="icon-current text-gray-400 -ml-1" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="flex flex-col items-center gap-3" style={{justifySelf: 'start'}}>
            <span className="text-xs font-semibold text-accent">Upsun Cloud</span>

            <div style={{width: '100%', height: '8px', borderLeft: '2px solid #6046FF', borderRight: '2px solid #6046FF', borderTop: '2px solid #6046FF'}} />

            <div className="flex flex-col items-center gap-2 md:gap-[var(--lifecycle-row-gap)]">
              <div className="flex items-center gap-2 md:gap-3">
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg bg-accent-badge border border-accent-soft text-sm md:text-base font-semibold text-accent whitespace-nowrap text-center">Build</span>
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg bg-accent-badge border border-accent-soft text-sm md:text-base font-semibold text-accent whitespace-nowrap text-center">Test</span>
              </div>

              <div className="flex items-center gap-2 md:gap-3">
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg bg-accent-badge border border-accent-soft text-sm md:text-base font-semibold text-accent whitespace-nowrap text-center">Deploy</span>
                <span className="flex items-center justify-center w-24 md:w-28 h-11 md:h-[var(--lifecycle-box-h)] rounded-lg bg-accent-badge border border-accent-soft text-sm md:text-base font-semibold text-accent whitespace-nowrap text-center">Run</span>
              </div>
            </div>
          </div>
        </div>

        <p className="text-sm text-muted text-center mt-8">
          Use either product on its own, or connect them at the git push handoff for full coverage.
        </p>
      </div>
    </div>

    <div className="pb-10 pt-4">
      <div className="flex items-center gap-3">
        <div className="h-[2px] w-10 rounded-full gradient-accent-line" />

        <span className="text-xs font-semibold tracking-wide text-accent">Why organizations use Upsun Dispatch</span>
      </div>

      <h2 className="mt-3 text-3xl font-bold text-gray-900 dark:text-white tracking-subheading">Keep code moving</h2>
      <p className="mt-2 text-muted max-w-2xl">Stalled pull requests and growing issue backlogs cost your organization time it doesn't have to spend.</p>
    </div>

    <div className="pb-20 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div className="rounded-2xl bg-card border-theme shadow-sm p-5">
        <div className="flex items-center gap-3 mb-3">
          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent-badge border border-accent-soft shrink-0">
            <Icon icon="hourglass" size={20} className="icon-current text-accent" />
          </div>

          <p className="text-sm text-muted">Friday's pull request is still open Monday morning.</p>
        </div>

        <p className="text-sm text-gray-900 dark:text-white pl-[52px]">Comment <span className="font-semibold" style={{fontFamily: "'Space Grotesk', monospace", color: '#E81CEC'}}>@upsun-dispatch review</span></p>
      </div>

      <div className="rounded-2xl bg-card border-theme shadow-sm p-5">
        <div className="flex items-center gap-3 mb-3">
          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent-badge border border-accent-soft shrink-0">
            <Icon icon="circle-dot" size={20} className="icon-current text-accent" />
          </div>

          <p className="text-sm text-muted">Twelve new issues this sprint. Eleven still open.</p>
        </div>

        <p className="text-sm text-gray-900 dark:text-white pl-[52px]">Comment <span className="font-semibold" style={{fontFamily: "'Space Grotesk', monospace", color: '#E81CEC'}}>@upsun-dispatch implement</span></p>
      </div>

      <div className="rounded-2xl bg-card border-theme shadow-sm p-5">
        <div className="flex items-center gap-3 mb-3">
          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent-badge border border-accent-soft shrink-0">
            <Icon icon="layers" size={20} className="icon-current text-accent" />
          </div>

          <p className="text-sm text-muted">Small papercuts pile up. Nobody owns fixing them.</p>
        </div>

        <p className="text-sm text-gray-900 dark:text-white pl-[52px]">Comment <span className="font-semibold" style={{fontFamily: "'Space Grotesk', monospace", color: '#E81CEC'}}>@upsun-dispatch implement</span></p>
      </div>
    </div>

    <div className="pb-20">
      <div className="rounded-2xl overflow-hidden bg-surface-dark p-8 md:p-12">
        <h2 className="text-2xl font-bold text-white mb-2 tracking-subheading">Connect. Trigger. Ship.</h2>
        <p className="text-on-dark mb-10 max-w-lg">Whether it's Friday's stalled PR or this sprint's growing backlog, it starts the same way: connect once, then comment.</p>

        <div className="relative">
          <div aria-hidden="true" className="hidden md:block absolute top-5 left-[16.67%] right-[16.67%] h-px" style={{background: 'linear-gradient(90deg, #6046FF, #E81CEC)'}} />

          <div className="grid md:grid-cols-3 gap-8">
            <div className="relative flex flex-col items-center text-center">
              <div className="relative z-10 flex items-center justify-center w-10 h-10 rounded-full text-white font-bold shrink-0 mb-4" style={{background: 'linear-gradient(135deg, #6046FF, #E81CEC)'}}>1</div>
              <h3 className="text-white font-semibold mb-1">Connect</h3>
              <p className="text-on-dark-muted text-sm mb-3 max-w-xs">Link GitHub or GitLab to your organization and store your Anthropic key.</p>
              <div className="inline-block bg-code-block rounded-lg px-3 py-2 text-xs text-on-dark text-left" style={{fontFamily: "'Space Grotesk', monospace"}}>GitHub App · GitLab project · Anthropic key</div>
            </div>

            <div className="relative flex flex-col items-center text-center">
              <div className="relative z-10 flex items-center justify-center w-10 h-10 rounded-full text-white font-bold shrink-0 mb-4" style={{background: 'linear-gradient(135deg, #6046FF, #E81CEC)'}}>2</div>
              <h3 className="text-white font-semibold mb-1">Trigger</h3>
              <p className="text-on-dark-muted text-sm mb-3 max-w-xs">Push a change, or mention Upsun Dispatch in an issue or pull request.</p>

              <div className="inline-block bg-code-block rounded-lg px-4 py-3 text-xs space-y-1 text-left" style={{fontFamily: "'Space Grotesk', monospace"}}>
                <div><span className="text-accent-light">@upsun-dispatch</span> <span className="text-on-dark">implement</span></div>
                <div><span className="text-accent-light">@upsun-dispatch</span> <span className="text-on-dark">review</span></div>
                <div><span className="text-accent-light">@upsun-dispatch</span> <span className="text-on-dark">full review</span></div>
              </div>
            </div>

            <div className="relative flex flex-col items-center text-center">
              <div className="relative z-10 flex items-center justify-center w-10 h-10 rounded-full text-white font-bold shrink-0 mb-4" style={{background: 'linear-gradient(135deg, #6046FF, #E81CEC)'}}>3</div>
              <h3 className="text-white font-semibold mb-1">Ship</h3>
              <p className="text-on-dark-muted text-sm mb-3 max-w-xs">Upsun Dispatch posts checks, comments, and pull requests back where you work, and records every run in the Upsun Dispatch console.</p>

              <div className="inline-block bg-code-block rounded-lg px-4 py-3 text-xs text-left" style={{fontFamily: "'Space Grotesk', monospace"}}>
                <div className="text-on-dark-muted">#128 · upsun-dispatch/issue-42</div>

                <div className="flex items-center gap-1.5 mt-1">
                  <span className="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold" style={{backgroundColor: '#D5F800', color: '#0C0F10'}}>✓</span>
                  <span className="text-on-dark font-medium">Pull request opened</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="pb-16">
      <div className="rounded-2xl bg-card border-theme shadow-sm p-6 md:p-8 grid md:grid-cols-2 gap-6 items-center">
        <div className="flex items-start gap-4">
          <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-accent-badge border border-accent-soft shrink-0">
            <Icon icon="users" size={20} className="icon-current text-accent" />
          </div>

          <div>
            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Everyone works from the same run</h3>
            <p className="text-muted">Captured as it happens. Visible to the whole organization, not just whoever kicked it off.</p>
          </div>
        </div>

        <div className="rounded-xl overflow-hidden border border-accent-soft shadow-lg">
          <img src="https://mintcdn.com/upsun-c9761871/Fg69dHDfguHpp19S/images/dispatch/dispatch-issue.png?fit=max&auto=format&n=Fg69dHDfguHpp19S&q=85&s=8f2144d86158f130e6050beb57968d5e" alt="Upsun Dispatch run timeline showing an approved plan step and a live code step" className="w-full h-auto" width="740" height="574" data-path="images/dispatch/dispatch-issue.png" />
        </div>
      </div>
    </div>

    <div className="pb-8">
      <h2 className="text-3xl font-bold text-gray-900 dark:text-white tracking-subheading">Under the hood</h2>
      <p className="mt-2 text-muted max-w-2xl">Built-in workflows are just the beginning.</p>
    </div>

    <div className="pb-16 grid lg:grid-cols-2 gap-6">
      <div className="rounded-2xl bg-card border-theme shadow-sm p-6 md:p-8">
        <a href="/dispatch/docs/workflows/issue-to-code" className="inline-flex items-center gap-3 mb-4 group">
          <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-accent-badge border border-accent-soft">
            <Icon icon="code" size={20} className="icon-current text-accent" />
          </div>

          <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-accent transition-colors">Issue to code</h3>
        </a>

        <ul className="space-y-2.5">
          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Starts from a simple <span style={{fontFamily: "'Space Grotesk', monospace"}} className="text-accent">@upsun-dispatch implement</span> mention</span>
          </li>

          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Plans, implements, and self-reviews before publishing</span>
          </li>

          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Opens or updates a pull request linked to the issue</span>
          </li>
        </ul>

        <div className="mt-6 rounded-2xl overflow-hidden bg-surface-dark border-2 border-[rgba(96,70,255,0.5)] shadow-lg">
          <div className="px-5 py-3 border-b border-accent-soft flex items-center gap-1.5">
            <span className="w-3 h-3 rounded-full" style={{backgroundColor: 'rgba(96,70,255,1)'}} />

            <span className="w-3 h-3 rounded-full" style={{backgroundColor: 'rgba(96,70,255,0.65)'}} />

            <span className="w-3 h-3 rounded-full" style={{backgroundColor: 'rgba(96,70,255,0.35)'}} />

            <span className="ml-3 text-on-dark-muted text-xs" style={{fontFamily: "'Space Grotesk', monospace"}}>issue #42 → dispatch</span>
          </div>

          <div className="p-5 text-[13px] leading-relaxed" style={{fontFamily: "'Space Grotesk', monospace"}}>
            <div className="text-on-dark-muted mb-3"># @upsun-dispatch implement</div>
            <div className="text-accent-light text-xs">Gathering issue context</div>
            <div className="text-accent-light text-xs">Planning implementation</div>
            <div className="text-accent-light text-xs">Generating code changes</div>
            <div className="text-accent-light text-xs">Running critic pass</div>

            <div className="flex items-center gap-1.5 mt-3">
              <span className="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold" style={{backgroundColor: '#D5F800', color: '#0C0F10'}}>✓</span>
              <span className="text-on-dark text-xs font-medium">Pull request opened</span>
            </div>

            <div className="text-on-dark-muted text-xs mt-1">#128 · upsun-dispatch/issue-42</div>
          </div>
        </div>
      </div>

      <div className="rounded-2xl bg-card border-theme shadow-sm p-6 md:p-8">
        <a href="/dispatch/docs/workflows/code-review" className="inline-flex items-center gap-3 mb-4 group">
          <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-accent-badge border border-accent-soft">
            <Icon icon="search-check" size={20} className="icon-current text-accent" />
          </div>

          <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-accent transition-colors">Code review</h3>
        </a>

        <ul className="space-y-2.5">
          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Runs on push or on demand with <span style={{fontFamily: "'Space Grotesk', monospace"}} className="text-accent">@upsun-dispatch review</span></span>
          </li>

          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Inline comments on the exact lines that need attention</span>
          </li>

          <li className="flex items-start gap-3">
            <Icon icon="check" size={16} className="icon-current text-accent shrink-0 mt-1" />

            <span className="text-sm text-muted">Publishes checks and statuses natively in GitHub and GitLab</span>
          </li>
        </ul>

        <div className="mt-6 rounded-2xl overflow-hidden bg-surface-dark border-2 border-[rgba(96,70,255,0.5)] shadow-lg">
          <div className="px-5 py-3 border-b border-accent-soft flex items-center gap-2">
            <Icon icon="git-pull-request" size={16} className="icon-current text-accent-light" />

            <span className="text-on-dark text-sm font-medium">Pull request #128</span>
            <span className="ml-auto text-xs px-2 py-0.5 rounded-full" style={{backgroundColor: '#D5F800', color: '#0C0F10'}}>Open</span>
          </div>

          <div className="p-5 space-y-4 text-[13px]" style={{fontFamily: "'Space Grotesk', monospace"}}>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold" style={{backgroundColor: '#D5F800', color: '#0C0F10'}}>✓</span>
              <span className="text-on-dark">Upsun Dispatch · Code review</span>
              <span className="ml-auto text-on-dark-muted text-xs">passed</span>
            </div>

            <div className="rounded-lg bg-code-block p-4">
              <div className="text-on-dark-muted text-xs mb-2">src/auth/session.ts:42</div>
              <div className="text-accent-light text-xs mb-1">Upsun Dispatch</div>
              <div className="text-on-dark text-xs leading-relaxed">Validate token expiry before refreshing. This branch can throw on a null claim.</div>
            </div>

            <div className="flex items-center gap-1.5">
              <span className="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold" style={{backgroundColor: '#D5F800', color: '#0C0F10'}}>✓</span>
              <span className="text-on-dark text-xs font-medium">Summary published</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="pb-20">
      <div className="rounded-2xl bg-surface-dark p-6 md:p-8 grid md:grid-cols-2 gap-6 items-center">
        <div className="space-y-3">
          <p className="text-white">
            <span style={{color: '#E81CEC'}}>Custom workflows</span> for your own development process are coming soon.

            <br />

            Got an idea for a workflow? <a href="https://support.upsun.com/hc/en-us/requests/new?ticket_form_id=37982573191442" className="text-accent-light font-semibold underline">Tell us</a> and help decide what we build next.
          </p>
        </div>

        <WorkflowBuilderAnimation />
      </div>
    </div>

    <div className="relative rounded-2xl overflow-hidden p-14 text-center mb-8 bg-accent">
      <h2 className="text-3xl font-bold text-white mb-3 tracking-subheading">Connect a repo and leave a comment.</h2>

      <p className="text-white mb-8 mx-auto whitespace-nowrap">
        That's the whole onboarding. Upsun Dispatch handles the rest.
      </p>

      <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
        <a href="/dispatch/docs/get-started/quickstart" className="inline-flex items-center justify-center w-full sm:w-48 whitespace-nowrap px-7 py-3.5 bg-white text-accent-deep font-semibold rounded-full hover:bg-[#DFDAFF] transition-colors text-sm">
          Get started →
        </a>

        <a href="/dispatch/docs/get-started" className="inline-flex items-center justify-center w-full sm:w-48 whitespace-nowrap px-7 py-3.5 text-white font-medium rounded-full border-2 border-white hover:bg-white hover:text-[#6046ff] transition-all text-sm">
          Browse docs
        </a>
      </div>

      <div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 justify-center text-xs text-white">
        <span>✓ Automated code review</span>
        <span>✓ Issue to pull request</span>
        <span>✓ GitHub and GitLab</span>
      </div>
    </div>
  </div>
</div>
