ADD: projects

components/Services/Services.vue

@@ -4,8 +4,8 @@
   <section id="services" class="Services content">
     <h2>Services.</h2>
     <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
-    <p class="margin-top">Hinter meinen Angeboten gibt es keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
-      aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> verstehen.</p>
+    <p class="margin-top">Hinter meinen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
+      Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19% Umsatzsteuer verstehen.</p>
     <div class="service-list margin-top default-gap">
       <article v-for="service in services" class="z-2 card flex-col default-gap">
         <h3 class="flex-col default-gap">
@@ -21,15 +21,20 @@
             <span>{{point}}</span>
           </li>
         </ul>
-        <div class="extra flex-col">
-          <small v-for="extra in service.extra">* {{ extra }}</small>
-        </div>
       </article>
     </div>
     <h3 class="margin-top-big">Mein Netzwerk</h3>
     <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
-    <div class="network-list">
-
+    <div class="network-list margin-top">
+      <article v-for="person in network" class="flex-col">
+        <img :src="person.img" :alt="`Bild von ${person.name}`" />
+        <h3>{{person.name}}</h3>
+        <main>
+          <span v-for="tag in person.tags">{{tag}}</span>
+        </main>
+        <p>{{person.flavour}}</p>
+        <Button :href="person.link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
+      </article>
     </div>
   </section>
 </template>
@@ -40,7 +45,7 @@ import check from 'iconoir/icons/regular/double-check.svg'
 const services = [
   {
     title: 'Bug Research',
-    price: '149 € / Einmalig',
+    price: '99 € / Einmalig',
     availability: 'Frei',
     smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
     button: 'Jetzt untersuchen lassen',
@@ -48,10 +53,21 @@ const services = [
       'Untersuchung des Source Code',
       'Konkrete Behebungsempfehlung',
       'Ergebnisse in spätestens 7 Tagen',
+      'Fix problemlos anschließend buchen'
+    ],
+  }, {
+    title: 'Projektbuchung',
+    price: 'ab 999 € je nach Umfang',
+    availability: '3 Slots Frei',
+    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
+    button: 'Jetzt durchstarten',
+    list: [
+      'Aufstellung der Anforderungen',
+      'Untersuchung geeigneter Technologien',
+      'Regelmäßige Projektupdates',
+      'Fixe Kosten und Featuresets',
+      'Nur 50% Projektpreis als Anzahlung'
     ],
-    extra: [
-      'Behebung je nach Schwere gegen Aufpreis möglich'
-    ]
   }, {
     title: 'Stundenbuchung',
     availability: 'Frei ab 16.12.24',
@@ -59,30 +75,22 @@ const services = [
     smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
     button: 'Jetzt buchen',
     list: [
+      'Flexible Aufgabenverteilung',
       'Arbeiten nach agilen Prinzipien',
-      'Teilnahme an agilen Meetings',
       'Monatliche Rechnungsstellung',
       'Kündigungsfrist von einer Woche',
+      'Ab 80 Stunden flexibel buchbar',
     ],
-    extra: [
-      'Mindestabnahme 160 Stunden'
-    ]
-  }, {
-    title: 'Projektbuchung',
-    price: 'ab 5.499 € je nach Umfang',
-    availability: '3 Slots Frei',
-    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
-    button: 'Jetzt durchstarten',
-    list: [
-      'Aufstellung der Anforderungen',
-      'Untersuchung geeigneter Technologien',
-      'Regelmäßiger Austausch',
-      'Klare Kostenübersicht'
-    ],
-    extra: [
-      'Anzahlung 50% des Projektpreises',
-      'Enddatum je nach Umfang'
-    ]
+  }
+]
+
+const network = [
+  {
+    name: 'Robert Janus',
+    img: '/img/network/robert.jpg',
+    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
+    flavour: 'Professionell und entspannt. Hat immer ein offenes Ohr und schnelle Reaktionszeiten.',
+    link: 'https://roberjanus.de/webertoire',
   }
 ]
 </script>