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>
This commit is contained in:
parent
139250b2ac
commit
758ace1b92
5 changed files with 254 additions and 27 deletions
|
|
@ -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('/')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="about__section">
|
||||
<h2 class="about__section-title">Vad vi gör</h2>
|
||||
<div class="about__prose">
|
||||
<p>
|
||||
Bilhej är en tjänst som låter dig skicka fysiska brev till fordonsägare
|
||||
via registreringsnummer.
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue