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>

src/locales/fr-FR.ts

@@ -18,7 +18,11 @@ const translations = {
   },
 
   services: {
-    description: 'Je fourni tout ce dont vous avez besoin pour créer votre site internet parfait'
+    description: 'Je fourni tout ce dont vous avez besoin pour créer votre site internet parfait',
+    1: {
+      title: "Développement d'application",
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate quam vel maximus pulvinar. Aliquam vitae risus at sem varius pulvinar. Vivamus pulvinar tortor sit amet condimentum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse finibus, metus eu dictum aliquet, tellus libero aliquam libero, eu lacinia dui mauris congue dolor. Nunc a lacinia ligula. Mauris bibendum orci eget pretium consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porttitor finibus odio.'
+    }
   },
 
   part: {

src/pages/services.vue

@@ -2,6 +2,24 @@
   <main class="flex flex-col items-center px-4 xl:px-32">
     <PageTitle title="part.services" />
     <p class="text-justify text-gray-700 dark:text-gray-400 text-xl my-8">{{ $t('services.description') }}</p>
+    <div class="flex flex-col justify-around items-center py-10 w-full">
+      <div class="flex flex-col lg:(flex-row justify-around mb-16) w-full">
+        <ServicePart>
+          <GlassIcon />
+        </ServicePart>
+        <ServicePart>
+          <NetworkIcon />
+        </ServicePart>
+      </div>
+      <div class="flex flex-col lg:(flex-row justify-around) w-full">
+        <ServicePart>
+          <SupportIcon />
+        </ServicePart>
+        <ServicePart>
+          <CodeIcon />
+        </ServicePart>
+      </div>
+    </div>
   </main>
 </template>