feat: add zine-direction shared components

app/components/PageHeader.vue

@@ -1,135 +1,33 @@
 <template>
-  <header
-    class="relative py-16 md:py-24 bg-cover bg-center"
-    style="background-image: url('/background-dither.webp')"
-  >
-    <div class="absolute inset-0 bg-black/40"></div>
-    <UContainer class="relative z-10">
-      <div class="text-center max-w-4xl mx-auto">
-        <h1
-          class="font-bold mb-6 md:mb-8 text-white"
-          :class="titleSizeClass"
-        >
-          {{ title }}
-        </h1>
-
-        <p
-          v-if="subtitle"
-          class="text-lg md:text-xl leading-relaxed mb-8 text-white/90"
-        >
-          {{ subtitle }}
-        </p>
-
-        <!-- Interactive Content Area (for hero sections with carousels) -->
-        <div
-          v-if="showInteractiveArea"
-          class="rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture"
-        >
-          <div class="flex items-center justify-between gap-3 md:gap-4">
-            <button
-              class="p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0 bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow"
-              @click="$emit('prev')"
-            >
-              <UIcon name="i-lucide-chevron-left" class="size-5 md:size-6" />
-            </button>
-
-            <div class="text-center flex-1 min-w-0">
-              <slot name="interactive-content">
-                <p class="text-base md:text-lg text-guild-200">
-                  {{ interactiveContent }}
-                </p>
-              </slot>
-            </div>
-
-            <button
-              class="p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0 bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow"
-              @click="$emit('next')"
-            >
-              <UIcon name="i-lucide-chevron-right" class="size-5 md:size-6" />
-            </button>
-          </div>
-        </div>
-
-        <!-- Illustration slot for designer-provided assets -->
-        <div v-if="$slots.illustration" class="mb-8">
-          <slot name="illustration" />
-        </div>
-
-        <!-- Call to Action Button -->
-        <div v-if="showCta" class="flex justify-center">
-          <UButton
-            :to="ctaLink"
-            :size="ctaSize"
-            :color="ctaColor"
-            class="font-semibold"
-          >
-            {{ ctaText }}
-          </UButton>
-        </div>
-
-        <!-- Custom Content Slot -->
-        <div v-if="$slots.default">
-          <slot />
-        </div>
-      </div>
-    </UContainer>
-  </header>
+  <div class="page-header">
+    <h1>{{ title }}</h1>
+    <p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+    <slot />
+  </div>
 </template>
 
 <script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: String,
-    default: 'large',
-    validator: (value) => ['small', 'medium', 'large', 'hero'].includes(value),
-  },
-  showInteractiveArea: {
-    type: Boolean,
-    default: false,
-  },
-  interactiveContent: {
-    type: String,
-    default: '',
-  },
-  showCta: {
-    type: Boolean,
-    default: false,
-  },
-  ctaText: {
-    type: String,
-    default: 'Get Started',
-  },
-  ctaLink: {
-    type: String,
-    default: '/join',
-  },
-  ctaSize: {
-    type: String,
-    default: 'lg',
-  },
-  ctaColor: {
-    type: String,
-    default: 'primary',
-  },
-})
-
-defineEmits(['prev', 'next'])
-
-const titleSizeClass = computed(() => {
-  const sizes = {
-    small: 'text-display-sm',
-    medium: 'text-display',
-    large: 'text-display-lg',
-    hero: 'text-display-xl',
-  }
-  return sizes[props.size] || sizes.large
+defineProps({
+  title: { type: String, required: true },
+  subtitle: { type: String, default: '' },
 })
 </script>
+
+<style scoped>
+.page-header {
+  padding: 24px 28px 16px;
+  border-bottom: 1px dashed var(--border);
+}
+.page-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.2;
+}
+.subtitle {
+  font-size: 12px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+</style>