feat(portfolio): mise à jour du site avec de nouvelles sections et améliorations SEO

- Révision des métadonnées dans index.html pour un meilleur référencement.
- Ajout de nouvelles sections : FAQ, Témoignages, Services, et CTA.
- Intégration de données structurées pour les FAQ et les témoignages.
- Amélioration du fichier robots.txt pour un meilleur contrôle d'indexation.
- Mise à jour du sitemap.xml avec de nouvelles URLs.
- Ajout de nouveaux composants Vue.js pour les sections de témoignages et de services.
- Amélioration des styles CSS pour une meilleure présentation des sections.
- Ajout de la gestion des dates et des témoignages dans le composant testimonials.

src/components/testimonials/TestimonialCard.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="testimonial-card">
+    <!-- Header -->
+    <div class="testimonial-header">
+      <div class="client-info">
+        <div class="client-avatar">
+          <img :src="testimonial.avatar" :alt="testimonial.name" loading="lazy" />
+        </div>
+        <div class="client-details">
+          <h4 class="client-name">{{ testimonial.name }}</h4>
+          <p class="client-role">{{ testimonial.role }}</p>
+          <p class="client-company">{{ testimonial.company }}</p>
+        </div>
+      </div>
+
+      <!-- Rating -->
+      <div class="rating">
+        <div class="stars">
+          <span v-for="star in 5" :key="star" class="star" :class="{ 'filled': star <= testimonial.rating }">
+            ⭐
+          </span>
+        </div>
+        <span class="rating-text">{{ testimonial.rating }}/5</span>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="testimonial-content">
+      <blockquote>
+        {{ testimonial.content }}
+      </blockquote>
+
+      <!-- Project Info -->
+      <div v-if="testimonial.project_type" class="project-info">
+        <div class="project-tag">
+          <span class="project-type">{{ testimonial.project_type }}</span>
+        </div>
+      </div>
+
+      <!-- Results -->
+      <div v-if="testimonial.results" class="results">
+        <h5>{{ t('testimonials.card.results') }}</h5>
+        <ul>
+          <li v-for="result in testimonial.results" :key="result">
+            {{ result }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="testimonial-footer">
+      <div class="badges">
+        <span v-if="testimonial.featured" class="badge featured">
+          🏆 {{ t('testimonials.card.featured') }}
+        </span>
+        <span class="badge platform">
+          {{ testimonial.platform }}
+        </span>
+      </div>
+      <div class="testimonial-date">
+        {{ formatRelativeTime(testimonial.date) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n'
+import { useDateFormat } from '@/composables/useDateFormat'
+
+interface Testimonial {
+  name: string
+  role: string
+  company: string
+  avatar: string
+  rating: number
+  content: string
+  date: string
+  platform: string
+  featured?: boolean
+  project_type: string
+  results?: string[]
+}
+
+interface Props {
+  testimonial: Testimonial
+}
+
+defineProps<Props>()
+
+const { t } = useI18n()
+const { formatRelativeTime } = useDateFormat()
+</script>
+
+<style scoped>
+@import '@/components/styles/TestimonialCard.css';
+</style>

src/components/testimonials/TestimonialsCTA.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="testimonials-cta">
+    <h3 class="cta-title">{{ title }}</h3>
+    <p class="cta-subtitle">{{ subtitle }}</p>
+    <CTAButtons layout="row">
+      <RouterLink :to="link" class="btn btn-primary btn-lg">
+        {{ text }}
+        <svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+        </svg>
+      </RouterLink>
+      <a :href="reviewsLink" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">
+        {{ reviewsText }}
+        <svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
+    </CTAButtons>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CTAButtons from '@/components/shared/CTAButtons.vue'
+
+interface Props {
+  title: string
+  subtitle: string
+  text: string
+  link: string
+  reviewsLink: string
+  reviewsText: string
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+@import '@/components/styles/TestimonialsCTA.css';
+</style>

src/components/testimonials/TestimonialsStats.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="testimonials-stats">
+    <div class="stat-item">
+      <div class="stat-number">{{ stats.totalReviews }}+</div>
+      <div class="stat-label">{{ labels.clients }}</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-number">{{ stats.averageRating }}/5</div>
+      <div class="stat-label">{{ labels.rating }}</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-number">{{ stats.projectsCompleted }}+</div>
+      <div class="stat-label">{{ labels.projects }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Stats {
+  totalReviews: number
+  averageRating: number
+  projectsCompleted: number
+}
+
+interface Labels {
+  clients: string
+  rating: string
+  projects: string
+}
+
+interface Props {
+  stats: Stats
+  labels: Labels
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+@import '@/components/styles/TestimonialsStats.css';
+</style>