From 758ace1b9283875c3ada35e2ba3d5cb0b7f81735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20M=C3=B6rling?= <jcamorling@gmail.com>
Date: Fri, 22 May 2026 12:47:44 +0200
Subject: [PATCH] Redesign about page and move route to /om-oss.

- Replace placeholder about card with hero, prose, steps, and CTA
- Add primary route /om-oss with redirect from legacy /om
- Update footer tagline and Om oss link to match new URL
- Extend AboutPage and AppFooter tests for new content and routing

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/__tests__/AboutPage.spec.ts |  38 +++-
 frontend/src/__tests__/AppFooter.spec.ts |   8 +-
 frontend/src/components/AppFooter.vue    |   5 +-
 frontend/src/pages/AboutPage.vue         | 224 +++++++++++++++++++++--
 frontend/src/router/index.ts             |   6 +-
 5 files changed, 254 insertions(+), 27 deletions(-)

diff --git a/frontend/src/__tests__/AboutPage.spec.ts b/frontend/src/__tests__/AboutPage.spec.ts
index ac4ebd8..8563c1f 100644
--- a/frontend/src/__tests__/AboutPage.spec.ts
+++ b/frontend/src/__tests__/AboutPage.spec.ts
@@ -1,10 +1,44 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
 import AboutPage from '@/pages/AboutPage.vue'
 
+function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/om-oss', name: 'about', component: AboutPage },
+      { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
+    ],
+  })
+}
+
 describe('AboutPage', () => {
-  it('renders heading', () => {
-    const wrapper = mount(AboutPage)
+  it('renders heading and lead', () => {
+    const router = createTestRouter()
+    const wrapper = mount(AboutPage, {
+      global: { plugins: [router] },
+    })
     expect(wrapper.text()).toContain('Om Bilhej')
+    expect(wrapper.text()).toContain('Bilhej gör det enkelt')
+  })
+
+  it('renders how-it-works steps', () => {
+    const router = createTestRouter()
+    const wrapper = mount(AboutPage, {
+      global: { plugins: [router] },
+    })
+    expect(wrapper.text()).toContain('Skriv brevet här')
+    expect(wrapper.text()).toContain('Vi postar åt dig')
+  })
+
+  it('links to home page', () => {
+    const router = createTestRouter()
+    const wrapper = mount(AboutPage, {
+      global: { plugins: [router] },
+    })
+    const cta = wrapper.find('a.about__cta-btn')
+    expect(cta.exists()).toBe(true)
+    expect(cta.attributes('href')).toBe('/')
   })
 })
diff --git a/frontend/src/__tests__/AppFooter.spec.ts b/frontend/src/__tests__/AppFooter.spec.ts
index 42587d1..80f9b85 100644
--- a/frontend/src/__tests__/AppFooter.spec.ts
+++ b/frontend/src/__tests__/AppFooter.spec.ts
@@ -8,10 +8,14 @@ function createTestRouter() {
     history: createMemoryHistory(),
     routes: [
       {
-        path: '/om',
+        path: '/om-oss',
         name: 'about',
         component: { template: '<div>About</div>' },
       },
+      {
+        path: '/om',
+        redirect: '/om-oss',
+      },
       {
         path: '/kontakt',
         name: 'contact',
@@ -40,7 +44,7 @@ describe('AppFooter', () => {
     const links = wrapper.findAll('a')
 
     expect(links[0].text()).toBe('Om oss')
-    expect(links[0].attributes('href')).toBe('/om')
+    expect(links[0].attributes('href')).toBe('/om-oss')
 
     expect(links[1].text()).toBe('Kontakt')
     expect(links[1].attributes('href')).toBe('/kontakt')
diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index 0d11d4c..b83473f 100644
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -6,11 +6,10 @@ import { RouterLink } from 'vue-router'
   <footer class="app-footer">
     <div class="app-footer__inner">
       <p class="app-footer__tagline">
-        Bilhej hjälper dig att skicka brev till bilägare via
-        registreringsnummer.
+        Skriv brevet här. Vi postar det till rätt bilägare.
       </p>
       <nav class="app-footer__links">
-        <RouterLink to="/om" class="app-footer__link">Om oss</RouterLink>
+        <RouterLink to="/om-oss" class="app-footer__link">Om oss</RouterLink>
         <RouterLink to="/kontakt" class="app-footer__link">Kontakt</RouterLink>
         <RouterLink to="/integritetspolicy" class="app-footer__link"
           >Integritetspolicy</RouterLink
diff --git a/frontend/src/pages/AboutPage.vue b/frontend/src/pages/AboutPage.vue
index 8839ecb..034999c 100644
--- a/frontend/src/pages/AboutPage.vue
+++ b/frontend/src/pages/AboutPage.vue
@@ -1,39 +1,225 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+const highlights = [
+  {
+    title: 'Skriv brevet här',
+    description:
+      'Välj mall eller skriv fritt. Du ser hela brevet innan du betalar 49 kr via Swish.',
+  },
+  {
+    title: 'Registreringsnummer räcker',
+    description:
+      'Du behöver inte veta vem som äger bilen eller var personen bor. Vi kopplar brevet till rätt mottagare.',
+  },
+  {
+    title: 'Vi postar åt dig',
+    description:
+      'Efter betalning hanterar vi utskick manuellt. Du följer status i Mina beställningar och får spårning när brevet skickats.',
+  },
+]
+</script>
 
 <template>
-  <div class="page">
-    <div class="page__card">
-      <h1>Om Bilhej</h1>
-      <p>
-        Bilhej är en tjänst som låter dig skicka fysiska brev till fordonsägare
-        via registreringsnummer.
+  <div class="about">
+    <section class="about__hero">
+      <p class="about__eyebrow">Om oss</p>
+      <h1 class="about__title">Om Bilhej</h1>
+      <p class="about__lead">
+        Bilhej gör det enkelt att nå en bilägare med ett fysiskt brev. Du
+        skriver meddelandet, vi sköter utskick och post.
       </p>
-    </div>
+    </section>
+
+    <section class="about__section">
+      <h2 class="about__section-title">Vad vi gör</h2>
+      <div class="about__prose">
+        <p>
+          Många situationer i trafiken eller på parkeringen är enklare att lösa
+          med ett kort, respektfullt brev än med lapp i vindrutan eller
+          konfrontation på plats. Bilhej är till för det.
+        </p>
+        <p>
+          Du anger registreringsnummer, skriver vad du vill säga och betalar.
+          Därefter ser vi till att brevet når rätt person med vanlig post. Du
+          behöver inte hantera adress eller jaga upp ägaren själv.
+        </p>
+        <p>
+          Tjänsten passar till exempel köpförfrågan, tips om något på bilen,
+          vänlig feedback efter trafik eller ett meddelande du formulerar helt
+          själv.
+        </p>
+      </div>
+    </section>
+
+    <section class="about__section">
+      <h2 class="about__section-title">Så fungerar det</h2>
+      <div class="about__cards">
+        <article
+          v-for="(item, index) in highlights"
+          :key="item.title"
+          class="about__card"
+        >
+          <span class="about__card-step">Steg {{ index + 1 }}</span>
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.description }}</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="about__section about__section--cta">
+      <div class="about__cta-box">
+        <h2 class="about__cta-title">Redo att skriva?</h2>
+        <p class="about__cta-text">
+          Börja med registreringsnumret på startsidan. Det tar bara några
+          minuter att skriva och betala.
+        </p>
+        <RouterLink to="/" class="btn btn--primary about__cta-btn">
+          Till startsidan
+        </RouterLink>
+      </div>
+    </section>
   </div>
 </template>
 
 <style scoped>
-.page {
-  max-width: 36rem;
-  margin: var(--space-3xl) auto 0;
-  padding: 0 var(--space-lg);
+.about {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: var(--space-3xl) var(--space-lg) var(--space-3xl);
 }
 
-.page__card {
+.about__hero {
+  margin-bottom: var(--space-2xl);
+  padding: var(--space-2xl);
+  background: linear-gradient(
+    145deg,
+    var(--color-surface) 0%,
+    #f8faff 55%,
+    var(--color-paper) 100%
+  );
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+}
+
+.about__eyebrow {
+  display: inline-block;
+  margin: 0 0 var(--space-md) 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-primary-dark);
+  background: var(--color-primary-soft);
+  border: 1px solid #bfdbfe;
+  padding: 0.35rem 0.75rem;
+  border-radius: var(--radius-full);
+}
+
+.about__title {
+  margin: 0 0 var(--space-md) 0;
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--color-ink);
+}
+
+.about__lead {
+  margin: 0;
+  font-size: 1.0625rem;
+  line-height: 1.75;
+  color: var(--color-muted);
+}
+
+.about__section {
+  margin-bottom: var(--space-2xl);
+}
+
+.about__section-title {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-ink);
+}
+
+.about__prose p {
+  margin: 0 0 var(--space-md) 0;
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  color: var(--color-muted);
+}
+
+.about__prose p:last-child {
+  margin-bottom: 0;
+}
+
+.about__cards {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.about__card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
-  padding: var(--space-xl);
+  padding: var(--space-lg);
   box-shadow: var(--shadow-card);
 }
 
-h1 {
-  margin: 0 0 var(--space-md) 0;
-  font-size: 1.5rem;
+.about__card-step {
+  display: inline-flex;
+  margin-bottom: var(--space-sm);
+  padding: 0.2rem 0.65rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-primary-dark);
+  background: var(--color-primary-soft);
+  border: 1px solid #bfdbfe;
+  border-radius: var(--radius-full);
 }
 
-p {
+.about__card h3 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1rem;
+  color: var(--color-ink);
+}
+
+.about__card p {
   margin: 0;
-  line-height: 1.7;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: var(--color-muted);
+}
+
+.about__cta-box {
+  padding: var(--space-xl);
+  text-align: center;
+  background: linear-gradient(
+    135deg,
+    var(--color-primary-soft) 0%,
+    #eef2ff 100%
+  );
+  border: 1px solid #bfdbfe;
+  border-radius: var(--radius-xl);
+}
+
+.about__cta-title {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.25rem;
+  color: var(--color-primary-dark);
+}
+
+.about__cta-text {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: var(--color-primary-dark);
+}
+
+.about__cta-btn {
+  display: inline-flex;
 }
 </style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 6ef68a6..86fa1d2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -84,10 +84,14 @@ const router = createRouter({
       meta: { guestOnly: true },
     },
     {
-      path: '/om',
+      path: '/om-oss',
       name: 'about',
       component: AboutPage,
     },
+    {
+      path: '/om',
+      redirect: '/om-oss',
+    },
     {
       path: '/kontakt',
       name: 'contact',