add carbon ads

src/components/CarbonAds/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const isDevelopment = process.env.NODE_ENV === "development";
+
+export const CarbonAds = () => {
+  if (isDevelopment) return null;
+
+  return (
+    <>
+      <script
+        async
+        type="text/javascript"
+        src="//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsonvisiocom"
+        id="_carbonads_js"
+      ></script>
+    </>
+  );
+};

src/constants/globalStyle.ts

@@ -44,6 +44,79 @@ const GlobalStyle = createGlobalStyle`
       background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
     }
   }
+
+  #carbonads * {
+    margin: initial;
+    padding: initial;
+  }
+
+  #carbonads {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
+      overflow: hidden;
+      border-radius: 4px;
+  }
+
+  #carbonads {
+    display: flex;
+    background-color: #111827;
+    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+    z-index: 100;
+  }
+
+  #carbonads a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  #carbonads a:hover {
+    color: inherit;
+  }
+  
+  #carbonads span {
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+
+  #carbonads .carbon-wrap {
+    display: flex;
+  }
+
+  #carbonads .carbon-img {
+    display: block;
+    margin: 0;
+    line-height: 1;
+  }
+
+  #carbonads .carbon-img img {
+    display: block;
+  }
+  
+  #carbonads .carbon-text {
+    font-size: 13px;
+    padding: 10px;
+    margin-bottom: 16px;
+    line-height: 1.5;
+    text-align: left;
+  }
+
+  #carbonads .carbon-poweredby {
+    display: block;
+    padding: 6px 8px;
+    background: #111827;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 8px;
+    line-height: 1;
+    border-top-left-radius: 3px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
 `;
 
 export default GlobalStyle;

src/pages/index.tsx

@@ -12,6 +12,7 @@ import {
 import { TwitterTweetEmbed } from "react-twitter-embed";
 import { Button } from "src/components/Button";
 import { Producthunt } from "src/components/Producthunt";
+import { CarbonAds } from "src/components/CarbonAds";
 import styled from "styled-components";
 import pkg from "../../package.json";
 
@@ -274,37 +275,88 @@ const StyledHighlightedText = styled.span`
   text-decoration-color: #eab308;
 `;
 
-const StyledProducthuntSection = styled.section`
+const StyledProducthunt = styled.div`
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   gap: 3rem;
+  border-right: 1px solid white;
+  padding-right: 3rem;
 
+  @media only screen and (max-width: 768px) {
+    border-right: none;
+    border-bottom: 1px solid white;
+    padding-bottom: 3rem;
+    padding-right: 0;
+  }
+`;
+
+const StyledPaidSection = styled.section`
+  display: flex;
   max-width: 85%;
   margin: 0 auto;
+  gap: 2rem;
   padding: 60px 3%;
 
-  ${StyledSectionArea} {
-    margin: 0;
-    width: 100%;
-
-    h2 {
-      text-align: right;
-    }
-  }
-
   @media only screen and (max-width: 768px) {
     flex-direction: column;
     max-width: 80%;
+  }
+`;
 
-    ${StyledSectionArea} {
-      h2 {
-        text-align: center;
-      }
-    }
+const StyledAffiliate = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3rem;
+`;
+
+const StyledCarbonWrapper = styled.div`
+  display: flex;
+  background: #111827;
+  border-radius: 5px;
+  overflow: hidden;
+`;
+
+const StyledCarbon = styled.span`
+  display: flex;
+  position: relative;
+`;
+
+const StyledCarbonAttribute = styled.a`
+  display: block;
+  padding: 6px 8px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+`;
+
+const StyledCarbonImage = styled.a`
+  display: block;
+  margin: 0;
+  line-height: 1;
+
+  img {
+    display: block;
   }
 `;
 
+const StyledCarbonText = styled.a`
+  font-size: 13px;
+  padding: 10px;
+  line-height: 1.5;
+  text-align: left;
+`;
+
 const Home: React.FC = () => {
   const { push } = useRouter();
   const [isMobile, setIsMobile] = React.useState(false);
@@ -451,16 +503,20 @@ const Home: React.FC = () => {
         </StyledButton>
       </StyledSponsorSection>
 
-      <StyledProducthuntSection>
-        <StyledSectionArea>
+      <StyledPaidSection>
+        <StyledProducthunt>
           <StyledSubTitle>
             Support JSON Visio at
             <br />
             <StyledHighlightedText>Product Hunt</StyledHighlightedText>
           </StyledSubTitle>
-        </StyledSectionArea>
-        <Producthunt />
-      </StyledProducthuntSection>
+          <Producthunt />
+        </StyledProducthunt>
+        <StyledAffiliate>
+          <StyledSubTitle>Affiliate</StyledSubTitle>
+          <CarbonAds />
+        </StyledAffiliate>
+      </StyledPaidSection>
 
       <StyledFooter>
         <StyledFooterText>© 2022 JSON Visio - {pkg.version}</StyledFooterText>