diff --git a/landing/header.css b/landing/header.css --- a/landing/header.css +++ b/landing/header.css @@ -71,6 +71,7 @@ } div.twitterIcon, +div.farcasterIcon, div.githubIcon, div.commAppIcon { display: flex; @@ -89,6 +90,7 @@ } div.twitterIcon svg, +div.farcasterIcon svg, div.githubIcon svg, div.commAppIcon svg { transition: 300ms; @@ -114,6 +116,11 @@ background-color: #1d9bf0; transition: 300ms; } + + div.farcasterIcon:hover { + background-color: #855dcd; + transition: 300ms; + } } /* max-width should be kept in sync with HEADER_BREAKPOINT in header.react */ @@ -123,6 +130,7 @@ } div.twitterIcon, + div.farcasterIcon, div.githubIcon, div.commAppIcon { display: none; diff --git a/landing/header.react.js b/landing/header.react.js --- a/landing/header.react.js +++ b/landing/header.react.js @@ -14,6 +14,7 @@ import type { SetState } from 'lib/types/hook-types.js'; +import FarcasterLogo from './assets/farcaster-logo.react.js'; import css from './header.css'; import typography from './typography.css'; @@ -107,6 +108,15 @@ /> </div> </a> + <a + href="https://warpcast.com/comm.eth" + target="_blank" + rel="noreferrer" + > + <div className={css.farcasterIcon}> + <FarcasterLogo size={30} className={css.icon} /> + </div> + </a> <a href="https://twitter.com/commdotapp" target="_blank" diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js --- a/landing/mobile-nav.react.js +++ b/landing/mobile-nav.react.js @@ -9,6 +9,7 @@ import type { SetState } from 'lib/types/hook-types.js'; +import FarcasterLogo from './assets/farcaster-logo.react.js'; import css from './mobile-nav.css'; import typography from './typography.css'; @@ -78,6 +79,13 @@ size="1x" /> </NavLink> + <a + href="https://warpcast.com/comm.eth" + target="_blank" + rel="noreferrer" + > + <FarcasterLogo size={20} className={css.icon} /> + </a> <a href="https://twitter.com/commdotapp" target="_blank"