styling and backgroud

src/App.vue

@@ -21,11 +21,6 @@ header {
   max-height: 100vh;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
 @media (min-width: 1024px) {
   header {
     display: flex;
@@ -33,10 +28,6 @@ header {
     padding-right: calc(var(--section-gap) / 2);
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   header .wrapper {
     display: flex;
     place-items: flex-start;

src/assets/css/base.css

@@ -62,7 +62,39 @@ h1{
   font-family: 'Great_Vibes';
   color: #6495ed;
   text-align: center;
-  font-size: 60px;
   margin: 0;
+  font-size: 64px;
+  padding: 40px 0px;
+}
+.logo{
+  width: 100%;
+ 
+}
+@media (min-width: 500px) {
+  h1{
+    font-size: 84px;
+  }
+  .logo{
+    width: 500px;
+    display: block;
+    margin: 0 auto;
+  }
+}
+@media (min-width: 750px) {
+  h1{
+    font-size: 128px;
+  }
+}
+h2{
+  margin: 0px ;
+  color: #6495ed;
+  text-align: center;
+  font-size: 46px;
+}
+h3{
+  margin-bottom: 0px ;
+  font-size: 32px;
+  text-align: center;
+  color: #6495ed;
 }
 

src/assets/css/main.css

@@ -38,6 +38,9 @@ main > :last-child{
   min-height: 500px;
 }
 
+.component-text{
+  padding: 0 16px;
+}
 
 .component-cornflower{
   background-color: #6495ed;
@@ -47,3 +50,21 @@ main > :last-child{
   background-color: #181c27;
   color: #fff;
 }
+
+div.component-bg-top{
+  background-image: url(../images/AdobeStock_817967092_2.jpg);
+  background-size: auto 485px;
+  background-position: center -126px;
+  background-repeat: repeat-x;
+  height: 260px;
+  min-height: 260px;
+}
+
+div.component-bg-bottom{
+  background-image: url(../images/AdobeStock_817967092_1.jpg);
+  background-size: auto 485px;
+  background-position: center -81px;
+  background-repeat: repeat-x;
+  height: 260px;
+  min-height: 260px;
+}

src/locales/de.json

@@ -1,5 +1,7 @@
 {
-    "Home":"Zuhause",
+    "Home":"Home",
     "About":"Über Uns",
-    "Welcome":"Wilkommen"
+    "Welcome":"Wilkommen",
+    "heiraten.title": "WIR HEIRATEN",
+    "juli": "JULI"
 }

src/locales/en.json

@@ -5,5 +5,7 @@
     "Tage": "Days",
     "Stunden": "Hours",
     "Minuten": "Minutes",
-    "Sekunden": "Seconds"
+    "Sekunden": "Seconds",
+    "heiraten.title": "WE MARRY",
+    "juli": "JULY"
 }

src/views/HomeView.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
   import logo from '../assets/images/logo-blue.svg'
   import Countdown from '@/components/Countdown.vue';
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n({
+            inheritLocale: true
+          })
 </script>
 
 <template>
   <main>
-    <div class="components"> 
+    <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">
-        <h3>WIR HEIRATEN</h3>
-        <h2>11 | JULI | 2025</h2>
-        <h1>Judith & Fritzi</h1>
-      </div>
+      <div class="component component-bg-bottom">
+       
+        
+      </div> 
       <div class="component component-dark">
           <Countdown/>
       </div>
@@ -23,39 +32,7 @@
 </template>
 
 <style>
-  h1{
-    color: #6495ed;
-    font-size: 64px;
-    padding: 40px 0px;
-  }
-  .logo{
-    width: 100%;
-    display: block;
-    margin: 0 auto;
-  }
-  @media (min-width: 500px) {
-    h1{
-      font-size: 84px;
-    }
-    .logo{
-      width: 500px;
-    }
-}
-  @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>

src/views/PageView.vue

@@ -31,8 +31,14 @@
 
 <template>
     <main>
-        <h1> {{ page?.Title }}</h1>
-        <Content :jsonContent="page?.Content"/>
+        <div class="components">
+            <div class="component component-bg-top"> </div> 
+            <div class="component component-text">
+                <h1> {{ page?.Title }}</h1>
+                <Content :jsonContent="page?.Content"/>
+            </div>
+            <div class="component component-bg-bottom"> </div> 
+        </div>
     </main>
 </template>