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,9 +24,38 @@ const Footer: React.FC<FooterProps> = () => {
     <footer>
       <div className="container">
         <div className="outro">
+        {phoneHovered && (
+            <motion.img
+              id="phone"
+              className="inspectable"
+              variants={variants}
+              initial="hidden"
+              animate={phoneHovered ? "visible" : "hidden"}
+              src={phoneSpec}
+              alt=""
+            />
+          )}
+          <motion.img
+            id="phone"
+            className="inspectable"
+            variants={variants}
+            initial="visible"
+            whileHover="hidden"
+            onHoverStart={() => setPhoneHovered(true)}
+            onHoverEnd={() => setPhoneHovered(false)}
+            src={phone}
+            alt=""
+          />
+          <div className="outro-content">
             <h2>
-            Phosphor is free and open source software. If you enjoy these icons,
+              Phosphor is free and open source, licensed under{" "}
-            please support us with a donation.
+              <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"
@@ -59,11 +88,12 @@ const Footer: React.FC<FooterProps> = () => {
                 👩🏻‍💻👨‍💻🐈
               </span>
               <br />
-            This website is set in{" "}
+              Contact us at{" "}
-            <a className="main-link" href="https://manropefont.com/">
+              <a className="main-link" href="mailto:hello@phosphoricons.com">
-              Manrope
+                hello@phosphoricons.com
               </a>
-            <br />
+            </p>
+            <p>
               See also:{" "}
               <a
                 className="main-link"
@@ -72,6 +102,13 @@ const Footer: React.FC<FooterProps> = () => {
                 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"
@@ -86,28 +123,6 @@ const Footer: React.FC<FooterProps> = () => {
               <img src={uArrowUpLeft} alt="" />
             </button>
           </div>
-          {phoneHovered && (
-            <motion.img
-              id="phone"
-              className="inspectable"
-              variants={variants}
-              initial="hidden"
-              animate={phoneHovered ? "visible" : "hidden"}
-              src={phoneSpec}
-              alt=""
-            />
-          )}
-          <motion.img
-            id="phone"
-            className="inspectable"
-            variants={variants}
-            initial="visible"
-            whileHover="hidden"
-            onHoverStart={() => setPhoneHovered(true)}
-            onHoverEnd={() => setPhoneHovered(false)}
-            src={phone}
-            alt=""
-          />
           <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}>