add vscode link

src/containers/Home/index.tsx

@@ -8,6 +8,7 @@ import {
   HiOutlineDownload,
   HiOutlineSearchCircle,
 } from "react-icons/hi";
+import { SiVisualstudiocode } from "react-icons/si";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Producthunt } from "src/components/Producthunt";
@@ -49,9 +50,21 @@ const HeroSection = () => {
         graphs.
       </Styles.StyledSubTitle>
       <Styles.StyledMinorTitle>Paste - Import - Fetch!</Styles.StyledMinorTitle>
-      <Styles.StyledButton rel="prefetch" href="/editor" target="_blank" link>
-        GO TO EDITOR
-      </Styles.StyledButton>
+
+      <Styles.StyledButtonWrapper>
+        <Styles.StyledButton rel="prefetch" href="/editor" target="_blank" link>
+          GO TO EDITOR
+        </Styles.StyledButton>
+        <Link
+          href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
+          passHref
+        >
+          <Styles.StyledSponsorButton isBlue>
+            GET IT ON VS CODE
+            <SiVisualstudiocode />
+          </Styles.StyledSponsorButton>
+        </Link>
+      </Styles.StyledButtonWrapper>
 
       <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
         Help JSON Crack&apos;s Goals

src/containers/Home/styles.tsx

@@ -1,6 +1,11 @@
 import { Button } from "src/components/Button";
 import styled from "styled-components";
 
+export const StyledButtonWrapper = styled.div`
+  display: flex;
+  gap: 18px;
+`;
+
 export const StyledImageWrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -122,17 +127,17 @@ export const StyledButton = styled(Button)`
   }
 `;
 
-export const StyledSponsorButton = styled(StyledButton)`
+export const StyledSponsorButton = styled(StyledButton)<{ isBlue?: boolean }>`
   background: transparent;
-  border: 1px solid #ee3d48;
+  border: 1px solid ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
   transition: all 200ms;
 
   svg {
-    color: #ee3d48;
+    color: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
   }
 
   &:hover {
-    background: #ee3d48;
+    background: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
 
     svg {
       color: white;