first commit

app/components/PageTitle.vue

@@ -0,0 +1,105 @@
+<template>
+  <!-- Arka plan resmi tam genişlikte section uzerine uygulanir -->
+  <section class="page-title" :style="props.image && imageType === 'background'
+    ? { backgroundImage: `url(${props.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+    : undefined" :class="{ 'has-bg-image': props.image && imageType === 'background' }">
+    <div class="container">
+      <div class="page-title-row">
+        <!-- Inline resim secenegi -->
+        <img v-if="props.image && imageType === 'inline'" :src="props.image" alt="page image"
+          class="page-title-image" />
+
+        <div class="page-title-content">
+          <h1 :style="props.color ? { color: props.color } : undefined">{{ props.title }}</h1>
+          <span v-if="props.subtitle" :style="props.color ? { color: props.color } : undefined">{{ props.subtitle
+            }}</span>
+        </div>
+
+        <nav v-if="props.breadcrumbs?.length" aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li v-for="(item, i) in props.breadcrumbs" :key="i" class="breadcrumb-item"
+              :class="{ active: i === props.breadcrumbs.length - 1 }"
+              :aria-current="i === props.breadcrumbs.length - 1 ? 'page' : undefined">
+              <a v-if="i < props.breadcrumbs.length - 1" :href="item.href">{{ item.label }}</a>
+              <template v-else>{{ item.label }}</template>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface Breadcrumb {
+  label: string
+  href?: string
+}
+
+// Provide defaults for props that are not required
+const props = defineProps<{
+  title: string
+  subtitle?: string
+  breadcrumbs?: Breadcrumb[]
+  // Banner'dan gelen renk (#ff2600 gibi hex deger)
+  color?: string
+  // Arka plan resim URL'si
+  image?: string
+  // Resmin kullanim sekli: background veya inline
+  imageType?: 'background' | 'inline'
+}>()
+
+// computed ile reaktif imageType — prop async güncellendiğinde de doğru çalışır
+const imageType = computed(() => props.imageType ?? 'background')
+</script>
+
+<style scoped>
+/* Tam genislik arka plan - container disinda */
+.page-title {
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+}
+
+.page-title.has-bg-image {
+  color: #fff;
+}
+
+.page-title .container {
+  width: 100%;
+}
+
+.page-title-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 40px 20px;
+  min-height: 400px;
+}
+
+.page-title-image {
+  max-width: 140px;
+  max-height: 140px;
+  object-fit: cover;
+  margin-right: 20px;
+  border-radius: 8px;
+}
+
+.page-title-content h1 {
+  margin: 0 0 6px 0;
+}
+
+@media (max-width: 768px) {
+  .page-title-row {
+    flex-direction: column;
+    text-align: center;
+    min-height: 300px;
+  }
+
+  .page-title-image {
+    margin: 0 0 12px 0;
+  }
+}
+</style>