<template>
  <div class="about">
    <section class="page-hero">
      <div class="container">
        <h1>О нас</h1>
        <p class="body-text--white">Туристическая платформа Республики Башкортостан</p>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="about__content">
          <h2>Ял Арба</h2>
          <p class="body-text">
            Ял Арба — это туристическая платформа, созданная для популяризации туристического потенциала Республики Башкортостан.
            Мы объединяем достопримечательности, маршруты, места отдыха и туристические объекты в одном месте.
          </p>
          <p class="body-text">
            Наша миссия — сделать путешествия по Башкортостану удобными, доступными и интересными для каждого.
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'О нас',
})
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
  margin-bottom: 12px;
}

.about__content {
  max-width: 720px;
  margin: 0 auto;
}

.about__content h2 {
  margin-bottom: 24px;
}

.about__content p {
  margin-bottom: 16px;
}
</style>
