hochzeit/src/views/HomeView.vue

<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
          })
  const now = new Date();
  const newYear = new Date(2025, 6, 6, 11, 13);
  const time = newYear.getTime() - now.getTime();
</script>

<template>
  <main>
    <div class="components">
      <div v-if="time < 0" class="component component-dark">
        <h2>{{t("heiraten.sharePhotos")}}</h2>
        <h3>{{t("heiraten.sharePhotosDescription")}}</h3>
        <div class="button-container">
          <a class="button" href="https://nextcloud.kornblum.one/s/nbAKwEjnBN2sxsT" target="_blank">

            <img src="@/assets/images/upload icon.png" alt="Share Icon" width="200" height="197"/>
            {{t("heiraten.sharePhotos")}}
          </a>

        </div>
      </div>
      <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 v-if="time > 0" class="component component-dark">
          <Countdown :time="time"/>
      </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;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #6495ed;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 25px;
  width: 100%;
  height: 100%;
}
.button img{
  border-radius: 5px;
}

.button-container{
  text-align: center;
  vertical-align: middle;
  margin-top: 20px;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

</style>