331 lines
12 KiB
Vue
331 lines
12 KiB
Vue
<script setup lang="ts">
|
|
useSeoMeta({
|
|
title: 'Marketplace - Services et Partenaires | Wibx Tour',
|
|
description: 'Découvrez notre écosystème de 500+ partenaires et services cloud intégrés'
|
|
})
|
|
|
|
const categories = [
|
|
{ key: 'all', label: 'Tous', count: 523 },
|
|
{ key: 'security', label: 'Sécurité', count: 89 },
|
|
{ key: 'storage', label: 'Stockage', count: 156 },
|
|
{ key: 'analytics', label: 'Analytics', count: 67 },
|
|
{ key: 'ai-ml', label: 'IA & ML', count: 45 },
|
|
{ key: 'backup', label: 'Sauvegarde', count: 78 },
|
|
{ key: 'monitoring', label: 'Monitoring', count: 88 }
|
|
]
|
|
|
|
const selectedCategory = ref('all')
|
|
|
|
const services = [
|
|
{
|
|
name: 'CloudFlare Security',
|
|
provider: 'CloudFlare',
|
|
category: 'security',
|
|
description: 'Protection DDoS et firewall applicatif de nouvelle génération',
|
|
logo: 'i-simple-icons-cloudflare',
|
|
rating: 4.8,
|
|
reviews: 1250,
|
|
price: 'À partir de €29/mois',
|
|
features: ['DDoS Protection', 'WAF', 'Bot Management', 'Rate Limiting'],
|
|
integration: 'Direct',
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Veeam Backup',
|
|
provider: 'Veeam',
|
|
category: 'backup',
|
|
description: 'Solution de sauvegarde et récupération pour environnements virtualisés',
|
|
logo: 'i-lucide-database',
|
|
rating: 4.6,
|
|
reviews: 892,
|
|
price: 'À partir de €89/mois',
|
|
features: ['Backup Automatique', 'Réplication', 'Récupération Instantanée'],
|
|
integration: 'API'
|
|
},
|
|
{
|
|
name: 'Splunk Analytics',
|
|
provider: 'Splunk',
|
|
category: 'analytics',
|
|
description: 'Plateforme d\'analyse de données et de logs en temps réel',
|
|
logo: 'i-lucide-bar-chart-3',
|
|
rating: 4.7,
|
|
reviews: 678,
|
|
price: 'À partir de €199/mois',
|
|
features: ['Log Analysis', 'SIEM', 'APM', 'Machine Learning'],
|
|
integration: 'Direct'
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
provider: 'Amazon Web Services',
|
|
category: 'ai-ml',
|
|
description: 'Calcul serverless pour l\'exécution de code sans gestion de serveurs',
|
|
logo: 'i-simple-icons-amazonaws',
|
|
rating: 4.5,
|
|
reviews: 2150,
|
|
price: 'Pay per use',
|
|
features: ['Serverless', 'Auto Scaling', 'Event Driven', 'Multi-Language'],
|
|
integration: 'Native',
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Azure Blob Storage',
|
|
provider: 'Microsoft',
|
|
category: 'storage',
|
|
description: 'Stockage d\'objets massivement évolutif pour données non structurées',
|
|
logo: 'i-simple-icons-microsoftazure',
|
|
rating: 4.4,
|
|
reviews: 1456,
|
|
price: 'À partir de €0.02/GB',
|
|
features: ['Hot/Cold Tiers', 'Géo-Réplication', 'CDN Integration'],
|
|
integration: 'Native'
|
|
},
|
|
{
|
|
name: 'Datadog Monitoring',
|
|
provider: 'Datadog',
|
|
category: 'monitoring',
|
|
description: 'Plateforme de monitoring et observabilité pour applications cloud',
|
|
logo: 'i-lucide-activity',
|
|
rating: 4.6,
|
|
reviews: 934,
|
|
price: 'À partir de €15/host/mois',
|
|
features: ['APM', 'Infrastructure Monitoring', 'Logs', 'Alertes'],
|
|
integration: 'API'
|
|
}
|
|
]
|
|
|
|
const filteredServices = computed(() => {
|
|
if (selectedCategory.value === 'all') {
|
|
return services
|
|
}
|
|
return services.filter(service => service.category === selectedCategory.value)
|
|
})
|
|
|
|
const getIntegrationColor = (integration: string) => {
|
|
switch (integration) {
|
|
case 'Native': return 'green'
|
|
case 'Direct': return 'blue'
|
|
case 'API': return 'orange'
|
|
default: return 'gray'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="marketplace">
|
|
<template #header>
|
|
<UDashboardNavbar title="Marketplace">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton size="sm" class="mr-2">
|
|
Devenir Partenaire
|
|
</UButton>
|
|
<UButton variant="outline" size="sm">
|
|
<UIcon name="i-lucide-filter" class="mr-2" />
|
|
Filtres
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
500+ Services et Partenaires - Écosystème Intégré
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-8">
|
|
<!-- Hero Description -->
|
|
<div>
|
|
<p class="text-lg text-gray-600 dark:text-gray-400">
|
|
Accédez à notre écosystème de plus de 500 partenaires et services cloud intégrés.
|
|
Déployez et gérez vos services depuis une interface unique avec facturation centralisée.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Catégories -->
|
|
<div>
|
|
<h3 class="font-semibold mb-4">Catégories</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton
|
|
v-for="category in categories"
|
|
:key="category.key"
|
|
:variant="selectedCategory === category.key ? 'solid' : 'outline'"
|
|
size="sm"
|
|
@click="selectedCategory = category.key"
|
|
>
|
|
{{ category.label }}
|
|
<UBadge
|
|
variant="subtle"
|
|
size="sm"
|
|
class="ml-2"
|
|
>
|
|
{{ category.count }}
|
|
</UBadge>
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="service in filteredServices"
|
|
:key="service.name"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
:class="service.popular ? 'ring-2 ring-primary/20' : ''"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
|
<UIcon :name="service.logo" size="24" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">{{ service.name }}</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">{{ service.provider }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<UBadge
|
|
v-if="service.popular"
|
|
variant="solid"
|
|
size="sm"
|
|
>
|
|
Populaire
|
|
</UBadge>
|
|
<UBadge
|
|
:color="getIntegrationColor(service.integration)"
|
|
variant="soft"
|
|
size="sm"
|
|
>
|
|
{{ service.integration }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">{{ service.description }}</p>
|
|
|
|
<!-- Rating et Prix -->
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1">
|
|
<UIcon name="i-lucide-star" size="16" class="text-yellow-500" />
|
|
<span class="text-sm font-medium">{{ service.rating }}</span>
|
|
<span class="text-xs text-gray-500">({{ service.reviews }})</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-primary">{{ service.price }}</span>
|
|
</div>
|
|
|
|
<!-- Fonctionnalités -->
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Fonctionnalités Clés</p>
|
|
<div class="flex flex-wrap gap-1">
|
|
<UBadge
|
|
v-for="feature in service.features"
|
|
:key="feature"
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{{ feature }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex gap-2">
|
|
<UButton block>
|
|
Installer
|
|
</UButton>
|
|
<UButton variant="outline" square>
|
|
<UIcon name="i-lucide-info" />
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Stats du Marketplace -->
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-8 text-center">Marketplace en Chiffres</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-primary mb-2">500+</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Services Disponibles</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-primary mb-2">150+</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Partenaires Certifiés</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-primary mb-2">50K+</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Déploiements Mensuels</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-primary mb-2">99.5%</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Taux de Satisfaction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avantages -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">Avantages du Marketplace</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-credit-card" size="24" class="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Facturation Unifiée</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Une seule facture pour tous vos services cloud et partenaires
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-zap" size="24" class="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Déploiement Instantané</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Activez vos services en quelques clics avec provisionnement automatique
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-shield-check" size="24" class="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Sécurité Certifiée</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Tous nos partenaires sont certifiés et audités pour la sécurité
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="bg-primary text-white rounded-lg p-8 text-center">
|
|
<h2 class="text-2xl font-bold mb-4">Développez Votre Écosystème</h2>
|
|
<p class="text-lg mb-8 opacity-90">
|
|
Explorez nos 500+ services et trouvez les solutions parfaites pour votre entreprise
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<UButton size="lg" variant="outline" color="white">
|
|
Explorer le Catalogue
|
|
</UButton>
|
|
<UButton size="lg" variant="ghost" color="white">
|
|
Devenir Partenaire
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template> |