bilhej/frontend/src/pages/AboutPage.vue

<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="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 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>
.about {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-3xl);
}

.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 0 var(--space-lg) 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-muted);
}

.about__prose {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.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-lg);
  box-shadow: var(--shadow-card);
}

.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);
}

.about__card h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 1rem;
  color: var(--color-ink);
}

.about__card p {
  margin: 0;
  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>