From 319a2a21d13b982ce2fa82249ac1123284cf5a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Sat, 15 Nov 2025 19:04:30 +0200
Subject: [PATCH] About view

---
 src/App.vue             |   1 +
 src/views/AboutView.vue | 119 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0e8795f..4e94a36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -82,6 +82,7 @@ nav {
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
+  margin-bottom: 1rem;
 }
 
 nav a.router-link-exact-active {
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 756ad2a..25fd17a 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +1,130 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <div class="about-item">
+      <div class="details">
+        <h3>Tietoa</h3>
+        <p>
+          Livonsaaren Tietokonepaja vuonna 2024 perustettu kahden miehen projekti, jonka tehtävänä
+          on tarjota matalankynnyksen IT-tukea ja -palveluita Livonsaaren ja lähialueiden asukkaille
+          sekä yrityksille. Yrityksemme erikoistuu tietokoneiden huoltoon, ohjelmistojen
+          asennukseen, kotisivuratkaisuihin ja Linux-käyttöjärjestelmän tukeen.
+        </p>
+      </div>
+    </div>
+
+    <div class="about-item">
+      <div class="details">
+        <h3>Arvomme</h3>
+        <ul>
+          <li>
+            <strong>Ihmislähtöisyys:</strong> Laitteiden ja palveluiden tulee aina helpottaa
+            käyttäjiensä elämää. Ei vaikeuttaa sitä.
+          </li>
+          <li>
+            <strong>Hallinta:</strong> Käyttäjän tulee voida itse määritellä mitä laite tai
+            ohjelmisto tekee. Mikäli tämä ei ole mahdollista, se pitää olla vaihdettavissa toiseen.
+          </li>
+          <li>
+            <strong>Korjattavuus:</strong> Laitteiden tulee olla ylläpidettävissä ja korjattavissa
+            ilman kalliita työkaluja tai lisenssejä.
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="about-item">
+      <div class="details">
+        <h3>Visiomme</h3>
+        <p>
+          Nykypäivänä erilaiset vempeleet ja palvelut vievät valtavasti rahaa ja aikaamme huonolla
+          hyötysuhteella. Tämä johdosta tietokoneista onkin tullut monille kirosana. Me
+          Tietokonepajalla haluamme olla rakentamassa uudenlaista tulevaisuutta, jossa teknologia
+          palvelee käyttäjiään eikä päinvastoin. Vapaat ohjelmistot ja laitteiden kiertotalous
+          tarjoaakin halvan, hallittavan ja mielekkään vaihtoehdon nykymenolle. Tule siis rohkeasti
+          mukaan tekemään tietotekniikasta taas hauskaa ja hyödyllistä!
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
-<style>
+<style scoped>
+.about-item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.about-item:first-of-type {
+  margin-top: 0;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+p {
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+ul {
+  color: var(--color-text);
+  line-height: 1.6;
+  margin: 0.5rem 0;
+  padding-left: 1.2rem;
+}
+
+li {
+  margin-bottom: 0.8rem;
+}
+
 @media (min-width: 1024px) {
   .about {
     min-height: 100vh;
     display: flex;
     align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .about-item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  .about-item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .about-item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .about-item:first-of-type:before {
+    display: none;
+  }
+
+  .about-item:last-of-type:after {
+    display: none;
   }
 }
 </style>