From 7ca1110e156aa38bccb35e3364a8e6f643c7d549 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 5 Jan 2024 17:04:19 +0100
Subject: [PATCH 01/15] Add signals demo

---
 src/main.tsx                                  |  2 +
 .../signalen/components/FormNavigation.tsx    | 10 ++++
 src/sites/signalen/components/SiteFooter.tsx  | 44 ++++++++++++++
 src/sites/signalen/components/SiteHeader.tsx  | 10 ++++
 src/sites/signalen/components/signalen.css    | 10 ++++
 src/sites/signalen/constants.ts               |  3 +
 src/sites/signalen/pages/Add.tsx              | 36 +++++++++++
 src/sites/signalen/pages/Contact.tsx          | 45 ++++++++++++++
 src/sites/signalen/pages/Describe.tsx         | 40 +++++++++++++
 src/sites/signalen/pages/SignalenRootPage.tsx | 17 ++++++
 src/sites/signalen/pages/Summary.tsx          | 60 +++++++++++++++++++
 src/sites/signalen/pages/Thanks.tsx           | 23 +++++++
 src/sites/signalen/routes.tsx                 | 36 +++++++++++
 13 files changed, 336 insertions(+)
 create mode 100644 src/sites/signalen/components/FormNavigation.tsx
 create mode 100644 src/sites/signalen/components/SiteFooter.tsx
 create mode 100644 src/sites/signalen/components/SiteHeader.tsx
 create mode 100644 src/sites/signalen/components/signalen.css
 create mode 100644 src/sites/signalen/constants.ts
 create mode 100644 src/sites/signalen/pages/Add.tsx
 create mode 100644 src/sites/signalen/pages/Contact.tsx
 create mode 100644 src/sites/signalen/pages/Describe.tsx
 create mode 100644 src/sites/signalen/pages/SignalenRootPage.tsx
 create mode 100644 src/sites/signalen/pages/Summary.tsx
 create mode 100644 src/sites/signalen/pages/Thanks.tsx
 create mode 100644 src/sites/signalen/routes.tsx

diff --git a/src/main.tsx b/src/main.tsx
index 2f897dc..8e2fe6c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,7 @@ import { RootPage } from './shared/pages/RootPage'
 
 import { routes as amopisRoutes } from './sites/amopis/routes'
 import { routes as amsterdamRoutes } from './sites/amsterdam/routes'
+import { routes as signalenRoutes } from './sites/signalen/routes'
 
 import '@amsterdam/design-system-tokens/dist/root.css'
 import '@amsterdam/design-system-assets/font/index.css'
@@ -21,6 +22,7 @@ const router = createBrowserRouter([
   },
   amopisRoutes,
   amsterdamRoutes,
+  signalenRoutes,
 ])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/sites/signalen/components/FormNavigation.tsx b/src/sites/signalen/components/FormNavigation.tsx
new file mode 100644
index 0000000..81be649
--- /dev/null
+++ b/src/sites/signalen/components/FormNavigation.tsx
@@ -0,0 +1,10 @@
+import { Button } from '@amsterdam/design-system-react'
+
+const FormNavigation = ({ firstPage, lastPage }: { firstPage?: boolean; lastPage?: boolean }) => (
+  <div className="signalen-form-navigation">
+    {!firstPage && <Button variant="tertiary">Vorige</Button>}
+    <Button type="submit">{lastPage ? 'Versturen' : 'Volgende'}</Button>
+  </div>
+)
+
+export default FormNavigation
diff --git a/src/sites/signalen/components/SiteFooter.tsx b/src/sites/signalen/components/SiteFooter.tsx
new file mode 100644
index 0000000..5b17d5b
--- /dev/null
+++ b/src/sites/signalen/components/SiteFooter.tsx
@@ -0,0 +1,44 @@
+import { Footer, Grid, Heading, Link, PageMenu, Paragraph, VisuallyHidden } from '@amsterdam/design-system-react'
+
+export const SiteFooter = () => (
+  <Footer>
+    <Footer.Top>
+      <VisuallyHidden>
+        <Heading>Colofon</Heading>
+      </VisuallyHidden>
+      <Grid gapVertical="large" paddingVertical="medium">
+        <Grid.Cell span={3}>
+          <div style={{ display: 'grid' }} className="amsterdam-gap-xs">
+            <Heading level={2} size="level-4" inverseColor>
+              Contact
+            </Heading>
+            <Paragraph size="small" inverseColor>
+              Lukt het niet om een melding te doen? Bel het telefoonnummer{' '}
+              <Link href="tel:+3114020" onBackground="dark" variant="inline">
+                14 020
+              </Link>
+              .
+            </Paragraph>
+            <Paragraph size="small" inverseColor>
+              Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00 uur.
+            </Paragraph>
+          </div>
+        </Grid.Cell>
+      </Grid>
+    </Footer.Top>
+    <Footer.Bottom>
+      <VisuallyHidden>
+        <Heading level={2}>Over deze website</Heading>
+      </VisuallyHidden>
+      <Grid paddingVertical="small">
+        <Grid.Cell span="all">
+          <PageMenu>
+            <PageMenu.Link href="#">Over deze website</PageMenu.Link>
+            <PageMenu.Link href="#">Privacy</PageMenu.Link>
+            <PageMenu.Link href="#">Toegankelijkheid</PageMenu.Link>
+          </PageMenu>
+        </Grid.Cell>
+      </Grid>
+    </Footer.Bottom>
+  </Footer>
+)
diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
new file mode 100644
index 0000000..8367682
--- /dev/null
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -0,0 +1,10 @@
+import { Grid, Header } from '@amsterdam/design-system-react'
+import { siteUrl } from '../constants'
+
+export const SiteHeader = () => (
+  <Grid>
+    <Grid.Cell span="all">
+      <Header logoLink={siteUrl} logoLinkTitle="Naar de homepage van Signalen Amsterdam" />
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/components/signalen.css b/src/sites/signalen/components/signalen.css
new file mode 100644
index 0000000..e09da21
--- /dev/null
+++ b/src/sites/signalen/components/signalen.css
@@ -0,0 +1,10 @@
+.signalen-form-navigation {
+  display: flex;
+  gap: 1rem;
+  justify-content: end;
+}
+
+.signalen-summary-heading {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/sites/signalen/constants.ts b/src/sites/signalen/constants.ts
new file mode 100644
index 0000000..e3002bb
--- /dev/null
+++ b/src/sites/signalen/constants.ts
@@ -0,0 +1,3 @@
+import { rootUrl } from '../../shared/constants'
+
+export const siteUrl = `${rootUrl}signalen/`
diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
new file mode 100644
index 0000000..765e26a
--- /dev/null
+++ b/src/sites/signalen/pages/Add.tsx
@@ -0,0 +1,36 @@
+import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+
+export const Add = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>2. Locatie en vragen</Heading>
+
+        <fieldset>
+          <legend>Waar is het?</legend>
+          <Paragraph>KAART SELECTOR</Paragraph>
+        </fieldset>
+
+        <fieldset>
+          <legend>Wanneer was het?</legend>
+          <div>
+            <input type="radio" id="nu" name="when" value="nu" />
+            <label htmlFor="nu">Nu</label>
+          </div>
+          <div>
+            <input type="radio" id="eerder" name="when" value="eerder" />
+            <label htmlFor="eerder">Eerder</label>
+          </div>
+        </fieldset>
+
+        <div>
+          <FormLabel htmlFor="where">Waar komt het afval vandaan, denkt u? (niet verplicht)</FormLabel>
+          <textarea id="where" />
+        </div>
+
+        <FormNavigation />
+      </form>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
new file mode 100644
index 0000000..dc509b6
--- /dev/null
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -0,0 +1,45 @@
+import { Checkbox, FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+
+export const Contact = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>3. Contactgegevens</Heading>
+
+        <Paragraph size="large">Mogen we u bellen voor vragen? En op de hoogte houden via e-mail?</Paragraph>
+
+        <Paragraph>
+          Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets
+          uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u. Wij gebruiken uw telefoonnummer en
+          e-mailadres alléén voor deze melding.
+        </Paragraph>
+
+        <div>
+          <FormLabel htmlFor="phone">Wat is uw telefoonnummer?(niet verplicht)</FormLabel>
+          <input type="tel" id="phone" />
+        </div>
+
+        <div>
+          <FormLabel htmlFor="mail">Wat is uw e-mailadres?(niet verplicht)</FormLabel>
+          <input type="email" id="mail" />
+        </div>
+
+        <fieldset>
+          <legend>Mogen we uw melding doorsturen?</legend>
+          <Paragraph className="amsterdam-mb-md">
+            Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw
+            melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u dat
+            goed vindt.
+          </Paragraph>
+          <Checkbox>
+            Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als de
+            melding niet voor de gemeente is bestemd.
+          </Checkbox>
+        </fieldset>
+
+        <FormNavigation />
+      </form>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/pages/Describe.tsx b/src/sites/signalen/pages/Describe.tsx
new file mode 100644
index 0000000..5ccdfdd
--- /dev/null
+++ b/src/sites/signalen/pages/Describe.tsx
@@ -0,0 +1,40 @@
+import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+
+export const Describe = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>1. Beschrijf uw melding</Heading>
+        <Paragraph>
+          Voordat u een melding doet kunt u op de meldingenkaart zien welke meldingen bekend zijn bij de gemeente.
+        </Paragraph>
+
+        <div>
+          <FormLabel htmlFor="description">Waar gaat het om?</FormLabel>
+          <Paragraph size="small">
+            Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
+          </Paragraph>
+          <textarea id="description" />
+          <Paragraph size="small">8/1000 tekens</Paragraph>
+        </div>
+
+        <fieldset>
+          <legend>Foto's toevoegen (niet verplicht)</legend>
+          <Paragraph size="small">Voeg een foto toe om de situatie te verduidelijken</Paragraph>
+          <input
+            type="file"
+            id="fileUpload"
+            data-testid="file-input-upload"
+            accept="image/jpeg,image/jpg,image/png,image/gif"
+            name="images"
+            multiple
+            aria-label="Toevoegen foto"
+          />
+          <label htmlFor="fileUpload">Toevoegen foto</label>
+        </fieldset>
+        <FormNavigation firstPage />
+      </form>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/pages/SignalenRootPage.tsx b/src/sites/signalen/pages/SignalenRootPage.tsx
new file mode 100644
index 0000000..3ac3ead
--- /dev/null
+++ b/src/sites/signalen/pages/SignalenRootPage.tsx
@@ -0,0 +1,17 @@
+import { Screen } from '@amsterdam/design-system-react'
+import { Outlet } from 'react-router-dom'
+import { SiteFooter } from '../components/SiteFooter'
+import { SiteHeader } from '../components/SiteHeader'
+import '../components/signalen.css'
+
+export const SignalenRootPage = () => (
+  <>
+    <Screen maxWidth="wide">
+      <SiteHeader />
+      <main id="main">
+        <Outlet />
+      </main>
+      <SiteFooter />
+    </Screen>
+  </>
+)
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
new file mode 100644
index 0000000..38474e9
--- /dev/null
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -0,0 +1,60 @@
+import { Grid, Heading, Link, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+
+export const Summary = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>4. Versturen</Heading>
+
+        <Paragraph>Controleer uw gegevens en verstuur uw melding.</Paragraph>
+
+        <section>
+          <header className="signalen-summary-heading">
+            <Heading level={2} size="level-4">
+              1. Beschrijf uw melding
+            </Heading>
+            <Link variant="standalone">Wijzig uw melding</Link>
+          </header>
+          <dl>
+            <dt>Waar gaat het over?</dt>
+            <dd>afval</dd>
+          </dl>
+        </section>
+
+        <section>
+          <header className="signalen-summary-heading">
+            <Heading level={2} size="level-4">
+              2. Locatie en vragen
+            </Heading>
+            <Link variant="standalone">Wijzig locatie en vragen</Link>
+          </header>
+          <dl>
+            <dt>Waar is het?</dt>
+            <dd>Sumatrakade 17, 1019BJ Amsterdam</dd>
+            <dt>Wanneer was het?</dt>
+            <dd>Nu</dd>
+          </dl>
+        </section>
+
+        <section>
+          <header className="signalen-summary-heading">
+            <Heading level={2} size="level-4">
+              3. Contactgegevens
+            </Heading>
+            <Link variant="standalone">Wijzig contactgegevens</Link>
+          </header>
+          <dl>
+            <dt>Melding delen</dt>
+            <dd>
+              Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als
+              de melding niet voor de gemeente is bestemd.
+            </dd>
+          </dl>
+        </section>
+
+        <FormNavigation lastPage />
+      </form>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/pages/Thanks.tsx b/src/sites/signalen/pages/Thanks.tsx
new file mode 100644
index 0000000..17f9775
--- /dev/null
+++ b/src/sites/signalen/pages/Thanks.tsx
@@ -0,0 +1,23 @@
+import { Grid, Heading, Link, Paragraph } from '@amsterdam/design-system-react'
+
+export const Thanks = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <div style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>Bedankt!</Heading>
+        <Paragraph>
+          Uw melding is bij ons bekend onder nummer: SIG-14022. Hebt u een e-mailadres ingevuld? Dan ontvangt u een
+          e-mail met alle gegevens van uw melding.
+        </Paragraph>
+
+        <Heading level={2}>Wat doen we met uw melding?</Heading>
+        <Paragraph>
+          We laten u binnen 3 werkdagen weten wat we hebben gedaan. En anders hoort u wanneer wij uw melding kunnen
+          oppakken. We houden u op de hoogte via e-mail.
+        </Paragraph>
+
+        <Link>Doe een melding</Link>
+      </div>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/routes.tsx b/src/sites/signalen/routes.tsx
new file mode 100644
index 0000000..4780e59
--- /dev/null
+++ b/src/sites/signalen/routes.tsx
@@ -0,0 +1,36 @@
+import { ErrorPage } from '../../shared/pages/ErrorPage'
+import { siteUrl } from './constants.ts'
+import { Add } from './pages/Add.tsx'
+import { Contact } from './pages/Contact.tsx'
+import { Describe } from './pages/Describe.tsx'
+import { SignalenRootPage } from './pages/SignalenRootPage.tsx'
+import { Summary } from './pages/Summary.tsx'
+import { Thanks } from './pages/Thanks.tsx'
+
+export const routes = {
+  path: siteUrl,
+  element: <SignalenRootPage />,
+  errorElement: <ErrorPage />,
+  children: [
+    {
+      element: <Describe />,
+      path: `${siteUrl}beschrijf`,
+    },
+    {
+      element: <Add />,
+      path: `${siteUrl}vul-aan`,
+    },
+    {
+      element: <Contact />,
+      path: `${siteUrl}contact`,
+    },
+    {
+      element: <Summary />,
+      path: `${siteUrl}versturen`,
+    },
+    {
+      element: <Thanks />,
+      path: `${siteUrl}bedankt`,
+    },
+  ],
+}

From 23678337695b5a77d9b4658b5c968e848ce9f707 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 5 Jan 2024 17:10:59 +0100
Subject: [PATCH 02/15] Change footer cell

---
 src/sites/signalen/components/SiteFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sites/signalen/components/SiteFooter.tsx b/src/sites/signalen/components/SiteFooter.tsx
index 5b17d5b..673ee9a 100644
--- a/src/sites/signalen/components/SiteFooter.tsx
+++ b/src/sites/signalen/components/SiteFooter.tsx
@@ -7,7 +7,7 @@ export const SiteFooter = () => (
         <Heading>Colofon</Heading>
       </VisuallyHidden>
       <Grid gapVertical="large" paddingVertical="medium">
-        <Grid.Cell span={3}>
+        <Grid.Cell span={{ narrow: 3, medium: 4, wide: 4 }}>
           <div style={{ display: 'grid' }} className="amsterdam-gap-xs">
             <Heading level={2} size="level-4" inverseColor>
               Contact

From e6256d8ef847418005dcdfd5a18ffb6bc59092d0 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Thu, 11 Jan 2024 17:13:03 +0100
Subject: [PATCH 03/15] Add menu, return skiplink

---
 src/sites/signalen/components/SiteFooter.tsx  |  2 +-
 src/sites/signalen/components/SiteHeader.tsx  | 16 ++++++++++++++--
 src/sites/signalen/pages/SignalenRootPage.tsx | 16 +++++++---------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/sites/signalen/components/SiteFooter.tsx b/src/sites/signalen/components/SiteFooter.tsx
index 673ee9a..b27ffa7 100644
--- a/src/sites/signalen/components/SiteFooter.tsx
+++ b/src/sites/signalen/components/SiteFooter.tsx
@@ -33,7 +33,7 @@ export const SiteFooter = () => (
       <Grid paddingVertical="small">
         <Grid.Cell span="all">
           <PageMenu>
-            <PageMenu.Link href="#">Over deze website</PageMenu.Link>
+            <PageMenu.Link href="#">Over deze site</PageMenu.Link>
             <PageMenu.Link href="#">Privacy</PageMenu.Link>
             <PageMenu.Link href="#">Toegankelijkheid</PageMenu.Link>
           </PageMenu>
diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
index 8367682..0c27c1b 100644
--- a/src/sites/signalen/components/SiteHeader.tsx
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -1,10 +1,22 @@
-import { Grid, Header } from '@amsterdam/design-system-react'
+import { Grid, Header, PageMenu, SkipLink } from '@amsterdam/design-system-react'
 import { siteUrl } from '../constants'
 
 export const SiteHeader = () => (
   <Grid>
     <Grid.Cell span="all">
-      <Header logoLink={siteUrl} logoLinkTitle="Naar de homepage van Signalen Amsterdam" />
+      <SkipLink href="#main">Direct naar inhoud</SkipLink>
+      <Header
+        logoLink={siteUrl}
+        logoLinkTitle="Naar de homepage van Signalen Amsterdam"
+        links={
+          <PageMenu alignEnd>
+            {/* TODO: hier react router link voor gebruiken */}
+            <PageMenu.Link href="/design-system-prototypes/signalen/beschrijf">Doe een melding</PageMenu.Link>
+            <PageMenu.Link href="#">Meldingenkaart</PageMenu.Link>
+            <PageMenu.Link href="#">Mijn meldingen</PageMenu.Link>
+          </PageMenu>
+        }
+      />
     </Grid.Cell>
   </Grid>
 )
diff --git a/src/sites/signalen/pages/SignalenRootPage.tsx b/src/sites/signalen/pages/SignalenRootPage.tsx
index 3ac3ead..41c0a01 100644
--- a/src/sites/signalen/pages/SignalenRootPage.tsx
+++ b/src/sites/signalen/pages/SignalenRootPage.tsx
@@ -5,13 +5,11 @@ import { SiteHeader } from '../components/SiteHeader'
 import '../components/signalen.css'
 
 export const SignalenRootPage = () => (
-  <>
-    <Screen maxWidth="wide">
-      <SiteHeader />
-      <main id="main">
-        <Outlet />
-      </main>
-      <SiteFooter />
-    </Screen>
-  </>
+  <Screen maxWidth="wide">
+    <SiteHeader />
+    <main id="main">
+      <Outlet />
+    </main>
+    <SiteFooter />
+  </Screen>
 )

From 4bbf8d72bd1cd0e1de9d4181bd5b46fd65c140de Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Thu, 11 Jan 2024 17:32:03 +0100
Subject: [PATCH 04/15] Align with current v2 design

---
 src/sites/signalen/components/FormNavigation.tsx | 10 ++++++++--
 src/sites/signalen/components/signalen.css       |  7 ++++++-
 src/sites/signalen/pages/Add.tsx                 |  4 +++-
 src/sites/signalen/pages/Contact.tsx             |  4 +++-
 src/sites/signalen/pages/Describe.tsx            | 13 +++++--------
 src/sites/signalen/pages/Summary.tsx             |  4 +++-
 src/sites/signalen/pages/Thanks.tsx              |  6 ++++--
 7 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/sites/signalen/components/FormNavigation.tsx b/src/sites/signalen/components/FormNavigation.tsx
index 81be649..dbcbbdd 100644
--- a/src/sites/signalen/components/FormNavigation.tsx
+++ b/src/sites/signalen/components/FormNavigation.tsx
@@ -1,8 +1,14 @@
-import { Button } from '@amsterdam/design-system-react'
+import { Button, Icon } from '@amsterdam/design-system-react'
+import { ChevronLeftIcon } from '@amsterdam/design-system-react-icons'
 
 const FormNavigation = ({ firstPage, lastPage }: { firstPage?: boolean; lastPage?: boolean }) => (
   <div className="signalen-form-navigation">
-    {!firstPage && <Button variant="tertiary">Vorige</Button>}
+    {!firstPage && (
+      <Button variant="tertiary">
+        <Icon svg={ChevronLeftIcon} size="level-6" />
+        Vorige
+      </Button>
+    )}
     <Button type="submit">{lastPage ? 'Versturen' : 'Volgende'}</Button>
   </div>
 )
diff --git a/src/sites/signalen/components/signalen.css b/src/sites/signalen/components/signalen.css
index e09da21..3d66128 100644
--- a/src/sites/signalen/components/signalen.css
+++ b/src/sites/signalen/components/signalen.css
@@ -1,10 +1,15 @@
 .signalen-form-navigation {
   display: flex;
   gap: 1rem;
-  justify-content: end;
+  justify-content: space-between;
 }
 
 .signalen-summary-heading {
   display: flex;
   justify-content: space-between;
 }
+
+/* TODO: should we set this gap default in the Button component? */
+.amsterdam-button.amsterdam-button {
+  gap: 0.5rem;
+}
diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
index 765e26a..785064d 100644
--- a/src/sites/signalen/pages/Add.tsx
+++ b/src/sites/signalen/pages/Add.tsx
@@ -5,7 +5,9 @@ export const Add = () => (
   <Grid paddingBottom="medium">
     <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>2. Locatie en vragen</Heading>
+        <Heading>Doe een melding</Heading>
+
+        <Heading level={2}>Locatie en vragen</Heading>
 
         <fieldset>
           <legend>Waar is het?</legend>
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
index dc509b6..1f615b4 100644
--- a/src/sites/signalen/pages/Contact.tsx
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -5,7 +5,9 @@ export const Contact = () => (
   <Grid paddingBottom="medium">
     <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>3. Contactgegevens</Heading>
+        <Heading>Doe een melding</Heading>
+
+        <Heading level={2}>Contactgegevens</Heading>
 
         <Paragraph size="large">Mogen we u bellen voor vragen? En op de hoogte houden via e-mail?</Paragraph>
 
diff --git a/src/sites/signalen/pages/Describe.tsx b/src/sites/signalen/pages/Describe.tsx
index 5ccdfdd..94fa28e 100644
--- a/src/sites/signalen/pages/Describe.tsx
+++ b/src/sites/signalen/pages/Describe.tsx
@@ -3,18 +3,15 @@ import FormNavigation from '../components/FormNavigation'
 
 export const Describe = () => (
   <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>1. Beschrijf uw melding</Heading>
-        <Paragraph>
-          Voordat u een melding doet kunt u op de meldingenkaart zien welke meldingen bekend zijn bij de gemeente.
-        </Paragraph>
+        <Heading>Doe een melding</Heading>
+
+        <Heading level={2}>Beschrijf uw melding</Heading>
 
         <div>
           <FormLabel htmlFor="description">Waar gaat het om?</FormLabel>
-          <Paragraph size="small">
-            Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
-          </Paragraph>
+          <Paragraph size="small">Typ geen persoonsgegevens in deze omschrijving, dit wordt apart gevraagd</Paragraph>
           <textarea id="description" />
           <Paragraph size="small">8/1000 tekens</Paragraph>
         </div>
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
index 38474e9..046501c 100644
--- a/src/sites/signalen/pages/Summary.tsx
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -5,7 +5,9 @@ export const Summary = () => (
   <Grid paddingBottom="medium">
     <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>4. Versturen</Heading>
+        <Heading>Doe een melding</Heading>
+
+        <Heading level={2}>Versturen</Heading>
 
         <Paragraph>Controleer uw gegevens en verstuur uw melding.</Paragraph>
 
diff --git a/src/sites/signalen/pages/Thanks.tsx b/src/sites/signalen/pages/Thanks.tsx
index 17f9775..3e195ed 100644
--- a/src/sites/signalen/pages/Thanks.tsx
+++ b/src/sites/signalen/pages/Thanks.tsx
@@ -12,10 +12,12 @@ export const Thanks = () => (
 
         <Heading level={2}>Wat doen we met uw melding?</Heading>
         <Paragraph>
-          We laten u binnen 3 werkdagen weten wat we hebben gedaan. En anders hoort u wanneer wij uw melding kunnen
-          oppakken. We houden u op de hoogte via e-mail.
+          U hoort binnen 3 werkdagen wat we met uw melding hebben gedaan. Dringende meldingen pakken wij zo snel
+          mogelijk op.
         </Paragraph>
 
+        <Heading level={2}>Wilt u nog een andere melding doen?</Heading>
+
         <Link>Doe een melding</Link>
       </div>
     </Grid.Cell>

From a61aa223ff9bdf641afd871ff2a5cc8d521cc5f3 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Thu, 11 Jan 2024 17:46:15 +0100
Subject: [PATCH 05/15] Use react router for nav

---
 src/shared/components/Link.tsx               | 41 ++++++++++++++++++++
 src/sites/signalen/components/SiteHeader.tsx |  4 +-
 src/sites/signalen/pages/Thanks.tsx          |  6 ++-
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/components/Link.tsx

diff --git a/src/shared/components/Link.tsx b/src/shared/components/Link.tsx
new file mode 100644
index 0000000..56eeb8e
--- /dev/null
+++ b/src/shared/components/Link.tsx
@@ -0,0 +1,41 @@
+import type { LinkProps as LinkComponentProps } from '@amsterdam/design-system-react'
+import { Link as LinkComponent } from '@amsterdam/design-system-react'
+import { ForwardedRef, forwardRef, HTMLAttributeAnchorTarget, MouseEvent, PropsWithChildren } from 'react'
+import { useHref, useLinkClickHandler } from 'react-router-dom'
+
+// TODO: we should fix this. Also, we should export LinkProps with PropsWithChildren
+export interface LinkProps extends LinkComponentProps {
+  to: string
+  target?: HTMLAttributeAnchorTarget
+  replace?: boolean
+  state?: unknown
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+}
+
+export const Link = forwardRef(
+  (
+    { children, onClick, replace = false, state, target, to, ...rest }: PropsWithChildren<LinkProps>,
+    ref: ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    const href = useHref(to)
+    const handleClick = useLinkClickHandler(to, { replace, state, target })
+
+    return (
+      <LinkComponent
+        {...rest}
+        href={href}
+        onClick={(event) => {
+          window.scrollTo(0, 0)
+          onClick?.(event)
+          if (!event.defaultPrevented) {
+            handleClick(event)
+          }
+        }}
+        ref={ref}
+        target={target}
+      >
+        {children}
+      </LinkComponent>
+    )
+  },
+)
diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
index 0c27c1b..ea56642 100644
--- a/src/sites/signalen/components/SiteHeader.tsx
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -1,5 +1,6 @@
 import { Grid, Header, PageMenu, SkipLink } from '@amsterdam/design-system-react'
 import { siteUrl } from '../constants'
+import { PageMenuLink } from '../../../shared/components/PageMenuLink'
 
 export const SiteHeader = () => (
   <Grid>
@@ -10,8 +11,7 @@ export const SiteHeader = () => (
         logoLinkTitle="Naar de homepage van Signalen Amsterdam"
         links={
           <PageMenu alignEnd>
-            {/* TODO: hier react router link voor gebruiken */}
-            <PageMenu.Link href="/design-system-prototypes/signalen/beschrijf">Doe een melding</PageMenu.Link>
+            <PageMenuLink to={`${siteUrl}beschrijf`}>Doe een melding</PageMenuLink>
             <PageMenu.Link href="#">Meldingenkaart</PageMenu.Link>
             <PageMenu.Link href="#">Mijn meldingen</PageMenu.Link>
           </PageMenu>
diff --git a/src/sites/signalen/pages/Thanks.tsx b/src/sites/signalen/pages/Thanks.tsx
index 3e195ed..64d0200 100644
--- a/src/sites/signalen/pages/Thanks.tsx
+++ b/src/sites/signalen/pages/Thanks.tsx
@@ -1,4 +1,6 @@
-import { Grid, Heading, Link, Paragraph } from '@amsterdam/design-system-react'
+import { Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { Link } from '../../../shared/components/Link'
+import { siteUrl } from '../constants'
 
 export const Thanks = () => (
   <Grid paddingBottom="medium">
@@ -18,7 +20,7 @@ export const Thanks = () => (
 
         <Heading level={2}>Wilt u nog een andere melding doen?</Heading>
 
-        <Link>Doe een melding</Link>
+        <Link to={`${siteUrl}beschrijf`}>Doe een melding</Link>
       </div>
     </Grid.Cell>
   </Grid>

From 9eb06053dbfd5a37bfa0bfb6e3dc1461ad5f517e Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Thu, 11 Jan 2024 17:47:43 +0100
Subject: [PATCH 06/15] Start content on correct column

---
 src/sites/signalen/pages/Add.tsx     | 2 +-
 src/sites/signalen/pages/Contact.tsx | 2 +-
 src/sites/signalen/pages/Summary.tsx | 2 +-
 src/sites/signalen/pages/Thanks.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
index 785064d..ffdef17 100644
--- a/src/sites/signalen/pages/Add.tsx
+++ b/src/sites/signalen/pages/Add.tsx
@@ -3,7 +3,7 @@ import FormNavigation from '../components/FormNavigation'
 
 export const Add = () => (
   <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
         <Heading>Doe een melding</Heading>
 
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
index 1f615b4..505c102 100644
--- a/src/sites/signalen/pages/Contact.tsx
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -3,7 +3,7 @@ import FormNavigation from '../components/FormNavigation'
 
 export const Contact = () => (
   <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
         <Heading>Doe een melding</Heading>
 
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
index 046501c..74cdbc3 100644
--- a/src/sites/signalen/pages/Summary.tsx
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -3,7 +3,7 @@ import FormNavigation from '../components/FormNavigation'
 
 export const Summary = () => (
   <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
       <form style={{ display: 'grid' }} className="amsterdam-gap-md">
         <Heading>Doe een melding</Heading>
 
diff --git a/src/sites/signalen/pages/Thanks.tsx b/src/sites/signalen/pages/Thanks.tsx
index 64d0200..0028aa4 100644
--- a/src/sites/signalen/pages/Thanks.tsx
+++ b/src/sites/signalen/pages/Thanks.tsx
@@ -4,7 +4,7 @@ import { siteUrl } from '../constants'
 
 export const Thanks = () => (
   <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
       <div style={{ display: 'grid' }} className="amsterdam-gap-md">
         <Heading>Bedankt!</Heading>
         <Paragraph>

From 6ce6a9deb7c2728bafbde0d6ce8b1f47ec51670f Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 12 Jan 2024 15:45:25 +0100
Subject: [PATCH 07/15] Include Signalen in list on homepage

---
 src/shared/pages/RootPage.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/shared/pages/RootPage.tsx b/src/shared/pages/RootPage.tsx
index 93adca6..69f2c6b 100644
--- a/src/shared/pages/RootPage.tsx
+++ b/src/shared/pages/RootPage.tsx
@@ -1,6 +1,7 @@
 import { Grid, Heading, Link, PageHeading, Screen, UnorderedList } from '@amsterdam/design-system-react'
 import { siteUrl as amopisSiteUrl } from '../../sites/amopis/constants'
 import { siteUrl as amsterdamSiteUrl } from '../../sites/amsterdam/constants'
+import { siteUrl as signalenSiteUrl } from '../../sites/signalen/constants'
 
 type Site = {
   label: string
@@ -16,6 +17,10 @@ const sites: Site[] = [
     label: 'Amopis',
     href: amopisSiteUrl,
   },
+  {
+    label: 'Signalen',
+    href: `${signalenSiteUrl}beschrijf`,
+  },
 ]
 
 export const RootPage = () => (

From d8553591ea3e4746692accff3cba0f0817424afd Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 12 Jan 2024 16:32:56 +0100
Subject: [PATCH 08/15] Fix link on logo

---
 src/sites/signalen/components/SiteHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
index ea56642..c616f6a 100644
--- a/src/sites/signalen/components/SiteHeader.tsx
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -7,7 +7,7 @@ export const SiteHeader = () => (
     <Grid.Cell span="all">
       <SkipLink href="#main">Direct naar inhoud</SkipLink>
       <Header
-        logoLink={siteUrl}
+        logoLink={`${siteUrl}beschrijf`}
         logoLinkTitle="Naar de homepage van Signalen Amsterdam"
         links={
           <PageMenu alignEnd>

From b448fd19b79337a49eb341999b8b1104739aa5e1 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 12 Jan 2024 17:07:56 +0100
Subject: [PATCH 09/15] Add entry to index, fix type

---
 src/shared/components/Link.tsx | 4 ++--
 src/shared/pages/RootPage.tsx  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Link.tsx b/src/shared/components/Link.tsx
index 56eeb8e..57df2fc 100644
--- a/src/shared/components/Link.tsx
+++ b/src/shared/components/Link.tsx
@@ -3,8 +3,8 @@ import { Link as LinkComponent } from '@amsterdam/design-system-react'
 import { ForwardedRef, forwardRef, HTMLAttributeAnchorTarget, MouseEvent, PropsWithChildren } from 'react'
 import { useHref, useLinkClickHandler } from 'react-router-dom'
 
-// TODO: we should fix this. Also, we should export LinkProps with PropsWithChildren
-export interface LinkProps extends LinkComponentProps {
+// TODO: We should export LinkProps with PropsWithChildren
+type LinkProps = LinkComponentProps & {
   to: string
   target?: HTMLAttributeAnchorTarget
   replace?: boolean
diff --git a/src/shared/pages/RootPage.tsx b/src/shared/pages/RootPage.tsx
index 93adca6..69f2c6b 100644
--- a/src/shared/pages/RootPage.tsx
+++ b/src/shared/pages/RootPage.tsx
@@ -1,6 +1,7 @@
 import { Grid, Heading, Link, PageHeading, Screen, UnorderedList } from '@amsterdam/design-system-react'
 import { siteUrl as amopisSiteUrl } from '../../sites/amopis/constants'
 import { siteUrl as amsterdamSiteUrl } from '../../sites/amsterdam/constants'
+import { siteUrl as signalenSiteUrl } from '../../sites/signalen/constants'
 
 type Site = {
   label: string
@@ -16,6 +17,10 @@ const sites: Site[] = [
     label: 'Amopis',
     href: amopisSiteUrl,
   },
+  {
+    label: 'Signalen',
+    href: `${signalenSiteUrl}beschrijf`,
+  },
 ]
 
 export const RootPage = () => (

From e6a6d627ce3c1ed1a0c0edddb1c01c0be175e112 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 12 Jan 2024 17:09:56 +0100
Subject: [PATCH 10/15] Fix logo link

---
 src/sites/signalen/components/SiteHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
index ea56642..c616f6a 100644
--- a/src/sites/signalen/components/SiteHeader.tsx
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -7,7 +7,7 @@ export const SiteHeader = () => (
     <Grid.Cell span="all">
       <SkipLink href="#main">Direct naar inhoud</SkipLink>
       <Header
-        logoLink={siteUrl}
+        logoLink={`${siteUrl}beschrijf`}
         logoLinkTitle="Naar de homepage van Signalen Amsterdam"
         links={
           <PageMenu alignEnd>

From 40d0a47c02f373f66312e52118d4e44831ee04a4 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 12 Jan 2024 17:31:54 +0100
Subject: [PATCH 11/15] Add onSubmit navigation

---
 src/sites/signalen/pages/Add.tsx      |  73 ++++++++------
 src/sites/signalen/pages/Contact.tsx  |  99 ++++++++++---------
 src/sites/signalen/pages/Describe.tsx |  75 +++++++++------
 src/sites/signalen/pages/Summary.tsx  | 131 ++++++++++++++------------
 4 files changed, 215 insertions(+), 163 deletions(-)

diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
index ffdef17..2e956cb 100644
--- a/src/sites/signalen/pages/Add.tsx
+++ b/src/sites/signalen/pages/Add.tsx
@@ -1,38 +1,51 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
 import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
 
-export const Add = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
-      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>Doe een melding</Heading>
+export const Add = () => {
+  const navigate = useNavigate()
 
-        <Heading level={2}>Locatie en vragen</Heading>
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
 
-        <fieldset>
-          <legend>Waar is het?</legend>
-          <Paragraph>KAART SELECTOR</Paragraph>
-        </fieldset>
+    navigate(`${siteUrl}contact`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Locatie en vragen</Heading>
+
+          <fieldset>
+            <legend>Waar is het?</legend>
+            <Paragraph>KAART SELECTOR</Paragraph>
+          </fieldset>
+
+          <fieldset>
+            <legend>Wanneer was het?</legend>
+            <div>
+              <input type="radio" id="nu" name="when" value="nu" />
+              <label htmlFor="nu">Nu</label>
+            </div>
+            <div>
+              <input type="radio" id="eerder" name="when" value="eerder" />
+              <label htmlFor="eerder">Eerder</label>
+            </div>
+          </fieldset>
 
-        <fieldset>
-          <legend>Wanneer was het?</legend>
-          <div>
-            <input type="radio" id="nu" name="when" value="nu" />
-            <label htmlFor="nu">Nu</label>
-          </div>
           <div>
-            <input type="radio" id="eerder" name="when" value="eerder" />
-            <label htmlFor="eerder">Eerder</label>
+            <FormLabel htmlFor="where">Waar komt het afval vandaan, denkt u? (niet verplicht)</FormLabel>
+            <textarea id="where" />
           </div>
-        </fieldset>
-
-        <div>
-          <FormLabel htmlFor="where">Waar komt het afval vandaan, denkt u? (niet verplicht)</FormLabel>
-          <textarea id="where" />
-        </div>
-
-        <FormNavigation />
-      </form>
-    </Grid.Cell>
-  </Grid>
-)
+
+          <FormNavigation />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
index 505c102..5273e07 100644
--- a/src/sites/signalen/pages/Contact.tsx
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -1,47 +1,60 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Checkbox, FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
 import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
 
-export const Contact = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
-      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>Doe een melding</Heading>
-
-        <Heading level={2}>Contactgegevens</Heading>
-
-        <Paragraph size="large">Mogen we u bellen voor vragen? En op de hoogte houden via e-mail?</Paragraph>
-
-        <Paragraph>
-          Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets
-          uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u. Wij gebruiken uw telefoonnummer en
-          e-mailadres alléén voor deze melding.
-        </Paragraph>
-
-        <div>
-          <FormLabel htmlFor="phone">Wat is uw telefoonnummer?(niet verplicht)</FormLabel>
-          <input type="tel" id="phone" />
-        </div>
-
-        <div>
-          <FormLabel htmlFor="mail">Wat is uw e-mailadres?(niet verplicht)</FormLabel>
-          <input type="email" id="mail" />
-        </div>
-
-        <fieldset>
-          <legend>Mogen we uw melding doorsturen?</legend>
-          <Paragraph className="amsterdam-mb-md">
-            Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw
-            melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u dat
-            goed vindt.
+export const Contact = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}versturen`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Contactgegevens</Heading>
+
+          <Paragraph size="large">Mogen we u bellen voor vragen? En op de hoogte houden via e-mail?</Paragraph>
+
+          <Paragraph>
+            Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets
+            uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u. Wij gebruiken uw telefoonnummer en
+            e-mailadres alléén voor deze melding.
           </Paragraph>
-          <Checkbox>
-            Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als de
-            melding niet voor de gemeente is bestemd.
-          </Checkbox>
-        </fieldset>
-
-        <FormNavigation />
-      </form>
-    </Grid.Cell>
-  </Grid>
-)
+
+          <div>
+            <FormLabel htmlFor="phone">Wat is uw telefoonnummer?(niet verplicht)</FormLabel>
+            <input type="tel" id="phone" />
+          </div>
+
+          <div>
+            <FormLabel htmlFor="mail">Wat is uw e-mailadres?(niet verplicht)</FormLabel>
+            <input type="email" id="mail" />
+          </div>
+
+          <fieldset>
+            <legend>Mogen we uw melding doorsturen?</legend>
+            <Paragraph className="amsterdam-mb-md">
+              Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw
+              melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u
+              dat goed vindt.
+            </Paragraph>
+            <Checkbox>
+              Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als
+              de melding niet voor de gemeente is bestemd.
+            </Checkbox>
+          </fieldset>
+
+          <FormNavigation />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Describe.tsx b/src/sites/signalen/pages/Describe.tsx
index 94fa28e..e0f2f2f 100644
--- a/src/sites/signalen/pages/Describe.tsx
+++ b/src/sites/signalen/pages/Describe.tsx
@@ -1,37 +1,50 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
 import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
 
-export const Describe = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
-      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>Doe een melding</Heading>
+export const Describe = () => {
+  const navigate = useNavigate()
 
-        <Heading level={2}>Beschrijf uw melding</Heading>
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
 
-        <div>
-          <FormLabel htmlFor="description">Waar gaat het om?</FormLabel>
-          <Paragraph size="small">Typ geen persoonsgegevens in deze omschrijving, dit wordt apart gevraagd</Paragraph>
-          <textarea id="description" />
-          <Paragraph size="small">8/1000 tekens</Paragraph>
-        </div>
+    navigate(`${siteUrl}vul-aan`)
+  }
 
-        <fieldset>
-          <legend>Foto's toevoegen (niet verplicht)</legend>
-          <Paragraph size="small">Voeg een foto toe om de situatie te verduidelijken</Paragraph>
-          <input
-            type="file"
-            id="fileUpload"
-            data-testid="file-input-upload"
-            accept="image/jpeg,image/jpg,image/png,image/gif"
-            name="images"
-            multiple
-            aria-label="Toevoegen foto"
-          />
-          <label htmlFor="fileUpload">Toevoegen foto</label>
-        </fieldset>
-        <FormNavigation firstPage />
-      </form>
-    </Grid.Cell>
-  </Grid>
-)
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Beschrijf uw melding</Heading>
+
+          <div>
+            <FormLabel htmlFor="description">Waar gaat het om?</FormLabel>
+            <Paragraph size="small">Typ geen persoonsgegevens in deze omschrijving, dit wordt apart gevraagd</Paragraph>
+            <textarea id="description" />
+            <Paragraph size="small">8/1000 tekens</Paragraph>
+          </div>
+
+          <fieldset>
+            <legend>Foto's toevoegen (niet verplicht)</legend>
+            <Paragraph size="small">Voeg een foto toe om de situatie te verduidelijken</Paragraph>
+            <input
+              type="file"
+              id="fileUpload"
+              data-testid="file-input-upload"
+              accept="image/jpeg,image/jpg,image/png,image/gif"
+              name="images"
+              multiple
+              aria-label="Toevoegen foto"
+            />
+            <label htmlFor="fileUpload">Toevoegen foto</label>
+          </fieldset>
+          <FormNavigation firstPage />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
index 74cdbc3..27b0472 100644
--- a/src/sites/signalen/pages/Summary.tsx
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -1,62 +1,75 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Grid, Heading, Link, Paragraph } from '@amsterdam/design-system-react'
 import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
 
-export const Summary = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
-      <form style={{ display: 'grid' }} className="amsterdam-gap-md">
-        <Heading>Doe een melding</Heading>
-
-        <Heading level={2}>Versturen</Heading>
-
-        <Paragraph>Controleer uw gegevens en verstuur uw melding.</Paragraph>
-
-        <section>
-          <header className="signalen-summary-heading">
-            <Heading level={2} size="level-4">
-              1. Beschrijf uw melding
-            </Heading>
-            <Link variant="standalone">Wijzig uw melding</Link>
-          </header>
-          <dl>
-            <dt>Waar gaat het over?</dt>
-            <dd>afval</dd>
-          </dl>
-        </section>
-
-        <section>
-          <header className="signalen-summary-heading">
-            <Heading level={2} size="level-4">
-              2. Locatie en vragen
-            </Heading>
-            <Link variant="standalone">Wijzig locatie en vragen</Link>
-          </header>
-          <dl>
-            <dt>Waar is het?</dt>
-            <dd>Sumatrakade 17, 1019BJ Amsterdam</dd>
-            <dt>Wanneer was het?</dt>
-            <dd>Nu</dd>
-          </dl>
-        </section>
-
-        <section>
-          <header className="signalen-summary-heading">
-            <Heading level={2} size="level-4">
-              3. Contactgegevens
-            </Heading>
-            <Link variant="standalone">Wijzig contactgegevens</Link>
-          </header>
-          <dl>
-            <dt>Melding delen</dt>
-            <dd>
-              Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als
-              de melding niet voor de gemeente is bestemd.
-            </dd>
-          </dl>
-        </section>
-
-        <FormNavigation lastPage />
-      </form>
-    </Grid.Cell>
-  </Grid>
-)
+export const Summary = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}bedankt`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Versturen</Heading>
+
+          <Paragraph>Controleer uw gegevens en verstuur uw melding.</Paragraph>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                1. Beschrijf uw melding
+              </Heading>
+              <Link variant="standalone">Wijzig uw melding</Link>
+            </header>
+            <dl>
+              <dt>Waar gaat het over?</dt>
+              <dd>afval</dd>
+            </dl>
+          </section>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                2. Locatie en vragen
+              </Heading>
+              <Link variant="standalone">Wijzig locatie en vragen</Link>
+            </header>
+            <dl>
+              <dt>Waar is het?</dt>
+              <dd>Sumatrakade 17, 1019BJ Amsterdam</dd>
+              <dt>Wanneer was het?</dt>
+              <dd>Nu</dd>
+            </dl>
+          </section>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                3. Contactgegevens
+              </Heading>
+              <Link variant="standalone">Wijzig contactgegevens</Link>
+            </header>
+            <dl>
+              <dt>Melding delen</dt>
+              <dd>
+                Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties
+                als de melding niet voor de gemeente is bestemd.
+              </dd>
+            </dl>
+          </section>
+
+          <FormNavigation lastPage />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}

From 88c2bd8777b7dc23c9a409907d9f983d8503b465 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 12 Jan 2024 17:46:28 +0100
Subject: [PATCH 12/15] Replace back button with back link

---
 .../signalen/components/FormNavigation.tsx    | 21 ++++++++++++-------
 src/sites/signalen/components/signalen.css    |  6 +++---
 src/sites/signalen/pages/Add.tsx              |  2 +-
 src/sites/signalen/pages/Contact.tsx          |  2 +-
 src/sites/signalen/pages/Summary.tsx          |  2 +-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/sites/signalen/components/FormNavigation.tsx b/src/sites/signalen/components/FormNavigation.tsx
index dbcbbdd..0face9d 100644
--- a/src/sites/signalen/components/FormNavigation.tsx
+++ b/src/sites/signalen/components/FormNavigation.tsx
@@ -1,13 +1,20 @@
-import { Button, Icon } from '@amsterdam/design-system-react'
-import { ChevronLeftIcon } from '@amsterdam/design-system-react-icons'
+import { Button } from '@amsterdam/design-system-react'
+import { Link } from '../../../shared/components/Link'
 
-const FormNavigation = ({ firstPage, lastPage }: { firstPage?: boolean; lastPage?: boolean }) => (
+const FormNavigation = ({
+  firstPage,
+  lastPage,
+  backlinkUrl,
+}: {
+  firstPage?: boolean
+  lastPage?: boolean
+  backlinkUrl?: string
+}) => (
   <div className="signalen-form-navigation">
-    {!firstPage && (
-      <Button variant="tertiary">
-        <Icon svg={ChevronLeftIcon} size="level-6" />
+    {!firstPage && backlinkUrl && (
+      <Link to={backlinkUrl} variant="inList">
         Vorige
-      </Button>
+      </Link>
     )}
     <Button type="submit">{lastPage ? 'Versturen' : 'Volgende'}</Button>
   </div>
diff --git a/src/sites/signalen/components/signalen.css b/src/sites/signalen/components/signalen.css
index 3d66128..409fde5 100644
--- a/src/sites/signalen/components/signalen.css
+++ b/src/sites/signalen/components/signalen.css
@@ -1,4 +1,5 @@
 .signalen-form-navigation {
+  align-items: center;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
@@ -9,7 +10,6 @@
   justify-content: space-between;
 }
 
-/* TODO: should we set this gap default in the Button component? */
-.amsterdam-button.amsterdam-button {
-  gap: 0.5rem;
+.amsterdam-link.amsterdam-link svg {
+  transform: rotate(180deg);
 }
diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
index 2e956cb..a7ee791 100644
--- a/src/sites/signalen/pages/Add.tsx
+++ b/src/sites/signalen/pages/Add.tsx
@@ -43,7 +43,7 @@ export const Add = () => {
             <textarea id="where" />
           </div>
 
-          <FormNavigation />
+          <FormNavigation backlinkUrl={`${siteUrl}beschrijf`} />
         </form>
       </Grid.Cell>
     </Grid>
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
index 5273e07..4aac319 100644
--- a/src/sites/signalen/pages/Contact.tsx
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -52,7 +52,7 @@ export const Contact = () => {
             </Checkbox>
           </fieldset>
 
-          <FormNavigation />
+          <FormNavigation backlinkUrl={`${siteUrl}vul-aan`} />
         </form>
       </Grid.Cell>
     </Grid>
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
index 27b0472..606e304 100644
--- a/src/sites/signalen/pages/Summary.tsx
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -67,7 +67,7 @@ export const Summary = () => {
             </dl>
           </section>
 
-          <FormNavigation lastPage />
+          <FormNavigation backlinkUrl={`${siteUrl}contact`} lastPage />
         </form>
       </Grid.Cell>
     </Grid>

From 55764cf06f558157fc907eba45ede4a645cf45d7 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Tue, 16 Jan 2024 11:44:42 +0100
Subject: [PATCH 13/15] Update src/shared/components/Link.tsx

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 src/shared/components/Link.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/Link.tsx b/src/shared/components/Link.tsx
index 57df2fc..45437ed 100644
--- a/src/shared/components/Link.tsx
+++ b/src/shared/components/Link.tsx
@@ -14,6 +14,7 @@ type LinkProps = LinkComponentProps & {
 
 export const Link = forwardRef(
   (
+    // TODO: Remove `PropsWithChildren` when using @amsterdam/design-system-react ^0.4.0
     { children, onClick, replace = false, state, target, to, ...rest }: PropsWithChildren<LinkProps>,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => {

From c819ddb6fe5e30cc0ab0ea516167c180c999ba68 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Tue, 16 Jan 2024 11:45:57 +0100
Subject: [PATCH 14/15] Remove fixed TODO comment

---
 src/shared/components/Link.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/shared/components/Link.tsx b/src/shared/components/Link.tsx
index 45437ed..43eeeb9 100644
--- a/src/shared/components/Link.tsx
+++ b/src/shared/components/Link.tsx
@@ -3,7 +3,6 @@ import { Link as LinkComponent } from '@amsterdam/design-system-react'
 import { ForwardedRef, forwardRef, HTMLAttributeAnchorTarget, MouseEvent, PropsWithChildren } from 'react'
 import { useHref, useLinkClickHandler } from 'react-router-dom'
 
-// TODO: We should export LinkProps with PropsWithChildren
 type LinkProps = LinkComponentProps & {
   to: string
   target?: HTMLAttributeAnchorTarget

From 2a8fd631367dcf3aed89ca2e1e5f6ac912ea2608 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Tue, 16 Jan 2024 11:51:27 +0100
Subject: [PATCH 15/15] Use signalen scoped class instead of generic one

---
 src/sites/signalen/components/FormNavigation.tsx | 2 +-
 src/sites/signalen/components/signalen.css       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sites/signalen/components/FormNavigation.tsx b/src/sites/signalen/components/FormNavigation.tsx
index 0face9d..563c054 100644
--- a/src/sites/signalen/components/FormNavigation.tsx
+++ b/src/sites/signalen/components/FormNavigation.tsx
@@ -12,7 +12,7 @@ const FormNavigation = ({
 }) => (
   <div className="signalen-form-navigation">
     {!firstPage && backlinkUrl && (
-      <Link to={backlinkUrl} variant="inList">
+      <Link to={backlinkUrl} variant="inList" className="signalen-back-link">
         Vorige
       </Link>
     )}
diff --git a/src/sites/signalen/components/signalen.css b/src/sites/signalen/components/signalen.css
index 409fde5..e935152 100644
--- a/src/sites/signalen/components/signalen.css
+++ b/src/sites/signalen/components/signalen.css
@@ -10,6 +10,6 @@
   justify-content: space-between;
 }
 
-.amsterdam-link.amsterdam-link svg {
+.signalen-back-link svg {
   transform: rotate(180deg);
 }