312 lines
No EOL
16 KiB
Vue
312 lines
No EOL
16 KiB
Vue
<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> |