<script setup lang="ts">defineProps<{title?: stringdescription?: stringimage?: stringbuttons: {  title: string  url: string  color: string  props: Record<string, any>}[]}>()</script><template><section  class="py-[94px]">  <div class="container mx-auto px-4 2xl:px-0">    <h1      v-motion      :initial="{ opacity: 0, y: 100 }"      :enter="{        opacity: 1,        y: 0,        scale: 1,        transition: {          type: 'spring',          stiffness: 100,          delay: 400,          damping: 25,          mass: 0.9,        },      }"      class="text-display-md xl:text-display-xl font-semibold md:leading-[4rem] text-gray-900 text-center"    >      {{ title }}    </h1>    <p      v-motion      :initial="{ opacity: 0, y: 100 }"      :enter="{        opacity: 1,        y: 0,        scale: 1,        transition: {          type: 'spring',          stiffness: 100,          delay: 600,          damping: 25,          mass: 0.9,        },      }"      class="text-xl text-gray-600 max-w-3xl text-center mx-auto mt-6"    >      {{ description }}    </p>    <div      v-motion      :initial="{ opacity: 0, y: 100 }"      :enter="{        opacity: 1,        y: 0,        scale: 1,        transition: {          type: 'spring',          stiffness: 100,          delay: 800,          damping: 25,          mass: 0.9,        },      }"      class="flex flex-col md:flex-row items-center gap-3 justify-center mt-12"    >      <VBtn        v-for="btn in buttons"        :key="btn.title"        :color="btn.color"        class="!w-full md:!w-auto"        v-bind="btn.props"      >        {{ btn.title }}      </VBtn>    </div>    <NuxtImg      v-if="image"      v-motion      :src="image"      :alt="title"      :initial="{ opacity: 0, y: 100 }"      :enter="{        opacity: 1,        y: 0,        scale: 1,        transition: {          type: 'spring',          stiffness: 100,          delay: 1000,          damping: 25,          mass: 0.9,        },      }"      class="block mx-auto mt-16"    />  </div></section></template>