<template>
  <div
    class="bg-gradient-to-r from-indigo-50 to-white dark:from-gray-900 dark:to-gray-950 pt-36 pb-16 sm:pt-36 sm:pb-20"
  >
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0">
        <p
          class="text-medium font-semibold leading-7 text-indigo-600 dark:text-indigo-400"
        >
          {{ h3data }}
        </p>
        <h2
          class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl"
        >
          {{ h2data }}
        </h2>
        <p class="mt-2 text-medium leading-8 text-gray-600 dark:text-gray-300">
          {{ h1data }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Props definition - no changes needed here
const {
  h1data = 'SOCIAL SERVICE | FILM PRODUCTION | DEVELOPMENT',
  h2data = 'SubHeader Title | SubHeader Title',
  h3data = 'SOCIAL COOPERATIVE',
} = defineProps<{
  h1data?: string;
  h2data?: string;
  h3data?: string;
}>();
</script>
