477 lines
17 KiB
Vue
477 lines
17 KiB
Vue
<template>
|
|
<UDashboardPanel id="ecosystem">
|
|
<template #header>
|
|
<UDashboardNavbar title="Écosystème">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton to="/connect/saas" size="sm">
|
|
SaaS
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
{{ partners.length }} partenaires
|
|
</UBadge>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UBadge variant="subtle" class="text-xs">
|
|
{{ certifiedPartners.length }} certifiés
|
|
</UBadge>
|
|
<UBadge variant="subtle" class="text-xs">
|
|
API ouverte
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-12">
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold mb-4">
|
|
Écosystème de Partenaires
|
|
</h1>
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Connectez-vous à un écosystème riche de {{ partners.length }} partenaires technologiques et fournisseurs de services
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Statistiques -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<UCard class="text-center">
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
<UIcon name="i-lucide-users" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
{{ partners.length }}+
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Partenaires
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
<UIcon name="i-lucide-award" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
{{ certifiedPartners.length }}
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Certifiés
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
<UIcon name="i-lucide-layers" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
{{ categories.length }}
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Catégories
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
<UIcon name="i-lucide-code" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
API
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Ouverte
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Partenaires Stratégiques -->
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-xl font-semibold">
|
|
Partenaires Stratégiques
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
|
<div
|
|
v-for="partner in strategicPartners"
|
|
:key="partner.id"
|
|
class="flex flex-col items-center p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer"
|
|
>
|
|
<div class="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center mb-2">
|
|
<UIcon :name="partner.icon" class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold text-sm text-center">
|
|
{{ partner.name }}
|
|
</h3>
|
|
<p class="text-xs text-gray-600 dark:text-gray-300 text-center mt-1">
|
|
{{ partner.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Filtres -->
|
|
<div>
|
|
<UTabs v-model="selectedCategory" :items="tabs" class="w-full" />
|
|
</div>
|
|
|
|
<!-- Partenaires -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8">
|
|
Nos partenaires technologiques
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="partner in filteredPartners"
|
|
:key="partner.id"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
|
|
<UIcon :name="partner.icon" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">
|
|
{{ partner.name }}
|
|
</h3>
|
|
<p class="text-xs text-gray-600 dark:text-gray-300">
|
|
{{ partner.category }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<UBadge
|
|
v-if="partner.certified"
|
|
variant="solid"
|
|
size="xs"
|
|
>
|
|
Certifié
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
{{ partner.description }}
|
|
</p>
|
|
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-map-pin" class="w-4 h-4" />
|
|
{{ partner.location }}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-users" class="w-4 h-4" />
|
|
{{ partner.clients }}+ clients
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-1 pt-2">
|
|
<UBadge
|
|
v-for="service in partner.services"
|
|
:key="service"
|
|
variant="subtle"
|
|
size="xs"
|
|
>
|
|
{{ service }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2 border-t">
|
|
<span class="text-sm font-medium">
|
|
Intégration
|
|
</span>
|
|
<span class="text-sm font-semibold text-primary">
|
|
{{ partner.integration }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton variant="outline" block>
|
|
Se connecter
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Programme Partenaires -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Programme Partenaires
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center p-6 border rounded-lg">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-handshake" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2 text-lg">
|
|
Partenaire Technologique
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Intégrez vos solutions avec notre plateforme
|
|
</p>
|
|
<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
|
|
<li>• API complète</li>
|
|
<li>• Documentation technique</li>
|
|
<li>• Support dédié</li>
|
|
<li>• Co-marketing</li>
|
|
</ul>
|
|
<UButton variant="outline" size="sm">
|
|
Devenir partenaire
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="text-center p-6 border rounded-lg">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-award" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2 text-lg">
|
|
Partenaire Certifié
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Certification officielle et avantages premium
|
|
</p>
|
|
<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
|
|
<li>• Formation certifiante</li>
|
|
<li>• Support prioritaire</li>
|
|
<li>• Leads qualifiés</li>
|
|
<li>• Badge officiel</li>
|
|
</ul>
|
|
<UButton variant="solid" size="sm">
|
|
Se certifier
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="text-center p-6 border rounded-lg">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-star" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2 text-lg">
|
|
Partenaire Premier
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Niveau d'excellence et d'engagement maximum
|
|
</p>
|
|
<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
|
|
<li>• Roadmap partagée</li>
|
|
<li>• Co-innovation</li>
|
|
<li>• Événements exclusifs</li>
|
|
<li>• Revenue share</li>
|
|
</ul>
|
|
<UButton variant="solid" size="sm">
|
|
Programme Premier
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API & Développeurs -->
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-xl font-semibold">
|
|
API & Développeurs
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="font-semibold mb-3">
|
|
API RESTful
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Intégrez facilement nos services dans vos applications avec notre API moderne et bien documentée.
|
|
</p>
|
|
|
|
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-4">
|
|
<pre class="text-sm overflow-x-auto"><code>curl -X GET \
|
|
https://api.wibx.com/v1/connections \
|
|
-H "Authorization: Bearer {token}" \
|
|
-H "Content-Type: application/json"</code></pre>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<UButton variant="solid" size="sm">
|
|
Documentation API
|
|
</UButton>
|
|
<UButton variant="outline" size="sm">
|
|
Tester l'API
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold mb-3">
|
|
SDKs Disponibles
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Utilisez nos SDKs officiels pour une intégration rapide.
|
|
</p>
|
|
|
|
<div class="space-y-2 mb-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
|
|
JavaScript/Node.js
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
|
|
Python
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
|
|
PHP
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
|
|
Go
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<UButton variant="solid" size="sm">
|
|
Télécharger SDKs
|
|
</UButton>
|
|
<UButton variant="outline" size="sm">
|
|
GitHub
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Métadonnées de la page
|
|
useSeoMeta({
|
|
title: 'Écosystème - Wibx Tour Layer 2',
|
|
description: 'Découvrez notre écosystème de partenaires technologiques. API ouverte, intégrations natives, programme de certification.'
|
|
})
|
|
|
|
// Partenaires stratégiques
|
|
const strategicPartners = ref([
|
|
{ id: 1, name: 'AWS', description: 'Cloud Computing', icon: 'i-lucide-cloud' },
|
|
{ id: 2, name: 'Microsoft', description: 'Azure & Office 365', icon: 'i-lucide-building' },
|
|
{ id: 3, name: 'Google', description: 'Google Cloud', icon: 'i-lucide-search' },
|
|
{ id: 4, name: 'Salesforce', description: 'CRM Platform', icon: 'i-lucide-user-circle' },
|
|
{ id: 5, name: 'Oracle', description: 'Database & Cloud', icon: 'i-lucide-database' },
|
|
{ id: 6, name: 'SAP', description: 'Enterprise Software', icon: 'i-lucide-briefcase' }
|
|
])
|
|
|
|
// Données des partenaires
|
|
const partners = ref([
|
|
{
|
|
id: 1,
|
|
name: 'Cloudflare',
|
|
category: 'Sécurité',
|
|
description: 'Protection DDoS et CDN global pour une sécurité et performance optimales',
|
|
icon: 'i-lucide-shield',
|
|
location: 'Global',
|
|
clients: '26M',
|
|
services: ['DDoS Protection', 'CDN', 'WAF', 'DNS'],
|
|
integration: 'API native',
|
|
certified: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Equinix',
|
|
category: 'Infrastructure',
|
|
description: 'Leader mondial des centres de données et de l\'interconnexion',
|
|
icon: 'i-lucide-server',
|
|
location: 'Worldwide',
|
|
clients: '10K',
|
|
services: ['Colocation', 'Interconnexion', 'Edge Computing'],
|
|
integration: 'Connexion directe',
|
|
certified: true
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Fortinet',
|
|
category: 'Sécurité',
|
|
description: 'Solutions de cybersécurité et pare-feu nouvelle génération',
|
|
icon: 'i-lucide-lock',
|
|
location: 'Global',
|
|
clients: '540K',
|
|
services: ['Firewall', 'SD-WAN', 'Endpoint Protection'],
|
|
integration: 'API REST',
|
|
certified: true
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Cisco',
|
|
category: 'Réseau',
|
|
description: 'Équipements réseau et solutions de connectivité enterprise',
|
|
icon: 'i-lucide-network',
|
|
location: 'Worldwide',
|
|
clients: '1M',
|
|
services: ['Switching', 'Routing', 'SD-WAN', 'Wireless'],
|
|
integration: 'SNMP/API',
|
|
certified: true
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'VMware',
|
|
category: 'Virtualisation',
|
|
description: 'Solutions de virtualisation et cloud computing',
|
|
icon: 'i-lucide-layers',
|
|
location: 'Global',
|
|
clients: '500K',
|
|
services: ['vSphere', 'NSX', 'vSAN', 'Cloud'],
|
|
integration: 'vCenter API',
|
|
certified: true
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Okta',
|
|
category: 'Identité',
|
|
description: 'Gestion d\'identité et accès cloud',
|
|
icon: 'i-lucide-user-check',
|
|
location: 'Cloud',
|
|
clients: '15K',
|
|
services: ['SSO', 'MFA', 'Identity Management'],
|
|
integration: 'REST API',
|
|
certified: true
|
|
}
|
|
])
|
|
|
|
// Filtres
|
|
const selectedCategory = ref('all')
|
|
const categories = computed(() => [...new Set(partners.value.map(partner => partner.category))])
|
|
const certifiedPartners = computed(() => partners.value.filter(partner => partner.certified))
|
|
|
|
const tabs = computed(() => [
|
|
{ value: 'all', label: 'Tous les partenaires' },
|
|
...categories.value.map(category => ({ value: category, label: category }))
|
|
])
|
|
|
|
const filteredPartners = computed(() => {
|
|
if (selectedCategory.value === 'all') {
|
|
return partners.value
|
|
}
|
|
return partners.value.filter(partner => partner.category === selectedCategory.value)
|
|
})
|
|
</script> |