Update MoveIt Pro references (#849)

L4co77 · Laco-code · web-flow · commit bafe8f785212 · 2024-05-13T17:00:33.000-06:00
Co-authored-by: laco &lt;skvarka.ladislav@gmail.com&gt;
diff --git a/_includes/announcement-banner.html b/_includes/announcement-banner.html
@@ -1,4 +1,6 @@
 <div class="moveit_announcement_banner">
+  <span class="moveit_announcement_banner--close"></span>
+  <!-- Close button -->
   <a href="https://picknik.ai/pro/">
     <img
       src="/assets/images/MoveIt_Announcement_Banner.png"
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -14,7 +14,7 @@
         <p>
           Check out our
           <a href="https://picknik.ai/pro/" target="_blank"
-            >MoveIt Developer Platform</a
+            >MoveIt Pro Developer Platform</a
           >
         </p>
         <a class="button" href="/install">INSTALL NOW</a>
diff --git a/_sass/_body.scss b/_sass/_body.scss
@@ -188,7 +188,7 @@ img {
   position: fixed;
   z-index: 9999;
   bottom: 10px;
-  right: 0;
+  right: 10px;
   animation: fadeFromRight 1s linear;
 
   img {
@@ -200,16 +200,57 @@ img {
   }
 }
 
+.moveit_announcement_banner--hide {
+  right: -500px;
+  animation: fadeToRight 1s linear;
+}
+
+.moveit_announcement_banner--close {
+  cursor: pointer;
+  background-color: #17181d;
+  position: absolute;
+  right: -5px;
+  top: -11px;
+  font-size: 21px;
+  line-height: 1;
+  color: white;
+  height: 24px;
+  width: 24px;
+  border: 1px solid red;
+  border-radius: 100%;
+  background-color: #17181d;
+  &::after{
+    display: flex;
+    content: "\00d7";
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 @keyframes fadeFromRight {
   0% {
     right: -500px;
   }
 
   70% {
-    right: 5px;
+    right: 20px;
   }
 
   100% {
-    right: 0;
+    right: 10px;
+  }
+}
+
+@keyframes fadeToRight {
+  0% {
+    right: 10px;
+  }
+
+  70% {
+    right: 30px;
+  }
+
+  100% {
+    right: -500px;
   }
 }
diff --git a/_sass/_homepage.scss b/_sass/_homepage.scss
@@ -49,9 +49,15 @@
       }
 
       a {
+        color: #fff;
+
         &:hover {
-          color: #fff;
-          text-decoration: underline;
+          color: #0a58f7;
+
+          span.blue {
+            background-color: #fff;
+            color: #0a58f7;
+          }
         }
       }
 
@@ -78,6 +84,7 @@
           margin-right: 2px;
           padding: 0 10px;
           margin-left: 0;
+          border: 1px solid #0a58f7;
         }
       }
     }
@@ -107,12 +114,12 @@
       max-width: 500px;
       margin: 20px auto;
       background: #fff;
-      padding: 15px 100px;
+      padding: 15px 45px;
       text-align: center;
       border-radius: 4px;
       box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
       @media screen and (max-width: 520px) {
-        padding: 15px 60px;
+        padding: 15px 30px;
       }
     }
 
diff --git a/assets/images/Companies/picknik-logo.png b/assets/images/Companies/picknik-logo.png
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,9 +1,3 @@
-$(document).ready(function() {
-  $('#toggle-nav').click(function() {
-    $(this).toggleClass('open');
-  });
-});
-
 var videoSrc = $('#modalVideo iframe').attr('src');
 
 $('#modalVideo').on('show.bs.modal', function() {
@@ -36,6 +30,51 @@ function futureVersion() {
   }
 }
 
+function setCookie(cname,cvalue,exdays) {
+  const d = new Date();
+  d.setTime(d.getTime() + (exdays*24*60*60*1000));
+  let expires = "expires=" + d.toUTCString();
+  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function checkCookie() {
+  let user = getCookie("bannerMoveitPro");
+  let targetHtml = $('.moveit_announcement_banner');
+  if (user !== "") {
+    targetHtml.css('display', 'none');
+  }
+}
+
+function closeBannerOnClick() {
+  let targetHtml = $('.moveit_announcement_banner');
+  targetHtml.click(function() {
+    $(this).addClass('moveit_announcement_banner--hide');
+    setCookie("bannerMoveitPro", "moveit_announcement_banner", 30);
+  });
+}
+
 $(document).ready(function() {
+  $('#toggle-nav').click(function() {
+    $(this).toggleClass('open');
+  });
+
   futureVersion();
+  checkCookie();
+  closeBannerOnClick();
 });
diff --git a/index.markdown b/index.markdown
@@ -28,8 +28,10 @@ redirect_from: '/moveit/'
                     <div class="col-xs-12 col-lg-6 col-sm-12">
                         <div class="main">
                             <div class="main-tag">
-                              <span class="blue">Announcement</span>
-                              <span>MoveIt Pro 2.0 and MoveIt 2.7 <a href="https://discourse.ros.org/t/announcing-moveit-studio-2-0-and-moveit-2-7-iron-releases/32296" target="_blank">released!</a></span>
+                                <a href="https://discourse.ros.org/t/announcing-moveit-studio-2-0-and-moveit-2-7-iron-releases/32296" target="_blank">
+                                    <span class="blue">Announcing</span>
+                                    <span>MoveIt Pro Runtime and Developer Platform</span>
+                                </a>
                             </div>
                             <h1>Moving robots into&nbsp;the&nbsp;future</h1>
                             <p class="main-text">Incorporating the latest advances in motion planning,<br/>
@@ -58,9 +60,11 @@ redirect_from: '/moveit/'
                                     Ubuntu 22.04
                                 </div>
                                 <div class="link-group">
-                                    <a href="/install-moveit2/source/" class="info-box-link">Build From Source</a>
+                                    <a href="/install-moveit2/source/" class="info-box-link">Build&nbsp;From&nbsp;Source</a>
                                     <span>|</span>
-                                    <a href="https://github.com/moveit/moveit2" target="_blank" class="info-box-link">View on Github</a>
+                                    <a href="https://github.com/moveit/moveit2" target="_blank" class="info-box-link">View&nbsp;on&nbsp;Github</a>
+                                    <span>|</span>
+                                    <a href="https://picknik.ai/pro/" target="_blank" class="info-box-link">MoveIt&nbsp;Pro</a>
                                 </div>
                                 <img src="/assets/images/logo/ROS_logo.png" alt="ROS logo" class="info-box-logo" />
                             </div>
@@ -149,7 +153,7 @@ redirect_from: '/moveit/'
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/nasa-logo.png" alt="Nasa logo">
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/google-logo.png" alt="Google logo">
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/ms-logo.png" alt="Microsoft logo">
-                        <img class="companies-using-moveit-logos" src="/assets/images/Companies/fetch-logo.png" alt="Fetch robotics logo">
+                        <img class="companies-using-moveit-logos" src="/assets/images/Companies/picknik-logo.png" alt="PickNik logo">
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/franka-logo.png" alt="Franka Emika logo">
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/pal-logo.png" alt="Pal Robotics logo">
                         <img class="companies-using-moveit-logos" src="/assets/images/Companies/kinova-logo.png" alt="Kinova logo">
@@ -268,6 +272,20 @@ redirect_from: '/moveit/'
                   <div class="release-versions__3">STATUS</div>
                 </div>
                 <div class="release-versions__body">
+                  <div class="release-versions__content">
+                    <div class="release-versions__1">
+                      <h3>MoveIt Pro 5.0</h3>
+                      <p>
+                        <a href="https://picknik.ai/pro/" target="_blank">View product page</a>
+                      </p>
+                    </div>
+                    <div class="release-versions__2">
+                      ROS 2
+                    </div>
+                    <div class="release-versions__3">
+                      <span class="label label--green">COMMERCIALLY SUPPORTED</span>
+                    </div>
+                  </div>
                   <div class="release-versions__content">
                     <div class="release-versions__1">
                       <h3>Rolling 2.7</h3>

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`<p>`
`15`	`15`	`Check out our`
`16`	`16`	`<a href="https://picknik.ai/pro/" target="_blank"`
`17`		`- >MoveIt Developer Platform</a`
	`17`	`+ >MoveIt Pro Developer Platform</a`
`18`	`18`	`>`
`19`	`19`	`</p>`
`20`	`20`	`<a class="button" href="/install">INSTALL NOW</a>`
Original file line number	Diff line number	Diff line change
`@@ -49,9 +49,15 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`a {`
	`52`	`+ color: #fff;`
	`53`	`+`
`52`	`54`	`&:hover {`
`53`		`- color: #fff;`
`54`		`- text-decoration: underline;`
	`55`	`+ color: #0a58f7;`
	`56`	`+`
	`57`	`+ span.blue {`
	`58`	`+ background-color: #fff;`
	`59`	`+ color: #0a58f7;`
	`60`	`+ }`
`55`	`61`	`}`
`56`	`62`	`}`
`57`	`63`
`@@ -78,6 +84,7 @@`
`78`	`84`	`margin-right: 2px;`
`79`	`85`	`padding: 0 10px;`
`80`	`86`	`margin-left: 0;`
	`87`	`+ border: 1px solid #0a58f7;`
`81`	`88`	`}`
`82`	`89`	`}`
`83`	`90`	`}`
`@@ -107,12 +114,12 @@`
`107`	`114`	`max-width: 500px;`
`108`	`115`	`margin: 20px auto;`
`109`	`116`	`background: #fff;`
`110`		`- padding: 15px 100px;`
	`117`	`+ padding: 15px 45px;`
`111`	`118`	`text-align: center;`
`112`	`119`	`border-radius: 4px;`
`113`	`120`	`box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);`
`114`	`121`	`@media screen and (max-width: 520px) {`
`115`		`- padding: 15px 60px;`
	`122`	`+ padding: 15px 30px;`
`116`	`123`	`}`
`117`	`124`	`}`
`118`	`125`