arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-20 23:11:43 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Working on services

Browse Source
This commit is contained in:
Arthur Danjou
2021-08-28 19:09:26 +02:00
parent 6a92a992bc
commit 1af72cfb86
9 changed files with 76 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ServicePart.vue
View File

@@ -1,15 +1,13 @@
<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>
<slot name="icon" />
</div>
<div class="rounded-lg mt-8 md:mr-8 pt-4 md:p-8">
<h1 class="font-bold capitalize text-4xl mb-4">
<div class="mt-8">
<h1 class="font-bold text-3xl mb-4">
{{ $t(title) }}
</h1>
<p class="text-gray-600 text-lg text-justify leading-5 ">
{{ $t(content) }}
</p>
<slot name="content"/>
</div>
</div>
</template>
@@ -21,10 +19,6 @@ export default {
title: {
type: String,
default: 'services.1.title'
},
content: {
type: String,
default: 'services.1.content'
}
}
}

8
src/components/icons/CodeIcon.vue
View File

@@ -1,11 +1,7 @@
<template>
<svg class="inline" width="2rem" height="2rem" viewBox="0 0 24 24" focusable="false">
<svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 1024 1024" 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"
d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 0 0 308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 0 0-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
fill="currentColor" />
</svg>
</template>

13
src/components/icons/CompassIcon.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 24 24" focusable="false">
<path
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16zm3.5-11.5l-2 5l-5 2l2-5l5-2z"
fill="currentColor" />
</svg>
</template>
<script>
export default {
name: "CompassIcon"
}
</script>

16
src/components/icons/DesignIcon.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 48 48" focusable="false">
<g fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round">
<path
d="M19 32c-7.732 0-14-6.268-14-14S11.268 4 19 4s14 6.268 14 14" />
<path
d="M18 18h26v26H18z" />
</g>
</svg>
</template>
<script>
export default {
name: "DesignIcon"
}
</script>

13
src/components/icons/GlassIcon.vue
View File

@@ -1,13 +0,0 @@
<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>

14
src/components/icons/NetworkIcon.vue
View File

@@ -1,14 +0,0 @@
<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>

18
src/components/icons/SupportIcon.vue
View File

@@ -1,18 +0,0 @@
<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>

15
src/locales/fr-FR.ts
View File

@@ -29,21 +29,14 @@ const translations = {
services: {
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.'
title: "Stratégie",
},
2: {
title: "Installation d'infrastructure",
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.'
title: "Illustration",
},
3: {
title: "Conseil dans l'informatique",
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.'
},
4: {
title: "Revue de vos applications",
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.'
},
title: "Développement",
}
},
footer: {

48
src/pages/services.vue
View File

@@ -2,21 +2,43 @@
<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 title="services.1.title" content="services.1.content" >
<CodeIcon />
<div class="flex flex-col lg:(flex-row) justify-around items-center pt-10 w-full">
<div class="grid grid-cols-1 gap-x-12 mb-20 sm:grid-cols-3 w-full">
<ServicePart title="services.1.title">
<template v-slot:icon>
<CompassIcon />
</template>
<template v-slot:content>
<div class="flex flex-col space-y-4">
<p>Développement</p>
<p>Architecture</p>
<p>Test</p>
</div>
</template>
</ServicePart>
<ServicePart title="services.2.title" content="services.2.content">
<NetworkIcon />
<ServicePart title="services.2.title">
<template v-slot:icon>
<DesignIcon />
</template>
<template v-slot:content>
<div class="flex flex-col space-y-4">
<p>Développement</p>
<p>Architecture</p>
<p>Test</p>
<p>Test</p>
</div>
</template>
</ServicePart>
</div>
<div class="flex flex-col lg:(flex-row justify-around) w-full">
<ServicePart title="services.3.title" content="services.3.content">
<SupportIcon />
</ServicePart>
<ServicePart title="services.4.title" content="services.4.content">
<GlassIcon />
<ServicePart title="services.3.title">
<template v-slot:icon>
<CodeIcon />
</template>
<template v-slot:content>
<div class="flex flex-col space-y-4">
<p>Développement</p>
<p>Architecture</p>
</div>
</template>
</ServicePart>
</div>
</div>