About view

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 {

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>