more frontend changes

frontend/src/components/alternatives.js

@@ -9,10 +9,13 @@ const Alternatives = ({ alternatives }) => {
       { alternatives.map(alternative => (
         <div key={alternative.id} className="alternative">
           <div className="logo">
-            { alternative.logo && <Img fluid={ alternative.logo.childImageSharp.fluid } fadeIn={false} /> }
+            { alternative.logo && <a href={alternative.link} target="_blank" rel="noopener noreferrer">
+              <Img fluid={ alternative.logo.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} />
+            </a> }
           </div>
           <div className="text">
           <h2>{ alternative.title }</h2>
+          <a href={ alternative.link } target="_blank" rel="noopener noreferrer" className="url">{ alternative.link }</a>
           <div dangerouslySetInnerHTML={{__html:alternative.description }} />
           { (alternative.domains || []).length > 0 &&
             <p className="meta">

frontend/src/components/layers.js

@@ -37,14 +37,18 @@ const Layers = ({ location }) => {
     <section id="layers">
       <div className="row">
         <div className="columns-2">
-          <div className="column" onClick={e => { handleClick(e, "0") }}>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 637.96 794.17"><g style={{ transform: "translateY(120px)" }}>
+          <div className="column" 
+            style={{ border: "none" }}
+            onClick={e => { handleClick(e, "0") }} 
+            onKeyDown={e => { handleClick(e, "0") }} 
+            tabIndex="0" 
+            role="button" 
+            aria-label="reset view">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 794.17"><g style={{ transform: "translateY(120px)" }}>
 
               <g id="foundation-layer-idle" 
                 className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`} 
-                onClick={e => handleClick(e, "1")} 
-                role="button" 
-                aria-label="Learn more about the Foundation Layer">
+                onClick={e => handleClick(e, "1")} role="button" aria-label="Learn more about the Foundation Layer">
                 <polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" />
                 <polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" />
                 <polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" />
@@ -54,7 +58,7 @@ const Layers = ({ location }) => {
 
               <g id="design-layer-idle" 
                 className={`clickable ${mainLayer === 2 ? 'inactive' : 'idle'} ${mainLayer >= 1 && mainLayer < 2 ? "up" : ""} ${mainLayer >= 3 ? "down" : ""}`} 
-                onClick={e => handleClick(e, "2")}>
+                onClick={e => handleClick(e, "2")} role="button" aria-label="Learn more about the Design Layer">
                 <polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" />
                 <polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" />
                 <polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" />
@@ -90,7 +94,7 @@ const Layers = ({ location }) => {
 
               <g id="tech-layer-idle" 
                 className={`${mainLayer < 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${current !== "0" && mainLayer >= 1 && mainLayer < 3 ? "up" : ""}`} 
-                onClick={e => handleClick(e, "3")}>
+                onClick={e => handleClick(e, "3")} role="button" aria-label="Learn more about the Tech Layer">
                 <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
                 <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
                 <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
@@ -101,7 +105,7 @@ const Layers = ({ location }) => {
               <g id="foundation-layer-active" 
                 className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
                 <g className={`${current !== "1.1" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "1.1")}>
+                  onClick={e => handleClick(e, "1.1")} role="button" aria-label="Learn more about the Starting Points and assumptions Layer">
                   <polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" />
                   <polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" />
                   <polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" />
@@ -112,7 +116,7 @@ const Layers = ({ location }) => {
                   </text>
                 </g>
                 <g className={`${current !== "1.2" ? 'idle' : ''}`} 
-                  onClick={e => handleClick(e, "1.2")}>
+                  onClick={e => handleClick(e, "1.2")} role="button" aria-label="Learn more about the Fundamental rights and values Layer">
                   <polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" />
                   <polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" />
                   <polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" />
@@ -123,7 +127,7 @@ const Layers = ({ location }) => {
                   </text>
                 </g>
                 <g className={`${current !== "1.4" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "1.4")}>
+                  onClick={e => handleClick(e, "1.4")}  role="button" aria-label="Learn more about the Socio-economic considerations Layer">
                   <polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" />
                   <polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" />
                   <polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" />
@@ -134,7 +138,7 @@ const Layers = ({ location }) => {
                   </text>
                 </g>
                 <g className={`${current !== "1.3" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "1.3")}>
+                  onClick={e => handleClick(e, "1.3")} role="button" aria-label="Learn more about the Governance and oversight Layer">
                   <polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" />
                   <polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" />
                   <polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" />
@@ -150,7 +154,7 @@ const Layers = ({ location }) => {
                 className={`${mainLayer < 3 ? 'inactive' : ''}`}>
                 <g id="contexts-layers-idle" 
                   className={`clickable ${current === "3" ? 'idle' : 'inactive'}`} 
-                  onClick={e => handleClick(e, "3.1")}>
+                  onClick={e => handleClick(e, "3.1")} role="button" aria-label="Learn more about the Contexts Layers">
                   <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
                   <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
                   <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
@@ -159,7 +163,7 @@ const Layers = ({ location }) => {
                 </g>
                 <g id="tech-layers-idle" 
                   className={`clickable ${current === "3" ? 'idle' : 'inactive'}`} 
-                  onClick={e => handleClick(e, "3.2")}>
+                  onClick={e => handleClick(e, "3.2")} role="button" aria-label="Learn more about the Tech Layers">
                   <polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" />
                   <polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" />
                   <polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" />
@@ -171,7 +175,7 @@ const Layers = ({ location }) => {
               <g id="context-layers-active" 
                 className={`${current.includes("3.1") ? 'active' : 'inactive'}`}>
                 <g className={`${current !== "3.1.4" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.1.4")}>
+                  onClick={e => handleClick(e, "3.1.4")} role="button" aria-label="Learn more about the Data and algorithms Layer">
                   <polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" />
                   <polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" />
                   <path className="r-u" d="M546.72,377.16,712.1,472.65,547.79,568.14,382.4,472.65Zm.91,161,112.73-65.52L546.89,407.14,434.15,472.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
@@ -181,7 +185,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(406.89 173.76)">Data and algorithms</text>
                 </g>
                 <g className={`${current !== "3.1.3" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.1.3")}>
+                  onClick={e => handleClick(e, "3.1.3")} role="button" aria-label="Learn more about the Protocols and standards Layer">
                   <polygon className="p-l" points="278.13 159.59 278.09 174.27 164.61 108.75 164.66 94.08 278.13 159.59" />
                   <polygon className="p-r" points="164.66 94.08 164.61 108.75 51.87 174.27 51.91 159.6 164.66 94.08" />
                   <path className="p-u" d="M546.72,362.16,712.1,457.65,547.79,553.14,382.4,457.65Zm.9,161,112.74-65.52L546.89,392.13,434.15,457.65l113.47,65.52" transform="translate(-382.24 -298.05)" />
@@ -191,7 +195,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(406.89 159)">Protocols and standards</text>
                 </g>
                 <g className={`${current !== "3.1.2" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.1.2")}>
+                  onClick={e => handleClick(e, "3.1.2")} role="button" aria-label="Learn more about the Security Layer">
                   <polygon className="t-l" points="278.13 144.59 278.09 159.26 164.61 93.75 164.66 79.08 278.13 144.59" />
                   <polygon className="t-r" points="164.66 79.08 164.61 93.75 51.87 159.27 51.91 144.6 164.66 79.08" />
                   <path className="t-u" d="M546.72,347.16,712.1,442.64,547.79,538.13,382.4,442.65Zm.9,161,112.74-65.52L546.89,377.13,434.15,442.65l113.47,65.51" transform="translate(-382.24 -298.05)" />
@@ -201,7 +205,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(406.89 145.15)">Security</text>
                 </g>
                 <g className={`${current !== "3.1.1" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.1.1")}>
+                  onClick={e => handleClick(e, "3.1.1")} role="button" aria-label="Learn more about the Service Layer">
                   <polygon className="y-u" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6" />
                   <polygon className="y-u" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08" />
                   <path className="y-u" d="M546.72,332.16,712.1,427.65,547.79,523.14,382.4,427.65Zm.91,161,112.73-65.52L546.89,362.14,434.15,427.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
@@ -215,7 +219,7 @@ const Layers = ({ location }) => {
               <g id="tech-layers-active" 
                 className={`${current.includes("3.2") ? 'active' : 'inactive'}`}>
                 <g className={`${current !== "3.2.5" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.2.5")}>
+                  onClick={e => handleClick(e, "3.2.5")} role="button" aria-label="Learn more about the Infrastructure Layer">
                   <polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" />
                   <polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" />
                   <polygon className="r-l" points="165.18 247.24 165.16 255.29 56.4 192.49 56.42 184.44 165.18 247.24" />
@@ -223,7 +227,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(346.01 180.92)">Infrastructure</text>
                 </g>
                 <g className={`${current !== "3.2.4" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.2.4")}>
+                  onClick={e => handleClick(e, "3.2.4")} role="button" aria-label="Learn more about the Equipment Layer">
                   <polygon className="p-u" points="273.24 169.69 165.18 232.49 56.42 169.69 164.47 106.9 273.24 169.69" />
                   <polygon className="p-r" points="273.24 169.69 273.21 177.74 165.16 240.54 165.18 232.49 273.24 169.69" />
                   <polygon className="p-l" points="165.18 232.49 165.16 240.54 56.4 177.75 56.42 169.69 165.18 232.49" />
@@ -231,7 +235,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(346.01 167.17)">Equipment</text>
                 </g>
                 <g className={`${current !== "3.2.3" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.2.3")}>
+                  onClick={e => handleClick(e, "3.2.3")} role="button" aria-label="Learn more about the Firmware and drivers Layer">
                   <polygon className="t-u" points="273.24 154.94 165.18 217.74 56.42 154.95 164.47 92.15 273.24 154.94" />
                   <polygon className="t-r" points="273.24 154.94 273.21 163 165.16 225.79 165.18 217.74 273.24 154.94" />
                   <polygon className="t-l" points="165.18 217.74 165.16 225.79 56.4 163 56.42 154.95 165.18 217.74" />
@@ -239,7 +243,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(346.01 152.41)">Firmware and drivers</text>
                 </g>
                 <g className={`${current !== "3.2.2" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.2.2")}>
+                  onClick={e => handleClick(e, "3.2.2")} role="button" aria-label="Learn more about the Operating system Layer">
                   <polygon className="y-u" points="273.24 140.19 165.18 202.98 56.42 140.19 164.47 77.4 273.24 140.19" />
                   <polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" />
                   <polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" />
@@ -247,7 +251,7 @@ const Layers = ({ location }) => {
                   <text transform="translate(346.01 138.56)">Operating system</text>
                 </g>
                 <g className={`${current !== "3.2.1" ? 'idle' : ''}`}
-                  onClick={e => handleClick(e, "3.2.1")}>
+                  onClick={e => handleClick(e, "3.2.1")} role="button" aria-label="Learn more about the Application Layer">
                   <polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" />
                   <polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" />
                   <polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" />

frontend/src/components/seo.js

@@ -26,7 +26,7 @@ function SEO({ description, lang, meta, title }) {
         lang,
       }}
       title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      titleTemplate={`${site.siteMetadata.title} | %s`}
       meta={[
         {
           name: `description`,

frontend/src/pages/about.js

@@ -29,7 +29,7 @@ const AboutPage = ({ data }) => (
             return (
               <a key={item.id} className="colofon-item" href={item.link} target="_blank" rel="noopener noreferrer">
                 <div className="logo">
-                  { item.logo && <Img fluid={ item.logo.childImageSharp.fluid } fadeIn={false} /> }
+                  { item.logo && <Img fluid={ item.logo.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} /> }
                 </div>
                 {/* <h3>{ item.title }</h3> */}
               </a>
@@ -61,7 +61,7 @@ export const pageQuery = graphql`
         link
         logo {
           childImageSharp {
-            fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
+            fluid(maxWidth: 200) {
               ...GatsbyImageSharpFluid_noBase64
             }
           }

frontend/src/pages/alternatives.js

@@ -26,10 +26,12 @@ export const pageQuery = graphql`
         id
         title
         description
+        link
         logo {
           childImageSharp {
-            fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
+            fluid(maxWidth: 200) {
               ...GatsbyImageSharpFluid_noBase64
+              aspectRatio
             }
           }
         }

frontend/src/pages/domains.js

@@ -20,7 +20,7 @@ const DomainsPage = ({ data }) => {
 
               return (
                 <Link to={`/domains/${domain.slug}`} key={domain.id} className="domain">
-                  { domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} /></div> }
+                  { domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} /></div> }
                   <div className="text">
                     <h2>{ domain.title }</h2>
                     <div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />

frontend/src/pages/index.js

@@ -159,11 +159,10 @@ const IndexPage = ({ data, location }) => {
         </div>
       </section>
 
-      <section id="next-actions">
+      <section id="next-actions" style={{ minHeight: "auto" }}>
         <div className="row">
           <h2>Explore the layers of the stack</h2>
           <Link className="button" to="/layers/">Start exploring</Link>
-
         </div>
       </section>
     </Layout>

frontend/src/pages/layers.js

@@ -8,7 +8,7 @@ import Layers from "../components/layers.js"
 const LayersPage = (props) => {
   return (
     <Layout id="front-page">
-      <SEO title="Home" />
+      <SEO title="Layers" />
       <Layers id="stack" location={props.location} />
     </Layout>
   )

frontend/src/pages/use-cases.js

@@ -16,10 +16,11 @@ const UseCasesPage = ({ data }) => {
             const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
 
             return (
-              <Link key={node.id} className="item" to={`/use-cases/${node.slug}`}>
-                <h2>{ node.title }</h2>
+              <div key={node.id} className="item">
+                <h2><Link to={`/use-cases/${node.slug}`}>{ node.title }</Link></h2>
                 <div dangerouslySetInnerHTML={{ __html: excerpt }} />
-              </Link>
+                <Link className="button" to={`/use-cases/${node.slug}`}>Read more...</Link>
+              </div>
             )
           }) }
         </div>

frontend/src/styles/_alternatives.scss

@@ -16,15 +16,24 @@
     .logo {
       width: 200px;
       flex-shrink: 0;
-      padding: 2px;
+      padding: 2px 0;
     }
 
     .text {
       padding-left: 1rem;
+    }
+
+    h2 {
+      margin-bottom: 0;
+    }
 
+    .url {
+      display: block;
+      margin-bottom: 2rem;
     }
 
     .meta {
+      margin-bottom: 0;
       font-size: 0.8em;
       font-weight: 700;
     }

frontend/src/styles/_domains.scss

@@ -12,7 +12,11 @@
     }
 
     .image {
-      width: 260px;
+      width: 180px;
+    }
+
+    .content {
+      margin-bottom: 0rem;
     }
 
     .text {

frontend/src/styles/_header.scss

@@ -133,7 +133,7 @@
   }
 
   .nav-item-subtitle {
-    font-size: 1rem;
+    font-size: 0.9rem;
     line-height: 1rem;
     max-width: 280px;
     overflow: hidden;
@@ -211,7 +211,7 @@
     }
 
     li {
-      padding: 1rem 1.5rem 0;
+      padding: 1rem 1.25rem 0;
       transition: all 100ms ease;
 
       .scrolled & {

frontend/src/styles/_layers.scss

 #layers {
 
-  @media (min-width: 481px) {
+  @media (min-width: 681px) {
     .column:last-child {
       padding-top: 5rem;
     }

frontend/src/styles/_layout.scss

@@ -40,7 +40,7 @@ main {
   margin: 3rem auto;
   padding-top: 5rem;
 
-  @media (max-width: 480px) {
+  @media (max-width: 680px) {
     padding-top: 3rem;
   }
 }
@@ -50,7 +50,7 @@ footer {
 }
 
 section {
-  min-height: 80vh;
+  min-height: 70vh;
   margin-bottom: 4rem;
 }
 
@@ -79,7 +79,7 @@ section {
   width: 50%;
 }
 
-@media (max-width: 480px) {
+@media (max-width: 680px) {
   .columns-1, .columns-2 { 
     flex-direction: column;
     align-items: center;
@@ -105,7 +105,7 @@ section {
   margin: 0 -1rem;
 
   .item {
-    width: 340px;
+    width: calc(50% - 2rem);
     margin: 0 1rem 2rem;
   }
 
@@ -127,13 +127,13 @@ section {
 }
 
 .s-disable {
-  @media (max-width: 480px) {
+  @media (max-width: 680px) {
     display: none;
   }
 }
 
 .l-disable {
-  @media (min-width: 481px) {
+  @media (min-width: 681px) {
     display: none;
   } 
 }
\ No newline at end of file

frontend/src/styles/_page-about.scss

 #colofon-items {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   .colofon-item {
     text-align: center;

frontend/src/styles/_sanitize.scss

@@ -563,4 +563,8 @@
  [aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
+ }
+
+ [role="button"]:focus {
+   outline: none;
  }
\ No newline at end of file

frontend/src/styles/_typography.scss

@@ -9,6 +9,16 @@ body {
   font-family: maax, sans-serif;
 }
 
+h1, h2, h3 {
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 h1 {
   font-size: 2rem;
   margin: 0 0 3rem 0;
@@ -61,11 +71,12 @@ a.back {
 
 a.button {
   display: inline-block;
-  padding: 0.4rem 0.8rem;
+  padding: 0.4rem 0.8rem 0.3rem;
   background-color: #2FB6BC;
   color: #FFF;
   text-decoration: none;
   border-radius: 3px;
+  line-height: 1.25rem;
 
   &:hover {
     background-color: darken(#2FB6BC, 5%)

frontend/src/templates/domain.js

@@ -42,6 +42,7 @@ export const query = graphql`
         id
         title
         description
+        link
         logo {
           childImageSharp {
             fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {