From c12bcbd704923c2a146d182d3249a47cfb71be0a Mon Sep 17 00:00:00 2001
From: receptiryaki <recep.tiryaki@gmail.com>
Date: Fri, 17 Apr 2020 13:15:19 +0300
Subject: [PATCH] added features...

---
 src/app/containers/HomePage/Features.tsx      | 89 ++++++++++++++++++-
 ...stant-refresh.svg => instant-feedback.svg} |  0
 2 files changed, 86 insertions(+), 3 deletions(-)
 rename src/app/containers/HomePage/assets/{instant-refresh.svg => instant-feedback.svg} (100%)

diff --git a/src/app/containers/HomePage/Features.tsx b/src/app/containers/HomePage/Features.tsx
index 9b557a21..fa76a2a1 100644
--- a/src/app/containers/HomePage/Features.tsx
+++ b/src/app/containers/HomePage/Features.tsx
@@ -2,15 +2,22 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import { Title } from 'app/containers/HomePage/components/Title';
 import { Lead } from './components/Lead';
-import { ReactComponent as StateIcon } from './assets/state.svg';
-import { ReactComponent as CSSIcon } from './assets/css.svg';
-import { ReactComponent as INTLIcon } from './assets/intl.svg';
 import { SubTitle } from 'app/containers/HomePage/components/SubTitle';
 import { P } from './components/P';
 import { A } from 'app/components/A';
 import { GithubRepoForm } from 'app/containers/GithubRepoForm';
 import { ThemeSwitch } from 'app/containers/ThemeSwitch';
 import { LanguageSwitch } from '../LanguageSwitch';
+import { ReactComponent as StateIcon } from './assets/state.svg';
+import { ReactComponent as CSSIcon } from './assets/css.svg';
+import { ReactComponent as INTLIcon } from './assets/intl.svg';
+import { ReactComponent as TSLogo } from './assets/ts.svg';
+import { ReactComponent as RouteIcon } from './assets/route.svg';
+import { ReactComponent as SEOIcon } from './assets/seo.svg';
+import { ReactComponent as InstantFeedbackIcon } from './assets/instant-feedback.svg';
+import { ReactComponent as ScaffoldingIcon } from './assets/scaffolding.svg';
+import { ReactComponent as OfflineFirstIcon } from './assets/offline-first.svg';
+import { ReactComponent as CodeAnalysisIcon } from './assets/code-analysis.svg';
 
 export function Features() {
   return (
@@ -79,6 +86,82 @@ export function Features() {
             <LanguageSwitch />
           </Content>
         </Feature>
+        <Feature>
+          <TSLogo className="feature-icon" />
+          <Content>
+            <SubTitle>TypeScript</SubTitle>
+            <P>
+              Typescript is the key to scalability. Build self-documented code,
+              easy-to-debug code and create maintainable large applications and
+              codebases with a highly productive development experience.
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <RouteIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Industry-Standard routing</SubTitle>
+            <P>
+              It's natural to want to add pages (e.g. `/about`) to your
+              application, and routing makes this possible. Go to our{' '}
+              <strong>/NotFound</strong>
+              page to see how routing works
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <SEOIcon className="feature-icon" />
+          <Content>
+            <SubTitle>SEO</SubTitle>
+            <P>
+              Supports SEO (document head tags management) for search engines
+              that support indexing of JavaScript content.
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <InstantFeedbackIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Instant Feedback</SubTitle>
+            <P>
+              Enjoy the best DX (Developer eXperience) and code your app at the
+              speed of thought! Your saved changes to the CSS and JS are
+              reflected instantaneously without refreshing the page.
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <ScaffoldingIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Quick Scaffolding</SubTitle>
+            <P>
+              Automate the creation of components, features, routes, selectors
+              and sagas - and their tests - right from the CLI! Avoid fighting
+              the glue of your code and focus on your app!
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <OfflineFirstIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Offline-First</SubTitle>
+            <P>
+              The next frontier in performant web apps: availability without a
+              network connection from the instant your users load the app.
+            </P>
+          </Content>
+        </Feature>
+        <Feature>
+          <CodeAnalysisIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Static Code Analysis</SubTitle>
+            <P>
+              Focus on writing new features without worrying about formatting or
+              code quality. With the right editor setup, your code will
+              automatically be formatted and linted as you work.
+            </P>
+          </Content>
+        </Feature>
       </List>
     </>
   );
diff --git a/src/app/containers/HomePage/assets/instant-refresh.svg b/src/app/containers/HomePage/assets/instant-feedback.svg
similarity index 100%
rename from src/app/containers/HomePage/assets/instant-refresh.svg
rename to src/app/containers/HomePage/assets/instant-feedback.svg