<script setup lang="ts">
  import logo from '../assets/images/logo-blue.svg'
  import Countdown from '@/components/CountdownComponent.vue';
  import Timeline from '@/components/TimelineComponent.vue';
  import Components from '@/components/ComponentsComponent.vue';
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n({
            inheritLocale: true
          })
</script>

<template>
  <main>
    <div class="components">
      <div class="component component-bg-top"> </div>
      <div class="component">
        <h3>{{t("heiraten.title")}}</h3>
        <h2>11 | {{t("juli")}} | 2025</h2>
        <img class="logo lazy" data-original="{{ item.img }}" g
                    v-bind:src="logo" alt="">
      </div>

      <div class="component component-bg-bottom"> </div>
      <Components/>
      <div class="component component-dark">
          <Countdown/>
      </div>
      <div class="component component-bg-top"> </div>
      <div class="component component-padding"><Timeline/></div>
      <div class="component component-bg-bottom"> </div>
    </div>
  </main>
</template>

<style scoped>
h3{
  margin: 0px;
}
.logo{
  padding-top: 40px;
}
.component-padding{
  padding: 25px;
}

</style>
