new banner

components/Announcement.js

@@ -1,15 +1,14 @@
 import React from 'react'
 
 // Feature flag
-const ACTIVE = false
+const ACTIVE = true
 
-const key = 'CARBON_CTA_2'
+const key = 'CARBON_CTA_3'
 
 function Toast() {
   const [open, setState] = React.useState(false)
 
   React.useEffect(() => {
-    window.localStorage.removeItem('CARBON_CTA_1')
     window.localStorage.removeItem('CARBON_CTA_2')
     if (!window.localStorage.getItem(key)) {
       setState(true)
@@ -36,13 +35,9 @@ function Toast() {
   return (
     <div className="toast mb4">
       <div className="toast-content">
-        <p>The team that created Carbon has been acquired!</p> —
-        <a
-          href="https://dawnlabs.io/fossa-acquires-dawnlabs"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Read more
+        <p>Help fight the climate crisis by offsetting your carbon production</p> —
+        <a href="/offsets" target="_blank" rel="noreferrer noopener">
+          Find out how
         </a>
         <button className="close-toast" onClick={close}>
           &times;
@@ -67,7 +62,6 @@ function Toast() {
             margin-top: calc(var(--x4) * -1);
             animation-name: slide;
             animation-duration: 600ms;
-            width: 610px;
             max-width: 100vw;
             margin-left: auto;
             margin-right: auto;
@@ -90,7 +84,7 @@ function Toast() {
             color: white;
             border: none;
             font-size: 100%;
-            margin-left: 32px;
+            margin-left: 16px;
             text-decoration: none;
             cursor: pointer;
           }