257 lines
9.2 KiB
Vue
257 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
import { sub } from 'date-fns'
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
import type { Period, Range } from '~/types'
|
|
|
|
const { isNotificationsSlideoverOpen } = useDashboard()
|
|
|
|
const items = [[{
|
|
label: 'New mail',
|
|
icon: 'i-lucide-send',
|
|
to: '/inbox'
|
|
}, {
|
|
label: 'New customer',
|
|
icon: 'i-lucide-user-plus',
|
|
to: '/customers'
|
|
}]] satisfies DropdownMenuItem[][]
|
|
|
|
const range = shallowRef<Range>({
|
|
start: sub(new Date(), { days: 14 }),
|
|
end: new Date()
|
|
})
|
|
const period = ref<Period>('daily')
|
|
|
|
useSeoMeta({
|
|
title: 'Wibx Tour Layer 2 - Connectivité Cloud et Réseau',
|
|
description: 'Plateforme de connectivité réseau Layer 2 pour cloud, data centers et services managés'
|
|
})
|
|
|
|
const cloudProviders = [
|
|
{ name: 'AWS', logo: 'i-simple-icons-amazonaws', status: 'Direct Connect' },
|
|
{ name: 'Azure', logo: 'i-simple-icons-microsoftazure', status: 'Partner' },
|
|
{ name: 'Google Cloud', logo: 'i-simple-icons-googlecloud', status: 'Direct Connect' },
|
|
{ name: 'Oracle Cloud', logo: 'i-simple-icons-oracle', status: 'New' },
|
|
{ name: 'IBM Cloud', logo: 'i-simple-icons-ibm', status: 'Partner' },
|
|
{ name: 'Alibaba Cloud', logo: 'i-simple-icons-alibabacloud', status: 'New' }
|
|
]
|
|
|
|
const mainServices = [
|
|
{
|
|
title: 'Connect Cloud',
|
|
description: 'Connectez-vous directement aux plus grands fournisseurs cloud avec des liens Layer 2 privés.',
|
|
icon: 'i-lucide-cloud',
|
|
to: '/connect/clouds',
|
|
features: ['AWS Direct Connect', 'Azure ExpressRoute', 'Google Cloud Interconnect']
|
|
},
|
|
{
|
|
title: 'Marketplace',
|
|
description: 'Accédez à notre écosystème de partenaires et services via notre marketplace intégré.',
|
|
icon: 'i-lucide-store',
|
|
to: '/services/marketplace',
|
|
features: ['500+ Partenaires', 'APIs Intégrées', 'Facturation Unifiée']
|
|
},
|
|
{
|
|
title: 'Instant Layer 2',
|
|
description: 'Provisionnement instantané de liens Layer 2 avec SLA garanti et monitoring en temps réel.',
|
|
icon: 'i-lucide-zap',
|
|
to: '/services/layer2',
|
|
features: ['Déploiement < 5min', 'SLA 99.9%', 'Monitoring 24/7']
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="home">
|
|
<template #header>
|
|
<UDashboardNavbar title="Accueil">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton to="/services/layer2" size="sm">
|
|
Créer une Connexion
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
Plateforme Wibx Tour Layer 2
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-12">
|
|
<!-- Hero Section -->
|
|
<UHero>
|
|
<template #title>
|
|
Connectivité <span class="text-primary">Layer 2</span> Instantanée et Sécurisée
|
|
</template>
|
|
|
|
<template #description>
|
|
Wibx Tour Layer 2 vous permet de connecter instantanément vos infrastructures aux clouds,
|
|
data centers et services managés avec des performances garanties et une sécurité de niveau entreprise.
|
|
</template>
|
|
|
|
<template #links>
|
|
<UButton to="/services/layer2" size="lg" class="mr-4">
|
|
Commencer Maintenant
|
|
</UButton>
|
|
<UButton to="/resources/api-docs" variant="outline" size="lg">
|
|
Voir la Documentation
|
|
</UButton>
|
|
</template>
|
|
</UHero>
|
|
|
|
<!-- Services principaux -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Services Principaux</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Découvrez nos solutions de connectivité réseau pour tous vos besoins
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="service in mainServices"
|
|
:key="service.title"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center gap-4">
|
|
<UIcon :name="service.icon" size="32" class="text-primary" />
|
|
<div>
|
|
<h3 class="text-lg font-semibold">{{ service.title }}</h3>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
|
{{ service.description }}
|
|
</p>
|
|
|
|
<div class="space-y-2 mb-4">
|
|
<div
|
|
v-for="feature in service.features"
|
|
:key="feature"
|
|
class="flex items-center gap-2 text-sm"
|
|
>
|
|
<UIcon name="i-lucide-check" class="text-green-500" />
|
|
<span>{{ feature }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton :to="service.to" variant="outline" block>
|
|
En savoir plus
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Partenaires Cloud -->
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-2">Partenaires Cloud</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Connectez-vous aux plus grands fournisseurs cloud avec des liens directs
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
|
<div
|
|
v-for="provider in cloudProviders"
|
|
:key="provider.name"
|
|
class="flex flex-col items-center text-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
|
>
|
|
<UIcon :name="provider.logo" size="48" class="mb-3 text-gray-600 dark:text-gray-300" />
|
|
<h4 class="font-medium mb-2">{{ provider.name }}</h4>
|
|
<UBadge
|
|
:variant="provider.status === 'Direct Connect' ? 'solid' : provider.status === 'New' ? 'outline' : 'subtle'"
|
|
size="sm"
|
|
>
|
|
{{ provider.status }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-8">
|
|
<UButton to="/connect/clouds" size="lg">
|
|
Voir Tous les Clouds
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avantages -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">
|
|
Pourquoi Choisir Wibx Tour ?
|
|
</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">Déploiement Rapide</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Provisionnement en moins de 5 minutes
|
|
</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é Garantie</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Connexions privées et chiffrées
|
|
</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-activity" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Monitoring 24/7</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Surveillance continue de vos liens
|
|
</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-dollar-sign" size="24" class="text-primary" />
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Tarification Transparente</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Pas de frais cachés, facturation au réel
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="bg-primary text-white rounded-lg p-8 text-center">
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
Prêt à Commencer ?
|
|
</h2>
|
|
<p class="text-xl mb-8 opacity-90">
|
|
Créez votre premier lien Layer 2 en quelques minutes
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<UButton to="/signup" size="lg" variant="outline" color="white">
|
|
Créer un Compte
|
|
</UButton>
|
|
<UButton to="/services/api" size="lg" variant="ghost" color="white">
|
|
Explorer les APIs
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|