[Landing] Modified.

Author: DanilAndreev

src/pages/MaterialDocsLanding/exampleCode.md

@@ -0,0 +1,18 @@
+<DocsLayout
+    name={"My documentation"}
+    version={"1.0.0-alpha"}
+    logo={"http://material-docs.com/static/media/logo.5a237c82.svg"}
+    keywords={["my", "test", "documentation"]}
+    description={"This is an example documentation for Material Docs framework."}
+    author={"Danil Andreev"}
+>
+    <DocsMenu>
+        <AutoDocsMenu />
+    </DocsMenu>
+    <DocsPages>
+        <PagesGroup name={"My Group"}>
+            {/*...*/}
+        </PagesGroup>
+        <SecondPage/>
+    </DocsPages>
+</DocsLayout>

src/pages/MaterialDocsLanding/index.js

@@ -29,6 +29,8 @@ import demoScreenshotDesktop1 from "./images/demo-screenshot-desktop-1.png";
 import demoScreenshotDesktop2 from "./images/demo-screenshot-desktop-2.png";
 import Divider from "@material-ui/core/Divider";
 import useSwitchPage from "@material-docs/core/hooks/useSwitchPage";
+import exampleCode from "./exampleCode.md";
+import BuildIcon from '@material-ui/icons/Build';
 
 export default function MaterialDocsLanding() {
     const classes = useStyles();
@@ -110,7 +112,7 @@ export default function MaterialDocsLanding() {
                                                 experience. But it is optional.</Typography>
                                             <Code
                                                 theme={"darcula"}>{"$ npm install @material-ui/core\n$ npm install @material-ui/icons"}</Code>
-                                            <CardActions>
+                                            <CardActions >
                                                 <Button onClick={() => switchPage(["Getting started", "Installation"])}>
                                                     Read installation docs
                                                 </Button>
@@ -124,20 +126,20 @@ export default function MaterialDocsLanding() {
                                     <Card className={classes.card}>
                                         <CardHeader
                                             avatar={
-                                                <Avatar><GetAppIcon/></Avatar>
+                                                <Avatar><BuildIcon/></Avatar>
                                             }
                                             title={<Typography variant={"h6"}>Installation</Typography>}
                                         />
                                         <CardContent>
                                             <Typography>MaterialDocs components work without any additional setup, and don't
                                                 pollute
                                                 the global scope.</Typography>
-                                            <Code theme={"darcula"}>$ npm install @material-docs/core</Code>
-                                            <CardActions>
-                                                <Button onClick={event => switchPage(["Tutorials", "Creating Material Docs"])}>
-                                                    Explore the docs
-                                                </Button>
-                                            </CardActions>
+                                            <Code theme={"darcula"}>{exampleCode}</Code>
+                                            {/*<CardActions>*/}
+                                            {/*    <Button onClick={event => switchPage(["Tutorials", "Creating Material Docs"])}>*/}
+                                            {/*        Explore the docs*/}
+                                            {/*    </Button>*/}
+                                            {/*</CardActions>*/}
                                         </CardContent>
                                     </Card>
                                 </Box>