Wibx_Nuxt_UI_Pro/app/pages/about.vue

<script setup lang="ts">
useSeoMeta({
  title: 'À Propos - Wibx Tour Layer 2',
  description: 'Découvrez Wibx Tour, la plateforme de connectivité réseau Layer 2 nouvelle génération'
})

const stats = [
  { label: 'Data Centers', value: '150+', icon: 'i-lucide-building' },
  { label: 'Pays Couverts', value: '45+', icon: 'i-lucide-globe' },
  { label: 'Connexions Actives', value: '10K+', icon: 'i-lucide-link' },
  { label: 'Uptime', value: '99.99%', icon: 'i-lucide-shield-check' }
]

const team = [
  {
    name: 'Marie Dubois',
    role: 'CEO & Co-fondatrice',
    bio: '15 ans d\'expérience dans les télécommunications et les réseaux d\'entreprise.',
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b31ad8b6?w=150&h=150&fit=crop&crop=face'
  },
  {
    name: 'Thomas Martin',
    role: 'CTO & Co-fondateur',
    bio: 'Expert en architecture réseau et développement d\'infrastructures cloud.',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face'
  },
  {
    name: 'Sophie Bernard',
    role: 'VP Engineering',
    bio: 'Spécialiste en automatisation réseau et APIs de nouvelle génération.',
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face'
  }
]

const values = [
  {
    title: 'Innovation',
    description: 'Nous repoussons constamment les limites de la technologie réseau pour offrir des solutions avant-gardistes.',
    icon: 'i-lucide-lightbulb'
  },
  {
    title: 'Fiabilité',
    description: 'Notre infrastructure robuste garantit une disponibilité maximale pour vos connexions critiques.',
    icon: 'i-lucide-shield'
  },
  {
    title: 'Simplicité',
    description: 'Nous rendons simple ce qui est complexe, avec des interfaces intuitives et une automatisation poussée.',
    icon: 'i-lucide-circle-check'
  },
  {
    title: 'Partenariat',
    description: 'Nous travaillons en étroite collaboration avec nos clients pour réussir ensemble.',
    icon: 'i-lucide-handshake'
  }
]
</script>

<template>
  <UDashboardPanel id="about">
    <template #header>
      <UDashboardNavbar title="À Propos">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton to="/signup" size="sm">
            Nous Rejoindre
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            Wibx Tour - Connectivité Réseau Nouvelle Génération
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Hero Section -->
        <UHero>
          <template #title>
            Révolutionner la <span class="text-primary">Connectivité</span> Réseau
          </template>

          <template #description>
            Wibx Tour est né de la vision de simplifier et d'automatiser la connectivité réseau Layer 2.
            Nous aidons les entreprises à se connecter instantanément aux clouds, data centers et services
            avec une expérience utilisateur exceptionnelle.
          </template>
        </UHero>

        <!-- Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div
            v-for="stat in stats"
            :key="stat.label"
            class="text-center p-6 bg-gray-50 dark:bg-gray-900/50 rounded-lg"
          >
            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <UIcon :name="stat.icon" size="24" class="text-primary" />
            </div>
            <div class="text-2xl font-bold text-primary mb-1">{{ stat.value }}</div>
            <div class="text-sm text-gray-600 dark:text-gray-400">{{ stat.label }}</div>
          </div>
        </div>

        <!-- Notre Mission -->
        <div class="bg-gradient-to-r from-primary/5 to-blue-500/5 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-4">Notre Mission</h2>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-6">
            Démocratiser l'accès aux connexions réseau haut débit en rendant simple et abordable
            ce qui était auparavant complexe et coûteux.
          </p>
          <p class="text-gray-600 dark:text-gray-400">
            Nous croyons que chaque entreprise, quelle que soit sa taille, devrait pouvoir bénéficier
            d'une connectivité réseau de niveau entreprise. C'est pourquoi nous avons développé une
            plateforme qui automatise l'ensemble du processus, de la commande au déploiement.
          </p>
        </div>

        <!-- Nos Valeurs -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">Nos Valeurs</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div
              v-for="value in values"
              :key="value.title"
              class="p-6 border border-gray-200 dark:border-gray-700 rounded-lg"
            >
              <div class="flex items-center mb-4">
                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                  <UIcon :name="value.icon" size="20" class="text-primary" />
                </div>
                <h3 class="text-lg font-semibold">{{ value.title }}</h3>
              </div>
              <p class="text-gray-600 dark:text-gray-400">{{ value.description }}</p>
            </div>
          </div>
        </div>

        <!-- Équipe -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">Notre Équipe</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <UCard
              v-for="member in team"
              :key="member.name"
              class="text-center"
            >
              <template #header>
                <div class="flex justify-center">
                  <img
                    :src="member.avatar"
                    :alt="member.name"
                    class="w-24 h-24 rounded-full object-cover"
                  >
                </div>
              </template>

              <h3 class="text-lg font-semibold mb-1">{{ member.name }}</h3>
              <p class="text-primary font-medium mb-3">{{ member.role }}</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">{{ member.bio }}</p>
            </UCard>
          </div>
        </div>

        <!-- Histoire -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-6">Notre Histoire</h2>
          <div class="space-y-6">
            <div class="flex gap-4">
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center shrink-0">
                <span class="text-primary font-bold">2020</span>
              </div>
              <div>
                <h4 class="font-semibold mb-2">Fondation</h4>
                <p class="text-gray-600 dark:text-gray-400">
                  Création de Wibx Tour par une équipe d'experts en télécommunications
                  frustrés par la complexité des solutions existantes.
                </p>
              </div>
            </div>

            <div class="flex gap-4">
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center shrink-0">
                <span class="text-primary font-bold">2021</span>
              </div>
              <div>
                <h4 class="font-semibold mb-2">Première Plateforme</h4>
                <p class="text-gray-600 dark:text-gray-400">
                  Lancement de la première version de notre plateforme d'automatisation
                  des connexions Layer 2.
                </p>
              </div>
            </div>

            <div class="flex gap-4">
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center shrink-0">
                <span class="text-primary font-bold">2023</span>
              </div>
              <div>
                <h4 class="font-semibold mb-2">Expansion Internationale</h4>
                <p class="text-gray-600 dark:text-gray-400">
                  Extension de notre réseau à plus de 45 pays et 150 data centers
                  dans le monde entier.
                </p>
              </div>
            </div>

            <div class="flex gap-4">
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center shrink-0">
                <span class="text-primary font-bold">2024</span>
              </div>
              <div>
                <h4 class="font-semibold mb-2">Innovation Continue</h4>
                <p class="text-gray-600 dark:text-gray-400">
                  Lancement de nouvelles fonctionnalités incluant l'IA prédictive
                  et l'orchestration multi-cloud avancée.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- Call to Action -->
        <div class="bg-primary text-white rounded-lg p-8 text-center">
          <h2 class="text-2xl font-bold mb-4">Rejoignez-nous dans cette Aventure</h2>
          <p class="text-lg mb-8 opacity-90">
            Découvrez comment Wibx Tour peut transformer votre connectivité réseau
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <UButton to="/signup" size="lg" variant="outline" color="white">
              Essayer Gratuitement
            </UButton>
            <UButton to="/services/layer2" size="lg" variant="ghost" color="white">
              Nos Solutions
            </UButton>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>