Add a release banner on top of the homepage (#553)

* Add release banner to the layout - only homepage for now

* Clicking the banner opens new tab to deployment options page

* Turn the banner into a stand alone component

* Add ending slash to href

* Add hover transition effect to the banner

---------

Co-authored-by: Breno <[email protected]>

src/components/Layout/ReleaseBanner/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import ArrowRight from '../../../svgs/arrow-right.svg';
+import {
+    container,
+    darkBackgroundColor,
+    lightBackgroundColor,
+} from './styles.module.less';
+
+interface ReleaseBanner {
+    theme: 'dark' | 'light';
+}
+
+const ReleaseBanner = ({ theme = 'dark' }) => {
+    return (
+        <div
+            className={clsx(
+                container,
+                theme === 'dark' ? darkBackgroundColor : lightBackgroundColor
+            )}
+        >
+            <div>
+                <a href="/deployment-options/" target="_blank" rel="noreferrer">
+                    <span>A Step Ahead</span>
+                    <p>
+                        Explore Estuary&apos;s powerful compliance solutions
+                        &#45; Streamline your security and scale with
+                        confidence!
+                    </p>
+                    <ArrowRight color="#fff" />
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export default ReleaseBanner;

src/components/Layout/ReleaseBanner/styles.module.less

@@ -0,0 +1,83 @@
+@import '../../../globalStyles/sections.module.less';
+
+.container {
+  .sectionTopBottomPadding;
+  padding-top: 50px;
+  padding-bottom: 0;
+
+  div {
+    .globalMaxWidth;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 32px;
+      background-color: #FFA80040;
+      border: 1px solid #FFA800CC;
+      border-radius: 12px;
+      padding: 28px 37px;
+      width: 100%;
+      cursor: pointer;
+      transition: var(--default-transition);
+
+      &:hover {
+        background-color: #FFA80050;
+      }
+
+      span {
+        background-color: #FFA800;
+        color: #04192B;
+        border-radius: 36px;
+        padding: 4px 16px;
+        line-height: 30px;
+        font-weight: 700;
+        font-size: 1rem;
+        text-align: center;
+        width: fit-content;
+      }
+
+      p {
+        color: #F9FAFC;
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+        flex: 1;
+        text-align: left;
+      }
+
+      @media (max-width: 768px) {
+        display: grid;
+        grid-template-columns: 5fr 1fr;
+        grid-template-rows: auto auto;
+        gap: 24px;
+        padding: 24px;
+
+        div {
+          grid-column: 1;
+          grid-row: 1;
+        }
+
+        p {
+          grid-column: 1;
+          grid-row: 2;
+          grid-column: span 2;
+        }
+
+        svg {
+          grid-column: 2;
+          grid-row: 1;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+
+.darkBackgroundColor {
+  background-color: var(--background-color-primary);
+}
+
+.lightBackgroundColor {
+  background-color: #F9FAFC;
+}

src/components/Layout/index.tsx

@@ -3,23 +3,29 @@ import * as React from 'react';
 import Footer from '../Footer';
 import Header from '../Header';
 import { globalWrapper, globalMainFixedHeader } from './styles.module.less';
+import ReleaseBanner from './ReleaseBanner';
 
 const TakeATour = React.lazy(() => import('../TakeATour'));
 
+interface LayoutProps {
+    fixedHeader?: boolean;
+    showReleaseBanner?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+}
+
 const Layout = ({
     fixedHeader = true,
+    showReleaseBanner = false,
     children,
-}: {
-    fixedHeader?: boolean;
-    children: React.ReactNode | React.ReactNode[];
-}) => {
+}: LayoutProps) => {
     return (
         <div className={globalWrapper}>
             <React.Suspense fallback={null}>
                 <TakeATour />
             </React.Suspense>
             <Header fixedHeader={fixedHeader} />
             <main className={clsx(fixedHeader && globalMainFixedHeader)}>
+                {showReleaseBanner ? <ReleaseBanner /> : null}
                 {children}
             </main>
             <Footer />

src/layouts/CaseStudy/PostCard/index.tsx

@@ -53,7 +53,7 @@ export const CaseStudyPostCard = ({
         <div className="case-study-card-description">{Description}</div>
         <div className="case-study-card-link-wrapper">
             <p className="case-study-card-link-text">View Case Study</p>
-            <ArrowRight />
+            <ArrowRight color="#5374EA" />
         </div>
     </Link>
 );

src/pages/index.tsx

@@ -17,7 +17,7 @@ import DeploymentModes from '../components/Homepage/DeploymentModes';
 
 const IndexPage = () => {
     return (
-        <Layout>
+        <Layout showReleaseBanner>
             <Hero />
             <MoveAndTransform />
             <CaseStudies />