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

Adding features

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-05 16:15:09 +01:00
parent 600fef2b7c
commit 2b55ca4104
75 changed files with 9796 additions and 2759 deletions
Download patch file Download diff file Expand all files Collapse all files

192
app/components/PageHeader.vue
View file

@ -1,65 +1,108 @@
<template>
<header
class="py-16 md:py-24"
:class="[
backgroundClass,
textColorClass
]"
<header
class="relative py-16 md:py-24 bg-cover bg-center"
style="background-image: url(&quot;/background-dither.png&quot;)"
>
<UContainer>
<div class="absolute inset-0 bg-black/40"></div>
<UContainer class="relative z-10">
<div class="text-center max-w-4xl mx-auto">
<h1
<h1
class="font-bold mb-6 md:mb-8"
:class="[
titleSizeClass,
titleColorClass
]"
:class="[titleSizeClass, titleColorClass]"
>
{{ title }}
</h1>
<p
<p
v-if="subtitle"
class="text-lg md:text-xl leading-relaxed mb-8"
:class="subtitleColorClass"
>
{{ subtitle }}
</p>
<!-- Interactive Content Area (for hero sections with carousels, etc.) -->
<div v-if="showInteractiveArea" class="bg-white dark:bg-gray-800 rounded-2xl p-6 md:p-8 shadow-xl border border-blue-200 dark:border-blue-800 mb-12">
<div
v-if="showInteractiveArea"
:class="[
'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
props.theme === 'ethereal'
? 'bg-ghost-800/60 border border-ghost-700 ethereal-glow halftone-texture'
: 'bg-white dark:bg-gray-800 shadow-xl border border-blue-200 dark:border-blue-800',
]"
>
<div class="flex items-center justify-between">
<button
class="p-3 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
<button
:class="[
'p-3 rounded-full transition-all duration-300',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-stone-100 hover:bg-whisper-500 ethereal-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('prev')"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg>
</button>
<div class="text-center flex-1">
<slot name="interactive-content">
<p class="text-lg text-gray-600 dark:text-gray-300">
{{ interactiveContent || 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }}
<p
:class="[
'text-lg',
props.theme === 'ethereal'
? 'text-stone-200'
: 'text-gray-600 dark:text-gray-300',
]"
>
{{
interactiveContent ||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}}
</p>
</slot>
</div>
<button
class="p-3 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
<button
:class="[
'p-3 rounded-full transition-all duration-300',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-stone-100 hover:bg-whisper-500 ethereal-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('next')"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
</div>
<!-- Call to Action Button -->
<div v-if="showCta" class="flex justify-center">
<UButton
<UButton
:to="ctaLink"
:size="ctaSize"
:color="ctaColor"
@ -68,7 +111,7 @@
{{ ctaText }}
</UButton>
</div>
<!-- Custom Content Slot -->
<div v-if="$slots.default">
<slot />
@ -79,94 +122,93 @@
</template>
<script setup>
import { computed } from 'vue'
import { computed } from "vue";
const props = defineProps({
title: {
type: String,
required: true
required: true,
},
subtitle: {
type: String,
default: ''
default: "",
},
theme: {
type: String,
default: 'blue',
validator: (value) => ['blue', 'purple', 'emerald', 'gray'].includes(value)
default: "blue",
validator: (value) =>
["blue", "purple", "emerald", "gray", "ethereal"].includes(value),
},
size: {
type: String,
default: 'large',
validator: (value) => ['small', 'medium', 'large', 'hero'].includes(value)
default: "large",
validator: (value) => ["small", "medium", "large", "hero"].includes(value),
},
showInteractiveArea: {
type: Boolean,
default: false
default: false,
},
interactiveContent: {
type: String,
default: ''
default: "",
},
showCta: {
type: Boolean,
default: false
default: false,
},
ctaText: {
type: String,
default: 'Get Started'
default: "Get Started",
},
ctaLink: {
type: String,
default: '/join'
default: "/join",
},
ctaSize: {
type: String,
default: 'lg'
default: "lg",
},
ctaColor: {
type: String,
default: 'primary'
}
})
default: "primary",
},
});
defineEmits(['prev', 'next'])
defineEmits(["prev", "next"]);
const backgroundClass = computed(() => {
const themes = {
blue: 'bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800',
purple: 'bg-gradient-to-br from-purple-50 to-violet-100 dark:from-gray-900 dark:to-purple-900/20',
emerald: 'bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-emerald-900/20',
gray: 'bg-gray-50 dark:bg-gray-900'
}
return themes[props.theme] || themes.blue
})
blue: "bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800",
purple:
"bg-gradient-to-br from-purple-50 to-violet-100 dark:from-gray-900 dark:to-purple-900/20",
emerald:
"bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-emerald-900/20",
gray: "bg-gray-50 dark:bg-gray-900",
ethereal:
"bg-gradient-to-br from-ghost-900 via-ghost-800 to-whisper-900 halftone-texture",
};
return themes[props.theme] || themes.blue;
});
const titleSizeClass = computed(() => {
const sizes = {
small: 'text-2xl md:text-3xl',
medium: 'text-3xl md:text-4xl',
large: 'text-4xl md:text-5xl',
hero: 'text-5xl md:text-6xl'
}
return sizes[props.size] || sizes.large
})
small: "text-2xl md:text-3xl",
medium: "text-3xl md:text-4xl",
large: "text-4xl md:text-5xl",
hero: "text-5xl md:text-6xl",
};
return sizes[props.size] || sizes.large;
});
const titleColorClass = computed(() => {
const themes = {
blue: 'text-blue-600 dark:text-blue-400',
purple: 'text-purple-600 dark:text-purple-400',
emerald: 'text-emerald-600 dark:text-emerald-400',
gray: 'text-gray-900 dark:text-white'
}
return themes[props.theme] || themes.blue
})
return "text-white";
});
const subtitleColorClass = computed(() => {
return 'text-gray-600 dark:text-gray-300'
})
return "text-white";
});
const textColorClass = computed(() => {
return 'text-gray-900 dark:text-white'
})
</script>
return "text-white";
});
</script>