feat: update landing

src/containers/Landing/FAQ.tsx

@@ -30,6 +30,11 @@ const Questions = [
     title: "Can I export the generated graphs?",
     content: "Yes, you can export the generated graphs as PNG, JPEG, or SVG files.",
   },
+  {
+    title: "How to use VS Code extension?",
+    content:
+      "You can use the VS Code extension to visualize JSON data directly in your editor. Install the extension from the VS Code marketplace and follow the instructions at extension's page.",
+  },
 ];
 
 export const FAQ = () => {

src/containers/Landing/Features.tsx

@@ -58,7 +58,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaBolt color="orange" size={24} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Real-time Visualization
               </Text>
             </Flex>
@@ -77,7 +77,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaHeart color="#ff5555" size={26} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Simple
               </Text>
             </Flex>
@@ -96,7 +96,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaMagic color="#8c0075" size={24} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Generate
               </Text>
             </Flex>
@@ -116,7 +116,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaPalette color="#4890fd" size={24} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Customizable
               </Text>
             </Flex>
@@ -136,7 +136,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaShieldHalved color="black" size={24} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Privacy First
               </Text>
             </Flex>
@@ -156,7 +156,7 @@ export const Features = () => {
           <Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
             <Flex align="center" gap={8} mb={16}>
               <FaShapes color="#00a571" size={24} />
-              <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+              <Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
                 Advanced Features
               </Text>
             </Flex>

src/containers/Landing/HeroPreview.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 const StyledPreviewWrapper = styled.div`
   margin: 0 auto;
   position: relative;
+  padding: 5rem 0;
 `;
 
 export const HeroPreview = () => {
@@ -54,13 +55,13 @@ export const HeroPreview = () => {
             onChange={setSelectedFeature}
             orientation="vertical"
             withItemsBorders={false}
-            color="grape"
             bg="transparent"
+            color="orange.7"
             size="lg"
             visibleFrom="sm"
             styles={{
               control: {
-                background: "#8f8f8f52",
+                background: "rgba(168, 168, 168, 0.2)",
                 borderRadius: "4px",
               },
               root: {

src/containers/Landing/HeroSection.tsx

@@ -1,11 +1,42 @@
 import React from "react";
-import { Stack, Flex, Badge, Button } from "@mantine/core";
+import { Manrope } from "next/font/google";
+import { Stack, Flex, Badge, Button, Text } from "@mantine/core";
 import styled from "styled-components";
 import { MdChevronRight } from "react-icons/md";
 
+const manrope = Manrope({
+  subsets: ["latin-ext"],
+});
+
 const StyledHeroSection = styled.main`
   position: relative;
 
+  &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    image-rendering: pixelated;
+    -webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent);
+    mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent);
+    --line-color-1: #f5f5f5;
+    --line-color-2: #f8f8f8;
+    background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
+      linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
+      linear-gradient(var(--line-color-2) 1px, transparent 1px),
+      linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
+    background-position:
+      -1.5px -1.5px,
+      -1.5px -1.5px,
+      -1px -1px,
+      -1px -1px;
+    background-size:
+      100px 100px,
+      100px 100px,
+      20px 20px,
+      20px 20px;
+  }
+
   @media only screen and (max-width: 1240px) {
     flex-direction: column;
   }
@@ -13,23 +44,15 @@ const StyledHeroSection = styled.main`
 
 const StyledHeroTitle = styled.h1`
   position: relative;
-  font-size: 2rem;
+  font-size: 2.2rem;
-  font-weight: 600;
+  font-weight: 800;
   display: inline;
   color: #272727;
   width: fit-content;
-  line-height: 1.2;
+  line-height: 1.12;
-  letter-spacing: -1px;
+  letter-spacing: -0.02em;
   max-width: 30rem;
-
+  font-family: ${manrope.style.fontFamily};
-  span {
-    display: inline-block;
-    white-space: nowrap;
-    padding: 0 0.5rem;
-    color: white;
-    background: black;
-    transform: rotate(-1.5deg);
-  }
 
   @media only screen and (min-width: 576px) {
     font-size: 3.2rem;
@@ -42,32 +65,31 @@ const StyledHeroTitle = styled.h1`
   }
 
   @media only screen and (min-width: 1400px) {
-    font-size: 4rem;
+    font-size: 4.2rem;
-    max-width: 48rem;
+    max-width: 50rem;
   }
 `;
 
 const StyledHeroText = styled.p`
-  font-size: 1.2rem;
+  font-size: 1rem;
   color: #626262;
   font-weight: 500;
-  max-width: 100%;
+  max-width: 75%;
-  min-width: 400px;
   margin-top: 1rem;
   text-align: center;
 
   strong {
     font-weight: 500;
-    color: #0073ff;
+    color: #be7d1c;
   }
 
   @media only screen and (min-width: 576px) {
-    font-size: 1.3rem;
+    font-size: 1.15rem;
     max-width: 80%;
   }
 
   @media only screen and (min-width: 1400px) {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     max-width: 60%;
   }
 `;
@@ -78,7 +100,7 @@ const StyledHeroSectionBody = styled.div`
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  padding: 9rem 10%;
+  padding: 7rem 10%;
   overflow: hidden;
   text-align: center;
   gap: 60px;
@@ -95,10 +117,7 @@ export const HeroSection = () => {
     <StyledHeroSection id="hero-section">
       <StyledHeroSectionBody>
         <Stack flex="1" miw={250} mx="auto" align="center">
-          <StyledHeroTitle>
+          <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
-            Convert any JSON into
-            <span>interactive graphs</span>
-          </StyledHeroTitle>
           <StyledHeroText>
             The best JSON viewer tool to <strong>visualize</strong>, <strong>format</strong> and{" "}
             <strong>modify</strong>.
@@ -120,23 +139,37 @@ export const HeroSection = () => {
               TOML
             </Badge>
           </Flex>
-
+          <Flex gap="md" wrap="wrap" justify="center">
-          <Button
+            <Button
-            component="a"
+              component="a"
-            variant="gradient"
+              color="gray.2"
-            gradient={{
+              href="/#preview"
-              from: "#4466ff",
+              size="lg"
-              to: "#003ba9",
+              radius="sm"
-            }}
+              fw={500}
-            href="/#pricing"
+              fz="md"
-            size="xl"
+              mt="lg"
-            radius="md"
+              visibleFrom="xs"
-            fw={600}
+            >
-            rightSection={<MdChevronRight size={30} />}
+              Learn more
-            mt="lg"
+            </Button>
-          >
+            <Button
-            Start Typing
+              component="a"
-          </Button>
+              color="orange"
+              href="/#pricing"
+              size="lg"
+              radius="sm"
+              fw={500}
+              fz="md"
+              rightSection={<MdChevronRight size={30} />}
+              mt="lg"
+            >
+              Start using free
+            </Button>
+          </Flex>
+          <Text c="gray.6" size="xs" mt="-10">
+            No registration needed.
+          </Text>
         </Stack>
       </StyledHeroSectionBody>
     </StyledHeroSection>

src/containers/Landing/PremiumVsFree.tsx

@@ -45,10 +45,10 @@ export const PremiumVsFree = () => {
         }}
         radius="xl"
         mx="auto"
-        mb="-16.5rem"
+        mb="-18rem"
         style={{
           textAlign: "center",
-          background: "linear-gradient(rgb(33, 148, 87) 40%, rgb(255, 255, 255) 90%)",
+          background: "linear-gradient(rgb(207, 116, 3) 40%, rgb(255, 255, 255) 90%)",
         }}
       >
         <Title
@@ -71,15 +71,14 @@ export const PremiumVsFree = () => {
             xs: 16,
           }}
           maw={{
-            base: "80%",
+            base: "60%",
-            sm: "70%",
+            sm: "50%",
           }}
           c="gray.2"
           mb={60}
         >
-          Designed to help you navigate through your data with ease. <br />
+          Designed to help you navigate through your data with ease. <br /> Smaller, faster, and
-          The editor provides a clean and intuitive interface that allows you to focus on what
+          more efficient than ever before.
-          matters most: your data.
         </Text>
       </Paper>
 

src/layout/Layout.tsx

@@ -10,8 +10,9 @@ const inter = Inter({
 });
 
 const StyledLayoutWrapper = styled.div`
-  background-image: radial-gradient(#ededed 2px, #ffffff 2px);
+  background: #fff;
-  background-size: 40px 40px;
+  /* background-image: radial-gradient(#ededed 2px, #ffffff 2px); */
+  /* background-size: 40px 40px; */
   font-family: ${inter.style.fontFamily};
 `;
 

src/layout/Navbar.tsx

@@ -6,6 +6,7 @@ import { JSONCrackLogo } from "./JsonCrackLogo";
 
 const StyledNavbarWrapper = styled.div`
   z-index: 3;
+  padding-top: 1rem;
   transition: background 0.2s ease-in-out;
 `;
 
@@ -14,7 +15,7 @@ const StyledNavbar = styled.nav`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  max-width: 1157px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 12px 24px;
   background: rgba(255, 255, 255, 0.1);
@@ -53,10 +54,10 @@ export const Navbar = () => {
             href="/#pricing"
             variant="subtle"
             color="black"
-            radius="md"
+            radius="sm"
             size="sm"
             ml={50}
-            fw={400}
+            fw={500}
           >
             Pricing
           </Button>
@@ -66,9 +67,9 @@ export const Navbar = () => {
             target="_blank"
             variant="subtle"
             color="black"
-            radius="md"
+            radius="sm"
             size="sm"
-            fw={400}
+            fw={500}
           >
             VS Code
           </Button>
@@ -78,9 +79,9 @@ export const Navbar = () => {
             href="/docs"
             variant="subtle"
             color="black"
-            radius="md"
+            radius="sm"
             size="sm"
-            fw={400}
+            fw={500}
           >
             Docs
           </Button>
@@ -90,9 +91,9 @@ export const Navbar = () => {
             href="/#faq"
             variant="subtle"
             color="black"
-            radius="md"
+            radius="sm"
             size="sm"
-            fw={400}
+            fw={500}
           >
             FAQ
           </Button>
@@ -102,21 +103,19 @@ export const Navbar = () => {
             variant="default"
             component="a"
             href="https://app.jsoncrack.com/sign-in"
-            radius="md"
+            radius="sm"
             visibleFrom="sm"
             size="md"
-            fw={600}
           >
             Sign in
           </Button>
           <Button
             component="a"
-            color="brightBlue"
+            color="orange"
             href="/editor"
-            radius="md"
+            radius="sm"
             visibleFrom="sm"
             size="md"
-            fw={600}
           >
             Editor
           </Button>

src/modules/GraphView/index.tsx

@@ -198,36 +198,38 @@ export const GraphView = ({ isWidget = false }: GraphProps) => {
         >
           <GraphCanvas isWidget={isWidget} />
         </Space>
-        <Dialog
+        {!isWidget && (
-          opened={!isDialogClosed}
+          <Dialog
-          size="lg"
+            opened={!isDialogClosed}
-          radius="md"
+            size="lg"
-          withBorder
+            radius="md"
-          position={{
+            withBorder
-            right: 15,
+            position={{
-            bottom: 40,
+              right: 15,
-          }}
+              bottom: 40,
-          onClose={() => setDialogClosed(true)}
+            }}
-        >
+            onClose={() => setDialogClosed(true)}
-          <Text size="sm" fw={500}>
+          >
-            Try the powerful Premium editor for larger graphs and advanced features with money-back
+            <Text size="sm" fw={500}>
-            guarantee.
+              Try the powerful Premium editor for larger graphs and advanced features with
-          </Text>
+              money-back guarantee.
-          <Group justify="right" mt="sm">
+            </Text>
-            <Button variant="default" onClick={() => setDialogClosed(true)}>
+            <Group justify="right" mt="sm">
-              Close
+              <Button variant="default" onClick={() => setDialogClosed(true)}>
-            </Button>
+                Close
-            <Button
+              </Button>
-              color="green"
+              <Button
-              onClick={() => {
+                color="green"
-                setVisible("upgrade")(true);
+                onClick={() => {
-                setDialogClosed(true);
+                  setVisible("upgrade")(true);
-              }}
+                  setDialogClosed(true);
-            >
+                }}
-              Explore
+              >
-            </Button>
+                Explore
-          </Group>
+              </Button>
-        </Dialog>
+            </Group>
+          </Dialog>
+        )}
       </StyledEditorWrapper>
     </>
   );

src/pages/pricing.tsx

@@ -10,14 +10,13 @@ import {
   Paper,
   SegmentedControl,
   Center,
-  Badge, // ThemeIcon,
+  Badge,
   Tooltip,
   Anchor,
 } from "@mantine/core";
 import styled from "styled-components";
 import { AiOutlineInfoCircle } from "react-icons/ai";
-import { IoIosCheckmarkCircle } from "react-icons/io";
+import { FaCheck, FaXmark } from "react-icons/fa6";
-import { IoCheckmarkCircle, IoCloseCircle } from "react-icons/io5";
 import { VscArrowRight, VscLinkExternal } from "react-icons/vsc";
 import Layout from "src/layout/Layout";
 import { gaEvent } from "src/lib/utils/gaEvent";
@@ -35,30 +34,13 @@ export const purchaseLinks = {
     "https://jsoncrack.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?desc=0&enabled=82417",
 };
 
-const StyledPaper = styled(Paper)<{ $highlight?: boolean } & any>`
+const StyledPaper = styled(Paper)`
   padding: 1.5em;
   width: 350px;
   border-radius: 4px;
   border: 2px solid #e9e9e9;
-  ${({ $highlight }) => $highlight && "border: 3px solid #28c417;"}
   background: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  ${({ $highlight }) =>
-    $highlight &&
-    `
-  &::before {
-    content: "Recommended";
-    background: #28c417;
-    position: absolute;
-    transform: translate(-27px, -61px);
-    font-weight: 500;
-    color: white;
-    padding: 6px 8px;
-    border-top-right-radius: 6px;
-    border-top-left-radius: 6px;
-  }
-  `}
 `;
 
 export const PricingCards = () => {
@@ -83,8 +65,8 @@ export const PricingCards = () => {
               label: (
                 <Flex align="center" gap="xs">
                   Annual{" "}
-                  <Badge radius="sm" variant="light" color="green">
+                  <Badge radius="sm" variant="light" color="orange">
-                    {PRICING.getAnnualSave()}% OFF
+                    Save {PRICING.getAnnualSave()}%
                   </Badge>
                 </Flex>
               ),
@@ -109,125 +91,7 @@ export const PricingCards = () => {
         }}
         mx="auto"
       >
-        {/* <StyledPaper>
+        <StyledPaper>
-          <Flex justify="space-between">
-            <Stack gap="0">
-              <Text fw={500} size="xl" c="black">
-                Partner
-              </Text>
-
-              <ThemeIcon variant="transparent" size={59}>
-                <PiChats color="black" size={50} />
-              </ThemeIcon>
-              <Text fz="xs" c="gray.7">
-                Contact us for custom pricing
-              </Text>
-            </Stack>
-          </Flex>
-          <Button
-            component="a"
-            color="green"
-            onClick={() => gaEvent("Pricing", "click partner plan")}
-            href="mailto:contact@jsoncrack.com"
-            target="_blank"
-            size="lg"
-            radius="md"
-            fullWidth
-            my="md"
-            rightSection={<VscArrowRight />}
-          >
-            Contact Us
-          </Button>
-          <Text mt="xs" fz="xs" c="dimmed">
-            Integrate JSON Crack into your applications and websites.
-          </Text>
-          <Flex direction="column" justify="space-between">
-            <List
-              spacing="md"
-              size="sm"
-              mt="xs"
-              c="black"
-              center
-              icon={<IoIosCheckmarkCircle color="green" size="20" />}
-            >
-              <List.Item>
-                <Tooltip
-                  color="blue"
-                  label="Integrate premium graph visualization into your own website/apps using iframe"
-                  maw={350}
-                  multiline
-                  withArrow
-                >
-                  <Text
-                    c="gray.7"
-                    fw={600}
-                    fz="sm"
-                    style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
-                  >
-                    JSON Crack Premium Widget
-                  </Text>
-                </Tooltip>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={600} fz="sm">
-                  1 Domain / Plan
-                </Text>
-              </List.Item>
-              <List.Item>
-                <Tooltip
-                  color="blue"
-                  label="Listen for events like node click, hover, center etc. Display your own UI"
-                  maw={350}
-                  multiline
-                  withArrow
-                >
-                  <Text
-                    c="gray.7"
-                    fw={600}
-                    fz="sm"
-                    style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
-                  >
-                    Events API
-                  </Text>
-                </Tooltip>
-              </List.Item>
-              <List.Item>
-                <Tooltip
-                  color="blue"
-                  label="Customize the look and feel of the editor matching with your own branding"
-                  maw={350}
-                  multiline
-                  withArrow
-                >
-                  <Text
-                    c="gray.7"
-                    fw={600}
-                    fz="sm"
-                    style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
-                  >
-                    Custom Theming
-                  </Text>
-                </Tooltip>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={600} fz="sm">
-                  White Labeling
-                </Text>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={600} fz="sm">
-                  Onboarding and engineering support
-                </Text>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={600} fz="sm">
-                  High-priority customer support
-                </Text>
-              </List.Item>
-            </List>
-          </Flex>
-        </StyledPaper> */}
-        <StyledPaper $highlight>
           <Flex justify="space-between">
             <Stack gap="0">
               <Flex align="center">
@@ -236,12 +100,12 @@ export const PricingCards = () => {
                 </Text>
                 {!isMonthly && (
                   <Badge
-                    fw={500}
+                    fw={600}
-                    size="lg"
+                    size="md"
                     variant="light"
-                    c="#41B619"
+                    c="orange"
-                    radius="md"
+                    radius="sm"
-                    color="green"
+                    color="orange"
                     ml="sm"
                   >
                     SAVE {PRICING.getAnnualSave()}%
@@ -264,7 +128,7 @@ export const PricingCards = () => {
           </Flex>
           <Button
             component="a"
-            color="#2ba80f"
+            color="orange"
             onClick={() => gaEvent("Pricing", "click upgrade premium")}
             href={isMonthly ? purchaseLinks.monthly : purchaseLinks.annual}
             target="_blank"
@@ -274,19 +138,19 @@ export const PricingCards = () => {
             my="md"
             rightSection={<VscArrowRight />}
           >
-            Get Started
+            Upgrade
           </Button>
           <Text mt="xs" fz="xs" c="dimmed">
-            Advanced features, better performance and optimized user interface.
+            Remake version with advanced features, better performance and smooth user interface.
           </Text>
           <Flex direction="column" justify="space-between">
             <List
-              spacing="md"
+              spacing="sm"
               size="sm"
               mt="xs"
               c="black"
               center
-              icon={<IoCheckmarkCircle color="green" size="20" />}
+              icon={<FaCheck size="18" color="#E8580C" />}
             >
               <List.Item>
                 <Tooltip
@@ -306,7 +170,7 @@ export const PricingCards = () => {
                       textUnderlineOffset: "2px",
                     }}
                   >
-                    Large data support
+                    Larger data support
                   </Text>
                 </Tooltip>
               </List.Item>
@@ -328,36 +192,19 @@ export const PricingCards = () => {
                       textUnderlineOffset: "2px",
                     }}
                   >
-                    Compact Graphs & High Performance
+                    Compact and Fast Visualization
                   </Text>
                 </Tooltip>
               </List.Item>
               <List.Item>
                 <Text c="black" fw={500} fz="sm">
-                  Compare Data Differences
+                  Compare data
                 </Text>
               </List.Item>
               <List.Item>
-                <Tooltip
+                <Text c="black" fw={500} fz="sm">
-                  color="blue"
+                  Edit data on graph
-                  label="Click on a node at graph to update data on editor."
+                </Text>
-                  maw={350}
-                  multiline
-                  withArrow
-                >
-                  <Text
-                    c="black"
-                    fw={500}
-                    fz="sm"
-                    style={{
-                      textDecoration: "underline",
-                      textDecorationStyle: "dashed",
-                      textUnderlineOffset: "2px",
-                    }}
-                  >
-                    Edit Data on Graph
-                  </Text>
-                </Tooltip>
               </List.Item>
               <List.Item>
                 <Text c="black" fw={500} fz="sm">
@@ -411,16 +258,16 @@ export const PricingCards = () => {
             Go to Editor
           </Button>
           <Text mt="xs" fz="xs" c="dimmed">
-            Basic version of the editor with limited features.
+            Basic version of the editor with limited features, open-source.
           </Text>
           <Flex direction="column" justify="space-between">
             <List
-              spacing="md"
+              spacing="sm"
               size="sm"
               mt="lg"
               c="black"
               center
-              icon={<IoIosCheckmarkCircle color="green" size="20" />}
+              icon={<FaCheck size="18" color="#E8580C" />}
             >
               <List.Item>
                 <Tooltip
@@ -478,28 +325,28 @@ export const PricingCards = () => {
                   Store 25 documents
                 </Text>
               </List.Item>
-              <List.Item icon={<IoCloseCircle color="gray" size={20} />}>
+              <List.Item icon={<FaXmark color="gray" size={20} />}>
-                <Text c="gray.7" fw={500} fz="sm">
+                <Text c="gray.6" fw={500} fz="sm">
-                  Compact Visualization
+                  Edit data on graph
                 </Text>
               </List.Item>
-              <List.Item icon={<IoCloseCircle color="gray" size={20} />}>
+              <List.Item icon={<FaXmark color="gray" size={20} />}>
-                <Text c="gray.7" fw={500} fz="sm">
+                <Text c="gray.6" fw={500} fz="sm">
-                  Compare Data
-                </Text>
-              </List.Item>
-              <List.Item icon={<IoCloseCircle color="gray" size={20} />}>
-                <Text c="gray.7" fw={500} fz="sm">
-                  Edit Data on Graph
-                </Text>
-              </List.Item>
-              <List.Item icon={<IoCloseCircle color="gray" size={20} />}>
-                <Text c="gray.7" fw={500} fz="sm">
                   AI-powered data filter
                 </Text>
               </List.Item>
-              <List.Item icon={<IoCloseCircle color="gray" size={20} />}>
+              <List.Item icon={<FaXmark color="gray" size={20} />}>
-                <Text c="gray.7" fw={500} fz="sm">
+                <Text c="gray.6" fw={500} fz="sm">
+                  Compact visualization
+                </Text>
+              </List.Item>
+              <List.Item icon={<FaXmark color="gray" size={20} />}>
+                <Text c="gray.6" fw={500} fz="sm">
+                  Compare data
+                </Text>
+              </List.Item>
+              <List.Item icon={<FaXmark color="gray" size={20} />}>
+                <Text c="gray.6" fw={500} fz="sm">
                   Customize graph colors
                 </Text>
               </List.Item>