Add a new homepage

nationalarchives · Oct 12, 2023 · 382202e · 382202e
1 parent d876380
commit 382202e
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 13 deletions.
diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk
@@ -17,7 +17,18 @@
   <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
 {% endblock %}
 
-{%- set htmlClasses = "tna-template--light-theme tna-template--yellow-accent" -%}
+{%- set htmlClasses = "tna-template--light-theme" -%}
+{% if group === "styles" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--pink-accent" -%}
+{% elseif group === "components" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--green-accent" -%}
+{% elseif group === "patterns" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--blue-accent" -%}
+{% elseif group === "content" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--orange-accent" -%}
+{% else %}
+  {%- set htmlClasses = htmlClasses + " tna-template--yellow-accent" -%}
+{% endif %}
 
 {% block pageTitle %}
   {{ title }} | The National Archives Design System

diff --git a/layouts/_example.njk b/layouts/_example.njk
@@ -6,7 +6,7 @@
   {% set exampleURL = "/design-system/" + params.group + "/" + params.item + "/" + params.example + "/index.html" %}
 
   <section class="tna-ds-component-example">
-    <a href="{{ exampleURL }}" target="_blank" class="tna-ds-component-example__link">Open this example in new tab</a>
+    <small><a href="{{ exampleURL }}" target="_blank" class="tna-ds-component-example__link">Open this example in new tab</a></small>
 
     <div class="tna-ds-component-example__frame-wrapper">
       <iframe title="{{ exampleTitle + " example" }}" class="tna-ds-component-example__frame tna-ds-component-example__frame--resizable{% if params.size %} tna-ds-component-example__frame--{{ params.size }}{% endif %}" src="{{ exampleURL }}" loading="lazy"></iframe>
@@ -18,19 +18,19 @@
     {% set tabItems = [] %}
     {% if params.html %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-html",
+        id: "example-" + params.example + "-html",
         title: "HTML",
         body: '<div class="tna-ds-component-example__code"><pre class="language-html"><code class="language-html">' + html + '</code></pre><div>'
       }) %}
     {% endif %}
     {% if params.nunjucks %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-nunjucks",
+        id: "example-" + params.example + "-nunjucks",
         title: "Nunjucks",
         body: '<div class="tna-ds-component-example__code"><pre class="language-javascript"><code class="language-javascript">' + nunjucks + '</code></pre><div>'
       }) %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-options",
+        id: "example-" + params.example + "-options",
         title: "Nunjucks options",
         body: exampleOptions(params)
       }) %}

diff --git a/layouts/homepage.njk b/layouts/homepage.njk
@@ -0,0 +1,111 @@
+{% extends "./_design-system-base.njk" %}
+
+{%- from "nationalarchives/components/button/macro.njk" import tnaButton -%}
+{%- from "nationalarchives/components/card/macro.njk" import tnaCard -%}
+{%- from "nationalarchives/components/hero/macro.njk" import tnaHero -%}
+
+{% block main %}
+  {{ tnaHero({
+    heading: "Design your service using National Archives styles, components and patterns",
+    body: "<p>Use this design system to make government services consistent with The National Archives. Learn from the research and experience of other service teams and avoid repeating work that has already been done.</p>" + tnaButton({ text: "Get started", href: "/design-system/get-started/", classes: "tna-button--large" }),
+    image: {
+      src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+      alt: "The front of The National Archives office in Kew",
+      width: 640,
+      height: 360
+    }
+  }) }}
+  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+    <div class="tna-section">
+      <div class="tna-container">
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Styles",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Make your service look part of The National Archives with guides for applying layout, typography, colour and images.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/9c193a/fff?text=Styles&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse styles",
+                href: "/design-system/styles/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Components",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Save time with reusable, accessible components for forms, navigation, panels, tables and more.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Components&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse components",
+                href: "/design-system/components/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Patterns",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Help users complete common tasks like entering names and addresses, filling in forms and creating accounts.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/004c7e/fff?text=Patterns&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse patterns",
+                href: "/design-system/patterns/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Content",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Write content in a consistent and understandable way that makes it easier for users to use your service.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/8f3415/fff?text=Content&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse content",
+                href: "/design-system/content/"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="tna-section">
+      <div class="tna-container">
+        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
+          {{ contents | safe }}
+        </div>
+      </div>
+    </div>
+
+
+  </main>
+  {% block afterContent %}{% endblock %}
+{% endblock %}
diff --git a/lib/index.scss b/lib/index.scss
@@ -176,10 +176,58 @@ $code-background: #f1ece9;
 
 p {
   code {
+    color: colour.brand-colour("maroon");
+
     background-color: $code-background;
   }
 }
 
+.tna-template__body {
+  > .tna-header + .tna-container {
+    flex: 1;
+  }
+}
+
+.tna-button {
+  &--large {
+    @include typography.relative-font-size(22);
+  }
+}
+
+.tna-hero {
+  &__image {
+    filter: grayscale(1) contrast(1.5) brightness(1.2);
+  }
+
+  &__inner {
+    z-index: 4;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+
+    content: "";
+  }
+
+  &::before {
+    z-index: 2;
+
+    background-color: #004c7e;
+
+    mix-blend-mode: screen;
+  }
+
+  &::after {
+    z-index: 3;
+
+    background-color: #fc0;
+
+    mix-blend-mode: multiply;
+  }
+}
+
 .app-example-page {
   min-height: auto;
   padding: 2rem;

diff --git a/src/index.md b/src/index.md
@@ -1,16 +1,12 @@
 ---
-layout: simple.njk
+layout: homepage.njk
 title: Welcome
 description: Designing services for The National Archives
 order: 1
 ---
 
-# Welcome to The National Archives Design System
+## Principles we follow
 
-Hello
+The National Archives Design System helps teams that work on National Archive services follow the [Government Design Principles](https://www.gov.uk/guidance/government-design-principles) and [GOV.UK Service Manual](https://www.gov.uk/service-manual).
 
-- alpha
-- beta
-
-1. alpha
-1. beta
+This website also follows the [style guide](https://www.gov.uk/guidance/style-guide) and [content design guidance](https://www.gov.uk/guidance/content-design) used by GOV.UK.