fix(services): add page

components/sections/Services.vue

@@ -31,12 +31,22 @@
 </template>
 
 <script>
+import { sortBy } from 'lodash-es';
+import fractionToDecimal from '~/utils/fraction-to-decimal';
 export default {
   data: () => ({
     cards: [],
   }),
   async fetch() {
-    this.cards = await this.$content('services').fetch();
+    const data = await this.$content('services').fetch();
+    const items = sortBy(
+      data.map((item) => ({
+        ...item,
+        pos: fractionToDecimal(item.pos),
+      })),
+      ['pos'],
+    ).reverse();
+    this.cards = items;
   },
 };
 </script>

content/pages/services.json

@@ -0,0 +1,6 @@
+{
+  "icon": "ic:outline-local-offer",
+  "name": "Services",
+  "route": "services",
+  "pos": "3/2"
+}

content/services/messaging.json

@@ -1,5 +1,8 @@
 {
+  "color": "#f8f8f8",
+  "description": "Keep the conversation going with multi-channel messaging automation.",
   "icon": "fa:paper-plane",
+  "image": "/img/services/messaging.png",
   "name": "Messaging",
-  "description": "Keep the conversation going with multi-channel messaging automation."
+  "pos": "1/3"
 }

content/services/seo.json

@@ -1,5 +1,8 @@
 {
+  "color": "#e8e8e8",
+  "description": "Organically raise high quality content to the top of search results.",
   "icon": "fa:search",
+  "image": "/img/services/seo.png",
   "name": "SEO",
-  "description": "Organically raise high quality content to the top of search results."
+  "pos": "1/2"
 }

content/services/support.json

@@ -1,5 +1,8 @@
 {
+  "color": "#282828",
+  "description": "Dedication to maintaining quality websites means we are always reachable.",
   "icon": "fa:puzzle-piece",
+  "image": "/img/services/support.png",
   "name": "Support",
-  "description": "Dedication to maintaining quality websites means we are always reachable."
+  "pos": "1/4"
 }

content/services/websites.json

@@ -1,5 +1,8 @@
 {
+  "color": "#282838",
+  "description": "Rapid prototyping of bespoke designs into fast, feature rich websites.",
   "icon": "fa:keyboard-o",
+  "image": "/img/services/websites.png",
   "name": "Websites",
-  "description": "Rapid prototyping of bespoke designs into fast, feature rich websites."
+  "pos": "1/1"
 }

pages/services/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <BlogHero
+      :title="heading"
+      :summary="description"
+      src="/img/banners/services.jpg"
+      :credit="{}"
+    ></BlogHero>
+    <v-container>
+      <v-row>
+        <v-col
+          v-for="item in items"
+          :key="item.slug"
+          cols="12"
+          sm="6"
+          md="6"
+          lg="4"
+          xl="3"
+          class="d-flex flex-column"
+        >
+          <Feature
+            v-bind="{
+              ...item,
+              url: item.offers ? `/services/${item.slug}` : item.url,
+              image: `/img/services/${item.slug}.png`,
+              imageColor: item.color,
+              iconColor: item.iconColor,
+              icon: item.icon,
+            }"
+          >
+            <PriceRange v-if="item.plans" :items="item.plans"></PriceRange>
+          </Feature>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { sortBy, maxBy } from 'lodash-es';
+import Feature from '~/components/feature';
+import PriceRange from '~/components/price-range';
+import textLength from '~/utils/feature-text-length';
+import fractionToDecimal from '~/utils/fraction-to-decimal';
+export default {
+  components: {
+    Feature,
+    PriceRange,
+  },
+  async asyncData({ $content }) {
+    const items = sortBy(
+      (await $content('services').fetch())
+        .filter((item) => !item.deleted_at)
+        .map((item) => ({
+          ...item,
+          pos: fractionToDecimal(item.pos),
+        })),
+      [
+        'pos',
+        /**
+         * Sort by largest price
+         * @param {*} o item to sort
+         */
+        function (o) {
+          const plans = sortBy(o?.plans ?? { free: { price: 0 } }, 'price');
+          const max = maxBy(plans, 'price');
+          return max.price;
+        },
+        textLength,
+        'slug',
+      ],
+    ).reverse();
+    return { items };
+  },
+  data() {
+    return {
+      heading: 'Services',
+      description:
+        'We offer a range of services to help you get the most out of your website.',
+      items: [],
+      defaultPlan: { unset: { price: 0 } },
+    };
+  },
+  head() {
+    return {
+      title: this.heading,
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.description,
+        },
+      ],
+    };
+  },
+};
+</script>