From 10fb5da728e95cab75d198bb9c52c9e536d9743a Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Wed, 29 Jul 2020 12:30:24 -0400
Subject: [PATCH] App: update body contents and style to match the spec

---
 src/components/App/App.css | 143 ++++++++++++++++++-------------------
 src/components/App/App.tsx | 130 +++++++++++++++++++++++++++++++--
 2 files changed, 196 insertions(+), 77 deletions(-)

diff --git a/src/components/App/App.css b/src/components/App/App.css
index a964737..72bc79f 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -1,89 +1,86 @@
+/* @font-face {
+  font-family: Manrope;
+  src: url('https://fonts.googleapis.com/css2?family=Manrope') format('woff2');
+} */
+
 html {
-  background-color: #FAFAFA;
+  font-variant-ligatures: common-ligatures;
 }
 
 body {
   margin: 0px;
-  font-family: monospace;
+  font-family: "Manrope";
 }
 
-button,
-select {
-  margin: 4px;
-  padding: 8px;
-  border: 1px solid black;
-  border-radius: 24px;
-  background-color: white;
-}
-
-button > * {
-  vertical-align: middle;
-}
-
-button:focus,
-select:focus {
-  outline: none;
-  border: 1px solid violet;
-  border-radius: 24px;
-}
-
-button:hover {
-  color: white;
-  background-color: black;
-}
-button:active {
-  background-color: darkmagenta;
-}
-
-input[type="color"] {
-  border: 1px solid black;
-  border-radius: 50%;
-  background-color: white;
-}
-
-input[type="color" i] {
-  -webkit-appearance: square-button;
-  padding: 4px;
-  width: 25px;
-  height: 25px;
-}
-
-input[type="color"]:focus {
-  outline: none;
-  border: 1px solid violet;
+pre,
+code {
+  font-family: "IBM Plex Mono";
+  font-size: 14px;
+  color: "black";
 }
 
 pre {
-  padding: 4px;
-  background-color: gainsboro;
-}
-
-/* .color-picker {
-  padding: 0px;
+  box-sizing: border-box;
+  padding: 20px 16px 20px 24px;
+  margin: 12px 0px;
   background-color: white;
-  height: 32px;
-  width: 32px;
-  border: none;
-  outline: none;
-  -webkit-appearance: none;
+  border-radius: 6px;
+  border: 1px solid #E1D4D7;
 }
 
-.color-picker::-webkit-color-swatch {
-  border: none;
-  border-radius: 50%;
-  margin: 4px;
-} */
-
-/* input {
-  margin: 4px;
-  padding: 8px;
-  border: 2px solid black;
-  border-radius: 24px;
-  background-color: transparent;
+input {
+  font-family: "Manrope";
 }
 
-input:focus {
+button {
+  display: flex;
+  align-items: center;
+  height: 72px;
+  padding: 0 40px 0 32px;
+  margin-top: 32px;
+  background-color: #ffd171;
+  border-radius: 8px;
+  border: none;
+  font-family: "Manrope";
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+button.main-button {
+  display: flex;
+  align-items: center;
+  height: 72px;
+  padding: 0 40px 0 32px;
+  margin-top: 32px;
+  background-color: #ffd171;
+  border-radius: 8px;
+  border: none;
+  font-family: "Manrope";
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  cursor: pointer;
+  transition: transform 0.15s 
+}
+
+button.main-button:hover {
   outline: none;
-  border: 2px solid violet;
-  border-radius: 24px;
-} */
+  transform: scale(1.05);
+  transition: transform 0.15s
+}
+
+button.main-button:active {
+  outline: none;
+  background-color: #FFBF3B;
+  transform: scale(1);
+}
+
+a {
+  color: black;
+}
+
+a:hover {
+  color: blue;
+}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index d818d5a..50f4249 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,20 +1,142 @@
 import React, { Suspense } from "react";
 
-import { Header, Toolbar, Footer } from "../";
+import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../";
+import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react";
 import "./App.css";
-import IconGrid from "../IconGrid/IconGrid";
 
 const App: React.FC<any> = () => {
   return (
     <>
-      <Header />
+      <NavBar />
+      <Panorama />
+      <Info id="overview">
+        <h2>
+          Phosphor is a flexible icon family for interfaces, diagrams,
+          presentations — whatever, really.
+        </h2>
+        <div className="feature">
+          <h3>
+            Clear and
+            <br />
+            reductive
+          </h3>
+          <div className="feature-contents">
+            <p>
+              Phosphor has been meticulously crafted to work together in
+              harmony. With 6 weights and alternative glyphs, Phosphor pairs
+              with all sorts of type sizes and layouts.
+            </p>
+            <h4>Design Specs</h4>
+            <ul>
+              <li>6 weights: Regular, Bold, Light, Thin, Fill, Duotone</li>
+              <li>Designed at 16px to scale down to a small size</li>
+              <li>Rounded end caps and ever so slightly rounded corners</li>
+              <li>Alternate glyphs to suit your needs</li>
+              <li>6,341 icons and counting</li>
+            </ul>
+            <button
+              className="main-button"
+              onClick={(e) => e.currentTarget.blur()}
+            >
+              <ArrowUpRightCircle size={32} style={{ marginRight: 12 }} />
+              Download icons
+            </button>
+          </div>
+        </div>
+        <div className="feature">
+          <h3>
+            Intuitive
+            <br />
+            and light
+          </h3>
+          <div className="feature-contents">
+            <p>
+              Phosphor is available as an icon font and a React package, and can
+              be sourced from NPM, a CDN like CDNJS and jsDelivr, or downloaded
+              and used locally.
+            </p>
+            <h4>Eng Specs</h4>
+            <ul>
+              <li>Intuitive, powerful API to style and add interactivity</li>
+              <li>Lightweight and full support for tree-shaking</li>
+              <li>Familiar usage and naming scheme</li>
+              <li>
+                Built with TypeScript, and includes type definitions to ease
+                development
+              </li>
+            </ul>
+            <button
+              className="main-button"
+              onClick={(e) =>
+                window.open(
+                  "https://github.com/rektdeckard/phosphor-web#phosphor-icons"
+                ) && e.currentTarget.blur()
+              }
+            >
+              <DocumentText size={32} style={{ marginRight: 12 }} />
+              See documentation
+            </button>
+          </div>
+        </div>
+      </Info>
       <main>
         <Toolbar />
         <Suspense fallback={<div>Loading...</div>}>
           <IconGrid />
         </Suspense>
       </main>
-      <Footer />
+      <Info id="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 href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
+              <a href="https://tobiasfried.com">Tobias Fried</a>.
+              <br />
+              This website is set in{" "}
+              <a href="https://manropefont.com/">Manrope</a> by{" "}
+              <a href="https://gent.media/">Mikhail Sharanda</a>.
+            </p>
+            <p>
+              See also: <Droid size={20} />{" "}
+              <a href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
+                Phosphor for Android
+              </a>
+            </p>
+            <a href="#">Back to zee top</a>
+          </div>
+        </div>
+      </Info>
     </>
   );
 };