From cb021aab4d00629c2c1c401142f2c9dc9bb46202 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <federico.zivolo@gmail.com>
Date: Fri, 26 May 2023 19:47:44 +0200
Subject: [PATCH] show banner to Floating UI website

---
 src/components/Header.js     | 12 ++++--
 src/components/Landing.js    | 10 ++++-
 src/components/Layout.js     | 78 ++++++++++++++++++++++++++++++++----
 src/components/Navigation.js |  2 +-
 4 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 0596f897..f5718399 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -113,8 +113,8 @@ const iconCss = css`
   margin-right: 5px;
 `;
 
-const Header = () => (
-  <HeaderStyled>
+const Header = ({ className }) => (
+  <HeaderStyled className={className}>
     <picture>
       <source
         srcset={popperLogoOutlined}
@@ -124,7 +124,13 @@ const Header = () => (
         srcset={popperLogo}
         media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
       />
-      <Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
+      <Logo
+        src={popperLogo}
+        alt="Popper logo"
+        draggable="false"
+        width="200"
+        height="200"
+      />
     </picture>
 
     <Slogan>
diff --git a/src/components/Landing.js b/src/components/Landing.js
index 60b35899..843d9660 100644
--- a/src/components/Landing.js
+++ b/src/components/Landing.js
@@ -41,6 +41,7 @@ import 'modern-normalize';
 import '@openfonts/luckiest-guy_latin';
 import './layout.css';
 import './prism-base2tone-pool-dark.css';
+import { FloatingUIBanner } from './Layout';
 
 import popcornBox from '../images/popcorn-box.svg';
 import { css } from '@emotion/react';
@@ -664,10 +665,17 @@ const Layout = ({ children }) => {
   return (
     <MDXProvider components={components}>
       <SEO title="Home" />
-      <Header siteTitle={data.site.siteMetadata.title} />
+      <FloatingUIBanner />
+      <Header
+        siteTitle={data.site.siteMetadata.title}
+        css={css`
+          margin-top: 4rem;
+        `}
+      />
       <InstallBar />
       <CarbonAds
         css={css`
+          margin-top: 4rem;
           ${media.lg} {
             position: absolute;
             top: 0;
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 3b31e7ba..ee91653a 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -145,7 +145,7 @@ const NavButtonDirection = styled.span`
 
 const components = {
   'x-ad': CarbonAds,
-  a: props => (
+  a: (props) => (
     // eslint-disable-next-line
     <a {...props} onClick={anchorScroll}>
       {props.children}
@@ -175,16 +175,75 @@ function anchorScroll(event) {
   } catch (e) {}
 }
 
-const flatten = routes =>
+const flatten = (routes) =>
   routes.reduce(
     (acc, cur) => acc.concat(cur).concat(flatten(cur.children)),
     []
   );
 
+export const FloatingUIBanner = () => (
+  <a
+    css={css`
+      all: unset;
+      box-sizing: border-box;
+      &:hover,
+      &:active,
+      &:focus {
+        border: none;
+      }
+      cursor: pointer;
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 4rem;
+      background: #1f2028;
+      color: rgb(221, 214, 254);
+      border: none;
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      text-decoration: none;
+      &:after {
+        content: '';
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        bottom: 10px;
+        right: 10px;
+        border-radius: 20px;
+        filter: blur(5px);
+        z-index: -1;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        background-image: radial-gradient(
+          circle,
+          rgba(51, 43, 61, 1) 4%,
+          rgba(54, 45, 74, 1) 13%,
+          rgba(65, 53, 120, 1) 40%,
+          rgba(110, 66, 122, 1) 55%,
+          rgba(119, 69, 122, 1) 71%,
+          rgba(32, 33, 40, 1) 100%
+        );
+      }
+    `}
+    href="https://floating-ui.com"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    The future of Popper is here! Floating UI is now available. Get it now!
+  </a>
+);
+
 const EditPage = ({ path }) => (
   <MdxRoutes>
-    {routes => {
-      const route = routes.find(route => route.slug === path);
+    {(routes) => {
+      const route = routes.find((route) => route.slug === path);
 
       return (
         route && (
@@ -213,7 +272,7 @@ const Layout = ({ children, location, pageResources, ...props }) => {
     const validRoutes = flatten(createTree(processRoutes(routes, path)));
 
     const currentPathIndex = validRoutes.findIndex(
-      route => route.slug === path
+      (route) => route.slug === path
     );
 
     return {
@@ -362,7 +421,12 @@ const Layout = ({ children, location, pageResources, ...props }) => {
           }
         `}
       />
-      <div>
+      <FloatingUIBanner />
+      <div
+        css={css`
+          margin-top: 4rem;
+        `}
+      >
         {pageResources && (
           <SEO
             title={
@@ -378,7 +442,7 @@ const Layout = ({ children, location, pageResources, ...props }) => {
             <EditPage path={path} />
           </Container>
           <MdxRoutes>
-            {routes => {
+            {(routes) => {
               const { prev, next } = getPrevNextRoutes(routes);
               return (
                 <NavButtonWrapper>
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 3b3abf46..3e22349a 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -15,7 +15,7 @@ export const NAVIGATION_WIDTH = 260;
 const Container = styled.div`
   background: #c83b50;
   position: fixed;
-  top: 0;
+  top: 4rem;
   height: 100%;
   width: ${NAVIGATION_WIDTH}px;
   transform: translateX(-${NAVIGATION_WIDTH}px);