feat(fiverr): ajout de la page Fiverr et des composants associés
- Création de la page Fiverr pour présenter les services freelance - Ajout des composants FiverrHero, FiverrServiceCard et FiverrCta - Intégration des services Fiverr dans la configuration du site - Ajout de nouvelles images pour les services Fiverr - Mise à jour des traductions pour inclure les services Fiverr - Amélioration de la gestion des actifs avec l'importation des images - Ajout de styles CSS pour les nouveaux composants et pages
This commit is contained in:
53
src/components/ContactMethod.vue
Normal file
53
src/components/ContactMethod.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" :class="iconClass">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="iconPath" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ title }}</div>
|
||||
<component :is="linkComponent" :href="href" :class="linkClass">
|
||||
{{ text }}
|
||||
</component>
|
||||
<div class="contact-description">{{ description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
type: 'email' | 'phone' | 'location'
|
||||
title: string
|
||||
text: string
|
||||
description: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const iconClass = computed(() => `contact-icon-${props.type}`)
|
||||
|
||||
const linkComponent = computed(() => props.href ? 'a' : 'div')
|
||||
|
||||
const linkClass = computed(() => props.href ? 'contact-link' : 'contact-text')
|
||||
|
||||
const iconPath = computed(() => {
|
||||
switch (props.type) {
|
||||
case 'email':
|
||||
return 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
|
||||
case 'phone':
|
||||
return 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'
|
||||
case 'location':
|
||||
return 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/ContactMethod.css';
|
||||
</style>
|
Reference in New Issue
Block a user