115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Experimental Hero Section -->
|
|
<section class="mb-24">
|
|
<div class="relative">
|
|
<!-- Large artistic title -->
|
|
<h1
|
|
class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
|
|
>
|
|
Become a Ghostie
|
|
</h1>
|
|
|
|
<!-- Floating subtitle -->
|
|
<div class="mb-16">
|
|
<p class="text-ghost-100 text-lg max-w-md">
|
|
A peer community for creatives and game devs<br />
|
|
exploring cooperative models
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Decorative elements -->
|
|
<div
|
|
class="absolute top-0 right-0 w-32 h-32 border border-ghost-800 rounded-full opacity-20"
|
|
/>
|
|
<div
|
|
class="absolute top-20 -left-8 w-16 h-px bg-whisper-500 opacity-40"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Join Section - Offset Layout -->
|
|
<section class="mb-32 relative">
|
|
<div>
|
|
<NuxtLink
|
|
to="/join"
|
|
class="inline-block px-8 py-3 border border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
|
|
>
|
|
Join Us Today →
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Decorative corner element -->
|
|
<div
|
|
class="absolute -right-4 top-0 w-20 h-20 border-t border-r border-ghost-800 opacity-30"
|
|
/>
|
|
</section>
|
|
|
|
<!-- Circles - Asymmetrical Grid -->
|
|
<section class="mb-32">
|
|
<div class="space-y-8">
|
|
<div
|
|
v-for="(circle, index) in circles"
|
|
:key="circle.value"
|
|
class="flex gap-8 items-start"
|
|
>
|
|
<!-- Content -->
|
|
<div class="flex-1 max-w-lg">
|
|
<h3 class="text-xl text-ghost-100 mb-3">{{ circle.label }}</h3>
|
|
<p class="text-ghost-200 text-sm leading-relaxed mb-4">
|
|
{{ circle.description }}
|
|
</p>
|
|
|
|
<!-- Features as inline text -->
|
|
<div class="text-sm text-ghost-400">
|
|
<span v-for="(feature, i) in circle.features" :key="feature">
|
|
{{ feature
|
|
}}<span v-if="i < circle.features.length - 1"> • </span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side accent -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Join? - Diagonal Layout -->
|
|
<section class="mb-32 relative">
|
|
<div class="transform -rotate-1">
|
|
<h2 class="text-3xl font-light text-ghost-200 mb-12">Why Join?</h2>
|
|
</div>
|
|
|
|
<div class="ml-12 relative">
|
|
<div
|
|
class="absolute -left-4 top-0 w-32 h-px bg-whisper-500 opacity-30 transform rotate-12"
|
|
/>
|
|
|
|
<div class="max-w-2xl">
|
|
<p class="text-ghost-300 leading-loose text-lg mb-8">
|
|
Ghost Guild is Baby Ghosts' membership program, and a community of
|
|
game makers building studios that center workers, not just profits.
|
|
</p>
|
|
|
|
<p class="text-ghost-400 leading-relaxed ml-8">
|
|
There's space for you no matter where you are in your cooperative
|
|
journey and no matter where in the world you are! You'll find peers,
|
|
resources, and support here.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute -bottom-8 right-0 text-6xl text-ghost-800 opacity-20 font-bold"
|
|
>
|
|
?
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCircleOptions } from "~/config/circles";
|
|
|
|
const circles = getCircleOptions();
|
|
</script>
|