add support button

src/components/Modal/styles.tsx

@@ -24,9 +24,10 @@ export const ModalWrapper = styled.div`
 
 export const ModalInnerWrapper = styled.div`
   min-width: 440px;
-  max-width: 70%;
+  max-width: 490px;
   width: fit-content;
   animation: ${appearAnimation} 220ms ease-in-out;
+  line-height: 20px;
 `;
 
 export const Title = styled.h2`

src/containers/Home/index.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { TwitterTweetEmbed } from "react-twitter-embed";
-import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
+import { FaGithub, FaHeart, FaLinkedin, FaTwitter } from "react-icons/fa";
 import {
   HiCursorClick,
   HiLightningBolt,
@@ -14,9 +14,11 @@ import { Producthunt } from "src/components/Producthunt";
 import { CarbonAds } from "src/components/CarbonAds";
 import pkg from "../../../package.json";
 import * as Styles from "./styles";
+import { GoalsModal } from "../Modals/GoalsModal";
 
 const Home: React.FC = () => {
   const { push } = useRouter();
+  const [isModalVisible, setModalVisible] = React.useState(false);
   const [isMobile, setIsMobile] = React.useState(false);
 
   React.useEffect(() => {
@@ -63,6 +65,12 @@ const Home: React.FC = () => {
         >
           {isMobile ? "Incompatible Device" : "GO TO EDITOR"}
         </Styles.StyledButton>
+
+        <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
+          Help JSON Visio Accomplish It's Goals
+          <FaHeart />
+        </Styles.StyledSponsorButton>
+        <GoalsModal visible={isModalVisible} setVisible={setModalVisible} />
       </Styles.StyledHeroSection>
 
       <Styles.StyledPreviewSection>

src/containers/Home/styles.tsx

@@ -51,7 +51,7 @@ export const StyledHeroSection = styled.section`
   justify-content: center;
   align-items: center;
   gap: 1.5em;
-  min-height: 45vh;
+  min-height: 40vh;
   padding: 0 3%;
 `;
 
@@ -114,6 +114,24 @@ export const StyledButton = styled(Button)`
   }
 `;
 
+export const StyledSponsorButton = styled(StyledButton)`
+  background: transparent;
+  border: 1px solid #ee3d48;
+  transition: all 200ms;
+
+  svg {
+    color: #ee3d48;
+  }
+
+  &:hover {
+    background: #ee3d48;
+
+    svg {
+      color: white;
+    }
+  }
+`;
+
 export const StyledFeaturesSection = styled.section`
   display: flex;
   max-width: 85%;

src/containers/Modals/GoalsModal/index.tsx

@@ -0,0 +1,75 @@
+import { useRouter } from "next/router";
+import React from "react";
+import { FaHeart, FaTwitter } from "react-icons/fa";
+import { Button } from "src/components/Button";
+import { Modal } from "src/components/Modal";
+import styled from "styled-components";
+
+const StyledTitle = styled.p`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.TEXT_POSITIVE};
+  flex: 1;
+  font-weight: 700;
+  font-family: "Catamaran", sans-serif;
+  margin-top: 0;
+
+  &::after {
+    background: ${({ theme }) => theme.TEXT_POSITIVE};
+    height: 1px;
+
+    content: "";
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-left: 4px;
+    opacity: 0.6;
+  }
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  padding: 40px 0 0;
+  gap: 20px;
+`;
+
+export const GoalsModal = ({ visible, setVisible }) => {
+  const { push } = useRouter();
+
+  return (
+    <Modal visible={visible} setVisible={setVisible}>
+      <Modal.Header>Help JSON Visio's Goals</Modal.Header>
+      <Modal.Content>
+        <StyledTitle>OUR GOAL</StyledTitle>
+        <b>JSON Visio's Goal</b> is to keep the service completely free and open
+        source for everyone! For the contiunity of our service and keep the new
+        updates coming we need your support to make that possible ❤️
+        <ButtonsWrapper>
+          <Button
+            status="DANGER"
+            onClick={() => push("https://github.com/sponsors/AykutSarac")}
+            block
+          >
+            <FaHeart />
+            Sponsor
+          </Button>
+          <Button
+            status="SECONDARY"
+            onClick={() =>
+              push(
+                `https://twitter.com/intent/tweet?button=&url=${encodeURIComponent(
+                  "https://jsonvisio.com"
+                )}&text=Looking+to+understand+or+explore+some+JSON?+Just+paste+or+upload+to+visualize+it+as+a+graph+with+JSON+Visio+😍&button=`
+              )
+            }
+            block
+          >
+            <FaTwitter />
+            Share on Twitter
+          </Button>
+        </ButtonsWrapper>
+      </Modal.Content>
+      <Modal.Controls setVisible={setVisible} />
+    </Modal>
+  );
+};

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;900&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500;700&family=Roboto+Mono:wght@500&family=Roboto:wght@400;500;700&display=swap"
             rel="stylesheet"
             crossOrigin="anonymous"
           />