feat(app): add figma banner

src/components/Banner/Banner.css

@@ -0,0 +1,14 @@
+.banner {
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: white;
+  text-align: center;
+  background-color: #35313d;
+}
+
+.banner .main-button {
+  height: unset;
+  min-height: 64px;
+  margin: 8px 0 0;
+}

src/components/Banner/Banner.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Medal } from "phosphor-react"; 
+
+import "./Banner.css";
+
+const Banner = () => {
+  return (
+    <div className="banner">
+       The 2022 Figma Community Awards are here!
+      <button
+        className="main-button"
+        onClick={
+            () => window.open(
+              "https://www.figma.com/community/file/903830135544202908",
+              "_blank",
+              "noopener noreferrer",
+            )
+        }>
+          <Medal size={24} weight="fill" />
+          Vote for Phosphor
+        </button>
+    </div>
+  );
+};
+
+export default Banner;

src/components/Header/Header.tsx

@@ -16,6 +16,7 @@ import receipt from "../../assets/receipt.svg";
 import receiptSpec from "../../assets/receipt-spec.svg";
 import calculator from "../../assets/calculator.svg";
 import calculatorSpec from "../../assets/calculator-spec.svg";
+import Banner from "../Banner/Banner";
 import Links from "../Links/Links";
 import "./Header.css";
 
@@ -35,6 +36,8 @@ const handleScrollToIcons = () =>
 
 const Header: React.FC<HeaderProps> = () => {
   return (
+    <>
+      <Banner />
       <header>
         <div className="header-contents">
           <div className="illustrations-top">
@@ -90,6 +93,7 @@ const Header: React.FC<HeaderProps> = () => {
           </div>
         </div>
       </header>
+    </>
   );
 };