Merge pull request #109 from Lissy93/DOCS/adds-terminal-trove-sponsorship

DOCS: adds terminal trove sponsorship

.github/README.md

@@ -9,6 +9,22 @@
 
 </p>
 
+---
+<p align="center">
+  <sup>Kindly supported by:</sup><br>
+<a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+  <img src="https://i.ibb.co/fqL7Y6N/terminal-trove-normal.png" width="400" alt="Terminal Trove">
+  <br>
+  <strong>The $HOME of all things in the terminal.</strong>
+</a>
+<br>
+<a href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+  <sub>Find your next CLI / TUI tool and more at Terminal Trove,</sub>
+  <br>
+  <sup>Get updates on new tools on our newsletter.</sup>
+</a>
+</p>
+
 ---
 
 #### Contents

src/App.tsx

@@ -12,7 +12,6 @@ const Container = Styled.main`
   background: ${colors.background};
   color: ${colors.textColor};
   width: 100vw;
-  height: 100vh;
   margin: 0;
 `;
 

src/pages/About.tsx

@@ -101,6 +101,18 @@ const Section = styled(StyledCard)`
   }
 `;
 
+const SponsorshipContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 1.5rem;
+  img {
+    border-radius: 4px;
+  }
+`;
+
 const makeAnchor = (title: string): string => {
   return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
 };
@@ -121,6 +133,26 @@ const About = (): JSX.Element => {
           <p key={index}>{para}</p>
         ))}
         <hr />
+        <SponsorshipContainer>
+          <p>
+            Web-Check is kindly sponsored
+            by <a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+              Terminal Trove
+            </a>
+            <br />
+            The $HOME of all things in the terminal.
+            <br />
+            <small>
+              <a href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+                Find your next CLI / TUI tool, and get updates to your inbox
+              </a>
+            </small>
+          </p>
+          <a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+            <img width="300" alt="Terminal Trove" src="https://i.ibb.co/T1KzVmR/terminal-trove-green.png" />
+          </a>
+        </SponsorshipContainer>
+        <hr />
         <p>
           Web-Check is developed and maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>.
           It's licensed under the <a href="https://github.com/Lissy93/web-check/blob/master/LICENSE">MIT license</a>,

src/pages/Home.tsx

@@ -20,7 +20,7 @@ const HomeContainer = styled.section`
   align-items: center;
   height: 100%;
   font-family: 'PTMono';
-  padding: 0 1rem;
+  padding: 1.5rem 1rem 4rem 1rem;
   footer {
     z-index: 1;
   }
@@ -34,10 +34,52 @@ const UserInputMain = styled.form`
   z-index: 5;
   margin: 1rem;
   width: calc(100% - 2rem);
-  max-width: 50rem;
+  max-width: 60rem;
   z-index: 2;
 `;
 
+const SponsorCard = styled.div`
+  background: ${colors.backgroundLighter};
+  box-shadow: 4px 4px 0px ${colors.bgShadowColor};
+  border-radius: 8px;
+  padding: 1rem;
+  z-index: 5;
+  margin: 1rem;
+  width: calc(100% - 2rem);
+  max-width: 60rem;
+  z-index: 2;
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    p {
+      margin: 0.25rem 0;
+    }
+  }
+  a {
+    color: ${colors.textColor};
+  }
+  img {
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px ${colors.fgShadowColor};
+    transition: box-shadow 0.2s;
+    margin: 0 auto;
+    display: block;
+    width: 200px;
+    &:hover {
+      box-shadow: 4px 4px 0px ${colors.fgShadowColor};
+    }
+    &:active {
+      box-shadow: -2px -2px 0px ${colors.fgShadowColor};
+    }
+  }
+  .cta {
+    font-size: 0.78rem;
+    a { color: ${colors.primary}; }
+  }
+`;
+
 // const FindIpButton = styled.a`
 //   margin: 0.5rem;
 //   cursor: pointer;
@@ -55,7 +97,7 @@ const ErrorMessage = styled.p`
 const SiteFeaturesWrapper = styled(StyledCard)`
   margin: 1rem;
   width: calc(100% - 2rem);
-  max-width: 50rem;
+  max-width: 60rem;
   z-index: 2;
   .links {
     display: flex;
@@ -173,6 +215,28 @@ const Home = (): JSX.Element => {
         { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
         <Button styles="width: calc(100% - 1rem);" size="large" onClick={submit}>Analyze!</Button>
       </UserInputMain>
+      <SponsorCard>
+        <Heading as="h2" size="small" color={colors.primary}>Sponsored by</Heading>
+        <div className="inner">
+          <p>
+            <a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+              Terminal Trove
+            </a> - The $HOME of all things in the terminal.
+            <br />
+            <span className="cta">
+              Get updates on the latest CLI/TUI tools via
+              the <a className="cta" href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+                Terminal Trove newsletter
+              </a>
+            </span>
+            
+          </p>
+          <a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
+            <img width="120" alt="Terminal Trove" src="https://i.ibb.co/NKtYjJ1/terminal-trove-web-check.png" />
+          </a>
+        </div>
+
+      </SponsorCard>
       <SiteFeaturesWrapper>
         <div className="features">
           <Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>