About page (#11)

public/translations/cy.json

@@ -1,5 +1,21 @@
 {
   "start": {
     "title": "Dod o hyd i leoedd i ailgylchu."
+  },
+  "about": {
+    "title": "About this service",
+    "intro": "Powered by RecycleNow.com, this tool can be used to search and find recycling locations throughout the United Kingdom.",
+    "becomeAPartner": {
+      "title": "Add this tool to your website",
+      "description": "It’s been created as an embeddable widget that can be added to any website to help visitors discover more recycling options. For example, a beverage manufacturer could use the tool to show places to recycle drinks cans.",
+      "cta": "Become a partner",
+      "url": "https://wrap.org.uk/taking-action/citizen-behaviour-change/recycle-now/recycling-locator-tool"
+    },
+    "feedback": {
+      "title": "Improving this service",
+      "description": "We’re always looking to improve this tool and would be interested to hear about your experience whilst using it, good or bad.",
+      "cta": "Feedback on this tool",
+      "url": "https://wrapcymru.org.uk/contact-wrap-cymru"
+    }
   }
 }

public/translations/en.json

@@ -1,5 +1,21 @@
 {
   "start": {
     "title": "Find places to recycle."
+  },
+  "about": {
+    "title": "About this service",
+    "intro": "Powered by RecycleNow.com, this tool can be used to search and find recycling locations throughout the United Kingdom.",
+    "becomeAPartner": {
+      "title": "Add this tool to your website",
+      "description": "It’s been created as an embeddable widget that can be added to any website to help visitors discover more recycling options. For example, a beverage manufacturer could use the tool to show places to recycle drinks cans.",
+      "cta": "Become a partner",
+      "url": "https://wrap.org.uk/taking-action/citizen-behaviour-change/recycle-now/recycling-locator-tool"
+    },
+    "feedback": {
+      "title": "Improving this service",
+      "description": "We’re always looking to improve this tool and would be interested to hear about your experience whilst using it, good or bad.",
+      "cta": "Feedback on this tool",
+      "url": "https://wrap.org.uk/contact-us"
+    }
   }
 }

src/components/Header/Header.css

@@ -0,0 +1,7 @@
+locator-header {
+  align-items: center;
+  display: flex;
+  gap: var(--diamond-spacing);
+  justify-content: space-between;
+  padding: var(--diamond-spacing-sm) var(--diamond-spacing);
+}

src/components/Header/Header.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/preact';
+
+import './Header';
+
+const meta: Meta = {
+  title: 'Components/Header',
+};
+
+export default meta;
+
+export const Header: StoryObj = {
+  render: () => (
+    <locator-header>
+      <div style="border:1px solid black">Flex header</div>
+      <div style="border:1px solid black">With gap</div>
+    </locator-header>
+  ),
+};

src/components/Header/Header.tsx

@@ -0,0 +1,9 @@
+import { CustomElement } from '../../types/custom-element';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'locator-header': CustomElement;
+    }
+  }
+}

src/components/Icon/Icon.tsx

@@ -7,7 +7,7 @@ import { CustomElement } from '../../types/custom-element';
 import BlankSvg from './svg/blank.svg?react';
 
 export interface IconAttributes {
-  readonly icon: 'pin';
+  readonly icon: 'pin' | 'info' | 'close';
   readonly color?: 'primary';
   readonly label?: string;
 }
@@ -22,7 +22,7 @@ export default function Icon({ icon, label }: IconAttributes) {
   );
 }
 
-register(Icon, 'locator-icon');
+register(Icon, 'locator-icon', ['icon']);
 
 declare module 'preact' {
   namespace JSX {

src/components/Layout/Layout.css

@@ -26,6 +26,7 @@ locator-layout {
 
   &::part(main) {
     grid-area: main;
+    overflow: auto;
   }
 
   &::part(aside) {

src/pages/Entrypoint.tsx

@@ -9,12 +9,17 @@ import {
 import { i18nInit } from '../lib/i18n';
 import { Locale } from '../types/locale';
 
-import NotFound from './404.js';
-import StartPage from './Start.js';
+import NotFound from './404';
+import AboutPage from './Start/About';
+import StartLayout from './Start/Layout';
+import StartPage from './Start/Start';
 
 const router = createMemoryRouter(
   createRoutesFromElements(
-    <Route path="/" element={<StartPage />} errorElement={NotFound} />,
+    <Route element={<StartLayout />} errorElement={NotFound}>
+      <Route path="/" element={<StartPage />} />
+      <Route path="/about" element={<AboutPage />} />
+    </Route>,
   ),
 );
 

src/pages/Start/About.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+
+export default function AboutPage() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <h2>{t('about.title')}</h2>
+      <p>{t('about.intro')}</p>
+      <h3 className="diamond-spacing-top-md">
+        {t('about.becomeAPartner.title')}
+      </h3>
+      <p>{t('about.becomeAPartner.description')}</p>
+      <diamond-button width="full-width">
+        <a
+          href={t('about.becomeAPartner.url')}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('about.becomeAPartner.cta')}
+        </a>
+      </diamond-button>
+      <h3 className="diamond-spacing-top-md">{t('about.feedback.title')}</h3>
+      <p>{t('about.feedback.description')}</p>
+      <diamond-button width="full-width">
+        <a
+          href={t('about.feedback.url')}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('about.feedback.cta')}
+        </a>
+      </diamond-button>
+    </>
+  );
+}

src/pages/Start/Layout.tsx

@@ -0,0 +1,50 @@
+import { Outlet, Link, useHref } from 'react-router-dom';
+
+import '../../components/Layout/Layout';
+import '../../components/Logo/Logo';
+import '../../components/Icon/Icon';
+import '../../components/Header/Header';
+import '../../components/Tip/Tip';
+import '../../components/Wrap/Wrap';
+
+function InfoButton({ open }: { readonly open: boolean }) {
+  const to = open ? '/' : '/about';
+  const icon = open ? 'close' : 'info';
+
+  return (
+    <diamond-button variant="text">
+      <Link to={to}>
+        <locator-icon icon={icon} color="primary"></locator-icon>
+      </Link>
+    </diamond-button>
+  );
+}
+
+export default function StartLayout() {
+  const path = useHref();
+
+  return (
+    <locator-layout>
+      <locator-header slot="header">
+        <locator-logo slot="header"></locator-logo>
+        <InfoButton open={path === '/about'} />
+      </locator-header>
+      <locator-wrap slot="main">
+        <diamond-section padding="lg">
+          <Outlet />
+        </diamond-section>
+      </locator-wrap>
+      <locator-tip slot="aside">
+        <locator-wrap>
+          <p>Use this service to:</p>
+          <ul>
+            <li>see your nearest places to recycle</li>
+            <li>find out how to recycle a specific item</li>
+            <li>check what you can recycle at home</li>
+          </ul>
+          <img src="/images/recycling-technology.webp" alt="" />
+        </locator-wrap>
+      </locator-tip>
+    </locator-layout>
+  );
+}

src/pages/Start/Start.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+
+import '../../components/LocationInput/LocationInput';
+
+export default function StartPage() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <h2>{t('start.title')}</h2>
+      <form>
+        <diamond-form-group class="diamond-spacing-bottom-md">
+          <label htmlFor="location-input">Where are you?</label>
+          <locator-location-input></locator-location-input>
+        </diamond-form-group>
+        <diamond-button width="full-width" variant="primary">
+          <button type="submit">Get started</button>
+        </diamond-button>
+      </form>
+    </>
+  );
+}

src/styles/tokens/button.css

@@ -1,18 +1,21 @@
 :host {
   --diamond-button-background: var(--color-white);
-  --diamond-button-background-hover: var(--diamond-button-background);
+  --diamond-button-background-hover: var(--theme-background-accent);
   --diamond-button-background-disabled: var(--diamond-button-background);
   --diamond-button-border-color: var(--color-green);
   --diamond-button-border-color-hover: var(--color-green-dark);
   --diamond-button-border-color-disabled: var(--color-green-light);
   --diamond-button-color: var(--diamond-button-border-color);
   --diamond-button-color-hover: var(--diamond-button-border-color-hover);
   --diamond-button-color-disabled: var(--diamond-button-border-color-disabled);
+  --diamond-button-padding-block: 0.75rem;
 
   --diamond-button-primary-background: var(--color-green);
   --diamond-button-primary-background-hover: var(--color-green-dark);
   --diamond-button-primary-background-disabled: var(--color-green-light);
   --diamond-button-primary-color: var(--color-white);
   --diamond-button-primary-color-hover: var(--diamond-button-primary-color);
   --diamond-button-primary-color-disabled: var(--diamond-button-primary-color);
+
+  --diamond-button-text-background-hover: var(--theme-background-accent);
 }

src/styles/tokens/font.css

@@ -5,7 +5,11 @@
     var(--font-family-default)
   );
 
-  @media (width >= 768px) {
+  --diamond-font-size-h3: 1.5rem;
+}
+
+@media (width >= 768px) {
+  :host {
     --diamond-font-size-h2: 1.75rem;
   }
 }