Fix: Make code the hero

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() {
@@ -41,26 +42,12 @@ 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>
- <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'}
+ to={ROUTES.toolpadQuickstart}
  />
  <Box
  sx={{

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>
  );
 }

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',
  },
 };