Adding features
This commit is contained in:
parent
600fef2b7c
commit
2b55ca4104
75 changed files with 9796 additions and 2759 deletions
|
|
@ -1,306 +1,278 @@
|
|||
<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."
|
||||
<PageHeader
|
||||
title="About Our Membership Circles"
|
||||
subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
|
||||
theme="blue"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<!-- About Ghost Guild -->
|
||||
<!-- How Ghost Guild Works -->
|
||||
<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>
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
How Ghost Guild Works
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Everyone gets everything. Your circle reflects where you are in
|
||||
your cooperative journey. Your financial contribution reflects
|
||||
what you can afford. These are completely separate choices.
|
||||
</p>
|
||||
|
||||
<!-- 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>
|
||||
<ul
|
||||
class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 space-y-3 mb-12"
|
||||
>
|
||||
<li>
|
||||
<strong>Equal access:</strong> The entire knowledge commons, all
|
||||
events, and full community participation
|
||||
</li>
|
||||
<li>
|
||||
<strong>Equal voice:</strong> One member, one vote in all
|
||||
decisions
|
||||
</li>
|
||||
<li>
|
||||
<strong>Solidarity economics:</strong> Pay what you can
|
||||
($0-50+/month), take what you need
|
||||
</li>
|
||||
<li>
|
||||
<strong>Value Flow integration:</strong> Contribute your skills,
|
||||
time, and knowledge - not just money
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Who It's For -->
|
||||
<!-- Find Your Circle -->
|
||||
<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
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Find Your Circle
|
||||
</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 class="text-lg text-gray-700 dark:text-gray-300 mb-12">
|
||||
Circles help us provide relevant guidance and connect you with
|
||||
others at similar stages. Choose based on where you are, not what
|
||||
you want to access.
|
||||
</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
|
||||
<div class="space-y-12">
|
||||
<!-- Community Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Community Circle
|
||||
</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 class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
You're exploring what cooperatives could mean for your work
|
||||
</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 class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
Where you might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>
|
||||
Curious about alternatives to traditional studio structures
|
||||
</li>
|
||||
<li>Researching cooperative principles</li>
|
||||
<li>Considering if a co-op is right for you</li>
|
||||
<li>Supporting the movement as an ally</li>
|
||||
</ul>
|
||||
</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 class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
We'll help you navigate:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Understanding cooperative basics</li>
|
||||
<li>Connecting with others asking similar questions</li>
|
||||
<li>Exploring real examples from game studios</li>
|
||||
<li>Deciding your next steps</li>
|
||||
</ul>
|
||||
</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>
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
You might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Individual game workers</li>
|
||||
<li>Researchers and students</li>
|
||||
<li>Industry allies and supporters</li>
|
||||
<li>Anyone co-op-curious</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||||
Researchers & Advocates
|
||||
|
||||
<!-- Founder Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Founder Circle
|
||||
</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 class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
You're actively building or transitioning to a cooperative model
|
||||
</p>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
Where you might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Forming a new cooperative studio</li>
|
||||
<li>Converting an existing studio to a co-op</li>
|
||||
<li>Preparing to apply for the Peer Accelerator</li>
|
||||
<li>Working through governance and structure decisions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
We'll help you navigate:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Practical implementation challenges</li>
|
||||
<li>Governance document creation</li>
|
||||
<li>Financial planning for co-ops</li>
|
||||
<li>Peer connections with other founders</li>
|
||||
<li>Balancing ideals with sustainability</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
Two paths available:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>
|
||||
<strong>Peer Accelerator Prep Track:</strong> Structured
|
||||
preparation for the PA program
|
||||
</li>
|
||||
<li>
|
||||
<strong>Indie Track:</strong> Self-paced development for
|
||||
alternative pathways
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
You might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Founding teams</li>
|
||||
<li>Studios in transition</li>
|
||||
<li>PA program applicants</li>
|
||||
<li>Solo founders exploring structures</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Practitioner Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Practitioner Circle
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
You're operating a cooperative and contributing to the field
|
||||
</p>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
Where you might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Running an established cooperative studio</li>
|
||||
<li>Graduated from the Peer Accelerator</li>
|
||||
<li>Mentoring other cooperatives</li>
|
||||
<li>Advancing cooperative practices in games</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
We'll help you navigate:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Advanced operational challenges</li>
|
||||
<li>Opportunities to mentor and teach</li>
|
||||
<li>Contributing to best practices</li>
|
||||
<li>Cross-pollination with other co-ops</li>
|
||||
<li>Research and publication opportunities</li>
|
||||
<li>Co-op to co-op collaboration</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
You might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<li>Peer Accelerator alumni</li>
|
||||
<li>Established co-op members</li>
|
||||
<li>Industry mentors</li>
|
||||
<li>Cooperative researchers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Our Values -->
|
||||
<!-- Important Notes -->
|
||||
<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
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
Important Notes
|
||||
</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.
|
||||
<div class="space-y-6 text-lg text-gray-700 dark:text-gray-300">
|
||||
<p>
|
||||
<strong>Movement between circles is fluid.</strong> As you move
|
||||
along in your journey, you can shift circles anytime. Just let us
|
||||
know.
|
||||
</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>
|
||||
<strong>Your contribution is separate from your circle.</strong>
|
||||
Whether you contribute $0 or $50+/month, you get full access to
|
||||
everything. Choose based on your financial capacity, not your
|
||||
circle.
|
||||
</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>
|
||||
<strong>Not sure which circle?</strong> Start with Community - you
|
||||
can always move. Or email us and we'll chat about what makes sense
|
||||
for you.
|
||||
</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>
|
||||
|
|
@ -309,4 +281,4 @@
|
|||
|
||||
<script setup>
|
||||
// No specific logic needed for the about page at this time
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue