Improve homepage (#6292)

* docs(breaking-changes): update min ts version to 4.2

* docs(index): add link to v7 announcment for breaking changes

Co-authored-by: Jan-Niklas Wortmann <jan-niklas.wortmann@evorait.com>

Author: niklas-wortmann

docs_app/content/marketing/index.html

@@ -34,20 +34,23 @@ <h1 class="no-anchor no-toc" style="display: none"></h1>
   <div class="home-rows">
 
   <aio-announcement-bar></aio-announcement-bar>
+  <a href="/deprecations/breaking-changes">
   <div layout="row" class="home-row homepage-container">
-    <div class="card">
-      <div class="promo-1-desc l-pad-top-2">
-        <div class="text-headline">Version 7 released!</div>
-        <p>here are a some of the benefits of running on the latest version</p>
-        <ul>
-          <li>~50% smaller</li>
-          <li>improved typings</li>
-          <li>more consistent APIs</li>
-          <li>and much more...</li>
-        </ul>
+      <div class="card">
+        <div class="promo-1-desc l-pad-top-2">
+          <div class="text-headline">Version 7 released!</div>
+          <p class="text">Here are a some of the benefits of running on the latest version</p>
+          <ul class="text">
+            <li>~50% smaller</li>
+            <li>Improved typings</li>
+            <li>More consistent APIs</li>
+            <li>and much more...</li>
+          </ul>
+          <p class="text">If you want to know more about the breaking changes, click here...</p>
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 
 
   <div layout="row" layout-xs="column" class="home-row homepage-container">

docs_app/src/styles/1-layouts/_marketing-layout.scss

@@ -265,6 +265,10 @@ section#intro {
   }
 }
 
+.text {
+  color: $darkgray;
+}
+
 .button.hero-cta {
   display: flex;
   align-items: center;