feat: add profile management flow

app/components/PageHero.vue

@@ -0,0 +1,79 @@
+<template>
+  <section :class="sectionClasses">
+    <div :class="contentClasses">
+      <div :class="['space-y-4', maxWidthClass]">
+        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+          {{ title }}
+        </component>
+        <p v-if="subtitle" class="text-sm opacity-90">{{ subtitle }}</p>
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  gradientFrom: {
+    type: String,
+    default: 'from-primary',
+  },
+  gradientTo: {
+    type: String,
+    default: 'to-secondary',
+  },
+  minHeight: {
+    type: String,
+    default: 'min-h-[25vh]',
+  },
+  maxWidth: {
+    type: String,
+    default: 'max-w-xl',
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  alignment: {
+    type: String,
+    default: 'center',
+    validator: (value) => ['center', 'start', 'end'].includes(value),
+  },
+  headingTag: {
+    type: String,
+    default: 'h1',
+  },
+})
+
+const sectionClasses = computed(() => {
+  const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight]
+  if (props.rounded) {
+    classes.push('rounded-lg')
+  }
+  return classes
+})
+
+const contentClasses = computed(() => {
+  const base = ['hero-content', 'text-neutral-content']
+  if (props.alignment === 'center') {
+    base.push('text-center')
+  } else if (props.alignment === 'start') {
+    base.push('justify-start', 'text-left')
+  } else if (props.alignment === 'end') {
+    base.push('justify-end', 'text-right')
+  }
+  return base
+})
+
+const maxWidthClass = computed(() => props.maxWidth)
+</script>