{% extends "templates/base.html" %}

{% block title %}Enterprise Open Source and Linux{% endblock %}

{% block meta_description %}
  Ubuntu is the modern, open source operating system on Linux for the enterprise server, desktop, cloud, and IoT.
{% endblock meta_description %}

{% block extra_body_class %}
  homepage

  {% block takeover_body_class %}
  {% endblock takeover_body_class %}
{% endblock extra_body_class %}

{% block meta_copydoc %}
  https://docs.google.com/document/d/1ySJxQbqVdeH4Tra0zwBm2Tn0s56kFGnEF7d8xDRTxwU/edit
{% endblock %}

{% block body_class %}
  {% if not(no_dark == True) %}is-dark{% endif %}
{% endblock body_class %}

{% block outer_content %}

  {% block content %}

    <section id="test-takeover" class="p-section--hero" hidden>
      <div class="row p-takeover-animation" id="test-takeover-animaition">
        <div class="row--50-50 p-section--shallow">
          <div class="col">
            <h1 class="u-no-margin--bottom" id="test-takeover-title">A CTO's guide to real-time Linux</h1>
          </div>
          <div class="col">
            <div class="p-section--shallow u-no-padding--top">
              <h2 id="test-takeover-subtitle">Understanding real-time systems, their use cases and inner workings.</h2>
            </div>
            <hr class="p-rule--muted" />
            <p>
              <a id="test-takeover-primary-url" href="/download" class="p-button--positive">Download now</a>
            </p>
        </div>
      </div>
        <div class="u-align--center">
          <img id="test-takeover-image"
              src="https://assets.ubuntu.com/v1/fb1ea84e-Kernelt%20industries@2x.png"
              width="508"
              height="364"
              loading="lazy"
              alt="" />
        </div>
      </div>
    </section>

    <!-- Default Takeover: Download the latest Ubuntu -->
    <section data-lang="all" id="takeover" class="p-section--hero">
      <div class="row p-takeover-animation" id="takeover-animaition">
        <div class="col-6">
          <div class="p-section--shallow">
            <h1 id="takeover-title" class="u-no-margin--bottom">Ubuntu 24.04 LTS Noble Numbat is available for download</h1>
            <p class="p-heading--2" id="takeover-subtitle">
              Discover the latest and greatest features in our most recent long term supported release.
            </p>
          </div>
          <hr class="p-rule--muted" />
          <div id="takeover-ctas">
            <p>
              <a id="takeover-primary-url" href="/download" class="p-button--positive">Download for free</a>
              <a id="takeover-secondary-url" href="/blog/ubuntu-desktop-24-04-noble-numbat-deep-dive">Read the deep dive&nbsp;&rsaquo;</a>
            </p>
          </div>
        </div>
        <div class="col-6 u-vertically-center u-align--center u-hide--medium u-hide--small">
          <img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" loading="lazy" />
        </div>
      </div>
    </section>

    <div class="p-section">
      <div class="u-fixed-width">
        <div class="p-notification--information u-no-margin--bottom is-dark">
          <div class="p-notification__content">
            <p class="p-notification__title p-heading--5">
              <a href="https://canonical.com/blog/canonical-offers-12-year-lts-for-any-open-source-docker-image">Canonical announces 12 year LTS for open source Docker images</a>
            </p>
            <p class="p-notification__message">
              <span>Get a custom built container and let us handle the maintenance</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    {% block notices_content %}
    {% endblock notices_content %}

    <section class="p-section">
      <hr class="p-rule is-fixed-width" />
      <div class="row">
        <div class="col-9 col-medium-4">
          <div class="p-section--shallow">
            <h2 class="p-heading--1 u-no-margin--bottom">Modern enterprise open&nbsp;source</h2>
            <p class="p-heading--2">
              Security, support, and managed services from
              <br class="u-hide--small u-hide--medium" />
              the publisher&nbsp;of&nbsp;Ubuntu.
            </p>
          </div>
          <p>
            <a class="p-button--positive" href="/pro">Get Ubuntu Pro</a>
          </p>
        </div>
        <div class="col-3 col-medium-2">
          <ul class="p-list--divided u-no-margin--bottom">
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/66d21279-aws.png",
                            alt="AWS",
                            width="51",
                            height="63",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/d24afe72-azure.png",
                            alt="Microsoft Azure",
                            width="126",
                            height="67",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/79de55f4-att.png",
                            alt="AT&T",
                            width="98",
                            height="72",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/5c8b5aef-google%20cloud.png",
                            alt="Google Cloud",
                            width="164",
                            height="59",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
          </ul>
        </div>
      </div>
    </section>

    <div class="u-fixed-width">
      <hr class="p-rule" />
    </div>

    {% with section_classes='p-section', spotlight='True', article_date='True' %}
      {% include "shared/_latest_news_strip.html" %}
    {% endwith %}

    <section class="p-section">
      <div class="row--50-50-on-large">
        <hr class="p-rule" />
        <div class="col">
          <div class="p-section--shallow">
            <h2 class="p-heading--1 u-no-margin--bottom">Energise your engineers</h2>
            <p class="p-heading--2">Better security. More packages. Newer tools. All your open source, from cloud to edge.</p>
          </div>
          <div class="p-section--shallow">
            <p>
              Loved by developers and trusted by enterprises. Ubuntu is the first pick for organisations to support their software infrastructure and the OS chosen by 66% of experienced developers. <span class="u-text--muted">(HackerEarth, Developer Survey, 2020)</span>
            </p>
          </div>
          <ul class="p-list--divided is-homepage">
            <li class="p-list__item is-ticked">Authentically open source</li>
            <li class="p-list__item is-ticked">Secure by design</li>
            <li class="p-list__item is-ticked">A release cadence you can depend on</li>
            <li class="p-list__item is-ticked">Stability through long term support</li>
          </ul>
          <p>That's why Ubuntu supports the fastest, biggest and most successful digital operations.</p>
          <hr class="p-rule--muted" />
          <p class="u-no-margin--bottom">
            <a href="/engage/adopting-secure-enterprise-linux-desktop">Download our guide to secure enterprise Linux&nbsp;&rsaquo;</a>
          </p>
          <p>
            <a href="/ai">Build your AI models on Ubuntu&nbsp;&rsaquo;</a>
          </p>
        </div>
        <div class="col">
          <div class="p-image-wrapper u-hide--medium">
            {{ image(url="https://assets.ubuntu.com/v1/e93caaaf-Energise%20your%20engineers.png",
                        alt="",
                        width="1200",
                        height="1801",
                        hi_def=True,
                        loading="lazy",
                        attrs={"class": "u-aspect-ratio--2-3"}) | safe
            }}
          </div>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="row">
        <hr class="p-rule" />
        <div class="col-9">
          <div class="p-section--shallow">
            <h2 class="p-heading--1 u-no-margin--bottom">Open source security</h2>
            <p class="p-heading--2">
              <a href="/pro">Ubuntu Pro</a> is more than Linux.
              <br />
              <a href="/security/compliance-automation">Security and compliance</a> for the full stack.
            </p>
          </div>
          <p>
            Secure your open source apps. Patch the full stack, from kernel to library and applications, for CVE compliance. Governments and auditors certify Ubuntu for FedRAMP, FISMA and HITECH.
          </p>
        </div>
        <div class="col-3">
          <ul class="p-list--divided u-hide--medium u-hide--small">
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/22c5fb07-nist-logo.png",
                            alt="NIST",
                            width="57",
                            height="39",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/2354ee4f-@sec-logo.png",
                            alt="ASEC",
                            width="96",
                            height="54",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/c7af6eb5-disa-logo.png",
                            alt="DISA",
                            width="68",
                            height="48",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/4710d3ba-cis-logo.png",
                            alt="CIS",
                            width="39",
                            height="60",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
            <li class="p-list__item u-no-padding">
              {{ image(url="https://assets.ubuntu.com/v1/aa0ad2ff-csec-logo.png",
                            alt="CSEC",
                            width="39",
                            height="69",
                            hi_def=True,
                            loading="lazy") | safe
              }}
            </li>
          </ul>
        </div>
      </div>

      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>10 year security maintenance and CVE Patching</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/livepatch">Kernel Livepatch</a> for 24/7 patching with no downtime
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/esm">Expanded security</a> for infrastructure and applications
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#fips">FIPS 140-2</a> cryptographic modules certified by NIST
          </p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#common-criteria">Common Criteria EAL2</a>: ISO/IEC IS 15408 validated by CSEC
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#stig">DISA/STIG</a> hardening for <abbr title="Department of Defence, USA">DoD</abbr>
            compliance
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#cis">CIS profiles</a> for cyber defence and malware prevention
          </p>
        </li>
      </ul>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-start-large-7 col-6">
          <p>
            <a class="p-button is-dark" href="/security">Secure all your open source</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="row--50-50-on-large">
        <hr class="p-rule" />
        <div class="col">
          <div class="p-image-wrapper u-hide--medium">
            {{ image(url="https://assets.ubuntu.com/v1/fbd123d4-Significant%20enterprise%20savings.jpg",
                        alt="",
                        width="1200",
                        height="1801",
                        hi_def=True,
                        loading="lazy",
                        attrs={"class": "u-aspect-ratio--2-3"}) | safe
            }}
          </div>
        </div>
        <div class="col">
          <div class="p-section--shallow">
            <h2 class="p-heading--1 u-no-margin--bottom">Significant enterprise savings</h2>
            <p class="p-heading--2">Sustainable open source at the lowest cost, everywhere.</p>
          </div>
          <div class="p-section--shallow">
            <p>
              Rethink what's possible with Linux and open source. Companies engage Canonical to drive down open source operating costs. Automate everything: multi-cloud operations, bare metal provisioning, edge clusters and IoT.
            </p>
          </div>
          <ul class="p-list--divided is-homepage">
            <li class="p-list__item is-ticked">No mandatory subscriptions for Ubuntu</li>
            <li class="p-list__item is-ticked">
              <a href="/security">Security</a>, <a href="/support">support</a> and fully managed <a href="/openstack/managed">infra</a> and <a href="/managed">apps</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="/cloud/public-cloud">Public cloud</a>, <a href="/download/server">data centre</a>, <a href="https://microk8s.io">edge cluster</a> and <a href="/appliance">appliances</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="/about/release-cycle">Long term maintenance commitment</a>
            </li>
            <li class="p-list__item is-ticked">Transparent pricing for enterprise and ISV</li>
            <li class="p-list__item is-ticked">
              <a href="/engage/vmware-to-charmed-openstack">Switch from VMware to OpenStack</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="/openstack/tco-calculator">TCO analysis of Open Infra</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="/engage/cloud-economics">451 study on private/public cloud costs</a>
            </li>
          </ul>
          <hr class="p-rule--muted" />
          <p class="u-no-margin--bottom">
            <a href="/contact-us" class="js-invoke-modal p-button is-dark">Let's talk open source</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="u-fixed-width">
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Public cloud optimisation</h2>
          <p class="p-heading--2">Most public cloud instances are Ubuntu, for performance and security.</p>
          <div class="p-logo-section--dense u-no-padding">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/86ee4118-uber-logo.png"
                     alt="Uber"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/d1a04730-spotify-logo.png"
                     alt="Spotify"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/ce3090ee-bnp-paribas-logo.png"
                     alt="BNP"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Optimised kernels for AWS, Azure, Google, Oracle, IBM</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#fips">FIPS</a>, <a href="/security/compliance-automation#cis">CIS hardening</a> and CVE fixes with Ubuntu Pro
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Minimise rolling reboots with <a href="/livepatch">Kernel Livepatch</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Network & storage performance optimisation</p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>GPU enablement for machines and containers</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Pay-as-you-go billing, no more licenses</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/support">Enterprise support</a> and <a href="/esm">Expanded Security Maintenance</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Cloud workload migration service</p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Containerisation and cloud-native migration service</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Fully managed application service</p>
        </li>
      </ul>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-3 col-start-large-7 col-medium-2 col-medium-start-3">
          <p>
            <a href="/cloud/public-cloud"
               aria-label="Learn more about public cloud optimisation"
               class="p-button is-dark">Learn more</a>
            <a href="/cloud/public-cloud#get-in-touch"
               aria-label="Contact us about public cloud optimisation">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="row--50-50-on-large p-section--shallow">
        <hr class="p-rule" />
        <div class="col">
          <h2 class="p-heading--1 u-no-margin--bottom u-no-max-width">Multi-cloud Kubernetes and containers</h2>
          <p class="p-heading--2">
            <a title="external link - azure.microsoft.com/en-us/services/kubernetes-service"
               href="https://azure.microsoft.com/en-us/services/kubernetes-service/">AKS.</a> <a title="external link - cloud-images.ubuntu.com/docs/aws/eks"
    href="https://cloud-images.ubuntu.com/docs/aws/eks/">EKS.</a> <a title="external link - cloud.google.com/kubernetes-engine"
    href="https://cloud.google.com/kubernetes-engine">GKE.</a> Kubeadm. <a title="external link - microk8s.io" href="https://microk8s.io">MicroK8s.</a> <a href="/kubernetes/features">Charmed Kubernetes.</a>
          </p>
          <p class="p-heading--2">All on Ubuntu.</p>
          <div class="p-section--shallow">
            <div class="p-logo-section--dense">
              <div class="p-logo-section__items landing-logos u-no-padding">
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/b0292231-aws-logo.png"
                       alt="AWS"
                       class="p-logo-section__logo" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/8e354832-is-dark=true.png"
                       alt="GCP"
                       class="p-logo-section__logo" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/9e14fd33-microsoft-azure-logo.png"
                       alt="Microsoft Azure"
                       class="p-logo-section__logo" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/6f7d29aa-liberty-global-logo.png"
                       alt="Liberty Global"
                       class="p-logo-section__logo" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/0f0a0c1d-aci-logo.png"
                       alt="ACI"
                       class="p-logo-section__logo" />
                </div>
              </div>
            </div>
          </div>

          <ul class="p-list--divided is-homepage">
            <li class="p-list__item is-ticked">Support for all public cloud Kubernetes</li>
            <li class="p-list__item is-ticked">On-prem MicroK8s, Charmed K8s, kubeadm</li>
            <li class="p-list__item is-ticked">
              <a href="/kubernetes/managed">Fully managed Kubernetes</a> on-prem or public cloud
            </li>
            <li class="p-list__item is-ticked">
              <a href="https://juju.is/docs/kubernetes">Model-driven Kubernetes Operators</a>
            </li>
            <li class="p-list__item is-ticked">
              Full stack support for <a href="/managed">apps</a>, <a href="/pricing/infra">Kubernetes</a> and <a href="/support">OS</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="https://jaas.ai/canonical-kubernetes">K8s architecture and deployment consulting</a>
            </li>
            <li class="p-list__item is-ticked">Cloud-native workload migration services</li>
            <li class="p-list__item is-ticked">
              GPU enablement for <a href="https://charmed-kubeflow.io/">AI/ML workloads</a>
            </li>
            <li class="p-list__item is-ticked">
              <a href="https://maas.io/">Bare metal</a>, <a href="/openstack">OpenStack</a> and VMware
            </li>
            <li class="p-list__item is-ticked">
              Pluggable <a href="/kubernetes/features">CNIs, CSIs, CRIs and third-party tools</a>
            </li>
          </ul>
        </div>
        <div class="col">
          <div class="p-image-wrapper u-hide--medium p-image-container--2-3 u-vertically-center"
               style="background: rgba(0, 0, 0, 0.15)">
            {{ image(url="https://assets.ubuntu.com/v1/1cbb17af-Multi-cloud%20Kubernetes%20%20and%20containers.png",
                        alt="",
                        width="1132",
                        height="726",
                        hi_def=True,
                        loading="lazy") | safe
            }}
          </div>
        </div>
      </div>
      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-start-large-7 col-6">
          <p>
            <a href="/kubernetes"
               aria-label="Learn more about multi-cloud Kubernetes and containers"
               class="p-button is-dark">Learn more</a>
            <a href="/kubernetes/contact-us"
               aria-label="Contact us about multi-cloud Kubernetes and containers"
               class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="u-fixed-width">
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Carrier-grade private cloud</h2>
          <p class="p-heading--2">
            Operate <a href="/openstack">private cloud the smart way</a>&nbsp;&ndash;&nbsp;supported or <a href="/openstack/managed">fully managed</a>.
          </p>
          <div class="p-logo-section--dense">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/aabc2a34-bestbuy-logo.png"
                     alt="Best Buy"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/83e8dd19-bt-logo.png"
                     alt="BT"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/8b939be3-deutsche-telekom.png"
                     alt="Deutsche Telekom"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/b6d5d92b-rabobank-logo.png"
                     alt="Rabobank"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/2c5c1540-Bloomberg-Logo.png"
                     alt="Bloomberg"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/99a69f52-ATT-Logo.png"
                     alt="AT&T"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            10 year <a href="/esm">security maintenance</a> and <a href="/support">support</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/openstack/features">Hyperconverged</a> or segregated architecture
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security">Encryption at rest for GDPR, HIPAA, FedRAMP</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Wide choice of SDN and storage</p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/engage/charmed-openstack-adoption-whitepaper">Upgrades and day-2 operations, automated</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Integrated logging, monitoring and alerting</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Platform and infrastructure hardening</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>High availability</p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/telco">Carrier-grade NFVI</a>
          </p>
        </li>
      </ul>
      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-6 col-start-large-7">
          <p>
            <a href="/openstack"
               aria-label="Learn more about carrier-grade private cloud"
               class="p-button is-dark">Learn more</a>
            <a href="/openstack/contact-us"
               aria-label="Contact us about carrier-grade private cloud"
               class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="row--50-50-on-large p-section--shallow">
        <hr class="p-rule" />
        <div class="col">
          <div class="p-image-wrapper u-vertically-center p-image-container--2-3 u-hide--medium"
               style="background: rgba(0, 0, 0, 0.15)">
            {{ image(url="https://assets.ubuntu.com/v1/21ef9142-Ultra%20Secure%20Things.png",
                        alt="",
                        width="1200",
                        height="983",
                        hi_def=True,
                        loading="lazy") | safe
            }}
          </div>
        </div>
        <div class="col">
          <div class="p-section--shallow">
            <h2 class="p-heading--1 u-no-margin--bottom">Ultra secure things</h2>
            <p class="p-heading--2">
              <a href="/appliance">Ubuntu Core Appliances</a> with transactional updates <a href="/embedded">for a better embedded Linux</a>.
            </p>
            <div class="p-logo-section--dense">
              <div class="p-logo-section__items landing-logos u-no-padding">
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/86b50f30-intel-new-logo.png"
                       class="p-logo-section__logo"
                       alt="Intel" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/1af15900-rexroth-logo.png"
                       class="p-logo-section__logo"
                       alt="Rexroth" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/0d5fc741-arm-logo.png"
                       class="p-logo-section__logo"
                       alt="ARM" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/703330cd-dell-technologies-logo-white.png"
                       class="p-logo-section__logo"
                       alt="Dell" />
                </div>
                <div class="p-logo-section__item">
                  <img src="https://assets.ubuntu.com/v1/d689e3b6-advantech-logo.png"
                       class="p-logo-section__logo"
                       alt="Advantech" />
                </div>
              </div>
            </div>
          </div>
          <ul class="p-list--divided is-homepage">
            <li class="p-list__item is-ticked">OTA compressed updates for apps, kernel and OS</li>
            <li class="p-list__item is-ticked">Automatic rollback and data snapshots</li>
            <li class="p-list__item is-ticked">
              <a href="/internet-of-things/appstore">Managed private app stores</a> for secure fleet management
            </li>
            <li class="p-list__item is-ticked">DevSecOps pipeline for edge app delivery</li>
            <li class="p-list__item is-ticked">Built-in device recovery and remote disk repair</li>
            <li class="p-list__item is-ticked">10 year security maintenance for every device</li>
            <li class="p-list__item is-ticked">Provable system and software integrity</li>
            <li class="p-list__item is-ticked">Secure boot backed by root of trust</li>
            <li class="p-list__item is-ticked">Full disk encryption with hardware keys</li>
            <li class="p-list__item is-ticked">
              <a href="/real-time">Support for real-time compute</a>
            </li>
            <li class="p-list__item is-ticked">FIPS certifiable embedded Linux</li>
          </ul>
        </div>
      </div>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-start-large-7 col-6">
          <p>
            <a href="/core"
               aria-label="Learn more about Ubuntu Core"
               class="p-button is-dark">Learn more</a>
            <a href="/core/contact-us"
               aria-label="Contact us about Ubuntu Core"
               class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section ">
      <div class="u-fixed-width ">
        <div class="u-align--center u-vertically-center u-no-padding--bottom p-image-container--cinematic">
          <img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" loading="lazy"/>
        </div>
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Workstations and desktops</h2>
          <p class="p-heading--2">
            <a href="/ai">Optimised AI/ML</a> and cloud devops.
            <br />
            The professional developer's preference.
          </p>

          <div class="p-logo-section--dense">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/3e3e698b-nvidia-logo.png"
                     alt="NVIDIA"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/86b50f30-intel-new-logo.png"
                     alt="Intel"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/cc247653-amd-logo.png"
                     alt="AMD"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/af7e6fff-hp-logo.png"
                     alt="HP"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/703330cd-dell-technologies-logo-white.png"
                       class="p-logo-section__logo"
                       alt="Dell" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/dc74391e-lenovo-logo.png"
                     alt="Lenovo"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/engage/microsoft-active-directory">Active Directory</a> and LDAP integration
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Full disk encryption</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Security updates for the <a href="/esm">full open source stack</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Estate <a href="/landscape/features">monitoring and management</a>
          </p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Configuration lockdown</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Local Kubernetes for offline development</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Instant Ubuntu on Windows and macOS with <a href="/wsl">WSL</a> and <a href="https://multipass.run">Multipass</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Optimised images and <a href="/blog/why-you-should-buy-a-pre-installed-ubuntu-workstation">certified workstations</a>
          </p>
        </li>
      </ul>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-start-large-7 col-6">
          <p>
            <a href="/desktop"
               aria-label="Learn more about workstations and desktops"
               class="p-button is-dark">Learn more</a>
            <a href="/desktop/contact-us"
               aria-label="Contact us about workstations and desktops"
               class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="u-fixed-width"></div>
      <div class="u-fixed-width">
        <div class="p-image-container--cinematic">
          <img src="https://assets.ubuntu.com/v1/39667d98-Open%20source%20security.jpg"
              loading="lazy"
               alt="" />
        </div>
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Data centre automation</h2>
          <p class="p-heading--2">
            Turn a rack into a bare metal cloud.
            <br />
            <a title="external link - maas.io" href="https://maas.io">Metal-as-a-Service provisions</a>  Windows, ESXi and Linux.
          </p>
          <div class="p-logo-section--dense">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/d34aeb87-verizon-logo.png"
                     alt="Verizon"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/874b530e-telefonica-logo.png"
                     alt="Telefonica"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/fe4dad9a-tele2-logo.png"
                     alt="Tele2"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/06faa04e-telecom-italia-logo.png"
                     alt="Telecom Italia"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/54f03cb5-nec-logo.png"
                     alt="NEC"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/5bcba2d8-barclays-logo.png"
                     alt="Barclays"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="https://maas.io/how-it-works">Bare metal cloud</a> with on-demand servers
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Remote edge cluster operations</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Infrastructure <a href="https://maas.io/docs/prometheus-metrics">monitoring</a> and discovery
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Ansible, Chef, Puppet, SALT, <a href="https://juju.is">Juju</a> integration
          </p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="https://maas.io/install">Super fast install</a> from scratch
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>VMWare ESXi, Windows, CentOS, RHEL, Ubuntu</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Custom images with pre-installed apps</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <a href="https://maas.io/docs/storage">Disk</a> and <a href="https://maas.io/docs/networking">network</a> configuration
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--bottom">
          API-driven DHCP, DNS, PXE, IPAM, provisioning
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--bottom">LDAP authentication and RBAC</li>
      </ul>
      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-6 col-start-large-7">
          <p>
            <a href="https://maas.io"
               aria-label="Learn more about data centre automation"
               class="p-button is-dark">Learn more</a>
            <a href="https://maas.io/contact-us"
               aria-label="Contact us about data centre automation">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section">
      <div class="u-fixed-width">
        <div class="p-image-container--cinematic">
          <img src="https://assets.ubuntu.com/v1/465d1258-Smart%20robots%20of%20all%20shapes%20and%20sizes.jpg"
               loading="lazy"
               alt="" />
        </div>
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Smart robots of all shapes and sizes</h2>
          <p class="p-heading--2">
            From turtles to trucks, <a href="/robotics">Ubuntu drives the robot revolution</a>.
          </p>
          <div class="p-logo-section--dense">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/938bc6df-ABB-logo.png"
                     alt="ABB"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/24808373-pal-robotics-logo.png"
                     alt="Pal Robotics"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/8825054e-Kuka-logo.png"
                     alt="Kuka"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/213d7454-apollo-logo.png"
                     alt="Apollo"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/feb30dca-bosch-logo.png"
                     alt="Bosch"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/fbbc29ef-bmw-logo.png"
                     alt="BMW"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            Full support for <a href="/robotics/what-is-ros">ROS and ROS2</a>
          </p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Security patches for long-term ROS</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Fault tolerant over-the-air updates</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="/security/compliance-automation#cis">CIS certification</a> for ROS and ROS2
          </p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--bottom">
          Trim time-to-market with SMART START consulting
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--bottom">Leading Robot-as-a-Platform ecosystem</li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--bottom">Curated app stores</li>
      </ul>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-6 col-start-large-7">
          <p>
            <a href="/robotics"
               aria-label="Learn more about robotics"
               class="p-button is-dark">Learn more</a>
            <a href="/contact-us"
               aria-label="Contact us about robotics"
               class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
          </p>
        </div>
      </div>
    </section>

    <section class="p-section--deep">
      <div class="u-fixed-width">
        <div class="u-vertically-center u-align--center p-image-container--cinematic"
             style="background: rgba(0, 0, 0, 0.15)">
          <img src="https://assets.ubuntu.com/v1/6d657910-Multi-cloud%20Applications%C2%A0%C2%A0Beyond%20PAAS.png"
               alt=""
               loading="lazy" 
               />
        </div>
        <hr class="p-rule" />
        <div class="p-section--shallow">
          <h2 class="p-heading--1 u-no-margin--bottom">Multi-cloud applications&nbsp;&ndash;&nbsp;beyond PAAS</h2>
          <p class="p-heading--2">
            <a href="https://juju.is/">Universal model-driven operators for classic</a> and <a href="https://jaas.ai/kubernetes">Kubernetes estate</a>.
          </p>
          <div class="p-logo-section--dense">
            <div class="p-logo-section__items landing-logos u-no-padding">
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/70b63088-Panasonic_logo.png"
                     alt="Panasonic"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/9eff2c35-scania-logo.png"
                     alt="Scania"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/84772462-sbi-bits-logo.png"
                     alt="SBI BTS"
                     class="p-logo-section__logo" />
              </div>
              <div class="p-logo-section__item">
                <img src="https://assets.ubuntu.com/v1/e31ed5d5-swissquote-logo.png"
                     alt="Swissquote"
                     class="p-logo-section__logo" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <ul class="row p-list--divided is-homepage u-no-margin--bottom">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Operate smoothly across public and private cloud</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Reusable integration code as open source packages</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Python Operator Framework for rapid development</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Bring the K8s operator pattern to classic workloads</p>
        </li>
      </ul>
      <ul class="row p-list--divided is-homepage">
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>Lifecycle management and Day 2 operations</p>
        </li>
        <li class="p-list__item is-ticked col-medium-3 col-3 u-no-padding--top u-no-padding--bottom">
          <p>
            <a href="https://jaas.ai/store">Open collection</a> of community-driven operators
          </p>
        </li>
      </ul>

      <div class="row">
        <hr class="p-rule--muted" />
        <div class="col-6 col-start-large-7">
          <p>
            <a href="https://juju.is" class="p-button is-dark">Learn more about universal operators</a>
          </p>
        </div>
      </div>
    </section>

    {% block footer_content %}
      {# include "ubuntu/takeovers/_footer_homepage.html" #}
    {% endblock footer_content %}

    <script type="module">
      const testTakeover = document.getElementById('test-takeover');
      const mainTakeover = document.getElementById('takeover');

      const getCookie = () => document.cookie.match(new RegExp('(^| )' + "control_or_variant" + '=([^;]+)'));
      // Switch for turning takeover switching on and off on demand
      const takeoverSwitch = false;
      if (!takeoverSwitch) document.cookie = 'control_or_variant=;';
      else {
        // check if user doesn't already have a group
        if (!getCookie()) {
          // randomly assign to 'control' or 'variant' group
          const group = Math.random() > 0.5 ?
            "control" :
            "variant";

          // store group as cookie for 365 days
          document.cookie = 'control_or_variant=' + group + ';max-age=31536000;';

          // send group info in GA event
          dataLayer.push({
            event: "test",
            test_type: "element visibility",
            control_or_variant: group,
          });
        }
      }

      if (getCookie()?.[2] === 'variant') {
        testTakeover.hidden = false;
        mainTakeover.hidden = true;
      } else {
        testTakeover.hidden = true;
        mainTakeover.hidden = false;
      }

      // get the users language and remove any extra detail suffix (e.g. -gb)
      var primaryParentLanguage = getPrimaryParentLanguage();

      // get notices matching the user language
      var notices = document.querySelectorAll(".notice[lang=" + primaryParentLanguage + "]");

      // display only one matching notice
      if (notices.length > 0) {
        notices[0].classList.remove("u-hide")
      }

      var baseTakeover = document.getElementById('takeover');
      let takeoverAnimation;
      if (getCookie()?.[2] === 'variant') {
        takeoverAnimation = document.getElementById("test-takeover-animaition");
      } else {
        takeoverAnimation = document.getElementById("takeover-animaition");
      }

      if (window.localStorage && baseTakeover) {
        /**
         * Choose a takeover
         * ===
         *
         * From the list of provided takeovers from /.takeovers.json,
         * choose one (that matches the client's language), and replace the
         * base template with it.
         */

        var xhr = new XMLHttpRequest();
        if (window.ActiveXObject) {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        var fetchUserCountry = new XMLHttpRequest();
        if (window.ActiveXObject) {
          fetchUserCountry = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xhr.onreadystatechange = function() {
          if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              var takeovers = JSON.parse(xhr.responseText);

              // Get the selected takeovers based on the primary language
              if (
                fetchUserCountry.readyState == XMLHttpRequest.DONE &&
                fetchUserCountry.status == 200
              ) {
                var userCountry = JSON.parse(fetchUserCountry.responseText).country_code;
                var selectedTakeovers = takeovers.filter(function(item) {
                  if (item.target_country && item.target_country == userCountry) {
                    return true;
                  } else if (item.lang === primaryParentLanguage || item.lang === "") {
                    return true;
                  } else {
                    return false;
                  }
                });
              } else {
                var selectedTakeovers = takeovers.filter(function(item) {
                  if (item.lang === primaryParentLanguage || item.lang === "") {
                    return true;
                  } else {
                    return false;
                  }
                });
              }

              if (selectedTakeovers && selectedTakeovers.length > 0) {
                var selectedIndex = null;

                if (window.localStorage.getItem("selected_takeover_index") !== null) {
                  // If we previously visited a takeover, increment the number to show the next takeover
                  var nextIndex =
                    parseInt(window.localStorage.getItem("selected_takeover_index")) + 1;
                  selectedIndex = nextIndex < selectedTakeovers.length ? nextIndex : 0;
                } else {
                  // Otherwise, randomly choose one of the takeovers and store it for next time
                  selectedIndex = Math.floor(Math.random() * selectedTakeovers.length);
                }
                showTakeover(selectedTakeovers, selectedIndex);

                // Store the current takeover index
                localStorage.setItem("selected_takeover_index", selectedIndex);
              }


            } else {
              takeoverAnimation.className = takeoverAnimation.className.replace(" is-loading", "");
              takeoverAnimation.className += " is-loaded";
            }
          }
        };

        xhr.open("GET", "/takeovers.json", true);
        xhr.send();
        fetchUserCountry.open("GET", "/user-country.json", true);
        fetchUserCountry.send();
      }

      function showTakeover(takeovers, index) {
        // Default parameter
        index = typeof index !== 'undefined' ? index : 0;

        // Get HTML elements for the correct takeover
        let takeover, title, subtitle, image, primaryUrl, secondaryUrl;
        if (getCookie()?.[2] === 'variant') {
          takeover = document.getElementById("test-takeover");
          title = document.getElementById("test-takeover-title");
          subtitle = document.getElementById("test-takeover-subtitle");
          image = document.getElementById("test-takeover-image");
          primaryUrl = document.getElementById("test-takeover-primary-url");
        } else {
          takeover = document.getElementById("takeover");
          title = document.getElementById("takeover-title");
          subtitle = document.getElementById("takeover-subtitle");
          image = document.getElementById("takeover-image");
          primaryUrl = document.getElementById("takeover-primary-url");
          secondaryUrl = document.getElementById("takeover-secondary-url");
        }

        // Set values to homepage takeover
        var selectedTakeover = takeovers[index];

        takeover.className = "";
        takeover.removeAttribute("style");

        // Add takeover classes
        var classNameString = "js-takeover p-takeover--" + selectedTakeover.class;
        takeover.className += classNameString;

        // Set language attributes
        if (selectedTakeover.lang) {
          takeover.setAttribute("lang", selectedTakeover.lang);
        }
        if (selectedTakeover.lang_skip) {
          takeover.setAttribute("lang-skip", selectedTakeover.lang_skip);
        }

        // Set takeover content
        if (title.textContent.length > 80 || subtitle.textContent.length > 80) {
          title.classList.remove("u-no-margin--bottom")
          subtitle.classList.remove("p-heading--2")
        }

        title.textContent = selectedTakeover.title;
        subtitle.textContent = selectedTakeover.subtitle;

        image.src = selectedTakeover.image;
        image.onload = function() {
          // Remove animation delay
          if (takeoverAnimation) {
            takeoverAnimation.className = takeoverAnimation.className.replace(" is-loading", "");
            takeoverAnimation.className += " is-loaded";
          }
        }

        if (image.getAttribute("src") === "") {
          takeoverAnimation.className = takeoverAnimation.className.replace(" is-loading", "");
          takeoverAnimation.className += " is-loaded";
        }

        image.removeAttribute("style");
        image.width = selectedTakeover.image_width;
        image.height = selectedTakeover.image_height;

        if (selectedTakeover.primary_url && selectedTakeover.primary_cta) {
          primaryUrl.href = selectedTakeover.primary_url;
          primaryUrl.textContent = selectedTakeover.primary_cta;
        } else {
          primaryUrl.remove();
        }

        if (secondaryUrl && selectedTakeover.secondary_url && selectedTakeover.secondary_url !== "") {
          secondaryUrl.href = selectedTakeover.secondary_url;
          secondaryUrl.innerHTML = selectedTakeover.secondary_cta + "&nbsp;&rsaquo;";
        } else {
          secondaryUrl?.remove();
        }

        dataLayer.push({
          event: "NonInteractiveGAEvent",
          eventCategory: "www.ubuntu.com-impression-takeover",
          eventAction: "from:" + window.location.href + " to:" + selectedTakeover.primary_url,
          eventLabel: selectedTakeover.primary_cta,
          eventValue: undefined,
        });
      }
    </script>

    <!-- Set default Marketo information for contact form below-->
    <div class="u-hide"
         id="contact-form-container"
         data-form-location="/shared/forms/interactive/general"
         data-form-id="1257"
         data-lp-id="2154"
         data-return-url="https://ubuntu.com/contact-us/form/thank-you"
         data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>

  {% endblock content %}
{% endblock outer_content %}