Bilder hinzugefügt, Events angefangen zu reparieren

src/Main.vue

@@ -1,11 +1,148 @@
 <script lang="ts">
-
+import Navbar from "./Navbar.vue";
+import striptags from "striptags";
+export default {
+  components: {
+    Navbar,
+  },
+  computed: {
+    events() {
+      return [
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "text",
+            content: "<h1>Test</h1>",
+            link: null,
+            foto: "erntefest/2011/pic08.jpg"
+        }
+      ];
+    },
+  },
+  methods:{
+    vorschautext(content:string) {
+        let stripped=striptags(content);
+        let vorschaulen=30;
+        if(stripped.length>vorschaulen){
+            return stripped.substring(0,vorschaulen)+"...";
+        }else{
+            return stripped;
+        }
+    },
+    format_date(date: string){
+        
+    }
+  }
+};
 </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>
+  <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
+    <div class="container-fluid">
+      <div class="row justify-content-center mb-5">
+        <div class="col-12 content-head">
+          <div class="mbr-section-head">
+            <h4
+              class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+            >
+              <strong>Termine & Neuigkeiten</strong>
+            </h4>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <!-- Events -->
 
+        <h5 class="align-center" v-if="events.length == 0">
+          Es stehen keine Events an.
+        </h5>
+        <!--HTML-->
+        <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
+          <div class="item-wrapper">
+            <div class="item-img mb-3">
+              <img :src="'../bilder/'+event.foto" />
+            </div>
+            <div class="item-content align-left">
+              <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
+                <strong
+                  ><a
+                    class="text-black fw-bold"
+                    @click.prevent
+                    :data-id="event.id"
+                    >{{ event.eventname }}</a
+                  ></strong
+                >
+              </h6>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ event.datum }}
+              </p>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ vorschautext(event.content) }}
+              </p>
+              <div class="mbr-section-btn item-footer">
+                <button
+                  class="btn item-btn btn-primary display-7 modal-open-btn"
+                  :data-id="event.id"
+                >
+                  Mehr
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        </div>
+    </div>
+  </section>
 </template>
 
-<style lang="css" scoped>
-
-</style>
+<style lang="css" scoped></style>