feat: updated hero section and header nav content and styles

Author: kelvink96

.changeset/cold-hornets-decide.md

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

app/page.tsx

@@ -28,12 +28,13 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import Link from 'next/link';
-import { PATH_APPS, PATH_DASHBOARD, PATH_DOCS } from '@/routes';
+import { PATH_APPS, PATH_DASHBOARD, PATH_DOCS, PATH_GITHUB } from '@/routes';
 import {
   IconAdjustmentsHorizontal,
   IconApps,
   IconArrowRight,
   IconBook,
+  IconBrandGithub,
   IconBrandMantine,
   IconBrandTabler,
   IconColorSwatch,
@@ -46,6 +47,7 @@ import {
   IconLayoutBoard,
   IconLayoutGrid,
   IconPaint,
+  IconPlayerPlay,
   IconScaleOutline,
   IconSettingsCog,
 } from '@tabler/icons-react';
@@ -297,19 +299,19 @@ export default function Home() {
                     component={Link}
                     href={PATH_DASHBOARD.default}
                     size="md"
-                    rightSection={<IconArrowRight />}
+                    leftSection={<IconPlayerPlay size={18} />}
                   >
                     Live Preview
                   </Button>
                   <Button
                     size="md"
                     component="a"
-                    href={PATH_DOCS.root}
+                    href={PATH_GITHUB.repo}
                     target="_blank"
-                    variant="outline"
-                    color="white"
+                    variant="white"
+                    leftSection={<IconBrandGithub size={18} />}
                   >
-                    Read Documentation
+                    Give us a star
                   </Button>
                 </Group>
                 <Stack>

layout/Guest/HeaderNav/HeaderNav.tsx

@@ -67,10 +67,12 @@ const HeaderNav = () => {
               component="a"
               target="_blank"
               href={PATH_GITHUB.repo}
-              variant="default"
+              variant="transparent"
+              c="white"
               leftSection={<IconBrandGithub size={16} />}
+              className={classes.link}
             >
-              Star this project
+              Give us a star
             </Button>
             <Button
               component={Link}
@@ -102,14 +104,17 @@ const HeaderNav = () => {
       >
         <ScrollArea h={`calc(100vh - ${rem(60)})`} mx="-md">
           {items}
-          <iframe
-            src="https://ghbtns.com/github-btn.html?user=design-sparx&repo=mantine-analytics-dashboard&type=star&count=true&size=large"
-            frameBorder="0"
-            scrolling="0"
-            width="140"
-            height="30"
-            title="GitHub"
-          />
+          <Button
+            component="a"
+            target="_blank"
+            href={PATH_GITHUB.repo}
+            variant="transparent"
+            c="white"
+            leftSection={<IconBrandGithub size={16} />}
+            className={classes.link}
+          >
+            Give us a star
+          </Button>
           <Button component={Link} href={PATH_DASHBOARD.default}>
             Live Previews
           </Button>