From e8fb68877fa869d60ce5cffeb78c2774b8d48ede Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Wed, 10 May 2023 16:23:13 +0530
Subject: [PATCH 1/4] Fix: Make code the hero

---
 .../components/landing/GetStartedButtons.js   | 79 +++++++++++++++++++
 docs/src/components/landing/Hero.js           | 25 ++----
 docs/src/components/landing/Marquee.js        | 33 ++++----
 docs/src/content/marquee.js                   |  2 +-
 4 files changed, 104 insertions(+), 35 deletions(-)
 create mode 100644 docs/src/components/landing/GetStartedButtons.js

diff --git a/docs/src/components/landing/GetStartedButtons.js b/docs/src/components/landing/GetStartedButtons.js
new file mode 100644
index 00000000000..88134bd41d6
--- /dev/null
+++ b/docs/src/components/landing/GetStartedButtons.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import copy from 'clipboard-copy';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
+import ROUTES from 'docs/src/route';
+import Link from 'docs/src/modules/components/Link';
+
+export default function GetStartedButtons(props) {
+  const [copied, setCopied] = React.useState(false);
+  const {
+    installation = 'npx create-toolpad-app my-toolpad-app',
+    to = ROUTES.documentation,
+    ...other
+  } = props;
+  const handleCopy = () => {
+    setCopied(true);
+    copy(installation).then(() => {
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  return (
+    <Box
+      {...other}
+      sx={{
+        display: 'flex',
+        flexWrap: { xs: 'wrap', md: 'nowrap' },
+        '&& > *': {
+          minWidth: { xs: '100%', md: '0%' },
+        },
+        ...other.sx,
+      }}
+    >
+      <Button
+        href={to}
+        component={Link}
+        noLinkStyle
+        size="large"
+        variant="contained"
+        endIcon={<KeyboardArrowRightRounded />}
+        sx={{
+          flexShrink: 0,
+          mr: { xs: 0, md: 2 },
+          mb: { xs: 2, md: 0 },
+        }}
+      >
+        Get started
+      </Button>
+      <Button
+        size="large"
+        // @ts-expect-error
+        variant="code"
+        endIcon={copied ? <CheckRounded color="primary" /> : <ContentCopyRounded />}
+        onClick={handleCopy}
+        sx={{
+          maxWidth: '324px',
+          display: 'inline-block',
+          justifyContent: 'start',
+          overflowX: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          position: 'relative',
+          pr: 5,
+        }}
+      >
+        {installation}
+      </Button>
+    </Box>
+  );
+}
+
+// Write propTypes for the component
+GetStartedButtons.propTypes = {
+  installation: PropTypes.string,
+  to: PropTypes.string,
+};
diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index eb018519395..3f58d68e3ab 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -6,7 +6,8 @@ import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
 import IconImage from 'docs/src/components/icon/IconImage';
 import GradientText from 'docs/src/components/typography/GradientText';
 import DataObjectRoundedIcon from '@mui/icons-material/DataObjectRounded';
-import SignUp from './SignUp';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
+import ROUTES from '../../route';
 import ToolpadHeroContainer from '../../layouts/ToolpadHeroContainer';
 
 export default function Hero() {
@@ -43,24 +44,10 @@ export default function Hero() {
           Build scalable and secure internal tools locally. Use your own IDE, drag and drop
           pre-built components or create yours.
         </Typography>
-        <Typography
-          component="label"
-          variant="body2"
-          color={(theme) => (theme.palette.mode === 'dark' ? '#fff' : `text.secondary`)}
-          sx={{ fontWeight: 'medium', display: 'block', mb: 1, mx: 'auto' }}
-          htmlFor="email-landing"
-        >
-          Sign up for early access to the beta release.
-        </Typography>
-        <SignUp
-          sx={{
-            '& > div': {
-              display: 'flex',
-              flexDirection: { xs: 'column', sm: 'row' },
-              justifyContent: 'center',
-              maxWidth: 'initial',
-            },
-          }}
+        <GetStartedButtons
+          sx={{ justifyContent: 'center' }}
+          installation={'npx create-toolpad-app my-toolpad-app'}
+          to={ROUTES.toolpadQuickstart}
         />
         <Box
           sx={{
diff --git a/docs/src/components/landing/Marquee.js b/docs/src/components/landing/Marquee.js
index 7ef706a639a..7adc7aa0b4c 100644
--- a/docs/src/components/landing/Marquee.js
+++ b/docs/src/components/landing/Marquee.js
@@ -1,10 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-import Link from 'docs/src/modules/components/Link';
 import Typography from '@mui/material/Typography';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import SignUp from './SignUp';
 
 function Marquee({ content }) {
   return (
@@ -44,20 +42,25 @@ function Marquee({ content }) {
       >
         {content.subtitle}
       </Typography>
-      <Button
-        component={Link}
-        href={content.action.href}
-        data-ga-event-category="ToolpadLanding"
-        data-ga-event-label={content.action.label}
-        data-ga-event-action="SelfHost"
-        noLinkStyle
-        size="large"
-        variant="contained"
-        endIcon={<KeyboardArrowRightRounded />}
-        sx={{ width: { xs: '100%', sm: 'auto' } }}
+      <Typography
+        component="label"
+        variant="body2"
+        color={(theme) => (theme.palette.mode === 'dark' ? '#fff' : `text.secondary`)}
+        sx={{ fontWeight: 'medium', display: 'block', mb: 1, mx: 'auto' }}
+        htmlFor="email-landing"
       >
         {content.action.label}
-      </Button>
+      </Typography>
+      <SignUp
+        sx={{
+          '& > div': {
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            justifyContent: 'center',
+            maxWidth: 'initial',
+          },
+        }}
+      />
     </Container>
   );
 }
diff --git a/docs/src/content/marquee.js b/docs/src/content/marquee.js
index 8c45cce4dc7..8e1e1485910 100644
--- a/docs/src/content/marquee.js
+++ b/docs/src/content/marquee.js
@@ -5,7 +5,7 @@ const marquee = {
   subtitle: 'Using a simple command, build your first app in a few minutes.',
   action: {
     href: ROUTES.toolpadQuickstart,
-    label: 'Get Started',
+    label: 'Sign up for early access to the beta release',
   },
 };
 

From 729124623f80712ceda4a0b7ef51102422ef73f8 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Wed, 10 May 2023 16:25:48 +0530
Subject: [PATCH 2/4] Fix: Don't need this

---
 .../components/landing/GetStartedButtons.js   | 79 -------------------
 1 file changed, 79 deletions(-)
 delete mode 100644 docs/src/components/landing/GetStartedButtons.js

diff --git a/docs/src/components/landing/GetStartedButtons.js b/docs/src/components/landing/GetStartedButtons.js
deleted file mode 100644
index 88134bd41d6..00000000000
--- a/docs/src/components/landing/GetStartedButtons.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import copy from 'clipboard-copy';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
-import CheckRounded from '@mui/icons-material/CheckRounded';
-import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
-
-export default function GetStartedButtons(props) {
-  const [copied, setCopied] = React.useState(false);
-  const {
-    installation = 'npx create-toolpad-app my-toolpad-app',
-    to = ROUTES.documentation,
-    ...other
-  } = props;
-  const handleCopy = () => {
-    setCopied(true);
-    copy(installation).then(() => {
-      setTimeout(() => setCopied(false), 2000);
-    });
-  };
-  return (
-    <Box
-      {...other}
-      sx={{
-        display: 'flex',
-        flexWrap: { xs: 'wrap', md: 'nowrap' },
-        '&& > *': {
-          minWidth: { xs: '100%', md: '0%' },
-        },
-        ...other.sx,
-      }}
-    >
-      <Button
-        href={to}
-        component={Link}
-        noLinkStyle
-        size="large"
-        variant="contained"
-        endIcon={<KeyboardArrowRightRounded />}
-        sx={{
-          flexShrink: 0,
-          mr: { xs: 0, md: 2 },
-          mb: { xs: 2, md: 0 },
-        }}
-      >
-        Get started
-      </Button>
-      <Button
-        size="large"
-        // @ts-expect-error
-        variant="code"
-        endIcon={copied ? <CheckRounded color="primary" /> : <ContentCopyRounded />}
-        onClick={handleCopy}
-        sx={{
-          maxWidth: '324px',
-          display: 'inline-block',
-          justifyContent: 'start',
-          overflowX: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          position: 'relative',
-          pr: 5,
-        }}
-      >
-        {installation}
-      </Button>
-    </Box>
-  );
-}
-
-// Write propTypes for the component
-GetStartedButtons.propTypes = {
-  installation: PropTypes.string,
-  to: PropTypes.string,
-};

From 859120e817497173d31a03a7e4693a561a81534d Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Wed, 10 May 2023 17:26:32 +0530
Subject: [PATCH 3/4] Update docs/src/components/landing/Hero.js

Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Signed-off-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
---
 docs/src/components/landing/Hero.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index 3f58d68e3ab..8122cc232d6 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -42,7 +42,7 @@ export default function Hero() {
         </Typography>
         <Typography color="text.secondary" sx={{ maxWidth: 520, mx: 'auto', mb: 4 }}>
           Build scalable and secure internal tools locally. Use your own IDE, drag and drop
-          pre-built components or create yours.
+          pre-built components or create your own.
         </Typography>
         <GetStartedButtons
           sx={{ justifyContent: 'center' }}

From 76f195c948c58dc2457012622d3021c4d3ff4d09 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Wed, 10 May 2023 05:51:49 -0700
Subject: [PATCH 4/4] Update docs/src/components/landing/Hero.js

Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Signed-off-by: Bharat Kashyap <bharatkashyap@outlook.com>
---
 docs/src/components/landing/Hero.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index 8122cc232d6..524f07b90cc 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -46,7 +46,7 @@ export default function Hero() {
         </Typography>
         <GetStartedButtons
           sx={{ justifyContent: 'center' }}
-          installation={'npx create-toolpad-app my-toolpad-app'}
+          installation={'npx create-toolpad-app'}
           to={ROUTES.toolpadQuickstart}
         />
         <Box