chore: update premium preview images

package.json

@@ -44,6 +44,7 @@
     "react-icons": "^5.2.1",
     "react-json-tree": "^0.18.0",
     "react-linkify-it": "^1.0.8",
+    "react-text-transition": "^3.1.0",
     "react-zoomable-ui": "^0.11.0",
     "reaflow": "5.2.8",
     "styled-components": "^6.1.11",

pnpm-lock.yaml

@@ -101,6 +101,9 @@ importers:
       react-linkify-it:
         specifier: ^1.0.8
         version: 1.0.8(react@18.3.1)
+      react-text-transition:
+        specifier: ^3.1.0
+        version: 3.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-zoomable-ui:
         specifier: ^0.11.0
         version: 0.11.0(react@18.3.1)
@@ -483,6 +486,30 @@ packages:
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
+  '@react-spring/animated@9.7.3':
+    resolution: {integrity: sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  '@react-spring/core@9.7.3':
+    resolution: {integrity: sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  '@react-spring/shared@9.7.3':
+    resolution: {integrity: sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  '@react-spring/types@9.7.3':
+    resolution: {integrity: sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==}
+
+  '@react-spring/web@9.7.3':
+    resolution: {integrity: sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   '@rollup/plugin-commonjs@24.0.0':
     resolution: {integrity: sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==}
     engines: {node: '>=14.0.0'}
@@ -2210,6 +2237,11 @@ packages:
       '@types/react':
         optional: true
 
+  react-text-transition@3.1.0:
+    resolution: {integrity: sha512-NtXEVAXvSh78+8JAnrVjpbftzD4kPowacv4GB2Nyq9C/8ko6fSm6M/XvKWQLCaZi68i9F28b++Sp8uVThlzLyg==}
+    peerDependencies:
+      react: '>=18.0.0'
+
   react-textarea-autosize@8.5.3:
     resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
     engines: {node: '>=10'}
@@ -3046,6 +3078,35 @@ snapshots:
 
   '@polka/url@1.0.0-next.25': {}
 
+  '@react-spring/animated@9.7.3(react@18.3.1)':
+    dependencies:
+      '@react-spring/shared': 9.7.3(react@18.3.1)
+      '@react-spring/types': 9.7.3
+      react: 18.3.1
+
+  '@react-spring/core@9.7.3(react@18.3.1)':
+    dependencies:
+      '@react-spring/animated': 9.7.3(react@18.3.1)
+      '@react-spring/shared': 9.7.3(react@18.3.1)
+      '@react-spring/types': 9.7.3
+      react: 18.3.1
+
+  '@react-spring/shared@9.7.3(react@18.3.1)':
+    dependencies:
+      '@react-spring/types': 9.7.3
+      react: 18.3.1
+
+  '@react-spring/types@9.7.3': {}
+
+  '@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@react-spring/animated': 9.7.3(react@18.3.1)
+      '@react-spring/core': 9.7.3(react@18.3.1)
+      '@react-spring/shared': 9.7.3(react@18.3.1)
+      '@react-spring/types': 9.7.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@rollup/plugin-commonjs@24.0.0(rollup@2.78.0)':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@2.78.0)
@@ -4991,6 +5052,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.51
 
+  react-text-transition@3.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@react-spring/web': 9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    transitivePeerDependencies:
+      - react-dom
+
   react-textarea-autosize@8.5.3(@types/react@18.2.51)(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.24.5

src/constants/landing.ts

@@ -4,26 +4,34 @@ export const metaDescription =
 export const images = Object.freeze([
   {
     id: 1,
-    alt: "Preview of JSON Crack Premium Editor highligting the compact visualization style of the graphs.",
+    alt: "⚡️ Clean and Intuitive Interface designed for productivity and ease of use.",
   },
   {
     id: 2,
-    alt: "Preview JSON Crack Premium Editor highlighting the data compare feature feature, showing the differences with red background color and using symbols to indicate the changes.",
+    alt: "🔎 Enhanced Search Experience, with the ability to focus on node as you navigate through the data.",
   },
   {
     id: 3,
-    alt: "Preview JSON Crack Premium Editor highlighting the data search feature, showing the search results in the data.",
+    alt: "✍️ Understand your data in less time, modify the data directly on the graph.",
   },
   {
     id: 4,
-    alt: "Preview JSON Crack Premium Editor highlighting the data edit feature, showing the data in a table format with the ability to edit the data directly.",
+    alt: "📋 Download graphs as images, with options to customize the image quality and background color.",
   },
   {
     id: 5,
-    alt: "Preview JSON Crack Premium Editor highlighting type generation feature. TypeScript, Go, JSON Schema, and more are shown.",
+    alt: "🎨 Customize the graph appearance, with options to change the node and edge colors, and the graph layout. Match the graph to your brand colors.",
   },
   {
     id: 6,
-    alt: "Preview JSON Crack Premium Editor highlighting the image download feature, showing the download options for the data.",
+    alt: "🖍️ Compare data on the graph, with the ability to highlight the differences between two datasets.",
+  },
+  {
+    id: 7,
+    alt: "🤖 Filter and transform your data quickly and securely using the AI powered assistant.",
+  },
+  {
+    id: 8,
+    alt: "🌓 Who doesn't love dark mode? A sleek and modern design that is easy on the eyes.",
   },
 ]);

src/containers/Landing/PremiumVsFree.tsx

@@ -1,12 +1,24 @@
 import React from "react";
+import dynamic from "next/dynamic";
 import { Title, Overlay, Paper, rem, Grid, Flex, Image, Text, Container } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
 import styled from "styled-components";
 import { ReactCompareSlider, ReactCompareSliderHandle } from "react-compare-slider";
-import { FaBolt, FaExpand, FaLifeRing, FaParachuteBox, FaShapes } from "react-icons/fa";
+import {
+  FaArrowLeft,
+  FaArrowRight,
+  FaBolt,
+  FaExpand,
+  FaLifeRing,
+  FaParachuteBox,
+  FaShapes,
+} from "react-icons/fa";
 import { FaShieldHalved } from "react-icons/fa6";
+import { presets } from "react-text-transition";
 import { images } from "src/constants/landing";
 
+const TextTransition = dynamic(() => import("react-text-transition"), { ssr: false });
+
 const StyledImageWrapper = styled.div`
   max-width: 85%;
   margin: 0 auto;
@@ -19,6 +31,7 @@ const StyledImageWrapper = styled.div`
 `;
 
 export const PremiumVsFree = () => {
+  const [currentSlide, setCurrentSlide] = React.useState(0);
   const [labelOpacity, setLabelOpacity] = React.useState(1);
   const labelStyle = {
     fontSize: "1rem",
@@ -225,12 +238,49 @@ export const PremiumVsFree = () => {
         </Grid.Col>
       </Grid>
 
-      <Paper w="95%" mt={100} mx="auto" radius="md" style={{ overflow: "hidden" }} visibleFrom="xs">
-        <Carousel bg="white" slideGap="md" slideSize="50%" height="100%" loop>
+      <Paper
+        w="95%"
+        mt={100}
+        bg="transparent"
+        mx="auto"
+        radius="md"
+        style={{ overflow: "hidden" }}
+        visibleFrom="xs"
+      >
+        <Carousel
+          onSlideChange={setCurrentSlide}
+          nextControlIcon={<FaArrowRight />}
+          previousControlIcon={<FaArrowLeft />}
+          nextControlProps={{
+            style: {
+              width: 40,
+              height: 40,
+              background: "#5199FF",
+              border: "1px solid #006aff",
+              color: "white",
+              opacity: 1,
+            },
+          }}
+          previousControlProps={{
+            style: {
+              width: 40,
+              height: 40,
+              background: "#5199FF",
+              border: "1px solid #006aff",
+              color: "white",
+              opacity: 1,
+            },
+          }}
+          bg="white"
+          slideGap="md"
+          slideSize="55%"
+          height="100%"
+          loop
+        >
           {images.map(image => (
             <Carousel.Slide key={image.id}>
               <Image
-                src={`./assets/preview/${image.id}.jpeg`}
+                src={`./assets/preview/${image.id}.png`}
                 alt={image.alt}
                 loading="lazy"
                 radius="md"
@@ -241,6 +291,14 @@ export const PremiumVsFree = () => {
             </Carousel.Slide>
           ))}
         </Carousel>
+        <Text c="black" mt="xs" fz="md" fw={500} bg="gray.1" size="lg" px="md" py="sm">
+          <TextTransition
+            springConfig={presets.wobbly}
+            style={{ justifyContent: "center", textAlign: "center" }}
+          >
+            {images[currentSlide].alt}
+          </TextTransition>
+        </Text>
       </Paper>
     </Container>
   );