📖 docs: Update README.md (#189)

## Description
Update the readme file

## Related Issues
none

## Type of Change

- [ ] Bug fix (non-breaking change)
- [ ] New feature (non-breaking change)
- [ ] Breaking change (fix or feature that changes existing
functionality)
- [x] Documentation update
- [ ] Other (please describe):

## Checklist

- [x] I have updated relevant documentation
- [x] My code follows the project's coding style
- [x] My changes generate no new warnings/errors

## Notes for Reviewers
none

## Screenshots/Demo
none

## Additional Context
none

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Documentation**
- Major overhaul of documentation structure and content for improved
clarity, modern presentation, and ease of navigation.
- Updated and expanded guides for installation, setup, architecture, and
command-line interfaces.
- Enhanced FAQ and troubleshooting sections with more comprehensive
answers and technical details.
- Added new guides for self-hosting with reverse proxy examples (Caddy,
Traefik) and developer notes.
- Improved theming, styling, and home page layout for the documentation
site.
  - Simplified main README to a minimalistic project header and tagline.
- Added new documentation files for Nestri Relay introduction and
container CLI parameters.
- Removed outdated or redundant documentation files and components to
streamline content.

- **Chores**
- Updated, reorganized, or removed configuration files for dependencies,
linting, and environment setup.
- Switched to a new documentation theme and updated related project
dependencies.
- Removed Renovate configuration and ESLint config specific to docs app.
- Adjusted TypeScript and package configurations for better
compatibility.

- **Style**
- Improved dark mode support and visual consistency across documentation
and components.
- Introduced new Tailwind CSS theming and animation support for the
documentation site.

- **New Features**
- Added example configuration files for deploying Nestri Relay with
Caddy and Traefik reverse proxies.
- Introduced new Tailwind CSS theming and animation support for the
documentation site.
- Added a new logo component supporting light/dark mode and optional
title display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Victor Pahuus Petersen <49293748+victorpahuus@users.noreply.github.com>
Co-authored-by: Wanjohi <elviswanjohi47@gmail.com>
Co-authored-by: DatCaptainHorse <DatCaptainHorse@users.noreply.github.com>

apps/docs/components/AppSocialIcons.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-const socials = ['twitter', 'facebook', 'instagram', 'tiktok', 'youtube', 'github', 'medium', 'reddit', 'discord']
-
-const { config } = useDocus()
-
-const icons = computed<any>(() => {
-  return Object.entries(config.value.socials || {})
-    .map(([key, value]) => {
-      if (typeof value === 'object') {
-        return value
-      } else if (typeof value === 'string' && value && socials.includes(key)) {
-        return {
-          href: /^https?:\/\//.test(value) ? value : `https://${key}.com/${value}`,
-          icon: `fa-brands:${key}`,
-          label: value,
-          rel: 'noopener noreferrer'
-        }
-      } else {
-        return null
-      }
-    })
-    .filter(Boolean)
-})
-</script>
-
-<template>
-  <NuxtLink
-    v-for="icon in icons"
-    :key="icon.label"
-    :rel="icon.rel"
-    :title="icon.label"
-    :aria-label="icon.label"
-    :href="icon.href"
-    target="_blank"
-  >
-    <Icon
-      v-if="icon.icon"
-      :name="icon.icon"
-    />
-  </NuxtLink>
-</template>
-
-<style lang="ts" scoped>
-css({
-  a: {
-    display: 'flex',
-    color: '{color.gray.500}',
-    padding: '{space.4}',
-
-    '@dark': {
-      color: '{color.gray.400}'
-    },
-
-    '&:hover': {
-      color: '{color.gray.700}',
-      '@dark': {
-        color: '{color.gray.200}',
-      }
-    },
-  }
-})
-</style>

apps/docs/components/Logo.vue

@@ -1,3 +0,0 @@
-<template>
-    <img width="120" src="/img/nestri-logo-sm.svg"/>
-  </template>

apps/docs/components/content/Contributors.vue

@@ -3,7 +3,7 @@
 
 
   <div class="py-8">
-    <h2 class="text-3xl lg:text-4xl font-bold mb-12 text-gray-900">
+    <h2 class="text-3xl lg:text-4xl font-bold mb-12 text-gray-900 dark:text-white">
       Contributors made <span class="text-orange-500">Nestri</span>
     </h2>
     <div class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-8 gap-4 sm:gap-5 lg:gap-6">
@@ -22,7 +22,7 @@
           }"
         >
           <UTooltip class="w-full text-orange-500" :text="contributor.login">
-            <NuxtImg
+            <img
               :src="contributor.avatar_url"
               provider="ipx"
               densities="x1 x2"
@@ -33,7 +33,7 @@
               class="rounded-xl w-full h-full transition lg:hover:scale-110"
             />
           </UTooltip>
-          <span class="inline-block rounded-t px-1 bg-gray-950 text-white absolute -bottom-2 right-0 font-medium text-sm">
+          <span class="inline-block rounded-t px-1 bg-gray-950 dark:bg-white text-white dark:text-gray-950 absolute -bottom-2 right-0 font-medium text-sm">
             <span class="font-light text-xs text-gray-400">#</span>{{ index + 1 }}
           </span>
 

apps/docs/components/layout/Header/Logo.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+      <NuxtLink v-if="logo.light && logo.dark" class="flex">
+        <img :src="logo.light" class="h-7 dark:hidden" />
+        <img :src="logo.dark" class="hidden h-7 dark:block" />
+        <span v-if="showTitle && title" class="ml-3 self-center font-bold">
+           {{ title }}
+        </span>
+      </NuxtLink>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  const { logo, title, showTitle } = useConfig().value.header;
+  </script>