New Landing Page

package.json

@@ -23,6 +23,7 @@
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
     "react-render-if-visible": "^2.1.0",
+    "react-twitter-embed": "^4.0.4",
     "react-zoom-pan-pinch": "^2.1.3",
     "reaflow": "^5.0.4",
     "save-html-as-image": "^1.7.1",

src/components/Button/index.tsx

@@ -24,6 +24,7 @@ const StyledButton = styled.button<{ status: keyof typeof ButtonType }>`
   color: #ffffff;
   padding: 8px 16px;
   min-width: 60px;
+  width: fit-content;
 
   :disabled {
     cursor: not-allowed;

src/components/Producthunt/index.tsx

@@ -1,19 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-const StyledProducthunt = styled.a`
-  position: fixed;
-  bottom: 12px;
-  right: 12px;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
 const StyledImage = styled.img`
-  width: 250px;
-  height: 54px;
+  object-fit: contain;
+  max-width: 300px;
 
   @media only screen and (max-width: 768px) {
     width: 200px;
@@ -23,15 +13,17 @@ const StyledImage = styled.img`
 
 export const Producthunt = () => {
   return (
-    <StyledProducthunt
+    <a
       href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json-visio"
       target="_blank"
-      rel="me"
+      rel="noreferrer"
     >
       <StyledImage
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light"
+        width="500"
+        height="200"
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=neutral"
         alt="JSON Visio - Simple visualization tool for your JSON data. | Product Hunt"
       />
-    </StyledProducthunt>
+    </a>
   );
 };

src/constants/globalStyle.ts

@@ -6,10 +6,15 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
     box-sizing: border-box;
     color: ${({ theme }) => theme.FULL_WHITE};
-    background: ${({ theme }) => theme.BLACK_PRIMARY};
     font-family: 'Catamaran', sans-serif;
     font-weight: 400;
     font-size: 16px;
+    scroll-behavior: smooth;
+
+    background-color: #000000;
+    opacity: 1;
+    background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
+    background-size: 10px 10px;
   }
 
   a {

src/pages/_document.tsx

@@ -52,7 +52,7 @@ class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
         </Head>