[SW-55] Fixing mobile case studies rows

gatsby-config.js

@@ -41,6 +41,30 @@ module.exports = {
     {
       resolve: `gatsby-plugin-styled-components`,
     },
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: "UA-133655199-1",
+        // Puts tracking script in the head instead of the body
+        head: false,
+        // Setting this parameter is optional
+        // anonymize: true,
+        // Setting this parameter is also optional
+        // respectDNT: true,
+        // Avoids sending pageview hits from custom paths
+        // exclude: ["/preview/**", "/do-not-track/me/too/"],
+        // Enables Google Optimize using your container Id
+        // optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
+        // Enables Google Optimize Experiment ID
+        // experimentId: "YOUR_GOOGLE_EXPERIMENT_ID",
+        // Set Variation ID. 0 for original 1,2,3....
+        // variationId: "YOUR_GOOGLE_OPTIMIZE_VARIATION_ID",
+        // Any additional create only fields (optional)
+        // sampleRate: 5,
+        // siteSpeedSampleRate: 10,
+        cookieDomain: "sancrisoft.com",
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.app/offline
     // 'gatsby-plugin-offline',

package.json

@@ -7,7 +7,8 @@
     "axios": "^0.18.0",
     "babel-plugin-styled-components": "^1.9.4",
     "gatsby": "2.0.53",
-    "gatsby-image": "2.0.20",
+    "gatsby-image": "2.0.24",
+    "gatsby-plugin-google-analytics": "^2.0.13",
     "gatsby-plugin-manifest": "2.0.9",
     "gatsby-plugin-offline": "2.0.16",
     "gatsby-plugin-react-helmet": "3.0.2",

src/components/SimilarProyects/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import Img from 'gatsby-image'
+import {ThemeProvider} from 'styled-components'
+
+import Title from '../title';
+
+import {
+  Box,
+  BoxImage,
+  ContentBox,
+  A,
+} from './styledComponents'
+
+const theme = {
+  breakpoints: {
+    xs: 0,
+    sm: 568,
+    md: 768,
+    lg: 1024,
+    xl: 1400
+  }
+};
+
+
+const Similar = ({ name, image, type, link }) =>  {
+  return(
+    <ThemeProvider theme={theme}>
+      <Box>
+        <A href={link} >
+          <BoxImage>
+            <Img sizes={image} />
+            <ContentBox>
+              <Title
+                type={4}
+                text={name}
+                color="#fff"
+                align="left"
+              />
+            <span>{type}</span>
+            </ContentBox>
+          </BoxImage>
+        </A>
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+Similar.propTypes = {
+  name: PropTypes.string,
+  type: PropTypes.string,
+  link: PropTypes.string,
+  image: PropTypes.object,
+};
+
+
+
+export default Similar;

src/components/SimilarProyects/styledComponents.js

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
+
+export const Box = styled.div`
+  display: flex;
+  width: 100%;
+  margin-bottom: 2em;
+  overflow: hidden;
+  transition: all .5s;
+  flex-direction: column;
+  ${breakpoint('md')`
+    width: 48%;
+  `}
+  ${breakpoint('lg')`
+    width: 31%;
+    height: 210px;
+  `}
+  ${breakpoint('xl')`
+    height: 240px;
+    width: 350px;
+  `}
+`;
+
+export const BoxImage = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+  overflow: hidden;
+  border-radius: 5px;
+  cursor: pointer;
+  .gatsby-image-wrapper {
+    width: 100%;
+    transition: all .5s;
+    img {
+      filter: grayscale(1);
+      transition: all .5s;
+    }
+    &:hover {
+      img {
+        filter: grayscale(0);
+      }
+    }
+  }
+`;
+export const ContentBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 70px;
+  background: rgba(0,0,0, .7);
+  color: #fff;
+  padding: 0 10px;
+  h4 {
+    font-size: 20px;
+    letter-spacing: 1px;
+    margin-bottom: 0;
+    text-shadow: 1px 1px 2px #333;
+    text-transform: capitalize;
+  }
+  span {
+    font-size: 14px;
+    text-shadow: 1px 1px 2px #333;
+  }
+`;
+
+export const A = styled.a`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  cursor: pointer;
+`;

src/components/casesAbout/index.js

@@ -12,23 +12,21 @@ import {
   AboutMore,
   Services,
   Features,
-  A,
   UL
 } from './styledComponents'
 
-const CasesAbout = ({id ,urlNetwork, name, description, services, features, titleServices, titleFeatures }) => {
+const CasesAbout = ({ name, description, services, features, titleServices, titleFeatures }) => {
   return(
     <ContentAbout>
       <AboutDescription>
         <AboutTitle>
           <Title
             type={2}
-            text={`${name} ${id}`}
+            text={name}
           />
         </AboutTitle>
         <p>
           {description}
-          <A href={urlNetwork} target="_blank" >{urlNetwork}</A>
         </p>
       </AboutDescription>
       <AboutMore>
@@ -46,8 +44,8 @@ const CasesAbout = ({id ,urlNetwork, name, description, services, features, titl
                     <Icons
                       iconName="check"
                       backgroundColor="#F28724"
-                      height="13"
-                      width="13"
+                      height={13}
+                      width={13}
                     />
                       {item}
                   </li>
@@ -70,8 +68,8 @@ const CasesAbout = ({id ,urlNetwork, name, description, services, features, titl
                     <Icons
                       iconName="check"
                       backgroundColor="#F28724"
-                      height="13"
-                      width="13"
+                      height={13}
+                      width={13}
                     />
                       {item}
                   </li>

src/components/casesAbout/styledComponents.js

@@ -40,7 +40,7 @@ export const AboutDescription = styled.div`
   `}
   p {
     font-size: 16px;
-    line-height: 1.3;
+    line-height: 1.5;
     margin: 0 auto;
     ${breakpoint('tablet')`
       font-size: 15px;
@@ -115,7 +115,7 @@ export const UL = styled.ul`
   li {
     list-style: none;
     font-size: 16px;
-    line-height: 1.3;
+    line-height: 1.5;
     margin-bottom: 5px;
     ${breakpoint('tablet')`
       font-size: 15px;

src/components/casesImage/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Img from 'gatsby-image'
 import {ThemeProvider} from 'styled-components'
-
+import { withNamespaces } from "react-i18next"
 import Title from '../title'
 
 import {
@@ -13,7 +13,8 @@ import {
   CaseRight,
   CaseRightImage,
   Logos,
-  A
+  A,
+  ExternalLink,
 } from './styledComponents'
 
 const theme = {
@@ -26,21 +27,25 @@ const theme = {
   }
 };
 
-const CasesImage = ({
-  title,
-  description,
-  image,
-  phone,
-  playStore,
-  appStore,
-  linkPlayStore,
-  linkAppStore }) => {
-
+const CasesImage = (props) => {
+  const {
+    title,
+    description,
+    image,
+    phone,
+    playStore,
+    appStore,
+    linkPlayStore,
+    linkAppStore, 
+    widthImage,
+    weblink,
+    weblinkTitle
+  } = props;
   return(
     <ThemeProvider theme={theme}>
       <ContentCases>
         <CaseLeft>
-          <CaseLeftTop>
+          <CaseLeftTop widthImage={widthImage}>
             <Img sizes={image} />
             <Title
               type={3}
@@ -51,20 +56,32 @@ const CasesImage = ({
             <p>{description}</p>
           </CaseLeftBottom>
           <Logos>
-            <A
+            {
+              (playStore) && <A
               href={linkPlayStore}
               target="_blank"
               className="playStore"
             >
               <Img sizes={playStore} />
             </A>
-            <A
-              href={linkAppStore}
-              target="_blank"
-              className="appStore"
-            >
-              <Img sizes={appStore} />
-            </A>
+            }
+            {
+              (playStore) && <A
+                href={linkAppStore}
+                target="_blank"
+                className="appStore"
+              >
+                <Img sizes={appStore} />
+              </A>
+            }
+            {
+              (weblink) && <ExternalLink
+                href={weblink}
+                target="_blank"
+              >
+                {weblinkTitle}
+              </ExternalLink>
+            }
           </Logos>
         </CaseLeft>
         <CaseRight>
@@ -81,12 +98,14 @@ CasesImage.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   image: PropTypes.object.isRequired,
+  widthImage: PropTypes.string,
   phone: PropTypes.string,
   playStore: PropTypes.object,
   appStore: PropTypes.object,
   linkAppStore: PropTypes.string,
   linkPlayStore: PropTypes.string,
+  weblink: PropTypes.string,
 };
 
 
-export default CasesImage
+export default withNamespaces('translations')(CasesImage)