114 lines
3.3 KiB
Vue
114 lines
3.3 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-stone-100 ethereal-text leading-tight mb-8"
|
|
>
|
|
Become a Ghostie
|
|
</h1>
|
|
|
|
<!-- Floating subtitle -->
|
|
<div class="mb-16">
|
|
<p class="text-stone-100 text-lg max-w-md">
|
|
A 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-stone-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-stone-100 mb-3">{{ circle.label }}</h3>
|
|
<p class="text-stone-200 text-sm leading-relaxed mb-4">
|
|
{{ circle.description }}
|
|
</p>
|
|
|
|
<!-- Features as inline text -->
|
|
<div class="text-sm text-stone-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-stone-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-stone-300 leading-loose text-lg mb-8">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</p>
|
|
|
|
<p class="text-stone-400 leading-relaxed ml-8">
|
|
Sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua.<br />
|
|
Ut enim ad minim veniam, quis nostrud exercitation.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute -bottom-8 right-0 text-6xl text-stone-800 opacity-20 font-bold"
|
|
>
|
|
?
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCircleOptions } from "~/config/circles";
|
|
|
|
const circles = getCircleOptions();
|
|
</script>
|