feat(app): add donation banner

src/components/Banner/Banner.css

@@ -13,7 +13,8 @@
   pointer-events: none;
 }
 
-.banner {
+.banner ::selection {
+  background-color: var(--moss-shadow);
 }
 
 .banner .main-button {
@@ -67,6 +68,7 @@
 @media screen and (max-width: 719px) {
   .banner-container {
     padding: 0;
+    gap: 0;
   }
 
   .banner-content {

src/components/Banner/Banner.tsx

@@ -20,7 +20,7 @@ type BannerProps = {
 const variants: Variants = {
   initial: { y: -120 },
   animate: { y: 0 },
-  exit: { y: -120 },
+  exit: { opacity: 0 },
 };
 
 const BANNER_STATE_KEY = "banner_state";

src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import {
   ArrowCircleUpRight,
   ArrowCircleDown,
   MegaphoneSimple,
+  HandHeart,
 } from "@phosphor-icons/react";
 
 import Banner from "@/components/Banner";
@@ -52,6 +53,20 @@ const Header = (_: HeaderProps) => {
             </small>
           </div>
         </Banner>
+        <Banner id={"buymeacoffee"}>
+          <div className="message">
+            <HandHeart size={32} mirrored />
+            <small>
+              We are now processing donations via{" "}
+              <a href="https://www.buymeacoffee.com/phosphoricons">
+                Buy Me a Coffee
+              </a>
+              ! It takes a lot of work to make Phosphor available to the public
+              free and open-source, and your one-time or recurring contribution does
+              a lot to keep us going. Please show us some support if you can!
+            </small>
+          </div>
+        </Banner>
       </Banner.Container>
       <div className="header-contents">
         <div className="illustrations-top">

src/components/Links/Links.tsx

@@ -87,7 +87,7 @@ const Links = (_: LinksProps) => {
         <ArrowElbowDownRight size={24} />
         <span>
           <OutboundLink href="https://paypal.me/minoraxis" eventLabel="Donate">
-            Donate on PayPal
+            Donate on BuyMeACoffee
           </OutboundLink>
           {" / "}
           <OutboundLink