- updated landing page

src/App.css

@@ -16,43 +16,53 @@
 }
 
 .page-enter-active,
-.page-exit-active{
+.page-exit-active {
     transition: opacity 300ms;
 }
 
 .fade-enter-active,
-.fade-exit-active{
+.fade-exit-active {
     transition: opacity 300ms;
 }
 
 .right-to-left-enter {
     transform: translateX(100%);
 }
+
 .right-to-left-enter-active {
     transform: translateX(0);
-    transition:all 300ms ease;
+    transition: all 300ms ease;
 }
 
 .right-to-left-exit {
     transform: translateX(0);
 }
+
 .right-to-left-exit-active {
     transform: translateX(-100%);
-    transition:all 300ms ease;
+    transition: all 300ms ease;
 }
 
 .left-to-right-enter {
     transform: translateX(-100%);
 }
+
 .left-to-right-enter-active {
     transform: translateX(0);
-    transition:all 300ms ease;
+    transition: all 300ms ease;
 }
 
 .left-to-right-exit {
     transform: translateX(0);
 }
+
 .left-to-right-exit-active {
     transform: translateX(100%);
-    transition:all 300ms ease;
+    transition: all 300ms ease;
+}
+
+.text-highlight {
+    background: -webkit-linear-gradient(45deg, #8e44ad , #3498db);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }

src/App.tsx

@@ -13,13 +13,16 @@ function App() {
             <ConfigProvider
                 theme={{
                     token: {
-                        colorPrimary: '#925368',
+                        colorPrimary: '#2378c3',
                         borderRadius: 6,
                     },
                     components: {
                         Breadcrumb: {
                             linkColor: 'rgba(0,0,0,.8)',
                             itemColor: 'rgba(0,0,0,.8)'
+                        },
+                        Card: {
+                            colorBgContainer: "none"
                         }
                     }
                 }}

src/components/Logo/Logo.tsx

@@ -1,12 +1,18 @@
-import {Image, Typography} from "antd";
+import {Typography} from "antd";
 
-type LogoProps = { color: "black" | "white" } & React.HTMLAttributes<HTMLDivElement>
+type LogoProps = {
+    color: "black" | "white",
+    imgSize?: {
+        h?: number | string,
+        w?: number | string
+    }
+} & React.HTMLAttributes<HTMLDivElement>
 
-const Logo = ({color, ...others}: LogoProps) => {
+const Logo = ({color, imgSize, ...others}: LogoProps) => {
     return (
         <div {...others}>
-            <Image src="/logo-no-background.png" alt="design sparx logo" height={48} preview={false}/>
-            <Typography.Title level={4} type="secondary" style={{color, margin: 0}}>DesignSparx</Typography.Title>
+            <img src="/logo-no-background.png" alt="design sparx logo" height={imgSize?.h || 48}/>
+            <Typography.Title level={4} type="secondary" style={{color, margin: 0}}>Design Sparx</Typography.Title>
         </div>
     );
 };

src/components/dashboard/default/GetStartedCard/GetStartedCard.tsx

@@ -7,16 +7,23 @@ type Props = CardProps
 const GetStartedCard = ({...others}: Props) => {
     return (
         <Card {...others}>
-            <Space align="center">
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    gap: 8,
+                }}
+            >
                 <Space direction="vertical" size="large">
                     <Typography.Title level={4} style={{margin: 0}}>You have 2 projects to finish this
                         week</Typography.Title>
                     <Typography.Text>You have already completed 68% of your monthly target. Keep going to achieve your
                         goal.</Typography.Text>
                     <Button type="primary">More{' '}<RightOutlined/></Button>
                 </Space>
-                <Image src="/get-started.png" height={200} preview={false} style={{objectFit: 'cover'}}/>
-            </Space>
+                <Image src="/get-started.png" height={180} preview={false} style={{objectFit: 'cover'}}/>
+            </div>
         </Card>
     );
 };

src/components/dashboard/default/TasksListCard/TasksListCard.tsx

@@ -1,4 +1,4 @@
-import {Badge, Button, Card as AntdCard,CardProps, List, Space, Tag, Typography} from "antd";
+import {Badge, Button, Card as AntdCard, CardProps, List, Space, Tag, Typography} from "antd";
 import {Tasks} from "../../../../types";
 import {CalendarOutlined, FlagOutlined} from "@ant-design/icons";
 import {Card, UserAvatar} from "../../../index.ts";
@@ -31,15 +31,20 @@ const TasksListCard = ({data, ...others}: Props) => {
                     onChange: (page) => {
                         console.log(page);
                     },
-                    pageSize: 10,
+                    pageSize: 6,
                     align: "center"
                 }}
                 dataSource={data}
                 renderItem={(item) => (
                     <List.Item
                         key={item.name}
+                        style={{height: "100%"}}
                     >
-                        <AntdCard title={item.name} hoverable={true} bordered={true} style={{height: "100%"}}>
+                        <AntdCard
+                            hoverable={true}
+                            bordered={true}
+                            style={{height: "100%", background: "white"}}
+                        >
                             <Space direction="vertical">
                                 <Space style={{justifyContent: "space-between", width: "100%"}}>
                                     <Typography.Title
@@ -48,7 +53,7 @@ const TasksListCard = ({data, ...others}: Props) => {
                                     >
                                         {item.name.slice(0, 20)}...
                                     </Typography.Title>
-                                    <Tag bordered={false} style={{textTransform: "capitalize"}}>{item.category}</Tag>
+                                    <Tag style={{textTransform: "capitalize"}}>{item.category}</Tag>
                                 </Space>
                                 <Typography.Paragraph
                                     ellipsis={{rows: 2}}

src/constants/routes.ts

@@ -2,10 +2,10 @@ function path(root: string, sublink: string) {
     return `${root}${sublink}`
 }
 
-const ROOTS_LANDING = '/landing'
+const ROOTS_LANDING = '/home'
 const ROOTS_DASHBOARD = '/dashboards'
 const ROOTS_LAYOUT = '/layouts'
-const ROOTS_CORPORATE= '/corporate'
+const ROOTS_CORPORATE = '/corporate'
 const ROOTS_PROFILE = '/profile'
 const ROOTS_SOCIAL = '/social'
 const ROOTS_BLOG = '/blog'
@@ -23,7 +23,11 @@ const ROOTS_CALENDAR = '/calendar'
 const ROOTS_ERRORS = '/errors'
 
 export const PATH_LANDING = {
-    root: ROOTS_LANDING
+    root: ROOTS_LANDING,
+    why: "/why-us",
+    pricing: "/pricing",
+    about: "/about",
+    contact: "/contact",
 }
 
 export const PATH_DASHBOARD = {

src/layouts/app/App.tsx

@@ -8,6 +8,7 @@ import SideNav from "./SideNav.tsx";
 import HeaderNav from "./HeaderNav.tsx";
 import FooterNav from "./FooterNav.tsx";
 import {Nprogress} from "../../components";
+import {goToTop} from "../../utils";
 
 const {Content} = Layout
 
@@ -23,13 +24,6 @@ const AppLayout = () => {
     const location = useLocation()
     const nodeRef = useRef(null)
 
-    const goToTop = () => {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-        });
-    };
-
     useEffect(() => {
         setCollapsed(isMobile)
     }, [isMobile]);
@@ -56,8 +50,9 @@ const AppLayout = () => {
             <Layout
                 style={{
                     minHeight: '100vh',
-                    backgroundColor: '#d3d7e7',
-                    backgroundImage: 'radial-gradient(at 47% 33%, hsl(237.50, 23%, 80%) 0, transparent 59%), radial-gradient(at 82% 65%, hsl(349.81, 35%, 70%) 0, transparent 55%)',
+                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
+                    backgroundImage: 'radial-gradient(at 47% 33%, hsl(204.07, 70%, 53%) 0, transparent 59%),\n' +
+                        'radial-gradient(at 82% 65%, hsl(197.95, 0%, 100%) 0, transparent 55%);',
                 }}
             >
                 <SideNav
@@ -84,8 +79,8 @@ const AppLayout = () => {
                     <HeaderNav
                         style={{
                             marginLeft: collapsed ? 0 : '200px',
-                            padding: '0 1rem 0 0',
-                            background: navFill ? "rgb(211, 215, 231)" : "none",
+                            padding: '0 2rem 0 0',
+                            background: navFill ? "rgb(193, 224, 244)" : "none",
                             backdropFilter: navFill ? "blur(8px)" : "none",
                             display: 'flex',
                             alignItems: 'center',
@@ -121,17 +116,17 @@ const AppLayout = () => {
                         </Space>
                         <Space align="center">
                             <Tooltip title="Apps">
-                                <Button icon={<AppstoreOutlined/>}/>
+                                <Button icon={<AppstoreOutlined/>} type="text"/>
                             </Tooltip>
                             <Tooltip title="Messages">
-                                <Button icon={<MessageOutlined/>}/>
+                                <Button icon={<MessageOutlined/>} type="text"/>
                             </Tooltip>
                         </Space>
                     </HeaderNav>
                     <Content
                         style={{
                             margin: `0 24px 0 ${collapsed ? '24px' : '224px'}`,
-                            background: "rgba(161, 167, 203, .5)",
+                            background: "rgba(52, 152, 219, 0.35)",
                             borderRadius,
                             transition: "all .25s",
                             padding: '24px 32px',