feat(legal): create empty loader module

Reviewed-on: #82
Reviewed-by: Jakob Scheid

.gitea/workflows/deployment-dev.yaml

@@ -0,0 +1,45 @@
+name: Deploy on dev
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    name: Deploy on dev
+
+    runs-on: node-minio
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          set -euo pipefail
+          npm install
+
+      - name: Build
+        run: |
+          set -euo pipefail
+          npm run build
+
+      - name: Set alias
+        run: mc alias set minio ${{ vars.S3_DEV_URL }} ${{ secrets.S3_DEV_ACCESS_KEY }} ${{ secrets.S3_DEV_SECRET_KEY }}
+
+      - name: Upload build artifacts to S3
+        run: |
+          set -euo pipefail
+
+          BUCKET=${{ vars.S3_DEV_BUCKET_NAME }}
+          BUILD_ID=$(date +%s)-$(git rev-parse --short HEAD)
+
+          echo "Build ID: $BUILD_ID"
+
+          printf "Copying files ... "
+          mc cp --recursive ./dist/ "minio/$BUCKET/builds/$BUILD_ID/"
+          echo "done"
+
+          printf "Update current build pointer ... "
+          echo "$BUILD_ID" | mc pipe "minio/$BUCKET/current"
+          echo "done"

.gitignore

@@ -0,0 +1,3 @@
+.vscode/
+node_modules/
+dist/

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

NOTICE

@@ -0,0 +1,8 @@
+Notice
+
+This software is provided "as is", without warranty of any kind.
+
+This software uses the Vue.js framework.
+
+This software makes use of various open-source components.
+See THIRD_PARTY_LICENSES for details.

README.md

@@ -0,0 +1,3 @@
+# frontend
+
+The frontend of the search engine Seekra.

index.html

@@ -1,26 +1,28 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Seekra</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <header>
-        <h1>Seekra</h1>
-        <h3>Build to search.</h3>
-    </header>
-
-    <form id="searchbar">
-        <input type="search" id="search" name="search"><br>
-        <input type="submit" value="Suchen">
-     </form>
-
-    <footer>
-        <span>Version 1.1</span>  
-        <time datetime="2026-05-01">02/05/2026</time>
-        <time datetime="20:30">12:35 CEST</time>
-    </footer>
-</body>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
 </html>

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "terser": "^5.47.1",
+    "vue": "^3.5.32",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "vite": "^8.0.10",
+    "vite-plugin-html": "^3.2.2"
+  }
+}

src/App.vue

@@ -0,0 +1,59 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import Navbar from './features/nav/components/Navbar.vue';
+import Footer from './features/footer/components/Footer.vue';
+
+import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
+import { ref, provide, watch } from 'vue';
+
+const { getColorScheme, updateColorScheme } = useColorScheme();
+const colorScheme = ref(getColorScheme());
+provide('colorScheme', colorScheme);
+watch(colorScheme, val => updateColorScheme(val))
+</script>
+
+<template>
+    <div
+        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
+        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
+        id="app-wrapper"
+    >
+        <Navbar />
+
+        <router-view class="main-content" />
+
+        <Footer />
+    </div>
+</template>
+
+<style scoped>
+.main-content {
+    --main-content-padding-x: 30px;
+    --main-content-padding-y: 40px;
+    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x) 0;
+    flex-grow: 1;
+}
+
+#app-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--light-bg);
+    color: var(--dark);
+}
+</style>

src/assets/images/logo.svg

@@ -0,0 +1,19 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="758.75" height="192.5">
+<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#4ba8eb"/><stop offset="100%" style="stop-color:#043485"/></linearGradient></defs>
+<path stroke="url(#gradient)" stroke-width="15" fill="none" d=" M94 51 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 1 43.75 43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75  M138.75 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M270 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M401.25 0 v192.5 m0 -96.125 l87.5 -87.5 m-87.5 87.5 l87.5 87.5  M532.5 192.5 v-192.5 m0 51.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75  M663.75 50.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v43.75 v43.75 v43.75 m0 -43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v50"/></svg>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -0,0 +1,70 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const colorScheme = inject('colorScheme');
+
+const colorSchemeNextMapper = {
+    'light': 'dark',
+    'dark': 'auto',
+    'auto': 'light'
+};
+
+const colorSchemeIconMapper = {
+    'dark': '⏾',
+    'light': '☀',
+    'auto': '◐'
+};
+
+const getTooltipTranslation = function (colorScheme) {
+    return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
+};
+</script>
+
+<template>
+    <button class="color-scheme-button"
+        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        :aria-label="getTooltipTranslation(colorScheme)"
+        :title="getTooltipTranslation(colorScheme)"
+    >
+        {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
+    </button>
+</template>
+
+<style scoped>
+.color-scheme-button {
+    background: none;
+    border: 1.5px solid var(--border);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dark);
+}
+
+.color-scheme-button:hover {
+    background: var(--light-hover);
+}
+</style>

src/features/colorScheme/composables/useColorScheme.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const useColorScheme = function () {
+    const getColorScheme = function () {
+        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
+        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
+            colorScheme = 'auto';
+        };
+        return colorScheme;
+    };
+
+    const updateColorScheme = function (newScheme) {
+        let actualNewScheme = newScheme;
+        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
+            actualNewScheme = 'auto';
+        };
+
+        localStorage.setItem('colorScheme', actualNewScheme);
+    };
+
+    return {
+        getColorScheme,
+        updateColorScheme
+    };
+};

src/features/footer/components/Footer.vue

@@ -0,0 +1,67 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const startYear = 2026
+const currentYear = new Date().getFullYear()
+
+const copyrightPeriod =
+    startYear === currentYear
+        ? `${currentYear}`
+        : `${startYear}-${currentYear}`
+
+
+</script>
+
+<template>
+    <footer class="global-footer">
+        <div class="footer-segment">
+            <RouterLink to="settings" class="link">
+                {{ t('preferences.settings') }}
+            </RouterLink>
+        </div>
+        <div class="footer-segment">
+            <div class="copyright-note">
+                &copy; {{ copyrightPeriod }} Seekra
+            </div>
+        </div>
+    </footer>
+</template>
+
+<style scoped>
+.global-footer {
+    --padding-y: 16px;
+}
+
+.footer-segment {
+    padding: var(--padding-y);
+    background-color: var(--light-bg);
+    border-top: 1px solid var(--border);
+}
+
+.global-footer a {
+    color: var(--dark);
+}
+
+.copyright-note {
+    display: flex;
+    justify-content: center;
+}
+</style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -0,0 +1,151 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
+
+const { t, locale } = useI18n();
+
+const isOpen = ref(false);
+const languageDropdown = ref(null);
+
+async function selectLanguage(code) {
+    await loadLanguage(code);
+    localStorage.setItem('locale', code);
+    document.documentElement.lang = code;
+    document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr';
+    close();
+};
+
+const close = function () {
+    document.removeEventListener('click', closeWrapperOnClickOutsite);
+    isOpen.value = false;
+};
+
+const closeWrapperOnClickOutsite = function (e) {
+    if (languageDropdown.value) {
+        if (!languageDropdown.value.contains(e.target)) {
+            close();
+        };
+    };
+};
+
+const open = function () {
+    if (!isOpen.value) {
+        isOpen.value = true;
+        setTimeout(() => {
+            document.addEventListener('click', closeWrapperOnClickOutsite);
+        }, 0);
+    };
+};
+</script>
+
+<template>
+    <div class="language-switch" tabindex="-1">
+        <button
+            class="language-button button"
+            @click="open"
+            :aria-expanded="isOpen"
+            aria-haspopup="listbox"
+        >
+            <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
+            <span class="chevron" :class="{ open: isOpen }">▾</span>
+        </button>
+
+        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
+            <li
+                v-for="lang in SUPPORTED_LANGUAGES"
+                :key="lang"
+                role="option"
+                :aria-selected="lang === locale"
+                :class="{ active: lang === locale }"
+                @click="selectLanguage(lang)"
+            >
+                <span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.language-switch {
+    position: relative;
+}
+
+.language-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+    color: var(--dark);
+}
+
+.language-button:hover {
+    background-color: var(--light-hover);
+}
+
+.chevron {
+    font-size: 0.75rem;
+    transition: transform 0.2s;
+    display: inline-block;
+}
+
+.chevron.open {
+    transform: rotate(180deg);
+}
+
+.language-dropdown {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 6px);
+    background-color: var(--light-bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    list-style: none;
+    margin: 0;
+    padding: 6px 0;
+    min-width: 160px;
+    z-index: 100;
+}
+
+.language-dropdown li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.language-dropdown li:hover {
+    background-color: var(--light-hover);
+}
+
+.language-dropdown li.active {
+    font-weight: bold;
+}
+
+.flag {
+    font-size: 1.1rem;
+}
+</style>

src/features/legal/services/loader.js

@@ -0,0 +1,15 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/

src/features/legal/views/ImprintView.vue

@@ -0,0 +1,15 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/

src/features/legal/views/PrivacyPolicyView.vue

@@ -0,0 +1,69 @@
+```vue
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// 1. ALLE Sprachen importieren (Verhindert den ReferenceError)
+import de from '@/legal/privacy/de.md?raw';
+import en from '@/legal/privacy/en.md?raw';
+import fr from '@/legal/privacy/fr.md?raw';
+import es from '@/legal/privacy/es.md?raw';
+import it from '@/legal/privacy/it.md?raw';
+import pt from '@/legal/privacy/pt.md?raw';
+
+const { locale } = useI18n();
+
+const content = computed(() => {
+  const map = {
+    de,
+    en,
+    fr,
+    es,
+    it,
+    pt
+  };
+
+  // Falls eine Sprache mal nicht existiert, nutzen wir 'de' oder 'en' als Fallback
+  return map[locale.value] || de;
+});
+</script>
+
+<template>
+  <main class="privacy-policy-content main-content-padding">
+    <h1>{{ $t('legal.privacy.title') }}</h1>
+
+    <div class="markdown-body">{{ content }}</div>
+  </main>
+</template>
+
+<style scoped>
+.privacy-policy-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+/* Sorgt dafür, dass die Zeilenumbrüche aus den .md Dateien erhalten bleiben */
+.markdown-body {
+  white-space: pre-wrap;
+  font-family: inherit;
+  line-height: 1.6;
+}
+</style>

src/features/nav/components/Navbar.vue

@@ -0,0 +1,95 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
+import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
+import logo from '@/assets/images/logo.svg';
+import Searchbar from '@/features/search/components/Searchbar.vue';
+
+const route = useRoute();
+const searchQueryModel = defineModel();
+
+watch(() => route.name, name => {
+    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
+});
+
+watch(() => route.query.q, q => {
+    if (route.name === 'searchResults') {
+        searchQueryModel.value = q || '';
+    }
+});
+</script>
+
+<template>
+    <nav class="global-nav">
+        <RouterLink to="/" class="link button link">
+            <img :src="logo" alt="Seekra" class="nav-logo" />
+        </RouterLink>
+        <Searchbar
+            v-if="route.name === 'searchResults'"
+            class="search-bar"
+            v-model="searchQueryModel"
+            auto-submit
+        />
+        <ul class="right-links">
+            <li>
+                <LanguageSwitchButton />
+            </li>
+            <li>
+                <ColorSchemeButton />
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<style scoped>
+.global-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 40px;
+    height: 42px;
+}
+
+.global-nav .right-links {
+    display: flex;
+    gap: 30px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+}
+
+.global-nav .right-links a {
+    text-decoration: none;
+    color: var(--dark);
+}
+
+.global-nav .right-links a:hover{
+    text-decoration: underline;
+}
+
+.nav-logo {
+    height: 24px;
+    width: auto;
+}
+.search-bar {
+    width: 70%;
+}
+</style>

src/features/search/components/Searchbar.vue

@@ -0,0 +1,94 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+const searchQuery = defineModel();
+
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const router = useRouter()
+const props = defineProps(['autoSubmit'])
+
+const submitSearch = function () {
+    if (props.autoSubmit !== undefined) {
+        router.push({
+            name: 'searchResults',
+            query: { q: searchQuery.value }
+        });
+    };
+}
+</script>
+
+<template>
+    <div>
+        <form @submit.prevent="submitSearch">
+            <div class="search-wrapper">
+                <input
+                v-model="searchQuery"
+                type="search"
+                :placeholder="t('search.searchBar.placeholder')"
+                required
+                />
+                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+.search-wrapper {
+    --submit-button-padding-y: 8px;
+    --content-height: 32px;
+    --padding: 4px;
+    --padding-left: calc(var(--content-height) + var(--padding));
+    display: flex;
+    align-items: center;
+    border: 1.5px solid var(--border);
+    box-shadow: 0 0px 32px var(--blue-box-shadow);
+    border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
+    padding: var(--padding);
+    padding-left: var(--padding-left);
+    width: calc(100% - var(--padding-left));
+}
+
+.search-wrapper input {
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
+    height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+}
+
+.search-button {
+    font-size: 1rem;
+    height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
+    border: none;
+    padding: var(--submit-button-padding-y) 20px;
+    background: var(--primary-color);
+    color: var(--white);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-button:hover {
+    background: var(--primary-color-l-1);
+}
+</style>

src/features/search/views/SearchResultsView.vue

@@ -0,0 +1,99 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="main-content-padding">
+        <div class="search-results-error-message-container">
+            <div class="search-results-error-message">
+                <p>{{ t('search.error.searchNotAvailable') }}</p>
+                <p>{{ t('error.tryAgainToAnotherTime') }}</p>
+            </div>
+        </div>
+        <div class="search-results-container">
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.search-bar {
+    width: 50%;
+}
+
+@media (max-width: 67.5rem) {
+    .search-bar {
+        width: 100%;
+    }
+}
+
+.search-results-container {
+    margin-top: 56px;
+}
+
+.search-results-error-message-container {
+    --error-message-height: 100px;
+    --error-message-padding: 2em;
+    display: flex;
+    justify-content: center;
+    width: calc(100% - 2 * var(--main-content-padding-x));
+    position: absolute;
+    top: calc(50vh - 0.5 * var(--error-message-height) - var(--error-message-padding));
+}
+
+.search-results-error-message {
+    padding: var(--error-message-padding);
+    font-size: 18px;
+    box-shadow: 0px 0px 42px var(--gray-box-shadow);
+    border-radius: 28px;
+    text-align: center;
+    background-color: var(--light-bg);
+    animation: fade-in 0.8s ease-out;
+    height: var(--error-message-height);
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    outline: 1px solid var(--border);
+}
+
+@media (max-width: 48rem) {
+    .search-results-error-message-container {
+        --error-message-height: 150px;
+    }
+    .search-results-error-message {
+        padding: 1em;
+        width: 100%;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    10% {
+        opacity: 0;
+        transform: scale(1.02);
+    }
+    100% {
+        opacity: 100;
+        transform: scale(1);
+    }
+}
+</style>

src/features/settings/composables/useSettingsConfig.js

@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ref, readonly } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser.js';
+
+const config  = ref(null);
+const error   = ref(null);
+const loading = ref(false);
+
+/**
+ * Provides reactive access to the parsed settings configuration.
+ * The config is loaded once and shared across all consumers.
+ */
+export function useSettingsConfig() {
+    async function load() {
+        loading.value = true;
+        error.value   = null;
+        try {
+            config.value = await loadSettingsConfig();
+        } catch (e) {
+            error.value  = e.message;
+            config.value = null;
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    return {
+        config:  readonly(config),
+        error:   readonly(error),
+        loading: readonly(loading),
+        load,
+    };
+}

src/features/settings/settings.json

@@ -0,0 +1,3 @@
+{
+    "contents": []
+}

src/features/settings/types/settingsConfig.js

@@ -0,0 +1,68 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * @typedef {'bool' | 'number' | 'string' | 'selection' | 'section'} SettingType
+ */
+
+/**
+ * @typedef {Object} SelectionOption
+ * @property {string} name
+ * @property {string} i18n
+ */
+
+/**
+ * @typedef {Object} BaseSettingConfig
+ * @property {SettingType} type
+ * @property {string} name
+ * @property {string} i18n
+ * @property {string} [description]
+ */
+
+/**
+ * @typedef {BaseSettingConfig & {
+ *   default: string | string[],
+ *   allowMultiple: boolean,
+ *   options: SelectionOption[]
+ * }} SelectionSettingConfig
+ */
+
+/**
+ * @typedef {Object} SectionSettingConfig
+ * @property {'section'} type
+ * @property {string} name
+ * @property {string} [i18n]
+ * @property {string} [description]
+ * @property {SettingConfigEntry[]} content
+ */
+
+/**
+ * @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
+ */
+
+/**
+ * @typedef {Object} SettingsConfig
+ * @property {SettingConfigEntry[]} contents
+ */
+/**
+ * @typedef {{ type: 'bool', name: string, i18n: string, description?: string, default: boolean }} BoolSettingConfig
+ * @typedef {{ type: 'number', name: string, i18n: string, description?: string, default: number }} NumberSettingConfig
+ * @typedef {{ type: 'string', name: string, i18n: string, description?: string, default: string }} StringSettingConfig
+ * @typedef {{ type: 'selection', name: string, i18n: string, description?: string, default: string | string[], allowMultiple?: boolean, options: SelectionOption[] }} SelectionSettingConfig
+ * @typedef {{ type: 'section', name: string, i18n?: string, description?: string, content: SettingConfigEntry[] }} SectionSettingConfig
+ * @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
+ * @typedef {{ contents: SettingConfigEntry[] }} SettingsConfig
+ */

src/features/settings/utils/settingsParser.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { validateSettingsConfig } from './settingsValidator.js';
+
+/**
+ * Loads and parses the settings configuration via dynamic import.
+ * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
+ */
+export async function loadSettingsConfig() {
+    let raw;
+
+    try {
+        raw = (await import('../settings.json')).default;
+    } catch (e) {
+        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
+    }
+
+    const result = validateSettingsConfig(raw);
+    if (!result.valid) {
+        throw new Error(result.error);
+    }
+
+    return result.config;
+}

src/features/settings/utils/settingsValidator.js

@@ -0,0 +1,99 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const VALID_TYPES = ['bool', 'number', 'string', 'selection', 'section'];
+
+function assertString(value, path) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        throw new Error(`[settings] "${path}" must be a non-empty string`);
+    }
+}
+
+function assertType(value, path) {
+    if (!VALID_TYPES.includes(value)) {
+        throw new Error(
+            `[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}`
+        );
+    }
+}
+
+function validateSelectionOptions(options, path) {
+    if (!Array.isArray(options) || options.length === 0) {
+        throw new Error(`[settings] "${path}.options" must be a non-empty array`);
+    }
+    options.forEach((opt, i) => {
+        assertString(opt.name, `${path}.options[${i}].name`);
+        assertString(opt.i18n, `${path}.options[${i}].i18n`);
+    });
+}
+
+function validateEntry(entry, path) {
+    assertType(entry.type, `${path}.type`);
+
+    if (entry.type === 'section') {
+        assertString(entry.name, `${path}.name`);
+        if (!Array.isArray(entry.content)) {
+            throw new Error(`[settings] "${path}.content" must be an array`);
+        }
+        entry.content.forEach((child, i) =>
+            validateEntry(child, `${path}.content[${i}]`)
+        );
+        return;
+    }
+
+    assertString(entry.name, `${path}.name`);
+    assertString(entry.i18n, `${path}.i18n`);
+
+    if (entry.default !== undefined) {
+        if (entry.type === 'bool' && typeof entry.default !== 'boolean') {
+             throw new Error(`[settings] "${path}.default" must be a boolean`);
+         }
+         if (entry.type === 'number' && typeof entry.default !== 'number') {
+             throw new Error(`[settings] "${path}.default" must be a number`);
+         }
+         if (entry.type === 'string' && typeof entry.default !== 'string') {
+             throw new Error(`[settings] "${path}.default" must be a string`);
+         }
+         if (entry.type === 'selection') {
+             validateSelectionOptions(entry.options, path);
+             if (typeof entry.allowMultiple !== 'boolean') {
+                 throw new Error(`[settings] "${path}.allowMultiple" must be a boolean`);
+             }
+         }
+    }
+}
+
+/**
+ * Validates a raw settings config object.
+ * @param {unknown} raw
+ * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
+ */
+export function validateSettingsConfig(raw) {
+    try {
+        if (!raw || typeof raw !== 'object') {
+            throw new Error('[settings] Config must be an object');
+        }
+        if (!Array.isArray(raw.contents)) {
+            throw new Error('[settings] "contents" must be an array');
+        }
+        raw.contents.forEach((entry, i) =>
+            validateEntry(entry, `contents[${i}]`)
+        );
+        return { valid: true, config: raw };
+    } catch (e) {
+        return { valid: false, error: e.message };
+    }
+}

src/features/settings/views/SettingsView.vue

@@ -0,0 +1,56 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
+
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="settings-page-wrapper">
+        <header class="header">
+            <h1>
+                {{ t('preferences.settings') }}
+            </h1>
+        </header>
+        <LeftSidebarLayout class="layout">
+            <template #sidebar>
+            </template>
+        </LeftSidebarLayout>
+    </div>
+</template>
+
+<style scoped>
+.layout {
+    flex-grow: 1;
+}
+
+.settings-page-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    padding: var(--main-content-padding-y) var(--main-content-padding-x);
+}
+
+.header h1 {
+    margin: 0;
+}
+</style>

src/features/sidebar/components/Sidebar.vue

@@ -0,0 +1,28 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+    <nav class="sidebar">
+        <slot />
+    </nav>
+</template>
+
+<style scoped>
+.sidebar {
+    border-right: 1px solid var(--border);
+    padding: 20px;
+}
+</style>

src/i18n.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createI18n } from 'vue-i18n';
+import getCurrentLanguage from './utils/currentLanguage';
+
+export const fallbackLocale = 'en';
+
+
+export const LANGUAGES_RTL = [
+    'ar'
+];
+export const SUPPORTED_LANGUAGES = [
+    'en',
+    'de',
+    'fr',
+    'es',
+    'it',
+    'pt'
+];
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: getCurrentLanguage(),
+    fallbackLocale: fallbackLocale,
+    messages: {}
+});
+
+const loadedLanguages = new Set();
+
+export async function loadLanguage (locale) {
+    if (!SUPPORTED_LANGUAGES.includes(locale)) {
+        locale = fallbackLocale;
+    }
+
+    if (loadedLanguages.has(locale)) {
+        i18n.global.locale.value = locale;
+        return;
+    };
+
+    const messages = (await import(`./locales/${locale}.json`)).default;
+
+    i18n.global.setLocaleMessage(locale, messages);
+    i18n.global.locale.value = locale;
+
+    loadedLanguages.add(locale);
+};

src/layouts/LeftSidebarLayout.vue

@@ -0,0 +1,42 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import Sidebar from '@/features/sidebar/components/Sidebar.vue';
+</script>
+
+<template>
+    <div class="layout-container">
+        <Sidebar>
+            <slot name="sidebar" />
+        </Sidebar>
+        <main class="main-content">
+            <slot />
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.layout-container {
+    display: grid;
+    grid-template-columns: min(24%, 280px) 1fr;
+    border-top: 1px solid var(--border);
+}
+
+.main-content {
+    padding: 20px;
+}
+</style>

src/legal/privacy/de.md

@@ -0,0 +1,3 @@
+# Datenschutzerklärung
+
+Hier steht deine Datenschutzerklärung auf Deutsch.

src/legal/privacy/en.md

@@ -0,0 +1,3 @@
+# Privacy Policy
+
+Here is your privacy policy in English.

src/legal/privacy/es.md

@@ -0,0 +1,3 @@
+# Política de privacidad
+
+Aquí tienes tu política de privacidad en español.

src/legal/privacy/fr.md

@@ -0,0 +1,3 @@
+# Politique de confidentialité
+
+Voici ta politique de confidentialité en français.

src/legal/privacy/it.md

@@ -0,0 +1,3 @@
+# Informativa sulla privacy
+
+Qui trovi la tua informativa sulla privacy in italiano.

src/legal/privacy/pt.md

@@ -0,0 +1,3 @@
+# Política de Privacidade
+
+Aqui está a tua Política de Privacidade em português.

src/locales/de.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Suchen",
+            "placeholder": "Suchen..."
+        },
+        "error": {
+            "searchNotAvailable": "Die Suche ist momentan nicht verfügbar."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Bitte versuchen Sie es zu einem anderen Zeitpunkt erneut.",
+        "pageNotFound": "Die gesuchte Seite existiert nicht. Bitte überprüfen Sie die URL oder kehren Sie zur Suchseite zurück."
+    },
+    "links": {
+        "back": {
+            "search": "Zurück zur Suche"
+        }
+    },
+    "preferences": {
+        "settings": "Einstellungen",
+        "colorScheme": {
+            "switch": {
+                "light": "Zum hellen Modus wechseln",
+                "dark": "Zum dunklen Modus wechseln",
+                "auto": "Zum System-Farbschema wechseln"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Gebaut zum Suchen.",
+
+    "legal": {
+        "privacy": {
+            "title": "Datenschutzerklärung"
+        }
+    }
+}

src/locales/en.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Search",
+            "placeholder": "Search..."
+        },
+        "error": {
+            "searchNotAvailable": "Search is not available right now."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Please try again to another time.",
+        "pageNotFound": "The page you are looking for does not exist. Please check the URL or return to the search page."
+    },
+    "links": {
+        "back": {
+            "search": "Back to Search"
+        }
+    },
+    "preferences": {
+        "settings": "Settings",
+        "colorScheme": {
+            "switch": {
+                "light": "Switch to light mode",
+                "dark": "Switch to dark mode",
+                "auto": "Switch to the system color scheme"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Built to search.",
+
+    "legal": {
+        "privacy": {
+            "title": "Privacy Policy"
+        }
+    }
+}

src/locales/es.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Buscar",
+            "placeholder": "Buscar..."
+        },
+        "error": {
+            "searchNotAvailable": "La búsqueda no está disponible en este momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Por favor, inténtalo de nuevo más tarde.",
+        "pageNotFound": "La página que buscas no existe. Comprueba la URL o vuelve a la página de búsqueda."
+    },
+    "links": {
+        "back": {
+            "search": "Volver a la búsqueda"
+        }
+    },
+    "preferences": {
+        "settings": "Ajustes",
+        "colorScheme": {
+            "switch": {
+                "light": "Cambiar al modo claro",
+                "dark": "Cambiar al modo oscuro",
+                "auto": "Usar el esquema de color del sistema"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Hecho para buscar.",
+
+    "legal": {
+        "privacy": {
+            "title": "Política de Privacidad"
+        }
+    }
+}

src/locales/fr.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Rechercher",
+            "placeholder": "Rechercher..."
+        },
+        "error": {
+            "searchNotAvailable": "La recherche n'est pas disponible pour le moment."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Veuillez réessayer ultérieurement.",
+        "pageNotFound": "La page que vous recherchez n'existe pas. Vérifiez l'URL ou retournez à la page de recherche."
+    },
+    "links": {
+        "back": {
+            "search": "Retour à la recherche"
+        }
+    },
+    "preferences": {
+        "settings": "Paramètres",
+        "colorScheme": {
+            "switch": {
+                "light": "Passer en mode clair",
+                "dark": "Passer en mode sombre",
+                "auto": "Utiliser le thème système"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Conçu pour chercher.",
+
+    "legal": {
+        "privacy": {
+            "title": "Politique de Confidentialité"
+        }
+     }
+}

src/locales/it.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Cerca",
+            "placeholder": "Cerca..."
+        },
+        "error": {
+            "searchNotAvailable": "La ricerca non è disponibile al momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Per favore riprova più tardi.",
+        "pageNotFound": "La pagina che cerchi non esiste. Controlla l'URL o torna alla pagina di ricerca."
+    },
+    "links": {
+        "back": {
+            "search": "Torna alla ricerca"
+        }
+    },
+    "preferences": {
+        "settings": "Impostazioni",
+        "colorScheme": {
+            "switch": {
+                "light": "Passa alla modalità chiara",
+                "dark": "Passa alla modalità scura",
+                "auto": "Usa la combinazione colori di sistema"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Costruito per cercare.",
+
+    "legal": {
+        "privacy": {
+            "title": "Politica di Privacy"
+        }
+    }
+}

src/locales/pt.json

@@ -0,0 +1,47 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Pesquisar",
+            "placeholder": "Pesquisar..."
+        },
+        "error": {
+            "searchNotAvailable": "A pesquisa não está disponível no momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Por favor, tente novamente mais tarde.",
+        "pageNotFound": "A página que você procura não existe. Verifique o URL ou volte à página de pesquisa."
+    },
+    "links": {
+        "back": {
+            "search": "Voltar à pesquisa"
+        }
+    },
+    "preferences": {
+        "settings": "Configurações",
+        "colorScheme": {
+            "switch": {
+                "light": "Mudar para modo claro",
+                "dark": "Mudar para modo escuro",
+                "auto": "Usar esquema de cores do sistema"
+            }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
+        }
+    },
+    "slogan": "Feito para pesquisar.",
+
+    "legal": {
+        "privacy": {
+            "title": "Política de Privacidade"
+        }
+    }
+}

src/main.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import { i18n, loadLanguage } from './i18n';
+import getCurrentLanguage from './utils/currentLanguage';
+import router from './router'
+import './styles/common.css'
+import './styles/variables/colors.css'
+
+await loadLanguage(getCurrentLanguage());
+
+createApp(App)
+    .use(router)
+    .use(i18n)
+    .mount('#app')

src/router/index.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createRouter, createWebHistory } from 'vue-router';
+import { i18n } from '@/i18n';
+
+import SearchView from '../views/SearchView.vue';
+import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
+import SettingsView from '@/features/settings/views/SettingsView.vue';
+import NotFound from '../views/NotFound.vue';
+import PrivacyPolicyView from '@/features/legal/views/PrivacyPolicyView.vue';
+
+const routes = [
+    {
+        path: '/',
+        name: 'startPage',
+        component: SearchView
+    },
+    {
+        path: '/search',
+        name: 'searchResults',
+        component: SearchResultsView,
+        props: route => ({
+            searchQuery: route.query.q
+        }),
+        meta: {
+            title: (route) => route.query.q
+        }
+    },
+    {
+        path: '/settings',
+        name: 'settings',
+        component: SettingsView,
+        meta: {
+            title: () => i18n.global.t('preferences.settings')
+        }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'notFound',
+        component: NotFound
+    },
+    {
+    path: '/privacy',
+    name: 'privacyPolicy',
+    component: PrivacyPolicyView,
+    meta: {
+        title: () => 'Privacy Policy'
+    }
+    },
+
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+// set page title
+router.afterEach(to => {
+    const title =
+        typeof to.meta.title === 'function'
+        ? to.meta.title(to)
+        : to.meta.title;
+
+    if (title) {
+        document.title = `${title} - Seekra`;
+    } else {
+        document.title = 'Seekra';
+    };
+});
+
+export default router;

src/styles/common.css

@@ -0,0 +1,37 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+body {
+    margin: 0;
+    font-size: 16px;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.link:hover:not(.button-link) {
+    text-decoration: underline;
+}
+
+input {
+    color: var(--dark);
+}
+
+.main-content-padding {
+    padding: var(--main-content-padding);
+    width: calc(100% - var(--main-content-padding-x) * 2);
+}

src/styles/main.css

@@ -0,0 +1,26 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+form {
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+}
+
+footer{
+    text-align: center;
+    margin-top: 20px;
+}

src/styles/variables/colors.css

@@ -0,0 +1,149 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+#app-wrapper {
+    --primary-color-l-8:  oklch(0.897 0.202 260);
+    --primary-color-l-7:  oklch(0.847 0.202 260);
+    --primary-color-l-6:  oklch(0.797 0.202 260);
+    --primary-color-l-6:  oklch(0.747 0.202 260);
+    --primary-color-l-4:  oklch(0.697 0.202 260);
+    --primary-color-l-3:  oklch(0.647 0.202 260);
+    --primary-color-l-2:  oklch(0.597 0.202 260);
+    --primary-color-l-1:  oklch(0.547 0.202 260);
+    --primary-color:      oklch(0.497 0.202 260);
+    --primary-color-d-1:  oklch(0.447 0.202 260);
+    --primary-color-d-2:  oklch(0.397 0.202 260);
+    --primary-color-d-3:  oklch(0.347 0.202 260);
+    --primary-color-d-4:  oklch(0.297 0.202 260);
+    --primary-color-d-5:  oklch(0.247 0.202 260);
+    --primary-color-d-6:  oklch(0.197 0.202 260);
+    --primary-color-d-7:  oklch(0.147 0.202 260);
+    --primary-color-d-8:  oklch(0.097 0.202 260);
+
+    --black-l-8:          oklch(0.4 0 0);
+    --black-l-7:          oklch(0.35 0 0);
+    --black-l-6:          oklch(0.3 0 0);
+    --black-l-5:          oklch(0.25 0 0);
+    --black-l-4:          oklch(0.2 0 0);
+    --black-l-3:          oklch(0.15 0 0);
+    --black-l-2:          oklch(0.1 0 0);
+    --black-l-1:          oklch(0.05 0 0);
+    --black:              oklch(0 0 0);
+
+    --white:              oklch(1 0 0);
+    --white-d-1:          oklch(0.95 0 0);
+    --white-d-2:          oklch(0.9 0 0);
+    --white-d-3:          oklch(0.85 0 0);
+    --white-d-4:          oklch(0.8 0 0);
+    --white-d-5:          oklch(0.75 0 0);
+    --white-d-6:          oklch(0.7 0 0);
+    --white-d-7:          oklch(0.65 0 0);
+    --white-d-8:          oklch(0.6 0 0);
+
+    --dark-l-8:             var(--black-l-8);
+    --dark-l-7:             var(--black-l-7);
+    --dark-l-6:             var(--black-l-6);
+    --dark-l-5:             var(--black-l-5);
+    --dark-l-4:             var(--black-l-4);
+    --dark-l-3:             var(--black-l-3);
+    --dark-l-2:             var(--black-l-2);
+    --dark-l-1:             var(--black-l-1);
+    --dark:                 var(--black);
+
+    --light:                var(--white);
+    --light-d-1:            var(--white-d-1);
+    --light-d-2:            var(--white-d-2);
+    --light-d-3:            var(--white-d-3);
+    --light-d-4:            var(--white-d-4);
+    --light-d-5:            var(--white-d-5);
+    --light-d-6:            var(--white-d-6);
+    --light-d-7:            var(--white-d-7);
+    --light-d-8:            var(--white-d-8);
+
+    --dark-bg:              var(--black-l-2);
+    --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
+
+    --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
+    --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
+
+    --light-hover:          var(--light-d-2);
+}
+
+@media (prefers-color-scheme: dark) {
+    #app-wrapper.color-scheme-auto {
+        --dark-l-8:             var(--white-d-8);
+        --dark-l-7:             var(--white-d-7);
+        --dark-l-6:             var(--white-d-6);
+        --dark-l-5:             var(--white-d-5);
+        --dark-l-4:             var(--white-d-4);
+        --dark-l-3:             var(--white-d-3);
+        --dark-l-2:             var(--white-d-2);
+        --dark-l-1:             var(--white-d-1);
+        --dark:                 var(--white);
+
+        --light:                var(--black);
+        --light-d-1:            oklch(0.10 0 0);
+        --light-d-2:            var(--black-l-2);
+        --light-d-3:            var(--black-l-3);
+        --light-d-4:            var(--black-l-4);
+        --light-d-5:            var(--black-l-5);
+        --light-d-6:            var(--black-l-6);
+        --light-d-7:            var(--black-l-7);
+        --light-d-8:            var(--black-l-8);
+
+        --dark-bg:              var(--white);
+        --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
+
+        --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+        --light-hover:          var(--light-d-5);
+    }
+}
+
+#app-wrapper.dark {
+    --dark-l-8:             var(--white-d-8);
+    --dark-l-7:             var(--white-d-7);
+    --dark-l-6:             var(--white-d-6);
+    --dark-l-5:             var(--white-d-5);
+    --dark-l-4:             var(--white-d-4);
+    --dark-l-3:             var(--white-d-3);
+    --dark-l-2:             var(--white-d-2);
+    --dark-l-1:             var(--white-d-1);
+    --dark:                 var(--white);
+
+    --light:                var(--black);
+    --light-d-1:            oklch(0.10 0 0);
+    --light-d-2:            var(--black-l-2);
+    --light-d-3:            var(--black-l-3);
+    --light-d-4:            var(--black-l-4);
+    --light-d-5:            var(--black-l-5);
+    --light-d-6:            var(--black-l-6);
+    --light-d-7:            var(--black-l-7);
+    --light-d-8:            var(--black-l-8);
+
+    --dark-bg:              var(--white);
+    --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
+
+    --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+    --light-hover:          var(--light-d-5);
+}

src/utils/currentLanguage.js

@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export default function getCurrentLanguage () {
+    const saved = localStorage.getItem('locale');
+    if (saved) return saved;
+    const locale = new Intl.Locale(navigator.language);
+    return locale.language;
+};

src/views/NotFound.vue

@@ -0,0 +1,56 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="not-found main-content-padding">
+       <span class="error-message">
+            {{ t('error.pageNotFound') }}
+        </span>
+        <RouterLink to="/" id="link">
+            {{ t('links.back.search') }}
+        </RouterLink>
+    </div>
+</template>
+
+<style scoped>
+.not-found {
+    text-align: center;
+    padding-top: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+.error-message{
+    margin: 0;
+    font-weight: 600;
+    font-size: 2vw;
+}
+#link {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding: 10px 20px;
+    text-decoration: none;
+}
+</style>

src/views/SearchView.vue

@@ -0,0 +1,85 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import Searchbar from '../features/search/components/Searchbar.vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import logo from '@/assets/images/logo.svg';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const searchQuery = ref('');
+
+const submitSearch = function () {
+
+};
+</script>
+
+<template>
+    <div class="search-content main-content-padding">
+    <header class="global-header">
+        <img :src="logo" alt="Seekra" class="header-logo" />
+        <span class="slogan">
+            {{ t('slogan') }}
+        </span>
+    </header>
+    
+        <div class="search-container">
+            <Searchbar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.search-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 60px;
+}
+
+.global-header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 40px;
+}
+
+.header-logo {
+    width: 320px;
+    max-width: 100%;
+}
+
+.slogan{
+    margin: 0;
+    font-size: small;
+}
+
+.search-container {
+    width: 70%;
+    max-width: 624px;
+}
+
+@media (max-width: 67.5rem) {
+    .search-container {
+        width: 100%;
+    }
+}
+</style>

style/style.css

@@ -1,29 +0,0 @@
-body{
-    margin: 0;
-}
-header{
-    text-align: center;
-}
-
-h1{
-    margin-bottom: 0;
-}
-
-h3{
-    margin-top: 0;
-}
-
-#searchbar{
-    text-align: center;
-}
-#searchbar input[type="search"]{
-    width: 60%;
-    margin-bottom: 10px;
-}
-footer{
-    justify-content: center;
-    margin-top: 100px;
-    display: flex;
-    gap: 20px;
-    border-top: 1px solid;
-}

vite.config.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+import { createHtmlPlugin } from 'vite-plugin-html';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    createHtmlPlugin({
+      minify: true
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  }
+})