Merge pull request #634 from neontribe/develop

Adds new case study

gatsby-config.js

@@ -18,6 +18,13 @@ module.exports = {
         path: `${__dirname}/src/data/blog`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `case-studies`,
+        path: `${__dirname}/src/data/case-studies`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

gatsby-node.js

@@ -1,42 +1,61 @@
-const path = require(`path`)
+const path = require('path')
 
 exports.createPages = async ({ actions, graphql }) => {
   const { createPage } = actions
-  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        limit: 1000
-        filter: { fields: { sourceName: { eq: "blog-posts" } } }
-      ) {
-        edges {
-          node {
-            frontmatter {
-              slug
-            }
-            fields {
-              sourceName
+
+  // General function to create pages
+  async function createPagesFromSource(sourceName, pathPrefix, templatePath) {
+    const template = path.resolve(templatePath)
+    const result = await graphql(`
+      {
+        allMarkdownRemark(
+          limit: 1000
+          filter: { fields: { sourceName: { eq: "${sourceName}" } } }
+        ) {
+          edges {
+            node {
+              frontmatter {
+                slug
+              }
+              fields {
+                sourceName
+              }
             }
           }
         }
       }
+    `)
+
+    if (result.errors) {
+      throw result.errors
     }
-  `)
 
-  if (result.errors) {
-    throw result.errors
+    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+      createPage({
+        path: `${pathPrefix}/${node.frontmatter.slug}`,
+        component: template,
+        context: {
+          slug: node.frontmatter.slug,
+        },
+      })
+    })
   }
 
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    createPage({
-      path: `blog/${node.frontmatter.slug}`,
-      component: blogPostTemplate,
-      context: {
-        slug: node.frontmatter.slug,
-      },
-    })
-  })
+  // Create pages for case studies
+  await createPagesFromSource(
+    'case-studies',
+    '',
+    'src/templates/case-study/index.js'
+  )
+
+  // Create pages for blog posts
+  await createPagesFromSource(
+    'blog-posts',
+    'blog',
+    'src/templates/blog-post.js'
+  )
 }
+
 // Support IE11 when running gatsby develop
 exports.onCreateWebpackConfig = function onCreateWebpackConfig({
   actions,

src/components/Container.js

@@ -2,15 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 // TODO: replace all flex-box css classes with this component
-const Container = ({ children, justifyContent, mobileFlexDirection }) => (
+const Container = ({
+  children,
+  flex = true,
+  restrictWidth,
+  justifyContent,
+  mobileFlexDirection,
+}) => (
   <div className="container">
     {children}
 
     <style jsx>{`
       .container {
-        ${justifyContent ? `justify-content: ${justifyContent};` : ''}
-
-        display: flex;
+        ${flex ? `display: flex;` : ''}
+        ${flex && justifyContent ? `justify-content: ${justifyContent};` : ''}
+        ${restrictWidth ? `width: 100%; max-width: 650px;` : 'inherit;'}
       }
 
       @media (max-width: 860px) {

src/components/HomeTop.js → src/components/FullScreenHeader.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const HomeTop = ({ children }) => (
+const FullScreenHeader = ({ children }) => (
   <div className="top">
     {children}
 
@@ -33,8 +33,8 @@ const HomeTop = ({ children }) => (
     `}</style>
   </div>
 )
-HomeTop.propTypes = {
+FullScreenHeader.propTypes = {
   children: PropTypes.node,
 }
 
-export default HomeTop
+export default FullScreenHeader

src/components/PageTop.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const PageTop = ({ children }) => (
+const PageTop = ({ children, bannerPresent }) => (
   <div className="top">
     {children}
 
     <style jsx>{`
       .top {
         background-color: black;
         padding-top: 2rem;
-        padding-bottom: 4rem;
+        padding-bottom: ${bannerPresent ? '0' : '4rem'};
         position: relative;
         height: 100%;
       }

src/data/case-studies/momo.md

@@ -0,0 +1,45 @@
+---
+title: 'Helping Mind Of My Own ensure the voices of children and young people are heard'
+description: 'We developed the technology that delivers Mind Of My Own’s vision and helped them create user-centred products that fit into children’s and young people’s lives'
+slug: 'mind-of-my-own-case-study'
+customer: 'Mind of My Own'
+categories: 'Discovery, Alpha, Beta, Live'
+statistic: 'More than 300 organisations now use Mind of my Own products.'
+image: images/mind-of-my-own-phone.png
+problem: |
+  The Rose Voucher fruit and veg project provides vouchers for families. When our work together began, people involved in the project were writing out lists by hand. Alexandra Rose’s administrator was typing up the information into spreadsheets. They wanted to use technology to reach more families but had limited budgets.
+introduction: |
+  In 2013, the organisation's founders had a good idea which got them a grant from the Nominet Trust (now Social Tech Trust). The grant enabled Neontribe to design and build a prototype for what became Mind Of My Own's first product, the One app. This app was aimed at supporting young people to make their voices heard.
+
+  Hard work and excellent recruitment extended this into a suite of 5 products. The products are now used by education, youth justice, and health organisations, as well as **40% of local government authorities in the UK**. These products help organisations to listen to the voices of the young people who benefit from their services.
+result: |
+  Mind Of My Own is now a sustainable business with a team of 25, and a vision that has social good at its heart. We were there from the start in 2013, and helped them transition to an internal development team in 2024. Mind Of My Own’s products help young people speak for themselves, to those responsible for their experiences, at times that suit them. Hundreds of customers across Europe, New Zealand, and Australia embed the voice of many tens of thousands of young people into the heart of their work using these products.
+conclusion: |
+whatWeDid: |
+  We started by using the research Mind Of My Own had done to prototype an interface that helped young people speak for themselves to local authority workers. It provided suggestions for what to say about the experiences they’d had, the meetings they’d been to, and the decisions made about them. These prompts were informed by professional practice, and tested with young people. That prototype then became a web app and was soon being used by young people. Our team included user researchers, designers, product managers, and developers.
+
+  We use an agile philosophy throughout the project. We did 2-week sprints of development work surrounded by planning and testing. This way of working means that we’re doing the right thing, at the right time, and doing the thing right. It’s a regular cadence of work, helping us to deliver new products and features at a steady pace over the long term. The space around those sprints makes time for product management, and user research to work alongside our developers rather than outside their work.
+
+  This helps create a multidisciplinary team where our developers work with, not for, Mind Of My Own and are closer to their customers and users. This means we can be light on our feet when business change happens, responding to change rather than following a plan that’s no longer useful. We can catch the technical complexities implied by a design before it’s finished, saving time and lots of rounds of change.
+
+  Since then, we developed products that help:
+  - practitioners working alongside young people get authentic voices into the heart of their practice
+  - local authorities and others get insights from young people
+  - Mind Of My Own’s customers run custom, branded, surveys to capture young people’s opinions
+  - direct parents and young people to their entitlements, resources, local events, and support services
+
+  All of these product development projects have followed the same ways of working: with a solid focus on the needs of the users, design that extends a known brand, and iterative development cycles.
+
+  We also provided support, maintenance, and advisory services to support Mind Of My Own’s work by:
+  - responding to issues reported by customers
+  - keeping software infrastructure up to date
+  - helping upskill the internal team when needed
+
+  Our work for Mind Of My Own involved collaborating with a specialist member of their team for compliance with Information Security Management System ISO27001.
+
+  Throughout our relationship with them, working in partnership was essential. We enabled Mind Of My Own to concentrate on their core operations, knowing they could rely on us to deliver the software that helps make sure that the voices of young people are heard.
+
+  We also helped them hone skills in product management, user research, user experience design, and information security. Now they have their own developers, but their vision remains the same. Better care and support happens when children are listened to, they get better care and support which ultimately improves their lives and prospects for the future.
+
+  > Yvonne Anderson, a director of Mind of Own, says: "**Neontribe's expertise and professionalism was core to our first decade's work. The technology they built, and skills they helped us develop, mean we have a solid foundation for continued success at our core mission: getting young people's voices heard**"
+---

src/pages/404.js

@@ -1,30 +1,65 @@
 import React from 'react'
-
 import Layout from '../components/Layout'
 import ConstrainedWidth from '../components/Layout/ConstrainedWidth'
-import Text from '../components/Text'
+import VerticalSpacing from '../components/VerticalSpacing'
 import PageMeta from '../components/PageMeta'
+import Container from '../components/Container'
+import FullScreenHeader from '../components/FullScreenHeader'
+import StyledLink from '../components/Button'
+
+import arcs from '../components/arcs.svg'
+import { fontSizes } from '../theme'
 
 const NotFoundPage = () => (
   <Layout>
-    <PageMeta title="Not Found" />
-    <ConstrainedWidth>
-      <div className="accessibility-centered">
-        <h1>404 Page Not Found</h1>
-
-        <p>
-          <Text size="large">
-            <i>++?????++ Out of Cheese Error. Redo From Start.</i>
-          </Text>
-        </p>
-      </div>
-    </ConstrainedWidth>
+    <PageMeta title="Page not found" />
+    <FullScreenHeader>
+      <ConstrainedWidth>
+        <Container justifyContent="space-around" mobileFlexDirection="column">
+          <div className="page-not-found-text">
+            <h1>Sorry this page does not exist.</h1>
+
+            <VerticalSpacing size={5} />
+
+            <StyledLink connect="/" background="black" border_color="#48e9ce">
+              Return to home page
+            </StyledLink>
+          </div>
+          <img
+            src={arcs}
+            height={200}
+            width={200}
+            alt="Decorative neon pink & blue arc icon"
+          />
+        </Container>
+
+        <VerticalSpacing size={6} />
+      </ConstrainedWidth>
+    </FullScreenHeader>
 
     <style jsx>{`
-      .accessibility-centered {
-        text-align: center;
-        display: flex;
-        flex-direction: column-reverse;
+      .page-not-found-text {
+        max-width: 700px;
+      }
+
+      h1 {
+        font-size: ${fontSizes['title']};
+      }
+
+      img {
+        align-self: center;
+      }
+
+      @media (max-width: 860px) {
+        h1 {
+          font-size: ${fontSizes['xlarge']};
+        }
+        .page-not-found-text {
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+          align-items: center;
+        }
       }
     `}</style>
   </Layout>

src/pages/index.js

@@ -6,13 +6,13 @@ import Smile from '../components/Smile'
 import VerticalSpacing from '../components/VerticalSpacing'
 import PageMeta from '../components/PageMeta'
 import StyledLink from '../components/Button'
-import HomeTop from '../components/HomeTop'
+import FullScreenHeader from '../components/FullScreenHeader'
 import { fontSizes } from '../theme'
 
 const IndexPage = () => (
   <Layout>
     <PageMeta title="Welcome" />
-    <HomeTop>
+    <FullScreenHeader>
       <ConstrainedWidth>
         <>
           <h1>
@@ -146,7 +146,7 @@ const IndexPage = () => (
           `}</style>
         </section>
       </ConstrainedWidth>
-    </HomeTop>
+    </FullScreenHeader>
   </Layout>
 )
 

src/pages/the-tribe.js

@@ -12,12 +12,10 @@ import {
 } from '../components/TheTribeParagraphs'
 
 import VerticalSpacing from '../components/VerticalSpacing'
-import StyledLink from '../components/Button'
 import PageMeta from '../components/PageMeta'
 import tribeArcs from '../components/tribeArcs.svg'
 import circleArc from '../components/circleArc.svg'
 import HireContainer from '../components/HireContainer'
-import EmailLink from '../components/EmailLink'
 const TheTribePage = () => (
   <Layout>
     <PageMeta
@@ -53,7 +51,7 @@ const TheTribePage = () => (
             <img src={tribeArcs} height={166} width={118} />{' '}
           </div>
         </div>
-{/* 
+        {/* 
         <VerticalSpacing size={5} />
         <HireContainer>
           <EmailLink