index.html

---
layout: default
title: Flyte
---

<section class="mb-10 sm:mb-16 md:mb-20 lg:mb-32">
  <!--hero-->
  <div
    class="my-8 sm:my-16 md:my-20 lg:my-32 container mx-auto px-4 flex items-center"
  >
    <!--wrapper-->
    <div>
      <h1
        id="hero-title"
        class="text-white text-4xl sm:text-5xl md:text-6xl leading-tighter font-body font-regular text-left text-center lg:w-5/6 mx-auto opacity-0"
      >
        The Workflow Automation Platform for Complex, Mission-Critical Data and
        Machine Learning Processes at Scale
      </h1>
      <div
        class="flex flex-wrap md:flex-no-wrap justify-center items-center mt-16 md:mt-24 mb-10"
      >
        <a
          href="{{ site.getstarted }}"
          class="btn mr-6 mb-4 md:mr-12 text-md sm:text-lg border-2 border-white bg-white text-purple-darkest hover:bg-pink hover:border-pink rounded"
          >Get Started</a
        >
        <a
          href="{{ site.contribute }}"
          class="btn mr-6 mb-4 md:mr-12 text-md sm:text-lg border-2 border-pink text-white hover:border-white rounded"
          >Contribute</a
        >
        <div
          class="mb-4 font-body font-semibold py-2 text-md sm:text-lg md:text-xl text-white"
        >
          <a
            href="{{ site.learnmore }}"
            class="border-b-2 border-pink hover:border-white pb-1"
            >Learn more</a
          >
        </div>
      </div>
    </div>
  </div>

  <!--Feature Showcase Carousel-->
  <div class="row ml-10 mr-10 md:mx-24 sm:mb-24 sm:mt-12 lg:mx-48">
    <div id="feature-carousel-container">
      <div id="feature-carousel-content" class="md:feature-video-nowrap">
        <div id="feature-carousel-navigation">
          <ol>
            <li data-index="1" id="feature-1">1. Write your code</li>
            <li data-index="2" id="feature-2">2. Test Locally</li>
            <li data-index="3" id="feature-3">3. Ship to cluster</li>
            <li data-index="4" id="feature-4">4. Execute & observe</li>
            <li data-index="5" id="feature-5">5. Retrieve & interact</li>
          </ol>
        </div>
        <div id="feature-carousel" class="owl-carousel owl-theme">
          <section class="feature-slide">
            <div class="feature-slide-video">
              <video
                src="/assets/video/flyte_e2e.mp4"
                id="feature-video-index-1"
                class="feature-video"
                width="600"
                height="338"
                autoplay
                loop
                muted
              />
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <!--End Feature Showcase Carousel-->

  <!--Carousel-->
  <div class="row ml-10 mr-10 md:mx-24 lg:mx-48 mt-10 carousel">
    <div class="large-12 columns">
      <div id="media-carousel" class="owl-carousel owl-theme">
        <!--cards-->
        {% for carousel_item in site.data.carousel %}
        <a href="{{ carousel_item.url }}" target="_blank">
          <div class="max-w-sm w-full lg:max-w-full lg:flex">
            <div
              class="bg-carousel shadow-inner rounded-xl flex flex-col leading-normal md:h-96 sm:h-80 h-80 w-full"
            >
              <img
                src="{{ carousel_item.image }}"
                class="object-cover p-1 h-48 sm:h-48 md:h-52 rounded-xl"
              />
              <div class="p-4">
                <span class="badge">{{ carousel_item.badge }}</span>
              </div>
              <div
                class="font-bold text-sm sm:text-sm md:text-lg lg:text-xl text-white card-title px-4"
              >
                 {{ carousel_item.title }}
              </div>
            </div>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
  <!--Carousel End-->
</section>

<!--/hero-->
<section class="my-20 md:my-32 lg:my-44">
  <!--about-->
  <div class="container mx-auto px-4 text-center lg:w-9/12">
    <!--wrapper-->
    <div
      class="text-2xl sm:text-4xl md:text-5xl text-white font-body font-medium leading-tight mb-4 sm:mb-6 md:mb-8 lg:mb-12"
    >
      Flyte makes it easy to create concurrent, scalable, and maintainable
      workflows for machine learning and data processing.
    </div>
    <div
      class="text-body md:text-xl text-white font-body font-regular leading-5"
    >
      Flyte is used in production at Lyft, Spotify, Freenome and others. At
      Lyft, Flyte has been serving production model training and data processing
      for over four years, becoming the de-facto platform for teams like
      Pricing, Locations, ETA, Mapping, Autonomous, and more. In fact, Flyte
      manages over 10,000 unique workflows at Lyft, totaling over 1,000,000
      executions every month, 20 million tasks, and 40 million containers.
    </div>
  </div>
</section>
<!--/about-->
<section class="pb-8 sm:pb-16 md:pb-20 lg:pb-32 bg-white">
  <!-- <section class="bg-white"> -->
  <!--differentiators-->
  <div class="container mx-auto max-w-full">
    <!--wrapper-->
    <div
      class="bg-white mx-auto text-black font-body text-left w-full py-4 md:py-10 rounded"
      style="background: #f7f5fc"
    >
      <!--item-1-->
      <div class="md:flex md:items-center relative js-show-on-scroll transform">
        <div class="md:w-5/12 py-10 sm:py-20 items-center">
          <div
            class="flyte-metrics ml-auto mr-auto md:pl-5 lg:pl-0"
            width="350"
            height="200"
            alt="Flyte Metrics"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 490.60366 164.00981"
              width="100%"
              height="100"
              class="px-28 md:px-14 sm:px-10"
            >
              <defs>
                <style>
                  .cls-2 {
                    fill: #793bee;
                  }
                </style>
              </defs>
              <polygon
                class="cls-2"
                points="34.569 59.399 34.569 40.382 25.019 40.382 25.019 68.948 53.586 68.948 53.586 59.399 34.569 59.399"
              />
              <polygon
                class="cls-2"
                points="72.52 21.365 25.019 21.365 25.019 35.607 34.487 35.607 34.487 30.914 63.053 30.914 63.053 59.399 58.278 59.399 58.278 68.948 72.52 68.948 72.52 21.365"
              />
              <path
                class="cls-2"
                d="M85.116,21.36486H99.76972V56.7642h21.075v12.184H85.116Z"
              />
              <path
                class="cls-2"
                d="M127.10131,21.36486h36.79885v12.184H141.755v5.92733h19.01686V50.83687H141.755V68.94816H127.10131V21.36486Z"
              />
              <path
                class="cls-2"
                d="M192.13731,21.52951h5.02177l18.60524,47.41864H210.9072l-5.76268-14.736h-21.5689l-5.68035,14.736h-4.85711Zm-7.1622,28.81342h18.60523l-9.138-24.2856Z"
              />
              <path
                class="cls-2"
                d="M222.02093,21.52951h4.52782V68.94815h-4.52782Z"
              />
              <path
                class="cls-2"
                d="M278.98528,57.238a12.05807,12.05807,0,0,0,1.57413-4.338,30.42345,30.42345,0,0,0,.35376-4.659H284.769a36.6524,36.6524,0,0,1-.80542,6.26592,17.52425,17.52425,0,0,1-2.414,5.81536l7.52466,8.86851h-5.20742l-4.506-5.46216a18.33967,18.33967,0,0,1-6.504,5.14066,19.84521,19.84521,0,0,1-8.11092,1.54242,15.91043,15.91043,0,0,1-5.6663-.9962,14.09085,14.09085,0,0,1-4.60391-2.79505,12.89817,12.89817,0,0,1-3.08985-4.338,13.711,13.711,0,0,1-1.12636-5.62291,12.36736,12.36736,0,0,1,.89942-4.75575,15.1168,15.1168,0,0,1,2.41014-3.98427,17.79324,17.79324,0,0,1,3.502-3.18107,27.478,27.478,0,0,1,4.2418-2.40958,36.204,36.204,0,0,1-3.40634-4.72349,10.62113,10.62113,0,0,1-1.54187-5.62292,8.71409,8.71409,0,0,1,.83546-3.888,8.44161,8.44161,0,0,1,2.24883-2.85957,9.56964,9.56964,0,0,1,3.30956-1.73544,13.69144,13.69144,0,0,1,4.01653-.57792,10.6456,10.6456,0,0,1,3.92029.70641,9.455,9.455,0,0,1,3.08429,1.92845,8.67977,8.67977,0,0,1,2.69938,6.29762,10.03737,10.03737,0,0,1-.73923,4.01652,10.28983,10.28983,0,0,1-1.99185,3.02032,16.3675,16.3675,0,0,1-2.9241,2.40958q-1.672,1.09383-3.47031,2.18487ZM263.62615,45.09215a19.26174,19.26174,0,0,0-3.56654,2.15261,15.20624,15.20624,0,0,0-2.82787,2.7956,13.75913,13.75913,0,0,0-1.89562,3.30956,9.68976,9.68976,0,0,0-.707,3.63106,10.21244,10.21244,0,0,0,.8032,4.145,9.28352,9.28352,0,0,0,2.18542,3.11655,9.71761,9.71761,0,0,0,3.2773,1.99186,11.74861,11.74861,0,0,0,4.145.707,12.62829,12.62829,0,0,0,6.58686-1.70261,20.26065,20.26065,0,0,0,5.17292-4.46652Zm8.2255-10.60338a5.80232,5.80232,0,0,0-.3532-5.36594,5.78653,5.78653,0,0,0-5.109-2.73163,6.89662,6.89662,0,0,0-2.31335.386,6.49328,6.49328,0,0,0-1.96015,1.09243,5.22117,5.22117,0,0,0-1.38167,1.73488,5.09839,5.09839,0,0,0-.514,2.31335,5.82886,5.82886,0,0,0,.514,2.24939,15.68407,15.68407,0,0,0,1.25318,2.37788q.73755,1.15639,1.57412,2.21712.83434,1.06045,1.47846,1.83111,1.92734-1.15641,3.88748-2.53807A8.47009,8.47009,0,0,0,271.85165,34.48877Z"
              />
              <path
                class="cls-2"
                d="M310.34489,69.19075V22.92144H326.154q1.92733,0,3.79126.09623a25.943,25.943,0,0,1,3.66276.45,18.373,18.373,0,0,1,3.50257,1.06017,16.52323,16.52323,0,0,1,3.30956,1.86337,14.07682,14.07682,0,0,1,3.79181,4.081,23.73642,23.73642,0,0,1,2.34562,5.0767,29.88076,29.88076,0,0,1,1.22092,5.3982,39.67343,39.67343,0,0,1,.3532,5.04443,38.77183,38.77183,0,0,1-.28924,4.69124,30.93584,30.93584,0,0,1-.93168,4.659,24.0069,24.0069,0,0,1-1.70317,4.37029,16.816,16.816,0,0,1-2.66656,3.82352,14.23539,14.23539,0,0,1-3.50257,2.89183,18.1158,18.1158,0,0,1-3.98426,1.70317,23.82325,23.82325,0,0,1-4.338.83545q-2.25023.22528-4.56219.22472Zm4.37029-3.72729h10.47489a41.33022,41.33022,0,0,0,5.55839-.3532,16.08068,16.08068,0,0,0,5.302-1.7677,10.4606,10.4606,0,0,0,3.79125-3.1488,17.32,17.32,0,0,0,2.34562-4.33747,23.25752,23.25752,0,0,0,1.22092-4.91651,36.37973,36.37973,0,0,0,.35376-4.94821,41.69317,41.69317,0,0,0-.3215-5.10895,20.96543,20.96543,0,0,0-1.22092-4.94821,16.49333,16.49333,0,0,0-2.44184-4.30577,12.2524,12.2524,0,0,0-3.98427-3.245,13.65086,13.65086,0,0,0-4.88424-1.41394,50.76321,50.76321,0,0,0-5.71914-.32094H314.71518Z"
              />
              <path
                class="cls-2"
                d="M350.89394,69.19075l18.18645-46.26931h4.94821l17.737,46.26931h-4.49878l-5.33367-14.52368H360.85488l-5.46272,14.52368Zm11.43884-18.251h18.12248l-9.06152-24.291Z"
              />
              <path
                class="cls-2"
                d="M392.215,22.92144h33.67352v3.72729H411.23694v42.542h-4.37028v-42.542H392.215Z"
              />
              <path
                class="cls-2"
                d="M424.66764,69.19075l18.18644-46.26931h4.94821l17.737,46.26931h-4.49877l-5.33368-14.52368H434.62858l-5.46272,14.52368Zm11.43883-18.251H454.229l-9.06151-24.291Z"
              />
              <rect
                class="cls-2"
                x="25.01963"
                y="89.73152"
                width="440.51953"
                height="2.10352"
              />
              <path
                class="cls-2"
                d="M25.2202,110.17392H29.146v28.6914H25.2202Z"
              />
              <path
                class="cls-2"
                d="M35.65477,110.17392h4.57812l14.30859,23.18164V110.17392h3.71094v28.6914H53.88621L39.3657,115.711v23.15429H35.65477Z"
              />
              <path
                class="cls-2"
                d="M85.03465,112.26376a10.18151,10.18151,0,0,1,3.30078,6.52344H84.54637a7.21683,7.21683,0,0,0-7.82617-6.01563,8.43627,8.43627,0,0,0-6.72266,2.98047q-2.56055,2.98242-2.56055,9.13867a13.45347,13.45347,0,0,0,2.3125,8.18165,8.02027,8.02027,0,0,0,6.89649,3.13671,7.251,7.251,0,0,0,6.42773-3.30078A12.70489,12.70489,0,0,0,84.8198,128.338h3.78907a13.02683,13.02683,0,0,1-3.32032,7.59766,11.74968,11.74968,0,0,1-9.11328,3.6914,11.94007,11.94007,0,0,1-8.30175-3.02929q-4.42091-4.00782-4.4209-12.3711a15.93592,15.93592,0,0,1,3.32031-10.418,12.06682,12.06682,0,0,1,9.90332-4.416Q82.061,109.39267,85.03465,112.26376Z"
              />
              <path
                class="cls-2"
                d="M98.02684,110.17392v17.73437a10.36363,10.36363,0,0,0,1.18164,5.19532q1.752,3.123,5.90625,3.125,4.98047,0,6.77148-3.37891a10.67979,10.67979,0,0,0,.96484-4.94141V110.17392h3.92579V126.2872a18.59028,18.59028,0,0,1-1.43067,8.14453q-2.62645,5.19434-9.917,5.19531-7.29053,0-9.89746-5.19531a18.59028,18.59028,0,0,1-1.43067-8.14453V110.17392Z"
              />
              <path
                class="cls-2"
                d="M122.81687,110.17392h12.40528q5.07274,0,7.21582,3.00781a6.91938,6.91938,0,0,1,1.25781,4.10156,6.46418,6.46418,0,0,1-1.543,4.45313,7.55173,7.55173,0,0,1-2.30469,1.67969,9.72882,9.72882,0,0,1,3.30079,1.89453,6.87314,6.87314,0,0,1,1.93359,5.17578,7.97215,7.97215,0,0,1-1.749,5.01953q-2.61329,3.35742-8.3125,3.35937H122.81687ZM133.77,122.30282a8.90067,8.90067,0,0,0,3.86816-.68359,3.93224,3.93224,0,0,0,2.1709-3.86719,3.72391,3.72391,0,0,0-2.30859-3.78906,10.47055,10.47055,0,0,0-3.86914-.54687h-7.00586v8.88671Zm1.31348,13.24219q3.60791,0,5.14648-2.07031a5.18465,5.18465,0,0,0,.96582-3.16406,4.20776,4.20776,0,0,0-2.81933-4.25782,10.75259,10.75259,0,0,0-3.9629-.60546h-7.78808V135.545Z"
              />
              <path
                class="cls-2"
                d="M158.13426,110.17392h4.39453l10.41016,28.6914h-4.25782l-2.91015-8.59375H154.42332l-3.10547,8.59375h-3.98437Zm6.38672,16.93359-4.35547-12.67578-4.62891,12.67578Z"
              />
              <path
                class="cls-2"
                d="M194.58445,110.17392v3.418h-9.668v25.27343H180.9907V113.59189h-9.668v-3.418Z"
              />
              <path
                class="cls-2"
                d="M199.23777,110.17392h3.92578v28.6914h-3.92578Z"
              />
              <path
                class="cls-2"
                d="M233.30418,114.27548a15.82015,15.82015,0,0,1,2.85156,9.74609,17.05687,17.05687,0,0,1-3.26172,10.6836q-3.82763,4.998-10.918,5-6.62109,0-10.41015-4.375a16.518,16.518,0,0,1-3.37891-10.66406,16.96073,16.96073,0,0,1,2.89063-9.96094q3.71045-5.31445,10.97656-5.3125Q229.65233,109.39267,233.30418,114.27548Zm-3.42773,18.28711a15.68652,15.68652,0,0,0,2.29492-8.47266,12.09092,12.09092,0,0,0-2.64649-8.15234,9.03128,9.03128,0,0,0-7.23633-3.08789,9.42044,9.42044,0,0,0-7.26562,3.05859q-2.8125,3.05861-2.8125,9.02149a13.18073,13.18073,0,0,0,2.41211,8.043q2.4126,3.27539,7.82226,3.27539Q227.582,136.24814,229.87645,132.56259Z"
              />
              <path
                class="cls-2"
                d="M240.98484,110.17392H245.563l14.30859,23.18164V110.17392h3.71094v28.6914h-4.36621L244.69578,115.711v23.15429h-3.71094Z"
              />
              <path
                class="cls-2"
                d="M281.75633,110.17392H294.5952a8.70977,8.70977,0,0,1,6.14843,2.1582,7.8331,7.8331,0,0,1,2.34082,6.06445,8.82177,8.82177,0,0,1-2.08886,5.84961q-2.08887,2.49024-6.39356,2.49024h-8.959v12.1289h-3.88672Zm15.07519,3.94531a8.33987,8.33987,0,0,0-3.50976-.60547h-7.67871v9.94141h7.67871a7.29882,7.29882,0,0,0,4.21777-1.11328q1.61865-1.11329,1.61914-3.92578Q299.15867,115.252,296.83152,114.11923Z"
              />
              <path
                class="cls-2"
                d="M308.73387,110.17392h13.042a12.79081,12.79081,0,0,1,5.3125.957q3.96972,1.834,3.96973,6.77734a7.05765,7.05765,0,0,1-4.043,6.85547,5.86165,5.86165,0,0,1,2.52929,1.79688,6.45276,6.45276,0,0,1,.94727,3.61328l.13672,3.84765a11.81649,11.81649,0,0,0,.27344,2.44141,2.4065,2.4065,0,0,0,1.25,1.75781v.64453h-4.76563a3.60435,3.60435,0,0,1-.3125-.957,18.31768,18.31768,0,0,1-.19531-2.26562l-.23438-4.78516q-.13329-2.8125-2.03027-3.76953a8.18713,8.18713,0,0,0-3.39746-.52734h-8.5957v12.30468h-3.88672Zm12.624,13.14453a7.1765,7.1765,0,0,0,4.207-1.09375q1.54835-1.0957,1.54785-3.94531,0-3.0674-2.165-4.17969a6.90905,6.90905,0,0,0-3.09668-.58594h-9.23046v9.80469Z"
              />
              <path
                class="cls-2"
                d="M360.98387,114.27548a15.82021,15.82021,0,0,1,2.85156,9.74609,17.05687,17.05687,0,0,1-3.26172,10.6836q-3.82764,4.998-10.918,5-6.62109,0-10.41015-4.375a16.518,16.518,0,0,1-3.37891-10.66406,16.96079,16.96079,0,0,1,2.89062-9.96094q3.71046-5.31445,10.97657-5.3125Q357.332,109.39267,360.98387,114.27548Zm-3.42774,18.28711a15.68643,15.68643,0,0,0,2.29492-8.47266,12.09091,12.09091,0,0,0-2.64648-8.15234,9.03128,9.03128,0,0,0-7.23633-3.08789,9.42044,9.42044,0,0,0-7.26562,3.05859q-2.8125,3.05861-2.8125,9.02149a13.18073,13.18073,0,0,0,2.41211,8.043q2.41258,3.27539,7.82226,3.27539Q355.26171,136.24814,357.55613,132.56259Z"
              />
              <path
                class="cls-2"
                d="M382.76609,130.31064a12.14137,12.14137,0,0,1-1.07519,5.64453q-1.99512,3.67089-7.58789,3.67187a8.82369,8.82369,0,0,1-5.51367-1.748q-2.28809-1.749-2.28809-6.22071v-2.05078h3.65234v2.05078a5.17671,5.17671,0,0,0,1.04688,3.52539,4.14139,4.14139,0,0,0,3.25976,1.18164q3.11133,0,4.07129-2.1289a13.85275,13.85275,0,0,0,.58692-4.94141V110.17392h3.84765Z"
              />
              <path
                class="cls-2"
                d="M389.23582,110.17392h20.82031v3.51562H393.02488v8.71094h15.74219v3.32031H393.02488v9.72657H410.3491v3.418H389.23582Z"
              />
              <path
                class="cls-2"
                d="M436.03758,112.26376a10.18151,10.18151,0,0,1,3.30078,6.52344H435.5493a7.21683,7.21683,0,0,0-7.82618-6.01563,8.43626,8.43626,0,0,0-6.72265,2.98047q-2.56055,2.98242-2.56055,9.13867a13.45347,13.45347,0,0,0,2.3125,8.18165,8.02027,8.02027,0,0,0,6.89649,3.13671,7.251,7.251,0,0,0,6.42773-3.30078,12.70489,12.70489,0,0,0,1.74609-4.57031h3.78907a13.02683,13.02683,0,0,1-3.32032,7.59766,11.74968,11.74968,0,0,1-9.11328,3.6914,11.94007,11.94007,0,0,1-8.30175-3.02929q-4.42091-4.00782-4.4209-12.3711a15.93592,15.93592,0,0,1,3.32031-10.418,12.06682,12.06682,0,0,1,9.90332-4.416Q433.06394,109.39267,436.03758,112.26376Z"
              />
              <path
                class="cls-2"
                d="M465.6909,110.17392v3.418h-9.668v25.27343h-3.92578V113.59189h-9.668v-3.418Z"
              />
            </svg>
            <br />
            <div class="text-center">
              <span class="metric" id="metric-users">0</span
              ><span class="metric">+</span> Users
            </div>
            <div class="text-center">
              <span class="metric" id="metric-executions">1,000,000</span
              ><span class="metric">+</span> Executions
            </div>
            <div class="text-center">
              <span class="metric" id="metric-tasks">20,000,000</span
              ><span class="metric">+</span> Tasks
            </div>
            <div class="text-center">
              <span class="metric" id="metric-containers">40,000,000</span
              ><span class="metric">+</span> Containers
            </div>
          </div>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pl-0 lg:pl-0 xl:pl-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Battle-Tested and Truly Open-Source
          </h3>
          <div>
            <p><span class="tagline">Built for Resiliency</span></p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Flyte has been battle-tested at Lyft, Spotify, Freenome, and
              others. It is entirely open-source with an
              <b>Apache 2.0 license under the Linux Foundation</b> with a
              cross-industry overseeing committee.
            </p>
          </div>
        </div>
      </div>
      <!--item-2-->
      <div
        class="md:flex md:items-center md:flex-row-reverse relative js-show-on-scroll"
      >
        <div class="illustration md:w-7/12 text-center">
          <div class="flex flex-wrap" id="tabs-id">
            <div class="w-full px-3 py-10 sm:py-20">
              <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
                <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
                  <a
                    class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white code-option-bg"
                    onclick="changeActiveTab(event,'tab-profile')"
                  >
                    <i class="fa-brands fa-python text-base mr-1"></i> Python
                  </a>
                </li>
                <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
                  <a
                    class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal bg-white"
                    onclick="changeActiveTab(event,'tab-settings')"
                  >
                    <i class="fa-brands fa-java mr-1"></i> Java
                  </a>
                </li>
                <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
                  <a
                    class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal bg-white"
                    onclick="changeActiveTab(event,'tab-options')"
                  >
                    <i class="fa-solid fa-code mr-1"></i> Scala
                  </a>
                </li>
              </ul>
              <div
                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 rounded"
                style="background: #f7f5fc"
              >
                <div class="px-4 py-5 flex-auto justify-center align-middle">
                  <div class="tab-content tab-space inline-block">
                    <div
                      class="block iframe-block overflow-auto"
                      id="tab-profile"
                    >
                      <iframe
                        src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=one-light&wt=sharp&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=0&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=import%2520pandas%2520as%2520pd%250Afrom%2520flytekit%2520import%2520Resources%252C%2520task%250A%250A%250A%2540task%28limits%253DResources%28cpu%253D%25222%2522%252C%2520mem%253D%2522150Mi%2522%29%29%250Adef%2520total_pay%28hourly_pay%253A%2520float%252C%2520hours_worked%253A%2520int%252C%2520df%253A%2520pd.DataFrame%29%2520-%253E%2520pd.DataFrame%253A%250A%2520%2520%2520%2520return%2520df.assign%28total_pay%253Dhourly_pay%2520*%2520hours_worked%29"
                        style="height: 220px; border: 0; transform: scale(1)"
                        class="code-block-width"
                        sandbox="allow-scripts allow-same-origin"
                        title="Flyte code snippets"
                      >
                      </iframe>
                    </div>
                    <div
                      class="hidden iframe-block overflow-auto"
                      id="tab-settings"
                    >
                      <iframe
                        src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=one-light&wt=sharp&l=text%2Fx-java&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=0&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=import%2520com.google.auto.service.AutoService%253B%250Aimport%2520com.google.auto.value.AutoValue%253B%250Aimport%2520org.flyte.flytekit.SdkRunnableTask%253B%250Aimport%2520org.flyte.flytekit.jackson.JacksonSdkType%253B%250A%250A%2540AutoService%28SdkRunnableTask.class%29%250Apublic%2520class%2520TotalPayTask%2520extends%2520SdkRunnableTask%253CTotalPayTask.Input%252C%2520TotalPayTask.Output%253E%2520%257B%250A%2520%2520public%2520TotalPayTask%28%29%2520%257B%250A%2520%2520%2520%2520super%28JacksonSdkType.of%28Input.class%29%252C%2520JacksonSdkType.of%28Output.class%29%29%253B%250A%2520%2520%257D%250A%2520%2520%2540AutoValue%250A%2520%2520public%2520abstract%2520static%2520class%2520Input%2520%257B%250A%2520%2520%2520%2520public%2520abstract%2520double%2520hourlyPay%28%29%253B%250A%2520%2520%2520%2520public%2520abstract%2520long%2520hoursWorked%28%29%253B%250A%2520%2520%257D%250A%2520%2520%2540AutoValue%250A%2520%2520public%2520abstract%2520static%2520class%2520Output%2520%257B%250A%2520%2520%2520%2520public%2520abstract%2520double%2520output%28%29%253B%250A%2520%2520%2520%2520public%2520static%2520Output%2520create%28double%2520output%29%2520%257B%250A%2520%2520%2520%2520%2520%2520return%2520new%2520AutoValue_TotalPayTask_Output%28output%29%253B%250A%2520%2520%2520%2520%257D%250A%2520%2520%257D%250A%2520%2520%2540Override%250A%2520%2520public%2520Output%2520run%28Input%2520input%29%2520%257B%250A%2520%2520%2520%2520return%2520Output.create%28input.hourlyPay%28%29%2520*%2520input.hoursWorked%28%29%29%253B%250A%2520%2520%257D%250A%257D"
                        style="height: 295px; border: 0; transform: scale(1)"
                        class="code-block-width"
                        sandbox="allow-scripts allow-same-origin"
                      >
                      </iframe>
                    </div>
                    <div
                      class="hidden iframe-block overflow-auto"
                      id="tab-options"
                    >
                      <iframe
                        src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=one-light&wt=sharp&l=text%2Fx-scala&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=0&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=import%2520org.flyte.flytekit.SdkRunnableTask%250Aimport%2520org.flyte.flytekitscala.SdkScalaType%250A%250Acase%2520class%2520TotalPayInput%28hourlyPay%253A%2520Double%252C%2520hoursWorked%253A%2520Long%29%250Acase%2520class%2520TotalPayOutput%28output%253A%2520Double%29%250A%250Aclass%2520TotalPayTask%2520extends%2520SdkRunnableTask%28SdkScalaType%255BTotalPayInput%255D%252C%2520SdkScalaType%255BTotalPayOutput%255D%29%2520%257B%250A%2520%2520def%2520run%28input%253A%2520TotalPayInput%29%253A%2520TotalPayOutput%2520%253D%2520%250A%2520%2520%2520%2520TotalPayOutput%28output%2520%253D%2520input.hourlyPay%2520%252B%2520input.hoursWorked%29%250A%257D"
                        style="height: 295px; border: 0; transform: scale(1)"
                        class="code-block-width"
                        sandbox="allow-scripts allow-same-origin"
                      >
                      </iframe>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-5/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pr-0 lg:pr-0 xl:pr-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Write Code, Not YAML!
          </h3>
          <div class="mb-4 leading-9">
            <p><span class="tagline">Leave the infrastructure to us</span></p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Configuring Machine Learning and Data workflows can get complex
              and error-prone with YAML. Flyte provides intuitive, user-friendly
              SDKs to get the workflows up and running in no time.
            </p>
          </div>
        </div>
      </div>
      <!--item-3-->
      <div class="md:flex md:items-center relative js-show-on-scroll">
        <div class="illustration md:w-5/12 text-center">
          <svg
            class="max-w-350 sm:max-w-md md:max-w-full -my-12 -mt-24 -ml-16 sm:mb-2 sm:-mt-10 sm:-ml-24 md:mt-0 md:ml-0 inline-block md:block w-full sm:w-auto sm:max-w-md md:max-w-full"
            width="500"
            height="500"
            viewBox="0 0 500 500"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            vector-effect="non-scaling-stroke"
          >
            <g class="hidden md:block">
              <path
                d="M393.893 249.068C393.926 203.126 381.287 158.077 357.387 118.937C333.486 79.7974 299.26 48.1033 258.522 27.3844C217.783 6.66551 172.13 -2.265 126.647 1.58745C81.1639 5.43989 37.6359 21.924 0.910185 49.2042L0.910167 448.932C37.636 476.185 81.1546 492.647 126.623 496.485C172.092 500.323 217.726 491.387 258.449 470.671C299.172 449.956 333.385 418.273 357.281 379.149C381.177 340.025 393.819 294.994 393.8 249.068L393.893 249.068Z"
                fill="#FFBFB6"
                fill-opacity="0.2"
              />
            </g>
            <path
              d="M269.142 438.358C359.789 438.358 433.273 364.874 433.273 274.226C433.273 183.579 359.789 110.094 269.142 110.094C178.494 110.094 105.01 183.579 105.01 274.226C105.01 364.874 178.494 438.358 269.142 438.358Z"
              fill="#D5E8FF"
            />
            <path
              opacity="0.3"
              d="M433.273 274.226C433.284 257.421 430.715 240.713 425.657 224.687C387.517 240.311 356.642 269.698 339.155 307.02C321.667 344.342 318.845 386.873 331.248 426.179C361.418 413.841 387.232 392.802 405.402 365.74C423.571 338.679 433.274 306.821 433.273 274.226Z"
              fill="url(#paint0_linear)"
            />
            <path
              d="M217.687 371C214.934 369.803 212.211 368.576 209.533 367.349C162.702 345.759 125.372 318.109 103.453 290.131"
              stroke="#373535"
              class="stroke stroke-dotted stroke-purple-black"
            />
            <path
              d="M127.287 377.553C198.087 357.534 248.044 321.162 265.61 269.633C283.968 215.77 264.263 168.416 215.891 106.668"
              stroke="#373535"
              class="stroke stroke-dotted stroke-purple-black"
            />
            <path
              opacity="0.3"
              d="M106.595 251.439C105.573 258.992 105.073 266.605 105.099 274.226C105.058 300.731 111.466 326.847 123.771 350.323C129.555 342.86 133.721 334.274 136.002 325.112C138.283 315.951 138.631 306.414 137.022 297.111C135.413 287.807 131.883 278.941 126.657 271.078C121.431 263.214 114.624 256.526 106.67 251.439H106.595Z"
              fill="url(#paint1_linear)"
            />
            <path
              d="M393.384 347.375C399.49 339.224 403.206 329.535 404.117 319.392C405.027 309.249 403.096 299.053 398.539 289.945C393.982 280.838 386.98 273.179 378.316 267.826C369.653 262.473 359.67 259.638 349.486 259.638C339.302 259.638 329.32 262.473 320.656 267.826C311.992 273.179 304.99 280.838 300.433 289.945C295.876 299.053 293.945 309.249 294.855 319.392C295.766 329.535 299.482 339.224 305.588 347.375H393.384Z"
              fill="white"
            />
            <path
              d="M393.894 347.375C393.894 332.967 405.205 321.266 419.149 321.266C433.094 321.266 444.42 332.967 444.42 347.375H393.894Z"
              fill="white"
            />
            <path
              d="M242.688 347.375C242.688 326.024 259.446 308.698 280.093 308.698C300.741 308.698 317.498 326.024 317.498 347.375H242.688Z"
              fill="white"
            />
            <path
              d="M241.731 406.654C254.671 406.654 265.161 396.164 265.161 383.224C265.161 370.283 254.671 359.793 241.731 359.793C228.791 359.793 218.301 370.283 218.301 383.224C218.301 396.164 228.791 406.654 241.731 406.654Z"
              fill="#641BF2"
            />
            <path
              opacity="0.3"
              d="M301.683 116.917C301.683 115.705 301.683 114.523 301.594 113.311C261.053 105.191 218.94 112.645 183.65 134.188C148.359 155.731 122.481 189.78 111.174 229.55C130.748 240.317 152.79 245.797 175.127 245.45C197.464 245.103 219.325 238.942 238.555 227.572C257.785 216.203 273.721 200.019 284.791 180.615C295.861 161.21 301.683 139.257 301.683 116.917Z"
              fill="url(#paint2_linear)"
            />
            <path
              d="M169.301 249.569C169.301 229.984 184.667 214.094 203.623 214.094C222.58 214.094 237.946 229.984 237.946 249.569H169.301Z"
              fill="white"
            />
            <path
              d="M278.881 249.569C278.881 229.984 294.247 214.094 313.203 214.094C332.16 214.094 347.526 229.984 347.526 249.569H278.881Z"
              fill="white"
            />
            <path
              d="M130.759 249.569C130.759 243.419 133.202 237.52 137.551 233.171C141.9 228.822 147.799 226.378 153.95 226.378C160.1 226.378 165.999 228.822 170.348 233.171C174.697 237.52 177.141 243.419 177.141 249.569H130.759Z"
              fill="white"
            />
            <path
              d="M208.65 105.89C214.41 105.89 219.079 101.221 219.079 95.4618C219.079 89.7023 214.41 85.0333 208.65 85.0333C202.891 85.0333 198.222 89.7023 198.222 95.4618C198.222 101.221 202.891 105.89 208.65 105.89Z"
              fill="#9963E5"
            />
            <path
              d="M337.982 453.177C340.783 453.177 343.054 450.907 343.054 448.105C343.054 445.304 340.783 443.033 337.982 443.033C335.181 443.033 332.91 445.304 332.91 448.105C332.91 450.907 335.181 453.177 337.982 453.177Z"
              fill="#262262"
            />
            <path
              d="M307.488 249.569C313.089 242.095 316.498 233.209 317.334 223.906C318.169 214.604 316.399 205.253 312.22 196.9C308.041 188.547 301.619 181.523 293.674 176.614C285.729 171.704 276.573 169.104 267.234 169.104C257.894 169.104 248.738 171.704 240.793 176.614C232.848 181.523 226.426 188.547 222.247 196.9C218.068 205.253 216.298 214.604 217.133 223.906C217.969 233.209 221.378 242.095 226.979 249.569H307.488Z"
              fill="white"
            />
            <path
              d="M425.658 224.688C468.314 87.6816 159.471 292.33 331.248 442.562"
              stroke="#373535"
              class="stroke stroke-dotted stroke-purple-black"
            />
            <path
              d="M132.629 182.48C108.047 190.335 90.8104 203.726 84.4965 222.234C77.4943 242.776 85.0052 266.536 103.453 290.071"
              stroke="#373535"
              class="stroke stroke-dotted stroke-purple-black"
            />
            <defs>
              <linearGradient
                id="paint0_linear"
                x1="323.647"
                y1="325.441"
                x2="433.273"
                y2="325.441"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
              <linearGradient
                id="paint1_linear"
                x1="2962.39"
                y1="17964.4"
                x2="3686.59"
                y2="17964.4"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
              <linearGradient
                id="paint2_linear"
                x1="17430.4"
                y1="13220.7"
                x2="41688"
                y2="13220.7"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pl-0 lg:pl-0 xl:pl-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Start Small, Scale Seamlessly
          </h3>
          <div class="mb-4 leading-9">
            <p>
              <span class="tagline"> Execute locally </span>
            </p>
            <p><span class="tagline">Deploy to a Kubernetes cluster</span></p>
            <p><span class="tagline">Run on demand</span></p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Flyte is a Kubernetes-native workflow automation platform to unify
              data and ML processes. The containerized, microservices-based
              architecture does not have a single point of failure and is
              resilient by design.
            </p>
          </div>
        </div>
      </div>
      <!--item-4-->
      <div
        class="md:flex md:items-center md:flex-row-reverse relative js-show-on-scroll"
      >
        <div class="illustration md:w-5/12 text-center md:text-right">
          <svg
            class="max-w-380 md:max-w-full -mb-10 -mt-24 -mr-24 sm:-mt-20 sm:mb-0 md:mt-0 md:mr-0 inline-block"
            width="507"
            height="498"
            viewBox="0 0 507 498"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            vector-effect="non-scaling-stroke"
          >
            <g class="hidden md:block">
              <path
                d="M197 194.973C196.975 231.05 206.944 266.426 225.798 297.161C244.652 327.897 271.65 352.786 303.786 369.056C335.923 385.326 371.935 392.339 407.814 389.314C443.693 386.288 478.029 373.344 507 351.921L507 38.0243C478.029 16.6229 443.7 3.69589 407.833 0.681882C371.966 -2.3321 335.967 4.6852 303.844 20.9527C271.72 37.2203 244.732 62.1 225.881 92.8232C207.031 123.546 197.059 158.908 197.074 194.973L197 194.973Z"
                fill="#9D68E4"
                fill-opacity="0.08"
              />
            </g>
            <path
              d="M221.387 446.533C317.079 446.533 394.653 368.959 394.653 273.267C394.653 177.575 317.079 100 221.387 100C125.694 100 48.1201 177.575 48.1201 273.267C48.1201 368.959 125.694 446.533 221.387 446.533Z"
              fill="#D5E8FF"
            />
            <g style="animation-delay: 2s" class="right-left">
              <path
                d="M105.744 289.238C123.992 289.239 141.881 294.302 157.423 303.862C172.965 313.423 185.551 327.106 193.781 343.392C202.011 359.678 205.563 377.927 204.041 396.111C202.52 414.294 195.985 431.699 185.163 446.391H26.2317C15.409 431.698 8.87379 414.292 7.35298 396.107C5.83217 377.922 9.38534 359.671 17.6173 343.385C25.8493 327.099 38.4374 313.415 53.9818 303.856C69.5261 294.297 87.4174 289.236 105.666 289.238H105.744Z"
                fill="#FFBFB6"
              />
            </g>
            <path
              d="M116.083 446.392C107.613 435.089 102.458 421.652 101.195 407.585C99.9311 393.518 102.609 379.377 108.928 366.746C115.247 354.114 124.958 343.492 136.973 336.068C148.988 328.644 162.833 324.712 176.956 324.712C191.08 324.712 204.925 328.644 216.94 336.068C228.955 343.492 238.666 354.114 244.985 366.746C251.304 379.377 253.982 393.518 252.718 407.585C251.454 421.652 246.299 435.089 237.83 446.392H116.083Z"
              fill="white"
            />
            <path
              d="M325.086 446.392C325.086 416.762 301.844 392.749 273.158 392.749C244.471 392.749 221.229 416.762 221.229 446.392H325.086Z"
              fill="white"
            />

            <path
              opacity="0.3"
              d="M143.101 333.708C154.177 350.546 159.826 370.374 159.289 390.521C158.751 410.669 152.053 430.168 140.095 446.392H115.327C108.851 437.444 104.401 427.192 102.288 416.351C100.176 405.509 100.451 394.337 103.094 383.612C105.738 372.887 110.686 362.867 117.595 354.248C124.504 345.63 133.208 338.621 143.101 333.708Z"
              fill="#FFBFB6"
            />
            <path
              d="M325.085 446.392H221.418C255.233 445.187 288.219 435.594 317.406 418.477C322.431 426.921 325.084 436.565 325.085 446.392Z"
              fill="#D5E8FF"
            />
            <path
              d="M137.578 446.391C137.578 426.391 121.842 410.199 102.535 410.199C83.2269 410.199 67.5068 426.407 67.5068 446.391H137.578Z"
              fill="white"
            />
            <!--<path style="mix-blend-mode:overlay" opacity="0.5" d="M105.744 289.238C123.992 289.239 141.881 294.302 157.423 303.862C172.965 313.423 185.551 327.106 193.781 343.392C202.011 359.678 205.563 377.927 204.041 396.111C202.52 414.294 195.985 431.699 185.163 446.391H26.2317C15.409 431.698 8.87379 414.292 7.35298 396.107C5.83217 377.922 9.38534 359.671 17.6173 343.385C25.8493 327.099 38.4374 313.415 53.9818 303.856C69.5261 294.297 87.4174 289.236 105.666 289.238H105.744Z" fill="url(#paint0_linear)"/>-->
            <g class="up-down">
              <path
                d="M268.672 231.881L245.069 218.128C245.069 218.128 223.637 205.744 217.012 201.291C210.387 196.838 219.655 146.295 200.914 146.295V300.348H223.731C230.702 287.885 209.49 276.429 209.49 276.429L212.307 238.018C217.547 234.698 257.626 248.011 263.464 249.742C269.302 251.472 271.048 250.308 272.779 242.912C273.331 240.875 273.231 238.716 272.495 236.738C271.758 234.76 270.422 233.062 268.672 231.881Z"
                fill="#641BF2"
              />
              <path
                d="M133.109 231.881L156.712 218.128C156.712 218.128 178.129 205.744 184.753 201.291C191.378 196.838 182.204 146.295 200.898 146.295V300.348H178.081C171.111 287.885 192.244 276.429 192.244 276.429L189.506 238.018C184.266 234.698 144.187 248.011 138.349 249.742C132.511 251.472 130.764 250.308 129.033 242.912C128.479 240.878 128.573 238.722 129.304 236.744C130.035 234.766 131.365 233.066 133.109 231.881Z"
                fill="#FFBFB6"
              />
            </g>
            <!--<g opacity="0.3">
              <path opacity="0.3" d="M133.109 231.881L156.712 218.128C156.712 218.128 178.129 205.744 184.753 201.291C191.378 196.838 182.204 146.295 200.898 146.295V300.348H178.081C171.111 287.885 192.244 276.429 192.244 276.429L189.506 238.018C184.266 234.698 144.187 248.011 138.349 249.742C132.511 251.472 130.764 250.308 129.033 242.912C128.479 240.878 128.573 238.722 129.304 236.744C130.035 234.766 131.365 233.066 133.109 231.881Z" fill="url(#paint1_linear)"/>
            </g>-->
            <path
              d="M330.089 356.761L310.923 345.573C310.923 345.573 293.472 335.486 288.075 331.851C282.678 328.217 290.152 287.052 274.92 287.052V412.544H293.52C299.184 402.395 281.907 393.064 281.907 393.064L284.173 361.797C288.437 359.09 321.089 369.932 325.857 371.348C330.625 372.764 332.025 371.805 333.441 365.778C333.894 364.113 333.814 362.348 333.213 360.731C332.612 359.114 331.52 357.726 330.089 356.761Z"
              fill="#641BF2"
            />
            <path
              d="M219.655 356.761L238.853 345.573C238.853 345.573 256.303 335.486 261.701 331.851C267.098 328.217 259.624 287.052 274.856 287.052V412.544H256.272C250.591 402.395 267.869 393.064 267.869 393.064L265.572 361.86C261.307 359.153 228.656 369.995 223.888 371.411C219.12 372.827 217.719 371.867 216.303 365.841C215.836 364.167 215.908 362.389 216.51 360.759C217.112 359.129 218.212 357.73 219.655 356.761Z"
              fill="#FFBFB6"
            />
            <path
              opacity="0.3"
              d="M219.655 356.761L238.853 345.573C238.853 345.573 256.303 335.486 261.701 331.851C267.098 328.217 259.624 287.052 274.856 287.052V412.544H256.272C250.591 402.395 267.869 393.064 267.869 393.064L265.572 361.86C261.307 359.153 228.656 369.995 223.888 371.411C219.12 372.827 217.719 371.867 216.303 365.841C215.836 364.167 215.908 362.389 216.51 360.759C217.112 359.129 218.212 357.73 219.655 356.761Z"
              fill="url(#paint2_linear)"
            />
            <g style="animation-delay: 2s" class="right-left">
              <path
                d="M239.121 454.228L224.125 445.479C224.125 445.479 210.482 437.611 206.265 434.763C202.048 431.915 207.838 399.767 195.989 399.767V497.801H210.513C214.951 489.933 201.45 482.568 201.45 482.568L203.243 458.194C206.579 456.085 232.087 464.488 235.801 465.652C239.514 466.817 240.632 466.014 241.733 461.309C242.096 460.004 242.039 458.618 241.571 457.347C241.102 456.076 240.245 454.985 239.121 454.228Z"
                fill="#641BF2"
              />
              <path
                d="M152.857 454.228L167.853 445.479C167.853 445.479 181.48 437.611 185.698 434.763C189.915 431.915 184.124 399.767 195.989 399.767V497.801H181.465C177.027 489.933 190.528 482.568 190.528 482.568L188.735 458.194C185.399 456.085 159.891 464.488 156.162 465.652C152.432 466.817 151.346 466.014 150.245 461.309C149.882 460.004 149.939 458.618 150.408 457.347C150.876 456.076 151.733 454.985 152.857 454.228Z"
                fill="#FFBFB6"
              />
            </g>
            <!--<g opacity="0.3">
              <path opacity="0.3" d="M152.857 454.228L167.853 445.479C167.853 445.479 181.48 437.611 185.698 434.763C189.915 431.915 184.124 399.767 195.989 399.767V497.801H181.465C177.027 489.933 190.528 482.568 190.528 482.568L188.735 458.194C185.399 456.085 159.891 464.488 156.162 465.652C152.432 466.817 151.346 466.014 150.245 461.309C149.882 460.004 149.939 458.618 150.408 457.347C150.876 456.076 151.733 454.985 152.857 454.228Z" fill="url(#paint3_linear)"/>
            </g>-->
            <path
              d="M17.986 312.921C27.9193 312.921 35.9719 304.869 35.9719 294.935C35.9719 285.002 27.9193 276.949 17.986 276.949C8.05258 276.949 0 285.002 0 294.935C0 304.869 8.05258 312.921 17.986 312.921Z"
              fill="#D5E8FF"
            />
            <!--<g style="mix-blend-mode:overlay" opacity="0.5">
              <path d="M75.2797 405.4C83.4315 405.4 90.0398 398.791 90.0398 390.64C90.0398 382.488 83.4315 375.879 75.2797 375.879C67.1279 375.879 60.5195 382.488 60.5195 390.64C60.5195 398.791 67.1279 405.4 75.2797 405.4Z" fill="white"/>
            </g>-->
            <path
              d="M139.119 419.027C141.5 419.027 143.431 417.097 143.431 414.715C143.431 412.334 141.5 410.404 139.119 410.404C136.738 410.404 134.808 412.334 134.808 414.715C134.808 417.097 136.738 419.027 139.119 419.027Z"
              fill="white"
            />
            <path
              d="M339.483 446.376C344.09 446.376 347.823 442.642 347.823 438.036C347.823 433.43 344.09 429.696 339.483 429.696C334.877 429.696 331.144 433.43 331.144 438.036C331.144 442.642 334.877 446.376 339.483 446.376Z"
              fill="#D5E8FF"
            />
            <path
              d="M356.823 446.375C358.831 446.375 360.458 444.748 360.458 442.74C360.458 440.733 358.831 439.105 356.823 439.105C354.816 439.105 353.188 440.733 353.188 442.74C353.188 444.748 354.816 446.375 356.823 446.375Z"
              fill="#D5E8FF"
            />
            <path
              d="M5.57015 330.215C8.31639 330.215 10.5427 327.988 10.5427 325.242C10.5427 322.496 8.31639 320.27 5.57015 320.27C2.82391 320.27 0.597656 322.496 0.597656 325.242C0.597656 327.988 2.82391 330.215 5.57015 330.215Z"
              fill="#FFBFB6"
            />
            <defs>
              <linearGradient
                id="paint0_linear"
                x1="7.08127"
                y1="367.807"
                x2="204.392"
                y2="367.807"
                gradientUnits="userSpaceOnUse"
              >
                <stop />
                <stop offset="1" stop-opacity="0" />
              </linearGradient>
              <linearGradient
                id="paint1_linear"
                x1="128.718"
                y1="223.321"
                x2="200.898"
                y2="223.321"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#E9CED2" />
                <stop offset="0.11" stop-color="#D3B1D7" />
                <stop offset="0.33" stop-color="#AC7CE1" />
                <stop offset="0.54" stop-color="#8D52E8" />
                <stop offset="0.73" stop-color="#7634EE" />
                <stop offset="0.89" stop-color="#6922F1" />
                <stop offset="1" stop-color="#641BF2" />
              </linearGradient>
              <linearGradient
                id="paint2_linear"
                x1="12618.9"
                y1="23507"
                x2="14818.4"
                y2="23507"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#E9CED2" />
                <stop offset="0.11" stop-color="#D3B1D7" />
                <stop offset="0.33" stop-color="#AC7CE1" />
                <stop offset="0.54" stop-color="#8D52E8" />
                <stop offset="0.73" stop-color="#7634EE" />
                <stop offset="0.89" stop-color="#6922F1" />
                <stop offset="1" stop-color="#641BF2" />
              </linearGradient>
              <linearGradient
                id="paint3_linear"
                x1="7909.59"
                y1="24706.3"
                x2="9252.21"
                y2="24706.3"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#E9CED2" />
                <stop offset="0.11" stop-color="#D3B1D7" />
                <stop offset="0.33" stop-color="#AC7CE1" />
                <stop offset="0.54" stop-color="#8D52E8" />
                <stop offset="0.73" stop-color="#7634EE" />
                <stop offset="0.89" stop-color="#6922F1" />
                <stop offset="1" stop-color="#641BF2" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pr-0 lg:pr-0 xl:pr-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Automated Lineage Tracking and Caching
          </h3>
          <div class="mb-4 leading-9">
            <p>
              <span class="tagline"> Reduce execution time</span>
            </p>
            <p>
              <span class="tagline">Backtrack to the error-source</span>
            </p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Cache repeated actions across multiple executions. Track all the
              generated data and visualize the data dependencies.
            </p>
          </div>
        </div>
      </div>
      <!--item-5-->
      <div class="md:flex md:items-center relative js-show-on-scroll">
        <div class="illustration md:w-5/12 text-center">
          <svg
            class="max-w-350 sm:max-w-md md:max-w-full -ml-20 -mb-32 -mt-10 sm:-mb-20 sm:mt-4 sm:-ml-32 md:mb-0 md:ml-0 md:mt-0 inline-block md:block w-full sm:w-auto sm:max-w-md md:max-w-full"
            width="472"
            height="500"
            viewBox="0 0 472 500"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            vector-effect="non-scaling-stroke"
          >
            <g class="hidden md:block">
              <path
                d="M382 259.966C382.031 304.369 369.746 347.909 346.513 385.737C323.281 423.566 290.012 454.198 250.412 474.222C210.812 494.247 166.435 502.878 122.223 499.155C78.0108 495.432 35.6993 479.5 3.10765e-05 453.134L3.56834e-05 66.799C35.6994 40.4589 78.0017 24.5487 122.199 20.8392C166.397 17.1297 210.757 25.7663 250.341 45.788C289.926 65.8096 323.182 96.4308 346.411 134.244C369.639 172.057 381.928 215.579 381.909 259.966L382 259.966Z"
                fill="#FFF2F0"
              />
            </g>

            <path
              d="M300.897 0.0208749C266.983 -0.507341 233.67 8.99936 205.143 27.3465C211.631 31.4975 217.193 36.9422 221.482 43.3402C225.771 49.7382 228.694 56.9521 230.069 64.531C231.444 72.1099 231.24 79.8909 229.472 87.3877C227.703 94.8844 224.408 101.936 219.791 108.101H138.18C128.395 132.41 124.256 158.622 126.073 184.763C127.891 210.903 135.619 236.291 148.674 259.011C151.712 264.289 156.088 268.675 161.359 271.726C166.63 274.777 172.612 276.387 178.703 276.393H418.188C424.29 276.38 430.281 274.759 435.559 271.695C440.836 268.63 445.212 264.228 448.247 258.934C463.029 233.254 470.921 204.189 471.159 174.559C472.167 79.8592 395.597 1.33446 300.897 0.0208749Z"
              fill="#D5E8FF"
            />
            <path
              d="M205.143 27.3464C194.09 20.2886 180.911 17.3329 167.903 18.9944C154.894 20.6559 142.881 26.8292 133.957 36.4385C125.033 46.0478 119.764 58.4838 119.067 71.5794C118.371 84.6749 122.292 97.5996 130.146 108.101H138.181C151.621 74.9103 175.014 46.6986 205.143 27.3464Z"
              fill="#D5E8FF"
            />
            <path
              d="M230.971 74.513C230.971 65.1149 228.605 55.8681 224.091 47.6251C219.577 39.382 213.06 32.4081 205.142 27.3462C175.013 46.6984 151.62 74.9101 138.18 108.101H219.79C227.061 98.4138 230.985 86.6253 230.971 74.513Z"
              fill="white"
            />
            <g class="right-left">
              <path
                d="M200.193 108.101C200.193 88.1072 215.88 71.886 235.232 71.886C254.585 71.886 270.256 88.1072 270.256 108.101H200.193Z"
                fill="white"
              />
            </g>
            <g class="left-right">
              <path
                d="M342.442 152.946C342.442 130.936 359.702 113.095 381.01 113.095C402.317 113.095 419.577 130.936 419.577 152.946H342.442Z"
                fill="white"
              />
              <path
                d="M407.145 158.124C407.145 143.278 418.799 131.227 433.111 131.227C447.423 131.227 459.153 143.278 459.153 158.124H407.145Z"
                fill="white"
              />
            </g>
            <path
              d="M78 108.101C78 93.2391 89.6542 81.1877 103.966 81.1877C118.278 81.1877 129.932 93.2391 129.932 108.101H78Z"
              fill="#D5E8FF"
            />
            <path
              d="M363.414 357.101C359.619 353.807 356.542 349.767 354.375 345.234C352.207 340.7 350.994 335.769 350.812 330.747C350.63 325.725 351.483 320.719 353.317 316.041C355.151 311.362 357.928 307.11 361.474 303.55L362.009 303.015C362.824 302.205 363.394 301.18 363.653 300.06C363.913 298.939 363.85 297.769 363.474 296.682C363.097 295.596 362.422 294.637 361.525 293.918C360.628 293.198 359.546 292.746 358.404 292.614L302.042 281.968H301.63H301.233L244.871 292.659C243.727 292.789 242.643 293.24 241.745 293.958C240.846 294.677 240.168 295.635 239.79 296.722C239.411 297.809 239.348 298.981 239.606 300.102C239.865 301.224 240.435 302.249 241.251 303.061L241.785 303.596C245.328 307.152 248.103 311.397 249.938 316.069C251.773 320.741 252.629 325.74 252.452 330.756C252.276 335.772 251.072 340.699 248.914 345.231C246.756 349.763 243.69 353.803 239.907 357.101C238.978 357.92 238.32 359.001 238.02 360.202C237.72 361.403 237.792 362.666 238.226 363.826C238.659 364.985 239.435 365.985 240.45 366.693C241.465 367.402 242.671 367.785 243.908 367.793H359.458C360.696 367.785 361.902 367.402 362.916 366.693C363.931 365.985 364.707 364.985 365.141 363.826C365.575 362.666 365.646 361.403 365.346 360.202C365.046 359.001 364.388 357.92 363.46 357.101H363.414Z"
              fill="#262262"
            />
            <path
              d="M403.479 314.487C411.113 314.479 418.655 312.812 425.581 309.601C432.508 306.39 438.654 301.712 443.593 295.89C448.533 290.069 452.148 283.243 454.189 275.887C456.229 268.53 456.646 260.817 455.411 253.283L439.129 154.001C438.558 150.839 436.897 147.978 434.436 145.913C431.976 143.849 428.869 142.711 425.657 142.698H177.558C174.348 142.714 171.245 143.854 168.787 145.918C166.33 147.983 164.672 150.842 164.101 154.001L147.803 253.283C146.568 260.817 146.985 268.53 149.026 275.887C151.066 283.243 154.682 290.069 159.621 295.89C164.561 301.712 170.707 306.39 177.633 309.601C184.56 312.812 192.101 314.479 199.736 314.487H403.479Z"
              fill="#641BF2"
            />
            <g style="mix-blend-mode: multiply">
              <path
                d="M306.181 248.838C331.438 248.838 351.912 228.364 351.912 203.107C351.912 177.85 331.438 157.376 306.181 157.376C280.925 157.376 260.45 177.85 260.45 203.107C260.45 228.364 280.925 248.838 306.181 248.838Z"
                fill="#262262"
              />
            </g>
            <path
              d="M409.024 189.421C411.816 189.421 414.079 187.157 414.079 184.365C414.079 181.573 411.816 179.309 409.024 179.309C406.231 179.309 403.968 181.573 403.968 184.365C403.968 187.157 406.231 189.421 409.024 189.421Z"
              fill="#FFBFB6"
            />
            <path
              d="M306.181 237.49C325.17 237.49 340.563 222.096 340.563 203.107C340.563 184.119 325.17 168.725 306.181 168.725C287.192 168.725 271.799 184.119 271.799 203.107C271.799 222.096 287.192 237.49 306.181 237.49Z"
              fill="#FFBFB6"
            />
            <path
              d="M340.548 203.107C340.685 207.706 339.898 212.286 338.232 216.576C336.567 220.865 334.058 224.777 330.853 228.079C327.648 231.38 323.813 234.005 319.575 235.798C315.337 237.59 310.783 238.514 306.181 238.514C301.58 238.514 297.025 237.59 292.787 235.798C288.549 234.005 284.714 231.38 281.51 228.079C278.305 224.777 275.795 220.865 274.13 216.576C272.464 212.286 271.677 207.706 271.814 203.107"
              fill="#641BF2"
            />
            <path
              d="M281.055 229.745L306.181 203.107L330.604 229.058"
              stroke="white"
              stroke-miterlimit="10"
            />
            <path
              d="M264.392 202.878H349.729"
              stroke="white"
              stroke-miterlimit="10"
            />
            <g style="mix-blend-mode: multiply">
              <path
                d="M212.963 289.07C236.305 289.07 255.227 270.148 255.227 246.806C255.227 223.465 236.305 204.542 212.963 204.542C189.621 204.542 170.699 223.465 170.699 246.806C170.699 270.148 189.621 289.07 212.963 289.07Z"
                fill="#262262"
              />
            </g>
            <path
              d="M212.964 278.149C230.274 278.149 244.307 264.116 244.307 246.806C244.307 229.496 230.274 215.463 212.964 215.463C195.654 215.463 181.621 229.496 181.621 246.806C181.621 264.116 195.654 278.149 212.964 278.149Z"
              fill="#FFBFB6"
            />
            <path
              d="M193.152 264.342C189.693 260.416 187.476 255.553 186.781 250.368C186.085 245.182 186.943 239.907 189.245 235.209C191.548 230.511 195.192 226.601 199.716 223.974C204.24 221.347 209.442 220.12 214.664 220.449C219.885 220.778 224.892 222.647 229.051 225.822C233.21 228.996 236.335 233.332 238.029 238.282C239.724 243.232 239.913 248.573 238.573 253.63C237.232 258.687 234.422 263.233 230.498 266.694"
              stroke="#262262"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <g style="mix-blend-mode: multiply">
              <path
                d="M397.72 289.254C421.062 289.254 439.984 270.332 439.984 246.99C439.984 223.648 421.062 204.726 397.72 204.726C374.378 204.726 355.456 223.648 355.456 246.99C355.456 270.332 374.378 289.254 397.72 289.254Z"
                fill="#262262"
              />
            </g>
            <path
              d="M397.72 278.332C415.03 278.332 429.062 264.3 429.062 246.99C429.062 229.68 415.03 215.647 397.72 215.647C380.41 215.647 366.377 229.68 366.377 246.99C366.377 264.3 380.41 278.332 397.72 278.332Z"
              fill="white"
            />
            <path
              d="M294.908 188.047H318.11"
              stroke="#262262"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M302.47 181.937H310.412"
              stroke="#262262"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M302.47 194.172H310.412"
              stroke="#262262"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <g class="rotate">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M396.07 238.833C396.07 238.833 396.819 242.423 395.627 243.232C394.436 244.042 390.556 246.287 390.556 246.287L386.31 248.807C385.984 249.017 385.736 249.328 385.604 249.692C385.471 250.056 385.462 250.454 385.577 250.824C385.898 252.153 386.203 252.351 387.227 252.046C388.25 251.74 395.566 249.281 396.483 249.877L397.063 256.384C397.063 256.384 393.229 257.56 394.467 259.805H402.715C403.982 257.544 400.133 256.399 400.133 256.399L400.653 249.877C401.6 249.281 408.855 251.679 409.924 252C410.993 252.321 411.284 252.107 411.604 250.763C411.707 250.393 411.69 250 411.555 249.641C411.421 249.281 411.176 248.973 410.856 248.762L406.594 246.272C406.594 246.272 402.715 244.027 401.508 243.217C400.301 242.408 401.004 238.818 401.004 238.818C400.943 231.41 396.116 231.425 396.07 238.833Z"
                fill="#641BF2"
              />
            </g>
            <path
              d="M370.089 246.99H378.016"
              stroke="#FFBFB6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M417.439 246.99H425.367"
              stroke="#FFBFB6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M397.72 219.359V227.286"
              stroke="#FFBFB6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M397.72 266.709V274.637"
              stroke="#FFBFB6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <g style="mix-blend-mode: multiply">
              <path
                d="M375.466 176.561H368.378C366.674 176.561 365.293 177.942 365.293 179.646V189.055C365.293 190.759 366.674 192.14 368.378 192.14H375.466C377.17 192.14 378.551 190.759 378.551 189.055V179.646C378.551 177.942 377.17 176.561 375.466 176.561Z"
                fill="#262262"
              />
            </g>
            <g style="mix-blend-mode: multiply">
              <path
                d="M226.481 176.561H219.394C217.69 176.561 216.309 177.942 216.309 179.646V189.055C216.309 190.759 217.69 192.14 219.394 192.14H226.481C228.185 192.14 229.567 190.759 229.567 189.055V179.646C229.567 177.942 228.185 176.561 226.481 176.561Z"
                fill="#262262"
              />
            </g>
            <g style="mix-blend-mode: multiply">
              <path
                d="M393.977 176.561H386.89C385.186 176.561 383.805 177.942 383.805 179.646V189.055C383.805 190.759 385.186 192.14 386.89 192.14H393.977C395.681 192.14 397.063 190.759 397.063 189.055V179.646C397.063 177.942 395.681 176.561 393.977 176.561Z"
                fill="#262262"
              />
            </g>
            <g style="mix-blend-mode: multiply">
              <path
                d="M428.925 176.561H421.837C420.133 176.561 418.752 177.942 418.752 179.646V189.055C418.752 190.759 420.133 192.14 421.837 192.14H428.925C430.629 192.14 432.01 190.759 432.01 189.055V179.646C432.01 177.942 430.629 176.561 428.925 176.561Z"
                fill="#262262"
              />
            </g>
            <path
              d="M196.696 197.349C203.866 197.349 209.679 191.536 209.679 184.366C209.679 177.195 203.866 171.383 196.696 171.383C189.526 171.383 183.713 177.195 183.713 184.366C183.713 191.536 189.526 197.349 196.696 197.349Z"
              fill="white"
            />
            <g style="mix-blend-mode: multiply">
              <path
                d="M196.696 192.37C201.116 192.37 204.7 188.786 204.7 184.366C204.7 179.946 201.116 176.362 196.696 176.362C192.276 176.362 188.692 179.946 188.692 184.366C188.692 188.786 192.276 192.37 196.696 192.37Z"
                fill="#262262"
              />
            </g>
            <path
              d="M201.722 183.602C201.759 184.278 201.658 184.954 201.425 185.59C201.193 186.226 200.832 186.807 200.367 187.299C199.902 187.791 199.341 188.183 198.719 188.451C198.097 188.719 197.427 188.857 196.75 188.857C196.073 188.857 195.403 188.719 194.781 188.451C194.159 188.183 193.598 187.791 193.133 187.299C192.667 186.807 192.307 186.226 192.074 185.59C191.841 184.954 191.741 184.278 191.778 183.602"
              fill="#FFBFB6"
            />
            <path
              d="M272.182 281.189C274.392 281.189 276.183 279.397 276.183 277.187C276.183 274.977 274.392 273.185 272.182 273.185C269.971 273.185 268.18 274.977 268.18 277.187C268.18 279.397 269.971 281.189 272.182 281.189Z"
              fill="white"
            />
            <path
              d="M294.879 281.189C297.089 281.189 298.881 279.397 298.881 277.187C298.881 274.977 297.089 273.185 294.879 273.185C292.669 273.185 290.877 274.977 290.877 277.187C290.877 279.397 292.669 281.189 294.879 281.189Z"
              fill="white"
            />
            <path
              d="M317.561 281.189C319.772 281.189 321.563 279.397 321.563 277.187C321.563 274.977 319.772 273.185 317.561 273.185C315.351 273.185 313.56 274.977 313.56 277.187C313.56 279.397 315.351 281.189 317.561 281.189Z"
              fill="#FFBFB6"
            />
            <path
              d="M340.243 281.189C342.453 281.189 344.245 279.397 344.245 277.187C344.245 274.977 342.453 273.185 340.243 273.185C338.033 273.185 336.241 274.977 336.241 277.187C336.241 279.397 338.033 281.189 340.243 281.189Z"
              fill="white"
            />
            <path
              d="M210.183 263.135C213.203 263.135 215.651 260.687 215.651 257.667C215.651 254.647 213.203 252.198 210.183 252.198C207.163 252.198 204.715 254.647 204.715 257.667C204.715 260.687 207.163 263.135 210.183 263.135Z"
              fill="white"
            />
            <path
              d="M223.624 235.641L210.351 257.452"
              stroke="#262262"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pl-0 lg:pl-0 xl:pl-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Controlled Extensibility
          </h3>
          <div>
            <p><span class="tagline">Great for platform builders</span></p>
            <ul class="my-4 content-list text-base md:text-xl text-gray-700">
              <li>
                Use built-in platform extensions like AWS Sagemaker, Distributed
                Pytorch, Distributed TensorFlow, AWS Batch, Kubernetes Pods,
                Containers, or use an extension of your own.
              </li>
              <li>
                Add a Python extension by simply extending a single class.
              </li>
              <li>Add a new language SDK.</li>
            </ul>
          </div>
        </div>
      </div>
      <!--item 6-->
      <div
        class="md:flex md:items-center md:flex-row-reverse relative js-show-on-scroll"
      >
        <div class="illustration md:w-5/12 text-center md:text-right">
          <svg
            class="max-w-350 sm:max-w-md md:max-w-full -my-24 -mr-24 sm:-my-16 md:my-0 md:mr-0 inline-block"
            width="527"
            height="510"
            viewBox="0 0 527 510"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            vector-effect="non-scaling-stroke"
          >
            <g class="hidden md:block">
              <path
                d="M121.214 254.964C121.181 302.142 134.231 348.403 158.91 388.596C183.59 428.788 218.93 461.335 260.996 482.611C303.062 503.888 350.202 513.058 397.167 509.102C444.132 505.146 489.078 488.219 527 460.205L527 49.724C489.078 21.7376 444.142 4.83305 397.192 0.891686C350.242 -3.04968 303.12 6.12678 261.071 27.3997C219.022 48.6727 183.694 81.2077 159.019 121.384C134.344 161.561 121.291 207.803 121.311 254.964L121.214 254.964Z"
                fill="#FFBFB6"
                fill-opacity="0.15"
              />
            </g>

            <path
              d="M59.632 380.699C64.0461 380.699 67.6244 377.121 67.6244 372.707C67.6244 368.293 64.0461 364.715 59.632 364.715C55.218 364.715 51.6396 368.293 51.6396 372.707C51.6396 377.121 55.218 380.699 59.632 380.699Z"
              fill="#641BF2"
            />
            <path
              d="M71.8625 405.048C76.2765 405.048 79.8548 401.47 79.8548 397.056C79.8548 392.642 76.2765 389.063 71.8625 389.063C67.4484 389.063 63.8701 392.642 63.8701 397.056C63.8701 401.47 67.4484 405.048 71.8625 405.048Z"
              fill="#262262"
            />
            <path
              d="M48.1916 405.048C52.6056 405.048 56.1839 401.47 56.1839 397.056C56.1839 392.642 52.6056 389.063 48.1916 389.063C43.7775 389.063 40.1992 392.642 40.1992 397.056C40.1992 401.47 43.7775 405.048 48.1916 405.048Z"
              fill="#9963E5"
            />
            <g class="right-left">
              <path
                d="M161.481 352.473C161.495 338.401 164.845 324.533 171.254 312.005C177.663 299.478 186.949 288.647 198.352 280.402C209.755 272.156 222.949 266.73 236.854 264.568C250.759 262.407 264.978 263.571 278.346 267.965C291.714 272.36 303.85 279.859 313.76 289.85C323.67 299.84 331.071 312.037 335.358 325.44C339.644 338.843 340.693 353.071 338.419 366.958C336.145 380.844 330.612 393.995 322.275 405.33H337.425C353.138 384.352 362.701 359.413 365.043 333.306C367.384 307.2 362.412 280.957 350.682 257.517C338.953 234.077 320.929 214.365 298.631 200.589C276.332 186.812 250.639 179.516 224.428 179.516C198.217 179.516 172.523 186.812 150.224 200.589C127.926 214.365 109.902 234.077 98.173 257.517C86.4436 280.957 81.4711 307.2 83.8125 333.306C86.1539 359.413 95.7167 384.352 111.43 405.33H178.841C167.529 390.032 161.442 371.499 161.481 352.473Z"
                fill="#D5E8FF"
              />
              <path
                d="M250.557 263.396C234.072 263.384 217.907 267.948 203.863 276.581C189.818 285.213 178.445 297.574 171.011 312.288C163.576 327.002 160.372 343.49 161.754 359.918C163.136 376.345 169.051 392.066 178.84 405.33H322.274C332.054 392.066 337.961 376.348 339.338 359.926C340.715 343.504 337.509 327.022 330.075 312.314C322.642 297.606 311.273 285.25 297.234 276.619C283.195 267.988 267.037 263.422 250.557 263.429V263.396Z"
                fill="#FFBFB6"
              />
              <path
                d="M95.3447 405.049C95.3447 378.738 118.848 357.41 147.842 357.41C176.835 357.41 200.327 378.738 200.327 405.049"
                fill="url(#paint0_linear)"
              />
            </g>
            <g class="left-right">
              <path
                d="M165.303 405.048C165.303 360.318 200.395 324.065 243.671 324.065C286.947 324.065 322.038 360.318 322.038 405.048"
                fill="url(#paint1_linear)"
              />
            </g>

            <path
              d="M163.521 267.161C167.194 267.161 170.172 264.183 170.172 260.51C170.172 256.837 167.194 253.859 163.521 253.859C159.848 253.859 156.87 256.837 156.87 260.51C156.87 264.183 159.848 267.161 163.521 267.161Z"
              fill="#262262"
            />
            <path
              d="M181.603 268.885C185.276 268.885 188.254 265.907 188.254 262.234C188.254 258.561 185.276 255.583 181.603 255.583C177.93 255.583 174.952 258.561 174.952 262.234C174.952 265.907 177.93 268.885 181.603 268.885Z"
              fill="#641BF2"
            />
            <path
              d="M199.696 270.61C203.369 270.61 206.347 267.632 206.347 263.959C206.347 260.286 203.369 257.308 199.696 257.308C196.023 257.308 193.045 260.286 193.045 263.959C193.045 267.632 196.023 270.61 199.696 270.61Z"
              fill="#9963E5"
            />
            <path
              d="M217.789 272.335C221.462 272.335 224.439 269.357 224.439 265.684C224.439 262.011 221.462 259.033 217.789 259.033C214.115 259.033 211.138 262.011 211.138 265.684C211.138 269.357 214.115 272.335 217.789 272.335Z"
              fill="#262262"
            />
            <path
              d="M172.156 246.655C175.829 246.655 178.807 243.678 178.807 240.004C178.807 236.331 175.829 233.354 172.156 233.354C168.483 233.354 165.505 236.331 165.505 240.004C165.505 243.678 168.483 246.655 172.156 246.655Z"
              fill="#9963E5"
            />
            <path
              d="M190.237 248.38C193.91 248.38 196.888 245.402 196.888 241.729C196.888 238.056 193.91 235.078 190.237 235.078C186.564 235.078 183.586 238.056 183.586 241.729C183.586 245.402 186.564 248.38 190.237 248.38Z"
              fill="#262262"
            />
            <path
              d="M208.331 250.105C212.004 250.105 214.981 247.127 214.981 243.454C214.981 239.781 212.004 236.803 208.331 236.803C204.657 236.803 201.68 239.781 201.68 243.454C201.68 247.127 204.657 250.105 208.331 250.105Z"
              fill="#641BF2"
            />
            <path
              d="M176.203 194.587L137.109 273.575"
              class="stroke stroke-purple-black"
            />
            <path
              d="M238.373 283.236L217.09 198.487"
              class="stroke stroke-purple-black"
            />
            <path
              d="M198.342 127.379L196.617 145.449"
              class="stroke stroke-purple-black"
            />
            <path
              d="M30.1758 153.126C32.5561 156.529 35.6483 159.373 39.2377 161.462C42.8271 163.551 46.828 164.833 50.9627 165.221L115.116 171.354C107.563 164.59 103.065 160.081 103.065 160.081L30.1758 153.126Z"
              fill="#EDEDED"
            />
            <path
              d="M61.6168 148.403L30.9325 110.639L0.744141 107.765L24.3717 142.608L61.6168 148.403Z"
              fill="#641BF2"
            />
            <path
              d="M220.482 145.911L179.449 141.988C157.251 139.872 134.864 142.959 114.068 151.007V151.007H112.794L125.791 152.314L248.799 164.094C245.876 159.021 241.779 154.723 236.852 151.559C231.925 148.396 226.312 146.459 220.482 145.911V145.911Z"
              fill="#641BF2"
            />
            <path
              d="M167.502 176.382L115.118 171.388C126.966 182.092 139.384 192.147 152.318 201.508C168.528 213.187 192.201 214.224 213.766 216.287C233.933 218.215 251.597 206.051 253.525 185.851C253.525 185.4 253.592 184.96 253.615 184.52L167.502 176.382Z"
              fill="#641BF2"
            />
            <path
              d="M144.234 154.185L125.814 152.337L112.389 151.04L29.1396 151.514C29.4666 152.066 29.816 152.641 30.1767 153.126L103.066 160.081C103.066 160.081 107.575 164.59 115.117 171.354L167.501 176.348L144.234 154.185Z"
              fill="#FFBFB6"
            />
            <path
              d="M167.502 176.381L253.614 184.599C254.06 177.44 252.386 170.308 248.801 164.094L125.815 152.337L144.235 154.186L167.502 176.381Z"
              fill="#FFBFB6"
            />
            <path
              d="M24.3721 142.608L28.3401 150.105C28.5881 150.589 28.8586 151.052 29.1404 151.514L112.389 151.04L24.3721 142.608Z"
              fill="#FFBFB6"
            />
            <path
              d="M198.151 129.431L85.7624 122.036C84.2415 121.876 82.8452 121.122 81.8781 119.937C80.911 118.753 80.4514 117.234 80.5995 115.712V115.712C80.9039 112.522 83.7334 110.177 86.8446 111.304L198.602 125.305L198.151 129.431Z"
              fill="#262262"
            />
            <path
              d="M198.151 129.431L309.909 143.431C311.441 143.566 312.964 143.087 314.143 142.1C315.322 141.113 316.062 139.699 316.199 138.167V138.167C316.504 134.977 314.17 132.147 310.901 132.666L198.512 125.271L198.151 129.431Z"
              fill="#262262"
            />
            <path
              d="M30.1758 153.126C32.5561 156.529 35.6483 159.373 39.2377 161.462C42.8271 163.551 46.828 164.833 50.9627 165.221L115.116 171.354C107.563 164.59 103.065 160.081 103.065 160.081L30.1758 153.126Z"
              fill="url(#paint2_linear)"
            />
            <path
              style="mix-blend-mode: overlay"
              d="M167.502 176.381L253.614 184.599C254.06 177.44 252.386 170.308 248.801 164.094L125.815 152.337L144.235 154.186L167.502 176.381Z"
              fill="url(#paint3_linear)"
            />
            <path
              d="M136.45 273.18L239.006 282.964C238.855 284.545 238.083 286 236.859 287.011C235.634 288.022 234.059 288.505 232.479 288.354L141.84 279.707C140.26 279.556 138.804 278.784 137.793 277.56C136.783 276.335 136.299 274.76 136.45 273.18V273.18V273.18Z"
              fill="#262262"
            />
            <defs>
              <linearGradient
                id="paint0_linear"
                x1="95.3447"
                y1="381.229"
                x2="200.327"
                y2="381.229"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
              <linearGradient
                id="paint1_linear"
                x1="29026.6"
                y1="20232.2"
                x2="50819.2"
                y2="20232.2"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
              <linearGradient
                id="paint2_linear"
                x1="29.6909"
                y1="158.141"
                x2="115.593"
                y2="166.337"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" stop-opacity="0.2" />
                <stop offset="1" />
              </linearGradient>
              <linearGradient
                id="paint3_linear"
                x1="124.873"
                y1="162.262"
                x2="254.563"
                y2="174.636"
                gradientUnits="userSpaceOnUse"
              >
                <stop />
                <stop offset="1" stop-opacity="0" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pr-0 lg:pr-0 xl:pr-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Facilitate Collaboration
          </h3>
          <div class="mb-4 leading-9">
            <p>
              <span class="tagline"> Build together on one platform </span>
            </p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Flyte makes it easy to stitch together workflows from different
              teams and domain experts. It simplifies the complexity of
              multi-step, multi-owner workflows.
            </p>
          </div>
        </div>
      </div>
      <!--item-7-->
      <div class="md:flex md:items-center relative js-show-on-scroll">
        <div class="illustration md:w-5/12 text-center">
          <svg
            class="max-w-350 sm:max-w-md md:max-w-full -my-24 -ml-20 sm:-my-16 sm:-mt-20 sm:-ml-32 md:my-0 md:ml-0 inline-block md:block w-full sm:w-auto sm:max-w-md md:max-w-full"
            width="500"
            height="509"
            viewBox="0 0 500 509"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            vector-effect="non-scaling-stroke"
          >
            <g class="hidden md:block">
              <path
                d="M404 254.47C404.033 301.463 391.04 347.542 366.47 387.577C341.899 427.612 306.714 460.031 264.833 481.224C222.952 502.417 176.02 511.552 129.262 507.611C82.5035 503.671 37.7553 486.809 3.11091e-05 458.905L3.59848e-05 50.0344C37.7554 22.1576 82.494 5.31939 129.237 1.39349C175.98 -2.53241 222.894 6.60806 264.759 27.7976C306.623 48.9871 341.795 81.3946 366.361 121.414C390.927 161.433 403.923 207.493 403.904 254.47L404 254.47Z"
                fill="#9D68E4"
                fill-opacity="0.08"
              />
            </g>
            <path
              d="M435.716 419.693H455.382C475.778 392.468 488.191 360.103 491.232 326.223C494.274 292.342 487.823 258.284 472.602 227.862C457.381 197.44 433.991 171.857 405.052 153.977C376.113 136.097 342.768 126.627 308.751 126.627C274.734 126.627 241.389 136.097 212.45 153.977C183.511 171.857 160.122 197.44 144.901 227.862C129.68 258.284 123.229 292.342 126.27 326.223C129.311 360.103 141.725 392.468 162.12 419.693H249.594"
              fill="#D5E8FF"
            />
            <path
              d="M373.51 420.25C373.51 354.972 315.204 302.057 243.27 302.057C171.336 302.057 113 354.942 113 420.25"
              fill="#FFBFB6"
            />
            <!--<path style="mix-blend-mode:overlay" d="M373.51 420.25C373.51 354.972 315.204 302.057 243.27 302.057C171.336 302.057 113 354.942 113 420.25" fill="url(#paint0_linear)"/>-->
            <path
              d="M458.807 350.262C464.195 350.262 468.563 345.894 468.563 340.506C468.563 335.118 464.195 330.75 458.807 330.75C453.419 330.75 449.051 335.118 449.051 340.506C449.051 345.894 453.419 350.262 458.807 350.262Z"
              fill="white"
            />
            <path
              d="M500 420.25C500 388.627 471.69 362.893 436.755 362.893C401.819 362.893 373.51 388.567 373.51 420.25"
              fill="#FFBFB6"
            />
            <!--<path style="mix-blend-mode:overlay" d="M500 420.25C500 388.627 471.69 362.893 436.755 362.893C401.819 362.893 373.51 388.567 373.51 420.25" fill="url(#paint1_linear)"/>-->
            <path
              d="M348.98 199.314H230.396V420.25H348.98V199.314Z"
              fill="url(#paint2_linear)"
            />
            <path
              d="M445.083 357.607H306.546L278.643 199.314H405.841C408.999 199.32 412.057 200.429 414.485 202.45C416.912 204.471 418.558 207.277 419.137 210.382L445.083 357.607Z"
              fill="#FFBFB6"
            />
            <path
              d="M405.932 319.959C424.516 299.663 419.962 265.244 395.759 243.082C371.556 220.92 336.87 219.406 318.285 239.702C299.701 259.998 304.255 294.417 328.458 316.58C352.661 338.742 387.347 340.255 405.932 319.959Z"
              fill="#262262"
            />
            <g class="radar opacity-fade">
              <path
                d="M415.673 275.584C408.852 248.705 383.493 227.307 356.208 225.545C355.003 225.545 353.798 225.425 352.594 225.425L362.186 279.831H416.607C416.276 278.4 415.959 276.985 415.673 275.584Z"
                fill="#641BF2"
              />
              <path
                opacity="0.5"
                d="M415.673 275.584C408.852 248.705 383.493 227.307 356.208 225.545C355.003 225.545 353.798 225.425 352.594 225.425L362.186 279.831H416.607C416.276 278.4 415.959 276.985 415.673 275.584Z"
                fill="url(#paint3_linear)"
              />
            </g>
            <path
              d="M394.634 309.332C408.366 294.335 405.004 268.906 387.125 252.534C369.246 236.162 343.62 235.048 329.888 250.044C316.156 265.04 319.517 290.469 337.397 306.841C355.276 323.213 380.902 324.328 394.634 309.332Z"
              stroke="#EDEDED"
              stroke-width="0.34"
              stroke-miterlimit="10"
            />
            <path
              d="M383.073 298.746C391.902 289.104 389.741 272.755 378.247 262.23C366.752 251.705 350.277 250.989 341.448 260.631C332.619 270.273 334.78 286.621 346.274 297.146C357.768 307.671 374.244 308.387 383.073 298.746Z"
              stroke="#EDEDED"
              stroke-width="0.34"
              stroke-miterlimit="10"
            />
            <path
              d="M380.334 293.295C381.317 292.221 381.08 290.404 379.804 289.236C378.528 288.068 376.697 287.991 375.714 289.064C374.731 290.138 374.969 291.955 376.245 293.123C377.52 294.291 379.351 294.368 380.334 293.295Z"
              fill="#EDEDED"
            />
            <path
              d="M395.691 299.032C396.674 297.959 396.436 296.142 395.16 294.974C393.885 293.805 392.054 293.728 391.071 294.802C390.088 295.875 390.325 297.692 391.601 298.861C392.877 300.029 394.708 300.106 395.691 299.032Z"
              fill="#FFBFB6"
            />
            <path
              d="M356.439 287.171C357.911 285.564 357.552 282.84 355.638 281.088C353.725 279.336 350.981 279.218 349.509 280.825C348.038 282.432 348.396 285.155 350.31 286.907C352.223 288.66 354.968 288.778 356.439 287.171Z"
              fill="#FFBFB6"
            />
            <path
              d="M380.614 265.032C382.085 263.425 381.727 260.702 379.813 258.95C377.9 257.197 375.155 257.079 373.684 258.686C372.212 260.293 372.571 263.017 374.485 264.769C376.398 266.521 379.142 266.639 380.614 265.032Z"
              fill="#FFBFB6"
            />
            <path
              d="M355.277 310.518C356.259 309.445 356.022 307.628 354.746 306.459C353.47 305.291 351.639 305.214 350.657 306.288C349.674 307.361 349.911 309.178 351.187 310.346C352.463 311.515 354.294 311.592 355.277 310.518Z"
              fill="#EDEDED"
            />
            <path
              d="M342.285 253.082C343.268 252.009 343.031 250.191 341.755 249.023C340.479 247.855 338.648 247.778 337.665 248.851C336.683 249.925 336.92 251.742 338.196 252.91C339.472 254.078 341.302 254.155 342.285 253.082Z"
              fill="#EDEDED"
            />
            <path
              d="M352.519 225.425L362.111 279.831H416.532"
              stroke="#EDEDED"
              stroke-width="0.37"
              stroke-miterlimit="10"
            />
            <path
              d="M417.164 420.25H275.359L305.837 357.607H445.082L417.164 420.25Z"
              fill="url(#paint4_linear)"
            />
            <path
              d="M200.294 398.009C205.309 398.009 209.374 393.943 209.374 388.929C209.374 383.914 205.309 379.848 200.294 379.848C195.279 379.848 191.214 383.914 191.214 388.929C191.214 393.943 195.279 398.009 200.294 398.009Z"
              fill="#9963E5"
            />
            <path
              d="M154.922 232.758C164.703 232.758 172.631 224.83 172.631 215.049C172.631 205.269 164.703 197.341 154.922 197.341C145.142 197.341 137.214 205.269 137.214 215.049C137.214 224.83 145.142 232.758 154.922 232.758Z"
              fill="#FFBFB6"
            />
            <path
              d="M197.567 345.199C204.088 345.199 209.373 339.914 209.373 333.393C209.373 326.873 204.088 321.588 197.567 321.588C191.047 321.588 185.762 326.873 185.762 333.393C185.762 339.914 191.047 345.199 197.567 345.199Z"
              fill="#262262"
            />
            <path
              d="M456.195 395.78C459.239 395.78 461.706 393.313 461.706 390.269C461.706 387.225 459.239 384.758 456.195 384.758C453.151 384.758 450.684 387.225 450.684 390.269C450.684 393.313 453.151 395.78 456.195 395.78Z"
              fill="#262262"
            />
            <path
              d="M313.171 170.01C315.849 170.01 318.02 167.839 318.02 165.161C318.02 162.483 315.849 160.312 313.171 160.312C310.493 160.312 308.322 162.483 308.322 165.161C308.322 167.839 310.493 170.01 313.171 170.01Z"
              fill="#262262"
            />
            <path
              d="M165.779 369.157C169.563 369.157 172.631 366.089 172.631 362.305C172.631 358.521 169.563 355.454 165.779 355.454C161.995 355.454 158.928 358.521 158.928 362.305C158.928 366.089 161.995 369.157 165.779 369.157Z"
              fill="white"
            />
            <path
              d="M268.508 96.2092C272.292 96.2092 275.359 93.1417 275.359 89.3577C275.359 85.5736 272.292 82.5061 268.508 82.5061C264.724 82.5061 261.656 85.5736 261.656 89.3577C261.656 93.1417 264.724 96.2092 268.508 96.2092Z"
              fill="#262262"
            />
            <path
              d="M352.518 149.124C362.847 149.124 371.22 140.751 371.22 130.422C371.22 120.093 362.847 111.719 352.518 111.719C342.189 111.719 333.815 120.093 333.815 130.422C333.815 140.751 342.189 149.124 352.518 149.124Z"
              fill="#9963E5"
            />
            <defs>
              <linearGradient
                id="paint0_linear"
                x1="373.51"
                y1="361.146"
                x2="113.015"
                y2="361.146"
                gradientUnits="userSpaceOnUse"
              >
                <stop />
                <stop offset="1" stop-opacity="0" />
              </linearGradient>
              <linearGradient
                id="paint1_linear"
                x1="-424097"
                y1="14835.3"
                x2="-413477"
                y2="14835.3"
                gradientUnits="userSpaceOnUse"
              >
                <stop />
                <stop offset="1" stop-opacity="0" />
              </linearGradient>
              <linearGradient
                id="paint2_linear"
                x1="230.396"
                y1="309.782"
                x2="348.98"
                y2="309.782"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
              <linearGradient
                id="paint3_linear"
                x1="360.224"
                y1="248.675"
                x2="412.698"
                y2="275.406"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" stop-opacity="0" />
                <stop offset="1" />
              </linearGradient>
              <linearGradient
                id="paint4_linear"
                x1="32663.5"
                y1="16054"
                x2="51791.3"
                y2="16054"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#641BF2" />
                <stop offset="0.11" stop-color="#6922F1" />
                <stop offset="0.27" stop-color="#7634EE" />
                <stop offset="0.46" stop-color="#8D52E8" />
                <stop offset="0.67" stop-color="#AC7CE1" />
                <stop offset="0.89" stop-color="#D3B1D7" />
                <stop offset="1" stop-color="#E9CED2" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="md:w-2/12 lg:w-1/12 hidden md:block self-stretch"></div>
        <div
          class="md:w-5/12 lg:w-6/12 px-6 sm:px-10 md:px-16 lg:px-24 xl:px-32 md:pl-0 lg:pl-0 xl:pl-0"
        >
          <h3
            class="font-bold font-body text-2xl md:text-4xl mb-4 leading-tight"
          >
            Build Self-Service Data Platform
          </h3>
          <div>
            <p>
              <span class="tagline">Break down data silos</span>
            </p>
            <p class="my-4 text-base md:text-xl text-gray-700">
              Empower teams to self-service their data and ML pipelines while
              maintaining a centralized infrastructure platform that enables
              secure governance.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="bg-white">
  <!-- partners -->
  <section class="mx-4 mb-16 md:mb-20 lg:mb-32">
    <div class="container mx-auto text-center lg:w-5/6 max-w-full">
      <p
        class="font-thin text-gray-400 text-2xl md:text-3xl leading-tight mb-6 lg:mb-23 lg:text-4xl"
      >
        TRUSTED BY
      </p>
      <div
        class="grid py-4 gap-y-6 gap-x-6 justify-center grid-cols-2 md:grid-cols-3 md:gap-x-10 lg:grid-cols-5 lg:gap-x-6 px-10 sm:px-24 md:px-20 lg:px-32 justify-center items-center"
      >
        <div class="ml-auto mr-auto">
          <a href="https://www.lyft.com" target="_blank">
            <img src="{{ "/assets/images/lyft.svg" | prepend: site.url }}"
            title="Lyft" alt="Lyft" class="w-28"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://research.atspotify.com" target="_blank">
            <img src="{{ "/assets/images/spotify-rnd.png" | prepend: site.url
            }}" title="Spotify R&D" alt="Spotify R&D" class="w-32" />
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://www.freenome.com" target="_blank">
            <img src="{{ "/assets/images/freenome.svg" | prepend: site.url }}"
            title="Freenome" alt="Freenome" class="w-28" />
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://www.usu.com" target="_blank">
            <img src="{{ "/assets/images/usu.svg" | prepend: site.url }}"
            title="USU" alt="USU" class="w-20"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://www.woven-planet.global" target="_blank">
            <img src="{{ "/assets/images/l5.svg" | prepend: site.url }}"
            title="Level 5" alt="Level 5" class="w-28 md:w-32"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://blackshark.ai" target="_blank">
            <img src="{{ "/assets/images/blackshark.png" | prepend: site.url }}"
            title="Blackshark" alt="Blackshark" class="w-28 md:w-32" />
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://www.gojek.com" target="_blank">
            <img src="{{ "/assets/images/gojek.png" | prepend: site.url }}"
            title="Gojek" alt="Gojek"class="w-20" />
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://www.runx.dev" target="_blank">
            <img src="{{ "/assets/images/runx.svg" | prepend: site.url }}"
            title="RunX" alt="RunX" class="w-20"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://striveworks.us" target="_blank">
            <img src="{{ "/assets/images/striveworks.png" | prepend: site.url
            }}" title="Striveworks" alt="Striveworks" class="w-28 md:w-32"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://latch.bio" target="_blank">
            <img src="{{ "/assets/images/latchbio.svg" | prepend: site.url }}"
            title="Latch" alt="Latch" class="w-28"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://pachama.com/" target="_blank">
            <img src="{{ "/assets/images/pachama.svg" | prepend: site.url }}"
            title="Pachama" alt="Pachama" class="w-28"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://ntropy.com/" target="_blank">
            <img src="{{ "/assets/images/ntropy.svg" | prepend: site.url }}"
            title="Ntropy" alt="Ntropy" class="w-8"/>
          </a>
        </div>
        <div class="ml-auto mr-auto">
          <a href="https://porchgroup.com/" target="_blank">
            <img src="{{ "/assets/images/porch.png" | prepend: site.url }}"
            title="Porch" alt="Porch" class="w-20"/>
          </a>
        </div>
      </div>
      <h3
        class="font-display text-gray-400 leading-tight mt-1 sm:mt-2 lg:mt-4 text-xs sm:text-sm tracking-wide"
        style="text-decoration: underline"
      >
        <a
          href="https://github.com/flyteorg/flyte#%EF%B8%8F-current-deployments--contributors"
          target="_blank"
        >
          AND MORE!
        </a>
      </h3>
    </div>

    <!-- testimonials -->
    <div class="container md:2/3 lg:w-3/5 max-w-full mt-14 mx-auto">
      <hr />
      <div id="testimonials-carousel" class="owl-carousel owl-theme mb-6">
        {% for testimonial in site.data.testimonials %}
        <div class="md:max-w-lg lg:max-w-full lg:flex mt-8 m-auto">
          <div
            class="rounded-xl p-6 flex flex-col justify-between leading-normal h-auto w-full md:text-xl lg:text-2xl text-gray-500 m-auto"
          >
            <p class="testimonial-quote">{{ testimonial.quote }}</p>
            <br />
            <p class="font-bold text-gray-600">
              {{ testimonial.name }}, {{ testimonial.job_title }} {% if
              testimonial.company %} @ {{ testimonial.company }} {% endif %}
            </p>
          </div>
        </div>
        {% endfor %}
      </div>
      <hr />
    </div>
  </section>

  <!-- <section class="mx-4 mb-8 sm:mb-16 md:mb-20 lg:mb-32"> -->
  <section class="pb-8 sm:pb-16 md:pb-20 lg:pb-32">
    <div class="container mx-auto text-center lg:w-5/6 max-w-full">
      <p
        class="font-thin text-gray-400 text-2xl md:text-3xl leading-tight mb-6 lg:mb-23 lg:text-4xl"
      >
        INTEGRATIONS
      </p>

      <div
        class="grid py-4 justify-center md:grid-cols-8 lg:grid-cols-10 grid-cols-4 gap-5 px-10 md:px-20 lg:px-32 mb-4"
      >
        {% for integration in site.data.integration_logos %}
        <div
          class="ml-auto mr-auto"
          style="align-content: center; display: inherit"
        >
          <img
            src="/assets/images/integrations/{{ integration.logo }}"
            title="{{ integration.name }}"
            width="{{ integration.width }}"
          />
        </div>
        {% endfor %}
      </div>
      <a href="integrations/" class="underline text-gray-400">Get started -></a>
    </div>
  </section>

  <!--Sign up-->
  <section
    class="px-6 py-12 md:py-16 lg:py-26 bg-gradient-purple-light-to-darkest"
  >
    <!--wrapper-->
    <div class="container mx-auto text-center">
      <h2 class="text-white text-center text-3xl font-bold pb-4">
        Sign Up for Our Newsletter <span class="italic">Flyte Monthly</span>
      </h2>
      <p class="text-white text-center pb-4">
        Find out what we've been up to at Flyte — news, tutorials, workshops,
        events and more.
      </p>
      <form
        action="https://www.getrevue.co/profile/flyte/add_subscriber"
        method="post"
        id="revue-form"
        name="revue-form"
        target="_blank"
        class="grid grid-cols-1 md:grid-cols-10 lg:grid-cols-8 justify-center"
      >
        <input
          class="form-input text-sm md:text-base block w-full md:col-start-3 md:col-span-4 lg:col-start-3 lg:col-span-3 email-field px-5 h-10 md:h-12"
          placeholder="Your email address..."
          type="email"
          name="member[email]"
          id="member_email"
          required
        />
        <input
          type="submit"
          value="Subscribe now"
          name="member[subscribe]"
          id="member_submit"
          class="h-10 md:h-12 text-sm md:text-base md:col-start-7 md:col-span-2 lg:col-start-6 lg:col-end-7 subscribe-field cursor-pointer font-medium"
        />
      </form>
    </div>
    <!--/wrapper-->
  </section>
  <!-- /Sign up-->
</div>