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:
50
src/components/FiverrHero.vue
Normal file
50
src/components/FiverrHero.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<section class="fiverr-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content text-center">
|
||||
<h1 class="hero-title">{{ title }}</h1>
|
||||
<p class="hero-subtitle">{{ subtitle }}</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid">
|
||||
<div v-for="stat in stats" :key="stat.label" class="stat-item">
|
||||
<div class="stat-number">{{ stat.number }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="hero-cta">
|
||||
<a :href="ctaUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||
{{ ctaText }}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Stat {
|
||||
number: string | number
|
||||
label: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
stats: Stat[]
|
||||
ctaUrl: string
|
||||
ctaText: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/FiverrHero.css';
|
||||
</style>
|
Reference in New Issue
Block a user