WD-13781 - refresh pro section on /download/amd (#14192)

canonical · Aug 23, 2024 · db8dfbb · db8dfbb
1 parent 5c936a9
commit db8dfbb
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 156 deletions.
diff --git a/templates/download/amd/_ubuntu_pro_section.html b/templates/download/amd/_ubuntu_pro_section.html
@@ -0,0 +1,22 @@
+<hr  />
+<div class="row p-strip u-no-padding--top">
+  <div class="col-3">
+    <h3 class="p-heading--5 u-no-padding--top">Looking for more open source packages and efficient tools to manage your devices?</h3>
+  </div>
+  <div class="col-6">
+    <div class="p-image-container--16-9">
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/31848db6-ubuntu-pro-with-bg.jpg"
+           alt="Ubuntu Pro logo" />
+    </div>
+    <p class="p-heading--5">Get Ubuntu Pro for Devices</p>
+    <p>Pay a one-time fee per device and get 10 years of security maintenance.</p>
+    <ul class="p-list--divided is-homepage">
+      <li class="p-list__item has-bullet">Get fixes for critical vulnerabilities in under 24 hours</li>
+      <li class="p-list__item has-bullet">Make your compliance efforts faster and easier</li>
+      <li class="p-list__item has-bullet">Device management and patching automation included</li>
+      <li class="p-list__item has-bullet">Regular automated security updates for all your open source application packages</li>
+    </ul>
+    <a href="/pro/devices">Learn more about Ubuntu Pro for Devices&nbsp;&rsaquo;</a>
+  </div>
+</div>
diff --git a/templates/download/amd/_working_commercial_section.html b/templates/download/amd/_working_commercial_section.html
@@ -1,7 +1,7 @@
 {% block outer_content %}
     {% block content %}
+	<hr />
     <div class="row p-strip u-no-padding--top">
-		<hr class="col-9">
 		<div class="col-3">
 		  <h3 class="p-heading--5 u-no-padding--top"><strong>Are you working on a commercial project?</strong></h3>
 		</div>

diff --git a/templates/download/amd/index.html b/templates/download/amd/index.html
@@ -63,10 +63,10 @@ <h2 class="p-text--small-caps">Choose a board</h2>
               aria-label="AMD boards">
             <li>
               <button class="p-tabs__item"
-                      id="kria-k24"
+                      id="kira-k24-vision"
                       role="tab"
                       aria-selected="true"
-                      aria-controls="kria-k24-tab">Kria&trade; K24 SOMs</button>
+                      aria-controls="kira-k24-vision-tab">Kria&trade; K24 SOMs</button>
             </li>
             <li>
               <button class="p-tabs__item"
@@ -96,7 +96,7 @@ <h2 class="p-text--small-caps">Choose a board</h2>
           </ul>
           <form class="u-hide--large u-hide--medium">
             <select name="boardSelect" id="boardSelect">
-              <option value="kria-k24-tab" selected="">Kria&trade; K24 SOMs</option>
+              <option value="kira-k24-vision-tab" selected="">Kria&trade; K24 SOMs</option>
               <option value="kria-kv260-kr260-tab">Kria&trade; K26 SOMs</option>
               <option value="zynq-ultrascale-tab">Zynq&trade; UltraScale+&trade; MPSoC Development Boards</option>
               <option value="versal-adaptive-evaluation-kits-tab">Versal&trade; Adaptive SoC Evaluation Kit</option>

diff --git a/templates/download/amd/tab-1.html b/templates/download/amd/tab-1.html
@@ -1,7 +1,7 @@
 <div tabindex="0"
      role="tabpanel"
-     id="kria-k24-tab"
-     aria-labelledby="kria-k24"
+     id="kira-k24-vision-tab"
+     aria-labelledby="kira-k24-vision"
      aria-hidden="false">
   <div class="row p-strip is-shallow u-no-padding--top">
     <div class="col-3 col-medium-2">
@@ -24,8 +24,8 @@ <h2 class="u-hide--small">
       }}
     </div>
   </div>
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
     <div class="col-3 col-medium-2">
       <h3>Ubuntu Server 22.04 LTS</h3>
     </div>
@@ -52,25 +52,10 @@ <h3>Ubuntu Server 22.04 LTS</h3>
 
   {% include "download/amd/_working_commercial_section.html" %}
 
-  <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
-    <div class="col-3">
-      <h3 class="p-heading--5 u-no-padding--top">
-        <strong>Looking for more open source packages and efficient tools to manage your devices? Getting started with Ubuntu Pro </strong>
-      </h3>
-    </div>
-    <div class="col-6">
-      <p>
-        Ubuntu Pro for Devices provides a comprehensive subscription-based offering layering on Ubuntu that simplifies security for device deployments and ensures compliance with the Cyber Resilience Act (CRA). Ubuntu Pro for Devices provides up to 12 years of security maintenance for the entire Ubuntu operating system and over 20,000 popular open source packages, ranging from Python,  OpenJDK, OpenCV, MQTT, OpenSSL, Go, to Docker and Robot Operating System (ROS). Additionally, the subscription also provides device management capabilities through <a href="/landscape">Landscape</a>, Canonical's systems management tool, and access to <a href="/real-time">Real-time Ubuntu</a> for latency-critical use cases.
-      </p>
-      <p>
-        For more information, download the <a href="https://pages.ubuntu.com/rs/066-EOV-335/images/Ubuntu%20Pro%20for%20Devices%20DS%203.5.2024.pdf?version=0&_gl=1*1qkskcg*_gcl_au*OTM2OTYyNzYzLjE3MTI3NjA1NDE.&_ga=2.116749827.441616180.1716921234-595833515.1716921234">Ubuntu Pro for devices datasheet</a>, reach out to your distributor or contact Canonical directly.
-      </p>
-    </div>
-  </div>
+  {% include "download/amd/_ubuntu_pro_section.html" %}
 
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
     <div class="col-3">
       <h3 class="p-heading--5 u-no-padding--top">
         <strong>AMD Ubuntu Software Development Kit</strong>
@@ -117,8 +102,8 @@ <h3 class="p-heading--5 u-no-padding--top">
     </div>
   </div>
 
+  <hr />
   <div class="u-fixed-width">
-    <hr class="col-9" />
     <p>
       If you have any questions about the platform or would like information about our certification program, <a href="/download/contact-us" class="js-invoke-modal">contact us</a>.
     </p>

diff --git a/templates/download/amd/tab-2.html b/templates/download/amd/tab-2.html
@@ -26,8 +26,8 @@ <h2 class="u-hide--small">
       }}
     </div>
   </div>
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
     <div class="col-3 col-medium-2">
       <h3>Ubuntu Desktop 22.04 LTS</h3>
     </div>
@@ -61,16 +61,17 @@ <h3>Ubuntu Desktop 22.04 LTS</h3>
 
   {% include "download/amd/_working_commercial_section.html" %}
 
+  {% include "download/amd/_ubuntu_pro_section.html" %}
+
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
     <div class="col-3">
       <h3 class="p-heading--5 u-no-padding--top">
         <strong>AMD Ubuntu Software Development Kit</strong>
       </h3>
     </div>
     <div class="col-6">
       <p>Ubuntu developers targeting Kria&trade;KR260 and KV260 platform may also want to download the following files:</p>
-
       <table class="amd-table"
              aria-label="AMD Ubuntu Software Development Kit table">
         <thead>
@@ -109,8 +110,8 @@ <h3 class="p-heading--5 u-no-padding--top">
     </div>
   </div>
 
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9" />
     <div class="col-3">
       <h3>Ubuntu Desktop 20.04.3 LTS</h3>
     </div>
@@ -127,8 +128,8 @@ <h3>Ubuntu Desktop 20.04.3 LTS</h3>
     </div>
   </div>
 
+  <hr />
   <div class="row u-no-padding">
-    <hr class="col-9" />
     <div class="col-3">
       <h3 class="p-heading--5 u-no-padding--top">
         <strong>AMD Ubuntu Software Development Kit</strong>
@@ -174,8 +175,8 @@ <h3 class="p-heading--5 u-no-padding--top">
     </div>
   </div>
 
+  <hr />
   <div class="u-fixed-width">
-    <hr class="col-9" />
     <p>
       If you have any questions about the platform or would like information about our certification program, <a href="/download/contact-us" class="js-invoke-modal">contact us</a>.
     </p>
@@ -203,27 +204,18 @@ <h2 class="u-hide--small">
     </div>
   </div>
 
-  <div class="row p-strip is-shallow u-no-padding--top">
-
-    <hr class="col-9" />
-
+<hr />  
+<div class="row p-strip is-shallow u-no-padding--top">
     <div class="col-3 col-medium-2">
-
       <h3>Ubuntu Core 22 (Developer Preview)</h3>
-
     </div>
-
     <div class="col-6 col-medium-3">
       <p>
         The version of Ubuntu is meant for evaluation and development purposes only. It should not be used in production systems.
       </p>
-
       <p>Works on:</p>
-
       <ul class="p-list">
-
         <li class="p-list__item is-ticked">AMD KR260 Robotics Starter Kit</li>
-
       </ul>
       <hr class="p-rule" />
       <div class="p-notification--information is-borderless u-no-margin--bottom">
@@ -233,14 +225,10 @@ <h3>Ubuntu Core 22 (Developer Preview)</h3>
           </p>
         </div>
       </div>
-
       <p>
         <a class="p-button--positive"
            href="https://people.canonical.com/~platform/images/xilinx/kria-uc22-x01/limerick-kria-core-22-kria-uc22-x01-20231008-19.img.xz">Download Ubuntu Core 22</a>
-
       </p>
-
     </div>
-
   </div>
-</div>
+</div>
diff --git a/templates/download/amd/tab-3.html b/templates/download/amd/tab-3.html
@@ -1,24 +1,28 @@
-<div tabindex="0" role="tabpanel" id="zynq-ultrascale-tab" aria-labelledby="zynq-ultrascale" aria-hidden="true">
+<div tabindex="0"
+     role="tabpanel"
+     id="zynq-ultrascale-tab"
+     aria-labelledby="zynq-ultrascale"
+     aria-hidden="true">
   <div class="row p-strip is-shallow u-no-padding--top">
     <div class="col-3 col-medium-2">
       <h2 class="u-hide--small">Zynq&trade; UltraScale+&trade; MPSoC Development Boards</h2>
     </div>
     <div class="col-6 amd-container u-align--center u-vertically-center col-medium-4">
       {{
-        image (
-        url="https://assets.ubuntu.com/v1/24e23fbe-zcu106-evaluation-board.png",
-        alt="AMD ZCU circuit board",
-        width="400",
-        height="273",
-        hi_def=True,
-        loading="lazy"
-        ) | safe
+      image (
+      url="https://assets.ubuntu.com/v1/24e23fbe-zcu106-evaluation-board.png",
+      alt="AMD ZCU circuit board",
+      width="400",
+      height="273",
+      hi_def=True,
+      loading="lazy"
+      ) | safe
       }}
     </div>
   </div>
 
+  <hr />
   <div class="row p-strip is-shallow u-no-padding--top">
-    <hr class="col-9">
     <div class="col-3 col-medium-2">
       <h3>Ubuntu Desktop 22.04 LTS</h3>
     </div>
@@ -30,30 +34,42 @@ <h3>Ubuntu Desktop 22.04 LTS</h3>
         <li class="p-list__item is-ticked">AMD ZCU104</li>
         <li class="p-list__item is-ticked">AMD ZCU106</li>
       </ul>
-      <hr class="p-rule">
+      <hr class="p-rule" />
       <div class="p-notification--information is-borderless u-no-margin--bottom">
         <div class="p-notification__content">
-          <p class="p-notification__message">Please check the <a href="https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/1413611532/Canonical+Ubuntu">Ubuntu for AMD-Xilinx Devices Wiki</a> for known issues and limitations.</p>
+          <p class="p-notification__message">
+            Please check the <a href="https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/1413611532/Canonical+Ubuntu">Ubuntu for AMD-Xilinx Devices Wiki</a> for known issues and limitations.
+          </p>
         </div>
       </div>
-      <p><a class="p-button--positive" href="https://people.canonical.com/~platform/images/xilinx/zcu-ubuntu-22.04/iot-limerick-zcu-classic-desktop-2204-x05-2-20221123-58.img.xz">Download 22.04 LTS</a></p>
+      <p>
+        <a class="p-button--positive"
+           href="https://people.canonical.com/~platform/images/xilinx/zcu-ubuntu-22.04/iot-limerick-zcu-classic-desktop-2204-x05-2-20221123-58.img.xz">Download 22.04 LTS</a>
+      </p>
       <p>
         <a href="https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/2363129857/Getting+Started+with+Certified+Ubuntu+22.04+LTS+for+Xilinx+Devices">Getting started with Certified Ubuntu 22.04 LTS for AMD Devices</a>
       </p>
     </div>
   </div>
 
-	{% include "download/amd/_working_commercial_section.html" %}
+  {% include "download/amd/_working_commercial_section.html" %}
 
+  {% include "download/amd/_ubuntu_pro_section.html" %}
+
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9">
     <div class="col-3">
-      <h3 class="p-heading--5 u-no-padding--top"><strong>AMD Ubuntu Software Development Kit</strong></h3>
+      <h3 class="p-heading--5 u-no-padding--top">
+        <strong>AMD Ubuntu Software Development Kit</strong>
+      </h3>
     </div>
     <div class="col-6">
-      <p>Ubuntu developers targeting the Zynq&trade; UltraScale+&trade; MPSoC Development Boards may also want to download the following files:</p>
+      <p>
+        Ubuntu developers targeting the Zynq&trade; UltraScale+&trade; MPSoC Development Boards may also want to download the following files:
+      </p>
 
-      <table class="amd-table" aria-label="AMD Ubuntu Software Development Kit table">
+      <table class="amd-table"
+             aria-label="AMD Ubuntu Software Development Kit table">
         <thead>
           <tr>
             <th>Image name</th>
@@ -90,8 +106,8 @@ <h3 class="p-heading--5 u-no-padding--top"><strong>AMD Ubuntu Software Developme
     </div>
   </div>
 
+  <hr />
   <div class="row p-strip is-shallow u-no-padding--top">
-    <hr class="col-9">
     <div class="col-3 col-medium-2">
       <h3>Ubuntu Desktop 20.04.3 LTS</h3>
     </div>
@@ -114,15 +130,20 @@ <h3>Ubuntu Desktop 20.04.3 LTS</h3>
     </div>
   </div>
 
+  <hr />
   <div class="row p-strip u-no-padding--top">
-    <hr class="col-9">
     <div class="col-3">
-      <h3 class="p-heading--5 u-no-padding--top"><strong>AMD Ubuntu Software Development Kit</strong></h3>
+      <h3 class="p-heading--5 u-no-padding--top">
+        <strong>AMD Ubuntu Software Development Kit</strong>
+      </h3>
     </div>
     <div class="col-6">
-      <p>Ubuntu developers targeting the Zynq&trade; UltraScale+&trade; MPSoC Development Boards may also want to download the following files:</p>
+      <p>
+        Ubuntu developers targeting the Zynq&trade; UltraScale+&trade; MPSoC Development Boards may also want to download the following files:
+      </p>
 
-      <table class="amd-table" aria-label="Xilinx Ubuntu Software Development Kit table">
+      <table class="amd-table"
+             aria-label="Xilinx Ubuntu Software Development Kit table">
         <thead>
           <tr>
             <th>Image name</th>
@@ -157,10 +178,12 @@ <h3 class="p-heading--5 u-no-padding--top"><strong>AMD Ubuntu Software Developme
         </tbody>
       </table>
     </div>
-  </div>  
+  </div>
 
+  <hr />
   <div class="u-fixed-width">
-    <hr class="col-9">
-    <p>If you have any questions about the platform or would like information about our certification program, <a href="/download/contact-us" class="js-invoke-modal">contact us</a>.</p>
+    <p>
+      If you have any questions about the platform or would like information about our certification program, <a href="/download/contact-us" class="js-invoke-modal">contact us</a>.
+    </p>
   </div>
 </div>