add widget to homepage

src/containers/Home/index.tsx

@@ -151,6 +151,23 @@ const Home: React.FC = () => {
         </Styles.StyledSectionArea>
       </Styles.StyledGitHubSection>
 
+      <Styles.StyledGitHubSection>
+        <Styles.StyledSectionArea>
+          <Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
+          <Styles.StyledMinorTitle>
+            Easily embed the JSON Visio graph into your website to showcase your
+            visitors, blog readers or anybody else!
+          </Styles.StyledMinorTitle>
+        </Styles.StyledSectionArea>
+        <div>
+          <Styles.StyledIframge
+            src="https://jsonvisio.com/widget/%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"
+            width="512"
+            height="384"
+          ></Styles.StyledIframge>
+        </div>
+      </Styles.StyledGitHubSection>
+
       <Styles.StyledPaidSection>
         <Styles.StyledProducthunt>
           <Styles.StyledSubTitle>

src/containers/Home/styles.tsx

@@ -148,6 +148,11 @@ export const StyledCardDescription = styled.p`
   font-size: 0.875rem;
 `;
 
+export const StyledIframge = styled.iframe`
+  border: 2px solid ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  border-radius: 6px;
+`;
+
 export const StyledGitHubSection = styled.section`
   display: flex;
   flex-direction: row;
@@ -211,6 +216,22 @@ export const StyledSponsorSection = styled.section`
   }
 `;
 
+export const StyledEmbedSection = styled.section`
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  align-items: center;
+  max-width: 85%;
+  margin: 0 auto;
+  gap: 2rem;
+  line-height: 1.5;
+  padding: 60px 3%;
+
+  @media only screen and (max-width: 768px) {
+    max-width: 80%;
+  }
+`;
+
 export const StyledPreviewSection = styled.section`
   display: flex;
   flex-direction: row;