fix: landing theme

src/containers/Landing/Features.tsx

@@ -68,12 +68,13 @@ export const Features = () => {
           <Paper
             pos="relative"
             p={30}
-            shadow="xs"
-            radius="md"
+            shadow="sm"
+            radius="sm"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder
-            style={{ overflow: "hidden" }}
+            style={{ overflow: "hidden", borderColor: "#ececec" }}
+            bg="white"
           >
             <StyledPaper>
               <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
@@ -98,12 +99,13 @@ export const Features = () => {
         <Grid.Col span={{ base: 12, sm: 6 }}>
           <Paper
             p={30}
-            shadow="xs"
-            radius="md"
+            shadow="sm"
+            radius="sm"
             w="100%"
             h={{ sm: 300, md: 370 }}
+            bg="white"
             withBorder
-            style={{ overflow: "hidden" }}
+            style={{ overflow: "hidden", borderColor: "#ececec" }}
           >
             <StyledPaper>
               <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
@@ -134,12 +136,13 @@ export const Features = () => {
         <Grid.Col span={{ base: 12, sm: 6 }}>
           <Paper
             p={30}
-            shadow="xs"
-            radius="md"
+            shadow="sm"
+            radius="sm"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder
-            style={{ overflow: "hidden" }}
+            style={{ overflow: "hidden", borderColor: "#ececec" }}
+            bg="white"
           >
             <StyledPaper>
               <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
@@ -165,12 +168,13 @@ export const Features = () => {
         <Grid.Col span={{ base: 12, sm: 6 }}>
           <Paper
             p={30}
-            shadow="xs"
-            radius="md"
+            shadow="sm"
+            radius="sm"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder
-            style={{ overflow: "hidden" }}
+            style={{ overflow: "hidden", borderColor: "#ececec" }}
+            bg="white"
           >
             <StyledPaper>
               <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>

src/containers/Landing/Outro.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Link from "next/link";
+import { Stack, Title, Button } from "@mantine/core";
+
+export const Outro = () => {
+  return (
+    <Stack align="center" mt={150}>
+      <Title
+        fz={{
+          sm: 32,
+          md: 36,
+        }}
+        c="gray.7"
+        lts={-1}
+        order={3}
+        ta="center"
+      >
+        Designed for everyone
+        <br />
+        Save time understanding your data.
+      </Title>
+
+      <Button
+        variant="gradient"
+        style={{ border: "1px solid #625BF6" }}
+        component={Link}
+        prefetch={false}
+        href="/#pricing"
+        radius="lg"
+        size="xl"
+      >
+        Get Started
+      </Button>
+    </Stack>
+  );
+};

src/layout/Footer.tsx

@@ -1,16 +1,6 @@
 import React from "react";
 import Link from "next/link";
-import {
-  Anchor,
-  Button,
-  Container,
-  Divider,
-  Flex,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
+import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
 import dayjs from "dayjs";
 import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
@@ -19,34 +9,6 @@ import { JSONCrackLogo } from "./JsonCrackLogo";
 export const Footer = () => {
   return (
     <Container mt={150}>
-      <Stack align="center">
-        <Title
-          fz={{
-            sm: 32,
-            md: 36,
-          }}
-          c="gray.7"
-          lts={-1}
-          order={3}
-          ta="center"
-        >
-          Designed for everyone
-          <br />
-          Save time understanding your data.
-        </Title>
-
-        <Button
-          variant="gradient"
-          style={{ border: "1px solid #625BF6" }}
-          component={Link}
-          prefetch={false}
-          href="/#pricing"
-          radius="lg"
-          size="xl"
-        >
-          Get Started
-        </Button>
-      </Stack>
       <Divider my={60} color="gray.3" />
       <Flex justify="space-between">
         <Stack gap={4} visibleFrom="sm">

src/pages/index.tsx

@@ -7,6 +7,7 @@ import { FAQ } from "src/containers/Landing/FAQ";
 import { Features } from "src/containers/Landing/Features";
 import { HeroPreview } from "src/containers/Landing/HeroPreview";
 import { HeroSection } from "src/containers/Landing/HeroSection";
+import { Outro } from "src/containers/Landing/Outro";
 import { PremiumVsFree } from "src/containers/Landing/PremiumVsFree";
 import { Pricing } from "src/containers/Landing/Pricing";
 import Layout from "src/layout/Layout";
@@ -27,6 +28,7 @@ export const HomePage = () => {
       <PremiumVsFree />
       <Pricing />
       <FAQ />
+      <Outro />
     </Layout>
   );
 };