Header+Footer: revise copy and hover states

src/components/Footer/Footer.css

@@ -18,6 +18,11 @@ footer {
   border-radius: 50%;
 }
 
+.outro-content {
+  /* pointer-events: none; */
+  z-index: 2;
+}
+
 @media screen and (max-width: 759px) {
   .outro h2 {
     font-size: 28px;
@@ -35,15 +40,14 @@ footer {
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate(324px, 510px);
+    transform: translate(324px, 610px);
   }
   
   #phone {
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate(-140px, 470px);
+    transform: translate(-140px, 570px);
-    touch-action: pan-y;
   }
 }
 

src/components/Footer/Footer.tsx

@@ -24,69 +24,7 @@ const Footer: React.FC<FooterProps> = () => {
     <footer>
       <div className="container">
         <div className="outro">
-          <h2>
+        {phoneHovered && (
-            Phosphor is free and open source software. If you enjoy these icons,
-            please support us with a donation.
-          </h2>
-          <button
-            className="main-button"
-            onClick={() =>
-              window.open(
-                "https://paypal.me/minoraxis",
-                "_blank",
-                "noopener noreferrer"
-              )
-            }
-          >
-            <Heart size={24} weight="fill" />
-            Buy us a coffee
-          </button>
-          <p className="fine-print">
-            Copyright © 2020 Phosphor Icons
-            <br />
-            Designed by{" "}
-            <a className="main-link" href="https://helenazhang.com">
-              Helena Zhang
-            </a>{" "}
-            + built by{" "}
-            <a className="main-link" href="https://tobiasfried.com">
-              Tobias Fried
-            </a>{" "}
-            <span
-              role="img"
-              aria-label="Emoji of woman technologist, man technologist, and cat"
-            >
-              👩🏻‍💻👨‍💻🐈
-            </span>
-            <br />
-            This website is set in{" "}
-            <a className="main-link" href="https://manropefont.com/">
-              Manrope
-            </a>
-            <br />
-            See also:{" "}
-            <a
-              className="main-link"
-              href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-            >
-              Phosphor for Android
-            </a>
-          </p>
-          <div id="back-to-top">
-            <button
-              id="back-to-top-button"
-              aria-label="back-to-top button"
-              className="main-button"
-              onClick={() => {
-                document
-                  .getElementById("root")
-                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
-              }}
-            >
-              <img src={uArrowUpLeft} alt="" />
-            </button>
-          </div>
-          {phoneHovered && (
             <motion.img
               id="phone"
               className="inspectable"
@@ -108,6 +46,83 @@ const Footer: React.FC<FooterProps> = () => {
             src={phone}
             alt=""
           />
+          <div className="outro-content">
+            <h2>
+              Phosphor is free and open source, licensed under{" "}
+              <a
+                className="main-link"
+                href="Phosphor Icons is a flexible icon family in 6 weights. We aim to provide consistency, variety, and above all, ease-of-use for creators of all kinds. Browse the library on our website"
+              >
+                GNU GPL-3.0
+              </a>
+              . If you enjoy these icons, please support us with a donation.
+            </h2>
+            <button
+              className="main-button"
+              onClick={() =>
+                window.open(
+                  "https://paypal.me/minoraxis",
+                  "_blank",
+                  "noopener noreferrer"
+                )
+              }
+            >
+              <Heart size={24} weight="fill" />
+              Buy us a coffee
+            </button>
+            <p className="fine-print">
+              Copyright © 2020 Phosphor Icons
+              <br />
+              Designed by{" "}
+              <a className="main-link" href="https://helenazhang.com">
+                Helena Zhang
+              </a>{" "}
+              + built by{" "}
+              <a className="main-link" href="https://tobiasfried.com">
+                Tobias Fried
+              </a>{" "}
+              <span
+                role="img"
+                aria-label="Emoji of woman technologist, man technologist, and cat"
+              >
+                👩🏻‍💻👨‍💻🐈
+              </span>
+              <br />
+              Contact us at{" "}
+              <a className="main-link" href="mailto:hello@phosphoricons.com">
+                hello@phosphoricons.com
+              </a>
+            </p>
+            <p>
+              See also:{" "}
+              <a
+                className="main-link"
+                href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
+              >
+                Phosphor for Android
+              </a>
+            </p>
+            <p>
+              Type set in{" "}
+              <a className="main-link" href="https://manropefont.com/">
+                Manrope
+              </a>
+            </p>
+          </div>
+          <div id="back-to-top">
+            <button
+              id="back-to-top-button"
+              aria-label="back-to-top button"
+              className="main-button"
+              onClick={() => {
+                document
+                  .getElementById("root")
+                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
+              }}
+            >
+              <img src={uArrowUpLeft} alt="" />
+            </button>
+          </div>
           <img
             id="command"
             className="inspectable"

src/components/Header/Header.tsx

@@ -45,13 +45,12 @@ const Header: React.FC<HeaderProps> = () => {
         <img src={paperclips} id="paperclips" alt="" />
         <div className="intro">
           <h2>
-            Phosphor Icons is a flexible icon family for interfaces, diagrams,
+            Phosphor is a flexible icon family in 6 weights — for interfaces, presentations, felicitations...
-            presentations — whatever really.
           </h2>
           <div className="button-container">
             <button className="main-button" onClick={handleGetStarted}>
               <ArrowCircleUpRight size={24} weight="fill" />
-              Go to docs
+              See the docs
             </button>
 
             <button className="main-button" onClick={handleScrollToIcons}>