<!-- pages/index.vue -->
<template>
  <div>
    <UContainer>
      <UHero>
        <template #title>
          Pay what you can, take what you need, build what we dream
        </template>
        <template #description>
          Ghost Guild: A solidarity-based community for game developers
          exploring cooperative models
        </template>
        <template #actions>
          <UButton to="/join" size="lg" color="purple">
            Join Ghost Guild
          </UButton>
        </template>
      </UHero>

      <UGrid :cols="3" class="mt-16 gap-8">
        <UCard v-for="circle in circles" :key="circle.id">
          <template #header>
            <h3>{{ circle.name }}</h3>
          </template>
          {{ circle.description }}
        </UCard>
      </UGrid>
    </UContainer>
  </div>
</template>
