feat: update landing

package.json

@@ -13,6 +13,7 @@
     "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
+    "@img-comparison-slider/react": "^8.0.2",
     "@mantine/carousel": "^7.9.2",
     "@mantine/code-highlight": "^7.9.2",
     "@mantine/core": "^7.9.2",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@img-comparison-slider/react':
+    specifier: ^8.0.2
+    version: 8.0.2
   '@mantine/carousel':
     specifier: ^7.9.2
     version: 7.9.2(@mantine/core@7.9.2)(@mantine/hooks@7.9.2)(embla-carousel-react@8.1.3)(react-dom@18.3.1)(react@18.3.1)
@@ -442,6 +445,12 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     dev: true
 
+  /@img-comparison-slider/react@8.0.2:
+    resolution: {integrity: sha512-Him0yhbXpMXdnV6R3XE3LiXcMRhSXFMsbk6I7ct5HxO2YpK/BAGz3ub+7+akJRnK2XI7c3vQqvoIE507N1K4SA==}
+    dependencies:
+      img-comparison-slider: 8.0.6
+    dev: false
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -2844,6 +2853,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /img-comparison-slider@8.0.6:
+    resolution: {integrity: sha512-ej4de7mWyjcXZvDgHq8K2a/dG8Vv+qYTdUjZa3cVILf316rLtDrHyGbh9fPvixmAFgbs30zTLfmaRDa7abjtzw==}
+    dev: false
+
   /immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false

src/containers/Modals/UpgradeModal/index.tsx

@@ -13,14 +13,27 @@ import {
   useMantineColorScheme,
   List,
   Anchor,
-  Alert,
+  Image,
+  ScrollArea,
 } from "@mantine/core";
+import styled from "styled-components";
+import { ImgComparisonSlider } from "@img-comparison-slider/react";
 import { IoMdArrowForward } from "react-icons/io";
 import { MdCheck } from "react-icons/md";
 import { gaEvent } from "src/lib/utils/gaEvent";
 import { PRICING } from "src/pages/pricing";
 import useUser from "src/store/useUser";
 
+const StyledImgComparisonSlider = styled(ImgComparisonSlider)`
+  --divider-width: 2px;
+  --divider-color: #515151;
+  --default-handle-opacity: 0.3;
+  --default-handle-color: #000;
+  border: 1px solid #999999;
+  overflow: hidden;
+  border-radius: 12px;
+`;
+
 const overlayLinks = {
   monthly:
     "https://herowand.lemonsqueezy.com/buy/ce30521f-c7cc-44f3-9435-995d3260ba22?embed=1&media=0&logo=0&desc=0&discount=0&enabled=67805",
@@ -63,21 +76,15 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
         </Text>
       }
       centered
-      size="md"
+      size="lg"
       opened={opened}
       onClose={onClose}
       zIndex={202}
     >
-      <Alert>
-        We made a new editor for larger data, faster work, and more features. If you use JSON Crack
-        already, upgrading to this new version will make things much better.
-      </Alert>
-
       <Radio.Group
         color="indigo"
         value={plan}
         onChange={setPlan}
-        mt="md"
         label="Select your plan:"
         size="md"
       >
@@ -117,25 +124,46 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
         </Flex>
       </Radio.Group>
 
-      <Text mt="lg" fz="sm" fw="bold" mb="xs">
-        What You Get
-      </Text>
-      <List
-        fz="sm"
-        lts={0.2}
-        icon={<MdCheck color="#5199FF" size={20} style={{ verticalAlign: "middle" }} />}
-      >
-        <List.Item>500% Larger data size support (~4 MB)</List.Item>
-        <List.Item>400% Better performance</List.Item>
-        <List.Item>50% Less Nodes & Compact Graph Visualization</List.Item>
-        <List.Item>Compare Data on Graphs</List.Item>
-        <List.Item>Edit on Graphs</List.Item>
-        <List.Item>
-          <Anchor c="gray" fz="sm" href="/#preview" target="_blank">
-            ...and more
-          </Anchor>
-        </List.Item>
-      </List>
+      <ScrollArea.Autosize h={400} offsetScrollbars>
+        <Text mt="md" fz="sm" fw="bold" mb="xs">
+          What You Get
+        </Text>
+        <List
+          fz="sm"
+          lts={0.2}
+          icon={<MdCheck color="#5199FF" size={20} style={{ verticalAlign: "middle" }} />}
+        >
+          <List.Item>500% Larger data size support (~4 MB)</List.Item>
+          <List.Item>400% Better performance</List.Item>
+          <List.Item>50% Less Nodes & Compact Graph Visualization</List.Item>
+          <List.Item>Compare Data on Graphs</List.Item>
+          <List.Item>Edit on Graphs</List.Item>
+          <List.Item>
+            <Anchor c="gray" fz="sm" href="/#preview" target="_blank">
+              ...and more
+            </Anchor>
+          </List.Item>
+        </List>
+
+        <Paper mx="auto" maw="100%" mt="sm" w="fit-content">
+          <StyledImgComparisonSlider hover allowTransparency>
+            <Image
+              slot="first"
+              width={600}
+              src="./assets/compare/graph_pro.webp"
+              loading="lazy"
+              alt="Premium Editor"
+            />
+            <Image
+              slot="second"
+              width={600}
+              src="./assets/compare/graph_free.webp"
+              loading="lazy"
+              alt="Free Editor"
+            />
+          </StyledImgComparisonSlider>
+        </Paper>
+      </ScrollArea.Autosize>
 
       <Divider my="md" />
       <Flex align="center" justify="space-between">

src/pages/index.tsx

@@ -21,6 +21,7 @@ import {
 import { Carousel } from "@mantine/carousel";
 import "@mantine/carousel/styles.css";
 import styled from "styled-components";
+import { ImgComparisonSlider } from "@img-comparison-slider/react";
 import { BiChevronDown } from "react-icons/bi";
 import { FaGithub } from "react-icons/fa";
 import { IoSparklesSharp } from "react-icons/io5";
@@ -172,6 +173,14 @@ const StyledCarouselWrapper = styled.section`
   }
 `;
 
+const StyledImgComparisonSlider = styled(ImgComparisonSlider)`
+  --divider-width: 2px;
+  --divider-color: #515151;
+  --default-handle-opacity: 0.3;
+  --default-handle-color: #000;
+  overflow: hidden;
+`;
+
 const FAQ = [
   {
     title: "What is JSON Crack?",
@@ -621,6 +630,31 @@ export const HomePage = () => {
         Pricing
       </Title>
       <PricingCards />
+      <Paper mx="auto" bg="transparent" my="lg" maw="70%" w="fit-content" visibleFrom="sm">
+        <StyledImgComparisonSlider
+          hover
+          style={{
+            border: "1px solid #999999",
+            overflow: "hidden",
+            borderRadius: 12,
+          }}
+        >
+          <Image
+            slot="first"
+            width={600}
+            src="./assets/compare/pro.webp"
+            loading="lazy"
+            alt="Premium Editor"
+          />
+          <Image
+            slot="second"
+            width={600}
+            src="./assets/compare/free.webp"
+            loading="lazy"
+            alt="Free Editor"
+          />
+        </StyledImgComparisonSlider>
+      </Paper>
 
       <Container id="faq" component="section">
         <Title

src/pages/pricing.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Head from "next/head";
-import Link from "next/link";
 import {
   Flex,
   Stack,
@@ -22,15 +21,15 @@ import Layout from "src/layout/Layout";
 import { gaEvent } from "src/lib/utils/gaEvent";
 
 export const PRICING = {
-  MONTHLY: 5,
-  ANNUAL: 4,
+  MONTHLY: 6,
+  ANNUAL: 5,
 };
 
 export const purchaseLinks = {
   monthly:
-    "https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22?checkout[discount_code]=Q2MDE1MA&desc=0&enabled=67805",
+    "https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22?desc=0&enabled=67805",
   annual:
-    "https://herowand.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?checkout[discount_code]=Q5OTKYMW&desc=0&enabled=82417",
+    "https://herowand.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?desc=0&enabled=82417",
 };
 
 const StyledPaperFree = styled(Paper)`
@@ -78,15 +77,17 @@ export const PricingCards = () => {
                 <Text fw={500} size="xl" c="black">
                   Premium
                 </Text>
-                <Badge
-                  size="lg"
-                  variant="light"
-                  color="#ff0000"
-                  ml="sm"
-                  leftSection={<FaArrowTrendDown />}
-                >
-                  %{isMonthly ? 16 : 20}
-                </Badge>
+                {!isMonthly && (
+                  <Badge
+                    size="lg"
+                    variant="light"
+                    color="#ff0000"
+                    ml="sm"
+                    leftSection={<FaArrowTrendDown />}
+                  >
+                    20%
+                  </Badge>
+                )}
               </Flex>
 
               <Flex gap="xs" align="baseline">
@@ -96,17 +97,11 @@ export const PricingCards = () => {
                 <Text fz="md" fw={500} c="gray.6">
                   / mo
                 </Text>
-                <Text fz="xl" lts={1} c="dark" td="line-through" style={{ alignSelf: "start" }}>
-                  ${isMonthly ? PRICING.MONTHLY + 1 : PRICING.ANNUAL + 1}
-                </Text>
               </Flex>
               <Text fz="xs" c="gray.7">
                 billed {isMonthly ? "monthly" : "annually"}
               </Text>
             </Stack>
-            <Anchor c="dark" fz="sm" component={Link} h="fit-content" href="/#preview">
-              Preview
-            </Anchor>
           </Flex>
           <Button
             component="a"
@@ -155,7 +150,7 @@ export const PricingCards = () => {
               </List.Item>
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
-                  Edit directly on visualizations reflecting on data
+                  Edit Nodes
                 </Text>
               </List.Item>
               <List.Item>