387 lines
13 KiB
Vue
387 lines
13 KiB
Vue
<template>
|
|
<UDashboardPanel id="connect-saas">
|
|
<template #header>
|
|
<UDashboardNavbar title="Connect SaaS">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton to="/connect/ecosystem" size="sm">
|
|
Écosystème
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
{{ saasServices.length }} services SaaS
|
|
</UBadge>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UBadge variant="subtle" class="text-xs">
|
|
{{ categories.length }} catégories
|
|
</UBadge>
|
|
<UBadge variant="subtle" class="text-xs">
|
|
Intégration 1-clic
|
|
</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">
|
|
Applications SaaS
|
|
</h1>
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Intégrez facilement vos services SaaS favoris avec notre plateforme de connectivité unifiée
|
|
</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-grid-3x3" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
{{ saasServices.length }}+
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Services SaaS
|
|
</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-zap" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
1-clic
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Intégration
|
|
</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-activity" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
99.9%
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Disponibilité
|
|
</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-shield-check" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div class="text-2xl font-bold mb-1">
|
|
SOC 2
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
Certifié
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Filtres -->
|
|
<div>
|
|
<UTabs v-model="selectedCategory" :items="tabs" class="w-full" />
|
|
</div>
|
|
|
|
<!-- Services SaaS -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8">
|
|
Services disponibles
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="service in filteredServices"
|
|
:key="service.id"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
>
|
|
<template #header>
|
|
<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="service.icon" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">
|
|
{{ service.name }}
|
|
</h3>
|
|
<p class="text-xs text-gray-600 dark:text-gray-300">
|
|
{{ service.category }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
{{ service.description }}
|
|
</p>
|
|
|
|
<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" />
|
|
{{ service.users }}+ utilisateurs
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<UIcon name="i-lucide-star" class="w-4 h-4" />
|
|
{{ service.rating }}/5 ({{ service.reviews }} avis)
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-1 pt-2">
|
|
<UBadge
|
|
v-for="feature in service.features"
|
|
:key="feature"
|
|
variant="subtle"
|
|
size="xs"
|
|
>
|
|
{{ feature }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2 border-t">
|
|
<span class="text-sm font-medium">
|
|
Tarification
|
|
</span>
|
|
<span class="text-sm font-semibold text-primary">
|
|
{{ service.pricing }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton variant="outline" block>
|
|
Connecter
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avantages -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Pourquoi choisir notre plateforme SaaS ?
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-zap" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Intégration Rapide
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Connectez vos applications en 1-clic
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-shield-check" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Sécurité
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Chiffrement end-to-end et conformité
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-trending-up" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Évolutivité
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Adaptation automatique à vos besoins
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-headphones" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Support 24/7
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Assistance technique permanente
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processus d'intégration -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Comment ça marche ?
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl font-bold text-primary">1</span>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Sélectionnez
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Choisissez les services SaaS à connecter
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl font-bold text-primary">2</span>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Configurez
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Paramètres de connectivité en quelques clics
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl font-bold text-primary">3</span>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Utilisez
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Applications connectées instantanément
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Métadonnées de la page
|
|
useSeoMeta({
|
|
title: 'Connect SaaS - Wibx Tour Layer 2',
|
|
description: 'Connectez facilement vos applications SaaS favorites avec notre plateforme unifiée. Intégration 1-clic, sécurité enterprise, support 24/7.'
|
|
})
|
|
|
|
// Données des services SaaS
|
|
const saasServices = ref([
|
|
{
|
|
id: 1,
|
|
name: 'Salesforce',
|
|
category: 'CRM',
|
|
description: 'Plateforme CRM leader mondial pour la gestion des relations clients',
|
|
icon: 'i-lucide-user-circle',
|
|
users: '150K',
|
|
rating: 4.8,
|
|
reviews: 5420,
|
|
features: ['CRM', 'Analytics', 'AI', 'Mobile'],
|
|
pricing: 'À partir de 25€/mois'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Microsoft 365',
|
|
category: 'Productivité',
|
|
description: 'Suite bureautique complète avec Office, Teams et OneDrive',
|
|
icon: 'i-lucide-briefcase',
|
|
users: '300K',
|
|
rating: 4.7,
|
|
reviews: 8930,
|
|
features: ['Office', 'Teams', 'OneDrive', 'SharePoint'],
|
|
pricing: 'À partir de 12€/mois'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Slack',
|
|
category: 'Communication',
|
|
description: 'Plateforme de communication et collaboration en équipe',
|
|
icon: 'i-lucide-message-circle',
|
|
users: '120K',
|
|
rating: 4.6,
|
|
reviews: 3210,
|
|
features: ['Chat', 'Channels', 'Video', 'Integrations'],
|
|
pricing: 'À partir de 6€/mois'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Zoom',
|
|
category: 'Communication',
|
|
description: 'Solution de visioconférence et webinaires professionnels',
|
|
icon: 'i-lucide-video',
|
|
users: '200K',
|
|
rating: 4.5,
|
|
reviews: 6780,
|
|
features: ['Video', 'Webinaires', 'Recording', 'Screen Share'],
|
|
pricing: 'À partir de 14€/mois'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'HubSpot',
|
|
category: 'Marketing',
|
|
description: 'Plateforme marketing automation et inbound marketing',
|
|
icon: 'i-lucide-megaphone',
|
|
users: '90K',
|
|
rating: 4.7,
|
|
reviews: 2340,
|
|
features: ['Marketing', 'Automation', 'Analytics', 'CRM'],
|
|
pricing: 'À partir de 45€/mois'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Notion',
|
|
category: 'Productivité',
|
|
description: 'Workspace tout-en-un pour notes, tâches et collaboration',
|
|
icon: 'i-lucide-file-text',
|
|
users: '60K',
|
|
rating: 4.8,
|
|
reviews: 2890,
|
|
features: ['Notes', 'Databases', 'Tasks', 'Templates'],
|
|
pricing: 'À partir de 8€/mois'
|
|
}
|
|
])
|
|
|
|
// Filtres
|
|
const selectedCategory = ref('all')
|
|
const categories = computed(() => [...new Set(saasServices.value.map(service => service.category))])
|
|
|
|
const tabs = computed(() => [
|
|
{ value: 'all', label: 'Tous les services' },
|
|
...categories.value.map(category => ({ value: category, label: category }))
|
|
])
|
|
|
|
const filteredServices = computed(() => {
|
|
if (selectedCategory.value === 'all') {
|
|
return saasServices.value
|
|
}
|
|
return saasServices.value.filter(service => service.category === selectedCategory.value)
|
|
})
|
|
</script> |