add app ocelot-website-hire

2025-12-12 21:05:50 +00:00 · 2023-07-02 15:43:47 +02:00 · 2023-07-02 15:43:47 +02:00 · 07a8df16d5
commit 07a8df16d5
parent b7feb5a18a
54 changed files with 2273 additions and 1 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,12 @@
+module.exports = {
+    extends: [
+      // add more generic rulesets here, such as:
+      // 'eslint:recommended',
+      'plugin:vue/vue3-recommended',
+      // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+    ],
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue/no-unused-vars': 'error'
+    }
+  }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules
+yarn.lock
--- a/README.md
+++ b/README.md
@ -1 +1,24 @@
-# ocelot-website-hire
+# ocelot-website-hire
+
+## Project setup
+```
+yarn
+```
+
+### Compiles and hot-reloads for development
+```
+yarn dev
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
+{
+  "name": "vite-vue3",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "fix": "npm run lint -- --fix",
+    "test": "npm run build && npm run lint"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.7",
+    "bootstrap": "^5.3.0",
+    "vue": "^3.2.47",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-vue": "^9.15.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "vite": "^4.3.9",
+    "vue-loader": "^17.2.2"
+  }
+}
--- a/public/bootstrap.svg
+++ b/public/bootstrap.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/public/ocelots/ocelot1.png
+++ b/public/ocelots/ocelot1.png
--- a/public/ocelots/ocelot10.png
+++ b/public/ocelots/ocelot10.png
--- a/public/ocelots/ocelot11.png
+++ b/public/ocelots/ocelot11.png
--- a/public/ocelots/ocelot12.png
+++ b/public/ocelots/ocelot12.png
--- a/public/ocelots/ocelot13.png
+++ b/public/ocelots/ocelot13.png
--- a/public/ocelots/ocelot14.png
+++ b/public/ocelots/ocelot14.png
--- a/public/ocelots/ocelot15.png
+++ b/public/ocelots/ocelot15.png
--- a/public/ocelots/ocelot16.png
+++ b/public/ocelots/ocelot16.png
--- a/public/ocelots/ocelot17.png
+++ b/public/ocelots/ocelot17.png
--- a/public/ocelots/ocelot18.png
+++ b/public/ocelots/ocelot18.png
--- a/public/ocelots/ocelot19.png
+++ b/public/ocelots/ocelot19.png
--- a/public/ocelots/ocelot2.png
+++ b/public/ocelots/ocelot2.png
--- a/public/ocelots/ocelot20.png
+++ b/public/ocelots/ocelot20.png
--- a/public/ocelots/ocelot21.png
+++ b/public/ocelots/ocelot21.png
--- a/public/ocelots/ocelot22.png
+++ b/public/ocelots/ocelot22.png
--- a/public/ocelots/ocelot23.png
+++ b/public/ocelots/ocelot23.png
--- a/public/ocelots/ocelot24.png
+++ b/public/ocelots/ocelot24.png
--- a/public/ocelots/ocelot25.png
+++ b/public/ocelots/ocelot25.png
--- a/public/ocelots/ocelot26.png
+++ b/public/ocelots/ocelot26.png
--- a/public/ocelots/ocelot27.png
+++ b/public/ocelots/ocelot27.png
--- a/public/ocelots/ocelot28.jpg
+++ b/public/ocelots/ocelot28.jpg
--- a/public/ocelots/ocelot29.png
+++ b/public/ocelots/ocelot29.png
--- a/public/ocelots/ocelot3.jpeg
+++ b/public/ocelots/ocelot3.jpeg
--- a/public/ocelots/ocelot30.png
+++ b/public/ocelots/ocelot30.png
--- a/public/ocelots/ocelot4.jpeg
+++ b/public/ocelots/ocelot4.jpeg
--- a/public/ocelots/ocelot5.jpeg
+++ b/public/ocelots/ocelot5.jpeg
--- a/public/ocelots/ocelot6.jpeg
+++ b/public/ocelots/ocelot6.jpeg
--- a/public/ocelots/ocelot7.jpeg
+++ b/public/ocelots/ocelot7.jpeg
--- a/public/ocelots/ocelot8.jpeg
+++ b/public/ocelots/ocelot8.jpeg
--- a/public/ocelots/ocelot9.png
+++ b/public/ocelots/ocelot9.png
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,13 @@
+<script setup> 
+import NavbarTop from './components/NavbarTop.vue'
+</script>
+<template>
+  <div id="app">
+    <NavbarTop />
+    
+ <router-view />
+  </div> 
+
+</template>
+
+
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
--- a/src/components/NavbarTop.vue
+++ b/src/components/NavbarTop.vue
@ -0,0 +1,35 @@
+<template>
+    <div>
+     <nav class="navbar navbar-expand-md fixed-top">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">Ocelot</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="/features">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/pricing">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/about">About</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown link
+          </a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+</div>
+</template>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,9 @@
+import "bootstrap/dist/css/bootstrap.min.css"
+import { createApp } from 'vue'
+import router from './router'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).use(router).mount('#app')
+
+import "bootstrap/dist/js/bootstrap.js"
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,40 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "../views/Home.vue";
+import About from "../views/About.vue";
+import Features from "../views/Features.vue";
+import Pricing from "../views/Pricing.vue";
+import NotFound from "../views/NotFound.vue";   
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "About",
+    component: About,
+  },
+  {
+    path: "/features",
+    name: "Features",
+    component: Features,
+  },
+  {
+    path: "/pricing",
+    name: "Pricing",
+    component: Pricing,
+  },
+  {
+    path: "/:catchAll(.*)",
+    component: NotFound,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,8 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,89 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,547 @@
+/*
+* Orson http://en.orson.io , autreplanete http://www.autreplanete.com/ 
+*  
+**/
+
+
+// Brand Colors
+$blue: #007bff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #28a745;
+$teal: #20c997;
+$cyan: #17a2b8;
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #868e96;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+$grays: (100: $gray-100, 200: $gray-200, 300: $gray-300, 400: $gray-400, 500: $gray-500, 600: $gray-600, 700: $gray-700, 800: $gray-800, 900: $gray-900);
+$theme-colors: (primary: $blue, secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800);
+$colors: (blue: $blue, indigo: $indigo, purple: $purple, pink: $pink, red: $red, orange: $orange, yellow: $yellow, green: $green, teal: $teal, cyan: $cyan, white: $white, gray: $gray-600,gray-dark: $gray-800);
+$theme-color-interval: 8%;
+
+
+// Spacing
+$spacer: 1rem;
+$spacers: (0: 0, 1: ($spacer * 0.25), 2: ($spacer * 0.5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3));
+$sizes: (25: 25%, 50: 50%, 75: 75%, 100: 100%);
+
+
+// Options
+$enable-rounded: true;
+$enable-shadows: false;
+$enable-gradients: false;
+$enable-transitions: true;
+$enable-hover-media-query: false;
+$enable-grid-classes: true;
+$enable-print-styles: true;
+
+
+// Body
+$body-bg: #000000;
+$body-color: #ffffff;
+
+
+// Links
+$link-color: theme-color('primary');
+$link-decoration: none;
+$link-hover-color: darken($link-color, 15%);
+$link-hover-decoration: underline;
+
+
+// Grid
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
+$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);
+$grid-columns: 12;
+$grid-gutter-width: 30px;
+
+
+// Components
+$line-height-lg: 1.5;
+$line-height-sm: 1.5;
+$border-width: 1px;
+$border-radius: 0.25rem;
+$border-radius-lg: 0.3rem;
+$border-radius-sm: 0.2rem;
+$component-active-color: $white;
+$component-active-bg: theme-color('primary');
+$caret-width: 0.3em;
+$transition-base: all 0.2s ease-in-out;
+$transition-fade: opacity 0.15s linear;
+$transition-collapse: height 0.35s ease;
+
+
+// Fonts
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+$font-family-base: $font-family-sans-serif;
+$font-size-base: 1rem;
+$font-size-lg: 1.25rem;
+$font-size-sm: 0.875rem;
+$font-weight-normal: normal;
+$font-weight-bold: bold;
+$font-weight-base: $font-weight-normal;
+$line-height-base: 1.5;
+$h1-font-size: 2.5rem;
+$h2-font-size: 2rem;
+$h3-font-size: 1.75rem;
+$h4-font-size: 1.5rem;
+$h5-font-size: 1.25rem;
+$h6-font-size: 1rem;
+$headings-margin-bottom: ($spacer / 2);
+$headings-font-family: inherit;
+$headings-font-weight: 500;
+$headings-line-height: 1.1;
+$headings-color: inherit;
+$display1-size: 6rem;
+$display2-size: 5.5rem;
+$display3-size: 4.5rem;
+$display4-size: 3.5rem;
+$display1-weight: 300;
+$display2-weight: 300;
+$display3-weight: 300;
+$display4-weight: 300;
+$display-line-height: $headings-line-height;
+$lead-font-size: 1.25rem;
+$lead-font-weight: 300;
+$small-font-size: 80%;
+$text-muted: $gray-600;
+$blockquote-small-color: $gray-600;
+$blockquote-font-size: ($font-size-base * 1.25);
+$hr-border-color: rgba($black, 0.1);
+$hr-border-width: $border-width;
+$mark-padding: 0.2em;
+$dt-font-weight: $font-weight-bold;
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25);
+$nested-kbd-font-weight: $font-weight-bold;
+$list-inline-padding: 5px;
+$mark-bg: #fcf8e3;
+
+
+// Buttons
+$input-btn-padding-y: 0.5rem;
+$input-btn-padding-x: 0.75rem;
+$input-btn-line-height: 1.25;
+$input-btn-padding-y-sm: 0.25rem;
+$input-btn-padding-x-sm: 0.5rem;
+$input-btn-line-height-sm: 1.5;
+$input-btn-padding-y-lg: 0.5rem;
+$input-btn-padding-x-lg: 1rem;
+$input-btn-line-height-lg: 1.5;
+$btn-font-weight: $font-weight-normal;
+$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075);
+$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color('primary'), 0.25);
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);
+$btn-link-disabled-color: $gray-600;
+$btn-block-spacing-y: 0.5rem;
+$btn-border-radius: $border-radius;
+$btn-border-radius-lg: $border-radius-lg;
+$btn-border-radius-sm: $border-radius-sm;
+$btn-transition: all 0.15s ease-in-out;
+
+
+// Forms
+$input-bg: $white;
+$input-disabled-bg: $gray-200;
+$input-color: $gray-700;
+$input-border-color: rgba($black, 0.15);
+$input-btn-border-width: $border-width;
+$input-box-shadow: inset 0 1px 1px rgba($black, 0.075);
+$input-border-radius: $border-radius;
+$input-border-radius-lg: $border-radius-lg;
+$input-border-radius-sm: $border-radius-sm;
+$input-focus-bg: $input-bg;
+$input-focus-border-color: lighten(theme-color('primary'), 25%);
+$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow;
+$input-focus-color: $input-color;
+$input-placeholder-color: $gray-600;
+$input-height-border: $input-btn-border-width * 2;
+$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2);
+$input-height: calc(#{$input-height-inner} + #{$input-height-border});
+$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2);
+$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border});
+$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2);
+$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border});
+$input-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+$form-text-margin-top: 0.25rem;
+$form-check-margin-bottom: 0.5rem;
+$form-check-input-gutter: 1.25rem;
+$form-check-input-margin-y: 0.25rem;
+$form-check-input-margin-x: 0.25rem;
+$form-check-inline-margin-x: 0.75rem;
+$form-group-margin-bottom: 1rem;
+$input-group-addon-bg: $gray-200;
+$input-group-addon-border-color: $input-border-color;
+$custom-control-gutter: 1.5rem;
+$custom-control-spacer-y: 0.25rem;
+$custom-control-spacer-x: 1rem;
+$custom-control-indicator-size: 1rem;
+$custom-control-indicator-bg: #ddd;
+$custom-control-indicator-bg-size: 50% 50%;
+$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1);
+$custom-control-indicator-disabled-bg: $gray-200;
+$custom-control-description-disabled-color: $gray-600;
+$custom-control-indicator-checked-color: $white;
+$custom-control-indicator-checked-bg: theme-color('primary');
+$custom-control-indicator-checked-box-shadow: none;
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color('primary');
+$custom-control-indicator-active-color: $white;
+$custom-control-indicator-active-bg: lighten(theme-color('primary'), 35%);
+$custom-control-indicator-active-box-shadow: none;
+$custom-checkbox-indicator-border-radius: $border-radius;
+$custom-checkbox-indicator-indeterminate-bg: theme-color('primary');
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color;
+$custom-checkbox-indicator-indeterminate-box-shadow: none;
+$custom-radio-indicator-border-radius: 50%;
+$custom-select-padding-y: 0.375rem;
+$custom-select-padding-x: 0.75rem;
+$custom-select-height: $input-height;
+$custom-select-indicator-padding: 1rem;
+$custom-select-line-height: $input-btn-line-height;
+$custom-select-color: $input-color;
+$custom-select-disabled-color: $gray-600;
+$custom-select-bg: $white;
+$custom-select-disabled-bg: $gray-200;
+$custom-select-bg-size: 8px 10px;
+$custom-select-indicator-color: #333;
+$custom-select-border-width: $input-btn-border-width;
+$custom-select-border-color: $input-border-color;
+$custom-select-border-radius: $border-radius;
+$custom-select-focus-border-color: lighten(theme-color('primary'), 25%);
+$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), 0 0 5px rgba($custom-select-focus-border-color, 0.5);
+$custom-select-font-size-sm: 75%;
+$custom-select-height-sm: $input-height-sm;
+$custom-file-height: 2.5rem;
+$custom-file-width: 14rem;
+$custom-file-focus-box-shadow: 0 0 0 0.075rem $white, 0 0 0 0.2rem theme-color('primary');
+$custom-file-padding-y: 1rem;
+$custom-file-padding-x: 0.5rem;
+$custom-file-line-height: 1.5;
+$custom-file-color: $gray-700;
+$custom-file-bg: $white;
+$custom-file-border-width: $border-width;
+$custom-file-border-color: $input-border-color;
+$custom-file-border-radius: $border-radius;
+$custom-file-box-shadow: inset 0 0.2rem 0.4rem rgba($black, 0.05);
+$custom-file-button-color: $custom-file-color;
+$custom-file-button-bg: $gray-200;
+$custom-file-text: (placeholder: (en: 'Choose file...'), button-label: (en: 'Browse'));
+$form-feedback-valid-color: theme-color('success');
+$form-feedback-invalid-color: theme-color('danger');
+
+
+// Dropdown
+$dropdown-min-width: 10rem;
+$dropdown-padding-y: 0.5rem;
+$dropdown-spacer: 0.125rem;
+$dropdown-bg: $white;
+$dropdown-border-color: rgba($black, 0.15);
+$dropdown-border-width: $border-width;
+$dropdown-divider-bg: $gray-200;
+$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175);
+$dropdown-link-color: $gray-900;
+$dropdown-link-hover-color: darken($gray-900, 5%);
+$dropdown-link-hover-bg: $gray-100;
+$dropdown-link-active-color: $component-active-color;
+$dropdown-link-active-bg: $component-active-bg;
+$dropdown-link-disabled-color: $gray-600;
+$dropdown-item-padding-y: 0.25rem;
+$dropdown-item-padding-x: 1.5rem;
+$dropdown-header-color: $gray-600;
+
+
+// Navs
+$nav-link-padding-y: 0.5rem;
+$nav-link-padding-x: 1rem;
+$nav-link-disabled-color: $gray-600;
+$nav-tabs-border-color: #ddd;
+$nav-tabs-border-width: $border-width;
+$nav-tabs-border-radius: $border-radius;
+$nav-tabs-link-hover-border-color: $gray-200;
+$nav-tabs-link-active-color: $gray-700;
+$nav-tabs-link-active-bg: $body-bg;
+$nav-tabs-link-active-border-color: #ddd;
+$nav-pills-border-radius: $border-radius;
+$nav-pills-link-active-color: $component-active-color;
+$nav-pills-link-active-bg: $component-active-bg;
+
+
+// Navbar
+$navbar-padding-y: ($spacer / 2);
+$navbar-padding-x: $spacer;
+$navbar-brand-font-size: $font-size-lg;
+$nav-link-height: $navbar-brand-font-size * $line-height-base;
+$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
+$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2;
+$navbar-toggler-padding-y: 0.25rem;
+$navbar-toggler-padding-x: 0.75rem;
+$navbar-toggler-font-size: $font-size-lg;
+$navbar-toggler-border-radius: $btn-border-radius;
+$navbar-dark-color: rgba($white, 0.5);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: rgba($white, 1);
+$navbar-dark-disabled-color: rgba($white, 0.25);
+$navbar-dark-toggler-border-color: rgba($white, 0.1);
+$navbar-light-color: rgba($black, 0.5);
+$navbar-light-hover-color: rgba($black, 0.7);
+$navbar-light-active-color: rgba($black, 0.9);
+$navbar-light-disabled-color: rgba($black, 0.3);
+$navbar-light-toggler-border-color: rgba($black, 0.1);
+
+
+// Tables
+$table-cell-padding: 0.75rem;
+$table-cell-padding-sm: 0.3rem;
+$table-bg: transparent;
+$table-accent-bg: rgba($black, 0.05);
+$table-hover-bg: rgba($black, 0.075);
+$table-active-bg: $table-hover-bg;
+$table-border-width: $border-width;
+$table-border-color: $gray-200;
+$table-head-bg: $gray-200;
+$table-head-color: #fff5f5;
+$table-inverse-bg: $gray-900;
+$table-inverse-accent-bg: rgba($white, 0.05);
+$table-inverse-hover-bg: rgba($white, 0.075);
+$table-inverse-border-color: lighten($gray-900, 7.5%);
+$table-inverse-color: $body-bg;
+
+
+// Z Index
+$zindex-dropdown: 1000;
+$zindex-sticky: 1020;
+$zindex-fixed: 1030;
+$zindex-modal-backdrop: 1040;
+$zindex-modal: 1050;
+$zindex-popover: 1060;
+$zindex-tooltip: 1070;
+
+
+// Pagination
+$pagination-padding-y: 0.5rem;
+$pagination-padding-x: 0.75rem;
+$pagination-padding-y-sm: 0.25rem;
+$pagination-padding-x-sm: 0.5rem;
+$pagination-padding-y-lg: 0.75rem;
+$pagination-padding-x-lg: 1.5rem;
+$pagination-line-height: 1.25;
+$pagination-color: $link-color;
+$pagination-bg: $white;
+$pagination-border-width: $border-width;
+$pagination-border-color: #ddd;
+$pagination-hover-color: $link-hover-color;
+$pagination-hover-bg: $gray-200;
+$pagination-hover-border-color: #ddd;
+$pagination-active-color: $white;
+$pagination-active-bg: theme-color('primary');
+$pagination-active-border-color: theme-color('primary');
+$pagination-disabled-color: $gray-600;
+$pagination-disabled-bg: $white;
+$pagination-disabled-border-color: #ddd;
+
+
+// Jumbotron
+$jumbotron-padding: 2rem;
+$jumbotron-bg: $gray-200;
+
+
+// Cards
+$card-spacer-y: 0.75rem;
+$card-spacer-x: 1.25rem;
+$card-border-width: 1px;
+$card-border-radius: $border-radius;
+$card-border-color: rgba($black, 0.125);
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
+$card-cap-bg: rgba($black, 0.03);
+$card-bg: $white;
+$card-img-overlay-padding: 1.25rem;
+$card-deck-margin: ($grid-gutter-width / 2);
+$card-columns-count: 3;
+$card-columns-gap: 1.25rem;
+$card-columns-margin: $card-spacer-y;
+
+
+// Tooltip
+$tooltip-max-width: 200px;
+$tooltip-color: $white;
+$tooltip-bg: $black;
+$tooltip-opacity: 0.9;
+$tooltip-padding-y: 3px;
+$tooltip-padding-x: 8px;
+$tooltip-margin: 0;
+$tooltip-arrow-width: 5px;
+$tooltip-arrow-height: 5px;
+$tooltip-arrow-color: $tooltip-bg;
+
+
+// Popovers
+$popover-inner-padding: 1px;
+$popover-bg: $white;
+$popover-max-width: 276px;
+$popover-border-width: $border-width;
+$popover-border-color: rgba($black, 0.2);
+$popover-box-shadow: 0 5px 10px rgba($black, 0.2);
+$popover-header-bg: darken($popover-bg, 3%);
+$popover-header-color: $headings-color;
+$popover-header-padding-y: 8px;
+$popover-header-padding-x: 14px;
+$popover-body-color: $body-color;
+$popover-body-padding-y: 9px;
+$popover-body-padding-x: 14px;
+$popover-arrow-width: 10px;
+$popover-arrow-height: 5px;
+$popover-arrow-color: $popover-bg;
+$popover-arrow-outer-width: ($popover-arrow-width + 1px);
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05);
+
+
+// Badges
+$badge-color: $white;
+$badge-font-size: 75%;
+$badge-font-weight: $font-weight-bold;
+$badge-padding-y: 0.25em;
+$badge-padding-x: 0.4em;
+$badge-pill-padding-x: 0.6em;
+$badge-pill-border-radius: 10rem;
+
+
+// Modals
+$modal-inner-padding: 15px;
+$modal-dialog-margin: 10px;
+$modal-dialog-margin-y-sm-up: 30px;
+$modal-title-line-height: $line-height-base;
+$modal-content-bg: $white;
+$modal-content-border-color: rgba($black, 0.2);
+$modal-content-border-width: $border-width;
+$modal-content-box-shadow-xs: 0 3px 9px rgba($black, 0.5);
+$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black, 0.5);
+$modal-backdrop-bg: $black;
+$modal-backdrop-opacity: 0.5;
+$modal-header-border-color: $gray-200;
+$modal-footer-border-color: $modal-header-border-color;
+$modal-header-border-width: $modal-content-border-width;
+$modal-footer-border-width: $modal-header-border-width;
+$modal-header-padding: 15px;
+$modal-lg: 800px;
+$modal-md: 500px;
+$modal-sm: 300px;
+$modal-transition: transform 0.3s ease-out;
+
+
+// Alerts
+$alert-padding-y: 0.75rem;
+$alert-padding-x: 1.25rem;
+$alert-margin-bottom: 1rem;
+$alert-border-radius: $border-radius;
+$alert-link-font-weight: $font-weight-bold;
+$alert-border-width: $border-width;
+
+
+// Progress bars
+$progress-height: 1rem;
+$progress-font-size: 0.75rem;
+$progress-bg: $gray-200;
+$progress-border-radius: $border-radius;
+$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1);
+$progress-bar-color: $white;
+$progress-bar-bg: theme-color('primary');
+$progress-bar-animation-timing: 1s linear infinite;
+$progress-bar-transition: width 0.6s ease;
+
+
+// List group
+$list-group-bg: $white;
+$list-group-border-color: rgba($black, 0.125);
+$list-group-border-width: $border-width;
+$list-group-border-radius: $border-radius;
+$list-group-item-padding-y: 0.75rem;
+$list-group-item-padding-x: 1.25rem;
+$list-group-hover-bg: $gray-100;
+$list-group-active-color: $component-active-color;
+$list-group-active-bg: $component-active-bg;
+$list-group-active-border-color: $list-group-active-bg;
+$list-group-disabled-color: $gray-600;
+$list-group-disabled-bg: $list-group-bg;
+$list-group-action-color: $gray-700;
+$list-group-action-hover-color: $list-group-action-color;
+$list-group-action-active-color: $body-color;
+$list-group-action-active-bg: $gray-200;
+
+
+// Image thumbnails
+$thumbnail-padding: 0.25rem;
+$thumbnail-bg: $body-bg;
+$thumbnail-border-width: $border-width;
+$thumbnail-border-color: #ddd;
+$thumbnail-border-radius: $border-radius;
+$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075);
+$thumbnail-transition: all 0.2s ease-in-out;
+
+
+// Figures
+$figure-caption-font-size: 90%;
+$figure-caption-color: $gray-600;
+
+
+// Breadcrumbs
+$breadcrumb-padding-y: 0.75rem;
+$breadcrumb-padding-x: 1rem;
+$breadcrumb-item-padding: 0.5rem;
+$breadcrumb-bg: $gray-200;
+$breadcrumb-divider-color: $gray-600;
+$breadcrumb-active-color: $gray-600;
+$breadcrumb-divider: '/';
+
+
+// Carousel
+$carousel-control-color: $white;
+$carousel-control-width: 15%;
+$carousel-control-opacity: 0.5;
+$carousel-indicator-width: 30px;
+$carousel-indicator-height: 3px;
+$carousel-indicator-spacer: 3px;
+$carousel-indicator-active-bg: $white;
+$carousel-caption-width: 70%;
+$carousel-caption-color: $white;
+$carousel-control-icon-width: 20px;
+$carousel-transition: transform 0.6s ease;
+
+
+// Close
+$close-font-size: $font-size-base * 1.5;
+$close-font-weight: $font-weight-bold;
+$close-color: $black;
+$close-text-shadow: 0 1px 0 $white;
+
+
+// Code
+$code-font-size: 90%;
+$code-padding-y: 0.2rem;
+$code-padding-x: 0.4rem;
+$code-color: #bd4147;
+$code-bg: $gray-100;
+$kbd-color: $white;
+$kbd-bg: $gray-900;
+$pre-color: $gray-900;
+$pre-scrollable-max-height: 340px;
+
+
+// Options
+$enable-rounded: true;
+$enable-shadows: false;
+$enable-gradients: false;
+$enable-transitions: true;
+$enable-hover-media-query: false;
+$enable-grid-classes: true;
+$enable-print-styles: true;
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,89 @@
+<template>
+    <div class="text-start">
+     <div class="h3">Titel: Ausführliche Erklärung für ein Soziales Netzwerk - Funktionsumfang und Vorteile</div>
+     <div>
+        Einleitung: Das Soziale Netzwerk Ocelot, das wir anbieten, basiert auf einem umfangreichen Funktionsumfang, der darauf abzielt, eine vielseitige und interaktive Plattform für die Nutzer zu schaffen. Unser Netzwerk ermöglicht es den Nutzern, miteinander zu interagieren, Beiträge zu teilen, Gruppen zu erstellen und Veranstaltungen zu organisieren. Im Folgenden werden wir detailliert auf den Funktionsumfang eingehen und die Vorteile eines solchen Netzwerks hervorheben.
+     </div>
+     <div>
+        Benutzerfunktionen: Unser Soziales Netzwerk bietet den Benutzern zahlreiche Funktionen, um ihr Profil zu personalisieren und mit anderen Nutzern zu interagieren. Dazu gehören das Hochladen eines Profilbildes, das Anpassen des Namens und des Nutzernamens, die Angabe von Standortinformationen und eine Biografie. Die Benutzer können auch ihre Social Media Links hinzufügen und sehen, welche Beiträge sie kommentiert oder empfohlen haben. Darüber hinaus können sie andere Benutzer melden und ihre Einstellungen wie stummgeschaltete und blockierte Nutzer verwalten.
+    </div>
+     <div>
+        Beitragsfunktionen: Das Netzwerk ermöglicht es den Benutzern, Beiträge zu erstellen, zu bearbeiten und zu teilen. Diese Beiträge können Text- oder Eventbeiträge sein. Textbeiträge können formatiert werden, indem Fett-, Kursiv- und Unterstrichen-Formatierungen angewendet werden. Die Benutzer können auch Überschriften, Zitate, Listen und Links einfügen. Zusätzlich können Beiträge mit Vorschaubildern versehen und Hashtags verwendet werden, um die Sichtbarkeit zu erhöhen. Eventbeiträge ermöglichen es den Benutzern, Veranstaltungen mit Angabe von Datum, Zeit, Veranstaltungsort und Online-Option zu erstellen.
+     </div>
+     <div>
+        Interaktion und Entdeckung: Das Netzwerk bietet verschiedene Möglichkeiten zur Interaktion und Entdeckung. Benutzer können Beiträge kommentieren, Empfehlungen aussprechen und andere Benutzer erwähnen. Sie können auch Themen folgen, um relevante Inhalte zu entdecken, sowie Beiträge nach Text, Hashtags, Mitgliedern und Gruppen durchsuchen. Das Netzwerk bietet auch eine Kartenansicht, um die Positionen von Benutzern und Gruppen auf einer Landkarte anzuzeigen.
+     </div>
+     <div>
+        Gruppen und Veranstaltungen: Benutzer haben die Möglichkeit, Gruppen zu erstellen, die entweder offen, geschlossen oder geheim sein können. Gruppeninhaber können die Mitgliederverwaltung und Rollenvergabe steuern, während Gruppenmitglieder Beiträge erstellen und anheften können. Des Weiteren können Benutzer Veranstaltungen erstellen und teilen, um andere Mitglieder einzuladen und Informationen zu Beginn, Ende, Veranstaltungsort und Online-Option bereitzustellen.
+     </div>
+     <div>
+        Moderation und Sicherheit: Das Netzwerk enthält Moderationsfunktionen, um die Sicherheit und Einhaltung der Regeln zu gewährleisten. Moderatoren können Beiträge, Kommentare, Nutzer und Gruppen sperren. Verstöße gegen Regeln, wie diskriminierende Inhalte, pornografisches Material, Gewaltverherrlichung, Veröffentlichung personenbezogener Daten ohne Einverständnis, Einschüchterung, Stalking, kommerzielle Werbung und Verstöße gegen das Gesetz, können gemeldet werden. Moderatoren haben die Möglichkeit, solche Verstöße zu überprüfen und entsprechende Maßnahmen zu ergreifen, um die Community sicher und respektvoll zu halten.
+     </div>
+     <div>
+        Systemverwaltung und Statistiken: Die Systemverwaltungsfunktion bietet eine Startzentrale mit statistischen Daten, um einen Überblick über die Netzwerkaktivitäten zu erhalten. Hier werden Informationen über die Anzahl der Nutzer, Beiträge, Kommentare, Benachrichtigungen, Einladungen, Follower und Empfehlungen dargestellt. Darüber hinaus gibt es eine Nutzerliste mit detaillierten Informationen zu jedem Benutzer, einschließlich der Anzahl der Beiträge, Kommentare und Empfehlungen. Außerdem werden Themen und Hashtags aufgeführt, um die Inhalte und Interessen der Community besser zu verstehen. Die Systemverwaltung ermöglicht auch die Einladung von Nutzern durch Administratoren und die Anzeige von Spendeninformationen für das Netzwerk.
+     </div>
+
+     <div class="h3 mt-5">
+        Vorteile des Sozialen Netzwerks:
+     </div>
+     <div>
+        Interaktion und Vernetzung: Das Netzwerk bietet den Nutzern eine Plattform, um miteinander in Kontakt zu treten, Inhalte auszutauschen und neue Kontakte zu knüpfen. Es fördert die Vernetzung und ermöglicht es den Nutzern, sich mit Gleichgesinnten zu verbinden.
+     </div>
+     <div>
+        Personalisierung und Individualität: Benutzer können ihr Profil anpassen, um ihre Persönlichkeit und Interessen widerzuspiegeln. Sie können ihre Beiträge gestalten und Themen folgen, die für sie relevant sind. Dadurch wird ein persönliches und einzigartiges Nutzungserlebnis geschaffen.
+     </div>
+     <div>
+        Entdeckung von Inhalten: Das Netzwerk bietet verschiedene Möglichkeiten, Inhalte zu entdecken. Benutzer können Beiträge nach Text, Hashtags, Mitgliedern und Gruppen durchsuchen. Die Kombination aus interaktiven Funktionen und einer intelligenten Suchfunktion erleichtert die Entdeckung neuer interessanter Inhalte.
+     </div>
+     <div>
+        Moderation und Sicherheit: Die Moderationsfunktionen gewährleisten eine sichere und respektvolle Umgebung für die Nutzer. Verstöße gegen Regeln und Richtlinien können gemeldet und angemessen behandelt werden, um eine positive Community-Erfahrung zu gewährleisten.
+     </div>
+     <div>
+        Verwaltung und Statistiken: Die Systemverwaltung ermöglicht es den Administratoren, das Netzwerk effektiv zu verwalten und einen Überblick über die Aktivitäten zu erhalten. Statistiken und Daten liefern wichtige Informationen über das Wachstum und die Interaktion innerhalb der Community.
+     </div>
+     <div>
+        Vielseitigkeit und Flexibilität: Das Netzwerk bietet eine breite Palette von Funktionen, darunter Beitragsfunktionen, Gruppen, Veranstaltungen und Moderation. Diese Vielseitigkeit ermöglicht es den Nutzern, verschiedene Aktivitäten durchzuführen und ihre Nutzungserfahrung anzupassen.
+     </div>
+     <div class="h3 mt-5">Zusammenfassung: </div>
+     <div>
+        Unser Soziales Netzwerk bietet einen umfangreichen Funktionsumfang, der es den Nutzern ermöglicht, miteinander zu interagieren, Inhalte zu teilen, Gruppen zu erstellen und Veranstaltungen zu organisieren. Die Benutzer können ihr Profil personalisieren, Beiträge erstellen und bearbeiten, Kommentare hinterlassen und Empfehlungen aussprechen. Moderationsfunktionen sorgen für die Einhaltung der Regeln und Richtlinien und gewährleisten eine sichere Umgebung. Die Systemverwaltung bietet Administratoren einen Überblick über die Aktivitäten und Statistiken des Netzwerks.
+     </div>
+     <div>
+        Die Vorteile unseres Sozialen Netzwerks liegen in der Möglichkeit der Interaktion und Vernetzung, der Personalisierung und Individualität der Profile, der Entdeckung neuer Inhalte, der Moderation und Sicherheit, der effektiven Verwaltung durch die Systemverwaltung und der Vielseitigkeit und Flexibilität der Funktionen.
+    </div>
+    <div>
+        Wenn Sie daran interessiert sind, unser Soziales Netzwerk zu mieten, bieten wir Ihnen eine umfassende Lösung, die Ihnen ermöglicht, eine engagierte Community aufzubauen und eine Plattform für den Austausch von Ideen, Interessen und Informationen zu schaffen. Unser Team unterstützt Sie bei der Einrichtung, Anpassung und Wartung des Netzwerks, um sicherzustellen, dass es Ihren spezifischen Anforderungen entspricht.
+    </div>
+    <div>
+        Kontaktieren Sie uns gerne, um weitere Informationen zu erhalten und eine maßgeschneiderte Lösung für Ihr Soziales Netzwerk zu besprechen. Wir freuen uns darauf, Ihnen bei der Verwirklichung Ihres Projekts zu helfen und eine dynamische und aktive Online-Community zu schaffen.
+
+    </div>
+    <div class="h3 mt-5">
+        Vielen Dank für Ihr Interesse an unserem Sozialen Netzwerk. Im Folgenden finden Sie weitere Informationen zur Mietung und Nutzung:
+     </div> 
+    <div>
+        Mietbedingungen: Unsere Mietbedingungen umfassen eine Vereinbarung über die Nutzungsdauer, die Zahlungsmodalitäten und eventuelle zusätzliche Dienstleistungen, die wir im Rahmen der Miete anbieten können. Wir können Ihnen verschiedene Mietpakete anbieten, abhängig von Ihren Anforderungen und dem Umfang des Netzwerks, das Sie betreiben möchten.
+    </div>
+    <div>
+        Anpassungsmöglichkeiten: Unser Soziales Netzwerk kann an Ihre spezifischen Anforderungen und Markenidentität angepasst werden. Wir können das Logo und das Design des Netzwerks entsprechend Ihrem Unternehmen oder Ihrer Organisation gestalten. Darüber hinaus können wir Funktionen hinzufügen oder anpassen, um sicherzustellen, dass das Netzwerk Ihren Bedürfnissen entspricht.
+    </div>
+    <div>
+        Technische Unterstützung: Während der Mietdauer bieten wir technische Unterstützung und Wartung für das Netzwerk an. Unser erfahrenes Team steht Ihnen zur Verfügung, um bei der Einrichtung, Konfiguration und Fehlerbehebung zu helfen. Wir stellen sicher, dass das Netzwerk reibungslos läuft und eventuelle technische Probleme schnell gelöst werden.
+    </div>
+    <div>
+        Datenschutz und Sicherheit: Der Schutz der Privatsphäre und Sicherheit der Benutzerdaten hat für uns höchste Priorität. Wir stellen sicher, dass das Netzwerk den geltenden Datenschutzbestimmungen entspricht und die erforderlichen Sicherheitsmaßnahmen implementiert sind, um unbefugten Zugriff, Datenverlust oder Datenlecks zu verhindern.
+    </div>
+    <div>
+        Skalierbarkeit: Unser Soziales Netzwerk ist skalierbar und kann mit Ihrem Unternehmen oder Ihrer Organisation wachsen. Wenn sich Ihre Anforderungen ändern und das Netzwerk mehr Benutzer oder Funktionen unterstützen muss, können wir die erforderlichen Erweiterungen vornehmen, um sicherzustellen, dass das Netzwerk Ihren Bedürfnissen gerecht wird.
+    </div>
+    <div>
+        Schulung und Dokumentation: Wir bieten Schulungen und umfassende Dokumentation für Administratoren und Moderatoren an, um sicherzustellen, dass sie das Netzwerk effektiv verwalten können. Unsere Schulungen umfassen die Nutzung der verschiedenen Funktionen, die Moderation von Inhalten und die Verwaltung von Benutzerkonten. Die Dokumentation bietet einen detaillierten Leitfaden für die Nutzung des Netzwerks.
+    </div>
+    Wenn Sie weitere Fragen haben oder ein Angebot für die Mietung unseres Sozialen Netzwerks erhalten möchten, stehen wir Ihnen gerne zur Verfügung. Kontaktieren Sie uns einfach, um einen Termin für eine Beratung und eine individuelle Lösung zu vereinbaren. Wir freuen uns darauf, Ihnen bei der Realisierung Ihres Sozialen Netzwerks zu helfen und Ihnen eine leistungsstarke Plattform für die Interaktion und den Austausch zur Verfügung zu stellen
+    </div>
+</template>
+<script>
+export default {
+    name: 'About',
+}
+</script>
--- a/src/views/Features.vue
+++ b/src/views/Features.vue
@ -0,0 +1,278 @@
+<template>
+    <div class="text-start">
+      Funktionen für den Betreiber:
+      <div class="container overflow-hidden text-start">
+      <div class="row gy-5">
+        <div class="col-6">
+          <div class="p-3 border bg-light">Änderbar</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Logo</li>
+            <li class="list-group-item">Themen</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Anpassbar</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Nutzungsbedingungen</li>
+            <li class="list-group-item">Verhaltenskodex</li>
+            <li class="list-group-item">Datenschutzerklärung</li>
+            <li class="list-group-item">FAQ</li>
+            <li class="list-group-item">Spenden</li>
+            <li class="list-group-item">Impressum</li>
+            <li class="list-group-item">Support</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">E-Mail-Funktionen</div>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Registrierung</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Abstellbare Registrierung</li>
+            <li class="list-group-item">Zutritt nur durch Einladung</li>
+            <li class="list-group-item">Registrierung nur per Einladungscode</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Inhalt-Filter</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Themen-Filter</li>
+            <li class="list-group-item">Nutzern, denen ich folge</li>
+            <li class="list-group-item">Meine Gruppen</li>
+            <li class="list-group-item">Neuste</li>
+            <li class="list-group-item">Älteste</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Beitragsfunktionen</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Erstellen</li>
+            <li class="list-group-item">Bearbeiten</li>
+            <li class="list-group-item">Anheften</li>
+            <li class="list-group-item">Melden</li>
+            <li class="list-group-item">Sperren</li>
+            <li class="list-group-item">Kommentieren</li>
+            <li class="list-group-item">Empfehlen</li>
+            <li class="list-group-item">Vorschaubild verpixeln</li>
+            <li class="list-group-item">Beitrag Editor</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Beitrag Editor</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Fett</li>
+            <li class="list-group-item">Kursiv</li>
+            <li class="list-group-item">Unterstrichen</li>
+            <li class="list-group-item">Absatz</li>
+            <li class="list-group-item">Verlinkung</li>
+            <li class="list-group-item">Überschriften</li>
+            <li class="list-group-item">Listen</li>
+            <li class="list-group-item">Zitate</li>
+            <li class="list-group-item">Linie</li>
+            <li class="list-group-item">Hashtags</li>
+            <li class="list-group-item">User erwähnen</li>
+            <li class="list-group-item">Drittanbieter-Einbetten (Codepen, DTube, Facebook, Flickr, GIPHY, Instagram, Meetup, MixCloud, Reddit, SlideShare, SoundCloud, Twitch, Twitter, Vimeo, YouTube)</li>
+            <li class="list-group-item">Listen</li>
+            <li class="list-group-item">Listen</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">User-Account</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Bild</li>
+            <li class="list-group-item">Name</li>
+            <li class="list-group-item">Nutzername</li>
+            <li class="list-group-item">Stadt/Region</li>
+            <li class="list-group-item">Bio</li>
+            <li class="list-group-item">Social Media Links</li>
+            <li class="list-group-item">User hat kommentiert</li>
+            <li class="list-group-item">User hat empfohlen</li>
+            <li class="list-group-item">User melden</li>
+            <li class="list-group-item">Name</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Einstellungen</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Stumm geschaltete Nutzer</li>
+            <li class="list-group-item">Blockierte Nutzer</li>
+            <li class="list-group-item">Drittanbieter-Einstellungen</li>
+            <li class="list-group-item">E-Mail-Benachrichtigung</li>
+            <li class="list-group-item">Datenbackup</li>
+            <li class="list-group-item">Private Einstellungen</li>
+            <li class="list-group-item">Passwort</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Gruppen</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Offene Gruppen (sichtbar)</li>
+            <li class="list-group-item">Geschlossene Gruppen (sichtbar)</li>
+            <li class="list-group-item">Geheime Gruppen (nicht sichtbar)</li>
+            <li class="list-group-item">Gruppenmitgliederverwaltung</li>
+            <li class="list-group-item">Rollenvergabe</li>
+            <li class="list-group-item">Beitrag erstellen (Mitglieder)</li>
+            <li class="list-group-item">Beitrag anheften (Gruppeninhaber) *</li>
+            <li class="list-group-item">Gruppe melden</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Suche</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Textsuche</li>
+            <li class="list-group-item">Hashtagsuche</li>
+            <li class="list-group-item">Mitgliedersuche</li>
+            <li class="list-group-item">Gruppensuche</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Sprachen</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Deutsch</li>
+            <li class="list-group-item">Englisch</li>
+            <li class="list-group-item">Spanisch</li>
+            <li class="list-group-item">Französisch</li>
+            <li class="list-group-item">Italienisch</li>
+            <li class="list-group-item">Niederländisch</li>
+            <li class="list-group-item">Polnisch</li>
+            <li class="list-group-item">Portugiesisch</li>
+            <li class="list-group-item">Russisch</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Landkarte</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Meine Position</li>
+            <li class="list-group-item">Mitgliederpositionen</li>
+            <li class="list-group-item">Gruppenposition</li>
+         
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Moderation</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Beitrag sperren</li>
+            <li class="list-group-item">Kommentar sperren</li>
+            <li class="list-group-item">Nutzer sperren</li>
+            <li class="list-group-item">Gruppe sperren</li>
+    
+         
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Systemverwaltung</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Nutzerstatistiken</li>
+            <li class="list-group-item">Beitragsstatistiken</li>
+            <li class="list-group-item">Kommentarstatistiken</li>
+            <li class="list-group-item">Benachrichtigungsstatistiken</li>
+            <li class="list-group-item">Einladungsstatistiken</li>
+            <li class="list-group-item">Followerstatistiken</li>
+            <li class="list-group-item">Empfehlungsstatistiken</li>
+            <li class="list-group-item">Nutzer verwalten</li>
+            <li class="list-group-item">Themen verwalten</li>
+            <li class="list-group-item">Hashtags verwalten</li>
+            <li class="list-group-item">Nutzer einladen</li>
+            <li class="list-group-item">Spendeninfo anzeigen</li>
+          </ol>
+        </div>
+        <div class="col-6">
+          <div class="p-3 border bg-light">Chat *</div>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Privatnachrichten</li>
+            <li class="list-group-item">Gruppenchat zwischen mehreren Usern</li>
+            <li class="list-group-item">Gruppenchat für angelegte Gruppen</li>
+      
+          </ol>
+        </div>
+      </div>
+    </div>
+ 
+ 
+    <div class="my-6">
+      Das ist eine umfassende Auflistung des Funktionsumfangs für das gemietete soziale Netzwerk. 
+      Bitte beachte, dass dies nur eine Zusammenfassung ist und weitere Details und spezifische 
+      Funktionen hinzugefügt werden können, je nach den Anforderungen und Anpassungen, 
+      die du für dein Netzwerk vornehmen möchtest.
+    </div>
+  <hr />
+
+
+<div class="mt-6">
+    <h1>Zusätzliche Funktionen und Möglichkeiten</h1>
+    
+    <h2>Monetarisierung der Mitgliedschaften:</h2>
+    <ul>
+      <li>Sie haben die Möglichkeit, Ihren Nutzern kostenpflichtige Mitgliedschaften anzubieten.</li>
+      <li>Sie können verschiedene Mitgliedschaftsstufen mit unterschiedlichen Vorteilen und Preisen festlegen.</li>
+      <li>Nutzer, die eine kostenpflichtige Mitgliedschaft erwerben, erhalten Zugang zu exklusiven Funktionen oder Inhalten in Ihrem Netzwerk.</li>
+    </ul>
+    
+    <h2>Verkauf von Werbeplätzen:</h2>
+    <ul>
+      <li>Sie können Werbeflächen auf Ihrer gemieteten Netzwerkseite an Unternehmen oder andere Organisationen verkaufen.</li>
+      <li>Durch den Verkauf von Werbung können Sie zusätzliche Einnahmen generieren und gleichzeitig Ihr Netzwerk weiterentwickeln.</li>
+    </ul>
+    
+    <h2>Spendenseite für den Betreiber:</h2>
+    <ul>
+      <li>Wir bieten Ihnen die Möglichkeit, eine Spendenseite in Ihrem gemieteten Netzwerk einzurichten.</li>
+      <li>Sie können Ihre Nutzer ermutigen, Spenden für die Unterstützung und den Ausbau Ihres Netzwerks zu tätigen.</li>
+      <li>Die Spendenseite kann über verschiedene Zahlungsmethoden verfügen, um Nutzern eine bequeme und sichere Spendenabwicklung zu ermöglichen.</li>
+    </ul>
+    
+    <p>Wir verstehen, dass jeder Betreiber unterschiedliche Anforderungen hat. Deshalb bieten wir Ihnen die Flexibilität, diese zusätzlichen Funktionen an Ihre Bedürfnisse anzupassen. Unser Team unterstützt Sie gerne bei der Einrichtung und Integration dieser Funktionen in Ihre gemietete Netzwerkinstanz.</p>
+    
+    <p>Bitte beachten Sie, dass die Monetarisierung der Mitgliedschaften und der Verkauf von Werbeplätzen von Ihnen aktiv umgesetzt werden müssen. Unser Support-Team steht Ihnen jedoch zur Verfügung, um Sie bei Fragen oder Schwierigkeiten zu unterstützen.</p>
+    
+    <p>Wir hoffen, dass diese zusätzlichen Möglichkeiten Ihnen helfen, das Potenzial Ihres gemieteten Sozialen Netzwerks voll auszuschöpfen. Bei weiteren Fragen stehen wir Ihnen gerne zur Verfügung.</p>
+  </div>
+
+  <hr class="my-6"/>
+
+  <div class="row row-cols-1 row-cols-md-3 g-4">
+  <div class="col">
+    <div class="card">
+      <img src="..." class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <img src="..." class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <img src="..." class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <img src="..." class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+    </div>
+</template>
+<script>
+export default {
+    name: 'About',
+}
+</script>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,365 @@
+<template>
+    <div>
+
+      <h1>Ocelot</h1>
+      <h3>Miete dein Soziales Netzwerk mit ein paar Klicks!</h3>
+<hr class="my-5"/>
+<section class="py-6 bg-light-primary">
+    <div class="container">
+        <div class="row justify-content-center text-center mb-4">
+            <div class="col-xl-6 col-lg-8 col-sm-10">
+                <h2 class="font-weight-bold">Die perfekte Mischung von Funktionen <br>für Ihre Vernetzung</h2>
+                <p class="text-muted mb-0">Wir liefern die Ergebnisse und helfen Ihnen dabei, Kosten und Zeit zu sparen, ohne dass Sie ein Risiko oder einen Management-Overhead eingehen müssen.</p>
+            </div>
+        </div>
+  
+         <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 text-center justify-content-center px-xl-6 aos-init aos-animate" data-aos="fade-up">
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M8,3 L8,3.5 C8,4.32842712 8.67157288,5 9.5,5 L14.5,5 C15.3284271,5 16,4.32842712 16,3.5 L16,3 L18,3 C19.1045695,3 20,3.8954305 20,5 L20,21 C20,22.1045695 19.1045695,23 18,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,5 C4,3.8954305 4.8954305,3 6,3 L8,3 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M11,2 C11,1.44771525 11.4477153,1 12,1 C12.5522847,1 13,1.44771525 13,2 L14.5,2 C14.7761424,2 15,2.22385763 15,2.5 L15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L9.5,4 C9.22385763,4 9,3.77614237 9,3.5 L9,2.5 C9,2.22385763 9.22385763,2 9.5,2 L11,2 Z" fill="currentColor"></path>
+                                    <rect fill="currentColor" opacity="0.3" x="10" y="9" width="7" height="2" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="7" y="9" width="2" height="2" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="7" y="13" width="2" height="2" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="10" y="13" width="7" height="2" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="7" y="17" width="2" height="2" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="10" y="17" width="7" height="2" rx="1"></rect>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Systemverwaltung</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M16,15.6315789 L16,12 C16,10.3431458 14.6568542,9 13,9 L6.16183229,9 L6.16183229,5.52631579 C6.16183229,4.13107011 7.29290239,3 8.68814808,3 L20.4776218,3 C21.8728674,3 23.0039375,4.13107011 23.0039375,5.52631579 L23.0039375,13.1052632 L23.0206157,17.786793 C23.0215995,18.0629336 22.7985408,18.2875874 22.5224001,18.2885711 C22.3891754,18.2890457 22.2612702,18.2363324 22.1670655,18.1421277 L19.6565168,15.6315789 L16,15.6315789 Z" fill="currentColor"></path>
+                                    <path d="M1.98505595,18 L1.98505595,13 C1.98505595,11.8954305 2.88048645,11 3.98505595,11 L11.9850559,11 C13.0896254,11 13.9850559,11.8954305 13.9850559,13 L13.9850559,18 C13.9850559,19.1045695 13.0896254,20 11.9850559,20 L4.10078614,20 L2.85693427,21.1905292 C2.65744295,21.3814685 2.34093638,21.3745358 2.14999706,21.1750444 C2.06092565,21.0819836 2.01120804,20.958136 2.01120804,20.8293182 L2.01120804,18.32426 C1.99400175,18.2187196 1.98505595,18.1104045 1.98505595,18 Z M6.5,14 C6.22385763,14 6,14.2238576 6,14.5 C6,14.7761424 6.22385763,15 6.5,15 L11.5,15 C11.7761424,15 12,14.7761424 12,14.5 C12,14.2238576 11.7761424,14 11.5,14 L6.5,14 Z M9.5,16 C9.22385763,16 9,16.2238576 9,16.5 C9,16.7761424 9.22385763,17 9.5,17 L11.5,17 C11.7761424,17 12,16.7761424 12,16.5 C12,16.2238576 11.7761424,16 11.5,16 L9.5,16 Z" fill="currentColor" opacity="0.3"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Sicherheit und Moderation</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M22,17 L22,21 C22,22.1045695 21.1045695,23 20,23 L4,23 C2.8954305,23 2,22.1045695 2,21 L2,17 L6.27924078,17 L6.82339262,18.6324555 C7.09562072,19.4491398 7.8598984,20 8.72075922,20 L15.381966,20 C16.1395101,20 16.8320364,19.5719952 17.1708204,18.8944272 L18.118034,17 L22,17 Z" fill="currentColor"></path>
+                                    <path d="M2.5625,15 L5.92654389,9.01947752 C6.2807805,8.38972356 6.94714834,8 7.66969497,8 L16.330305,8 C17.0528517,8 17.7192195,8.38972356 18.0734561,9.01947752 L21.4375,15 L18.118034,15 C17.3604899,15 16.6679636,15.4280048 16.3291796,16.1055728 L15.381966,18 L8.72075922,18 L8.17660738,16.3675445 C7.90437928,15.5508602 7.1401016,15 6.27924078,15 L2.5625,15 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M11.1288761,0.733697713 L11.1288761,2.69017121 L9.12120481,2.69017121 C8.84506244,2.69017121 8.62120481,2.91402884 8.62120481,3.19017121 L8.62120481,4.21346991 C8.62120481,4.48961229 8.84506244,4.71346991 9.12120481,4.71346991 L11.1288761,4.71346991 L11.1288761,6.66994341 C11.1288761,6.94608579 11.3527337,7.16994341 11.6288761,7.16994341 C11.7471877,7.16994341 11.8616664,7.12798964 11.951961,7.05154023 L15.4576222,4.08341738 C15.6683723,3.90498251 15.6945689,3.58948575 15.5161341,3.37873564 C15.4982803,3.35764848 15.4787093,3.33807751 15.4576222,3.32022374 L11.951961,0.352100892 C11.7412109,0.173666017 11.4257142,0.199862688 11.2472793,0.410612793 C11.1708299,0.500907473 11.1288761,0.615386087 11.1288761,0.733697713 Z" fill="currentColor" fill-rule="nonzero" transform="translate(11.959697, 3.661508) rotate(-270.000000) translate(-11.959697, -3.661508) "></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Beiträge und Events</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M12.7037037,14 L15.6666667,10 L13.4444444,10 L13.4444444,6 L9,12 L11.2222222,12 L11.2222222,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L12.7037037,14 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M9.80428954,10.9142091 L9,12 L11.2222222,12 L11.2222222,16 L15.6666667,10 L15.4615385,10 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 L9.80428954,10.9142091 Z" fill="currentColor"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Suche und Filter</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M3.73851648,19 L8.5,19 C8.77614237,19 9,18.7761424 9,18.5 L9,6.5962912 C9,6.32014883 8.77614237,6.0962912 8.5,6.0962912 C8.29554771,6.0962912 8.11169333,6.22076667 8.03576165,6.41059586 L3.27427814,18.3143047 C3.17172143,18.5706964 3.29642938,18.8616816 3.55282114,18.9642383 C3.61188128,18.9878624 3.67490677,19 3.73851648,19 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M15.7385165,19 L20.5,19 C20.7761424,19 21,18.7761424 21,18.5 L21,6.5962912 C21,6.32014883 20.7761424,6.0962912 20.5,6.0962912 C20.2955477,6.0962912 20.1116933,6.22076667 20.0357617,6.41059586 L15.2742781,18.3143047 C15.1717214,18.5706964 15.2964294,18.8616816 15.5528211,18.9642383 C15.6118813,18.9878624 15.6749068,19 15.7385165,19 Z" fill="currentColor" transform="translate(18.000000, 12.500000) scale(-1, 1) translate(-18.000000, -12.500000) "></path>
+                                    <rect fill="currentColor" opacity="0.3" x="11" y="2" width="2" height="20" rx="1"></rect>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Gruppen</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <rect fill="currentColor" x="4" y="16" width="4" height="4" rx="1"></rect>
+                                    <rect fill="currentColor" x="4" y="10" width="4" height="4" rx="1"></rect>
+                                    <rect fill="currentColor" x="10" y="16" width="4" height="4" rx="1"></rect>
+                                    <rect fill="currentColor" opacity="0.3" x="10" y="10" width="4" height="4" rx="1"></rect>
+                                    <rect fill="currentColor" x="4" y="4" width="4" height="4" rx="1"></rect>
+                                    <rect fill="currentColor" x="16" y="16" width="4" height="4" rx="1"></rect>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Graphics and Logo Design</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M12.6706167,18.7881514 L15.9697449,13.8394592 C16.1995092,13.4948127 16.1063788,13.0291607 15.7617323,12.7993963 C15.6385316,12.7172626 15.4937759,12.673434 15.3457071,12.673434 L12.659208,12.673434 L12.659208,9.69999981 C12.659208,9.28578625 12.3234215,8.94999981 11.909208,8.94999981 C11.6584431,8.94999981 11.4242696,9.07532566 11.2851703,9.28397466 L7.98604212,14.2326669 C7.75627777,14.5773134 7.84940818,15.0429654 8.19405469,15.2727297 C8.31725533,15.3548635 8.4620111,15.398692 8.61007984,15.398692 L11.296579,15.398692 L11.296579,18.3721263 C11.296579,18.7863398 11.6323654,19.1221263 12.046579,19.1221263 C12.2973439,19.1221263 12.5315174,18.9968004 12.6706167,18.7881514 Z" fill="currentColor" opacity="0.3"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Project Management</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col my-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z" fill="currentColor"></path>
+                                    <path d="M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z" fill="currentColor" opacity="0.3"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Task management</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col mb-0 mt-3 mb-lg-3">
+                <div class="card border-hover-primary hover-scale">
+                    <div class="card-body">
+                        <div class="text-primary mb-5">
+                            <svg width="60" height="60" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <rect x="0" y="0" width="24" height="24"></rect>
+                                    <path d="M4,4 L11.6314229,2.5691082 C11.8750185,2.52343403 12.1249815,2.52343403 12.3685771,2.5691082 L20,4 L20,13.2830094 C20,16.2173861 18.4883464,18.9447835 16,20.5 L12.5299989,22.6687507 C12.2057287,22.8714196 11.7942713,22.8714196 11.4700011,22.6687507 L8,20.5 C5.51165358,18.9447835 4,16.2173861 4,13.2830094 L4,4 Z" fill="currentColor" opacity="0.3"></path>
+                                    <path d="M14.5,11 C15.0522847,11 15.5,11.4477153 15.5,12 L15.5,15 C15.5,15.5522847 15.0522847,16 14.5,16 L9.5,16 C8.94771525,16 8.5,15.5522847 8.5,15 L8.5,12 C8.5,11.4477153 8.94771525,11 9.5,11 L9.5,10.5 C9.5,9.11928813 10.6192881,8 12,8 C13.3807119,8 14.5,9.11928813 14.5,10.5 L14.5,11 Z M12,9 C11.1715729,9 10.5,9.67157288 10.5,10.5 L10.5,11 L13.5,11 L13.5,10.5 C13.5,9.67157288 12.8284271,9 12,9 Z" fill="currentColor"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <h6 class="font-weight-bold mb-3">Client Dashboards</h6>
+                        <p class="text-muted mb-0">Embed holistics charts directly to your application</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<hr class="my-5"/>
+
+      <div class="container text-center">
+        <div class="row row-cols-2 row-cols-lg-4 row-cols-md-3">
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot30.png" class="img-thumbnail" alt="ocelot"  ></div>
+          </div>
+          <div class="col">
+            <div class=" border bg-light"><img src="/ocelots/ocelot1.png" class="img-thumbnail" alt="ocelot"  ></div>
+          </div>
+          <div class="col">
+            <div class=" border bg-light"><img src="/ocelots/ocelot2.png" class="img-thumbnail" alt="ocelot"  ></div>
+          </div>
+          <div class="col">
+            <div class=" border bg-light"><img src="/ocelots/ocelot3.jpeg" class="img-thumbnail" alt="ocelot" ></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot4.jpeg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot5.jpeg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot6.jpeg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot7.jpeg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot8.jpeg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot9.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot10.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot11.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot12.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot13.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot14.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot15.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot16.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot17.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot18.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot19.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot20.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot21.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot22.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot23.png" class="img-thumbnail" alt="ocelot" ></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot24.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot25.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot26.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot27.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot28.jpg" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+          <div class="col">
+            <div class="border bg-light"><img src="/ocelots/ocelot29.png" class="img-thumbnail" alt="ocelot"></div>
+          </div>
+        
+
+       
+        </div>
+      </div>
+
+
+        <div>
+          <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" class="logo" alt="Vite logo" />
+          </a>
+          <a href="https://vuejs.org/" target="_blank">
+            <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
+          </a>
+          <a href="https://getbootstrap.com/" target="_blank">
+            <img src="/bootstrap.svg" class="logo" alt="Bootstrap logo" />
+          </a>
+        </div>
+  <div>Vite + Vue3 + Bootstrap5</div>
+    <!-- 
+    <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+    <a href="https://getbootstrap.com/" target="_blank">
+      <img src="/bootstrap.svg" class="logo" alt="Bootstrap logo" />
+    </a>
+  </div>
+  <div>Vite + Vue3 + Bootstrap5</div>
+  <div>eslint: 8.42.0,</div>
+  <div>eslint-plugin-vue: 9.15.1</div>
+  <div>sass: 1.62.1</div>
+  <div>sass-loader: 13.3.2</div>
+ -->
+    </div>
+</template>
+<script>
+export default {
+    name: 'Home',
+}
+</script>
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+
+
+.pb-6, .py-6 {
+    padding-bottom: 3.75rem!important;
+}
+.pt-6, .py-6 {
+    padding-top: 3.75rem!important;
+}
+.hover-scale, .hover-scale:hover {
+    transition: transform .2s ease-in;
+}
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: .4rem;
+    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
+}
+.card-body {
+    flex: 1 1 auto;
+    min-height: 1px;
+    padding: 1.25rem;
+}
+</style>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@ -0,0 +1,3 @@
+<template>
+    <h1>Oops, it looks like the page you're looking for doesn't exist.</h1>
+  </template>
--- a/src/views/Pricing.vue
+++ b/src/views/Pricing.vue
@ -0,0 +1,663 @@
+<template>
+    <div>
+
+      <div class="container text-start">
+    <h1 class="mt-5">Preisliste für die Miete eines Sozialen Netzwerks</h1>
+    <p>Vielen Dank, dass Sie sich für die Miete unseres Sozialen Netzwerks interessieren! Wir bieten Ihnen drei verschiedene Modelle zur Auswahl, je nach Größe und Anforderungen Ihres Netzwerks. Zusätzlich haben Sie die Möglichkeit, die Mitgliedschaften zu monetarisieren und Werbeplätze zu verkaufen, um Ihre Investition zu maximieren. Im Folgenden finden Sie unsere detaillierte Preisliste:</p>
+    <div class="card mt-4">
+      <div class="card-header">
+        Basic-Paket - 299 € pro Monat
+      </div>
+      <div class="card-body">
+        <ul>
+          <li>Bis zu 3000 Nutzer</li>
+          <li>Vollständiger Funktionsumfang des Sozialen Netzwerks</li>
+          <li>Nutzung aller verfügbaren Funktionen für Administratoren und Nutzer</li>
+          <li>Eigenes Branding mit Ihrem Logo</li>
+          <li>Anpassbare Nutzungsbedingungen, Verhaltenskodex, Datenschutzerklärung, FAQ, Spenden, Impressum und Support</li>
+          <li>Vollständige E-Mail-Funktionalität</li>
+          <li>Registrierung nur per Einladungscode</li>
+          <li>Inhaltfilter für eine sichere Umgebung</li>
+          <li>Alle Beitragsfunktionen, einschließlich Text, Bild, Event und Integration von Drittanbieter-Inhalten</li>
+          <li>Benachrichtigungen für Kommentare, Erwähnungen und Gruppenaktivitäten</li>
+          <li>Umfangreiche Einstellungsmöglichkeiten für Benutzeraccounts und Gruppenverwaltung</li>
+          <li>Mehrsprachige Unterstützung: Deutsch, Englisch, Spanisch, Französisch, Italienisch, Niederländisch, Polnisch, Portugiesisch und Russisch</li>
+          <li>Landkartenintegration zur Anzeige von Nutzer- und Gruppenpositionen</li>
+          <li>Moderationsfunktionen zum Sperren von Beiträgen, Kommentaren, Nutzern und Gruppen</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="card mt-4">
+      <div class="card-header">
+        Premium-Paket - 599 € pro Monat
+      </div>
+      <div class="card-body">
+        <ul>
+          <li>Bis zu 19.999 Nutzer</li>
+          <li>Alle Funktionen des Basic-Pakets enthalten</li>
+          <li>Höhere Nutzerkapazität für wachsende Netzwerke</li>
+          <li>Zusätzlicher Support für eine schnellere und effektivere Lösung von Problemen</li>
+</ul>
+</div>
+</div>
+
+<div class="card mt-4">
+  <div class="card-header">
+    Enterprise-Paket - 999 € pro Monat
+  </div>
+  <div class="card-body">
+    <ul>
+      <li>Ab 20.000 Nutzern</li>
+      <li>Alle Funktionen des Basic-Pakets enthalten</li>
+      <li>Unbegrenzte Nutzerkapazität für große Netzwerke</li>
+      <li>Priorisierter Support für eine erstklassige Betreuung und schnelle Reaktionszeiten</li>
+    </ul>
+  </div>
+</div>
+
+<div class="card mt-4">
+  <div class="card-header">
+    Testversion
+  </div>
+  <div class="card-body">
+    <ul>
+      <li>1 Monat frei testbar</li>
+      <li>Instanz und alle Daten werden nach 1 Monat gelöscht</li>
+      <li>Testinstanz kann zu einer Mietversion umgestellt werden</li>
+      <li>In der Testversion stehen einige Funktionen nicht zur Verfügung</li>
+    </ul>
+  </div>
+</div>
+
+<div class="card mt-4">
+  <div class="card-header">
+    Zusätzliche Möglichkeiten für alle Betreiber
+  </div>
+  <div class="card-body">
+    <ul>
+      <li>Monetarisierung der Mitgliedschaften in Ihrer gemieteten Instanz</li>
+      <li>Verkauf von Werbeplätzen auf der gemieteten Instanz</li>
+      <li>Spendenseite für den Betreiber</li>
+    </ul>
+  </div>
+</div>
+
+<div class="container">
+    <h1>Zusätzliche Funktionen und Möglichkeiten</h1>
+
+    <h2>Monetarisierung der Mitgliedschaften</h2>
+    <p>
+      Sie haben die Möglichkeit, Ihren Nutzern kostenpflichtige Mitgliedschaften anzubieten. Sie können verschiedene Mitgliedschaftsstufen mit unterschiedlichen Vorteilen und Preisen festlegen. Nutzer, die eine kostenpflichtige Mitgliedschaft erwerben, erhalten Zugang zu exklusiven Funktionen oder Inhalten in Ihrem Netzwerk.
+    </p>
+
+    <h2>Verkauf von Werbeplätzen</h2>
+    <p>
+      Sie können Werbeflächen auf Ihrer gemieteten Netzwerkseite an Unternehmen oder andere Organisationen verkaufen. Durch den Verkauf von Werbung können Sie zusätzliche Einnahmen generieren und gleichzeitig Ihr Netzwerk weiterentwickeln.
+    </p>
+
+    <h2>Spendenseite für den Betreiber</h2>
+    <p>
+      Wir bieten Ihnen die Möglichkeit, eine Spendenseite in Ihrem gemieteten Netzwerk einzurichten. Sie können Ihre Nutzer ermutigen, Spenden für die Unterstützung und den Ausbau Ihres Netzwerks zu tätigen. Die Spendenseite kann über verschiedene Zahlungsmethoden verfügen, um Nutzern eine bequeme und sichere Spendenabwicklung zu ermöglichen.
+    </p>
+
+    <p>
+      Wir verstehen, dass jeder Betreiber unterschiedliche Anforderungen hat. Deshalb bieten wir Ihnen die Flexibilität, diese zusätzlichen Funktionen an Ihre Bedürfnisse anzupassen. Unser Team unterstützt Sie gerne bei der Einrichtung und Integration dieser Funktionen in Ihre gemietete Netzwerkinstanz.
+    </p>
+
+    <p>
+      Bitte beachten Sie, dass die Monetarisierung der Mitgliedschaften und der Verkauf von Werbeplätzen von Ihnen aktiv umgesetzt werden müssen. Unser Support-Team steht Ihnen jedoch zur Verfügung, um Sie bei Fragen oder Schwierigkeiten zu unterstützen.
+    </p>
+
+    <p>
+      Wir hoffen, dass diese zusätzlichen Möglichkeiten Ihnen helfen, das Potenzial Ihres gemieteten Sozialen Netzwerks voll auszuschöpfen. Bei weiteren Fragen stehen wir Ihnen gerne zur Verfügung.
+    </p>
+  </div>
+  </div>
+       
+<div class="container py-3">
+  <header>
+ 
+
+    <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
+      <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
+      <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+    </div>
+  </header>
+
+   
+
+    <div class="row   row-cols-md-3 mb-3 text-center">
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm">
+          <div class="card-header py-3">
+            <h4 class="my-0 fw-normal">Free Test</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">0 €<small class="text-body-secondary fw-light">/ 30 Tage</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+      </div>
+      </div>
+
+    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm">
+          <div class="card-header py-3">
+            <h4 class="my-0 fw-normal">Basic</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">299 €<small class="text-body-secondary fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm">
+          <div class="card-header py-3">
+            <h4 class="my-0 fw-normal">Pro</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">599 €<small class="text-body-secondary fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>20 users included</li>
+              <li>10 GB of storage</li>
+              <li>Priority email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm border-primary">
+          <div class="card-header py-3 text-bg-primary border-primary">
+            <h4 class="my-0 fw-normal">Enterprise</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">999 €<small class="text-body-secondary fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>30 users included</li>
+              <li>15 GB of storage</li>
+              <li>Phone and email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h2 class="display-6 text-center mb-4">Compare plans</h2>
+
+    <div class="table-responsive">
+      <table class="table text-center">
+        <thead>
+          <tr>
+            <th style="width: 34%;"></th>
+            <th style="width: 22%;">Basic</th>
+            <th style="width: 22%;">Pro</th>
+            <th style="width: 22%;">Enterprise</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row" class="text-start">Public</th>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Private</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+        </tbody>
+
+        <tbody>
+          <tr>
+            <th scope="row" class="text-start">Permissions</th>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Sharing</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Unlimited members</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Extra security</th>
+            <td></td>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+ 
+
+ 
+</div>
+<section id="pricing" class="pricing-content section-padding">
+	<div class="container">					
+		<div class="section-title text-center">
+			<h2>Pricing Plans</h2>
+			<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
+		</div>				
+		<div class="row text-center">									
+			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.1s; animation-name: fadeInUp;">
+				<div class="pricing_design">
+					<div class="single-pricing">
+						<div class="price-head">		
+							<h2>Starter</h2>
+							<h1>$0</h1>
+							<span>/Monthly</span>
+						</div>
+						<ul>
+							<li><b>15</b> website</li>
+							<li><b>50GB</b> Disk Space</li>
+							<li><b>50</b> Email</li>
+							<li><b>50GB</b> Bandwidth</li>
+							<li><b>10</b> Subdomains</li>
+							<li><b>Unlimited</b> Support</li>
+						</ul>
+						<div class="pricing-price">
+							
+						</div>
+						<a href="#" class="price_btn">Order Now</a>
+					</div>
+				</div>
+			</div><!--- END COL -->	
+			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInUp;">
+				<div class="pricing_design">
+					<div class="single-pricing">
+						<div class="price-head">		
+							<h2>Personal</h2>
+							<h1 class="price">$29</h1>
+							<span>/Monthly</span>
+						</div>
+						<ul>
+							<li><b>15</b> website</li>
+							<li><b>50GB</b> Disk Space</li>
+							<li><b>50</b> Email</li>
+							<li><b>50GB</b> Bandwidth</li>
+							<li><b>10</b> Subdomains</li>
+							<li><b>Unlimited</b> Support</li>
+						</ul>
+						<div class="pricing-price">
+							
+						</div>
+						<a href="#" class="price_btn">Order Now</a>
+					</div>
+				</div>
+			</div><!--- END COL -->	
+			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;">
+				<div class="pricing_design">
+					<div class="single-pricing">
+						<div class="price-head">		
+							<h2>Ultimate</h2>
+							<h1 class="price">$49</h1>
+							<span>/Monthly</span>
+						</div>
+						<ul>
+							<li><b>15</b> website</li>
+							<li><b>50GB</b> Disk Space</li>
+							<li><b>50</b> Email</li>
+							<li><b>50GB</b> Bandwidth</li>
+							<li><b>10</b> Subdomains</li>
+							<li><b>Unlimited</b> Support</li>
+						</ul>
+						<div class="pricing-price">
+							
+						</div>
+						<a href="#" class="price_btn">Order Now</a>
+					</div>
+				</div>
+			</div><!--- END COL -->			  
+		</div><!--- END ROW -->
+	</div><!--- END CONTAINER -->
+</section>
+<hr class="my-5"/>
+<section class="price_plan_area section_padding_130_80" id="pricing">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-12 col-sm-8 col-lg-6">
+            <!-- Section Heading-->
+            <div class="section-heading text-center wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+              <h6>Pricing Plans</h6>
+              <h3>Let's find a way together</h3>
+              <p>Appland is completely creative, lightweight, clean &amp; super responsive app landing page.</p>
+              <div class="line"></div>
+            </div>
+          </div>
+        </div>
+        <div class="row justify-content-center">
+          <!-- Single Price Plan Area-->
+          <div class="col-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="single_price_plan wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+              <div class="title">
+                <h3>Start Up</h3>
+                <p>Start a trial</p>
+                <div class="line"></div>
+              </div>
+              <div class="price">
+                <h4>$0</h4>
+              </div>
+              <div class="description">
+                <p><i class="lni lni-checkmark-circle"></i>Duration: 7days</p>
+                <p><i class="lni lni-checkmark-circle"></i>10 Features</p>
+                <p><i class="lni lni-close"></i>No Hidden Fees</p>
+                <p><i class="lni lni-close"></i>100+ Video Tuts</p>
+                <p><i class="lni lni-close"></i>No Tools</p>
+              </div>
+              <div class="button"><a class="btn btn-success btn-2" href="#">Get Started</a></div>
+            </div>
+          </div>
+          <!-- Single Price Plan Area-->
+          <div class="col-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="single_price_plan active wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+              <!-- Side Shape-->
+              <div class="side-shape"><img src="https://bootdey.com/img/popular-pricing.png" alt=""></div>
+              <div class="title"><span>Popular</span>
+                <h3>Small Business</h3>
+                <p>For Small Business Team</p>
+                <div class="line"></div>
+              </div>
+              <div class="price">
+                <h4>$9.99</h4>
+              </div>
+              <div class="description">
+                <p><i class="lni lni-checkmark-circle"></i>Duration: 3 Month</p>
+                <p><i class="lni lni-checkmark-circle"></i>50 Features</p>
+                <p><i class="lni lni-checkmark-circle"></i>No Hidden Fees</p>
+                <p><i class="lni lni-checkmark-circle"></i>150+ Video Tuts</p>
+                <p><i class="lni lni-close"></i>5 Tools</p>
+              </div>
+              <div class="button"><a class="btn btn-warning" href="#">Get Started</a></div>
+            </div>
+          </div>
+          <!-- Single Price Plan Area-->
+          <div class="col-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="single_price_plan wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+              <div class="title">
+                <h3>Enterprise</h3>
+                <p>Unlimited Possibilities</p>
+                <div class="line"></div>
+              </div>
+              <div class="price">
+                <h4>$49.99</h4>
+              </div>
+              <div class="description">
+                <p><i class="lni lni-checkmark-circle"></i>Duration: 1 year</p>
+                <p><i class="lni lni-checkmark-circle"></i>Unlimited Features</p>
+                <p><i class="lni lni-checkmark-circle"></i>No Hidden Fees</p>
+                <p><i class="lni lni-checkmark-circle"></i>Unlimited Video Tuts</p>
+                <p><i class="lni lni-checkmark-circle"></i>Unlimited Tools</p>
+              </div>
+              <div class="button"><a class="btn btn-info" href="#">Get Started</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    </div>
+</template>
+<script>
+export default {
+    name: 'About',
+}
+</script>
+<style>
+.pricing-content{position:relative;}
+.pricing_design{
+    position: relative;
+    margin: 0px 15px;
+}
+.pricing_design .single-pricing{
+    background:#554c86;
+    padding: 60px 40px;
+    border-radius:30px;
+    box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
+    position: relative;
+    z-index: 1;
+}
+.pricing_design .single-pricing:before{
+    content: "";
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    border-radius: 18px 18px 190px 18px;
+    border: 1px solid #eee;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+}
+.price-head{}
+.price-head h2 {
+	margin-bottom: 20px;
+	font-size: 26px;
+	font-weight: 600;
+}
+.price-head h1 {
+	font-weight: 600;
+	margin-top: 30px;
+	margin-bottom: 5px;
+}
+.price-head span{}
+
+.single-pricing ul{list-style:none;margin-top: 30px;}
+.single-pricing ul li {
+	line-height: 36px;
+}
+.single-pricing ul li i {
+	background: #554c86;
+	color: #fff;
+	width: 20px;
+	height: 20px;
+	border-radius: 30px;
+	font-size: 11px;
+	text-align: center;
+	line-height: 20px;
+	margin-right: 6px;
+}
+.pricing-price{}
+
+.price_btn {
+	background: #554c86;
+	padding: 10px 30px;
+	color: #fff;
+	display: inline-block;
+	margin-top: 20px;
+	border-radius: 2px;
+	-webkit-transition: 0.3s;
+	transition: 0.3s;
+}
+.price_btn:hover{background:#0aa1d6;}
+a{
+text-decoration:none;    
+}
+
+.section-title {
+    margin-bottom: 60px;
+}
+.text-center {
+    text-align: center!important;
+}
+
+.section-title h2 {
+    font-size: 45px;
+    font-weight: 600;
+    margin-top: 0;
+    position: relative;
+    text-transform: capitalize;
+}
+
+
+
+
+
+.price_plan_area {
+    position: relative;
+    z-index: 1;
+    background-color: #f5f5ff;
+}
+
+.single_price_plan {
+    position: relative;
+    z-index: 1;
+    border-radius: 0.5rem 0.5rem 0 0;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    margin-bottom: 50px;
+    background-color: #ffffff;
+    padding: 3rem 4rem;
+}
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+    .single_price_plan {
+        padding: 3rem;
+    }
+}
+@media only screen and (max-width: 575px) {
+    .single_price_plan {
+        padding: 3rem;
+    }
+}
+.single_price_plan::after {
+    position: absolute;
+    content: "";
+    background-image: url("https://bootdey.com/img/half-circle-pricing.png");
+    background-repeat: repeat;
+    width: 100%;
+    height: 17px;
+    bottom: -17px;
+    z-index: 1;
+    left: 0;
+}
+.single_price_plan .title {
+    text-transform: capitalize;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    margin-bottom: 2rem;
+}
+.single_price_plan .title span {
+    color: #ffffff;
+    padding: 0.2rem 0.6rem;
+    font-size: 12px;
+    text-transform: uppercase;
+    background-color: #2ecc71;
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    border-radius: 0.25rem;
+}
+.single_price_plan .title h3 {
+    font-size: 1.25rem;
+}
+.single_price_plan .title p {
+    font-weight: 300;
+    line-height: 1;
+    font-size: 14px;
+}
+.single_price_plan .title .line {
+    width: 80px;
+    height: 4px;
+    border-radius: 10px;
+    background-color: #3f43fd;
+}
+.single_price_plan .price {
+    margin-bottom: 1.5rem;
+}
+.single_price_plan .price h4 {
+    position: relative;
+    z-index: 1;
+    font-size: 2.4rem;
+    line-height: 1;
+    margin-bottom: 0;
+    color: #3f43fd;
+    display: inline-block;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: transparent;
+    background-image: -webkit-gradient(linear, left top, right top, from(#e24997), to(#2d2ed4));
+    background-image: linear-gradient(90deg, #e24997, #2d2ed4);
+}
+.single_price_plan .description {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+.single_price_plan .description p {
+    line-height: 16px;
+    margin: 0;
+    padding: 10px 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -ms-grid-row-align: center;
+    align-items: center;
+}
+.single_price_plan .description p i {
+    color: #2ecc71;
+    margin-right: 0.5rem;
+}
+.single_price_plan .description p .lni-close {
+    color: #e74c3c;
+}
+.single_price_plan.active,
+.single_price_plan:hover,
+.single_price_plan:focus {
+    -webkit-box-shadow: 0 6px 50px 8px rgba(21, 131, 233, 0.15);
+    box-shadow: 0 6px 50px 8px rgba(21, 131, 233, 0.15);
+}
+.single_price_plan .side-shape img {
+    position: absolute;
+    width: auto;
+    top: 0;
+    right: 0;
+    z-index: -2;
+}
+
+.section-heading h3 {
+    margin-bottom: 1rem;
+    font-size: 3.125rem;
+    letter-spacing: -1px;
+}
+
+.section-heading p {
+    margin-bottom: 0;
+    font-size: 1.25rem;
+}
+
+.section-heading .line {
+    width: 120px;
+    height: 5px;
+    margin: 30px auto 0;
+    border-radius: 6px;
+    background: #2d2ed4;
+    background: -webkit-gradient(linear, left top, right top, from(#e24997), to(#2d2ed4));
+    background: linear-gradient(to right, #e24997, #2d2ed4);
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`