Docs website: Update homepage

Author: icflorescu

app/(home)/HomePageSubtitle.module.css

@@ -5,15 +5,15 @@
   height: auto;
 }
 
-.iconTrust {
+.iconGreen {
   color: var(--mantine-color-green-filled);
 }
 
-.iconCompat {
+.iconBlue {
   color: var(--mantine-color-blue-filled);
 }
 
-.iconOldVersion {
+.iconRed {
   color: var(--mantine-color-red-filled);
 }
 

app/(home)/HomePageSubtitle.tsx

@@ -1,10 +1,21 @@
 import { Group, Stack, Text } from '@mantine/core';
-import { IconArrowDown, IconDiscountCheck, IconExternalLink, IconInfoCircle } from '@tabler/icons-react';
+import {
+  IconArrowDown,
+  IconDiscountCheck,
+  IconExternalLink,
+  IconHeartFilled,
+  IconInfoCircle,
+  IconScale,
+} from '@tabler/icons-react';
 import clsx from 'clsx';
 import {
+  AUTHOR_LINK,
+  LICENSE_LINK,
   MANTINE_CONTEXTMENU_LINK,
   MANTINE_CONTEXTMENU_PRODUCT_NAME,
   MANTINE_LINK,
+  REPO_LINK,
+  SPONSORS_LINK,
   V6_WEBSITE_LINK,
 } from '~/app/config';
 import { ExternalLink } from '~/components/ExternalLink';
@@ -15,26 +26,39 @@ export function HomePageSubtitle() {
   return (
     <Stack gap={4}>
       <Group gap={8} align="flex-start" wrap="nowrap">
-        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconTrust)} />
+        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconGreen)} />
         <Text size="sm">
-          trusted by{' '}
+          used and trusted by{' '}
           <PackageUsersAnchor className="nowrap">
-            awesome companies and developers{' '}
-            <IconArrowDown className={clsx(classes.linkIcon, classes.scrollDownIcon)} />
+            major companies <IconArrowDown className={clsx(classes.linkIcon, classes.scrollDownIcon)} />
           </PackageUsersAnchor>
         </Text>
       </Group>
       <Group gap={8} align="flex-start" wrap="nowrap">
-        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconTrust)} />
+        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconGreen)} />
         <Text size="sm">
-          built by the creator of{' '}
+          built by <ExternalLink to={AUTHOR_LINK}>the creator</ExternalLink> of{' '}
           <ExternalLink className="nowrap" to={MANTINE_CONTEXTMENU_LINK}>
             {MANTINE_CONTEXTMENU_PRODUCT_NAME} <IconExternalLink className={classes.linkIcon} />
-          </ExternalLink>
+          </ExternalLink>{' '}
+          and these <ExternalLink to={`${REPO_LINK}/graphs/contributors`}>awesome people</ExternalLink>
+        </Text>
+      </Group>
+      <Group gap={8} align="flex-start" wrap="nowrap">
+        <IconScale className={clsx(classes.leftIcon, classes.iconGreen)} />
+        <Text size="sm">
+          open-source <ExternalLink to={REPO_LINK}>on GitHub</ExternalLink> with a{' '}
+          <ExternalLink to={LICENSE_LINK}>permissive license</ExternalLink>
+        </Text>
+      </Group>
+      <Group gap={8} align="flex-start" wrap="nowrap">
+        <IconHeartFilled className={clsx(classes.leftIcon, classes.iconRed)} />
+        <Text size="sm">
+          supported by <ExternalLink to={SPONSORS_LINK}>generous people like you</ExternalLink>
         </Text>
       </Group>
       <Group gap={8} align="flex-start" wrap="nowrap">
-        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconCompat)} />
+        <IconDiscountCheck className={clsx(classes.leftIcon, classes.iconBlue)} />
         <Text size="sm">
           compatible with{' '}
           <ExternalLink className="nowrap" to={MANTINE_LINK}>
@@ -43,7 +67,7 @@ export function HomePageSubtitle() {
         </Text>
       </Group>
       <Group gap={8} align="flex-start" wrap="nowrap">
-        <IconInfoCircle className={clsx(classes.leftIcon, classes.iconOldVersion)} />
+        <IconInfoCircle className={clsx(classes.leftIcon, classes.iconRed)} />
         <Text size="sm">
           old version compatible with <ExternalLink to="https://v6.mantine.dev">Mantine V6</ExternalLink>{' '}
           <span className="nowrap">

app/config.ts

@@ -14,7 +14,7 @@ import type { Route } from 'next';
 
 export const PRODUCT_NAME = 'Mantine DataTable';
 export const PRODUCT_DESCRIPTION =
-  'A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI';
+  'A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI, trusted by thousands of developers and companies around the world, from small startups to large enterprises like Microsoft';
 
 export const WEB_ROOT = 'https://icflorescu.github.io';
 export const WEBSITE_LINK = `${WEB_ROOT}/${process.env.PACKAGE_NAME}`;