From ec668bd8391f077b844fa849a378a00aa91a2c15 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 18 Aug 2021 19:26:31 +0200
Subject: [PATCH] Working on service page

---
 src/components/ServicePart.vue       | 31 ++++++++++++++++++++++++++++
 src/components/icons/CodeIcon.vue    | 17 +++++++++++++++
 src/components/icons/GlassIcon.vue   | 13 ++++++++++++
 src/components/icons/NetworkIcon.vue | 14 +++++++++++++
 src/components/icons/SupportIcon.vue | 18 ++++++++++++++++
 src/locales/fr-FR.ts                 |  6 +++++-
 src/pages/services.vue               | 18 ++++++++++++++++
 7 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ServicePart.vue
 create mode 100644 src/components/icons/CodeIcon.vue
 create mode 100644 src/components/icons/GlassIcon.vue
 create mode 100644 src/components/icons/NetworkIcon.vue
 create mode 100644 src/components/icons/SupportIcon.vue

diff --git a/src/components/ServicePart.vue b/src/components/ServicePart.vue
new file mode 100644
index 0000000..c8b1198
--- /dev/null
+++ b/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>
diff --git a/src/components/icons/CodeIcon.vue b/src/components/icons/CodeIcon.vue
new file mode 100644
index 0000000..8b74ec1
--- /dev/null
+++ b/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>
diff --git a/src/components/icons/GlassIcon.vue b/src/components/icons/GlassIcon.vue
new file mode 100644
index 0000000..2600680
--- /dev/null
+++ b/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>
diff --git a/src/components/icons/NetworkIcon.vue b/src/components/icons/NetworkIcon.vue
new file mode 100644
index 0000000..17e19b8
--- /dev/null
+++ b/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>
diff --git a/src/components/icons/SupportIcon.vue b/src/components/icons/SupportIcon.vue
new file mode 100644
index 0000000..21fb61c
--- /dev/null
+++ b/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>
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index 4ad32e8..3e446b0 100755
--- a/src/locales/fr-FR.ts
+++ b/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: {
diff --git a/src/pages/services.vue b/src/pages/services.vue
index 07558d8..63c5530 100644
--- a/src/pages/services.vue
+++ b/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>