diff --git a/iconoir.com/components/Header.tsx b/iconoir.com/components/Header.tsx index 97aaf09a..5744cf72 100644 --- a/iconoir.com/components/Header.tsx +++ b/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 ( + + + + Access to the latest updates on new icons and ideas. Join the + newsletter. + + @@ -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; diff --git a/iconoir.com/pages/index.tsx b/iconoir.com/pages/index.tsx index d730ce9d..d0ba52d1 100644 --- a/iconoir.com/pages/index.tsx +++ b/iconoir.com/pages/index.tsx @@ -92,47 +92,8 @@ const Home: NextPage = ({ > Donate - - - - - - - - Join here our monthly supporters and help us continue developing - Iconoir. + Join our supporters and help us continue developing Iconoir. @@ -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; > * {