From 60cb07fc898a9d207e32561ecef40ad6999cc224 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:46 +0200
Subject: [PATCH] Redesign contact page with separate support and complaint
 channels.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace single placeholder mailto with two contact cards
- Show kontakt@bilhej.se for general questions and service issues
- Show jcamorling@gmail.com for complaints with clearer labeling
- Add tips section pointing users to Mina beställningar first
- Extend ContactPage tests for both email addresses

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/__tests__/ContactPage.spec.ts |  17 +-
 frontend/src/pages/ContactPage.vue         | 221 +++++++++++++++++++--
 2 files changed, 219 insertions(+), 19 deletions(-)

diff --git a/frontend/src/__tests__/ContactPage.spec.ts b/frontend/src/__tests__/ContactPage.spec.ts
index a317239..86f39f2 100644
--- a/frontend/src/__tests__/ContactPage.spec.ts
+++ b/frontend/src/__tests__/ContactPage.spec.ts
@@ -3,8 +3,23 @@ import { mount } from '@vue/test-utils'
 import ContactPage from '@/pages/ContactPage.vue'
 
 describe('ContactPage', () => {
-  it('renders heading', () => {
+  it('renders heading and lead', () => {
     const wrapper = mount(ContactPage)
     expect(wrapper.text()).toContain('Kontakta oss')
+    expect(wrapper.text()).toContain('klagomål')
+  })
+
+  it('renders general support email', () => {
+    const wrapper = mount(ContactPage)
+    const link = wrapper.find('a[href="mailto:kontakt@bilhej.se"]')
+    expect(link.exists()).toBe(true)
+    expect(link.text()).toBe('kontakt@bilhej.se')
+  })
+
+  it('renders complaints email', () => {
+    const wrapper = mount(ContactPage)
+    const link = wrapper.find('a[href="mailto:jcamorling@gmail.com"]')
+    expect(link.exists()).toBe(true)
+    expect(wrapper.text()).toContain('jcamorling@gmail.com')
   })
 })
diff --git a/frontend/src/pages/ContactPage.vue b/frontend/src/pages/ContactPage.vue
index 9029413..e3ba60e 100644
--- a/frontend/src/pages/ContactPage.vue
+++ b/frontend/src/pages/ContactPage.vue
@@ -1,25 +1,143 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const contactChannels = [
+  {
+    variant: 'general',
+    title: 'Frågor om tjänsten',
+    description:
+      'Beställningar, betalning, tekniska problem eller allmänna frågor om hur Bilhej fungerar.',
+    email: 'kontakt@bilhej.se',
+    label: 'Skicka e-post',
+  },
+  {
+    variant: 'complaints',
+    title: 'Klagomål och synpunkter',
+    description:
+      'Om något gått fel eller du vill lämna ett klagomål direkt till oss som driver tjänsten.',
+    email: 'jcamorling@gmail.com',
+    label: 'Skicka klagomål',
+  },
+]
+</script>
 
 <template>
-  <div class="page">
-    <div class="page__card">
-      <h1>Kontakta oss</h1>
-      <p>
-        Har du frågor eller feedback? Hör av dig till oss på
-        <a href="mailto:hej@bilhalsning.se">hej@bilhalsning.se</a>.
+  <div class="contact">
+    <section class="contact__hero">
+      <p class="contact__eyebrow">Kontakt</p>
+      <h1 class="contact__title">Kontakta oss</h1>
+      <p class="contact__lead">
+        Vi svarar så snart vi kan. Välj rätt adress beroende på om det gäller en
+        vanlig fråga eller ett klagomål.
       </p>
-    </div>
+    </section>
+
+    <section class="contact__section">
+      <div class="contact__cards">
+        <article
+          v-for="channel in contactChannels"
+          :key="channel.email"
+          class="contact__card"
+          :class="`contact__card--${channel.variant}`"
+        >
+          <h2>{{ channel.title }}</h2>
+          <p>{{ channel.description }}</p>
+          <a class="contact__email" :href="`mailto:${channel.email}`">
+            {{ channel.email }}
+          </a>
+          <a
+            class="btn btn--ghost contact__btn"
+            :href="`mailto:${channel.email}`"
+          >
+            {{ channel.label }}
+          </a>
+        </article>
+      </div>
+    </section>
+
+    <section class="contact__section">
+      <div class="contact__tips">
+        <h2 class="contact__tips-title">Innan du skriver</h2>
+        <ul class="contact__tips-list">
+          <li>
+            Har du en pågående beställning? Kontrollera
+            <strong>Mina beställningar</strong> först. Där ser du status och
+            spårning.
+          </li>
+          <li>
+            Vid klagomål, skriv gärna med beställnings-ID och
+            registreringsnummer så kan vi hitta ärendet snabbare.
+          </li>
+          <li>
+            Vi läser all e-post manuellt och återkommer när vi har tittat på
+            ditt ärende.
+          </li>
+        </ul>
+      </div>
+    </section>
   </div>
 </template>
 
 <style scoped>
-.page {
-  max-width: 36rem;
-  margin: var(--space-3xl) auto 0;
-  padding: 0 var(--space-lg);
+.contact {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: var(--space-3xl) var(--space-lg) var(--space-3xl);
 }
 
-.page__card {
+.contact__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);
+}
+
+.contact__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);
+}
+
+.contact__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);
+}
+
+.contact__lead {
+  margin: 0;
+  font-size: 1.0625rem;
+  line-height: 1.75;
+  color: var(--color-muted);
+}
+
+.contact__section {
+  margin-bottom: var(--space-2xl);
+}
+
+.contact__cards {
+  display: grid;
+  gap: var(--space-lg);
+}
+
+.contact__card {
+  position: relative;
+  overflow: hidden;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
@@ -27,13 +145,80 @@
   box-shadow: var(--shadow-card);
 }
 
-h1 {
-  margin: 0 0 var(--space-md) 0;
-  font-size: 1.5rem;
+.contact__card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--contact-accent);
 }
 
-p {
+.contact__card--general {
+  --contact-accent: linear-gradient(90deg, #1d4ed8, #60a5fa);
+}
+
+.contact__card--complaints {
+  --contact-accent: linear-gradient(90deg, #4338ca, #818cf8);
+}
+
+.contact__card h2 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.125rem;
+  color: var(--color-ink);
+}
+
+.contact__card p {
+  margin: 0 0 var(--space-md) 0;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: var(--color-muted);
+}
+
+.contact__email {
+  display: inline-block;
+  margin-bottom: var(--space-md);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  word-break: break-all;
+}
+
+.contact__email:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.contact__btn {
+  display: inline-flex;
+}
+
+.contact__tips {
+  padding: var(--space-xl);
+  background: var(--color-border-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+}
+
+.contact__tips-title {
+  margin: 0 0 var(--space-md) 0;
+  font-size: 1.0625rem;
+  color: var(--color-ink);
+}
+
+.contact__tips-list {
   margin: 0;
-  line-height: 1.7;
+  padding-left: 1.25rem;
+  color: var(--color-muted);
+}
+
+.contact__tips-list li + li {
+  margin-top: var(--space-sm);
+}
+
+.contact__tips-list li {
+  font-size: 0.9375rem;
+  line-height: 1.65;
 }
 </style>