update landing hero

src/constants/previewSection.ts

@@ -0,0 +1,91 @@
+import { defaultJson } from "./data";
+
+export const TABS = [
+  {
+    id: 0,
+    name: "Standard JSON",
+    json: defaultJson,
+  },
+  {
+    id: 1,
+    name: "Gallery",
+    json: JSON.stringify(
+      {
+        "cats! 🐾": [
+          "https://gifimage.net/wp-content/uploads/2017/10/cool-cat-gif-1.gif",
+          "https://media.tenor.com/vRHYVqQCMQAAAAAM/cool-cat-chilling.gif",
+          "https://media.tenor.com/k6B6P_kvBSYAAAAM/awesome-cat.gif",
+        ],
+      },
+      null,
+      2
+    ),
+  },
+  {
+    id: 2,
+    name: "Nested JSON",
+    json: JSON.stringify(
+      [
+        {
+          id: "0001",
+          type: "donut",
+          name: "Cake",
+          ppu: 0.55,
+          batters: {
+            batter: [
+              { id: "1001", type: "Regular" },
+              { id: "1002", type: "Chocolate" },
+              { id: "1003", type: "Blueberry" },
+              { id: "1004", type: "Devil's Food" },
+            ],
+          },
+          topping: [
+            { id: "5001", type: "None" },
+            { id: "5002", type: "Glazed" },
+            { id: "5005", type: "Sugar" },
+            { id: "5007", type: "Powdered Sugar" },
+            { id: "5006", type: "Chocolate with Sprinkles" },
+            { id: "5003", type: "Chocolate" },
+            { id: "5004", type: "Maple" },
+          ],
+        },
+        {
+          id: "0002",
+          type: "donut",
+          name: "Raised",
+          ppu: 0.55,
+          batters: {
+            batter: [{ id: "1001", type: "Regular" }],
+          },
+          topping: [
+            { id: "5001", type: "None" },
+            { id: "5002", type: "Glazed" },
+            { id: "5005", type: "Sugar" },
+            { id: "5003", type: "Chocolate" },
+            { id: "5004", type: "Maple" },
+          ],
+        },
+        {
+          id: "0003",
+          type: "donut",
+          name: "Old Fashioned",
+          ppu: 0.55,
+          batters: {
+            batter: [
+              { id: "1001", type: "Regular" },
+              { id: "1002", type: "Chocolate" },
+            ],
+          },
+          topping: [
+            { id: "5001", type: "None" },
+            { id: "5002", type: "Glazed" },
+            { id: "5003", type: "Chocolate" },
+            { id: "5004", type: "Maple" },
+          ],
+        },
+      ],
+      null,
+      2
+    ),
+  },
+];

src/containers/Home/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import Link from "next/link";
 import Script from "next/script";
@@ -9,17 +10,26 @@ import {
   HiOutlineDownload,
   HiOutlineSearchCircle,
 } from "react-icons/hi";
-import { IoRocketSharp } from "react-icons/io5";
+import { IoHeart } from "react-icons/io5";
 import { SiVisualstudiocode } from "react-icons/si";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Footer } from "src/components/Footer";
 import { Producthunt } from "src/components/Producthunt";
 import { Sponsors } from "src/components/Sponsors";
 import { SupportButton } from "src/components/SupportButton";
 import { baseURL } from "src/constants/data";
+import { TABS } from "src/constants/previewSection";
 import { PricingCards } from "../PricingCards";
 import * as Styles from "./styles";
 
+const SyntaxHighlighter = dynamic(
+  () => import("react-syntax-highlighter").then(c => c.PrismAsync),
+  {
+    ssr: false,
+  }
+);
+
 const Navbar = () => (
   <Styles.StyledNavbar>
     <Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
@@ -61,9 +71,14 @@ const HeroSection = () => {
       </Styles.StyledButton>
 
       <Styles.StyledButtonWrapper>
-        <Styles.StyledSponsorButton href="/pricing" link>
-          GET PREMIUM
-          <IoRocketSharp />
+        <Styles.StyledSponsorButton
+          href="https://github.com/sponsors/AykutSarac"
+          target="_blank"
+          rel="noreferrer"
+          link
+        >
+          SPONSOR US
+          <IoHeart />
         </Styles.StyledSponsorButton>
         <Styles.StyledSponsorButton
           href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
@@ -78,18 +93,54 @@ const HeroSection = () => {
   );
 };
 
-const PreviewSection = () => (
-  <Styles.StyledPreviewSection>
-    <Styles.StyledImageWrapper>
-      <Styles.StyledImage
-        width="1200"
-        height="863"
-        src="/assets/jsoncrack-screenshot.webp"
-        alt="preview"
+const PreviewSection = () => {
+  const [currentTab, setCurrentTab] = React.useState(0);
+
+  const updateTab = (tabId: number) => {
+    const embed = document.getElementById("jcPreview") as HTMLIFrameElement;
+    embed.contentWindow?.postMessage({
+      json: TABS[tabId].json,
+    });
+    setCurrentTab(tabId);
+  };
+
+  return (
+    <Styles.StyledPreviewSection>
+      <Styles.StyledHighlightWrapper>
+        <Styles.StyledTabsWrapper>
+          {TABS.map(tab => (
+            <Styles.StyledTab
+              active={tab.id === currentTab}
+              onClick={() => updateTab(tab.id)}
+              key={tab.id}
+            >
+              {tab.name}
+            </Styles.StyledTab>
+          ))}
+        </Styles.StyledTabsWrapper>
+        <SyntaxHighlighter
+          style={vscDarkPlus}
+          customStyle={{
+            fontSize: "16px",
+            width: "100%",
+            height: "440px",
+            margin: "0",
+            borderTop: "2px solid #4D4D4D",
+          }}
+          language="json"
+          showLineNumbers
+        >
+          {TABS[currentTab].json}
+        </SyntaxHighlighter>
+      </Styles.StyledHighlightWrapper>
+
+      <Styles.StyledPreviewFrame
+        id="jcPreview"
+        src={`${baseURL}/widget?json=63b73305c358219fbc421adf`}
       />
-    </Styles.StyledImageWrapper>
-  </Styles.StyledPreviewSection>
-);
+    </Styles.StyledPreviewSection>
+  );
+};
 
 const FeaturesSection = () => (
   <Styles.StyledFeaturesSection id="features">
@@ -209,29 +260,9 @@ const EmbedSection = () => (
       </Styles.StyledButton>
     </Styles.StyledSectionArea>
     <div>
-      <Styles.StyledIframge
-        src={`${baseURL}/widget`}
-        onLoad={e => {
-          const frame = e.currentTarget.contentWindow;
-          setTimeout(() => {
-            frame?.postMessage(
-              {
-                json: JSON.stringify({
-                  "random images": [
-                    "https://random.imagecdn.app/50/50?.png",
-                    "https://random.imagecdn.app/80/80?.png",
-                    "https://random.imagecdn.app/100/100?.png",
-                  ],
-                }),
-                options: {
-                  theme: "dark",
-                },
-              },
-              "*"
-            );
-          }, 500);
-        }}
-      ></Styles.StyledIframge>
+      <Styles.StyledFrame
+        src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
+      ></Styles.StyledFrame>
     </div>
   </Styles.StyledSection>
 );

src/containers/Home/styles.tsx

@@ -242,11 +242,11 @@ export const StyledCardDescription = styled.p`
   font-size: 0.875rem;
 `;
 
-export const StyledIframge = styled.iframe`
+export const StyledFrame = styled.iframe`
   width: 100%;
   height: 100%;
   min-height: 200px;
-  border: 2px solid ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  border: 2px solid ${({ theme }) => theme.PRIMARY};
   border-radius: 6px;
 
   @media only screen and (min-width: 768px) {
@@ -254,6 +254,14 @@ export const StyledIframge = styled.iframe`
   }
 `;
 
+export const StyledPreviewFrame = styled(StyledFrame)`
+  border: none;
+  border-left: 2px solid ${({ theme }) => theme.PRIMARY};
+  border-radius: 0;
+  height: 480px;
+  width: 50%;
+`;
+
 export const StyledSection = styled.section<{ reverse?: boolean }>`
   display: flex;
   flex-direction: row;
@@ -333,15 +341,53 @@ export const StyledPreviewSection = styled.section`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  max-width: 85%;
+  width: 70%;
   margin: 0 auto;
-  padding: 0 3%;
+  background: ${({ theme }) => theme.BLACK_SECONDARY};
+  border: 2px solid ${({ theme }) => theme.PRIMARY};
+  border-radius: 6px;
+  overflow: hidden;
+  height: 480px;
 
-  @media only screen and (max-width: 768px) {
+  @media only screen and (max-width: 992px) {
     display: none;
   }
 `;
 
+export const StyledHighlightWrapper = styled.div`
+  width: 50%;
+`;
+
+export const StyledTabsWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  padding: 8px 8px;
+  padding-bottom: 0;
+
+  pre {
+    border-top: 2px solid ${({ theme }) => theme.PRIMARY};
+  }
+`;
+
+export const StyledTab = styled.button<{ active?: boolean }>`
+  border-radius: 6px 6px 0 0;
+  background: ${({ active }) => active && "#1e1e1e"};
+  border: 2px solid ${({ theme, active }) => (active ? theme.PRIMARY : "transparent")};
+  border-bottom: 0;
+  margin-bottom: -2px;
+  padding: 8px 16px;
+  min-width: 80px;
+  max-width: 150px;
+  color: ${({ theme, active }) => (active ? theme.INTERACTIVE_ACTIVE : theme.INTERACTIVE_NORMAL)};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:hover {
+    color: ${({ theme, active }) => !active && theme.INTERACTIVE_HOVER};
+  }
+`;
+
 export const StyledImage = styled.img`
   width: 100%;
   height: 100%;