Header: buttons now link out and scroll the page!

src/components/Header/Header.tsx

@@ -16,6 +16,7 @@ import receiptSpec from "../../assets/receipt-spec.svg";
 import calculator from "../../assets/calculator.svg";
 import calculatorSpec from "../../assets/calculator-spec.svg";
 import "./Header.css";
+import { ArrowUpRightCircle } from "phosphor-react";
 
 type HeaderProps = {};
 
@@ -24,6 +25,16 @@ const variants = {
   visible: { opacity: 1, transition: { duration: 0.2 } },
 };
 
+const handleGetStarted = () => {
+  window.open("https://github.com/rektdeckard/phosphor-web#phosphor-icons");
+};
+
+const handleScrollToIcons = () => {
+  document
+    .getElementById("toolbar")
+    ?.scrollIntoView({ behavior: "smooth", block: "start" });
+};
+
 const Header: React.FC<HeaderProps> = () => {
   const [hovered, setHovered] = useState<string | false>(false);
   const clearHover = () => setHovered(false);
@@ -208,16 +219,13 @@ const Header: React.FC<HeaderProps> = () => {
             presentations – whatever really.
           </h2>
           <div style={{ display: "flex" }}>
-            <button className="main-button">Get started</button>
+            <button className="main-button" onClick={handleGetStarted}>
+              Get started{" "}
+              <ArrowUpRightCircle size={24} weight="fill" style={{ marginLeft: 12 }} />
+            </button>
 
-            <button
+            <button className="main-button" onClick={handleScrollToIcons}>
-              className="main-button"
+              {/* <ArrowUpRightCircle size={24} style={{ marginRight: 12 }} />{" "} */}
-              onClick={() => {
-                document
-                  .getElementById("toolbar")
-                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
-              }}
-            >
               Explore icons
             </button>
           </div>