Feature rebrand Landscape (#14590)

* rebrand /landscape * updated quote image * review design changes * review changes * WD-16842 Redirect /landscape/install to Docs (#14582) * Remove /landscape/install and redirect to docs * Point install to docs in navigation --------- Co-authored-by: Muhammad Ali <[email protected]> * WD-16840 Rebranded /landscape/pricing page (#14581) * Rebrand /landscape/pricing 1. Rename pricing to compare 2. Add redirect from pricing to compare * Updated asset * Applied UX review suggestions --------- Co-authored-by: Muhammad Ali <[email protected]> * WD-16838 Rebranded /landscape/managed page (#14580) * Rebranded /landscape/managed page * Applied design review suggestions * Triggering deployment * Applied UX review suggestions * Added a link * Applied code review suggestions * Enclose image module in a wrapper * Removed unnecessary spacing --------- Co-authored-by: Muhammad Ali <[email protected]> * WD-16836 Rebranded /landscape/features page (#14576) * Rebranded /landscape/features page * Applied UX review suggestions * Applied design review changes * lazy load images not in viewport * Code review changes * Added different assets for different screen sizes --------- Co-authored-by: Muhammad Ali <[email protected]> --------- Co-authored-by: immortalcodes <[email protected]> Co-authored-by: Madhur Jain <[email protected]> Co-authored-by: Muhammad Ali <[email protected]>
canonical · Dec 20, 2024 · 4c52b5b · 4c52b5b
1 parent 901b349
commit 4c52b5b
Show file tree

Hide file tree

Showing 9 changed files with 997 additions and 1,514 deletions.
diff --git a/navigation.yaml b/navigation.yaml
@@ -647,10 +647,10 @@ landscape:
       path: /landscape/features
     - title: Managed
       path: /landscape/managed
-    - title: Pricing
-      path: /landscape/pricing
+    - title: Compare
+      path: /landscape/compare
     - title: Install
-      path: /landscape/install
+      path: /landscape/docs/quickstart-deployment
     - title: Docs
       path: /landscape/docs
     - title: Log in to Landscape

diff --git a/redirects.yaml b/redirects.yaml
@@ -579,6 +579,8 @@ kubuntu/simple/oneiric/desktop/kubuntu-11\.10-desktop-amd64\.iso\.torrent/?: "ht
 kubernetes/features/?: "/kubernetes/charmed-k8s"
 kubernetes/partners/?: "/kubernetes"
 kubernetes/cloud-native-kubernetes-usage-report-2021/?: "https://juju.is/cloud-native-kubernetes-usage-report-2021"
+landscape/pricing: "/landscape/compare"
+landscape/install: "/landscape/docs/quickstart-deployment"
 legal/bootstack/?:  "/legal/managed-services"
 legal/dataprivacy(?P<page>.*)/?: "/legal/data-privacy{page}"
 legal/data-privacy-enquiry/?: "/legal/data-privacy/enquiry"

diff --git a/templates/landscape/base_landscape.html b/templates/landscape/base_landscape.html
@@ -1,6 +1,12 @@
 {% extends "templates/base.html" %}
 
-{% block meta_copydoc %}https://drive.google.com/drive/u/0/folders/1FOi_1qlPlEZKd5cmSjrCWPrmYDfBVUGP{% endblock meta_copydoc %}
+{% block meta_copydoc %}
+  https://drive.google.com/drive/u/0/folders/1FOi_1qlPlEZKd5cmSjrCWPrmYDfBVUGP
+{% endblock meta_copydoc %}
+
+{% block body_class %}
+  is-paper
+{% endblock body_class %}
 
 {% block outer_content %}
   {% block content %}{% endblock %}

diff --git a/templates/landscape/compare.html b/templates/landscape/compare.html
@@ -0,0 +1,191 @@
+{% extends "landscape/base_landscape.html" %}
+
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
+{% block title %}Compare Landscape editions{% endblock %}
+
+{% block meta_description %}
+  Features and pricing for each Landscape edition: Landscape SaaS, self hosted Landscape, and Managed Landscape
+{% endblock meta_description %}
+
+{% block meta_copydoc %}
+  https://docs.google.com/document/d/1pESmRniuiaDHkbzY_60GlOJdCiH2pZ9erI9KV49eDyM/edit#
+{% endblock meta_copydoc %}
+
+{% block content %}
+
+  <section class="p-section--hero u-no-padding--bottom">
+    {% call(slot) vf_hero(
+      title_text='Choose the best Landscape for you',
+      layout='50/50',
+      is_split_on_medium=true
+      ) -%}
+      {%- if slot == 'description' -%}
+        <p class="u-no-padding--top">
+          You can choose <a href="https://landscape.canonical.com/signup">Landscape</a> that’s maintained by Canonical, as a Managed App, or self-hosted. It is available for free for up to five Ubuntu instances, with an <a href="/pro">Ubuntu Pro subscription</a>, or as part of your package if you choose the Managed App.
+        </p>
+      {%- endif -%}
+      {%- if slot == 'image' -%}
+        <div class="p-image-container--3-2 is-cover">
+          {{ image(url="https://assets.ubuntu.com/v1/e3ebaa20-hero-img-iot-magnified.png",
+                    alt="",
+                    width="1200",
+                    height="752",
+                    hi_def=True,
+                    loading="lazy",
+                    attrs={"class": "p-image-container__image"}) | safe
+          }}
+        </div>
+      {%- endif -%}
+    {% endcall -%}
+  </section>
+
+  <section class="p-section">
+    <div class="u-fixed-width">
+      <hr class="p-rule" />
+      <div class="p-section--shallow">
+        <h2>Compare Landscape options</h2>
+      </div>
+      <div class="u-table-horizontal-scroll">
+        <table aria-label="Pricing comparison table"
+               style="table-layout: unset"
+               class="u-table-horizontal-scroll__table">
+          <thead>
+            <tr>
+              <th>Feature</th>
+              <th>
+                Landscape SaaS
+                <br />
+                <span class="u-text--muted">Maintained by Canonical</span>
+              </th>
+              <th>
+                Managed Landscape
+                <br />
+                <span class="u-text--muted">Runs anywhere, <a href="/landscape/managed">Learn more</a></span>
+              </th>
+              <th>
+                Self-hosted Landscape
+                <br />
+                <span class="u-text--muted">Bring your own SSO</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Managed by Canonical</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>-</td>
+            </tr>
+            <tr>
+              <td>Canonical SLA</td>
+              <td>-</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>-</td>
+            </tr>
+            <tr>
+              <td>Works without internet</td>
+              <td>-</td>
+              <td>-</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+            <tr>
+              <td>Repository management</td>
+              <td>-</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+            <tr>
+              <td>Bring your own SSO and IAM</td>
+              <td>-</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+            <tr>
+              <td>Software and hardware inventory</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+            <tr>
+              <td>Compliance and reporting</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+            <tr>
+              <td>Security and hardening</td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+              <td>
+                <i class="p-icon--success">Included</i>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <hr class="p-rule is-fixed-width" />
+
+  <section class="p-strip is-deep">
+    <div class="u-fixed-width">
+      <div class="p-section--shallow">
+        <h2>
+          Learn more about Landscape
+          <br class="u-hide--small" />
+          and our professional services options.
+        </h2>
+      </div>
+      <div class="p-cta-block">
+        <a href="/contact-us" class="p-button--positive js-invoke-modal">Contact us</a>
+        <a href="/landscape/install">Install Landscape Server with quickstart mode&nbsp;&rsaquo;</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Set default Marketo information for contact form below-->
+  <div class="u-hide"
+       id="contact-form-container"
+       data-form-location="/shared/forms/interactive/landscape"
+       data-form-id="4473"
+       data-lp-id=""
+       data-return-url="/landscape/compare"
+       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+
+  <script src="/static/js/src/landscape-saas-form.js"></script>
+
+{% endblock content %}