Redesign

gatsby-config.js

@@ -11,7 +11,8 @@ module.exports = {
     'Mdx.frontmatter.meta.techstack': 'TechstackYaml',
     'Mdx.frontmatter.meta.teammembers': 'AuthorYaml',
   },
-  plugins: [{
+  plugins: [
+    {
       resolve: 'gatsby-plugin-i18n',
       options: {
         langKeyDefault: 'en',
@@ -42,7 +43,8 @@ module.exports = {
       resolve: `gatsby-mdx`,
       options: {
         extensions: ['.mdx', '.md'],
-        gatsbyRemarkPlugins: [{
+        gatsbyRemarkPlugins: [
+          {
             resolve: 'gatsby-remark-responsive-iframe',
             options: {
               wrapperStyle: 'margin-bottom: 1rem',
@@ -95,26 +97,24 @@ module.exports = {
             }
           }
         `,
-        feeds: [{
-          serialize: ({
-            query: {
-              site,
-              allMdx
-            }
-          }) => {
-            return allMdx.edges.map(edge => {
-              return Object.assign({}, edge.node.frontmatter, {
-                description: edge.node.excerpt,
-                date: edge.node.frontmatter.date,
-                url: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                custom_elements: [{
-                  'content:encoded': edge.node.html
-                }],
+        feeds: [
+          {
+            serialize: ({ query: { site, allMdx } }) => {
+              return allMdx.edges.map(edge => {
+                return Object.assign({}, edge.node.frontmatter, {
+                  description: edge.node.excerpt,
+                  date: edge.node.frontmatter.date,
+                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
+                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
+                  custom_elements: [
+                    {
+                      'content:encoded': edge.node.html,
+                    },
+                  ],
+                });
               });
-            });
-          },
-          query: `
+            },
+            query: `
               {
                 allMdx(
                   limit: 1000,
@@ -134,9 +134,10 @@ module.exports = {
                 }
               }
             `,
-          output: '/rss.xml',
-          title: 'Gatsby RSS Feed',
-        }, ],
+            output: '/rss.xml',
+            title: 'Gatsby RSS Feed',
+          },
+        ],
       },
     },
 
@@ -146,6 +147,19 @@ module.exports = {
         postCssPlugins: [require('postcss-color-function'), require('cssnano')()],
       },
     },
+
+    {
+      resolve: `gatsby-plugin-google-fonts`,
+      options: {
+        fonts: [
+          `saira\:100,200,300,400,500,600,700,800,900`,
+          `sarala\:400,700`,
+          // you can also specify font weights and styles
+        ],
+        display: 'swap',
+      },
+    },
+
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
@@ -166,4 +180,4 @@ module.exports = {
     },
     'gatsby-plugin-emotion',
   ],
-};
+};

package.json

@@ -35,6 +35,7 @@
     "gatsby-plugin-emotion": "^2.0.0-rc.5",
     "gatsby-plugin-feed": "^2.0.11",
     "gatsby-plugin-google-analytics": "^2.0.8",
+    "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-i18n": "^0.4.2",
     "gatsby-plugin-manifest": "^2.0.29",
     "gatsby-plugin-postcss": "2.0.2",
@@ -62,10 +63,10 @@
     "prism-themes": "1.0.1",
     "prismjs": "1.15.0",
     "prop-types": "^15.6.2",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "5.2.0",
-    "react-intl": "^2.7.2",
+    "react-intl": "^4.5.2",
     "react-messenger-customer-chat": "^0.7.2",
     "react-slick": "^0.23.2",
     "refractor": "^2.6.2",
@@ -77,10 +78,10 @@
     "@types/classnames": "2.2.6",
     "@types/lodash": "4.14.119",
     "@types/node": "10.12.18",
-    "@types/react": "16.7.18",
-    "@types/react-dom": "16.0.11",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "@types/react-helmet": "5.0.8",
-    "@types/react-intl": "^2.3.17",
+    "@types/react-intl": "^3.0.0",
     "babel-plugin-styled-components": "1.10.0",
     "prettier": "^1.15.3",
     "rimraf": "2.6.2",

src/components/Button.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { colors } from '../styles/colors';
+
+const Button = styled.a`
+  width: 200px;
+  height: 60px;
+  background: ${colors.yellow};
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 7px 13px 18px 6px rgba(255 205 54, 0.17);
+  color: ${colors.darkyellow};
+  font-family: Saira;
+  font-weight: 600;
+  font-size: 30px;
+  line-height: 56px;
+  text-decoration: none;
+
+  :hover {
+    background: ${colors.fadedyellow};
+  }
+`;
+
+export default Button;

src/components/Card.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { colors } from '../styles/colors';
+import ChatIcon from './icons/chat';
+
+const CardWrapper = styled.div`
+  width: 50%;
+  display: inline-block;
+  height: 318px;
+`;
+
+const Card = styled.div`
+  position: relative;
+  display: flex;
+  background: ${colors.backgroundgray};
+  padding: 53px 20px;
+  margin-top: 36px;
+  width: 48%;
+  max-height: 440px;
+  @media (max-width: 950px) {
+    flex-direction: column;
+    width: 100%;
+  }
+  /* @media (max-width: 1270px) {
+    max-width: 400px;
+  }
+  @media (max-width: 1070px) {
+    max-width: 300px;
+  } */
+`;
+
+const CardDescription = styled.div`
+  font-family: Sarala;
+  font-size: 26px;
+  line-height: 36px;
+  @media (max-width: 420px) {
+    font-size: 20px;
+    line-height: 30px;
+  }
+`;
+
+const Icon = styled.div`
+  position: absolute;
+  z-index: 10;
+  left: 19px;
+  top: -43px;
+`;
+
+export interface ICard {
+  text: string;
+}
+
+const CardComponent: React.FC<ICard> = ({ text }) => {
+  const maxLength = 220;
+  const sentenceCutter = (sentence = '') =>
+    sentence.length > maxLength ? sentence.substr(0, maxLength) + '...' : sentence;
+  console.log(text, sentenceCutter(text));
+  return (
+    <Card>
+      <Icon>
+        <ChatIcon />
+      </Icon>
+      <CardDescription>{sentenceCutter(text)}</CardDescription>
+    </Card>
+  );
+};
+
+export default CardComponent;

src/components/Clients/index.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { css } from 'emotion';
+
+import koch from '../../content/clients/koch.svg';
+import amz from '../../content/clients/amz.svg';
+import dynamite from '../../content/clients/dynamite.svg';
+import initialView from '../../content/clients/initialView.svg';
+import ingclass from '../../content/clients/ingclass.svg';
+import caminer from '../../content/clients/caminer.svg';
+
+const StyledDiv = styled.div`
+  background-color: #ffffff;
+  width: 100%;
+  padding: 65px 130px;
+  display: grid;
+  @media (max-width: 800px) {
+    padding: 60px 50px;
+  }
+  @media (max-width: 500px) {
+    padding: 60px 20px;
+  }
+`;
+
+const ClientsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .client {
+    width: 16%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  @media (max-width: 1300px) {
+    .client {
+      width: 30%;
+    }
+  }
+`;
+
+const title = css`
+  font-family: Saira;
+  align-self: center;
+  justify-self: center;
+  line-height: 42px;
+`;
+
+const Clients: React.FC<{}> = ({}) => {
+  return (
+    <StyledDiv>
+      <h4 className={`${title}`}>Our clients</h4>
+      <ClientsWrapper>
+        <div className="client">
+          <img src={koch} />
+        </div>
+        <div className="client">
+          <img src={initialView} />
+        </div>
+        <div className="client">
+          <img src={amz} />
+        </div>
+        <div className="client">
+          <img src={dynamite} />
+        </div>
+        <div className="client">
+          <img src={ingclass} />
+        </div>
+        <div className="client">
+          <img src={caminer} />
+        </div>
+      </ClientsWrapper>
+    </StyledDiv>
+  );
+};
+
+export default Clients;