48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<!-- pages/index.vue -->
|
|
<template>
|
|
<div>
|
|
<UContainer>
|
|
<div class="py-24 text-center">
|
|
<h1 class="text-4xl font-bold mb-4">
|
|
Pay what you can, take what you need, build what we dream
|
|
</h1>
|
|
<p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
|
|
Ghost Guild: A solidarity-based community for game developers
|
|
exploring cooperative models
|
|
</p>
|
|
<UButton to="/join" size="lg" color="primary">
|
|
Join Ghost Guild
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
|
|
<UCard v-for="circle in circles" :key="circle.id">
|
|
<template #header>
|
|
<h3>{{ circle.name }}</h3>
|
|
</template>
|
|
{{ circle.description }}
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const circles = [
|
|
{
|
|
id: 1,
|
|
name: 'Community Circle',
|
|
description: 'Join our community for $15/month. Perfect for indie developers and students looking to connect with like-minded creators.'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Support Circle',
|
|
description: 'Support the community at $25/month. Get access to additional resources and help sustain solidarity memberships.'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Sustaining Circle',
|
|
description: 'Champion our mission at $50/month. Your contribution helps us provide more solidarity spots and expand our programs.'
|
|
}
|
|
];
|
|
</script>
|