Loyalty case study (#989)

* Start on the Loyalty case study

* Add forgotten snapshot because I don't know how to developer

* Adds images to nandos case study (unstyled)

* Adds nandos case study image stylings

* Adds nandos case study image stylings

* removes commented out sections
- Corrects apos escape char
- Corrects Nandos Loyalty components class name.

* Removes placeholder text

* Tweaks to article styles and content

* Tweaks plastic card and review image size

* Tweaks vertical padding on wide imags to be more consistent.
- Adds strong styling to list subheadings
- Corrects typo

* Various copy tweaks
- Adds alt text to images
- Adds social meta data

* Add slice to our work

* More copy tweaks

* copy tweaks

Co-authored-by: Simon Ashbery <[email protected]>

site/components/card/style.css

@@ -3,4 +3,5 @@
   background-color: #fff;
   padding: 20px;
   box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.09);
+  height: 100%;
 }

site/pages/our-work/__snapshots__/test.js.snap

@@ -29,10 +29,50 @@ Array [
       >
         <a
           class="content row-reverse"
-          href="/our-work/case-study/pagofx/"
+          href="/our-work/case-study/nandos-loyalty/"
         >
           <div
             class="rightCol"
+          >
+            <h2
+              class="header"
+            >
+              Enhancing Nando's loyalty programme: the UK's first digital rewards scheme
+            </h2>
+            <p
+              class="description"
+            >
+              A cross-functional team designed and built a UK first mobile NFC loyalty card and fundamentally changed the way customers engage with the brand across physical and digital channels.
+            </p>
+            <div
+              class="links"
+            >
+              <p
+                class="readmore"
+              >
+                Read more
+              </p>
+            </div>
+          </div>
+          <div
+            class="base"
+          >
+            <img
+              alt="iPhone showing Pago FX application "
+              src="loyalty.jpg"
+            />
+          </div>
+        </a>
+      </div>
+      <div
+        class="container"
+      >
+        <a
+          class="content row"
+          href="/our-work/case-study/pagofx/"
+        >
+          <div
+            class="leftCol"
           >
             <h2
               class="header"
@@ -68,11 +108,11 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="https://www.red-badger.com/sharethyme"
         >
           <div
-            class="leftCol"
+            class="rightCol"
           >
             <h2
               class="header"
@@ -108,11 +148,11 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/pride/"
         >
           <div
-            class="rightCol"
+            class="leftCol"
           >
             <h2
               class="header"
@@ -148,11 +188,11 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="/our-work/case-study/car-trawler/"
         >
           <div
-            class="leftCol"
+            class="rightCol"
           >
             <h2
               class="header"
@@ -188,11 +228,11 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/fidelity/"
         >
           <div
-            class="rightCol"
+            class="leftCol"
           >
             <h2
               class="header"
@@ -228,11 +268,11 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="/our-work/case-study/financial-services-digital-transformation/"
         >
           <div
-            class="leftCol"
+            class="rightCol"
           >
             <h2
               class="header"
@@ -268,11 +308,11 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/car-trawler-my-account/"
         >
           <div
-            class="rightCol"
+            class="leftCol"
           >
             <h2
               class="header"
@@ -308,11 +348,11 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="/our-work/case-study/retailer/"
         >
           <div
-            class="leftCol"
+            class="rightCol"
           >
             <h2
               class="header"
@@ -380,11 +420,11 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/camden-market/"
         >
           <div
-            class="rightCol"
+            class="leftCol"
           >
             <img
               alt=""
@@ -425,11 +465,11 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="/our-work/case-study/financial-times/"
         >
           <div
-            class="leftCol"
+            class="rightCol"
           >
             <img
               alt=""
@@ -470,11 +510,11 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/fortnum-and-mason/"
         >
           <div
-            class="rightCol"
+            class="leftCol"
           >
             <img
               alt=""
@@ -515,7 +555,7 @@ Array [
         class="container"
       >
         <a
-          class="content row"
+          class="content row-reverse"
           href="/our-work/case-study/fortnum-and-mason-digital-transformation/"
         >
           <div
@@ -552,7 +592,7 @@ Array [
         class="container"
       >
         <a
-          class="content row-reverse"
+          class="content row"
           href="/our-work/case-study/sky-cms/"
         >
           <div