ADD: Pricing charts layout

Added column based pricing chart layout, add nuxt/fonts

app/components/Flatrate.vue

@@ -7,7 +7,14 @@
       Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung.</p>
 
     <div class="Pricing margin-top">
-      <article v-for="(service, index) in flatrate" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
+      <article>
+        <div style="place-self: end; height: 1px;"/>
+        <p class="fat value">Gleichzeitige Tickets</p>
+        <p class="fat value odd">Erreichbarkeit</p>
+        <p class="fat value">Monatlicher Preis</p>
+        <div />
+      </article>
+      <article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
         <header>
           <strong>{{service.title}}</strong>
           <p>{{service.smallClaim}}</p>
@@ -15,14 +22,7 @@
             <Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
           </div>
         </header>
-        <main>
-          <ul class="cols">
-            <li v-for="point in service.list">
-              <span class="value">{{ typeof point.value === 'number' ? intl.format(point.value) : point.value }}</span>
-              <span class="label">{{ point.label }}</span>
-            </li>
-          </ul>
-        </main>
+        <p v-for="(point, pIndex) in service.list" class="value" :class="{ odd: pIndex === 1}">{{ typeof point === 'number' ? intl.format(point) : point }}</p>
         <footer>
 <!--          <span class="price">{{intl.format(service.price)}}</span>-->
           <div class="button-wrapper z-2">
@@ -43,10 +43,7 @@ type Service = {
   icon: string
   button: string
   link: string
-  list: {
-    label: string
-    value: string | number
-  }[]
+  list: (string | number)[]
 }
 
 const intl = new Intl.NumberFormat(
@@ -68,18 +65,9 @@ const flatrate : Service[] =
         button: 'Jetzt klar machen',
         link: 'https://tidycal.com/webfussel/flatrate-casual',
         list: [
-          {
-            label: 'Ticket gleichzeitig',
-            value: '1',
-          },
-          {
-            label: 'Erreichbarkeit',
-            value: 'Ganz okay',
-          },
-          {
-            label: 'Monatlich',
-            value: 2950,
-          },
+          '1',
+          'E-Mail',
+          2950,
         ],
       },
       {
@@ -89,18 +77,9 @@ const flatrate : Service[] =
         button: 'Jetzt Gold schürfen',
         link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
         list: [
-          {
-            label: 'Tickets gleichzeitig',
-            value: '2',
-          },
-          {
-            label: 'Erreichbarkeit',
-            value: 'Mo - Fr',
-          },
-          {
-            label: 'Monatlich',
-            value: 4950,
-          },
+          '2',
+          'E-Mail, Instant-Messaging',
+          4950,
         ],
       },
       {
@@ -110,18 +89,9 @@ const flatrate : Service[] =
         button: 'Jetzt Fett trimmen',
         link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
         list: [
-          {
-            label: 'Tickets gleichzeitig',
-            value: '3',
-          },
-          {
-            label: 'Erreichbarkeit',
-            value: 'Ja.',
-          },
-          {
-            label: 'Monatlich',
-            value: 8950,
-          },
+          '3',
+          'E-Mail, Instant-Messaging, Video-Chat',
+          8950,
         ],
       }
     ]