From 001e0a19e3cf489d36e458a6b18acb0e86ede116 Mon Sep 17 00:00:00 2001
From: Kevin Vandy <kevinvandy656@gmail.com>
Date: Mon, 25 Sep 2023 23:15:37 -0500
Subject: [PATCH] update home page

---
 .../components/mdx/AnchorLink.tsx             |  16 ++
 .../components/mdx/HomeCards.tsx              | 255 ++++++++++++++----
 .../material-react-table-docs/pages/index.tsx |  18 +-
 3 files changed, 224 insertions(+), 65 deletions(-)
 create mode 100644 apps/material-react-table-docs/components/mdx/AnchorLink.tsx

diff --git a/apps/material-react-table-docs/components/mdx/AnchorLink.tsx b/apps/material-react-table-docs/components/mdx/AnchorLink.tsx
new file mode 100644
index 000000000..4bf457fc3
--- /dev/null
+++ b/apps/material-react-table-docs/components/mdx/AnchorLink.tsx
@@ -0,0 +1,16 @@
+import { Link as MuiLink } from '@mui/material';
+import Link from 'next/link';
+
+export const AnchorLink = (props) => {
+  return (
+    <Link href={props.href} passHref legacyBehavior>
+      <MuiLink
+        target={props.href.startsWith('http') ? '_blank' : undefined}
+        rel="noopener"
+        {...props}
+      >
+        {props.children}
+      </MuiLink>
+    </Link>
+  );
+};
diff --git a/apps/material-react-table-docs/components/mdx/HomeCards.tsx b/apps/material-react-table-docs/components/mdx/HomeCards.tsx
index 00320afb5..9235f97a2 100644
--- a/apps/material-react-table-docs/components/mdx/HomeCards.tsx
+++ b/apps/material-react-table-docs/components/mdx/HomeCards.tsx
@@ -1,60 +1,213 @@
-import { alpha, Card, Stack, Typography } from '@mui/material';
+import { Box, Card, Stack, Typography } from '@mui/material';
 import Image from 'next/image';
-
-const cardData = [
-  {
-    text: 'High-quality and performant modern data grid features with a minimal amount of effort',
-    image: '/quality.svg',
-    alt: 'Quality',
-  },
-  {
-    text: 'Great defaults, with customization treated as a top priority',
-    image: '/customizable.svg',
-    alt: 'Customizable',
-  },
-  {
-    text: 'Easy to opt out of features or UI that you do not need',
-    image: '/opt-out.svg',
-    alt: 'Easy Opt-out',
-  },
-  {
-    text: 'Efficient bundle size (47kb minzipped, including dependencies)',
-    image: '/efficient.svg',
-    alt: 'Efficient',
-  },
-];
+import { AnchorLink } from './AnchorLink';
 
 export const HomeCards = () => {
   return (
-    <Stack sx={{ mt: '1rem', gap: '1rem' }}>
-      {cardData.map((cd, index) => (
-        <Card
-          key={index}
-          sx={(theme) => ({
-            alignItems: 'center',
-            backgroundColor: alpha(theme.palette.primary.main, 0.1),
-            display: 'flex',
-            gap: '1.5rem',
-            p: '1rem',
-          })}
-          variant="outlined"
+    <Box
+      sx={{
+        marginTop: '3rem',
+        gap: '1rem',
+        display: 'grid',
+        gridTemplateColumns: '2fr 1fr',
+        h3: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          marginBottom: '1rem',
+          gap: '0.75rem',
+        },
+        '@media (max-width: 1024px)': {
+          gridTemplateColumns: '1fr',
+        },
+      }}
+    >
+      <Stack sx={{ display: 'grid', gap: '1rem' }}>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '1rem',
+            '@media (max-width: 768px)': {
+              gridTemplateColumns: '1fr',
+            },
+          }}
+        >
+          <Card sx={{ p: '1rem' }}>
+            <Typography variant="h3">The Best of Both Worlds</Typography>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                margin: '1rem auto',
+              }}
+            >
+              <Image
+                alt="Mui + React Table"
+                src={`/banner.png`}
+                height={60}
+                width={256}
+              />
+            </Box>
+            <Typography>
+              Combine TanStack Table&apos;s Extensive API With Material UI&apos;s
+              Awesome Pre-Built Components!
+            </Typography>
+          </Card>
+          <Card sx={{ p: '1rem' }}>
+            <Typography variant="h3">
+              <Image
+                alt="Efficiency Icon"
+                height={24}
+                width={24}
+                src={'/efficient.svg'}
+              />{' '}
+              Efficient Bundle Size
+            </Typography>
+            <Typography>33-47 KB depending on components imported.</Typography>
+            <Typography>
+              Import the recommended <code>MaterialReactTable</code> component,
+              or optionally import lighter weight MRT sub-components that only
+              include the UI you need.
+            </Typography>
+          </Card>
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '1rem',
+            '@media (max-width: 768px)': {
+              gridTemplateColumns: '1fr',
+            },
+          }}
         >
-          <Image src={cd.image} alt={cd.text} height={50} width={50} />
-          <Typography
-            sx={{
-              fontSize: {
-                xs: '0.875rem',
-                sm: '1rem',
-                md: '1.1rem',
-                lg: '1.2rem',
-              },
-              fontWeight: 'bold',
-            }}
-          >
-            {cd.text}
+          <Card sx={{ p: '1rem' }}>
+            <Typography variant="h3">
+              <Image
+                alt="Quality Icon"
+                height={24}
+                width={24}
+                src={'/customizable.svg'}
+              />{' '}
+              Pre-Built or 100% Custom
+            </Typography>
+            <Typography>
+              Use the pre-built single component data grid with the{' '}
+              <code>&lt;MaterialReactTable /&gt;</code> component.
+            </Typography>
+            <Typography>
+              Or build your own markup from scratch using the{' '}
+              <code>useMaterialReactTable</code> hook.
+            </Typography>
+            <Typography>
+              All internal MRT components are exported for you to use as
+              &quot;lego blocks&quot; to build your own custom tables.
+            </Typography>
+          </Card>
+          <Card sx={{ p: '1rem' }}>
+            <Typography variant="h3">
+              <Image
+                alt="Customizable Icon"
+                height={24}
+                width={24}
+                src={`/source-code.svg`}
+              />{' '}
+              Easy Customization
+            </Typography>
+            <Typography>
+              Just about everything is customizable or overridable in Material
+              React Table. Pass in custom props or styles to all internal
+              components. Use simple <code>enable*</code> props to easily enable
+              or disable features.
+            </Typography>
+          </Card>
+        </Box>
+      </Stack>
+      <Stack sx={{ display: 'grid', gap: '1rem' }}>
+        <Card sx={{ p: '1rem' }}>
+          <Typography variant="h3">
+            <Image
+              alt="Quality Icon"
+              height={24}
+              width={24}
+              src={`/quality.svg`}
+            />{' '}
+            Powerful Features
+          </Typography>
+          <Typography>
+            Material React Table has most of the features you would expect from a
+            modern table library including{' '}
+            <AnchorLink href="/docs/guides/pagination">Pagination</AnchorLink>,{' '}
+            <AnchorLink href="/docs/guides/sorting">Sorting</AnchorLink>,{' '}
+            <AnchorLink href="/docs/guides/column-filtering">
+              Filtering
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/row-selection">
+              Row Selection
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/expanding-sub-rows">
+              Row Expansion
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/column-resizing">
+              Column Resizing
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/column-ordering-dnd">
+              Column Reordering
+            </AnchorLink>
+            , etc.
+          </Typography>
+          <Typography>
+            However, Material React Table also has advanced features that you may
+            not find in other table libraries such as{' '}
+            <AnchorLink href="/docs/guides/virtualization">
+              Virtualization
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/aggregation-and-grouping">
+              Aggregation and Grouping
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/examples/advanced">
+              Advanced Filter UIs
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/global-filtering">
+              Fuzzy Search
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/editing">
+              Full Editing (CRUD)
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/column-pinning">
+              Column Pinning
+            </AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/row-numbers">Row Numbers</AnchorLink>
+            ,{' '}
+            <AnchorLink href="/docs/guides/click-to-copy">
+              Click to Copy
+            </AnchorLink>
+            , and more.
+          </Typography>
+        </Card>
+        <Card sx={{ p: '1rem' }}>
+          <Typography variant="h3">30+ i18n Locales</Typography>
+          <Typography>
+            The MRT Community has contributed{' '}
+            <AnchorLink href="/docs/guides/localization">
+              over&nbsp;30&nbsp;Locales
+            </AnchorLink>{' '}
+            for everyone to import and use.
           </Typography>
         </Card>
-      ))}
-    </Stack>
+      </Stack>
+    </Box>
   );
 };
diff --git a/apps/material-react-table-docs/pages/index.tsx b/apps/material-react-table-docs/pages/index.tsx
index d2fa051b1..1e6a0319b 100644
--- a/apps/material-react-table-docs/pages/index.tsx
+++ b/apps/material-react-table-docs/pages/index.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import Image from 'next/image';
 import {
   alpha,
   Box,
@@ -23,7 +22,7 @@ import { InstallCommand } from '../components/mdx/InstallCommand';
 const HomePage = () => {
   return (
     <>
-      <Stack sx={{ maxWidth: '100ch', m: 'auto' }}>
+      <Stack sx={{ maxWidth: '1200px', m: 'auto' }}>
         <Typography
           sx={{
             textAlign: 'center',
@@ -69,7 +68,7 @@ const HomePage = () => {
                 },
               }}
             >
-              V1
+              V2
             </Box>
           </Box>
         </Typography>
@@ -97,7 +96,7 @@ const HomePage = () => {
                 },
               })}
             >
-              V2.0 Coming Soon (July 2023)
+              V2.0 Still in Alpha, but now installable!
             </MuiLink>
           </Link>
           👀
@@ -147,19 +146,10 @@ const HomePage = () => {
             </MuiLink>
           </Link>
         </Typography>
-        <Box sx={{ display: 'flex', justifyContent: 'center', m: '2rem auto' }}>
-          <Image
-            alt="Mui + React Table"
-            src={`/banner.png`}
-            height={72}
-            width={304}
-          />
-        </Box>
         <StatBadges />
         <Box
           sx={{
-            m: '3rem auto',
-            mb: '1rem',
+            m: '1rem auto',
             display: 'grid',
             gap: '1.5rem',
             width: '100%',