Docs: add Spotlights and Testimonials section for landing page (#389)

* Draft * Keep media queries at the end + get rid of dduplicate values * Open external links in a separate window * Minors * Remove paragraph from Hero + add links * Update img * Remove unnecessary * Layout adjustment * Change animated logo position * Shrink space between sections in mobile
2026-10-22 03:24:40 +02:00 · 2023-01-31 11:12:20 -05:00
parent 31b106a67a
commit 9c48d66674
8 changed files with 459 additions and 108 deletions
@@ -1,43 +1,21 @@
 .tx-container {
-  background:
-    linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-default-bg-color) 100%)
+  background: linear-gradient(
+    to bottom,
+    var(--md-primary-fg-color),
+    var(--md-default-bg-color) 100%
+  );
 }
-
-[data-md-color-scheme=slate] .tx-container {
-  background:
-    linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-default-bg-color) 100%)
+[data-md-color-scheme="slate"] .tx-container {
+  background: linear-gradient(
+    to bottom,
+    var(--md-primary-fg-color),
+    var(--md-default-bg-color) 100%
+  );
 }

 .tx-landing {
-  margin: 0 .8rem;
-  color: var(--md-primary-bg-color)
-}
-
-.tx-landing h1 {
-  margin-bottom: 1rem;
-  color: currentColor;
-  font-weight: 700
-}
-
-@media screen and (max-width: 30em) {
-  .tx-landing h1 {
-    font-size: 1.4rem
-  }
-}
-
-.tx-landing__content p a {
-  color: inherit;
-  text-decoration: underline;
-}
-
-.tx-landing__testimonials {
-  width: 100%;
-  text-align: center;
-}
-
-.tx-landing__content p a:hover {
-  color: darkblue;
-  text-decoration: underline;
+  margin: 0 0.8rem;
+  color: var(--md-primary-bg-color);
 }

 .tx-landing__logos {
@@ -47,6 +25,23 @@
  justify-content: center;
 }

+.tx-landing__quote {
+  display: flex;
+  border-radius: 1em;
+  padding: 1em 1em 5em 1em;
+  text-align: center;
+  background: var(--md-primary-fg-color);
+}
+
+.tx-landing__quote blockquote {
+  border: 0;
+  color: #fff;
+}
+
+.tx-landing__quotes figure {
+  margin: 2em auto 2em auto;
+}
+
 .tx-landing__logos img {
  height: 8vh;
  max-height: 81px; /* max height of images */
@@ -55,33 +50,6 @@
  vertical-align: middle;
 }

-.tx-landing__quotes {
-  padding-bottom: 5em;
-  text-align: center;
-}
-
-@media screen and (min-width: 60em) {
-  .tx-landing__quotes {
-    margin: 1em 5em;
-  }
-}
-
-.tx-landing__quotes figure {
-  margin: 2em auto 2em auto;
-}
-
-.tx-landing__quote {
-  display: flex;
-  border-radius: 1em;
-  padding: 1em 1em 0 1em;
-  background: var(--md-primary-fg-color);
-}
-
-.tx-landing__quote blockquote {
-  border: 0;
-  color: #fff;
-}
-
 .tx-landing__quote a img {
  height: 6vh;
  max-height: 81px; /* max height of images */
@@ -90,17 +58,177 @@
  margin-right: auto;
 }

+.tx-landing__content p a {
+  color: inherit;
+  text-decoration: underline;
+}
+.tx-landing__content p a:hover {
+  color: darkblue;
+  text-decoration: underline;
+}
+
+.tx-landing .md-button {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  color: var(--md-primary-bg-color);
+}
+.tx-landing .md-button:hover,
+.tx-landing .md-button:focus {
+  color: var(--md-default-bg-color);
+  background-color: var(--md-default-fg-color);
+  border-color: var(--md-default-fg-color);
+}
+
+.tx-landing__testimonials {
+  width: 100%;
+  text-align: center;
+}
+
+.tx-landing h1 {
+  margin-bottom: 1rem;
+  color: currentColor;
+  font-weight: 700;
+}
+
+.md-typeset h2 + h3 {
+  font-size: 1em;
+  margin-top: -0.8em;
+}
+
+.md-typeset figure {
+  display: flex;
+}
+
+.md-content header {
+  display: block;
+}
+
+.mdx-spotlight {
+  margin: 2em 0;
+}
+
+.mdx-spotlight__feature {
+  display: flex;
+  flex: 1 0 48%;
+  flex-flow: row nowrap;
+  gap: 3.2rem;
+  margin: 0 0 3.2rem;
+}
+.mdx-spotlight__feature:last-child {
+  margin-bottom: 1em;
+}
+
+.mdx-spotlight__feature > img {
+  display: block;
+  flex-shrink: 0;
+  border-radius: 0.2rem;
+  box-shadow: var(--md-shadow-z2);
+  width: 25rem;
+  max-width: 100%;
+}
+
+.mdx-spotlight__feature figcaption {
+  margin-top: 0.8rem;
+}
+
+.mdx-parallax__group {
+  background-color: var(--md-default-bg-color);
+  color: var(--md-typeset-color);
+  display: block;
+  position: relative;
+  transform-style: preserve-3d;
+}
+.mdx-parallax__group:first-child {
+  background-color: initial;
+  contain: strict;
+  height: 140vh;
+}
+.mdx-parallax__group:last-child {
+  background-color: var(--md-default-bg-color);
+}
+
+.mdx-users {
+  display: flex;
+  gap: 3.2rem;
+  margin: 2.4rem 0;
+}
+
+.mdx-users__testimonial {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1.2rem;
+  margin: 0;
+  text-align: center;
+}
+
+.mdx-users__testimonial img {
+  border-radius: 5rem;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  width: 10rem;
+}
+
+.mdx-users__testimonial figcaption {
+  display: block;
+}
+
+.mdx-users__testimonial hr {
+  margin-left: auto;
+  margin-right: auto;
+  width: 5rem;
+}
+
+.mdx-users__testimonial cite {
+  display: block;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  text-align: justify;
+}
+
+/* General media */
+@media screen and (max-width: 30em) {
+  .tx-landing h1 {
+    font-size: 1.4rem;
+  }
+}
+
+@media screen and (max-width: 59.9375em) {
+  .mdx-spotlight__feature {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .mdx-spotlight__feature > img {
+    margin-left: auto;
+    margin-right: auto;
+    height: auto;
+  }
+
+  .mdx-users {
+    flex-direction: column;
+  }
+
+  /* Reset one padding between sections */
+  .md-content__inner-testimonials {
+    padding: 0px 0px 2.2rem !important;
+  }
+}
+
@media screen and (min-width: 60em) {
  .tx-container {
-    padding-bottom: 14vw
+    padding-bottom: 7vw;
  }

  .tx-landing {
    display: flex;
-    align-items: stretch
+    align-items: stretch;
+    height: 85%;
  }

  .tx-landing__content {
+    align-self: center;
    max-width: 19rem;
    margin-top: 3.5rem;
  }
@@ -108,24 +236,56 @@
  .tx-landing__image {
    order: 1;
    width: 38rem;
-    transform: translateX(4rem)
+  }
+
+  .tx-landing__quotes {
+    margin: 1em 5em;
+  }
+
+  .mdx-spotlight__feature:nth-child(odd) {
+    flex-direction: row-reverse;
  }
 }

-@media screen and (min-width: 77em) {
-  .tx-landing__image {
-    transform: translateX(8rem)
+/* Extra media for .mdx-parallax__group:first-child */
+@media (min-width: 125vh) {
+  .mdx-parallax__group:first-child {
+    height: 120vw;
  }
 }

-.tx-landing .md-button {
-  margin-top: .5rem;
-  margin-right: .5rem;
-  color: var(--md-primary-bg-color)
+@media (min-width: 137.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 125vw;
+  }
 }

-.tx-landing .md-button:hover, .tx-landing .md-button:focus {
-  color: var(--md-default-bg-color);
-  background-color: var(--md-default-fg-color);
-  border-color: var(--md-default-fg-color)
+@media (min-width: 150vh) {
+  .mdx-parallax__group:first-child {
+    height: 130vw;
+  }
+}
+
+@media (min-width: 162.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 135vw;
+  }
+}
+
+@media (min-width: 175vh) {
+  .mdx-parallax__group:first-child {
+    height: 140vw;
+  }
+}
+
+@media (min-width: 187.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 145vw;
+  }
+}
+
+@media (min-width: 200vh) {
+  .mdx-parallax__group:first-child {
+    height: 150vw;
+  }
 }
@@ -1,11 +1,22 @@
 {% extends "base.html" %}

 <!-- Render landing page under tabs -->
-{% block tabs %}
-{{ super() }}
+{% block tabs %} {{ super() }}

 <!-- Additional styles for landing page -->
 <style>
+  body {
+    overflow-x: hidden;
+  }
+
+  .md-content__inner {
+    margin-bottom: 0;
+    padding: 2.2rem 0;
+  }
+
+  .md-content__inner:before {
+    display: none;
+  }

  /* Application header should be static for the landing page */
  .md-header {
@@ -17,11 +28,38 @@
    margin: 0;
  }

-  /* Hide main content for now */
-  .md-content {
+  /* Hide sidebar, preventing unnecessary margins on the page */
+  .md-main__inner > .md-content,
+  .md-main__inner > .md-sidebar--secondary {
    display: none;
  }

+  /* Prevent removing default title on the page */
+  .md-content__inner h1:first-child {
+    display: block;
+  }
+
+  .tx-landing__image {
+    margin-top: 45px;
+  }
+
+  /* Prevent layout shift after image loading */
+  .tx-landing__image dotlottie-player {
+    aspect-ratio: 1.66;
+  }
+
+  @media (max-width: 959px) {
+    .tx-landing__image {
+      margin-bottom: 10px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .md-typeset .headerlink {
+      display: none;
+    }
+  }
+
  /* Hide table of contents */
  @media screen and (min-width: 60em) {
    .md-sidebar--secondary {
@@ -38,6 +76,7 @@
 </style>

 <!-- landing page for landing page -->
+<!-- Hero -->
 <section class="tx-container">
  <div class="md-grid md-typeset">
    <div class="tx-landing">
@@ -47,44 +86,196 @@
        <dotlottie-player
          src="/assets/animations/TartLogo.lottie"
          mode="normal"
-          style="width: 75%; margin: auto;"
+          style="width: 75%; margin: auto"
          autoplay
        />
      </div>

      <!-- landing content -->
      <div class="tx-landing__content">
-        <h2><strong>Tart</strong> is a virtualization toolset to build, run and manage <i>macOS</i> and <i>Linux</i> virtual machines on <i>Apple Silicon.</i></h2>
-        <p>
-          Tart utilizes <i>Virtualization.Framework</i> to achieve nearly native performance.
-          Benefit from clean ephemeral environments for your automations with no performance implications.
-        </p>
-        <p>
-          For storing virtual machine images Tart integrates with OCI-compatible container registries.
-          Push and pull virtual machines like you used to with Docker containers.
-        </p>
-        <p>
-          Tart powers several continuous integration systems including <a href="/github-actions">on-demand GitHub Actions</a>
-          and <a href="https://cirrus-ci.org/guide/macOS/">Cirrus CI</a>. Tart can be easily <a href="/cirrus-cli">integrated with any other CI</a>
-          and soon will get <a href="https://github.com/cirruslabs/tart/issues/372">clustering capabilities</a>
-          to orchestrate virtual machines on multiple physical hosts.
-        </p>
-        <a
-          href="/quick-start"
-          title="Quick Start"
-          class="md-button"
-        >
+        <h2>
+          <strong>Tart</strong> is a virtualization toolset to build, run and
+          manage <i>macOS</i> and <i>Linux</i> virtual machines on
+          <i>Apple Silicon.</i>
+        </h2>
+        <a href="/quick-start" title="Quick Start" class="md-button">
          Learn More
        </a>
      </div>
    </div>
  </div>
 </section>
+
+<!-- Spotlights -->
+<section class="mdx-parallax__group" data-md-color-scheme="default">
+  <div class="md-content md-grid" data-md-component="content">
+    <div class="md-content__inner">
+      <header class="md-typeset">
+        <h1 id="virtualization-and-beyond">
+          Virtualization and beyond
+          <a
+            href="#virtualization-and-beyond"
+            class="headerlink"
+            title="Permanent link"
+          >
+            ¶
+          </a>
+        </h1>
+      </header>
+      <div class="mdx-spotlight">
+        <figure class="mdx-spotlight__feature">
+          <img
+            src="assets/images/spotlight/virtualization-framework.png"
+            alt="Apple’s native Virtualization.Framework"
+            loading="lazy"
+            width="500"
+            height="212"
+          />
+          <figcaption class="md-typeset">
+            <h2>Native performance</h2>
+            <p>
+              Tart is&nbsp;using Apple&rsquo;s native
+              <i>Virtualization.Framework</i> that was developed along with
+              architecting the first M1&nbsp;chip. This seamless integration
+              between hardware and software ensures smooth performance without
+              any drawbacks.
+            </p>
+          </figcaption>
+        </figure>
+        <figure class="mdx-spotlight__feature">
+          <img
+            src="assets/images/spotlight/supported-registries.png"
+            alt="OCI-compatible container registries"
+            loading="lazy"
+            width="500"
+            height="160"
+          />
+          <figcaption class="md-typeset">
+            <p>
+              For storing virtual machine images Tart integrates with
+              OCI-compatible container registries. Work with virtual machines as
+              you used to&nbsp;with Docker containers.
+            </p>
+          </figcaption>
+        </figure>
+        <figure class="mdx-spotlight__feature">
+          <img
+            src="assets/images/spotlight/github-actions runners.png"
+            alt="GitHub Actions Runners"
+            loading="lazy"
+            width="500"
+            height="280"
+          />
+          <figcaption class="md-typeset">
+            <p>
+              Tart powers several continuous integration systems including
+              <a href="/github-actions"
+                >on&#8209;demand GitHub Actions Runners</a
+              >
+              and
+              <a href="https://cirrus-ci.org/guide/macOS/" target="_blank"
+                >Cirrus&nbsp;CI</a
+              >. Double the performance of&nbsp;your macOS actions with
+              a&nbsp;couple lines of&nbsp;code.
+            </p>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Testimonials -->
+<section class="mdx-parallax__group" data-md-color-scheme="default">
+  <div class="md-content md-grid" data-md-component="content">
+    <div class="md-content__inner md-content__inner-testimonials">
+      <header class="md-typeset">
+        <h1 id="what-our-users-say">
+          What our users say
+          <a
+            href="#what-our-users-say"
+            class="headerlink"
+            title="Permanent link"
+          >
+            ¶
+          </a>
+        </h1>
+      </header>
+      <div class="mdx-users">
+        <figure class="mdx-users__testimonial">
+          <img
+            src="assets/images/users/seb-jachec.jpg"
+            alt="Sebastian Jachec"
+            loading="lazy"
+            width="200"
+            height="200"
+          />
+          <figcaption class="md-typeset">
+            <h2>Sebastian Jachec</h2>
+            <h3>
+              Mobile Engineer at
+              <a href="https://daybridge.com/" target="_blank">Daybridge</a>
+            </h3>
+            <hr />
+            <cite>
+              It&rsquo;s been plain-sailing with the
+              <a href="/github-actions">Cirrus Runners</a>&nbsp;&mdash;
+              they&rsquo;ve been great! They&rsquo;re consistently&nbsp;60+%
+              faster on&nbsp;workflows that we&nbsp;previously used Github
+              Actions&rsquo; macOS runners for.
+            </cite>
+          </figcaption>
+        </figure>
+        <figure class="mdx-users__testimonial">
+          <img
+            src="assets/images/users/mikhail-tokarev.jpeg"
+            alt="Mikhail Tokarev"
+            loading="lazy"
+            width="200"
+            height="200"
+          />
+          <figcaption class="md-typeset">
+            <h2>Mikhail Tokarev</h2>
+            <h3>
+              CTO at
+              <a href="https://codemagic.io/start/" target="_blank"
+                >Codemagic</a
+              >
+            </h3>
+            <hr />
+            <cite>
+              Thanks to the minimal overhead of using the Apple Virtualization
+              API, we’ve seen some performance improvements in booting new
+              virtual machines compared with Anka.
+            </cite>
+          </figcaption>
+        </figure>
+        <figure class="mdx-users__testimonial">
+          <img
+            src="assets/images/users/max-lapides.jpeg"
+            alt="Max Lapides"
+            loading="lazy"
+            width="200"
+            height="200"
+          />
+          <figcaption class="md-typeset">
+            <h2>Max Lapides</h2>
+            <h3>
+              Senior Mobile Engineer at
+              <a href="https://www.tonal.com/" target="_blank">Tonal</a>
+            </h3>
+            <hr />
+            <cite>
+              Previously, we were using the GitHub&#8209;hosted macOS runners
+              and our iOS build took ~30&nbsp;minutes. Now with
+              <a href="/github-actions">Cirrus Runners</a>, the iOS build only
+              takes ~12&nbsp;minutes. That’s a huge boost to our productivity,
+              and for only $150/month per runner it is much less expensive too.
+            </cite>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}
-
-<!-- Content -->
-{% block content %}{% endblock %}
-
-<!-- Application footer -->
-{% block footer %}{% endblock %}
-