<template>
  <div class="about-view">
    <h1 class="text-3xl font-bold mb-6">About Service Finder</h1>
    <p class="text-gray-700 mb-6">
      This is a modern frontend foundation for the Service Finder platform, built with Vue 3, TypeScript, and Tailwind CSS.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div class="bg-white rounded-xl p-6 shadow">
        <h2 class="text-xl font-bold mb-4">Tech Stack</h2>
        <ul class="space-y-2">
          <li>• Vue 3 (Composition API)</li>
          <li>• TypeScript for type safety</li>
          <li>• Vite for fast builds</li>
          <li>• Pinia for state management</li>
          <li>• Vue Router for navigation</li>
          <li>• Vue I18n for translations</li>
          <li>• Tailwind CSS for styling</li>
          <li>• Axios for HTTP requests</li>
        </ul>
      </div>
      <div class="bg-white rounded-xl p-6 shadow">
        <h2 class="text-xl font-bold mb-4">Architecture</h2>
        <ul class="space-y-2">
          <li>• Multi-stage Docker build</li>
          <li>• Nginx reverse proxy to backend</li>
          <li>• Dual layout system (B2B/B2C)</li>
          <li>• Centralized app mode store</li>
          <li>• Dynamic translation loading</li>
          <li>• Responsive design</li>
          <li>• Component-based structure</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// No additional logic needed for this simple about page
</script>

<style scoped>
.about-view {
  font-family: 'Inter', sans-serif;
}
</style>