feat: update ui seepremium

Author: AykutSarac

src/containers/Landing/SeePremium.tsx

@@ -1,5 +1,18 @@
 import React from "react";
-import { Title, Image, Flex, Box, Button, Text, Paper, Container } from "@mantine/core";
+import {
+  Title,
+  Image,
+  Flex,
+  Box,
+  Button,
+  Text,
+  Paper,
+  Container,
+  Mark,
+  Avatar,
+  Rating,
+  Stack,
+} from "@mantine/core";
 import styled from "styled-components";
 import { FaArrowRightLong } from "react-icons/fa6";
 
@@ -11,16 +24,16 @@ const StyledImageWrapper = styled.div`
 
 export const SeePremium = () => {
   return (
-    <Container size="xl">
+    <Container size="sm">
       <Paper
-        py={12}
+        py={20}
         px={30}
-        bg="#202842"
+        bg="#2a954a"
         id="premium"
         component="section"
         w="100%"
         style={{
-          borderRadius: 20,
+          borderRadius: 12,
           overflow: "hidden",
         }}
       >
@@ -34,21 +47,37 @@ export const SeePremium = () => {
                 w="fit-content"
                 loading="eager"
               />
-              <Title fz="20" fw="500" c="gray.2">
-                Upgrade to ToDiagram
+              <Title fz="20" fw="600" c="white">
+                Upgrade to{" "}
+                <Mark color="yellow.5" px="4" py="2" style={{ borderRadius: 4 }}>
+                  ToDiagram
+                </Mark>
               </Title>
             </Flex>
 
-            <Text c="gray.4" fz="h3" mb="xl" maw={410}>
-              Larger uploads, faster loading, beautiful diagrams and advanced tools.
+            <Text c="gray.1" mb="sm" maw={410}>
+              Try out the premium features of ToDiagram and create beautiful diagrams with ease.
             </Text>
+            <Flex align="center" gap="sm">
+              <Avatar.Group>
+                <Avatar src="https://todiagram.com/images/landing/user-1.webp" alt="user" />
+                <Avatar src="https://todiagram.com/images/landing/user-2.webp" alt="user" />
+                <Avatar src="https://todiagram.com/images/landing/user-3.webp" alt="user" />
+              </Avatar.Group>
+              <Stack gap="0">
+                <Rating color="yellow.5" value={5} readOnly />
+                <Text c="white" fz="sm">
+                  Loved by 400+ users
+                </Text>
+              </Stack>
+            </Flex>
             <Button
               component="a"
               href="https://todiagram.com"
               display="block"
               w="fit-content"
               miw={200}
-              color="#fe5e49"
+              color="yellow.5"
               size="md"
               mt="xl"
               rightSection={<FaArrowRightLong />}
@@ -59,7 +88,7 @@ export const SeePremium = () => {
             </Button>
           </Box>
 
-          <Box visibleFrom="xs">
+          <Box visibleFrom="xs" style={{ alignSelf: "end" }}>
             <StyledImageWrapper>
               <Image
                 mah="200"