Merge pull request #642 from neontribe/develop

Adds case study links to Our Work page

src/components/WorkDescription/Content.js

@@ -15,7 +15,7 @@ const propTypes = {
 
 const Content = ({ children }) => (
   <div className="work-description-content">
-    <div className="title-description">
+    <div className="title-image-container">
       {cloneWithProps(findChild(children, Name), {
         key: 'client',
       })}
@@ -42,10 +42,13 @@ const Content = ({ children }) => (
         border-radius: 38px;
         display: flex;
         justify-content: space-around;
+        gap: 20px;
       }
 
-      .title-description {
+      .title-image-container {
         display: block;
+        max-width: 500px;
+        width: 100%;
       }
 
       .stacked-content {
@@ -55,6 +58,8 @@ const Content = ({ children }) => (
       @media (max-width: 860px) {
         .work-description-content {
           flex-direction: column;
+          padding-left: 1.5rem;
+          padding-right: 1.5rem;
         }
       }
     `}</style>
@@ -102,7 +107,7 @@ export const Description = ({ children }) => (
     <style jsx>{`
       .description {
         color: black;
-        width: 50%;
+        width: auto;
         float: right;
         white-space: pre-line;
         padding-top: 4.8rem;

src/components/WorkDescription/ProblemSolution.js

@@ -6,7 +6,7 @@ import remarkHtml from 'remark-html'
 import H from '../Heading'
 import VerticalSpacing from '../VerticalSpacing'
 import Text from '../Text'
-import { fontSizes } from '../../theme'
+import { fontSizes, c_NAV_ACTIVE, c_NEON_PURPLE } from '../../theme'
 
 const Content = (props) => (
   <>
@@ -54,7 +54,7 @@ const Content = (props) => (
   </>
 )
 
-export default ({ problem, solution }) => {
+export default ({ problem, solution, caseStudy, client }) => {
   solution = remark()
     .use(recommended)
     .use(remarkHtml)
@@ -86,13 +86,41 @@ export default ({ problem, solution }) => {
           </div>
         </>
       )}
+
+      {caseStudy && (
+        <>
+          <VerticalSpacing size={2} />
+          <div className="case-study-link">
+            <a href={caseStudy} className="">
+              Learn more about {client}
+            </a>
+          </div>
+        </>
+      )}
       <style jsx>{`
         .challenge {
           max-width: 60ch;
           font-size: ${fontSizes['normal']};
           line-height: 1.5;
         }
 
+        .case-study-link {
+          text-decoration: bold;
+          border-radius: 350px;
+          background-color: ${c_NEON_PURPLE};
+          font-size: ${fontSizes['normal']};
+          color: white;
+          font-weight: 600;
+          padding: 0.6rem 0.8rem;
+          text-wrap: wrap;
+          width: fit-content;
+          text-align: center;
+        }
+
+        .case-study-link:hover {
+          background-color: ${c_NAV_ACTIVE};
+        }
+
         .extra-padding {
           padding-left: 1rem;
           font-size: 18px;

src/components/WorkDescription/index.js

@@ -4,8 +4,13 @@ import Img from 'gatsby-image/withIEPolyfill'
 import ShimlessImg from 'gatsby-image'
 import css from 'styled-jsx/css'
 
-import { breakpoint } from '../../theme'
-import ConstrainedWidth from '../Layout/ConstrainedWidth'
+import {
+  breakpoint,
+  c_NEON_PURPLE,
+  c_NAV_ACTIVE,
+  fontSizes,
+  PAGE_WIDTH_REM,
+} from '../../theme'
 import H from '../Heading'
 import Section from '../Section'
 import Text from '../Text'
@@ -21,9 +26,17 @@ const imageStyles = css.resolve`
   }
 `
 
-const WorkDescription = ({ id, title, client, fluid, problem, solution }) => (
+const WorkDescription = ({
+  id,
+  title,
+  client,
+  fluid,
+  problem,
+  solution,
+  caseStudy,
+}) => (
   <section id={id}>
-    <ConstrainedWidth>
+    <div className="card-container">
       <div className="white-background">
         <Content>
           <Content.Name>
@@ -37,52 +50,44 @@ const WorkDescription = ({ id, title, client, fluid, problem, solution }) => (
 
           <Content.Title>
             <div className="title">
-              <Text size="medium" color="black" weight={700}>
+              <Text color="black" weight={700}>
                 <H>{title}</H>
               </Text>
             </div>
             <VerticalSpacing size={5} />
             <Content.Image>
               <Img className={imageStyles.className} fluid={fluid} />
             </Content.Image>
-
-            <VerticalSpacing size={5} />
-
-            <Text
-              color="#561dee"
-              size="normal"
-              weight="400"
-              maxCharacter="45ch"
-            >
-              {' '}
-              {/* <b>Funded by:</b> {fund} */}
-            </Text>
-            <VerticalSpacing size={1} />
-            <Text color="#561dee" size="normal" maxCharacter="30ch">
-              {' '}
-              {/* <b>Project cost:</b> {budget}{' '} */}
-            </Text>
-            <VerticalSpacing size={1} />
-            <Text color="#561dee" size="normal">
-              {' '}
-              {/* <b>Timescale:</b> {timescale}{' '} */}
-            </Text>
           </Content.Title>
 
           <Content.Description>
             <Section>
               <Section>
-                <ProblemSolution problem={problem} solution={solution} />
+                <ProblemSolution
+                  problem={problem}
+                  solution={solution}
+                  caseStudy={caseStudy}
+                  client={client}
+                />
               </Section>
             </Section>
           </Content.Description>
         </Content>
       </div>
-    </ConstrainedWidth>
+    </div>
 
     {imageStyles.styles}
 
     <style jsx>{`
+      .card-container {
+        width: 100%;
+        max-width: ${PAGE_WIDTH_REM};
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 0 0 38px 0;
+        padding-bottom: 2rem;
+      }
+
       .image {
         height: 100%;
         max-height: 200px;
@@ -94,7 +99,7 @@ const WorkDescription = ({ id, title, client, fluid, problem, solution }) => (
 
       .title {
         max-width: 45ch;
-
+        font-size: 2rem;
         display: inline-flex;
         align-items: center;
         line-height: 1.5;
@@ -107,10 +112,22 @@ const WorkDescription = ({ id, title, client, fluid, problem, solution }) => (
         float: left;
         font-size: 22px;
         max-width: 60ch;
-
         border-radius: 0 0 38px 0;
         display: inline-block;
       }
+
+      .case-study-link {
+        text-decoration: bold;
+        border-radius: 350px;
+        border: solid 3px ${c_NEON_PURPLE};
+        color: black;
+        font-weight: 600;
+        padding: 0.5rem 0.8rem;
+      }
+      .case-study-link:hover {
+        background-color: ${c_NAV_ACTIVE};
+      }
+
       .special-font-case {
         font-family: muli, sans-sarif;
         font-weight: 700;
@@ -121,6 +138,17 @@ const WorkDescription = ({ id, title, client, fluid, problem, solution }) => (
           max-width: 100%;
         }
       }
+
+      @media (max-width: 530px) {
+        .title {
+          font-size: ${fontSizes['large']};
+        }
+
+        .card-container {
+          padding-left: 0;
+          padding: right;
+        }
+      }
     `}</style>
   </section>
 )

src/data/case-studies/infosecurity.md

@@ -1,7 +1,7 @@
 ---
 title: 'Infosecurity that’s grounded in practical experience'
 description: 'Human-centered support with information security governance, policy documentation and process implementation'
-slug: 'infosecurity-grounded-in-practical-experience'
+slug: 'infosecurity-at-neontribe-case-study'
 customer: 'Alexandra Rose Charity, Mind Of My Own, Norfolk Community Arts'
 categories: 'Information Security, Data Protection, Charity Sector'
 statistic: null

src/data/projects/alexandra-rose.md

@@ -13,4 +13,5 @@ solution: |
   - Creating a system that currently supports over 2000 families to get fresh fruit and veg every week.
   - Supporting the charity to make successful funding bids to Comic Relief, Esmee Fairbairn and National Lottery Community Foundation.
 image: images/arc.jpg
+caseStudy: '/alexandra-rose-charity-case-study'
 ---

src/data/projects/infosec-at-neontribe.md

@@ -11,4 +11,5 @@ solution: |
   - In teaching the basics of information security
 
 image: images/infosec.png
+caseStudy: '/infosecurity-at-neontribe-case-study'
 ---

src/data/projects/mind-of-my-own.md

@@ -12,4 +12,5 @@ solution: |
   - Building and improving the apps which are now used by over 100 organisations to talk with the young people in their care.
 
 image: images/mind-of-my-own.jpg
+caseStudy: '/mind-of-my-own-case-study'
 ---

src/pages/our-work.js

@@ -72,6 +72,7 @@ const WhatWeAreDoingPage = () => (
                   problem
                   solution
                   client
+                  caseStudy
 
                   image {
                     childImageSharp {
@@ -104,9 +105,7 @@ const WhatWeAreDoingPage = () => (
                 imagePosition={index % 2 === 0 ? 'left' : 'right'}
                 problem={project.frontmatter.problem}
                 solution={project.frontmatter.solution}
-                // fund={project.frontmatter.fund}
-                // budget={project.frontmatter.budget}
-                // timescale={project.frontmatter.timescale}
+                caseStudy={project.frontmatter.caseStudy}
               />
             </React.Fragment>
           ))