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

src/views/FiverrPage.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import { useSeo } from '@/composables/useSeo'
+import { useSiteConfig } from '@/composables/useSiteConfig'
+import { useAssets } from '@/composables/useAssets'
+import FiverrHero from '@/components/FiverrHero.vue'
+import FiverrServiceCard from '@/components/FiverrServiceCard.vue'
+import FiverrCta from '@/components/FiverrCta.vue'
+import en from '@/locales/en'
+import fr from '@/locales/fr'
+
+const { t, locale } = useI18n()
+const { siteConfig } = useSiteConfig()
+const { getImageUrl } = useAssets()
+
+// SEO
+useSeo({
+  title: t('fiverr.title'),
+  description: t('fiverr.subtitle')
+})
+
+const services = computed(() => siteConfig.value.fiverr.services)
+const availableServices = computed(() => services.value.filter(s => s.url !== '#'))
+
+// Get features from the current locale messages
+const getServiceFeatures = (serviceId: string) => {
+  const messages = { en, fr }
+  const currentMessages = messages[locale.value as keyof typeof messages]
+  const serviceData = currentMessages?.fiverr?.serviceData?.[serviceId as keyof typeof currentMessages.fiverr.serviceData]
+  return serviceData?.features || []
+}
+
+// Hero data
+const heroStats = computed(() => [
+  {
+    number: availableServices.value.length,
+    label: t('fiverr.services.orderNow')
+  },
+  {
+    number: '5⭐',
+    label: t('fiverr.stats.rating')
+  }
+])
+
+// Service card data
+const getServiceCardProps = (service: { id: string; price: string; url: string; image: string }) => ({
+  title: t(`fiverr.serviceData.${service.id}.title`),
+  description: t(`fiverr.serviceData.${service.id}.description`),
+  price: `${t('fiverr.pricing.startingAt')} ${service.price}`,
+  url: service.url,
+  imageUrl: getImageUrl(service.image),
+  features: getServiceFeatures(service.id),
+  featuresTitle: t('fiverr.services.features'),
+  orderText: t('fiverr.services.orderNow'),
+  learnMoreText: t('fiverr.services.learnMore'),
+  moreFeaturesText: t('fiverr.services.moreFeatures'),
+  comingSoonText: t('fiverr.services.comingSoon'),
+  availableText: t('fiverr.services.available')
+})
+</script>
+
+<template>
+  <main class="fiverr-page">
+    <!-- Hero Section -->
+    <FiverrHero :title="t('fiverr.title')" :subtitle="t('fiverr.subtitle')" :stats="heroStats"
+      :cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.profileCta')" />
+
+    <!-- Services Section -->
+    <section class="services-grid-section">
+      <div class="container">
+        <!-- Section Header -->
+        <div class="section-header text-center">
+          <h2 class="section-title">{{ t('fiverr.services.title') }}</h2>
+          <p class="section-subtitle">{{ t('fiverr.services.subtitle') }}</p>
+        </div>
+
+        <!-- Services Grid -->
+        <div class="services-grid">
+          <FiverrServiceCard v-for="service in services" :key="service.id" v-bind="getServiceCardProps(service)" />
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <FiverrCta :title="t('fiverr.cta.title')" :subtitle="t('fiverr.cta.subtitle')"
+      :cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.cta.button')" />
+  </main>
+</template>
+
+<style scoped>
+@import './styles/FiverrPage.css';
+</style>