Merge pull request #111 from puppycodes/add-alchemy-footer

Add alchemy footer

src/features/Footer/Nav/index.tsx

@@ -1,37 +1,35 @@
-import { mobileMenuClassName } from "features/Header";
 import { Link } from "gatsby";
 import { css } from "linaria";
 import React, { CSSProperties, ReactNode } from "react";
-import { green40 } from "shared/styles/color-palette";
 import {
-  bodyDarkGrey60,
   borderDarkTrophyGold,
-  linkDarkTrophyGold,
+  titleDarkHunterGreen
 } from "shared/styles/colors";
 import {
-  quincyRegularFontFamily,
   segmentFontFamily,
 } from "shared/styles/font-families";
 
 export function FooterNav() {
   return (
     <div
       className={css`
+        @media (min-width: 1024px) {
+          text-align: center;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+        }
+        
         text-align: center;
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+        margin: 2rem;
       `}
     >
       <Link to="/">
-        <img width="168" height="127" src={require("./logo.svg")} />
-        <div
-          className={css`
-            margin: 1rem 0;
-            font: 400 24px ${quincyRegularFontFamily};
-            letter-spacing: 0.2em;
-            color: ${green40};
-          `}
-        >
-          TALLY HO!
-        </div>
+        <img width="168" height="127" src={require("./logo.svg")} 
+        />
       </Link>
       <div
         className={css`
@@ -40,8 +38,8 @@ export function FooterNav() {
           gap: 2rem 0;
           align-items: center;
           justify-content: center;
-          margin: 2rem;
-          color: ${bodyDarkGrey60};
+          margin: 2rem 2rem 2rem 0;
+          color: ${titleDarkHunterGreen};
         `}
       >
         <NavLink to="/security">Security</NavLink>
@@ -59,17 +57,6 @@ export function FooterNav() {
         <NavLink blank to="https://boards.greenhouse.io/tallywallet/">
           Jobs
         </NavLink>
-        <span
-          className={css`
-            margin: 0 0.75rem;
-            font-size: 22px;
-            font-weight: bold;
-            vertical-align: middle;
-            color: ${linkDarkTrophyGold};
-          `}
-        >
-          |
-        </span>
         <SocialLink
           href="https://chat.tally.cash"
           icon={{

src/features/Footer/Sponsor/index.tsx

@@ -0,0 +1,39 @@
+import { Link } from "gatsby";
+import { css } from "linaria";
+import React, { CSSProperties, ReactNode } from "react";
+import {
+    quincyRegularFontFamily,
+  } from "shared/styles/font-families";
+
+export function Sponsor() {
+    return (
+    <div
+      className={css`
+        text-align: center;
+        display: flex;
+        flex-wrap: nowrap;
+        align-content: space-around;
+        flex-direction: column;
+        justify-content: center;
+        row-gap: 1rem;
+      `}
+    >
+      <Link to="https://www.alchemy.com">
+        <img width="170px" height="25px" src={require("./alchemy.svg")} 
+        />
+      </Link>
+        <div>
+            <img width="32px" height="30px" src={require("./star-mini.svg")}
+            />
+        </div>       
+        <div className={css`
+        font-family: ${quincyRegularFontFamily};
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: .3rem;
+        `}>
+            GOOD HUNTING!
+        </div>
+    </div>
+    );
+}

src/features/Footer/index.tsx

@@ -1,4 +1,5 @@
 import { FooterNav } from "features/Footer/Nav";
+import { Sponsor } from "./Sponsor";
 import { Link } from "gatsby";
 import { css } from "linaria";
 import React from "react";
@@ -16,8 +17,10 @@ export function Footer() {
       `}
     >
       <FooterNav />
+      <Sponsor />
       <div
         className={css`
+          margin: 2rem;
           padding: 0 0 6rem;
           font-family: ${quincyRegularFontFamily};
           font-size: 12px;