Rework landing page (#54)

* Tweak tagline and disable search

* Fix mobile styles

* Add icons

* Add sales pitch section and copyrights

Author: markerikson

website/core/Footer.js

@@ -75,7 +75,32 @@ class Footer extends React.Component {
             style={{color : "white"}}
           >
              Font Awesome
-          </a>
+          </a>  and <a
+            href="https://thenounproject.com"
+            style={{color : "white"}}
+        >
+            Noun Project
+        </a> (<a
+            href="https://thenounproject.com/term/snap/1984955/"
+            style={{color : "white"}}
+        >
+            Nate Gallagher
+        </a>, <a
+            href="https://thenounproject.com/term/brain/1551075/"
+            style={{color : "white"}}
+        >
+            BomSymbols
+        </a>, <a
+            href="https://thenounproject.com/term/bicep/1338504/"
+            style={{color : "white"}}
+        >
+            zidney
+        </a>, <a
+            href="https://thenounproject.com/term/checklist/437165//"
+            style={{color : "white"}}
+        >
+            David
+        </a>)
           </section>
       </footer>
     )

website/pages/en/index.js

@@ -44,11 +44,6 @@ const SplashContainer = props => (
   </div>
 )
 
-const Logo = props => (
-  <div className="projectLogo">
-    <img src={props.img_src} alt="Project Logo" />
-  </div>
-)
 
 const ProjectTitle = () => (
   <React.Fragment>
@@ -58,7 +53,7 @@ const ProjectTitle = () => (
     </div>
 
     <h2 style={{marginTop : "0.5em"}}>
-          A simple set of tools to make using Redux easier
+        {siteConfig.tagline}
     </h2>
   </React.Fragment>
 )
@@ -99,6 +94,45 @@ const Installation = () => (
   </div>
 )
 
+const Block = props => (
+  <Container
+    id={props.id}
+    background={props.background}
+    className={props.className}
+  >
+    <GridBlock align="center" contents={props.children} layout={props.layout}/>
+  </Container>
+);
+const FeaturesTop = props => (
+  <Block layout="fourColumn" className="featureBlock">
+    {[
+      {
+        content: `Includes utilities to simplify common use cases like **store setup, creating reducers, immutable update logic**, and more.`,
+        image : imgUrl("noun_snap_1984955.svg"),
+        imageAlign: 'top',
+        title: "Simple"
+      },
+      {
+        content: "Provides **good defaults for store setup out of the box**, and includes **the most commonly used Redux addons built-in**.",
+        image: imgUrl('noun_Brain_1551075.svg'),
+        imageAlign: 'top',
+        title: "Opinionated"
+      },
+      { // .
+        content: `Takes inspiration from libraries like Immer and Autodux to let you **write "mutative" immutable update logic**, and even **create entire "slices" of state automatically**.`,
+        image: imgUrl('noun_Bicep_1338504.svg'),
+        imageAlign: 'top',
+        title: "Powerful"
+      },
+      {
+        content: "Lets you focus on the core logic your app needs, so you can **do more work with less code**.",
+        image: imgUrl('noun_Checklist_437165.svg'),
+        imageAlign: 'top',
+        title: "Effective"
+      },
+    ]}
+  </Block>
+);
 class Index extends React.Component {
   render() {
     const language = this.props.language || ''
@@ -107,7 +141,11 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Installation />
+          <div className="productShowcaseSection">
+            <Container background="light">
+              <FeaturesTop />
+            </Container>
+          </div>
         </div>
       </div>
     )

website/siteConfig.js

@@ -10,15 +10,18 @@
 
 const siteConfig = {
   title: 'Redux Starter Kit', // Title for your website.
-  tagline: 'A simple set of tools to make using Redux easier',
+  tagline: 'A simple batteries-included toolset to make using Redux easier',
   url: 'https://redux-starter-kit.js.org', // Your website URL
   baseUrl: '/',
   docsUrl: '',
+    // Disable search until we get a new key from Algolia
+    /*
   algolia: {
     apiKey: '2d058d216b7fd5d68d481fd48ee72c06',
     indexName: 'redux-starter-kit',
     algoliaOptions: {}
   },
+  */
 
   // Used for publishing and more
   projectName: 'redux-starter-kit',

website/static/css/custom.css

@@ -24,6 +24,7 @@ a:visited {
 
 .fixedHeaderContainer header .headerTitleWithLogo {
   color : white;
+  display: block !important;
 }
 
 .navigationSlider .slidingNav ul a {
@@ -78,6 +79,37 @@ a:visited {
   margin-bottom: 5px;
 }
 
+
+@media only screen and (max-device-width: 480px) {
+  .productShowcaseSection .featureBlock {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .featureBlock .imageAlignTop .blockImage {
+    margin-bottom: 0;
+  }
+
+  .featureBlock .blockContent h2 {
+    margin-top: 0;
+    margin-bottom: 5px;
+  }
+
+  .featureBlock .blockContent {
+    margin-bottom: 25px;
+  }
+
+  .homeSplashFade img {
+    width : 60px;
+    height : 60px;
+  }
+
+  .homeSplashFade h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }