Enhance application structure: Add runtime configuration for environment variables, integrate new dependencies for Cloudinary and UI components, and refactor member management features including improved forms and member dashboard. Update styles and layout for better user experience.
This commit is contained in:
parent
6e7e27ac4e
commit
e4a0a9ab0f
61 changed files with 7902 additions and 950 deletions
|
|
@ -1,48 +1,104 @@
|
|||
<!-- 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>
|
||||
<!-- Hero Section -->
|
||||
<PageHeader
|
||||
title="Discover Ghost Guild"
|
||||
subtitle="A community for game developers exploring cooperative models"
|
||||
theme="blue"
|
||||
size="hero"
|
||||
:show-interactive-area="true"
|
||||
interactive-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
/>
|
||||
|
||||
<!-- Join Us Today -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<UContainer>
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
|
||||
Join Us Today
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="h-2 bg-blue-500 rounded-full mx-auto max-w-sm" />
|
||||
<div class="h-12 bg-blue-500 rounded-xl mx-auto max-w-xs flex items-center justify-center">
|
||||
<UButton to="/join" size="lg" color="primary" class="text-white font-semibold">
|
||||
Get Started
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- About Our Circles -->
|
||||
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<UContainer>
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
||||
About Our Circles
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<UCard v-for="circle in circles" :key="circle.value" class="h-full">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div v-if="circle.value === 'community'" class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
||||
<div v-else-if="circle.value === 'founder'" class="w-8 h-8 bg-blue-500 flex items-center justify-center">
|
||||
<div class="w-4 h-1 bg-white" />
|
||||
<div class="w-1 h-4 bg-white absolute" />
|
||||
</div>
|
||||
<div v-else class="w-8 h-8 bg-blue-500 rounded" />
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ circle.label }}</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p class="text-gray-600 dark:text-gray-300">{{ circle.description }}</p>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-blue-500 rounded-full" />
|
||||
<div class="h-1 bg-blue-300 rounded-full" />
|
||||
<div class="h-1 bg-blue-200 rounded-full" />
|
||||
</div>
|
||||
|
||||
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||
<li v-for="feature in circle.features" :key="feature" class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>{{ feature }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Why Join? -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<UContainer>
|
||||
<div class="text-center max-w-4xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
|
||||
Why Join?
|
||||
</h2>
|
||||
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-12 border border-blue-200 dark:border-blue-800">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="h-2 bg-blue-500 rounded-full mb-8" />
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
import { getCircleOptions } from '~/config/circles'
|
||||
|
||||
const circles = getCircleOptions()
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue