---
title: Category Return on Investment Calculator
suppress_header: true
extra_css:
  - category-roi-calculator.css
extra_js:
  - libs/wNumb.min.js
  - category-roi-calculator.js
---

.wrapper
  .container.landing-container
    .row
      .col-md-10.col-md-offset-1
        .row.page-head-container
          .col-xs-12
            %h1.h2.text-center.page-section-header.u-margin-top-lg
              GitLab Categories ROI Calculator

    .row
      .col-md-10.col-md-offset-1.roi-calculator-wrapper
        .js-roi-calculator
          .roi-calculator-container.u-margin-top-lg
            .row.header-row
              .col-xs-4.header-col
                .brand-title.text-center
                  Category
              .col-xs-4.header-col
                .brand-title.text-center
                  = partial "includes/logos/wm_web.svg"
              .col-xs-4.header-col
                .brand-title.text-center
                  Your toolchain

            .row.total-row
              .col-xs-4.total-col
              .col-xs-4.total-col
                .total-group
                  %span.total-label
                    Monthly Cost for 100 users
                  %span.total-value
                    $9,900
              .col-xs-4.total-col
                .total-group
                  %span.total-label
                    Monthly Cost for 100 users
                  %span.total-value#js-roi-calculator-total

            - data.categories.each do |category_key, category|
              - next unless category.roi
              .row.data-row.js-data-row{ data: { 'category-key' => category_key, stage: category.stage } }
                .col-xs-4.data-col
                  = category.name
                .col-xs-4.data-col
                  .included-group
                    = partial "includes/icons/checkmark.svg"
                    Included
                .col-xs-4.data-col
                  .toolchain-group
                    .dropdown.level.js-devops-tool-dropdown
                      %button.dropdown-menu-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
                        .dropdown-title
                        %i.fa.fa-chevron-down
                      %ul.dropdown-menu.dropdown-scroll
                        - data.features.devops_tools.each do |devops_tool_key, devops_tool|
                          - next if devops_tool_key[0..6] == 'gitlab_'
                          - next unless devops_tool.category && devops_tool.category.include?(category_key)
                          %li.js-roi-calculator-devops-tool{ data: { key: devops_tool_key } }
                            = image_tag devops_tool.logo, alt: "#{devops_tool.name} logo"
                            = devops_tool.name
                      %span.add-tool.js-roi-calculator-add-tool
                        = partial "images/icons/add.svg"
                    .toolchain-cost-field
                      $
                      %input.toolchain-input.js-roi-calculator-input{ type: "number", value: 1000, step: 0.01, name: "#{category_key}_cost" }
                      \/mo

          .row.annual-cost-header-row.u-margin-top-md
            .col-xs-12
              %h2.text-center Annual cost for 100 users
          .row.annual-cost-row.u-margin-bottom-lg
            .col-xs-5.col-xs-offset-1.gitlab-cost
              %h1 $118,800
            .col-xs-4.toolchain-cost
              %h1#js-roi-calculator-annual-total
          .row.start-trial
            .col-xs-12.cta-btn-container
              = link_to "Start your 30-day free trial today", "/free-trial", class: "btn cta-btn accent"