[docs] Refresh the home page

docs/pages/index.js

@@ -5,9 +5,11 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
 import HomeSteps from 'docs/src/modules/components/HomeSteps';
+import HomeThemes from 'docs/src/modules/components/HomeThemes';
 import HomeQuickWord from 'docs/src/modules/components/HomeQuickWord';
-import HomeBackers from 'docs/src/modules/components/HomeBackers';
+import HomeSponsors from 'docs/src/modules/components/HomeSponsors';
 import HomeUsers from 'docs/src/modules/components/HomeUsers';
+import HomeQuotes from 'docs/src/modules/components/HomeQuotes';
 import HomePro from 'docs/src/modules/components/HomePro';
 import AppFooter from 'docs/src/modules/components/AppFooter';
 import AppFrame from 'docs/src/modules/components/AppFrame';
@@ -33,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     flex: '1 0 100%',
   },
   hero: {
-    paddingTop: 64,
+    paddingTop: theme.spacing(8),
     color: theme.palette.primary.main,
   },
   content: {
@@ -44,8 +46,8 @@ const useStyles = makeStyles(theme => ({
     paddingTop: theme.spacing(4),
     paddingBottom: theme.spacing(8),
     [theme.breakpoints.up('md')]: {
-      paddingTop: theme.spacing(22),
-      paddingBottom: theme.spacing(22),
+      paddingTop: theme.spacing(16),
+      paddingBottom: theme.spacing(16),
       flexDirection: 'row',
       alignItems: 'flex-start',
       textAlign: 'left',
@@ -159,7 +161,9 @@ export default function HomePage() {
           <HomePro />
           <HomeQuickWord />
           <HomeSteps />
-          <HomeBackers />
+          <HomeThemes />
+          <HomeSponsors />
+          <HomeQuotes />
           <HomeUsers />
         </main>
         <AppFooter />

docs/src/modules/components/AppFooter.js

@@ -11,6 +11,9 @@ import Divider from '@material-ui/core/Divider';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
+  root: {
+    marginTop: theme.spacing(6),
+  },
   footer: {
     padding: theme.spacing(3, 0),
     [theme.breakpoints.up('sm')]: {
@@ -52,7 +55,7 @@ function AppFooter(props) {
   const t = useSelector(state => state.options.t);
 
   return (
-    <React.Fragment>
+    <div className={classes.root}>
       <Divider />
       <Container maxWidth="md">
         <footer className={classes.footer}>
@@ -170,7 +173,7 @@ function AppFooter(props) {
           </Typography>
         </footer>
       </Container>
-    </React.Fragment>
+    </div>
   );
 }
 

docs/src/modules/components/HomeQuotes.js

@@ -0,0 +1,217 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from 'docs/src/modules/components/Link';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import TwitterIcon from '@material-ui/icons/Twitter';
+import NoSsr from '@material-ui/core/NoSsr';
+import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
+
+const quotes = [
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/1134188599170215936/9CUB-yeB_400x400.jpg',
+    name: 'Aumit Leon',
+    username: '@aumitleon',
+    tweet: 'https://twitter.com/aumitleon/status/1210396946566963200',
+    quote:
+      'Material-UI continues to blow my mind how easily I can put together really aesthetic and functional components and minimize overhead.',
+  },
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/1169043984561389568/pEdFvVIW_400x400.jpg',
+    name: 'Derek Shanks',
+    username: '@fragileglass',
+    tweet: 'https://twitter.com/fragileglass/status/1205256087290753025',
+    quote:
+      'It’s a game changer with how nicely it works with React. It’s made working with React so much more enjoyable. Everything is configurable and predictable. Bootstrap was killing me. It was hijacking my whole project.',
+  },
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/1220819548523331584/3T1G8g1q_400x400.jpg',
+    name: 'Mohamed EL AYADI',
+    username: '@MohamedELAYAD19',
+    tweet: 'https://twitter.com/MohamedELAYAD19/status/1208118580430229504',
+    quote:
+      "Such a great library. I have used Material-UI for the last two years as the main react ui library in my projects (in more than 4 companies!) and I find that it's really great! A lot of good work and dedication are put in there. Salute to the team!",
+  },
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/1144184864754851840/WIVBqpWM_400x400.jpg',
+    name: 'Matthias Margot',
+    username: '@matthiasmargot',
+    quote:
+      'The DX on Material-UI is absolutely insane and that package has shaped my approach to Component API Design / Composition Design & Style System Design. I think those guys got it idiomatically right, wonderful product.',
+  },
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/849731047625502720/nudIAz2B_400x400.jpg',
+    name: 'Rodrigo Ciprian',
+    username: '@rodrigocipriani',
+    tweet: 'https://twitter.com/rodrigocipriani/status/1215578130217340929',
+    quote:
+      'I always use Material-UI, it is really awesome, and it have a looot of very good and easy to use components.',
+  },
+  {
+    avatar: 'https://pbs.twimg.com/profile_images/1129370929409056769/Zkwjy9_I_400x400.jpg',
+    name: 'Samantha Durrant',
+    username: '@SamDurrant_',
+    tweet: '',
+    quote:
+      'Began coding out the front end of my app today. Used MaterialUI for the first time and love how easy it is to make things look nice. It’s also really cool to see all the hard work building out the backend of my app come to life in the front end!',
+  },
+];
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    minHeight: 160,
+    paddingTop: theme.spacing(5),
+    margin: theme.spacing(0, 2),
+  },
+  container: {
+    marginBottom: theme.spacing(4),
+  },
+  users: {
+    padding: theme.spacing(10, 0, 0),
+  },
+  grid: {
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(5),
+  },
+  img: {
+    margin: theme.spacing(1.5, 3),
+  },
+  button: {
+    margin: theme.spacing(2, 0, 0),
+  },
+}));
+
+const useQuoteStyles = makeStyles(theme => ({
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+  },
+  cardAction: {
+    height: '100%',
+  },
+  avatar: {
+    width: 48,
+    height: 48,
+  },
+  twitter: {
+    marginLeft: 'auto',
+    color: theme.palette.primary.light,
+  },
+  name: {
+    fontSize: 16,
+  },
+  quote: {
+    paddingBottom: '16px !important',
+    paddingTop: 0,
+  },
+}));
+
+const HomeQuoteLink = React.forwardRef((props, ref) => {
+  return (
+    <Link
+      data-ga-event-category="quote"
+      data-ga-event-action="click"
+      data-ga-event-label="home-link"
+      target="_blank"
+      rel="noopener nofollow"
+      naked
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+function HomeQuote(props) {
+  const { avatar, href, name, quote, userName } = props;
+  const classes = useQuoteStyles();
+
+  return (
+    <Card variant="outlined" className={classes.card}>
+      <CardActionArea component={HomeQuoteLink} href={href} className={classes.cardAction}>
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid item>
+              <Avatar src={avatar} alt={name} className={classes.avatar} />
+            </Grid>
+            <Grid item>
+              <Typography variant="h6" color="textPrimary" className={classes.name}>
+                {name}
+              </Typography>
+              <Typography variant="subtitle2" color="textSecondary">
+                {userName}
+              </Typography>
+            </Grid>
+            <Grid item className={classes.twitter}>
+              <TwitterIcon />
+            </Grid>
+          </Grid>
+        </CardContent>
+        <CardContent className={classes.quote}>
+          <Typography color="textPrimary" variant="body2">
+            {quote}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
+
+HomeQuote.propTypes = {
+  avatar: PropTypes.string,
+  href: PropTypes.string,
+  name: PropTypes.string,
+  quote: PropTypes.string,
+  userName: PropTypes.string,
+};
+
+const startIndex = Math.floor(Math.random() * quotes.length);
+const selectedQuotes = [];
+for (let i = 0; i < 3; i += 1) {
+  selectedQuotes.push(quotes[(startIndex + i) % quotes.length]);
+}
+
+function HomeQuotes() {
+  const classes = useStyles();
+  const t = useSelector(state => state.options.t);
+
+  return (
+    <div className={classes.root}>
+      <NoSsr>
+        <Container maxWidth="md" className={classes.container} disableGutters>
+          <Divider />
+          <div className={classes.users}>
+            <Typography variant="h4" component="h2" align="center" gutterBottom>
+              {t('praise')}
+            </Typography>
+            <Typography variant="body1" align="center" gutterBottom>
+              {t('praiseDescr')}
+            </Typography>
+            <Grid container spacing={2} className={classes.grid}>
+              {selectedQuotes.map(quote => (
+                <Grid item xs={12} md={4} key={quote.username}>
+                  <HomeQuote
+                    avatar={quote.avatar}
+                    href={quote.tweet}
+                    name={quote.name}
+                    userName={quote.username}
+                    quote={quote.quote}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </div>
+        </Container>
+      </NoSsr>
+    </div>
+  );
+}
+
+export default HomeQuotes;

docs/src/modules/components/HomeBackers.js → docs/src/modules/components/HomeSponsors.js

@@ -5,37 +5,47 @@ import { withStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
 import mapTranslations from 'docs/src/modules/utils/mapTranslations';
 
 const req = require.context('docs/src/modules/components', false, /\.md$/);
 const backers = mapTranslations(req, 'md');
 
 const styles = theme => ({
+  '@global': {
+    '.anchor-link-style': {
+      position: 'absolute',
+      top: -9999,
+      left: -9999,
+    },
+  },
   root: {
     minHeight: 600,
+    textAlign: 'center',
   },
   markdownElement: {
     padding: theme.spacing(4, 0),
   },
 });
 
-function HomeBackers(props) {
+function HomeSponsors(props) {
   const { classes } = props;
   const userLanguage = useSelector(state => state.options.userLanguage);
 
   return (
     <div className={classes.root}>
       <NoSsr>
         <Container maxWidth="md">
+          <Divider />
           <MarkdownElement className={classes.markdownElement} text={backers[userLanguage]} />
         </Container>
       </NoSsr>
     </div>
   );
 }
 
-HomeBackers.propTypes = {
+HomeSponsors.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(HomeBackers);
+export default withStyles(styles)(HomeSponsors);