ADD: Components

Teaser, Card

app/components/Section/SkillsEasy.vue

@@ -3,25 +3,13 @@
     <h2>Jetzt mal ganz konkret.</h2>
     <h3>In diesem Abschnitt ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
     <div class="skill-container flex-col margin-top gap-default">
-      <article class="skill-card z-2 card gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
-        <div class="image-container">
-          <img
-              loading="lazy"
-              width="550"
-              height="350"
-              :srcset="[skill.img('1x', true), skill.img('2x', true), skill.img('3x', true)].join(', ')"
-              :src="skill.img('1x', false)"
-              aria-hidden="true"
-              alt=""
-          />
-        </div>
-        <div class="text-container flex-col gap-default">
-          <h3>{{skill.title}}</h3>
-          <main class="flex-col gap-sm">
-            <RichText :elements="skill.text" />
-          </main>
-        </div>
-      </article>
+      <Teaser
+        v-for="(skill, skillIndex) in skills"
+        :title="skill.title"
+        :image="{ path: '/img/explanations/', name : skill.img, position: skillIndex % 2 ? 'right' : 'left'}"
+      >
+        <RichText :elements="skill.text" />
+      </Teaser>
     </div>
     <div class="bottom flex-col margin-top gap-default">
       <h3>Verwirkliche jetzt dein Webprojekt.</h3>
@@ -37,7 +25,7 @@
 import type { RichText } from '@/components/RichText/Types'
 
 type Skill = {
-  img: Function
+  img: string
   title: string
   text: RichText[]
 }
@@ -46,7 +34,7 @@ const getExplanationImage = (img : string) => getImage('/img/explanations/', img
 
 const skills : Skill[] = [
   {
-    img: getExplanationImage('components'),
+    img: 'components',
     title: 'Das, was du sehen kannst',
     text: [
       {
@@ -106,7 +94,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: getExplanationImage('cms'),
+    img: 'cms',
     title: 'Da, wo du eintragen kannst',
     text: [
       {
@@ -207,7 +195,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: getExplanationImage('result'),
+    img: 'result',
     title: 'Was dabei am Ende rauskommt',
     text: [
       {