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
312
app/pages/about.vue
Normal file
312
app/pages/about.vue
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<PageHeader
|
||||
title="About"
|
||||
subtitle="Learn about Ghost Guild, our mission to support cooperative game development, and the community we're building together."
|
||||
theme="blue"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<!-- About Ghost Guild -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
||||
About Ghost Guild
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Main Description with Progress Bars -->
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800">
|
||||
<div class="space-y-6 mb-8">
|
||||
<div class="h-2 bg-blue-500 rounded-full" />
|
||||
<div class="h-2 bg-blue-400 rounded-full w-5/6" />
|
||||
<div class="h-2 bg-blue-300 rounded-full w-2/3" />
|
||||
</div>
|
||||
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild is a cooperative community dedicated to supporting game developers who want to build sustainable, worker-owned studios. We believe in the power of collaboration and shared ownership to create better working conditions and more innovative games.
|
||||
</p>
|
||||
|
||||
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Our community provides resources, mentorship, and financial support to help developers transition from traditional employment to cooperative ownership models. We're building a network of studios that prioritize worker wellbeing and creative freedom.
|
||||
</p>
|
||||
|
||||
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Through our various circles and contribution-based membership model, we create an inclusive space where developers at all stages of their cooperative journey can find support and guidance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission Statement -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Mission</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. To democratize game development by empowering developers to create worker-owned studios that prioritize sustainability, creativity, and fair compensation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Vision</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. A thriving ecosystem of cooperative game studios that create innovative experiences while providing their worker-owners with meaningful, sustainable careers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Who It's For -->
|
||||
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<UContainer>
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
||||
Who It's For
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild welcomes developers from all backgrounds and experience levels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
||||
<!-- Game Developers -->
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
|
||||
<div class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Game Developers
|
||||
</h3>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="h-1 bg-blue-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-blue-300 rounded-full w-3/4" />
|
||||
<div class="h-1 bg-blue-200 rounded-full w-1/2" />
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Whether you're a solo indie developer, part of a small team, or working at a larger studio, our community provides resources for exploring cooperative models and building sustainable careers in game development.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Studio Founders -->
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center">
|
||||
<div class="w-8 h-8 bg-emerald-500 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Studio Founders
|
||||
</h3>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="h-1 bg-emerald-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-emerald-300 rounded-full w-5/6" />
|
||||
<div class="h-1 bg-emerald-200 rounded-full w-2/3" />
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entrepreneurs and leaders who want to build studios that prioritize worker ownership, democratic decision-making, and sustainable business practices will find mentorship and practical guidance in our community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Allies -->
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
|
||||
<div class="w-8 h-8 bg-purple-500 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Industry Allies
|
||||
</h3>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="h-1 bg-purple-500 rounded-full w-4/5" />
|
||||
<div class="h-1 bg-purple-300 rounded-full w-full" />
|
||||
<div class="h-1 bg-purple-200 rounded-full w-3/5" />
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Investors, publishers, service providers, and other industry professionals who want to support cooperative game development and learn about alternative business models.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Researchers & Advocates -->
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center">
|
||||
<div class="w-8 h-8 bg-yellow-500 rounded-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Researchers & Advocates
|
||||
</h3>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="h-1 bg-yellow-500 rounded-full w-3/4" />
|
||||
<div class="h-1 bg-yellow-300 rounded-full w-full" />
|
||||
<div class="h-1 bg-yellow-200 rounded-full w-1/2" />
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Academics, journalists, and advocates studying cooperative economics, worker ownership, and alternative organizational structures in the creative industries.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Our Values -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<UContainer>
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
||||
Our Values
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. These core principles guide everything we do at Ghost Guild.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Cooperation -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Cooperation
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-blue-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-blue-400 rounded-full w-3/4 mx-auto" />
|
||||
<div class="h-1 bg-blue-300 rounded-full w-1/2 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We believe in the power of working together, sharing knowledge, and supporting each other's success rather than competing for scarce resources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sustainability -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Sustainability
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-emerald-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-emerald-400 rounded-full w-5/6 mx-auto" />
|
||||
<div class="h-1 bg-emerald-300 rounded-full w-2/3 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We prioritize long-term thinking, environmental responsibility, and creating work cultures that support developer wellbeing and work-life balance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Democracy -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Democracy
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-purple-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-purple-400 rounded-full w-4/5 mx-auto" />
|
||||
<div class="h-1 bg-purple-300 rounded-full w-3/5 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We advocate for democratic decision-making processes where all workers have a voice in shaping their workplace and the direction of their studio.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Transparency -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Transparency
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-cyan-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-cyan-400 rounded-full w-3/5 mx-auto" />
|
||||
<div class="h-1 bg-cyan-300 rounded-full w-4/5 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We promote open communication, shared financial information, and clear decision-making processes that build trust and accountability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Innovation -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Innovation
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-orange-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-orange-400 rounded-full w-2/3 mx-auto" />
|
||||
<div class="h-1 bg-orange-300 rounded-full w-5/6 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We encourage creative risk-taking, experimentation with new business models, and innovative approaches to both game development and studio management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Solidarity -->
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Solidarity
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="h-1 bg-red-500 rounded-full w-full" />
|
||||
<div class="h-1 bg-red-400 rounded-full w-4/6 mx-auto" />
|
||||
<div class="h-1 bg-red-300 rounded-full w-3/4 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We stand together in mutual support, recognizing that our individual success is connected to the wellbeing of our entire community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="mt-16 text-center">
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 max-w-2xl mx-auto">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">
|
||||
Join Our Community
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to be part of the cooperative game development movement?
|
||||
</p>
|
||||
<UButton
|
||||
to="/join"
|
||||
size="lg"
|
||||
color="primary"
|
||||
class="px-8"
|
||||
>
|
||||
Get Started
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// No specific logic needed for the about page at this time
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue