Ordnerstruktur verbessert

src/App.vue

@@ -1,6 +1,5 @@
 <script lang="js">
 import { RouterView } from 'vue-router';
-import Navbar from './Navbar.vue';
 import './assets/parallax/jarallax.js';
 import './assets/bootstrap/js/bootstrap.bundle.min.js';
 import './assets/dropdown/js/navbar-dropdown.js';
@@ -14,16 +13,13 @@ import './assets/formoid/formoid.min.js';
 
 export default {
     components: {
-        RouterView,
+        RouterView
-        Navbar
     }
 }
 </script>
 
 <template>
     <!-- Haupt-Component -->
-     <!-- Navigationsleiste, Footer, Klönkasten etc. -->
-     
     <RouterView/>
 </template>
 

src/Main.vue

@@ -1,123 +0,0 @@
-<script lang="ts">
-import Navbar from "./Navbar.vue";
-import Modal from "./Modal.vue";
-import Embla from "./Embla.vue";
-import Umgebung from "./Umgebung.vue";
-import Footer from "./Footer.vue";
-import RitzenbergenLib from "./ritzenbergenlib.ts";
-import Willkommen from "./Willkommen.vue";
-import Bilderbuch from "./Bilderbuch.vue";
-import Forms from "./Forms.vue";
-import Events from "./Events.vue";
-
-export default {
-  components: {
-    Navbar,
-    Modal,
-    Embla,
-    Umgebung,
-    Footer,
-    Willkommen,
-    Bilderbuch,
-    Forms,
-    Events
-  },
-
-  data() {
-    return {
-      RitzenbergenLib,
-    };
-  },
-  
-};
-</script>
-
-<template>
-  <Navbar />
-  <section
-    class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
-    id="hero-17-u6k7q0xIhk"
-  >
-    <div
-      class="mbr-overlay"
-      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
-    ></div>
-    <div class="container-fluid">
-      <div class="row">
-        <div class="content-wrap col-12 col-md-10">
-          <h1
-            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
-          >
-            <strong>Willkommen auf ritzenbergen.de</strong>
-          </h1>
-          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
-            Dies ist eine private Homepage über das Dorfleben in Amedorf und
-            Ritzenbergen
-          </p>
-          <div class="mbr-section-btn">
-            <a
-              class="btn btn-white-outline display-7"
-              href="#gallery-9-u6k7q0xbqP"
-              >Erkunden</a
-            >
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="features023 cid-u6k7q0xclF" id="metrics-1-u6k7q0xclF">
-    <div class="container">
-      <div class="row content-row justify-content-center">
-        <div
-          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
-        >
-          <div class="item-wrapper"></div>
-        </div>
-        <div
-          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
-        >
-          <div class="item-wrapper"></div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <Events/>
-
-  <Forms/>
-      
-
-      <Bilderbuch/>
-
-  <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12">
-
-          <Embla :src="[
-            RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'),
-            RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=5'),
-            RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=5'),
-            RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=5'),
-            'http://ritzenbergen.de/Fotos/hauptfoto.jpg'
-          ]" />
-        </div>
-      </div>
-    </div>
-  </section>
-
-
-
-
-  <Willkommen/>
-
-
-  <br>
-  <br>
-
-
-  <Umgebung/>
-  <Footer/>
-
-</template>
-
-<style lang="css" scoped></style>

src/assets/mobirise/css/additional.scss

@@ -36,7 +36,7 @@ img,
 }
 body, #app {
   font-family: 'Inter Tight';
-  background: color-mix(in srgb, $dominant-color 10%, transparent);
+  /* background: color-mix(in srgb, $dominant-color 10%, transparent); */
 }
 
 .display-1 {

src/components/Embla.vue

@@ -1,6 +1,6 @@
 <script setup>
 import emblaCarouselVue from "embla-carousel-vue";
-import RitzenbergenLib from "./ritzenbergenlib.ts";
+import RitzenbergenLib from "../ritzenbergenlib.ts";
 import { onMounted, ref } from "vue";
 import EmblaItem from "./EmblaItem.vue";
 

src/components/Modal.vue

@@ -14,6 +14,6 @@
         </div>
 </template>
 <style lang="css" scoped>
-    @import "assets/modal";
+    @import "../assets/modal";
 
 </style>

src/components/Navbar.vue

@@ -10,7 +10,7 @@ export default {};
             <a href="/">
               <img
                 class="navbar-logo-img"
-                src="./assets/RitzenbergenOrtsschild.png"
+                src="../assets/RitzenbergenOrtsschild.png"
                 style="height: 60px; padding-left: 5px"
               />
             </a>

src/components/startseite/Bilderbuch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import RitzenbergenLib from "./ritzenbergenlib.ts";
+import RitzenbergenLib from "../../ritzenbergenlib.ts";
 export default {
     data() {
         return {

src/components/startseite/Events.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
-import RitzenbergenLib from "./ritzenbergenlib.ts";
+import RitzenbergenLib from "../../ritzenbergenlib.ts";
 import striptags from "striptags";
 import moment, { Moment } from "moment";
-import Modal from "./Modal.vue";
+import Modal from "../Modal.vue";
 export default {
   data() {
     let openedModals: number[] = [];

src/components/startseite/Willkommen.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+
+export default {
+    
+}
+
+</script>
+<template>
+    <section
+    class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
+    id="hero-17-u6k7q0xIhk"
+  >
+    <div
+      class="mbr-overlay"
+      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
+    ></div>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="content-wrap col-12 col-md-10">
+          <h1
+            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
+          >
+            <strong>Willkommen auf ritzenbergen.de</strong>
+          </h1>
+          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
+            Dies ist eine private Homepage über das Dorfleben in Amedorf und
+            Ritzenbergen
+          </p>
+          <div class="mbr-section-btn">
+            <a
+              class="btn btn-white-outline display-7"
+              href="#gallery-9-u6k7q0xbqP"
+              >Erkunden</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style scoped>
+
+</style>

src/router/index.ts

@@ -2,7 +2,7 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 
 
 const routes = [
-  { path: '/', component: () => import('../Main.vue') }
+  { path: '/', component: () => import('../views/Main.vue') }
 ]
 
 export default createRouter({

src/views/Main.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import Navbar from "../components/Navbar.vue";
+import Modal from "../components/Modal.vue";
+import Embla from "../components/Embla.vue";
+import Umgebung from "../components/startseite/Umgebung.vue";
+import Footer from "../components/Footer.vue";
+import RitzenbergenLib from "../ritzenbergenlib.ts";
+import WillkommenText from "../components/startseite/WillkommenText.vue";
+import Bilderbuch from "../components/startseite/Bilderbuch.vue";
+import Forms from "../components/startseite/Forms.vue";
+import Events from "../components/startseite/Events.vue";
+import Willkommen from "../components/startseite/Willkommen.vue";
+
+export default {
+  components: {
+    Navbar,
+    Modal,
+    Embla,
+    Umgebung,
+    Footer,
+    WillkommenText,
+    Bilderbuch,
+    Forms,
+    Events,
+    Willkommen
+  },
+
+  data() {
+    return {
+      RitzenbergenLib,
+    };
+  },
+  
+};
+</script>
+
+<template>
+  <!-- Startseite -->
+  <Navbar />
+  <Willkommen/>
+  
+  
+  <Events style="margin-top: 120px;"/>
+
+  <Forms/>
+      
+
+  <Bilderbuch/>
+
+
+
+  <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+
+          <Embla :src="[
+            RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=5'),
+            'http://ritzenbergen.de/Fotos/hauptfoto.jpg'
+          ]" />
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+
+
+  <WillkommenText/>
+
+
+  <br>
+  <br>
+
+
+  <Umgebung/>
+  <Footer/>
+
+</template>
+
+<style lang="css" scoped></style>