391 lines
14 KiB
Vue
391 lines
14 KiB
Vue
<script setup lang="ts">
|
|
useSeoMeta({
|
|
title: 'Connect Clouds - Connexions Cloud Directes | Wibx Tour',
|
|
description: 'Connectez-vous directement aux plus grands fournisseurs cloud avec des liens Layer 2 privés et sécurisés'
|
|
})
|
|
|
|
const selectedProvider = ref('all')
|
|
|
|
const cloudProviders = [
|
|
{
|
|
id: 'aws',
|
|
name: 'Amazon Web Services',
|
|
logo: 'i-simple-icons-amazonaws',
|
|
status: 'Direct Connect',
|
|
statusColor: 'green',
|
|
regions: ['EU-West-1', 'EU-Central-1', 'US-East-1', 'US-West-2', 'AP-Southeast-1'],
|
|
services: ['EC2', 'S3', 'RDS', 'Lambda', 'VPC'],
|
|
bandwidth: '50 Mbps - 100 Gbps',
|
|
latency: '< 2ms',
|
|
price: 'À partir de €149/mois'
|
|
},
|
|
{
|
|
id: 'azure',
|
|
name: 'Microsoft Azure',
|
|
logo: 'i-simple-icons-microsoftazure',
|
|
status: 'Partner',
|
|
statusColor: 'blue',
|
|
regions: ['West Europe', 'North Europe', 'East US', 'West US 2'],
|
|
services: ['Virtual Machines', 'Storage', 'SQL Database', 'App Service'],
|
|
bandwidth: '50 Mbps - 10 Gbps',
|
|
latency: '< 3ms',
|
|
price: 'À partir de €129/mois'
|
|
},
|
|
{
|
|
id: 'gcp',
|
|
name: 'Google Cloud Platform',
|
|
logo: 'i-simple-icons-googlecloud',
|
|
status: 'Direct Connect',
|
|
statusColor: 'green',
|
|
regions: ['europe-west1', 'europe-west3', 'us-central1', 'us-east1'],
|
|
services: ['Compute Engine', 'Cloud Storage', 'BigQuery', 'Kubernetes Engine'],
|
|
bandwidth: '50 Mbps - 100 Gbps',
|
|
latency: '< 2ms',
|
|
price: 'À partir de €159/mois'
|
|
},
|
|
{
|
|
id: 'oracle',
|
|
name: 'Oracle Cloud Infrastructure',
|
|
logo: 'i-simple-icons-oracle',
|
|
status: 'New',
|
|
statusColor: 'orange',
|
|
regions: ['eu-frankfurt-1', 'eu-amsterdam-1', 'us-phoenix-1'],
|
|
services: ['Compute', 'Object Storage', 'Database', 'Networking'],
|
|
bandwidth: '1 Gbps - 10 Gbps',
|
|
latency: '< 5ms',
|
|
price: 'À partir de €99/mois'
|
|
},
|
|
{
|
|
id: 'ibm',
|
|
name: 'IBM Cloud',
|
|
logo: 'i-simple-icons-ibm',
|
|
status: 'Partner',
|
|
statusColor: 'blue',
|
|
regions: ['eu-de', 'eu-gb', 'us-south', 'us-east'],
|
|
services: ['Virtual Servers', 'Object Storage', 'Watson', 'Kubernetes'],
|
|
bandwidth: '100 Mbps - 1 Gbps',
|
|
latency: '< 4ms',
|
|
price: 'À partir de €89/mois'
|
|
},
|
|
{
|
|
id: 'alibaba',
|
|
name: 'Alibaba Cloud',
|
|
logo: 'i-simple-icons-alibabacloud',
|
|
status: 'New',
|
|
statusColor: 'orange',
|
|
regions: ['eu-central-1', 'eu-west-1', 'us-west-1', 'ap-southeast-1'],
|
|
services: ['ECS', 'OSS', 'RDS', 'Container Service'],
|
|
bandwidth: '100 Mbps - 1 Gbps',
|
|
latency: '< 6ms',
|
|
price: 'À partir de €79/mois'
|
|
}
|
|
]
|
|
|
|
const tabs = [
|
|
{ value: 'all', label: 'Tous les Clouds' },
|
|
{ value: 'aws', label: 'AWS' },
|
|
{ value: 'azure', label: 'Azure' },
|
|
{ value: 'gcp', label: 'Google Cloud' },
|
|
{ value: 'oracle', label: 'Oracle' },
|
|
{ value: 'ibm', label: 'IBM' },
|
|
{ value: 'alibaba', label: 'Alibaba' }
|
|
]
|
|
|
|
const filteredProviders = computed(() => {
|
|
if (selectedProvider.value === 'all') {
|
|
return cloudProviders
|
|
}
|
|
return cloudProviders.filter(provider => provider.id === selectedProvider.value)
|
|
})
|
|
|
|
const getStatusVariant = (color: string) => {
|
|
switch (color) {
|
|
case 'green': return 'solid'
|
|
case 'orange': return 'outline'
|
|
case 'blue': return 'subtle'
|
|
default: return 'subtle'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="connect-clouds">
|
|
<template #header>
|
|
<UDashboardNavbar title="Connect Clouds">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton size="sm" class="mr-2">
|
|
Demander un Devis
|
|
</UButton>
|
|
<UButton to="/services/layer2" variant="outline" size="sm">
|
|
En Savoir Plus
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
Connexions Cloud Directes - Layer 2 Privés et Sécurisés
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-12">
|
|
<!-- Header Section -->
|
|
<div class="bg-primary/10 rounded-lg p-8 text-center mb-8">
|
|
<h1 class="text-3xl font-bold mb-4">
|
|
Connexions <span class="text-primary">Cloud</span> Directes
|
|
</h1>
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Connectez-vous aux plus grands fournisseurs cloud avec des liens Layer 2 privés, sécurisés et performants
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Statistiques -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div class="text-center space-y-4">
|
|
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-cloud" class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-primary mb-1">
|
|
{{ cloudProviders.length }}+
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Fournisseurs cloud
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center space-y-4">
|
|
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-globe" class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-primary mb-1">
|
|
50+
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Régions mondiales
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center space-y-4">
|
|
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-zap" class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-primary mb-1">
|
|
< 2ms
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Latence ultra-faible
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center space-y-4">
|
|
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-shield-check" class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-primary mb-1">
|
|
100%
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Connexions privées
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div>
|
|
<UTabs v-model="selectedProvider" :items="tabs" class="w-full" />
|
|
</div>
|
|
|
|
<!-- Cloud Providers Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="provider in filteredProviders"
|
|
:key="provider.id"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<UIcon :name="provider.logo" size="48" />
|
|
<div>
|
|
<h3 class="text-lg font-semibold">
|
|
{{ provider.name }}
|
|
</h3>
|
|
<UBadge
|
|
:variant="getStatusVariant(provider.statusColor)"
|
|
:color="provider.statusColor"
|
|
size="sm"
|
|
class="mt-1"
|
|
>
|
|
{{ provider.status }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Régions -->
|
|
<div>
|
|
<h4 class="font-medium text-sm text-gray-600 dark:text-gray-400 mb-2">
|
|
Régions Disponibles
|
|
</h4>
|
|
<div class="flex flex-wrap gap-1">
|
|
<UBadge
|
|
v-for="region in provider.regions"
|
|
:key="region"
|
|
variant="soft"
|
|
size="sm"
|
|
>
|
|
{{ region }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services -->
|
|
<div>
|
|
<h4 class="font-medium text-sm text-gray-600 dark:text-gray-400 mb-2">
|
|
Services Principaux
|
|
</h4>
|
|
<div class="flex flex-wrap gap-1">
|
|
<UBadge
|
|
v-for="service in provider.services"
|
|
:key="service"
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{{ service }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spécifications -->
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-600 dark:text-gray-400">Bande Passante:</span>
|
|
<p class="font-medium">
|
|
{{ provider.bandwidth }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600 dark:text-gray-400">Latence:</span>
|
|
<p class="font-medium">
|
|
{{ provider.latency }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prix -->
|
|
<div class="pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<p class="text-lg font-semibold text-primary">
|
|
{{ provider.price }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex gap-2">
|
|
<UButton block>
|
|
Configurer
|
|
</UButton>
|
|
<UButton variant="outline" square>
|
|
<UIcon name="i-lucide-info" />
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Avantages -->
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Pourquoi Choisir Nos Connexions Cloud ?
|
|
</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-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-globe" size="24" class="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Couverture Mondiale
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Accédez à 50+ régions cloud depuis nos data centers
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<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-dollar-sign" size="24" class="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Réduction des Coûts
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Jusqu'à 70% d'économies sur les frais de transfert
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<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-gauge" size="24" class="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Performances Optimisées
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Latence réduite et bande passante garantie
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-shield-check" size="24" class="text-orange-600 dark:text-orange-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">
|
|
Sécurité Renforcée
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Connexions privées isolées d'Internet
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="text-center bg-primary text-white rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-4">
|
|
Prêt à Connecter Votre Cloud ?
|
|
</h2>
|
|
<p class="text-lg mb-8 opacity-90">
|
|
Configurez votre première connexion cloud en quelques minutes
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<UButton size="lg" variant="outline" color="white">
|
|
Commencer Maintenant
|
|
</UButton>
|
|
<UButton to="/resources/api-docs" size="lg" variant="ghost" color="white">
|
|
Documentation API
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template> |