diff --git a/docusaurus/website/pages/en/index.js b/docusaurus/website/pages/en/index.js
index aebd78058c1..3e09b15cd1d 100755
--- a/docusaurus/website/pages/en/index.js
+++ b/docusaurus/website/pages/en/index.js
@@ -79,7 +79,9 @@ class HomeSplash extends React.Component {
-
+
@@ -89,16 +91,23 @@ class HomeSplash extends React.Component {
const Block = props => (
-
+
);
+Block.defaultProps = {
+ padding: ['bottom', 'top'],
+};
-const Features = () => (
-
+const Features = props => (
+
{[
{
content:
@@ -119,6 +128,114 @@ const Features = () => (
);
+const GetStarted = props => (
+
+ {[
+ {
+ title: 'Get started coding in a matter of seconds!',
+ content: `With Create React App, you get to focus on **writing React, not boilerplate**.
+All you need to do is run a command, install some dependencies, and decide what's for dinner.
+
+\`\`\`sh
+npx create-react-app my-app
+\`\`\`
+`,
+ },
+ {
+ image:
+ 'https://camo.githubusercontent.com/29765c4a32f03bd01d44edef1cd674225e3c906b/68747470733a2f2f63646e2e7261776769742e636f6d2f66616365626f6f6b2f6372656174652d72656163742d6170702f323762343261632f73637265656e636173742e737667',
+ imageAlign: 'right',
+ },
+ ]}
+
+);
+
+const Update = props => (
+
+ {[
+ {
+ image: imgUrl('update.png'),
+ imageAlign: 'left',
+ },
+ {
+ title: 'Easy-to-maintain toolchain',
+ content: `Keeping a build toolchain up to date with the latest and greatest can be a daunting and time-consuming
+task for even the most seasoned developer. Create React App extracts all of those concerns into a single
+dependency, which are **easy to update** and **battle tested by thousands**.
+
+\`\`\`sh
+npm install react-scripts@latest
+\`\`\``,
+ },
+ ]}
+
+);
+
+const FineGrainedFeatures = props => (
+
+ {[
+ {
+ title: 'Webpack 4',
+ content:
+ 'Webpack 4 gives you lightning fast rebuilds and code-splitting out of the box',
+ },
+ {
+ title: 'Babel 7',
+ content:
+ 'Babel 7 transpiles your code faster than ever, now with support for the new Fragment syntax `>`',
+ },
+ {
+ title: 'ES2015+',
+ content:
+ 'Create React App is set up for you to use the features of the future',
+ },
+ {
+ title: 'Jest',
+ content:
+ 'The best test runner in the business is set up for you by default',
+ },
+ {
+ title: 'Dev-server',
+ content:
+ 'No-hassle local development thanks to the built-in dev-server',
+ },
+ {
+ title: 'PostCSS',
+ content:
+ 'Prefixing of new CSS features are done for you through Autoprefixer',
+ },
+ {
+ title: 'SASS',
+ content: 'Now you can write your styles with the power of SASS',
+ },
+ {
+ title: 'CSS Modules',
+ content: 'CSS Modules are also supported out of the box',
+ },
+ {
+ title: 'Babel Macros',
+ content:
+ 'Need some extra Babel-power? Babel Macros gives you just that',
+ },
+ {
+ title: 'SVGs in React',
+ content:
+ 'Now you can import your SVGs and use them as React components',
+ },
+ {
+ title: 'Progressive Web Apps',
+ content:
+ 'Every app created by Create React App is a fully Lighthouse-compliant PWA - opt in',
+ },
+ {
+ title: 'Great DX',
+ content:
+ "Create React App is made for you - the developer. And we've made your day-to-day so much better",
+ },
+ ]}
+
+);
+
class Index extends React.Component {
render() {
const language = this.props.language || '';
@@ -127,7 +244,10 @@ class Index extends React.Component {
-
+
+
+
+
);
diff --git a/docusaurus/website/static/css/custom.css b/docusaurus/website/static/css/custom.css
index faec652e6bf..1b9fec7805d 100644
--- a/docusaurus/website/static/css/custom.css
+++ b/docusaurus/website/static/css/custom.css
@@ -19,10 +19,17 @@
text-decoration: underline;
}
+.navigationSlider .slidingNav ul {
+ background: #282c34;
+}
+
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}
@media only screen and (min-width: 1024px) {
+ .navigationSlider .slidingNav ul {
+ background: none;
+ }
}
@media only screen and (max-width: 1023px) {
diff --git a/docusaurus/website/static/img/update.png b/docusaurus/website/static/img/update.png
new file mode 100644
index 00000000000..a428f813cdb
Binary files /dev/null and b/docusaurus/website/static/img/update.png differ