diff --git a/package.json b/package.json index 2ff3286..59fda71 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0987f5a..77d9133 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/public/assets/preview/1.jpeg b/public/assets/preview/1.jpeg deleted file mode 100644 index b5e2002..0000000 Binary files a/public/assets/preview/1.jpeg and /dev/null differ diff --git a/public/assets/preview/1.png b/public/assets/preview/1.png new file mode 100644 index 0000000..3fd1bc4 Binary files /dev/null and b/public/assets/preview/1.png differ diff --git a/public/assets/preview/2.jpeg b/public/assets/preview/2.jpeg deleted file mode 100644 index 9b320c5..0000000 Binary files a/public/assets/preview/2.jpeg and /dev/null differ diff --git a/public/assets/preview/2.png b/public/assets/preview/2.png new file mode 100644 index 0000000..3a2d20b Binary files /dev/null and b/public/assets/preview/2.png differ diff --git a/public/assets/preview/3.jpeg b/public/assets/preview/3.jpeg deleted file mode 100644 index 7eb7749..0000000 Binary files a/public/assets/preview/3.jpeg and /dev/null differ diff --git a/public/assets/preview/3.png b/public/assets/preview/3.png new file mode 100644 index 0000000..c1906dc Binary files /dev/null and b/public/assets/preview/3.png differ diff --git a/public/assets/preview/4.jpeg b/public/assets/preview/4.jpeg deleted file mode 100644 index 3202640..0000000 Binary files a/public/assets/preview/4.jpeg and /dev/null differ diff --git a/public/assets/preview/4.png b/public/assets/preview/4.png new file mode 100644 index 0000000..64fb391 Binary files /dev/null and b/public/assets/preview/4.png differ diff --git a/public/assets/preview/5.jpeg b/public/assets/preview/5.jpeg deleted file mode 100644 index 4c10089..0000000 Binary files a/public/assets/preview/5.jpeg and /dev/null differ diff --git a/public/assets/preview/5.png b/public/assets/preview/5.png new file mode 100644 index 0000000..a1f7385 Binary files /dev/null and b/public/assets/preview/5.png differ diff --git a/public/assets/preview/6.jpeg b/public/assets/preview/6.jpeg deleted file mode 100644 index 15d052f..0000000 Binary files a/public/assets/preview/6.jpeg and /dev/null differ diff --git a/public/assets/preview/6.png b/public/assets/preview/6.png new file mode 100644 index 0000000..39dfdfa Binary files /dev/null and b/public/assets/preview/6.png differ diff --git a/public/assets/preview/7.png b/public/assets/preview/7.png new file mode 100644 index 0000000..47d8401 Binary files /dev/null and b/public/assets/preview/7.png differ diff --git a/public/assets/preview/8.png b/public/assets/preview/8.png new file mode 100644 index 0000000..56b87c3 Binary files /dev/null and b/public/assets/preview/8.png differ diff --git a/src/constants/landing.ts b/src/constants/landing.ts index d4e6113..2516945 100644 --- a/src/constants/landing.ts +++ b/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.", }, ]); diff --git a/src/containers/Landing/PremiumVsFree.tsx b/src/containers/Landing/PremiumVsFree.tsx index 68a8d07..18c0486 100644 --- a/src/containers/Landing/PremiumVsFree.tsx +++ b/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 = () => { - - + + } + previousControlIcon={} + 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 => ( {image.alt} { ))} + + + {images[currentSlide].alt} + + );