add global banner

src/components/Layout.module.css

@@ -14,7 +14,7 @@
 }
 
 .main {
-  padding: calc(var(--spacer) * 2) 0;
+  padding: var(--spacer) 0 calc(var(--spacer) * 2) 0;
 
   /* sticky footer technique */
   flex: 1;

src/components/Layout.tsx

@@ -5,6 +5,7 @@ import PageHeader from './molecules/PageHeader'
 import styles from './Layout.module.css'
 import Seo from './atoms/Seo'
 import Container from './atoms/Container'
+import Alert from './atoms/Alert'
 
 export interface LayoutProps {
   children: ReactNode
@@ -28,6 +29,12 @@ export default function Layout({
       <Seo title={title} description={description} uri={uri} />
 
       <Header />
+
+      <Alert
+        text="Given the beta status, publishing on Rinkeby first is strongly recommended. [Learn about the market](https://blog.oceanprotocol.com)."
+        state="info"
+      />
+
       <main className={styles.main}>
         <Container>
           {title && !noPageHeader && (

src/components/atoms/Alert.module.css

@@ -26,10 +26,13 @@
 }
 
 .text {
-  margin-bottom: 0;
   font-size: var(--font-size-small);
 }
 
+.text p:last-child {
+  margin-bottom: 0;
+}
+
 .action {
   margin-top: calc(var(--spacer) / 2);
 }

src/components/atoms/Alert.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, FormEvent } from 'react'
 import styles from './Alert.module.css'
 import Button from './Button'
+import Markdown from './Markdown'
 
 export default function Alert({
   title,
@@ -19,7 +20,7 @@ export default function Alert({
   return (
     <div className={`${styles.alert} ${styles[state]}`}>
       {title && <h3 className={styles.title}>{title}</h3>}
-      <p className={styles.text}>{text}</p>
+      <Markdown className={styles.text} text={text} />
       {action && (
         <Button
           className={styles.action}