added banner and removed avatars

iconoir.com/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Menu, Xmark, Discord } from 'iconoir-react';
+import { Menu, Xmark, Discord, Sparks } from 'iconoir-react';
 import { Heart } from 'iconoir-react/solid';
 import Link from 'next/link';
 import React from 'react';
@@ -19,6 +19,17 @@ export function Header({ currentVersion }: HeaderProps) {
 
   return (
     <Container>
+      <Banner>
+        <Sparks></Sparks>
+        <a
+          href={'https://lucaburgio.com/join/'}
+          target={'_blank'}
+          rel={'noreferrer'}
+        >
+          Access to the latest updates on new icons and ideas. Join the
+          newsletter.
+        </a>
+      </Banner>
       <HeaderLeft>
         <Link href={'/'}>
           <LogoContainer>
@@ -90,6 +101,26 @@ export const LogoContainer = styled.div`
   }
 `;
 
+export const Banner = styled(Text15)`
+  display: none;
+  ${media.lg} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+    background: var(--g5);
+    color: var(--g0);
+    font-weight: 500;
+    position: absolute;
+    width: 100%;
+    text-decoration: underline;
+    top: 0;
+  }
+  > * {
+    margin: 0 4px;
+  }
+`;
+
 const MobileMenuButton = styled(ResetButton)`
   &&& {
     z-index: 101;
@@ -152,6 +183,9 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  ${media.lg} {
+    margin-top: 40px;
+  }
 `;
 const HeaderItem = styled.div`
   flex: 1;

iconoir.com/pages/index.tsx

@@ -92,47 +92,8 @@ const Home: NextPage<HomeProps> = ({
           >
             <span>Donate</span>
           </LargeButton>
-          <Supporters>
-            <Supporter
-              data-tooltip="Pierre Olivier Marec"
-              as={'a'}
-              href={'https://github.com/pomarec'}
-              src={'https://avatars.githubusercontent.com/u/802933?v=4'}
-            />
-            <Supporter
-              data-tooltip="Tuan Hiep"
-              as={'a'}
-              href={'https://opencollective.com/iconoir/contribute'}
-              src={
-                'https://images.opencollective.com/tuan-hiep/17b1ef2/avatar.png?height=80'
-              }
-            />
-            <Supporter
-              data-tooltip="Justin Kendrick"
-              as={'a'}
-              href={'https://opencollective.com/iconoir/contribute'}
-              src={
-                'https://images.opencollective.com/guest-39c79745/avatar.png?height=80'
-              }
-            />
-            <Supporter
-              data-tooltip="Anon"
-              as={'a'}
-              href={'https://opencollective.com/iconoir/contribute'}
-              src={
-                'https://opencollective.com/static/images/default-guest-logo.svg'
-              }
-            />
-            <Supporter
-              data-tooltip="Luca Burgio"
-              as={'a'}
-              href={'https://twitter.com/burgioluca'}
-              src={'https://lucaburgio.com/images/profile2.png'}
-            />
-          </Supporters>
           <Text15>
-            Join here our monthly supporters and help us continue developing
-            Iconoir.
+            Join our supporters and help us continue developing Iconoir.
           </Text15>
         </SupportContainer>
         <Explore allIcons={allIcons} />
@@ -181,46 +142,6 @@ export const HeroDescription = styled(Text18)<{ topMargin?: number }>`
     margin-top: ${(props) => props.topMargin || 0}px;
   }
 `;
-
-const Supporters = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 8px !important;
-`;
-const Supporter = styled.div<{ src?: string }>`
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #000;
-  margin: 0 10px;
-  background-image: url(${(props) => props.src});
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  border: 2px solid white;
-  margin: 0 -4px;
-  transition: 0.2s;
-  &:hover {
-    scale: 1.1;
-    transition: 0.2s;
-    &:before {
-      content: attr(data-tooltip);
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: black;
-      color: white;
-      padding: 5px;
-      border-radius: 3px;
-      white-space: nowrap;
-      font-size: 12px;
-    }
-  }
-`;
-
 const SupportContainer = styled.div`
   text-align: center;
   > * {