jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add landing page

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-11-03 11:17:51 +00:00
parent 3fea484585
commit bce86ee840
47 changed files with 7119 additions and 439 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/pages/events/index.vue
View file

@ -60,7 +60,6 @@
<div v-if="event.series?.isSeriesEvent" class="mt-2">
<EventSeriesBadge
:title="event.series.title"
:description="event.series.description"
:position="event.series.position"
:total-events="event.series.totalEvents"
:series-id="event.series.id"
@ -126,7 +125,7 @@
</section>
<!-- Event Series -->
<div v-if="activeSeries.length > 0" class="text-center mb-12">
<div v-if="activeSeries.length > 0" class="text-center my-12">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
Current Event Series
</h2>
@ -140,24 +139,24 @@
v-for="series in activeSeries.slice(0, 6)"
:key="series.id"
:to="`/series/${series.id}`"
class="block bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl p-6 border border-purple-500/30 hover:border-purple-500/50 hover:from-purple-500/15 hover:to-blue-500/15 transition-all duration-300"
class="series-list-item block bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl p-6 border border-ghost-600 dark:border-ghost-600 hover:border-ghost-500 hover:bg-ghost-800/70 dark:hover:bg-ghost-700/50 transition-all duration-300"
>
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-2">
<span
class="text-sm font-semibold text-purple-700 dark:text-purple-300"
class="series-list-item__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
>
Event Series
</span>
<span
class="inline-flex items-center px-2 py-0.5 rounded-md bg-purple-500/20 text-sm font-medium text-purple-700 dark:text-purple-300"
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-ghost-700/50 dark:bg-ghost-600/50 text-sm font-medium text-ghost-200 dark:text-ghost-200"
>
{{ series.eventCount }} events
</span>
</div>
<span
:class="[
'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
'series-list-item__status inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
series.status === 'active'
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
: series.status === 'upcoming'
@ -170,46 +169,51 @@
</div>
<h3
class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2"
class="series-list-item__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
>
{{ series.title }}
</h3>
<p
class="text-sm text-purple-600 dark:text-purple-400 mb-4 line-clamp-2"
class="series-list-item__description text-sm text-ghost-300 dark:text-ghost-300 mb-4 line-clamp-2"
>
{{ series.description }}
</p>
<div class="space-y-2 mb-4">
<div class="series-list-item__events space-y-2 mb-4">
<div
v-for="(event, index) in series.events.slice(0, 3)"
:key="event.id"
class="flex items-center justify-between text-xs"
class="series-list-item__event flex items-center justify-between text-xs"
>
<div class="flex items-center gap-2">
<div
class="w-6 h-6 bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full flex items-center justify-center text-xs font-medium border border-purple-500/30"
class="series-list-item__event-number w-6 h-6 bg-ghost-700/50 dark:bg-ghost-600/50 text-ghost-200 dark:text-ghost-200 rounded-full flex items-center justify-center text-xs font-medium border border-ghost-600 dark:border-ghost-500"
>
{{ event.series?.position || index + 1 }}
</div>
<span class="text-purple-700 dark:text-purple-300 truncate">{{
event.title
}}</span>
<span
class="series-list-item__event-title text-ghost-200 dark:text-ghost-200 truncate"
>{{ event.title }}</span
>
</div>
<span class="text-purple-600 dark:text-purple-400">
<span
class="series-list-item__event-date text-ghost-300 dark:text-ghost-300"
>
{{ formatEventDate(event.startDate) }}
</span>
</div>
<div
v-if="series.events.length > 3"
class="text-xs text-purple-600 dark:text-purple-400 text-center pt-1"
class="series-list-item__more-events text-xs text-ghost-300 dark:text-ghost-300 text-center pt-1"
>
+{{ series.events.length - 3 }} more events
</div>
</div>
<div class="text-sm text-purple-600 dark:text-purple-400">
<div
class="series-list-item__date-range text-sm text-ghost-300 dark:text-ghost-300"
>
{{ formatDateRange(series.startDate, series.endDate) }}
</div>
</NuxtLink>