<template>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-4xl font-bold text-gray-900 mb-8">{{ t('nav.about') }}</h1>
    
    <div class="prose prose-lg max-w-none">
      <h2>About ClueFlare</h2>
      <p>ClueFlare is your trusted partner for cloud service solutions, providing seamless access to world-class cloud providers including AWS, Alibaba Cloud, Tencent Cloud, and more.</p>
      
      <h3>Our Mission</h3>
      <p>We simplify cloud computing by offering reliable proxy services that connect businesses to the best cloud infrastructure providers worldwide.</p>
      
      <h3>Why Choose Us?</h3>
      <ul>
        <li>Professional cloud service expertise</li>
        <li>Multi-provider support</li>
        <li>24/7 customer support</li>
        <li>Competitive pricing</li>
        <li>Easy integration</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const { t } = useI18n()
</script>
