295 lines
11 KiB
Vue
295 lines
11 KiB
Vue
<script setup lang="ts">
|
|
useSeoMeta({
|
|
title: 'Services Layer 2 - Connexions Privées Sécurisées | Wibx Tour',
|
|
description: 'Déployez des connexions Layer 2 privées en quelques minutes avec SLA garanti et monitoring 24/7'
|
|
})
|
|
|
|
const steps = [
|
|
{
|
|
title: 'Sélectionner les Points de Connexion',
|
|
description: 'Choisissez vos points de départ et d\'arrivée parmi nos 150+ data centers'
|
|
},
|
|
{
|
|
title: 'Configurer la Bande Passante',
|
|
description: 'Définissez votre bande passante de 1 Mbps à 100 Gbps'
|
|
},
|
|
{
|
|
title: 'Validation et Déploiement',
|
|
description: 'Validation automatique et provisionnement en moins de 5 minutes'
|
|
},
|
|
{
|
|
title: 'Monitoring et Gestion',
|
|
description: 'Surveillance continue avec alertes et reporting en temps réel'
|
|
}
|
|
]
|
|
|
|
const technicalSpecs = [
|
|
{
|
|
title: 'VLAN Configuration',
|
|
content: 'Configurez vos VLANs avec une granularité complète. Support des VLAN ID de 2 à 4094, avec possibilité de Q-in-Q pour les architectures complexes.'
|
|
},
|
|
{
|
|
title: 'Access Ports Requis',
|
|
content: 'Chaque connexion Layer 2 nécessite un Access Port dans chaque data center. Ports disponibles : 1GE, 10GE, 40GE, 100GE avec connecteurs optiques et cuivre.'
|
|
},
|
|
{
|
|
title: 'Redondance et Résilience',
|
|
content: 'Options de redondance active/passive ou active/active. Basculement automatique en moins de 50ms avec BGP ou LACP.'
|
|
},
|
|
{
|
|
title: 'Qualité de Service (QoS)',
|
|
content: 'Gestion avancée de la QoS avec classification du trafic, limitation de bande passante et priorisation des paquets.'
|
|
}
|
|
]
|
|
|
|
const pricingPlans = [
|
|
{
|
|
name: 'Starter',
|
|
bandwidth: '1-100 Mbps',
|
|
price: '€29',
|
|
features: [
|
|
'Connexion Layer 2 basique',
|
|
'Monitoring standard',
|
|
'Support par email',
|
|
'SLA 99.5%'
|
|
]
|
|
},
|
|
{
|
|
name: 'Professional',
|
|
bandwidth: '100 Mbps - 1 Gbps',
|
|
price: '€199',
|
|
features: [
|
|
'Connexion Layer 2 avancée',
|
|
'Monitoring en temps réel',
|
|
'Support prioritaire 24/7',
|
|
'SLA 99.9%',
|
|
'Redondance optionnelle'
|
|
],
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
bandwidth: '1-100 Gbps',
|
|
price: 'Sur mesure',
|
|
features: [
|
|
'Connexions Layer 2 multiples',
|
|
'Monitoring avancé + alertes',
|
|
'Support dédié',
|
|
'SLA 99.99%',
|
|
'Redondance incluse',
|
|
'QoS avancée'
|
|
]
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="layer2">
|
|
<template #header>
|
|
<UDashboardNavbar title="Services Layer 2">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton size="sm" class="mr-2">
|
|
Créer une Connexion
|
|
</UButton>
|
|
<UButton to="#demo" variant="outline" size="sm">
|
|
Voir la Démo
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
Connexions Layer 2 Privées - Déploiement Instantané
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-12">
|
|
<!-- Hero Section -->
|
|
<UHero>
|
|
<template #description>
|
|
Créez des connexions réseau privées et sécurisées entre vos infrastructures,
|
|
clouds et data centers en quelques minutes avec notre plateforme automatisée.
|
|
</template>
|
|
</UHero>
|
|
|
|
<!-- SLA Alert -->
|
|
<UAlert
|
|
icon="i-lucide-clock"
|
|
title="Temps de Déploiement"
|
|
description="Provisionnement automatique en moins de 5 minutes avec SLA 99.9% de disponibilité"
|
|
color="green"
|
|
variant="soft"
|
|
/>
|
|
|
|
<!-- Étapes de Provisionnement -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Comment ça Marche</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Un processus simple en 4 étapes pour déployer vos connexions Layer 2
|
|
</p>
|
|
<USteps :items="steps" />
|
|
</div>
|
|
|
|
<!-- Video Demo -->
|
|
<div id="demo" class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-2">Démo d'Utilisation</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Découvrez comment créer votre première connexion Layer 2 en 2 minutes
|
|
</p>
|
|
|
|
<div class="aspect-video bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
|
<div class="text-center">
|
|
<UIcon name="i-lucide-play-circle" size="64" class="text-primary mb-4" />
|
|
<p class="text-lg font-medium">Démo Vidéo</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Cliquez pour voir le processus de création d'une connexion Layer 2
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Détails Techniques -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Spécifications Techniques</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Configurations avancées pour répondre à tous vos besoins réseau
|
|
</p>
|
|
<UAccordion :items="technicalSpecs" />
|
|
</div>
|
|
|
|
<!-- Tarification -->
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-2">Plans et Tarification</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Choisissez le plan qui correspond à vos besoins
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="plan in pricingPlans"
|
|
:key="plan.name"
|
|
:class="plan.popular ? 'ring-2 ring-primary' : ''"
|
|
class="relative"
|
|
>
|
|
<template #header>
|
|
<div class="text-center">
|
|
<UBadge v-if="plan.popular" class="mb-4" variant="solid">
|
|
Populaire
|
|
</UBadge>
|
|
<h3 class="text-xl font-bold mb-2">{{ plan.name }}</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
{{ plan.bandwidth }}
|
|
</p>
|
|
<div class="flex items-baseline justify-center">
|
|
<span class="text-3xl font-bold">{{ plan.price }}</span>
|
|
<span v-if="plan.price !== 'Sur mesure'" class="text-sm text-gray-600 dark:text-gray-400 ml-1">
|
|
/mois
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="feature in plan.features"
|
|
:key="feature"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<UIcon name="i-lucide-check" class="text-green-500" />
|
|
<span class="text-sm">{{ feature }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
:variant="plan.popular ? 'solid' : 'outline'"
|
|
block
|
|
class="mt-6"
|
|
>
|
|
{{ plan.price === 'Sur mesure' ? 'Nous Contacter' : 'Commencer' }}
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avantages -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Pourquoi Choisir Nos Services Layer 2 ?
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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-shield" size="24" class="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Sécurité Maximale</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Connexions privées isolées du trafic internet public
|
|
</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-gauge" size="24" class="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Performances Optimales</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Latence ultra-faible et bande passante garantie
|
|
</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-settings" size="24" class="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Flexibilité Totale</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Modifiez votre bande passante à la demande
|
|
</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-clock" size="24" class="text-orange-600 dark:text-orange-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Déploiement Rapide</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Provisionnement automatique en quelques minutes
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-activity" size="24" class="text-red-600 dark:text-red-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Monitoring Avancé</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Surveillance en temps réel avec alertes proactives
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-teal-100 dark:bg-teal-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-lucide-headphones" size="24" class="text-teal-600 dark:text-teal-400" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Support Expert</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Équipe technique disponible 24/7 pour vous assister
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template> |