countdown and styling

package-lock.json

@@ -8,6 +8,7 @@
       "name": "hochzeit",
       "version": "0.0.0",
       "dependencies": {
+        "@chenfengyuan/vue-countdown": "^2.1.3",
         "axios": "^1.8.3",
         "magic-string": "^0.30.17",
         "pinia": "^3.0.1",
@@ -541,6 +542,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chenfengyuan/vue-countdown": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@chenfengyuan/vue-countdown/-/vue-countdown-2.1.3.tgz",
+      "integrity": "sha512-BAsflvU+jYaOUq+t3j4p4nNBNen0YSFzeOT2ffsxzG7/szvCzrM1S2wHmj/476Arqf4F28YEee95Wnng/CVqCA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@chenfengyuan/vue-countdown": "^2.1.3",
     "axios": "^1.8.3",
     "magic-string": "^0.30.17",
     "pinia": "^3.0.1",

src/assets/css/main.css

@@ -21,7 +21,6 @@ a,
 
 main{
   display: block;
-  padding: 0 16px;
 }
 main > :last-child{
   margin-bottom: 90px;
@@ -36,6 +35,7 @@ main > :last-child{
 
 .component{
   background-color: transparent;
+  min-height: 500px;
 }
 
 

src/components/Countdown.vue

@@ -0,0 +1,83 @@
+<template>
+    <vue-countdown :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
+    <div class="time-box">
+
+    
+       <div class="time">
+        <div class="time-number">{{ days }}</div>
+        <div class="time-label">{{ t('Tage') }}</div>
+       </div>
+       <div class="time">
+        <div class="time-number">{{ hours }}</div>
+        <div class="time-label">{{ t('Stunden') }}</div>
+       </div> 
+       <div class="time">
+        <div class="time-number">{{ minutes }}</div>
+        <div class="time-label">{{ t('Minuten') }}</div>
+       </div> 
+       <div class="time">
+        <div class="time-number">{{ seconds }}</div>
+        <div class="time-label">{{ t('Sekunden') }}</div>
+       </div> 
+       
+     </div>
+       
+       
+       
+    </vue-countdown>
+</template>
+
+<style>
+.time-box{
+    height: 500px;
+    width: 500px;
+    margin:0 auto;
+}
+@media (min-width: 1024px) {
+    .time-box{
+        padding-top:250px;
+        width: 1000px;
+    }
+}
+
+
+.time{
+    height: 200px;
+    width: 200px;
+    margin: 25px;
+    text-align: center;
+    background-color: #6495ed;
+    float: left;
+    border-radius: 22px;
+}
+
+.time-number{
+    font-size: 86px;
+    font-weight: 600;
+    line-height: normal;
+    padding-top: 40px;
+}
+
+</style>
+  
+  <script lang="ts">
+  import { useI18n } from 'vue-i18n'
+  export default {
+    data() {
+      const now = new Date();
+      const newYear = new Date(2025, 6, 11, 14, 30);
+      
+      return {
+        time: newYear.getTime() - now.getTime(),
+      }
+    },
+    setup() {
+        const { t } = useI18n({
+            inheritLocale: true
+          })
+          return{
+            t
+          }
+    }
+  };
+  </script>

src/locales/en.json

@@ -1,5 +1,9 @@
 {
     "Home":"Home",
     "About":"About",
-    "Welcome":"Welcome"
+    "Welcome":"Welcome",
+    "Tage": "Days",
+    "Stunden": "Hours",
+    "Minuten": "Minutes",
+    "Sekunden": "Seconds"
 }

src/main.ts

@@ -6,6 +6,7 @@ import router, { loadDynamicPages } from './router'
 import { createPinia } from 'pinia'
 // i18n
 import { i18n } from "./i18n";
+import VueCountdown from '@chenfengyuan/vue-countdown';
 
 const pinia = createPinia()
 const app = createApp(App)
@@ -15,5 +16,6 @@ app.use(pinia)
 
 await loadDynamicPages(localStorage.getItem('lang') || 'de')
 app.use(router)
+app.component(VueCountdown.name!, VueCountdown)
    
 app.mount('#app')

src/views/HomeView.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-  import logo from '../assets/images/logo.svg'
+  import logo from '../assets/images/logo-blue.svg'
+  import Countdown from '@/components/Countdown.vue';
 </script>
 
 <template>
   <main>
     <div class="components"> 
+      <div class="component">
+        <img width="500px" style="margin: 0 auto; display: block;"
+                    data-original="{{ item.img }}"
+                    v-bind:src="logo"
+                    class="lazy" alt="">
+      </div>
       <div class="component">
         
         <!--<div style="width: 100%; height: 100%;">
@@ -13,12 +20,38 @@
                     v-bind:src="logo"
                     class="lazy" alt="">
         </div>-->
+        <h3>WIR HEIRATEN</h3>
+        <h2>11 | JULI | 2025</h2>
         <h1>Judith & Fritzi</h1>
       </div>
+      <div class="component component-dark">
+          <Countdown/>
+      </div>
     </div>
   </main>
 </template>
 
 <style>
-  
+  h1{
+    color: #6495ed;
+    font-size: 84px;
+    padding: 40px 0px;
+  }
+  @media (min-width: 750px) {
+    h1{
+      font-size: 128px;
+    }
+}
+  h2{
+    margin-top: 0px ;
+    color: #6495ed;
+    text-align: center;
+    font-size: 46px;
+  }
+  h3{
+    margin-bottom: 0px ;
+    font-size: 32px;
+    text-align: center;
+    color: #6495ed;
+  }
 </style>