fix: minor style fixes

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+python=/usr/bin/python2.7

README.md

@@ -1,14 +1,12 @@
 ## Developing
 
-A nodejs >= 6.0.0 setup with [yarn](https://yarnpkg.com/) is recommended.
-
-``` bash
+```bash
 # install dependencies
-yarn
-
-# ...or, for npm
 npm install
 
+# rebuild sharp gyp files if install process fails
+npm run build:sharp
+
 # serve with hot reload at localhost:3000
 npm start
 

package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
+    "build:sharp": "env CXXFLAGS=\"-std=c++17\" npm rebuild --verbose sharp",
     "build": "gatsby build",
     "clean": "rimraf public .cache",
     "deploy": "gatsby build && gh-pages -d public",
@@ -20,7 +21,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=16.0.0 <17.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.9.6",

src/components/Footer.tsx

@@ -14,6 +14,6 @@ const InnerFooter = styled(Container)`
 
 export const Footer: React.FC = () => (
   <footer>
-    <InnerFooter>{'© 2012–2022, Makeomatic'}</InnerFooter>
+    <InnerFooter>{'© 2012–2023, Makeomatic'}</InnerFooter>
   </footer>
 )

src/components/Intro.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import styled from '../styles/styled-components'
 import { HeightContainer } from './HeightContainer'
 
-const IntroContainer = styled(HeightContainer)`
+export const IntroContainer = styled(HeightContainer)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -22,7 +22,7 @@ const ChildContents = styled.div`
   `}
 `
 
-const Contents = styled.div`
+export const Contents = styled.div`
   max-width: 786px;
 
   h1 {
@@ -41,7 +41,7 @@ const Contents = styled.div`
     h1 {
       font-size: 2.75rem;
     }
-  
+
     p {
       font-size: 1.375rem;
     }

src/pages/index.tsx

@@ -3,7 +3,7 @@ import styled from '../styles/styled-components'
 import { Link, graphql } from 'gatsby'
 import { Layout } from '../components/Layout'
 import { Page } from '../components/Page'
-import { Intro } from '../components/Intro'
+import { Intro, IntroContainer, Contents } from '../components/Intro'
 import { HeightContainer } from '../components/HeightContainer'
 import { CardContents } from '../components/CardContents'
 import { Divider } from '../components/Divider'
@@ -153,37 +153,54 @@ const K8sVideoBlock = styled.div`
     `};
   }
 `
-
 // end teaser blocks
 
+const StyledIntroContainer = styled(IntroContainer)`
+  ${(p) => p.theme.media.md`
+    height: 38rem;
+  `}
+
+  ${(p) => p.theme.media.xs`
+    height: 42rem;
+  `}
+`
+
+const StyledResponsiveBackgroundImage = styled(ResponsiveBackgroundImage)`
+  ${(p) => p.theme.media.md`
+    margin-top: 10rem;
+  `}
+
+  ${(p) => p.theme.media.xs`
+    margin-top: 14rem;
+  `};
+`
+
 const IndexPage: React.FC<IndexPageProps> = ({ data }) => (
   <Layout>
     <Page>
-      <Intro
-        header={
-          <span>
-            High Load Services
-          </span>
-        }
-        text="Makeomatic is your long-term 
-        web development and design partner 
-        specializing in creating high-load interactive applications"
-      >
-        <ResponsiveBackgroundImage
+      <StyledIntroContainer>
+        <StyledResponsiveBackgroundImage
           imageLg={data.introImage}
           imageMd={data.introImageMd}
           alignLg="center"
           alignMd="center"
         />
-      </Intro>
+        <Contents>
+          <h1>High Load Service</h1>
+          <p>
+            Makeomatic is your long-term web development and design partner specializing in creating
+            high-load interactive applications
+          </p>
+        </Contents>
+      </StyledIntroContainer>
       <Divider>
         <h2>Enter Innovation Lab</h2>
         <p>
           Whether you have a business plan, sketch or just a few ideas about the product you'd like
           to create, <Link to="/process">we work with you</Link> from that point onwards, all the
-          way through validating your market fit, designing an optimal solution and
-          developing a prototype to be tested and iterated based on the feedback from the
-          users until it becomes a sustainable product
+          way through validating your market fit, designing an optimal solution and developing a
+          prototype to be tested and iterated based on the feedback from the users until it becomes
+          a sustainable product
         </p>
       </Divider>
       <TeaserBlock>
@@ -200,9 +217,7 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => (
           />
           <TeaserTextBlock>
             <TeaserTitle>Efficient Communication Between Internal Services</TeaserTitle>
-            <TeaserDesc>
-              Leveraging power of messaging broker on massive scale
-            </TeaserDesc>
+            <TeaserDesc>Leveraging power of messaging broker on massive scale</TeaserDesc>
           </TeaserTextBlock>
         </CardContents>
       </TeaserBlock>
@@ -223,7 +238,7 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => (
             <TeaserDesc>Automated deployment and scaling</TeaserDesc>
           </K8sTeaserTextBlock>
           <K8sVideoBlock>
-            <video autoPlay playsInline muted loop>
+            <video autoPlay muted playsInline loop>
               <source src={K8sVideo} type="video/mp4"></source>
             </video>
           </K8sVideoBlock>
@@ -243,9 +258,7 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => (
           />
           <PaymentsTeaserTextBlock>
             <TeaserTitle>Node.JS Performance Benchmarking and Analysis</TeaserTitle>
-            <TeaserDesc>
-              Solving performance problems with great efficiency
-            </TeaserDesc>
+            <TeaserDesc>Solving performance problems with great efficiency</TeaserDesc>
           </PaymentsTeaserTextBlock>
         </CardContents>
       </TeaserBlock>
@@ -264,7 +277,8 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => (
           <TeaserTextBlock>
             <TeaserTitle>High Volume Analytical System</TeaserTitle>
             <TeaserDesc>
-              Process more than 100.000 data points per second and run analytical queries in near real time
+              Process more than 100.000 data points per second and run analytical queries in near
+              real time
             </TeaserDesc>
           </TeaserTextBlock>
         </CardContents>

src/pages/process.tsx

@@ -111,13 +111,13 @@ const CallToActionGeometry = styled(CallToAction)`
 
 const StyledHeightContainer = styled(HeightContainer)`
   ${(p) => p.theme.media.md`
-    height: auto;
+    height: auto!important;
   `};
 `
 
 const StyledBackgroundImage = styled(ResponsiveBackgroundImage)`
   ${(p) => p.theme.media.md`
-    position: relative;
+    position: relative!important;
     height: ${getEmSize(520)}rem;
     overflow: hidden;
   `};

src/pages/work.tsx

@@ -150,10 +150,16 @@ const ReadMore = styled.div`
     & a {
       color: #000000;
       font-size: 1.125rem;
-    }  
+    }
   `};
 `
 
+const RadioResponsiveBackgroundImage = styled(ResponsiveBackgroundImage)`
+  @media (max-width: 700px) {
+    margin-left: -7.25rem;
+  }
+`
+
 const WorkPage: React.FC<WorkPageProps> = ({ data }) => (
   <Layout>
     <Page>
@@ -181,15 +187,15 @@ const WorkPage: React.FC<WorkPageProps> = ({ data }) => (
               Cappasity Cloud platform,
               <br />
               Cappasity Blockchain
-              </InvertedMdSubHeader>
+            </InvertedMdSubHeader>
             <Desc>
               Bring an in-store browsing experience to online retail with Cappasity, the first
               complete 3D product imaging solution for your website, mobile app, VR and AR
               applications.
             </Desc>
             <ReadMore>
-                <Link to="/cappasity">Read more</Link>
-              </ReadMore>
+              <Link to="/cappasity">Read more</Link>
+            </ReadMore>
           </StyledSideBlock>
         </CardContents>
       </HeightContainer>
@@ -212,10 +218,10 @@ const WorkPage: React.FC<WorkPageProps> = ({ data }) => (
               Lose weight for good and increase your wellbeing: Using a smartphone camera, discover
               the foods that have been holding you back.
               <br />
-              </Desc>
-              <ReadMore>
-                <Link to="/health">Read more</Link>
-              </ReadMore>
+            </Desc>
+            <ReadMore>
+              <Link to="/health">Read more</Link>
+            </ReadMore>
           </StyledSideBlock>
         </CardContents>
       </HeightContainer>
@@ -252,7 +258,7 @@ const WorkPage: React.FC<WorkPageProps> = ({ data }) => (
       </GeometryDividerContainer>
       <HeightContainer>
         <CardContents>
-          <ResponsiveBackgroundImage
+          <RadioResponsiveBackgroundImage
             imageLg={data.section2Image}
             imageMd={data.section2ImageMd}
             alignLg="center"