Working on service page

src/components/ServicePart.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="relative lg:(w-1/2 m-8) mt-8">
+    <div class="absolute right-0 top-0 bg-indigo-600 text-white rounded-xl p-3">
+      <slot />
+    </div>
+    <div class="rounded-lg mt-8 md:mr-8 pt-4 md:p-8">
+      <h1 class="font-bold capitalize text-4xl mb-4">
+        {{ $t(title) }}
+      </h1>
+      <p class="text-gray-600 text-lg text-justify leading-5 ">
+        {{ $t(content) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ServicePart",
+  props: {
+    title: {
+      type: String,
+      default: 'services.1.title'
+    },
+    content: {
+      type: String,
+      default: 'services.1.content'
+    }
+  }
+}
+</script>

src/components/icons/CodeIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.293 9.293L5.586 13l3.707 3.707l1.414-1.414L8.414 13l2.293-2.293zm5.414 0l-1.414 1.414L15.586 13l-2.293 2.293l1.414 1.414L18.414 13z"
+      fill="currentColor" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CodeIcon"
+}
+</script>

src/components/icons/GlassIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 512 512" focusable="false">
+    <path
+      fill="currentColor"
+      d="M479.6 399.716l-81.084-81.084l-62.368-25.767A175.014 175.014 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.034 175.034 0 0 0 101.619-32.377l25.7 62.2l81.081 81.088a56 56 0 1 0 79.2-79.195zM48 192c0-79.4 64.6-144 144-144s144 64.6 144 144s-64.6 144-144 144S48 271.4 48 192zm408.971 264.284a24.028 24.028 0 0 1-33.942 0l-76.572-76.572l-23.894-57.835l57.837 23.894l76.573 76.572a24.028 24.028 0 0 1-.002 33.941z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "GlassIcon"
+}
+</script>

src/components/icons/NetworkIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 32 32" focusable="false">
+    <path
+      d="M17 17h5.142a4 4 0 1 0 0-2H17V7h5.142a4 4 0 1 0 0-2H17a2.002 2.002 0 0 0-2 2v8H9.858a4 4 0 1 0 0 2H15v8a2.002 2.002 0 0 0 2 2h5.142a4 4 0 1 0 0-2H17zm9-3a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2zm0-10a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2zM6 18a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2zm20 6a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "NetworkIcon"
+}
+</script>

src/components/icons/SupportIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg class="inline" width="2  rem" height="2rem" viewBox="0 0 24 24" focusable="false">
+    <g fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.26 21.997a10.276 10.276 0 0 1-.52 0a10.004 10.004 0 0 1-8.983-6.173a10.034 10.034 0 0 1 .017-7.69A10.015 10.015 0 0 1 4.908 4.95l.042-.042a10.015 10.015 0 0 1 3.167-2.126a10.034 10.034 0 0 1 7.753-.006a10.015 10.015 0 0 1 3.186 2.138l.03.03c.913.917 1.65 2.01 2.153 3.223a10.012 10.012 0 0 1 .76 3.985a10.004 10.004 0 0 1-6.226 9.112a10.013 10.013 0 0 1-3.512.733zm1.772-6.55l2.874 2.873a8.004 8.004 0 0 1-9.812 0l2.874-2.874a4.007 4.007 0 0 0 4.064 0zm-5.478-1.415L5.68 16.906a8.004 8.004 0 0 1 0-9.812l2.874 2.874a4.007 4.007 0 0 0 0 4.064zm1.528-1.463a2.01 2.01 0 0 1-.014-1.087a1.99 1.99 0 0 1 .518-.896a1.99 1.99 0 0 1 1.932-.518c.328.088.639.26.896.518a1.99 1.99 0 0 1 .518 1.932c-.088.328-.26.639-.518.896a1.99 1.99 0 0 1-1.932.518a1.991 1.991 0 0 1-.896-.518a1.99 1.99 0 0 1-.504-.845zm3.95-4.015a4.007 4.007 0 0 0-4.064 0L7.094 5.68a8.004 8.004 0 0 1 9.812 0l-2.874 2.874zm4.288 8.352a8.004 8.004 0 0 0 0-9.812l-2.874 2.874a4.007 4.007 0 0 1 0 4.064l2.874 2.874z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "SupportIcon"
+}
+</script>