Add "why co-ops?" page

_includes/header.html

@@ -18,6 +18,7 @@
       <li><a href="/">Home</a></li>
       <li><a href="/join">Join us</a></li>
       <li><a href="/about">About</a></li>
+      <li><a href="/why_coops">Why co-ops</a></li>
     </ul>
   </div>
 

assets/css/app.css

@@ -215,6 +215,10 @@ section, footer, header {
   display: none;
 }
 
+.w-two-thirds {
+  width: 66%;
+}
+
 @media screen and (width > 480px) {
   .large-only {
     display: inline;

assets/img/dots.svg

@@ -0,0 +1,23 @@
+<svg width="283" height="358" viewBox="0 0 283 358" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1149 305.164H0V315.269H10.1149V305.164Z" fill="#38AAD5"/>
+<path d="M52.5446 305.164H42.4297V315.269H52.5446V305.164Z" fill="#38AAD5"/>
+<path d="M240.529 346.547H230.414V357.661H240.529V346.547Z" fill="#38AAD5"/>
+<path d="M240.529 283.977H230.414V295.091H240.529V283.977Z" fill="#38AAD5"/>
+<path d="M282.928 263.758H271.803V273.863H282.928V263.758Z" fill="#38AAD5"/>
+<path d="M261.709 221.375H251.594V231.48H261.709V221.375Z" fill="#38AAD5"/>
+<path d="M240.529 263.758H230.414V273.863H240.529V263.758Z" fill="#38AAD5"/>
+<path d="M261.709 305.164H251.594V315.269H261.709V305.164Z" fill="#38AAD5"/>
+<path d="M136.434 0H125.309V11.1144H136.434V0Z" fill="#38AAD5"/>
+<path d="M220.321 83.7852H209.195V94.8995H220.321V83.7852Z" fill="#38AAD5"/>
+<path d="M282.928 42.4141H271.803V52.519H282.928V42.4141Z" fill="#38AAD5"/>
+<path d="M52.5446 83.7852H42.4297V94.8995H52.5446V83.7852Z" fill="#38AAD5"/>
+<path d="M177.822 83.7852H167.707V94.8995H177.822V83.7852Z" fill="#38AAD5"/>
+<path d="M261.709 83.7852H251.594V94.8995H261.709V83.7852Z" fill="#38AAD5"/>
+<path d="M261.709 0H251.594V11.1144H261.709V0Z" fill="#38AAD5"/>
+<path d="M177.822 0H167.707V11.1144H177.822V0Z" fill="#38AAD5"/>
+<path d="M240.529 126.184H230.414V136.288H240.529V126.184Z" fill="#38AAD5"/>
+<path d="M240.529 63.6445H230.414V73.7494H240.529V63.6445Z" fill="#38AAD5"/>
+<path d="M199.039 63.6445H188.924V73.7494H199.039V63.6445Z" fill="#38AAD5"/>
+<path d="M240.529 42.4141H230.414V52.519H240.529V42.4141Z" fill="#38AAD5"/>
+<path d="M199.039 42.4141H188.924V52.519H199.039V42.4141Z" fill="#38AAD5"/>
+</svg>

why_coops.html

@@ -0,0 +1,79 @@
+---
+title: About
+layout: default
+---
+
+<section class="grid grid-uneven">
+  <div class="stack">
+    <h1>Why co-ops?</h1>
+
+    <p class="large">Co-operatives are businesses in many sectors and
+    in many sizes, but with one crucial difference: they are owned and
+    democratically controlled by their members. That means people in
+    the business, not external shareholders, set the direction and
+    share the value.</p>
+
+    <p>CoTech coops are worker-owned co-operatives, meaning that the members are the workers. So the people delivering the projects co-own and control the business together.</p>
+  </div>
+
+  <div>
+    <img class="rounded" src="assets/img/dots.svg" alt="" />
+  </div>
+</section>
+
+<section class="w-two-thirds">
+  <div class="box stack">
+    <p class="large">Cooperatives around the world are values-based
+    organisations, committed to the seven cooperative principles.</p>
+
+    <p class="intro">Learn more about the seven co-operative
+    principles directly from Co-operatives UK.</p>
+
+    <a class="btn" href="https://www.uk.coop/understanding-co-ops/what-co-op/co-op-values-and-principles">Co-op values and principles</a>
+  </div>
+</section>
+
+<section class="stack">
+  <h2>Advantages of working with our co-ops</h2>
+
+  <div class="grid grid-dense">
+    <div class="box stack">
+      <h3 class="title">Delivery over dividends</h3>
+      <p>Decisions are made to deliver good projects, not to maximise
+        shareholder profit.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">You work with the owners</h3>
+      <p>The people delivering your project have a direct stake in the outcome, so quality and long-term fit matter.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Budgets that go further</h3>
+      <p>With fewer hierarchies, we can be transparent about costs and are able to design work around your budget.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Ethical by design</h3>
+      <p>We’re mission-led and worker-owned so your spend supports people, inherently delivering social value.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Cutting edge, ethical tech</h3>
+      <p>We have proven success with open-source and ethical tech. We’ll help you explore alternative options alongside mainstream tools.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Long-term, user-centred relationships</h3>
+      <p>We prioritise customer service and user needs, so you don’t just get a launch, you get people-centered support.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Security and trust</h3>
+      <p>We prioritise data security and responsible use of technology.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">Collaborative, low lock-in</h3>
+      <p>We collaborate across co-ops, bringing in specialists for joint projects when you need them.</p>
+    </div>
+    <div class="box stack">
+      <h3 class="title">UK-based network of SMEs</h3>
+      <p>UK skills & communities with the responsiveness of small teams.</p>
+    </div>
+  </div>
+  <a class="btn" href="#">Hire our co-ops</a>
+</section>