InfluxDB 3 Core and Enterprise GA visual updates (#5970)

* added ga notification with styles, removed beta block, relocated community links

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: sanderson

assets/styles/layouts/_homepage.scss

@@ -120,9 +120,9 @@
         }
       }
 
-      &.beta {
+      &.new {
         .product-info h3::after {
-          content: "beta";
+          content: "New";
           margin-left: .5rem;
           font-size: 1rem;
           padding: .25em .5em .25em .4em;

assets/styles/layouts/_notifications.scss

@@ -99,6 +99,26 @@
       pre { background: rgba($r-basalt, .35); }
     }
 
+    &.ga-announcement {
+      background-image: url('/svgs/influxdb3-ga-background.svg');
+      background-size: cover;
+      a:hover { color: $br-dark-blue; }
+      code { color: $gr-gypsy; background: rgba($gr-gypsy, .25); }
+      pre { background: rgba($gr-gypsy, .25); }
+
+      h3 {font-size: 1.4rem !important;}
+      .notification-slug { font-size: 1.15rem;
+        .btn {
+          display: inline-block;
+          background: $g20-white;
+          color: $br-dark-blue;
+          padding: .5rem 1rem;
+          border-radius: $radius * 2;
+          font-size: 1rem;
+        }      
+      }
+    }
+
     //////////// Basic HTML element styles for notification content ////////////
 
     h1,h2,h3,h4,h5,h6 {
@@ -156,6 +176,16 @@
       }
       .show::before {content: "Show more"}
     }
+
+    .title-tag {
+      padding: .15rem .45rem;
+      text-transform: uppercase;
+      font-size: .85rem;
+      border-radius: $radius * 2;
+      font-family: $code;
+      background: $br-dark-blue;
+    }
+    .title-tag + h3 {margin-top: .75rem;}
   }
 }
 

assets/styles/layouts/article/_blocks.scss

@@ -96,5 +96,4 @@ blockquote {
   "blocks/tip",
   "blocks/important",
   "blocks/warning",
-  "blocks/caution",
-  "blocks/beta";
+  "blocks/caution";

assets/styles/layouts/article/_feedback.scss

@@ -15,27 +15,48 @@
   padding-right: 2rem;
 
   ul {
-    display: flex;
-    flex-wrap: wrap;
     margin-bottom: 1.25rem;
     padding: 0;
     list-style: none;
 
-    li {display: inline-block}
-
     a {
-      margin-right: 1.5rem;
       color: $article-heading;
+      font-weight: $medium;
+      position: relative;
+
+      &::after {
+        content: "\e90a";
+        font-family: 'icomoon-v4';
+        font-weight: bold;
+        font-size: 1.3rem;
+        display: inline-block;
+        position: absolute;
+        @include gradient($grad-burningDusk);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        right: 0;
+        transform: translateX(.25rem);
+        opacity: 0;
+        transition: transform .2s, opacity .2s;
+      }
 
       &:hover {
-        color: $article-link;
-        border-radius: calc($radius * 1.5);
+        &::after {transform: translateX(1.5rem); opacity: 1;}
+      }
+
+      &.discord:before {
+        content: url('/svgs/discord.svg');
+        display: inline-block;
+        height: 1.1rem;
+        width: 1.25rem;
+        vertical-align: top;
+        margin: 2px .65rem 0 0;
       }
 
       &.community:before {
         content: "\e900";
         color: $article-heading;
-        margin: 0 .5rem 0 -.25rem;
+        margin-right: .75rem;
         font-size: 1.2rem;
         font-family: 'icomoon-v2';
         vertical-align: middle;
@@ -46,7 +67,16 @@
         height: 1.1rem;
         width: 1.1rem;
         vertical-align: text-top;
-        margin-right: .5rem;
+        margin-right: .8rem;
+      }
+
+      &.reddit:before {
+        content: url('/svgs/reddit.svg');
+        display: inline-block;
+        height: 1.1rem;
+        width: 1.2rem;
+        vertical-align: top;
+        margin: 2px .75rem 0 0;
       }
     }
   }

assets/styles/layouts/article/blocks/_beta.scss

@@ -6,6 +6,7 @@
 #     - list of URL paths to show the notification on, no scope shows everywhere
 #   exclude:
 #     - list of URL paths to not show the notification on
+#   title_tag: (optional) Tag to include before the notification title
 #   title: Message title
 #   slug: (optional) Short notification summary
 #   message: |
@@ -39,25 +40,26 @@
   #   - [The plan for InfluxDB 3.0 Open Source](https://influxdata.com/blog/the-plan-for-influxdb-3-0-open-source)
   #   - [InfluxDB 3.0 benchmarks](https://influxdata.com/blog/influxdb-3-0-is-2.5x-45x-faster-compared-to-influxdb-open-source/)
 
-- id: influxdb3-beta
-  level: note
+- id: influxdb3-ga
+  level: ga-announcement
   scope:
     - /
-  title: InfluxDB 3 Core and Enterprise are now in Beta
+  title_tag: Now Generally Available
+  title: InfluxDB 3 Core and Enterprise
   slug: |
-    InfluxDB 3 Core and Enterprise are now available for beta testing, available
-    under MIT or Apache 2 license.
+    Start fast. Scale faster.
+
+    <a class="btn" href="https://www.influxdata.com/blog/influxdb-3-OSS-GA/">Get the Updates</a>
   message: |
-    InfluxDB 3 Core is a high-speed, recent-data engine that collects and
-    processes data in real-time, while persisting it to local disk or object
-    storage. InfluxDB 3 Enterprise is a commercial product that builds on Core’s
-    foundation, adding high availability, read replicas, enhanced security, and
-    data compaction for faster queries. A free tier of InfluxDB 3 Enterprise
-    will also be available for at-home, non-commercial use for hobbyists to get
-    the full historical time series database set of capabilities.
+    InfluxDB 3 Core is an open source, high-speed, recent-data engine that collects 
+    and processes data in real-time and persists it to local disk or object storage. 
+    InfluxDB 3 Enterprise builds on Core’s foundation, adding high availability, 
+    read replicas, enhanced security, and data compaction for faster queries and
+    optimized storage. A free tier of InfluxDB 3 Enterprise is available for
+    non-commercial at-home or hobbyist use.
 
     For more information, check out:
     
-    - [Beta announcement blog from Paul Dix](https://www.influxdata.com/blog/influxdb3-open-source-public-beta/)
+    - [Announcement blog from Paul Dix](https://www.influxdata.com/blog/influxdb-3-OSS-GA/)
     - [Get Started with InfluxDB 3 Core](https://docs.influxdata.com/influxdb3/core/get-started/)
     - [Get Started with InfluxDB 3 Enterprise](https://docs.influxdata.com/influxdb3/enterprise/get-started/)

data/notifications.yaml

@@ -36,7 +36,7 @@ <h2>InfluxDB 3</h2>
         <h4>Self-managed</h4>
       </div>
       <div class="products">
-        <div class="product beta">
+        <div class="product new">
           <div class="product-info">
             <h3><a href="/influxdb3/core/">InfluxDB 3 Core</a></h3>
             <p>The open source recent data engine optimized for time series and event data.</p>
@@ -46,7 +46,7 @@ <h3><a href="/influxdb3/core/">InfluxDB 3 Core</a></h3>
             <li><a href="/influxdb3/core/">View documentation</a></li>
           </ul>
         </div>
-        <div class="product beta">
+        <div class="product new">
           <div class="product-info">
             <h3><a href="/influxdb3/enterprise/">InfluxDB 3 Enterprise</a></h3>
             <p>The scalable data engine built for recent and historical time series and event data.</p>

layouts/index.html

@@ -5,7 +5,6 @@ <h1>{{ .Title | .RenderString }}</h1>
       {{ partial "article/supported-versions.html" . }}
       {{ partial "article/page-meta.html" . }}
     </div>
-    {{ partial "article/beta.html" . }}
     {{ partial "article/stable-version.html" . }}
     {{ partial "article/flux-experimental.html" . }}
     {{ partial "article/flux-contrib.html" . }}