<script setup lang="ts">
import styleGuide from "@/components/docs/motion/styleGuide.vue";
</script>

<template>
  <section>
    <div class="content">
      <h1>Guia de estilo</h1>
      <styleGuide />
    </div>
    <div class="content">
      <h1>Missão</h1>
      <div>
        <h2>
          Nossa missão é fornecer um guia abrangente para auxiliar o time de desenvolvimento na criação de interfaces de
          usuário consistentes e intuitivas. Este guia centraliza diretrizes visuais e funcionais, promovendo
          uniformidade e usabilidade.
        </h2>
        <h2>
          Ao seguir essas diretrizes, garantimos que todos os componentes da interface não apenas atendam aos padrões
          estéticos da marca, mas também ofereçam uma experiência de usuário eficiente e agradável.
        </h2>
      </div>
    </div>
    <div class="content">
      <h1>Princípios</h1>
      <h2>
        Nosso guia de estilo segue princípios fundamentais para garantir a qualidade das interfaces. A consistência é
        essencial para manter a uniformidade visual e funcional em toda a interface. A clareza é priorizada para
        garantir que todos os elementos sejam facilmente compreensíveis e utilizáveis. A acessibilidade é fundamental,
        assegurando que a interface seja utilizável por todos, incluindo pessoas com deficiências. A eficiência é
        buscada para facilitar interações rápidas e intuitivas para os usuários. Finalmente, a estética é mantida
        alinhada com a identidade da marca, criando uma experiência visualmente agradável.
      </h2>
    </div>
  </section>
</template>

<style lang="scss" scoped>
section {
  display: grid;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-7) var(--spacing-20);
  background: var(--gray-white);

  .content {
    display: grid;
    gap: var(--spacing-2);

    h1 {
      color: var(--gray-50) 0;
      font-size: var(--font-3xl);
      font-weight: var(--weight-extrabold);
    }

    h2 {
      color: var(--gray-50) 0;
      font-size: var(--font-base);
      font-weight: var(--weight-medium);
      @media (max-width: 768px) {
        line-height: 1.4;
      }
    }

    div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-3);
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
