add producthunt embed

src/components/Producthunt/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledProducthunt = styled.a`
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+`;
+
+const StyledImage = styled.img`
+  width: 250px;
+  height: 54px;
+`;
+
+export const Producthunt = () => {
+  return (
+    <StyledProducthunt
+      href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json-visio"
+      target="_blank"
+      rel="me"
+    >
+      <StyledImage
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light"
+        alt="JSON Visio - Simple visualization tool for your JSON data. | Product Hunt"
+      />
+    </StyledProducthunt>
+  );
+};

src/pages/index.tsx

@@ -8,6 +8,7 @@ import { AiFillGithub } from "react-icons/ai";
 import { Footer } from "src/components/Footer";
 import Link from "next/link";
 import Head from "next/head";
+import { Producthunt } from "src/components/Producthunt";
 
 const StyledHome = styled.div`
   padding: 24px;
@@ -124,6 +125,7 @@ const Home: React.FC = () => {
         </StyledContent>
         <Image src="graphs5.svg" width={500} height={400} alt="preview" />
       </Container>
+      <Producthunt />
       <Footer />
     </StyledHome>
   );