feat: updated landing page

.changeset/cold-hornets-decide.md

@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': patch
+---
+
+feat: updated hero section and header nav content and styles

.changeset/lemon-queens-juggle.md

@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': patch
+---
+
+refactored all breadcrumb menu in apps pages

.changeset/metal-penguins-fail.md

@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': patch
+---
+
+feat: updated landing page design

.changeset/tasty-hats-study.md

@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': minor
+---
+
+updated navigation groups verbiage, updated navigation styles

.github/workflows/chromatic.yml

@@ -1,12 +1,12 @@
 # Workflow name
-name: "Chromatic Deployment"
+name: 'Chromatic Deployment'
 
 # Event for the workflow
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 # List of jobs
 jobs:

.gitignore

@@ -59,4 +59,6 @@ storybook-static/
 # and uncomment the following lines
 # .pnp.*
 
+yarn.lock
+
 # End of https://www.toptal.com/developers/gitignore/api/yarn

README.md

@@ -48,7 +48,7 @@ and [Storybook](https://storybook.js.org/).
 
 The previous release of the dashboard template, supports Next 13 with Pages router and Mantine 6. To view the live demo
 use this link - [preview](https://652579e5b7998a00083d022b--mantine-analytics-dashboard.netlify.app/), and to checkout
-fork the project use this link - [version 1](https://github.com/design-sparx/mantine-analytics-dashboard/tree/v1)
+fork the repo use this link - [version 1](https://github.com/design-sparx/mantine-analytics-dashboard/tree/v1)
 
 # Features
 

app/calendar/page.tsx → app/apps/calendar/page.tsx

@@ -15,6 +15,7 @@ import './page.css';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Calendar', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>

app/pages/chat/page.tsx → app/apps/chat/page.tsx

@@ -43,7 +43,7 @@ import classes from './page.module.css';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
-  { title: 'Pages', href: '#' },
+  { title: 'Apps', href: '#' },
   { title: 'Chat', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>
@@ -92,7 +92,7 @@ function Chat() {
       </>
       <Container fluid>
         <Stack>
-          <PageHeader title="Settings" breadcrumbItems={items} />
+          <PageHeader title="Chat" breadcrumbItems={items} />
           <Surface
             component={Paper}
             {...PAPER_PROPS}

app/invoices/details/page.tsx → app/apps/invoices/details/page.tsx

@@ -7,6 +7,7 @@ import { Metadata } from 'next';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Invoices', href: PATH_INVOICES.invoices.all },
   { title: 'Details', href: '#' },
 ].map((item, index) => (

app/invoices/list/page.tsx → app/apps/invoices/list/page.tsx

@@ -19,6 +19,7 @@ import { useFetchData } from '@/hooks';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Invoices', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>

app/orders/page.tsx → app/apps/orders/page.tsx

@@ -17,6 +17,7 @@ import { useFetchData } from '@/hooks';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Orders', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>

app/pages/profile/page.tsx → app/apps/profile/page.tsx

@@ -43,7 +43,7 @@ import { useFetchData } from '@/hooks';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
-  { title: 'Pages', href: '#' },
+  { title: 'Apps', href: '#' },
   { title: 'Profile', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>

app/projects/page.tsx → app/apps/projects/page.tsx

@@ -14,6 +14,7 @@ import { useFetchData } from '@/hooks';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Projects', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>

app/apps/settings/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Anchor,
+  Box,
+  Button,
+  Container,
+  FileButton,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  PaperProps,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { PATH_DASHBOARD } from '@/routes';
+import { useForm } from '@mantine/form';
+import { IconCloudUpload, IconDeviceFloppy } from '@tabler/icons-react';
+import { PageHeader, Surface, TextEditor } from '@/components';
+
+const items = [
+  { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
+  { title: 'Settings', href: '#' },
+].map((item, index) => (
+  <Anchor href={item.href} key={index}>
+    {item.title}
+  </Anchor>
+));
+
+const ICON_SIZE = 16;
+
+const PAPER_PROPS: PaperProps = {
+  p: 'md',
+  shadow: 'md',
+  radius: 'md',
+  style: { height: '100%' },
+};
+
+const BIO =
+  'A dynamic software engineering graduate from Nairobi, Kenya with 5+ years of experience. Passionate about turning creative sparks into seamless applications through technological experimentation. Experienced in crafting intuitive solutions and translating innovative concepts into user-friendly applications. Thrives on transforming the way we experience technology, one line of code at a time.\n' +
+  '\n' +
+  'Enthusiastic pioneer, constantly seeking the next big thing in tech. Eager to apply my passion and skills at Alternate Limited to bring ideas to life.';
+
+function Settings() {
+  const [file, setFile] = useState<File | null>(null);
+
+  const accountForm = useForm({
+    initialValues: {
+      username: 'kelvinkiprop',
+      biograghy:
+        'A dynamic software engineering graduate from Nairobi, Kenya with 5+ years of experience. Passionate about turning creative sparks into seamless applications through technological experimentation. Experienced in crafting intuitive solutions and translating innovative concepts into user-friendly applications. Thrives on transforming the way we experience technology, one line of code at a time.\n' +
+        '\n' +
+        'Enthusiastic pioneer, constantly seeking the next big thing in tech. Eager to apply my passion and skills at Alternate Limited to bring ideas to life.',
+    },
+  });
+
+  const accountInfoForm = useForm({
+    initialValues: {
+      firstname: 'kelvin',
+      lastname: 'kiprop',
+      email: 'kelvin.kiprop96@gmail.com',
+      address: '',
+      apartment: '',
+      city: '',
+      state: '',
+      zip: '',
+    },
+  });
+
+  return (
+    <>
+      <>
+        <title>Settings | DesignSparx</title>
+        <meta
+          name="description"
+          content="Explore our versatile dashboard website template featuring a stunning array of themes and meticulously crafted components. Elevate your web project with seamless integration, customizable themes, and a rich variety of components for a dynamic user experience. Effortlessly bring your data to life with our intuitive dashboard template, designed to streamline development and captivate users. Discover endless possibilities in design and functionality today!"
+        />
+      </>
+      <Container fluid>
+        <Stack gap="lg">
+          <PageHeader title="Settings" breadcrumbItems={items} />
+          <Grid>
+            <Grid.Col span={{ base: 12, md: 8 }}>
+              <Surface component={Paper} {...PAPER_PROPS}>
+                <Text size="lg" fw={600} mb="md">
+                  User information
+                </Text>
+                <Grid gutter={{ base: 5, xs: 'md', md: 'md', lg: 'lg' }}>
+                  <Grid.Col span={{ base: 12, md: 6, lg: 9, xl: 9 }}>
+                    <Stack>
+                      <TextInput
+                        label="User Name"
+                        placeholder="user name"
+                        {...accountForm.getInputProps('username')}
+                      />
+                      <TextEditor content={BIO} label="Biography" />
+                      <Button
+                        style={{ width: 'fit-content' }}
+                        leftSection={<IconDeviceFloppy size={ICON_SIZE} />}
+                      >
+                        Save Changes
+                      </Button>
+                    </Stack>
+                  </Grid.Col>
+                  <Grid.Col span={{ base: 12, md: 6, lg: 3, xl: 3 }}>
+                    <Stack align="center">
+                      <Image
+                        src="https://res.cloudinary.com/ddh7hfzso/image/upload/v1700303804/me/ovqjhhs79u3g2fwbl2dd.jpg"
+                        h={128}
+                        w={128}
+                        radius="50%"
+                      />
+                      <FileButton
+                        onChange={setFile}
+                        accept="image/png,image/jpeg"
+                      >
+                        {(props) => (
+                          <Button
+                            {...props}
+                            variant="subtle"
+                            leftSection={<IconCloudUpload size={ICON_SIZE} />}
+                          >
+                            Upload image
+                          </Button>
+                        )}
+                      </FileButton>
+                      <Text ta="center" size="xs" c="dimmed">
+                        For best results, use an image at least 128px by 128px
+                        in .jpg format
+                      </Text>
+                    </Stack>
+                  </Grid.Col>
+                </Grid>
+              </Surface>
+            </Grid.Col>
+            <Grid.Col span={{ base: 12, md: 4 }}>
+              <Surface component={Paper} {...PAPER_PROPS}>
+                <Stack>
+                  <Text size="lg" fw={600}>
+                    Account information
+                  </Text>
+                  <Group grow>
+                    <TextInput
+                      label="First name"
+                      placeholder="first name"
+                      {...accountInfoForm.getInputProps('firstname')}
+                    />
+                    <TextInput
+                      label="Last name"
+                      placeholder="last name"
+                      {...accountInfoForm.getInputProps('lastname')}
+                    />
+                  </Group>
+                  <TextInput
+                    label="Email"
+                    placeholder="email"
+                    {...accountInfoForm.getInputProps('email')}
+                  />
+                  <TextInput
+                    label="Address"
+                    placeholder="address"
+                    {...accountInfoForm.getInputProps('address')}
+                  />
+                  <TextInput
+                    label="Apartment/Studio/Floor"
+                    placeholder="apartment, studio, or floor"
+                    {...accountInfoForm.getInputProps('apartment')}
+                  />
+                  <Group grow>
+                    <TextInput
+                      label="City"
+                      placeholder="city"
+                      {...accountInfoForm.getInputProps('city')}
+                    />
+                    <TextInput
+                      label="State"
+                      placeholder="state"
+                      {...accountInfoForm.getInputProps('state')}
+                    />
+                    <TextInput
+                      label="Zip"
+                      placeholder="zip"
+                      {...accountInfoForm.getInputProps('zip')}
+                    />
+                  </Group>
+                  <Box style={{ width: 'auto' }}>
+                    <Button leftSection={<IconDeviceFloppy size={16} />}>
+                      Save changes
+                    </Button>
+                  </Box>
+                </Stack>
+              </Surface>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Container>
+    </>
+  );
+}
+
+export default Settings;

app/tasks/page.tsx → app/apps/tasks/page.tsx

@@ -4,6 +4,7 @@ import { PATH_DASHBOARD } from '@/routes';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
   { title: 'Tasks', href: '#' },
 ].map((item, index) => (
   <Anchor href={item.href} key={index}>