Footer: extract contents from App and begin implementing redesign

src/components/App/App.tsx

@@ -1,7 +1,6 @@
 import React, { Suspense } from "react";
 
-import { Info, Toolbar, IconGrid, Header } from "../";
+import { Toolbar, IconGrid, Header, Footer } from "../";
-import { Heart, Droid } from "phosphor-react";
 import "./App.css";
 
 const App: React.FC<any> = () => {
@@ -14,75 +13,7 @@ const App: React.FC<any> = () => {
           <IconGrid />
         </Suspense>
       </main>
-      <Info id="footer">
+      <Footer />
-        <div className="feature">
-          <h3>
-            A labor
-            <br />
-            of love
-          </h3>
-          <div className="feature-contents">
-            <p>
-              Phosphor is free and open source software. If you enjoy these
-              icons, please consider supporting us with a donation.
-            </p>
-            <button
-              className="main-button"
-              onClick={(e) => e.currentTarget.blur()}
-            >
-              <Heart size={32} style={{ marginRight: 12 }} />
-              Buy us a coffee
-            </button>
-          </div>
-        </div>
-        <div className="feature">
-          <h3>
-            <span
-              role="img"
-              aria-label="Emoji of woman technologist, man technologist, and cat"
-            >
-              👩🏻‍💻👨‍💻🐱
-            </span>
-          </h3>
-          <div className="feature-contents">
-            <p>
-              Copyright © 2020 Phosphor Icons
-              <br />
-              Phosphor Icons is 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>
-              .
-              <br />
-              This website is set in{" "}
-              <a className="main-link" href="https://manropefont.com/">
-                Manrope
-              </a>{" "}
-              by{" "}
-              <a className="main-link" href="https://gent.media/">
-                Mikhail Sharanda
-              </a>
-              .
-            </p>
-            <p>
-              See also: <Droid size={20} />{" "}
-              <a
-                className="main-link"
-                href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-              >
-                Phosphor for Android
-              </a>
-            </p>
-            <a className="main-link" href="#">
-              Back to zee top
-            </a>
-          </div>
-        </div>
-      </Info>
     </>
   );
 };

src/components/Footer/Footer.css

@@ -1,6 +1,72 @@
 footer {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
+  height: 696px;
-  align-items: center;
+  background-color: #925bff;
-  text-align: center;
+  overflow: hidden;
+  position: absolute;
+}
+
+.outro-container {
+  position: relative;
+  width: 1366px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.outro-container img {
+  user-select: none;
+}
+
+.outro {
+  width: 660px;
+  position: absolute;
+  top: 104px;
+  left: 320px;
+}
+
+.outro h2 {
+  font-size: 40px;
+  line-height: 50px;
+  margin-bottom: 32px;
+}
+
+.fine-print {
+  margin: 104px 0 0;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+#back-to-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(120px, 104px);
+}
+
+#back-to-top-button {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+}
+
+#marker-green {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(240px, 424px);
+}
+
+#phone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-211px, 414px);
+}
+
+#command {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(1213px, 464px);
 }

src/components/Footer/Footer.tsx

@@ -1,21 +1,149 @@
-import React from "react";
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Heart } from "phosphor-react";
 
-import { Droid } from "phosphor-react";
+import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
+import markerGreen from "../../assets/marker-green.svg";
+import phone from "../../assets/phone.svg";
+import phoneSpec from "../../assets/phone-spec.svg";
+import commandKey from "../../assets/command-key.svg";
+import commandKeySpec from "../../assets/command-key-spec.svg";
 import "./Footer.css";
 
 type FooterProps = {};
 
+const variants = {
+  hidden: { opacity: 0, transition: { duration: 0.2 } },
+  visible: { opacity: 1, transition: { duration: 0.2 } },
+};
+
 const Footer: React.FC<FooterProps> = () => {
+  const [hovered, setHovered] = useState<string | false>(false);
+  const clearHover = () => setHovered(false);
+
   return (
     <footer>
-      <span role="img" aria-label="Emoji of female technologist, male technologist, and cat">👩🏻‍💻👨🏻‍💻🐱</span>
+      <div className="outro-container">
-      <div>Copyright © 2020 Phosphor Icons</div>
+        <div className="outro">
-      <div>
+          <h2>
-        Phosphor Icons is designed by{" "}
+            Phosphor is free and open source software. If you enjoy these icons,
-        <a href="https://helenazhang.com">Helena Zhang</a> & built by{" "}
+            please consider supporting us with a donation.
-        <a href="https://tobiasfried.com">Tobias Fried</a>, with love.
+          </h2>
+          <button
+            className="main-button"
+            onClick={(e) => e.currentTarget.blur()}
+          >
+            <Heart size={24} weight="fill" style={{ marginRight: 12 }} />
+            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>{" "}
+            by{" "}
+            <a className="main-link" href="https://gent.media/">
+              Mikhail Sharanda
+            </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>
+        <div id="back-to-top">
+          <button
+            id="back-to-top-button"
+            className="main-button"
+            onClick={() => {
+              document
+                .getElementById("root")
+                ?.scrollIntoView({ behavior: "smooth", block: "start" });
+            }}
+          >
+            <img src={uArrowUpLeft} alt="" />
+          </button>
+        </div>
+        <img id="marker-green" src={markerGreen} alt="" />
+        <AnimatePresence>
+          {hovered === "phone" ? (
+            <motion.img
+              id="phone"
+              key="phone-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("phone")}
+              onHoverEnd={clearHover}
+              src={phoneSpec}
+            />
+          ) : (
+            <motion.img
+              id="phone"
+              key="phone"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("phone")}
+              // onHoverEnd={clearHover}
+              src={phone}
+            />
+          )}
+          {hovered === "command" ? (
+            <motion.img
+              id="command"
+              key="command-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("command")}
+              onHoverEnd={clearHover}
+              src={commandKeySpec}
+            />
+          ) : (
+            <motion.img
+              id="command"
+              key="command"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("command")}
+              // onHoverEnd={clearHover}
+              src={commandKey}
+            />
+          )}
+        </AnimatePresence>
       </div>
-      <button style={{ display: "flex", alignItems: "center", padding: 8 }}>Phosphor for <Droid /></button>
     </footer>
   );
 };