Solution page: Faster builds (#678)

* Solution page: Faster builds * updated the /faster-builds page Signed-off-by: thtmnisamnstr <[email protected]> * Featured blogs * Updated featured posts --------- Signed-off-by: thtmnisamnstr <[email protected]> Co-authored-by: thtmnisamnstr <[email protected]>
earthly · Oct 23, 2023 · 304426d · 304426d
1 parent f482611
commit 304426d
Show file tree

Hide file tree

Showing 16 changed files with 407 additions and 1 deletion.
diff --git a/website/_includes/faster-builds/benefits-advanced-caching.html b/website/_includes/faster-builds/benefits-advanced-caching.html
@@ -0,0 +1,31 @@
+<div class="w-full">
+  <div class="px-6 lg:px-10 max-w-7xl m-auto">
+    <div class="py-6 px-6 lg:px-10 rounded-xl bg-[#f1fbff] pb-10 mt-6">
+      <div>
+        <div class="text-2xl lg:text-3xl font-semibold mb-6">
+          Advanced caching for complex builds
+        </div>
+
+        <div class="lg:grid grid-cols-10">
+          <img
+            class="w-full bg-white col-span-5 lg:px-10 rounded-xl shadow-md"
+            src="../../assets/svg/advanced-caching.svg"
+            alt="Compatible with every language, framework, and build tool"
+          />
+
+          <div class="text-gray-500 text-lg pt-8 lg:pt-0 col-span-5 lg:pl-8">
+            <p class="pb-2">Earthly offers several different caching options to satisfy the requirements of complex builds:</p>
+            <ul class="ml-8 list-disc">
+              <li class="pb-2"><b>Earthly Satellites</b> – Fully hosted and managed remote runners for the fastest builds with the least effort</li>
+              <li class="pb-2"><b>Self-hosted remote runners</b> – remote build execution with a locally stored cache for the fastest builds</li>
+              <li class="pb-2"><b>Remote explicit caching</b> – pushing/pulling the cache from an image registry</li>
+              <li class="pb-2"><b>Remote inline caching</b> – adding caching metadata to uploaded images</li>
+              <li class="pb-2"><b>Mount-based caching</b> – attaching a volume to a target for caching</li>
+              <li class="pb-2"><b>Layer-based caching</b> – like Docker layer caching but for more than just images</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/benefits-parallel.html b/website/_includes/faster-builds/benefits-parallel.html
@@ -0,0 +1,29 @@
+<div class="w-full">
+  <div class="px-6 lg:px-10 max-w-7xl m-auto">
+    <div class="py-6 px-6 lg:px-10 rounded-xl bg-[#f1fbff] pb-10 mt-6">
+      <div>
+        <div class="text-2xl lg:text-3xl font-semibold mb-6">
+          Automatic parallel execution
+        </div>
+
+        <div class="lg:grid grid-cols-10">
+          <img
+            class="w-full bg-white col-span-5 lg:px-10 rounded-xl shadow-md"
+            src="../../assets/svg/automatic-parallel-execution.svg"
+            alt="Compatible with every language, framework, and build tool"
+          />
+
+          <div class="text-gray-500 text-lg pt-8 lg:pt-0 col-span-5 lg:pl-8">
+            <p class="pb-2">If your build has multiple steps, Earthly:</p>
+            <ul class="ml-8 list-disc">
+              <li class="pb-2">Builds a directed acyclic graph (DAG).</li>
+              <li class="pb-2">Isolates execution of each step.</li>
+              <li class="pb-2">Runs independent steps in parallel.</li>
+              <li class="pb-2">Caches results for future use.</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/benefits-speed.html b/website/_includes/faster-builds/benefits-speed.html
@@ -0,0 +1,65 @@
+<div class="w-full">
+  <div class="px-6 lg:px-10 max-w-7xl m-auto">
+    <div class="py-6 px-6 lg:px-10 rounded-xl bg-[#f1fbff] pb-10 mt-6">
+      <div>
+        <div class="text-2xl lg:text-3xl font-semibold mb-6">
+          Ridiculously fast builds!
+        </div>
+        <div class="lg:grid grid-cols-10">
+          <div class="bg-white col-span-5 rounded-xl overflow-hidden shadow-md px-6 lg:px-10 pt-4 pb-28 lg:pb-20 relative">
+            <div class="text-xl lg:text-2xl text-gray-600 mb-2">
+              CI w/ Earthly Cloud <span class="text-gray-600/50">vs</span> CI w/o Earthly Cloud
+            </div>
+
+            <div class="grid grid-cols-10 border-b pb-2 border-gray-300">
+              <div class="col-span-8 lg:col-span-7">
+                <div class="h-2 w-[7%] bg-orange-500/90 rounded-xl mt-8"></div>
+                <div class="mt-1.5 text-black/70">Earthly Cloud - up to</div>
+              </div>
+              <div class="mt-1.5 text-orange-500/90 text-5xl col-span-2 lg:col-span-3 flex items-center justify-end lg:pr-12">
+                20x
+              </div>
+            </div>
+
+            <div class="grid grid-cols-10 border-b pb-2 border-gray-300">
+              <div class="col-span-8 lg:col-span-7">
+                <div class="h-2 w-[50%] bg-blue-500 rounded-xl mt-8"></div>
+                <div class="mt-1.5 text-black/70">Earthly Cloud - minimum</div>
+              </div>
+              <div class="mt-1.5 text-blue-500 text-5xl col-span-2 lg:col-span-3 flex items-center justify-end lg:pr-12">
+                2x
+              </div>
+            </div>
+
+            <div class="grid grid-cols-10 border-b pb-2 border-gray-300">
+              <div class="col-span-8 lg:col-span-7">
+                <div class="h-2 w-[100%] bg-gray-300 rounded-xl mt-8"></div>
+                <div class="mt-1.5 text-black/70">Traditional CI</div>
+              </div>
+              <div class="mt-1.5 text-gray-300 text-5xl col-span-2 lg:col-span-3 flex items-center justify-end lg:pr-12">
+                1x
+              </div>
+            </div>
+
+            <div class="absolute bottom-3 left-4 lg:left-10">
+              <div class="text-sm text-slate-400/80 relative top-2 mb-2">
+                Lines represent build time in seconds.
+              </div>
+              <div class="text-sm text-slate-400/50">
+                Based on build speeds reported by our users
+              </div>
+            </div>
+          </div>
+          <ul class="text-gray-500 text-lg pt-8 lg:pt-0 pl-4 col-span-5 lg:pl-12 list-disc">
+            <li class="pb-2">2-20x faster builds in CI</li>
+            <li class="pb-2">Rebuild only what has changed</li>
+            <li class="pb-2">Automatic parallel execution</li>
+            <li class="pb-2">Automatic caching with no configuration required</li>
+            <li class="pb-2">Like layer caching, but for the entire pipeline, not just for images</li>
+            <li>No upload/download of cache – instantly available</li>               
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/benefits-title.html b/website/_includes/faster-builds/benefits-title.html
@@ -0,0 +1,10 @@
+<div class="w-full">
+  <div class="px-6 lg:px-10 pt-4 max-w-7xl m-auto">
+    <div class="text-3xl lg:text-4xl font-semibold">
+      Automatic Caching and Parallelism for Faster Builds
+    </div>
+    <div class="text-xl lg:text-2xl text-slate-500 pt-1 pb-3">
+      Super simple to use. Works seamlessly with any CI and your laptop.
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/benefits-turbocharger.html b/website/_includes/faster-builds/benefits-turbocharger.html
@@ -0,0 +1,26 @@
+<div class="w-full">
+  <div class="px-6 lg:px-10 max-w-7xl m-auto">
+    <div class="py-6 px-6 lg:px-10 rounded-xl bg-[#f1fbff] pb-10 mt-6">
+      <div>
+        <div class="text-2xl lg:text-3xl font-semibold mb-6">
+          Earthly Satellites: The turbocharger
+        </div>
+
+        <div class="flex flex-col-reverse lg:grid grid-cols-10">
+          <ul class="text-gray-500 text-lg col-span-5 lg:pr-6 pt-8 lg:pt-0 ml-4 list-disc">
+            <li class="pb-2">SaaS remote build runners. Included with Earthly Cloud</li>
+            <li class="pb-2">Instantly available build cache – no download or upload</li>
+            <li class="pb-2">Supports both x86 and arm64 builds natively</li>
+            <li>Works seamlessly with any CI</li>
+          </ul>
+
+          <img
+            class="w-full bg-white col-span-5 lg:px-10 rounded-xl shadow-md"
+            src="../../assets/svg/turbocharger.svg"
+            alt="Compatible with every language, framework, and build tool"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/call-to-action.html b/website/_includes/faster-builds/call-to-action.html
@@ -0,0 +1,21 @@
+<div class="flex flex-col items-center max-w-lg mx-auto mb-6 lg:mb-12 -mt-20 md:-mt-32 px-6 lg:px-10">
+  <div class="text-center text-slate-400 text-xl">
+    Consistent, Faster Builds
+  </div>
+  <a
+    href="https://cloud.earthly.dev/login"
+    class="my-0.5 lg:my-2 py-6 text-2xl text-center cursor-pointer shadow-sm text-white bg-[#2d7e5d] hover:bg-[#2d7e5d] rounded-lg w-full inline-block"
+    onclick="earthlyCoreTryEarthlyClick()"
+  >
+    Get Started Free
+  </a>
+</div>
+
+<script>
+  function earthlyCoreTryEarthlyClick() {
+    analytics.track('faster-builds-get-started-free-click', {
+      category: 'Get Started Free Click',
+      label: 'faster-builds-get-started-free-click'
+    });
+  }
+</script>
diff --git a/website/_includes/faster-builds/cta-button.html b/website/_includes/faster-builds/cta-button.html
@@ -0,0 +1,30 @@
+<div class="w-full mt-2">
+  <div class="px-6 lg:px-10 pt-4 max-w-7xl m-auto">
+    <div class="bg-[#f1fbff] flex flex-col items-center px-6 rounded-lg">
+      <p class="font-semibold pt-14 text-4xl text-center tracking-tight">
+        Get Started with Earthly Cloud now!
+      </p>
+
+      <p class="pt-6 text-center text-slate-400 text-xl">
+        Consistent, Fast Builds in the Cloud
+      </p>
+
+      <a
+        href="https://cloud.earthly.dev/login"
+        class="w-full max-w-md mb-20 mt-4 py-6 text-2xl text-center cursor-pointer shadow-sm text-white bg-[#2d7e5d] hover:bg-[#2d7e5d] rounded-lg inline-block"
+        onclick="bottomCtaTryEarthlySatellitesClick()"
+      >
+        Get Started Free
+      </a>
+    </div>
+  </div>
+</div>
+
+<script>
+  function bottomCtaTryEarthlySatellitesClick() {
+    analytics.track("faster-builds-bottom-cta-get-started-free-click", {
+      category: "Get Started Free Click",
+      label: "faster-builds-bottom-cta-get-started-free-click",
+    });
+  }
+</script>
diff --git a/website/_includes/faster-builds/featured.html b/website/_includes/faster-builds/featured.html
@@ -0,0 +1,61 @@
+<div class="w-full mb-12">
+  <div class="flex flex-col md:flex-row gap-5 max-w-7xl mt-20 md:mt-12 mx-auto px-6 lg:px-10">
+    <div class="bg-[#f1fbfe] flex flex-col-reverse flex-1 pb-8 pt-6 px-6 rounded-xl">
+      <div class="flex-1 mt-6">
+        <p class="color-[#475569] font-semibold text-sm tracking-tight">October 2023</p>
+
+        <p class="color-[#475569] font-semibold mt-2 text-2xl tracking-tight">What makes Earthly fast</p>
+
+        <p class="mt-4 text-[#6b7280] text-lg tracking-tight">
+          Earthly makes CI/CD builds faster by reusing computation from previous
+          runs for parts of the build that have not changed. This can be a game
+          changer in terms of developer productivity gained...
+        </p>
+
+        <a class="inline-block mt-4" href="/blog/what-makes-earthly-fast/">
+          <div class="w-fit decoration-[#2d7e5d] flex items-center hover:underline">
+            <p class="font-bold text-[#2d7e5d]">Read more</p>
+            <img class="ml-1" src="assets/svg/chevron-green.svg" alt="Chevron" />
+          </div>
+        </a>
+      </div>
+
+      <div>
+        <img
+          class="w-full md:h-[200px] object-cover object-top rounded-lg"
+          src="https://earthly.dev/blog/generated/assets/images/what-makes-earthly-fast/header-2560-fc9666ed4.webp"
+          alt="What makes Earthly fast"
+        />
+      </div>
+    </div>
+
+    <div class="bg-[#f1fbfe] flex flex-col-reverse flex-1 pb-8 pt-6 px-6 rounded-xl">
+      <div class="flex-1 mt-6">
+        <p class="color-[#475569] font-semibold text-sm tracking-tight">October 2023</p>
+
+        <p class="color-[#475569] font-semibold mt-2 text-2xl tracking-tight">A biased take on the ROI of fast</p>
+
+        <p class="mt-4 text-[#6b7280] text-lg tracking-tight">
+          TLDR: In my totally bias role as one of Earthly’s creators, I believe
+          that with Earthly: You’ll directly cut down on build expenses as
+          builds run faster. Developers will save substantial time, translating...
+        </p>
+
+        <a class="inline-block mt-4" href="/blog/the-roi-of-fast/">
+          <div class="w-fit decoration-[#2d7e5d] flex items-center hover:underline">
+            <p class="font-bold text-[#2d7e5d]">Read more</p>
+            <img class="ml-1" src="assets/svg/chevron-green.svg" alt="Chevron" />
+          </div>
+        </a>
+      </div>
+
+      <div>
+        <img
+          class="w-full md:h-[200px] object-cover object-top rounded-lg"
+          src="https://earthly.dev/blog/generated/assets/images/the-roi-of-fast/header-2560-553a684cd.webp"
+          alt="A biased take on the ROI of fast"
+        />
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/faster-builds/hero.html b/website/_includes/faster-builds/hero.html
@@ -0,0 +1,17 @@
+<main class="flex flex-col justify-center text-center wave-main relative z-0 overflow-hidden lg:my-2">
+  <h1 class="relative z-10 mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+    <span class="relative text-[#2d7e5d]">
+      <span class="relative block">Faster Builds with Earthly</span>
+    </span>
+  </h1>
+
+  <p class="relative lg:leading-8 z-10 mx-auto mt-10 max-w-lg text-xl tracking-tight px-4 lg:px-0 text-slate-600">
+    Make your builds faster with Earthly and Earthly Cloud.<br />
+    Automatic caching and parallel execution.<br />
+    Works seamlessly with any CI.
+  </p>
+
+  <div class="wave"></div>
+  <div class="wave"></div>
+  <div class="wave"></div>
+</main>
diff --git a/website/_includes/solutions/solutions.html b/website/_includes/solutions/solutions.html
@@ -21,6 +21,27 @@
     <img class="w-full md:w-fit lg:h-[260px]" src="assets/svg/automate-ci.svg" alt="" />
   </div>
 
+  <div class="bg-[#e9f8ff] border border-[#ededed] flex flex-col-reverse md:flex-row items-center mt-8 p-4 lg:p-2 rounded-md">
+    <div class="flex-1 mt-4 md:mt-0 md:pr-10 lg:pl-4 lg:pr-14">
+      <div class="font-bold text-[#475569] text-2xl tracking-tight">
+        Faster Builds with Earthly
+      </div>
+      <div class="mt-4 text-[#6b7280] text-lg tracking-tight">
+        Make your builds faster with Earthly and Earthly Cloud. Automatic
+        caching and parallel execution. Works seamlessly with any CI.
+      </div>
+
+      <a href="/faster-builds" class="inline-block mt-6">
+        <div class="w-fit cursor-pointer decoration-[#2d7e5d] flex items-center hover:underline">
+          <p class="font-bold text-[#2d7e5d] text-lg tracking-tight">Learn More</p>
+          <img class="ml-1" src="assets/svg/chevron-green.svg" alt="Chevron" />
+        </div>
+      </a>
+    </div>
+
+    <img class="w-full md:w-fit lg:h-[260px] bg-white rounded-2xl" style="width: 366px" src="assets/svg/faster-builds.svg" alt="" />
+  </div>
+
 <!--
   <div class="gap-5 flex flex-wrap justify-center mt-5">
     {% for item in site.data.solutions %}

diff --git a/website/assets/css/index.46bb9c26.css b/website/assets/css/index.46bb9c26.css
diff --git a/website/assets/svg/advanced-caching.svg b/website/assets/svg/advanced-caching.svg