Fixed design and texts

package-lock.json

@@ -11,6 +11,7 @@
         "@tailwindcss/vite": "^4.1.17",
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.556.0",
+        "pinia": "^3.0.4",
         "radix-vue": "^1.9.17",
         "tailwind-merge": "^3.4.0",
         "vue": "^3.5.25",
@@ -2029,7 +2030,6 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
       "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2126,7 +2126,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
       "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-what": "^5.2.0"
@@ -2390,7 +2389,6 @@
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-docker": {
@@ -2432,7 +2430,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
       "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2787,7 +2784,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mrmime": {
@@ -2900,6 +2896,66 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2979,7 +3035,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/rollup": {
@@ -3074,7 +3129,6 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3084,7 +3138,6 @@
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
       "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "copy-anything": "^4"

package.json

@@ -15,6 +15,7 @@
     "@tailwindcss/vite": "^4.1.17",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.556.0",
+    "pinia": "^3.0.4",
     "radix-vue": "^1.9.17",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.25",

src/App.vue

@@ -4,14 +4,15 @@ import Footer from './components/Footer.vue';
 </script>
 
 <template>
+<div class=" bg-background text-foreground min-h-screen">
   <Navbar></Navbar>
 
-  <div class="">
+  <div class="p-5">
     <router-view />
   </div>
 
   <Footer></Footer>
-
+</div>
 </template>
 
 

src/assets/main.css

@@ -1 +1,24 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@theme {
+  --color-background: rgb(var(--background));
+  --color-foreground: rgb(var(--foreground));
+}
+
+@layer base {
+  :root {
+    --background: 240 240 240;
+    --foreground: 15 23 42;
+  }
+
+  .dark {
+    --background: 2 6 23;
+    --foreground: 226 232 240;
+  }
+}
+
+@layer utilities {
+  .animate-spin-slow {
+    animation: spin 4s linear infinite;
+  }
+}

src/components/Footer.vue

@@ -6,9 +6,9 @@ const currentYear = new Date().getFullYear()
 </script>
 
 <template>
-  <footer class="border-t border-border bg-card">
+  <footer class="border-t border-border bg-card justify-center text-center">
-    <div class="container py-12">
+    <div class="container mx-auto py-12 px-2">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
         <!-- Brand -->
         <div>
           <div class="flex items-center gap-2 mb-4">
@@ -18,7 +18,7 @@ const currentYear = new Date().getFullYear()
             <span class="font-bold text-lg">NoSys</span>
           </div>
           <p class="text-sm text-muted-foreground">
-            A social network no one can control. 100% decentralized.
+            A social network no one can control.
           </p>
         </div>
 
@@ -53,11 +53,6 @@ const currentYear = new Date().getFullYear()
                 Documentation
               </RouterLink>
             </li>
-            <li>
-              <RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Community
-              </RouterLink>
-            </li>
             <li>
               <RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                 Blog
@@ -85,33 +80,52 @@ const currentYear = new Date().getFullYear()
                 Open Source License
               </RouterLink>
             </li>
+          </ul>
+        </div>
+
+        <!-- Community -->
+        <div>
+          <h3 class="font-semibold mb-4">Community</h3>
+          <ul class="space-y-3">
             <li>
-              <RouterLink
+              <RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                to="/community#donate"
+                Other plataforms
-                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
-              >
-                <Heart class="h-4 w-4" />
-                Donate
               </RouterLink>
             </li>
             <li>
+              <RouterLink
+                to="/community#donate"
+                class="text-sm text-muted-foreground hover:text-foreground transition-colors items-center gap-2"
+              >
+              <div class="flex items-center gap-2 mb-4 justify-center">
+                <Heart class="h-4 w-4 flex" />
+                Donate
+              </div>
+              </RouterLink>
+            </li>
+            <li>
+              <div >
               <a
                 href="https://github.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
+                class="text-sm text-muted-foreground hover:text-foreground transition-colors gap-2 flex flex-row justify-center items-center"
               >
                 <Github class="h-4 w-4" />
                 GitHub
               </a>
+              </div>
             </li>
           </ul>
         </div>
+
       </div>
 
-      <div class="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+      <div class="mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-muted-foreground gap-2 justify-center text-center">
-        <p>© {{ currentYear }} NoSys. Open source and decentralized.</p>
+        <p>© {{ currentYear }} NoSys.</p>
+        <p>Open source and decentralized.</p>
       </div>
+
     </div>
   </footer>
 </template>

src/components/Navbar.vue

@@ -2,8 +2,8 @@
 import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { Menu, X } from 'lucide-vue-next'
-
 import Button from '@/components/ui/Button.vue'
+import ThemeToggleButton from './ui/ThemeToggleButton.vue'
 
 const mobileMenuOpen = ref(false)
 
@@ -17,13 +17,14 @@ const navLinks = [
   { href: "/blog", label: "Blog" },
   { href: "/support", label: "Support" },
 ]
+
 </script>
 
 <template>
   <header
-    class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+    class="sticky top-0 z-50 w-screen border-b border-border/40 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60"
   >
-    <div class="container flex h-16 items-center justify-between">
+    <div class="container mx-auto flex h-16 items-center justify-between gap-4">
       <RouterLink to="/" class="flex items-center gap-2">
         <div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
           <div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
@@ -32,7 +33,7 @@ const navLinks = [
       </RouterLink>
 
       <!-- Desktop Navigation -->
-      <nav class="hidden md:flex items-center gap-6">
+      <nav class="hidden md:flex items-center gap-4">
         <RouterLink
           v-for="link in navLinks"
           :key="link.href"
@@ -49,9 +50,11 @@ const navLinks = [
         </Button>
       </div>
 
+      <ThemeToggleButton class="hidden md:flex mr-5"></ThemeToggleButton>
+
       <!-- Mobile Menu Button -->
       <button
-        class="md:hidden"
+        class="md:hidden pr-4"
         @click="mobileMenuOpen = !mobileMenuOpen"
         aria-label="Toggle menu"
       >
@@ -62,7 +65,7 @@ const navLinks = [
 
     <!-- Mobile Navigation -->
     <div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
-      <nav class="container py-4 flex flex-col gap-4">
+      <nav class="container mx-auto py-4 flex flex-col gap-4 text-center justify-center items-center">
         <RouterLink
           v-for="link in navLinks"
           :key="link.href"
@@ -76,6 +79,8 @@ const navLinks = [
         <Button class="w-full">
           <RouterLink to="/downloads">Download</RouterLink>
         </Button>
+
+        <ThemeToggleButton></ThemeToggleButton>
       </nav>
     </div>
   </header>

src/components/sections/UnderConstruction.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { Wrench } from "lucide-vue-next"
+</script>
+
+<template>
+  <section class="py-24 bg-background">
+    <div class="container mx-auto max-w-3xl px-4 text-center">
+
+      <div class="flex flex-col items-center gap-6 border border-border rounded-xl bg-card p-10">
+        <Wrench class="h-10 w-10 text-muted-foreground animate-spin-slow" />
+
+        <h2 class="text-3xl font-bold">
+          Page Under Construction
+        </h2>
+
+        <p class="text-muted-foreground leading-relaxed max-w-xl">
+          This page is currently being developed.  
+          We are actively working on it and it will be available soon.
+        </p>
+
+        <p class="text-sm text-muted-foreground">
+          NoSys is built openly and evolves continuously with the community.
+        </p>
+      </div>
+
+    </div>
+  </section>
+</template>

src/components/sections/about/AboutCTA.vue

@@ -0,0 +1,29 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+
+
+</script>
+
+<template>
+<section class="">
+      <div class="container py-24">
+        <div class="max-w-3xl mx-auto text-center space-y-6">
+          <h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
+
+          <p class="text-xl text-muted-foreground">
+            Download the app and experience social media without corporate control.
+          </p>
+
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <RouterLink to="/downloads">
+              <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">Download Now</Button>
+            </RouterLink>
+
+            <RouterLink to="/how-it-works">
+              <Button size="lg" variant="outline" class="hover:text-amber-500">Learn How It Works</Button>
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/about/AboutHero.vue

@@ -0,0 +1,20 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32 text-center">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
+          Taking Control Back from Big Tech
+        </h1>
+        <p class="text-xl text-muted-foreground leading-relaxed">
+          In a world where social media platforms control what you see, what you can say,
+          and how your data is used, we're building something different.
+        </p>
+      </div>
+      <DotsMouse></DotsMouse>
+    </section>
+</template>

src/components/sections/about/AboutOurMission.vue

@@ -0,0 +1,87 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Target } from 'lucide-vue-next';
+</script>
+
+<template>
+    <section class="">
+      <div class="container py-24">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <Card class="border-2 order-2 lg:order-1">
+            <CardContent class="p-8">
+              <div class="space-y-6">
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">No Central Authority</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Peer-to-peer connections remove central control
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">End-to-End Encryption</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Communications secured and private
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">User Ownership</h3>
+                    <p class="text-sm text-muted-foreground">
+                      You own your identity and data
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">Open Source</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Transparency through open code
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div class="order-1 lg:order-2">
+            <div
+              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
+                     text-primary rounded-full border border-primary/20 mb-6"
+            >
+              <Target class="h-4 w-4" />
+              Our Mission
+            </div>
+
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+              Giving Control Back to Users
+            </h2>
+
+            <div class="space-y-4 text-muted-foreground leading-relaxed">
+              <p>
+                We're building a social network based on privacy, free expression and autonomy.
+              </p>
+
+              <p class="text-lg font-semibold text-foreground">
+                A truly peer-to-peer network where no one can censor or exploit you.
+              </p>
+
+              <p>
+                Decentralization + encryption + open source = independence.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/about/AboutTechnology.vue

@@ -0,0 +1,67 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Zap } from 'lucide-vue-next';
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-24">
+        <div class="max-w-3xl mx-auto text-center mb-16">
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
+                   text-accent rounded-full border border-accent/20 mb-6"
+          >
+            <Zap class="h-4 w-4" />
+            Technology
+          </div>
+
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Built on Modern Peer-to-Peer Technology
+          </h2>
+
+          <p class="text-xl text-muted-foreground">
+            Designed with contemporary decentralized architectures to deliver privacy, resilience, and reliable communication without central dependencies.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <Card>
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
+              <p class="text-muted-foreground leading-relaxed">
+                Direct peer communication without servers.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
+              <p class="text-muted-foreground leading-relaxed">
+                End-to-end encrypted data.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">Modular Design</h3>
+              <p class="text-muted-foreground leading-relaxed">
+                Expand with community modules.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">Distributed Network</h3>
+              <p class="text-muted-foreground leading-relaxed">
+                No servers to shut down, no central database to hack.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/about/AboutTheProblem.vue

@@ -0,0 +1,109 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { AlertCircle } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class=" bg-card">
+      <div class="container py-24">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <div
+              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
+                     text-destructive rounded-full border border-destructive/20 mb-6"
+            >
+              <AlertCircle class="h-4 w-4" />
+              The Problem of Centralization
+            </div>
+
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+              Centralized Platforms Are Broken
+            </h2>
+
+            <div class="space-y-4 text-muted-foreground leading-relaxed">
+              <p>
+                Today's social media landscape is dominated by centralized corporations that
+                control the digital lives of billions and operate under state jurisdiction.
+                These platforms:
+              </p>
+
+              <ul class="space-y-2 list-disc list-inside">
+                <li>Censor content based on opaque algorithms and legal pressure</li>
+                <li>Are subject to state laws, regulations, and political influence</li>
+                <li>Surveil users and track every interaction</li>
+                <li>Sell personal data as a business model</li>
+                <li>Manipulate visibility through proprietary algorithms</li>
+              </ul>
+
+              <p>
+                When communication infrastructure is centralized and bound by state authority,
+                true freedom of expression becomes structurally impossible.
+              </p>
+            </div>
+          </div>
+
+          <Card class="border-2">
+            <CardContent class="p-8">
+              <div class="space-y-6 ">
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">Censorship</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Arbitrary content removal without transparency
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">Surveillance</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Constant tracking of user activities
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
+                  <div>
+                    <h3 class="font-semibold mb-1">Data Exploitation</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Personal information sold as a commodity
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start gap-4">
+                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+                  <div>
+                    <h3 class="font-semibold mb-1">Algorithmic Control</h3>
+                    <p class="text-sm text-muted-foreground">
+                      Manipulation of what content you see
+                    </p>
+                  </div>
+                </div>
+
+
+                <div class="flex items-start gap-4">
+                    <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+                    <div>
+                        <h3 class="font-semibold mb-1">State Dependency</h3>
+                        <p class="text-sm text-muted-foreground">
+                        User expression limited by government authority
+                        </p>
+                    </div>
+                </div>
+
+                
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/blog/BlogHero.vue

@@ -0,0 +1,17 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Blog</h1>
+        <p class="text-xl text-muted-foreground">
+          Thoughts on digital freedom, decentralization, privacy, and the future of social networking
+        </p>
+      </div>
+      <DotsMouse></DotsMouse>
+    </section>
+</template>

src/components/sections/blog/BlogRecentArticles.vue

@@ -0,0 +1,66 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+
+const posts = [
+  // {
+  //   title: "The Case for Decentralized Social Media",
+  //   excerpt:
+  //     "Why the future of social networking must be peer-to-peer, and how centralized platforms have failed users through censorship, surveillance, and data exploitation.",
+  //   author: "Core Team",
+  //   date: "December 5, 2024",
+  //   category: "Philosophy",
+  //   slug: "case-for-decentralization",
+  // },
+  // {
+  //   title: "Understanding P2P Networking",
+  //   excerpt:
+  //     "A deep dive into how peer-to-peer networks function, the challenges they solve, and why they're more resilient than traditional client-server architectures.",
+  //   author: "Tech Team",
+  //   date: "November 28, 2024",
+  //   category: "Technology",
+  //   slug: "understanding-p2p",
+  // },
+  
+]
+
+</script>
+
+<template>
+    <section class="">
+      <div class="container py-24">
+        <div class="max-w-4xl mx-auto">
+          <h2 class="text-3xl font-bold mb-8">Recent Articles</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card v-for="post in posts.slice(1)" :key="post.slug">
+              <CardContent class="pt-6">
+                <div class="mb-3">
+                  <span class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">{{ post.category }}</span>
+                </div>
+                <h3 class="text-xl font-bold mb-3">{{ post.title }}</h3>
+                <p class="text-sm text-muted-foreground leading-relaxed mb-4">{{ post.excerpt }}</p>
+                <div class="flex items-center gap-3 text-xs text-muted-foreground mb-4">
+                  <span class="flex items-center gap-1">
+                    <User class="h-3 w-3" />
+                    {{ post.author }}
+                  </span>
+                  <span class="flex items-center gap-1">
+                    <Calendar class="h-3 w-3" />
+                    {{ post.date }}
+                  </span>
+                </div>
+                <Button asChild variant="ghost" size="sm" class="p-0 h-auto">
+                  <RouterLink :to="`/blog/${post.slug}`" class="flex items-center gap-1">
+                    Read More
+                    <ArrowRight class="h-4 w-4" />
+                  </RouterLink>
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>
+

src/components/sections/blog/BlogSections.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+
+const categories = ["Philosophy", "Technology", "Security", "Development", "Community", "Updates"]
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-24">
+        <div class="max-w-4xl mx-auto">
+          <h2 class="text-3xl font-bold mb-8">Browse by Category</h2>
+          <div class="flex flex-wrap gap-3">
+            <Button v-for="category in categories" :key="category" asChild variant="outline">
+              <RouterLink :to="`/blog/category/${category.toLowerCase()}`">{{ category }}</RouterLink>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/community/CommunityDevRoadMap.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { Lightbulb } from 'lucide-vue-next';
+
+const roadmap = [
+//   {
+//     title: "Q1 2026 - In Progress",
+//     dotColor: "bg-primary",
+//     tasks: [
+//       "x",
+//       "x",
+//       "x",
+//       "x",
+//     ],
+//   },
+//   {
+//     title: "Q2 2026 - Planned",
+//     dotColor: "bg-muted-foreground",
+//     tasks: [
+//       "y",
+//       "y",
+//       "y",
+//       "y",
+//     ],
+//   },
+//   {
+//     title: "Q3-Q4 2026 - Future",
+//     dotColor: "bg-muted-foreground",
+//     tasks: [
+//       "z",
+//       "z",
+//       "z",
+//       "z",
+//     ],
+//   },
+]
+</script>
+
+<template>
+  <section class="bg-card">
+    <div class="container py-24">
+      <div class="max-w-3xl mx-auto">
+        <div class="flex items-center gap-3 mb-8">
+          <div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Lightbulb class="h-6 w-6 text-primary" />
+          </div>
+          <h2 class="text-3xl md:text-4xl font-bold">Development Roadmap</h2>
+        </div>
+
+        <div class="space-y-8">
+          <div v-for="(quarter, index) in roadmap" :key="index">
+            <div class="flex items-center gap-3 mb-4">
+              <div :class="['h-3 w-3 rounded-full', quarter.dotColor]" />
+              <h3 class="text-xl font-bold">{{ quarter.title }}</h3>
+            </div>
+            <ul class="space-y-2 text-muted-foreground ml-6">
+              <li class="flex gap-2" v-for="(task, i) in quarter.tasks" :key="i">
+                <span class="text-primary">•</span>
+                <span>{{ task }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/community/CommunityHero.vue

@@ -0,0 +1,18 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+
+
+</script>
+
+<template>
+  <section class="container py-24 md:py-32">
+    <div class="max-w-3xl mx-auto text-center">
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
+      <p class="text-xl text-muted-foreground">
+        Connect with developers, contributors, and users who are building the future of decentralized social media
+      </p>
+    </div>
+
+    <DotsMouse></DotsMouse>
+  </section>
+</template>

src/components/sections/community/CommunityHowToContribute.vue

@@ -0,0 +1,62 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Code } from 'lucide-vue-next';
+
+const contributionItems = [
+  {
+    title: "Code Contributions",
+    description: "We welcome contributions to the core platform and modules. Fork the repository, make your changes, and submit a pull request.",
+    points: [
+      "Follow the existing code style and conventions",
+      "Write tests for new features",
+      "Update documentation as needed",
+      "Ensure all tests pass before submitting",
+    ],
+  },
+  {
+    title: "Documentation",
+    description: "Help improve our documentation by fixing errors, adding examples, or writing guides. Clear documentation makes the platform more accessible to everyone.",
+  },
+  {
+    title: "Bug Reports",
+    description: "Found a bug? Report it on our issue tracker with detailed steps to reproduce, your system information, and any relevant logs.",
+  },
+  {
+    title: "Feature Requests",
+    description: "Have an idea for a new feature? Open an issue describing the feature, its use case, and how it fits with the project's goals of decentralization and privacy.",
+  },
+  {
+    title: "Testing",
+    description: "Test beta releases, provide feedback, and help us identify issues before they reach stable releases.",
+  },
+]
+</script>
+
+<template>
+    <section class="">
+    <div class="container py-24">
+      <div class="max-w-3xl mx-auto">
+        <div class="flex items-center gap-3 mb-8">
+          <Code class="h-8 w-8 text-primary" />
+          <h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
+        </div>
+
+        <div class="space-y-6">
+          <Card v-for="(item, index) in contributionItems" :key="index">
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
+              <p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
+              <ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
+                <li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
+                  <span class="text-primary">•</span>
+                  <span>{{ point }}</span>
+                </li>
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/community/CommunityProjectSupport.vue

@@ -0,0 +1,94 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Github, Heart, Wallet } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section id="donate" class="bg-primary/5">
+      <div class="container py-24">
+        <div class="max-w-3xl mx-auto">
+          <div class="flex items-center gap-3 mb-8 justify-center">
+            <Heart class="h-8 w-8 text-primary" />
+            <h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
+          </div>
+          <div class="text-center mb-8">
+            <p class="text-muted-foreground leading-relaxed text-lg">
+              NoSys is a 100% open-source project built by volunteers who believe in a free and decentralized
+              internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
+            </p>
+          </div>
+
+          <div class="flex justify-center mb-12">
+            <Button size="lg" class="text-lg px-8 py-6 h-auto">
+              <Heart class="h-5 w-5 mr-2" />
+              Support Our Mission
+            </Button>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-1 gap-6">
+            <!-- <Card class="border-2">
+              <CardContent class="pt-6">
+                <div class="flex flex-col items-center text-center">
+                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                    <Github class="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
+                  <p class="text-muted-foreground text-sm mb-4">
+                    Support us directly through GitHub's sponsorship program
+                  </p>
+                  <Button variant="outline" class="w-full bg-transparent">
+                    <a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
+                      Sponsor on GitHub
+                    </a>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card> -->
+
+            
+
+            <Card class="border-2">
+              <CardContent class="pt-6">
+                <div class="flex flex-col items-center text-center">
+                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                    <Wallet class="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 class="text-xl font-bold mb-2">Crypto</h3>
+                  <p class="text-muted-foreground text-sm mb-4">
+                    Donate using Bitcoin, Ethereum, or other cryptocurrencies
+                  </p>
+                  <Button variant="outline" class="w-full bg-transparent">
+                    <a href="#crypto-wallets">View Wallets</a>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <!-- Crypto Wallets -->
+          <div class="mt-12 p-6 bg-card rounded-lg border border-border">
+            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
+              <Wallet class="h-5 w-5 text-primary" />
+              Cryptocurrency Wallets
+            </h3>
+            <div class="space-y-4" id="crypto-wallets">
+              <div>
+                <p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
+                <code class="text-xs bg-muted p-2 rounded block break-all">
+                  bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
+                </code>
+              </div>
+            </div>
+            <p class="text-xs text-muted-foreground mt-4">
+              All donations go directly to supporting development, infrastructure, and community initiatives. Thank
+              you for your support!
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/community/CommunityUpdates.vue

@@ -0,0 +1,50 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Calendar } from 'lucide-vue-next';
+
+const updates = [
+//   {
+//     title: "v1.2.0 Released",
+//     date: "Dec 1, 2024",
+//     description: "xxxxxxxxxxxxxxxxxxx.",
+//   },
+//   {
+//     title: "Community Milestone: 10K Users",
+//     date: "Nov 25, 2024",
+//     description: "We've reached 10,000 active users on the network! Thank you to everyone who's joined the movement for decentralized social media.",
+//   },
+//   {
+//     title: "New Documentation Portal",
+//     date: "Nov 15, 2024",
+//     description: "Launched comprehensive documentation with guides for developers, API references, and security best practices.",
+//   },
+]
+</script>
+
+<template>
+    <section class="">
+    <div class="container py-24">
+      <div class="max-w-3xl mx-auto">
+        <div class="flex items-center gap-3 mb-8">
+          <div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Calendar class="h-6 w-6 text-primary" />
+          </div>
+          <h2 class="text-3xl md:text-4xl font-bold">Recent Updates</h2>
+        </div>
+
+        <div class="space-y-6">
+          <Card v-for="(update, index) in updates" :key="index">
+            <CardContent class="pt-6">
+              <div class="flex items-start justify-between mb-2">
+                <h3 class="text-lg font-bold">{{ update.title }}</h3>
+                <span class="text-sm text-muted-foreground">{{ update.date }}</span>
+              </div>
+              <p class="text-muted-foreground text-sm">{{ update.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/documentation/DocsHero.vue

@@ -0,0 +1,23 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+import { Book } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32">
+      <div class="max-w-3xl mx-auto text-center">
+        <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
+          <Book class="h-4 w-4" />
+          Documentation
+        </div>
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Developer Documentation</h1>
+        <p class="text-xl text-muted-foreground">
+          Everything you need to use, customize, and build on NoSys
+        </p>
+      </div>
+
+      <DotsMouse></DotsMouse>
+    </section>
+</template>

src/components/sections/documentation/DocsQuickLinks.vue

@@ -0,0 +1,39 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import { Book, Code, HelpCircle, Shield } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-12">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
+          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
+            <RouterLink to="#installation" class="flex flex-col items-center gap-2">
+              <Book class="h-5 w-5" />
+              <span>Installation</span>
+            </RouterLink>
+          </Button>
+          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
+            <RouterLink to="#architecture" class="flex flex-col items-center gap-2">
+              <Code class="h-5 w-5" />
+              <span>Architecture</span>
+            </RouterLink>
+          </Button>
+          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
+            <RouterLink to="#security" class="flex flex-col items-center gap-2">
+              <Shield class="h-5 w-5" />
+              <span>Security</span>
+            </RouterLink>
+          </Button>
+          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
+            <RouterLink to="#faq" class="flex flex-col items-center gap-2">
+              <HelpCircle class="h-5 w-5" />
+              <span>FAQ</span>
+            </RouterLink>
+          </Button>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/downloads/DownloadsHero.vue

@@ -0,0 +1,60 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Download, Shield } from 'lucide-vue-next';
+
+function downloadFile() {
+  const url = "/downloads/libs/app/start.py";
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = url.split('/').pop();
+  document.body.appendChild(link);
+  console.log(link)
+  link.click();
+  document.body.removeChild(link);
+}
+</script>
+
+<template>
+    <section class="container py-24 md:py-32">
+      <div class="max-w-3xl mx-auto text-center">
+        <div
+          class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6"
+        >
+          <Download class="h-4 w-4" />
+          Latest Release
+        </div>
+
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+          Download NoSys
+        </h1>
+
+        <p class="text-xl text-muted-foreground mb-8">
+          Get started with decentralized social networking.
+        </p>
+
+        <div class=" flex items-center justify-center mt-4">
+          <Card class="border-2 flex justify-center items-center">
+            <CardContent class="p-6">
+              <div class="flex items-start justify-between mb-4">
+                <div>
+                  <h3 class="text-2xl font-bold mb-1">Windows / Linux / MacOs</h3>
+                </div>
+                <Download class="ml-4 h-6 w-6 text-primary" />
+              </div>
+
+              <Button class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black" @click="downloadFile()">
+                Download
+              </Button>
+
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <DotsMouse></DotsMouse>
+
+      
+    </section>
+</template>

src/components/sections/hiw/HiwCTA.vue

@@ -0,0 +1,31 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+
+
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-24">
+        <div class="max-w-3xl mx-auto text-center space-y-6">
+          <h2 class="text-3xl md:text-4xl font-bold">
+            Ready to Experience True P2P?
+          </h2>
+          <p class="text-xl text-muted-foreground">
+            Download the app and see decentralized social networking in action
+          </p>
+
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">
+              <RouterLink to="/downloads">Download Now</RouterLink>
+            </Button>
+
+            <Button size="lg" variant="outline" class="hover:text-amber-500">
+              <RouterLink to="/documentation">Read Documentation</RouterLink>
+            </Button>
+          </div>
+
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/hiw/HiwCore.vue

@@ -0,0 +1,50 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Zap, Server, FileText } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="bg-card">
+    <div class="container py-24">
+        
+      <div class="text-center mb-16">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
+        <p class="text-muted-foreground max-w-xl mx-auto">
+          NoSys empowers you to create decentralized networks with full control over communication rules, 
+          while providing tools to easily discover and connect with peers.
+        </p>
+      </div>
+
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+        
+        <Card class="border-2">
+          <CardContent class="p-8 text-center">
+            <div class="flex items-center justify-center mb-4">
+              <FileText class="h-10 w-10 text-primary" />
+            </div>
+            <h3 class="font-bold mb-2">Networks</h3>
+            <p class="text-sm text-muted-foreground">
+              Create your own networks and define the rules for how peers communicate within them. 
+              You control who can join and how information flows.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="p-8 text-center">
+            <div class="flex items-center justify-center mb-4">
+              <Server class="h-10 w-10 text-primary" />
+            </div>
+            <h3 class="font-bold mb-2">Rendezvous Servers</h3>
+            <p class="text-sm text-muted-foreground">
+              These central points help you find and connect to peers when you first join a network. 
+              They make peer discovery simple while keeping your interactions decentralized.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/hiw/HiwEncryption.vue

@@ -0,0 +1,84 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Lock } from 'lucide-vue-next';
+</script>
+
+<template>
+    <section class="">
+      <div class="container py-24">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+          <Card class="border-2 order-2 lg:order-1">
+            <CardContent class="p-8">
+                <div class="space-y-6">
+                    <div>
+                        <h3 class="font-semibold mb-2">End-to-End Encryption</h3>
+                        <p class="text-sm text-muted-foreground">
+                            Messages are protected from the moment they leave your device
+                            until they reach the intended recipient.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="font-semibold mb-2">Key-Based Identity</h3>
+                        <p class="text-sm text-muted-foreground">
+                            Your identity is represented by cryptographic keys stored locally,
+                            not by accounts managed on central servers.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="font-semibold mb-2">Public Verification</h3>
+                        <p class="text-sm text-muted-foreground">
+                            Public keys allow others to verify interactions without accessing
+                            private information.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="font-semibold mb-2">Decentralized Trust</h3>
+                        <p class="text-sm text-muted-foreground">
+                            Trust is established through cryptography, not through a single authority.
+                        </p>
+                    </div>
+
+                </div>
+            </CardContent>
+          </Card>
+
+          <!-- Right Text -->
+          <div class="order-1 lg:order-2">
+            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
+              <Lock class="h-4 w-4" />
+              Security
+            </div>
+
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+              Encryption You Control
+            </h2>
+
+            <div class="space-y-4 text-muted-foreground leading-relaxed">
+              <p>
+                Security is not a feature — it is the foundation of the network.
+              </p>
+              <p>
+                Each user has a private key that stays on their device.
+                This key represents your identity and is used to securely sign and protect
+                your interactions on the network.
+              </p>
+              <p>
+                Public keys allow others to verify your identity and exchange information
+                with you safely, without revealing your private data.
+            </p>
+            <p>
+                Instead of relying on centralized databases of passwords,
+                identity is managed locally through cryptographic keys that you own.
+            </p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/hiw/HiwHero.vue

@@ -0,0 +1,19 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
+          How NoSys Works
+        </h1>
+        <p class="text-xl text-muted-foreground">
+          Understanding the technology that makes decentralized social networking possible
+        </p>
+      </div>
+      <DotsMouse></DotsMouse>
+    </section>
+</template>

src/components/sections/hiw/HiwModules.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { Box, Key, Cpu, Server, File, Users, Lock, Cable, AppWindowMac, FileBox, MessageSquareLock, MessageSquareQuote } from "lucide-vue-next"
+import {
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from "radix-vue"
+</script>
+
+<template>
+<section class="">
+  <div class="container py-24">
+
+    <div class="max-w-3xl mx-auto text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6">Modular Architecture</h2>
+      <p class="text-xl text-muted-foreground">
+        NoSys is built with independent modules. Some come by default, and the community can add more.
+      </p>
+    </div>
+
+    <div class="max-w-4xl mx-auto">
+      <AccordionRoot type="single" collapsible class="space-y-4">
+
+        <AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <Box class="h-5 w-5 text-primary" />
+              <span class="font-semibold">FSPN</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            The Free Speech Protocol Network handles the basic connections between users, ensuring everyone can communicate freely.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <Key class="h-5 w-5 text-primary" />
+              <span class="font-semibold">LockBox</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            Manages your private and public keys, keeping your identity and data secure.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="nosys-core" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <Cpu class="h-5 w-5 text-primary" />
+              <span class="font-semibold">NoSys Core</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            The heart of the platform: manages peers, connections, settings, servers, and modules.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="api" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <Cable class="h-5 w-5 text-primary" />
+              <span class="font-semibold">API</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            Handles the endpoints that modules expose, allowing secure communication and integration.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="vuernosys" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <AppWindowMac class="h-5 w-5 text-primary" />
+              <span class="font-semibold">VueNoSys</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            The browser-based front-end: modules provide their interfaces here, all running locally.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <Server class="h-5 w-5 text-primary" />
+              <span class="font-semibold">Rendezvous</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            Helps users and servers find each other, simplifying initial connections.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <FileBox class="h-5 w-5 text-primary" />
+              <span class="font-semibold">FileTransfer</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            Securely manages file transfers, ensuring reliability and privacy.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="p2post" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <MessageSquareQuote class="h-5 w-5 text-primary" />
+              <span class="font-semibold">P2Post</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            The social network module: creates networks, manages posts, profiles, friends, and network rules.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="p2private" class="border rounded-lg px-6 bg-card">
+          <AccordionTrigger class="hover:no-underline">
+            <div class="flex items-center gap-3">
+              <MessageSquareLock class="h-5 w-5 text-primary" />
+              <span class="font-semibold">P2Private</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+            Focused on private communication between you and your contacts, keeping messages secure.
+          </AccordionContent>
+        </AccordionItem>
+
+      </AccordionRoot>
+    </div>
+  </div>
+</section>
+</template>

src/components/sections/hiw/HiwP2P.vue

@@ -0,0 +1,81 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Network } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-24">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+          <!-- Left Text -->
+          <div>
+            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
+              <Network class="h-4 w-4" />
+              Peer-to-Peer
+            </div>
+
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+              Direct Connections, No Middlemen
+            </h2>
+
+            <div class="space-y-4 text-muted-foreground leading-relaxed">
+              <p>
+                In traditional social media, all your data flows through corporate servers...
+              </p>
+              <p>
+                <strong class="text-foreground">
+                  With P2P, you connect directly to other users.
+                </strong>
+              </p>
+              <p>
+                This architecture makes the network censorship-resistant and resilient...
+              </p>
+            </div>
+          </div>
+
+          <Card class="border-2">
+            <CardContent class="p-8">
+              <div class="space-y-8">
+                <div>
+                  <h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
+                  <div class="flex items-center justify-center gap-4">
+                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
+                    <div class="text-muted-foreground">→</div>
+                    <div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
+                      Server
+                    </div>
+                    <div class="text-muted-foreground">→</div>
+                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
+                  </div>
+                  <p class="text-sm text-muted-foreground mt-4">
+                    All data flows through corporate servers
+                  </p>
+                </div>
+
+                <div>
+                  <h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
+                  <div class="flex items-center justify-center gap-4">
+                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
+                      Peer
+                    </div>
+                    <div class="text-primary">↔</div>
+                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
+                      Peer
+                    </div>
+                  </div>
+                  <p class="text-sm text-muted-foreground mt-4">
+                    Direct connections between users
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/home/HomeCTA.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import Button from '@/components/ui/Button.vue';
+
+
+</script>
+
+<template>
+    <section class="container py-24">
+      <div class="max-w-3xl mx-auto text-center space-y-6">
+        <h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
+        <p class="text-xl text-muted-foreground">
+          Download our app and experience a social network built for freedom, not profit.
+        </p>
+        <Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
+          <RouterLink to="/downloads">Get Started</RouterLink>
+        </Button>
+      </div>
+    </section>
+</template>

src/components/sections/home/HomeHero.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import Button from '@/components/ui/Button.vue';
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32 lg:py-40">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+        <div class="space-y-6">
+          <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
+            100% Peer-to-Peer
+          </div>
+
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
+            A Social Network Built for Free Expression
+          </h1>
+
+          <p class="text-xl text-muted-foreground text-pretty">
+            A peer-to-peer social network designed to keep communication open,
+            transparent, and user-controlled.
+          </p>
+
+          <div class="flex flex-col sm:flex-row gap-4">
+            <Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
+              <RouterLink to="/downloads">Download Now</RouterLink>
+            </Button>
+
+            <Button variant="outline" size="lg" class="text-lg px-8 bg-transparent hover:text-amber-500">
+              <RouterLink to="/how-it-works">Learn More</RouterLink>
+            </Button>
+          </div>
+        </div>
+        <DotsMouse></DotsMouse>
+      </div>
+
+    </section>
+</template>

src/components/sections/home/HomePrinciples.vue

@@ -0,0 +1,62 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Shield, Unlock, Users } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="container py-24">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
+        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
+          Our mission is to give you back control of your digital life
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Shield class="h-6 w-6" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              End-to-end encryption ensures your data belongs only to you.
+              No corporate surveillance, no data mining, no third-party access.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Unlock class="h-6 w-6 text-primary" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              You own your content, connections, and identity.
+              No platform can ban you, shadow ban you, or restrict your reach.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Users class="h-6 w-6 text-primary" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Decentralization</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              No single point of failure or control.
+              The network runs on peer-to-peer connections,
+              making it resilient and censorship-resistant.
+            </p>
+          </CardContent>
+        </Card>
+
+      </div>
+    </section>
+</template>

src/components/sections/support/SupportContactForm.vue

@@ -0,0 +1,45 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import Input from '@/components/ui/Input.vue';
+import Label from '@/components/ui/Label.vue';
+import TextArea from '@/components/ui/TextArea.vue';
+
+const contactFields = [
+  { id: "name", label: "Name", component: Input, props: { placeholder: "Your name" } },
+  { id: "email", label: "Email", component: Input, props: { type: "email", placeholder: "your@email.com" } },
+  { id: "subject", label: "Subject", component: Input, props: { placeholder: "How can we help?" } },
+  { id: "message", label: "Message", component: TextArea, props: { placeholder: "Describe your issue or question in detail...", class: "min-h-32" } }
+]
+</script>
+
+<template>
+    <section id="contact" class=" bg-card">
+      <div class="container py-24">
+        <div class="max-w-2xl mx-auto">
+          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Still Need Help?</h2>
+          <p class="text-muted-foreground text-center mb-8">
+            Send us a message and we'll get back to you as soon as possible
+          </p>
+
+          <Card>
+            <CardContent class="pt-6">
+              <form class="space-y-6">
+                <div class="space-y-2" v-for="field in contactFields" :key="field.id">
+                  <Label :for="field.id">{{ field.label }}</Label>
+                  <component :is="field.component" v-bind="field.props" />
+                </div>
+                <Button type="submit" class="w-full">Send Message</Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          <p class="text-sm text-muted-foreground text-center mt-6">
+            You can also reach us at
+            <a href="mailto:support@p2pnetwork.org" class="text-primary hover:underline">support@nosys.org</a>
+          </p>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/support/SupportFAQ.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue';
+
+const faqs = [
+//   { value: "item-7", question: "How do I report inappropriate content?", answer: "There's no central authority to report to. Instead, use the Filter Module to block content or users you don't want to see. Communities can also establish their own moderation through Network Contracts with democratic voting systems." },
+//   { value: "item-8", question: "Is my internet activity monitored?", answer: "No. All connections are encrypted, and there's no central server logging your activity. Your ISP can see that you're using P2P software but cannot see the content. For maximum privacy, you can route connections through Tor." }
+]
+</script>
+
+<template>
+    <section class="">
+      <div class="container py-24 text-center">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl md:text-4xl font-bold mb-8">Frequently Asked Questions</h2>
+          <AccordionRoot type="single" collapsible class="space-y-4">
+            <AccordionItem v-for="(item, i) in faqs" :key="i" :value="item.value" class="border rounded-lg px-6 bg-card">
+              <AccordionTrigger>{{ item.question }}</AccordionTrigger>
+              <AccordionContent class="text-muted-foreground leading-relaxed">{{ item.answer }}</AccordionContent>
+            </AccordionItem>
+          </AccordionRoot>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/support/SupportGettingStarted.vue

@@ -0,0 +1,75 @@
+<script setup>
+</script>
+
+<template>
+  <section class="py-24 bg-background">
+    <div class="container mx-auto max-w-4xl px-4">
+
+      <!-- Header -->
+      <div class="text-center mb-16">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Getting Started
+        </h2>
+        <p class="text-lg text-muted-foreground">
+          NoSys is designed to be simple, portable, and fully under your control.
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div class="space-y-10">
+
+        <!-- What you download -->
+        <div class="bg-card border border-border rounded-xl p-6">
+          <h3 class="text-xl font-semibold mb-3">
+            What You Download
+          </h3>
+          <p class="text-muted-foreground leading-relaxed">
+            The download provides a single file: <strong>start.py</strong>.
+            This file is responsible for setting up and launching NoSys on your machine.
+          </p>
+        </div>
+
+        <!-- Requirements -->
+        <div class="bg-card border border-border rounded-xl p-6">
+          <h3 class="text-xl font-semibold mb-3">
+            System Requirements
+          </h3>
+          <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+            <li>Python installed and available in your system path</li>
+            <li>Node.js installed (used for the user interface)</li>
+          </ul>
+        </div>
+
+        <!-- Steps -->
+        <div class="bg-card border border-border rounded-xl p-6">
+          <h3 class="text-xl font-semibold mb-4">
+            How to Run NoSys
+          </h3>
+
+          <ol class="list-decimal list-inside space-y-3 text-muted-foreground">
+            <li>Create a directory anywhere on your system (empty is recommended).</li>
+            <li>Place <strong>start.py</strong> inside that directory.</li>
+            <li>Run the script using Python.</li>
+          </ol>
+
+          <div class="mt-6 rounded-lg bg-background border border-border p-4 font-mono text-sm">
+            <span class="text-primary">$</span> python start.py
+          </div>
+        </div>
+
+        <!-- What happens -->
+        <div class="bg-card border border-border rounded-xl p-6">
+          <h3 class="text-xl font-semibold mb-3">
+            What Happens Next
+          </h3>
+          <p class="text-muted-foreground leading-relaxed">
+            When executed, the script automatically downloads all required components,
+            creates an isolated environment, prepares data and log folders,
+            and launches NoSys when everything is ready.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/support/SupportHero.vue

@@ -0,0 +1,26 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
+import Input from '@/components/ui/Input.vue';
+import { Search } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="container py-24 md:py-32">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">How Can We Help?</h1>
+        <p class="text-xl text-muted-foreground mb-8">
+          Find answers to common questions or reach out to our community
+        </p>
+
+        <!-- Search -->
+        <div class="relative">
+          <Search class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+          <Input placeholder="Search for help..." class="pl-12 h-14 text-lg" />
+        </div>
+      </div>
+
+      <DotsMouse></DotsMouse>
+    </section>
+</template>

src/components/sections/support/SupportNeedHelp.vue

@@ -0,0 +1,30 @@
+<script setup>
+
+</script>
+
+<template>
+    <section class="py-16 bg-background">
+    <div class="container mx-auto max-w-3xl px-4 text-center">
+
+      <div class="bg-card border border-border rounded-xl p-8">
+        <h3 class="text-2xl font-semibold mb-4">
+          Need Help?
+        </h3>
+
+        <p class="text-muted-foreground leading-relaxed mb-6">
+          If you encounter any issues while setting up or running NoSys,
+          we recommend visiting our support page. There you will find guidance,
+          troubleshooting steps, and ways to get help from the community.
+        </p>
+
+        <RouterLink
+          to="/support"
+          class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-primary-foreground font-medium hover:opacity-90 transition"
+        >
+          Go to Support
+        </RouterLink>
+      </div>
+
+    </div>
+  </section>
+</template>

src/components/sections/support/SupportQuickLinks.vue

@@ -0,0 +1,33 @@
+<script setup>
+import Button from '@/components/ui/Button.vue';
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { BookOpen, Mail, Zap } from 'lucide-vue-next';
+
+const quickLinks = [
+  { icon: BookOpen, title: "Documentation", description: "Complete technical guides and API reference", href: "/documentation", buttonText: "View Docs" },
+  { icon: Zap, title: "Quick Start", description: "Get up and running in minutes", href: "#quick-start", buttonText: "Get Started" },
+  { icon: Mail, title: "Contact Us", description: "Send us a message directly", href: "#contact", buttonText: "Contact Form" }
+]
+</script>
+
+<template>
+    <section class="bg-card">
+      <div class="container py-12">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+          <Card class="border-2" v-for="(link, i) in quickLinks" :key="i">
+            <CardContent class="pt-6 text-center">
+              <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                <component :is="link.icon" class="h-6 w-6 text-primary" />
+              </div>
+              <h3 class="font-bold mb-2">{{ link.title }}</h3>
+              <p class="text-sm text-muted-foreground mb-4">{{ link.description }}</p>
+              <Button asChild variant="outline" class="w-full bg-transparent">
+                <RouterLink :to="link.href">{{ link.buttonText }}</RouterLink>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+</template>

src/components/sections/support/SupportVideos.vue

@@ -0,0 +1,29 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+
+const tutorials = [
+//   { title: "Getting Started with NoSys", duration: "10 minutes" },
+]
+</script>
+
+<template>
+    <section class="">
+      <div class="container py-24 text-center">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl md:text-4xl font-bold mb-8">Video Tutorials</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card v-for="(video, i) in tutorials" :key="i">
+              <CardContent class="pt-6">
+                <div class="aspect-video bg-muted rounded-lg mb-4 flex items-center justify-center">
+                  <span class="text-muted-foreground">Tutorial Video</span>
+                </div>
+                <h3 class="font-bold mb-2">{{ video.title }}</h3>
+                <p class="text-sm text-muted-foreground">{{ video.duration }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+</template>

src/components/ui/ThemeToggleButton.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { Moon, Sun } from 'lucide-vue-next'
+
+const themeStore = useThemeStore()
+const isDark = computed(() => themeStore.theme === 'dark')
+
+function toggleTheme() {
+  themeStore.setTheme(isDark.value ? 'light' : 'dark')
+}
+</script>
+
+<template>
+  <button
+    @click="toggleTheme"
+    class="flex items-center justify-center p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition w-10 h-10"
+    :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
+  >
+    <Moon v-if="isDark" class="h-5 w-5" />
+    <Sun v-else class="h-5 w-5" />
+  </button>
+</template>
+
+<style scoped>
+button {
+  transition: background-color 0.2s, color 0.2s;
+}
+</style>

src/main.js

@@ -1,7 +1,14 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
 
 const app = createApp(App);
+const pinia = createPinia();
+app.use(pinia)
+
+import { useThemeStore } from '@/stores/theme';
+useThemeStore().init()
+
 app.use(router);
-app.mount('#app')
+app.mount('#app');

src/stores/theme.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', {
+  state: () => ({
+    theme: 'dark'
+  }),
+
+  actions: {
+    setTheme(theme) {
+      this.theme = theme
+      document.documentElement.classList.toggle('dark', theme === 'dark')
+      localStorage.setItem('theme', theme)
+    },
+
+    init() {
+      const saved = localStorage.getItem('theme')
+      this.setTheme(saved || 'dark')
+    }
+  }
+})

src/views/About.vue

@@ -1,275 +1,42 @@
+<script setup>
+import AboutHero from "@/components/sections/about/AboutHero.vue";
+import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
+import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
+import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
+import AboutCTA from "@/components/sections/about/AboutCTA.vue";
+</script>
+
 <template>
+
   <div class="flex flex-col">
-    <!-- Hero -->
+    <section class="border-b border-border">
-    <section class="container py-24 md:py-32">
+      <div class="container mx-auto">
-      <div class="max-w-3xl">
+        <AboutHero/>
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-          Taking Control Back from Big Tech
-        </h1>
-        <p class="text-xl text-muted-foreground leading-relaxed">
-          In a world where social media platforms control what you see, what you can say,
-          and how your data is used, we're building something different.
-        </p>
       </div>
     </section>
 
-    <!-- The Problem -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <AboutTheProblem />
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          <div>
-            <div
-              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
-                     text-destructive rounded-full border border-destructive/20 mb-6"
-            >
-              <AlertCircle class="h-4 w-4" />
-              The Problem
-            </div>
-
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Centralized Platforms Are Broken
-            </h2>
-
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                Today's social media landscape is dominated by corporations that control the
-                digital lives of billions. These platforms:
-              </p>
-
-              <ul class="space-y-2 list-disc list-inside">
-                <li>Censor content based on opaque algorithms and pressure</li>
-                <li>Surveil users and track every click</li>
-                <li>Sell your personal data</li>
-                <li>Manipulate reach with algorithms</li>
-                <li>Ban users without warning</li>
-              </ul>
-
-              <p>
-                This centralized control contradicts the promise of free communication.
-              </p>
-            </div>
-          </div>
-
-          <Card class="border-2">
-            <CardContent class="p-8">
-              <div class="space-y-6">
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Censorship</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Arbitrary content removal without transparency
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Surveillance</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Constant tracking of user activities
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Data Exploitation</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Personal information sold as a commodity
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Algorithmic Control</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Manipulation of what content you see
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
 
-    <!-- Mission -->
+    <section class="border-b border-border">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <AboutOurMission />
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          <Card class="border-2 order-2 lg:order-1">
-            <CardContent class="p-8">
-              <div class="space-y-6">
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">No Central Authority</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Peer-to-peer connections remove central control
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">End-to-End Encryption</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Communications secured and private
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">User Ownership</h3>
-                    <p class="text-sm text-muted-foreground">
-                      You own your identity and data
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Open Source</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Transparency through open code
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <div class="order-1 lg:order-2">
-            <div
-              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
-                     text-primary rounded-full border border-primary/20 mb-6"
-            >
-              <Target class="h-4 w-4" />
-              Our Mission
-            </div>
-
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Giving Control Back to Users
-            </h2>
-
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                We're building a social network based on privacy, free expression and autonomy.
-              </p>
-
-              <p class="text-lg font-semibold text-foreground">
-                A truly peer-to-peer network where no one can censor or exploit you.
-              </p>
-
-              <p>
-                Decentralization + encryption + open source = independence.
-              </p>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
 
-    <!-- Technology -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <AboutTechnology />
-        <div class="max-w-3xl mx-auto text-center mb-16">
-          <div
-            class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
-                   text-accent rounded-full border border-accent/20 mb-6"
-          >
-            <Zap class="h-4 w-4" />
-            Technology
-          </div>
-
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Built on Modern P2P Technology
-          </h2>
-
-          <p class="text-xl text-muted-foreground">
-            Modern decentralized tech for privacy and reliability.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                Direct peer communication without servers.
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                End-to-end encrypted messages and posts.
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Modular Design</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                Expand with modules: chat, files, social media, etc.
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Distributed Network</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                No servers to shut down, no central DB to hack.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA -->
-    <section class="border-t border-border">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto text-center space-y-6">
-          <h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
-
-          <p class="text-xl text-muted-foreground">
-            Download the app and experience social media without corporate control.
-          </p>
-
-          <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <RouterLink to="/downloads">
-              <Button size="lg">Download Now</Button>
-            </RouterLink>
-
-            <RouterLink to="/how-it-works">
-              <Button size="lg" variant="outline">Learn How It Works</Button>
-            </RouterLink>
-          </div>
-        </div>
       </div>
     </section>
   </div>
+
+  <section class="">
+    <div class="container mx-auto">
+      <AboutCTA/>
+    </div>
+  </section>
 </template>
-
-<script setup>
-import Card from "@/components/ui/Card.vue"
-import CardContent from "@/components/ui/CardContent.vue"
-import Button from "@/components/ui/Button.vue"
-
-import { AlertCircle, Target, Zap } from "lucide-vue-next"
-</script>

src/views/Blog.vue

@@ -1,164 +1,43 @@
-<template>
-  <div class="flex flex-col">
-    <!-- Hero -->
-    <section class="container py-24 md:py-32">
-      <div class="max-w-3xl mx-auto text-center">
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Blog</h1>
-        <p class="text-xl text-muted-foreground">
-          Thoughts on digital freedom, decentralization, privacy, and the future of social networking
-        </p>
-      </div>
-    </section>
-
-    <!-- Featured Post -->
-    <section class="border-t border-border bg-card">
-      <div class="container py-16">
-        <div class="max-w-4xl mx-auto">
-          <Card class="border-2">
-            <CardContent class="p-8">
-              <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full mb-4">
-                Featured
-              </div>
-              <h2 class="text-3xl font-bold mb-4">{{ posts[0].title }}</h2>
-              <div class="flex items-center gap-4 text-sm text-muted-foreground mb-4">
-                <span class="flex items-center gap-1">
-                  <User class="h-4 w-4" />
-                  {{ posts[0].author }}
-                </span>
-                <span class="flex items-center gap-1">
-                  <Calendar class="h-4 w-4" />
-                  {{ posts[0].date }}
-                </span>
-                <span class="px-2 py-1 bg-muted rounded text-xs">{{ posts[0].category }}</span>
-              </div>
-              <p class="text-muted-foreground leading-relaxed mb-6">{{ posts[0].excerpt }}</p>
-              <Button asChild>
-                <RouterLink :to="`/blog/${posts[0].slug}`" class="flex items-center gap-1">
-                  Read Article
-                  <ArrowRight class="ml-2 h-4 w-4" />
-                </RouterLink>
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </section>
-
-    <!-- Recent Posts -->
-    <section class="border-t border-border">
-      <div class="container py-24">
-        <div class="max-w-4xl mx-auto">
-          <h2 class="text-3xl font-bold mb-8">Recent Articles</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card v-for="post in posts.slice(1)" :key="post.slug">
-              <CardContent class="pt-6">
-                <div class="mb-3">
-                  <span class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">{{ post.category }}</span>
-                </div>
-                <h3 class="text-xl font-bold mb-3">{{ post.title }}</h3>
-                <p class="text-sm text-muted-foreground leading-relaxed mb-4">{{ post.excerpt }}</p>
-                <div class="flex items-center gap-3 text-xs text-muted-foreground mb-4">
-                  <span class="flex items-center gap-1">
-                    <User class="h-3 w-3" />
-                    {{ post.author }}
-                  </span>
-                  <span class="flex items-center gap-1">
-                    <Calendar class="h-3 w-3" />
-                    {{ post.date }}
-                  </span>
-                </div>
-                <Button asChild variant="ghost" size="sm" class="p-0 h-auto">
-                  <RouterLink :to="`/blog/${post.slug}`" class="flex items-center gap-1">
-                    Read More
-                    <ArrowRight class="h-4 w-4" />
-                  </RouterLink>
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Categories -->
-    <section class="border-t border-border bg-card">
-      <div class="container py-24">
-        <div class="max-w-4xl mx-auto">
-          <h2 class="text-3xl font-bold mb-8">Browse by Category</h2>
-          <div class="flex flex-wrap gap-3">
-            <Button v-for="category in categories" :key="category" asChild variant="outline">
-              <RouterLink :to="`/blog/category/${category.toLowerCase()}`">{{ category }}</RouterLink>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script setup>
 import Card from "@/components/ui/Card.vue"
 import CardContent from "@/components/ui/CardContent.vue"
 import Button from "@/components/ui/Button.vue"
 import { RouterLink } from "vue-router"
 import { Calendar, User, ArrowRight } from "lucide-vue-next"
+import BlogHero from "@/components/sections/blog/BlogHero.vue"
+import BlocgRecentArticles from "@/components/sections/blog/BlogRecentArticles.vue"
+import BlogRecentArticles from "@/components/sections/blog/BlogRecentArticles.vue"
+import BlogSections from "@/components/sections/blog/BlogSections.vue"
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
 
-const posts = [
-  {
-    title: "The Case for Decentralized Social Media",
-    excerpt:
-      "Why the future of social networking must be peer-to-peer, and how centralized platforms have failed users through censorship, surveillance, and data exploitation.",
-    author: "Core Team",
-    date: "December 5, 2024",
-    category: "Philosophy",
-    slug: "case-for-decentralization",
-  },
-  {
-    title: "Understanding P2P Networking",
-    excerpt:
-      "A deep dive into how peer-to-peer networks function, the challenges they solve, and why they're more resilient than traditional client-server architectures.",
-    author: "Tech Team",
-    date: "November 28, 2024",
-    category: "Technology",
-    slug: "understanding-p2p",
-  },
-  {
-    title: "Building Privacy-First Applications",
-    excerpt:
-      "How we designed our platform with privacy as the foundation, not an afterthought. Learn about the cryptographic principles that protect user data.",
-    author: "Security Team",
-    date: "November 20, 2024",
-    category: "Security",
-    slug: "privacy-first-apps",
-  },
-  {
-    title: "The Network Effect in Decentralized Systems",
-    excerpt:
-      "Can decentralized platforms compete with established giants? Exploring how P2P networks can grow and sustain themselves without corporate backing.",
-    author: "Core Team",
-    date: "November 10, 2024",
-    category: "Philosophy",
-    slug: "network-effect",
-  },
-  {
-    title: "Module Development Guide",
-    excerpt:
-      "A comprehensive guide for developers looking to extend the platform. Learn how to create custom modules while respecting privacy and security.",
-    author: "Dev Team",
-    date: "November 1, 2024",
-    category: "Development",
-    slug: "module-development",
-  },
-  {
-    title: "Digital Freedom in the Modern Age",
-    excerpt:
-      "Why digital freedom matters more than ever in an age of increasing surveillance, censorship, and corporate control over online spaces.",
-    author: "Core Team",
-    date: "October 25, 2024",
-    category: "Philosophy",
-    slug: "digital-freedom",
-  },
-]
 
-const categories = ["Philosophy", "Technology", "Security", "Development", "Community", "Updates"]
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <BlogHero />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <BlogRecentArticles />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <BlogSections />
+      </div>
+    </section>
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>

src/views/Community.vue

@@ -3,6 +3,12 @@ import Card from "@/components/ui/Card.vue"
 import CardContent from "@/components/ui/CardContent.vue"
 import Button from "@/components/ui/Button.vue"
 import { Github, MessageCircle, Bug, Code, Lightbulb, Calendar, Heart, Wallet } from "lucide-vue-next"
+import CommunityHero from "@/components/sections/community/CommunityHero.vue"
+import CommunityProjectSupport from "@/components/sections/community/CommunityProjectSupport.vue"
+import CommunityDevRoadMap from "@/components/sections/community/CommunityDevRoadMap.vue"
+import CommunityHowToContribute from "@/components/sections/community/CommunityHowToContribute.vue"
+import CommunityUpdates from "@/components/sections/community/CommunityUpdates.vue"
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
 
 const currentYear = new Date().getFullYear()
 
@@ -92,291 +98,40 @@ const updates = [
 
 <template>
   <div class="flex flex-col">
-    <!-- Hero -->
+    <section class="border-b border-border">
-    <section class="container py-24 md:py-32">
+      <div class="container mx-auto">
-      <div class="max-w-3xl mx-auto text-center">
+        <CommunityHero />
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
-        <p class="text-xl text-muted-foreground">
-          Connect with developers, contributors, and users who are building the future of decentralized social media
-        </p>
       </div>
     </section>
 
-    <!-- Community Links -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <CommunityProjectSupport />
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
-          <Card class="border-2">
-            <CardContent class="pt-6">
-              <div class="flex items-start gap-4 mb-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <Github class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">GitHub</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    View our source code, report issues, and contribute to development
-                  </p>
-                </div>
-              </div>
-              <Button class="w-full">
-                <a href="https://github.com" target="_blank" rel="noopener noreferrer">Visit GitHub</a>
-              </Button>
-            </CardContent>
-          </Card>
-
-          <Card class="border-2">
-            <CardContent class="pt-6">
-              <div class="flex items-start gap-4 mb-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <MessageCircle class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Discord</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Chat with the community, get help, and discuss the platform
-                  </p>
-                </div>
-              </div>
-              <Button class="w-full">
-                <a href="https://discord.gg" target="_blank" rel="noopener noreferrer">Join Discord</a>
-              </Button>
-            </CardContent>
-          </Card>
-
-          <Card class="border-2">
-            <CardContent class="pt-6">
-              <div class="flex items-start gap-4 mb-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <MessageCircle class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Matrix</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Decentralized chat alternative for those who prefer Matrix
-                  </p>
-                </div>
-              </div>
-              <Button variant="outline" class="w-full bg-transparent">
-                <a href="https://matrix.to" target="_blank" rel="noopener noreferrer">Join Matrix</a>
-              </Button>
-            </CardContent>
-          </Card>
-
-          <Card class="border-2">
-            <CardContent class="pt-6">
-              <div class="flex items-start gap-4 mb-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <Bug class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Issue Tracker</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Report bugs, request features, and track development
-                  </p>
-                </div>
-              </div>
-              <Button variant="outline" class="w-full bg-transparent">
-                <a href="https://github.com/issues" target="_blank" rel="noopener noreferrer">View Issues</a>
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
 
-    <!-- Support the Project -->
+    <section class="border-b border-border">
-    <section id="donate" class="border-t border-border bg-primary/5">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <CommunityDevRoadMap />
-        <div class="max-w-3xl mx-auto">
-          <div class="flex items-center gap-3 mb-8 justify-center">
-            <Heart class="h-8 w-8 text-primary" />
-            <h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
-          </div>
-          <div class="text-center mb-8">
-            <p class="text-muted-foreground leading-relaxed text-lg">
-              P2P Network is a 100% open-source project built by volunteers who believe in a free and decentralized
-              internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
-            </p>
-          </div>
-
-          <div class="flex justify-center mb-12">
-            <Button size="lg" class="text-lg px-8 py-6 h-auto">
-              <Heart class="h-5 w-5 mr-2" />
-              Support Our Mission
-            </Button>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card class="border-2">
-              <CardContent class="pt-6">
-                <div class="flex flex-col items-center text-center">
-                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-                    <Github class="h-6 w-6 text-primary" />
-                  </div>
-                  <h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Support us directly through GitHub's sponsorship program
-                  </p>
-                  <Button variant="outline" class="w-full bg-transparent">
-                    <a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
-                      Sponsor on GitHub
-                    </a>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card class="border-2">
-              <CardContent class="pt-6">
-                <div class="flex flex-col items-center text-center">
-                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-                    <Heart class="h-6 w-6 text-primary" />
-                  </div>
-                  <h3 class="text-xl font-bold mb-2">Patreon</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Become a patron and get exclusive updates and perks
-                  </p>
-                  <Button variant="outline" class="w-full bg-transparent">
-                    <a href="https://patreon.com" target="_blank" rel="noopener noreferrer">Join on Patreon</a>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card class="border-2">
-              <CardContent class="pt-6">
-                <div class="flex flex-col items-center text-center">
-                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-                    <Wallet class="h-6 w-6 text-primary" />
-                  </div>
-                  <h3 class="text-xl font-bold mb-2">Crypto</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Donate using Bitcoin, Ethereum, or other cryptocurrencies
-                  </p>
-                  <Button variant="outline" class="w-full bg-transparent">
-                    <a href="#crypto-wallets">View Wallets</a>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <!-- Crypto Wallets -->
-          <div class="mt-12 p-6 bg-card rounded-lg border border-border">
-            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
-              <Wallet class="h-5 w-5 text-primary" />
-              Cryptocurrency Wallets
-            </h3>
-            <div class="space-y-4" id="crypto-wallets">
-              <div>
-                <p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
-                <code class="text-xs bg-muted p-2 rounded block break-all">
-                  bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
-                </code>
-              </div>
-              <div>
-                <p class="text-sm font-semibold mb-1">Ethereum (ETH)</p>
-                <code class="text-xs bg-muted p-2 rounded block break-all">
-                  0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
-                </code>
-              </div>
-              <div>
-                <p class="text-sm font-semibold mb-1">Monero (XMR)</p>
-                <code class="text-xs bg-muted p-2 rounded block break-all">
-                  4AdUndXHHZ6cfufTMvppY6JwXNouMBzSkbLYfpAV5Usx3skxNgYeYTRj5UzqtReoS44qo9mtmXCqY45DJ852K5Jv2684Rge
-                </code>
-              </div>
-            </div>
-            <p class="text-xs text-muted-foreground mt-4">
-              All donations go directly to supporting development, infrastructure, and community initiatives. Thank
-              you for your support!
-            </p>
-          </div>
-        </div>
       </div>
     </section>
 
-    <!-- Contribution Guide -->
+    <section class="border-b border-border">
-  <section class="border-t border-border">
+      <div class="container mx-auto">
-    <div class="container py-24">
+        <CommunityHowToContribute />
-      <div class="max-w-3xl mx-auto">
-        <div class="flex items-center gap-3 mb-8">
-          <Code class="h-8 w-8 text-primary" />
-          <h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
-        </div>
-
-        <div class="space-y-6">
-          <Card v-for="(item, index) in contributionItems" :key="index">
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
-              <p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
-              <ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
-                <li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
-                  <span class="text-primary">•</span>
-                  <span>{{ point }}</span>
-                </li>
-              </ul>
-            </CardContent>
-          </Card>
-        </div>
       </div>
-    </div>
+    </section>
-  </section>
 
-  <!-- Roadmap -->
+    <section class="border-b border-border">
-  <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-    <div class="container py-24">
+        <CommunityUpdates />
-      <div class="max-w-3xl mx-auto">
-        <div class="flex items-center gap-3 mb-8">
-          <div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
-            <Lightbulb class="h-6 w-6 text-primary" />
-          </div>
-          <h2 class="text-3xl md:text-4xl font-bold">Development Roadmap</h2>
-        </div>
-
-        <div class="space-y-8">
-          <div v-for="(quarter, index) in roadmap" :key="index">
-            <div class="flex items-center gap-3 mb-4">
-              <div :class="['h-3 w-3 rounded-full', quarter.dotColor]" />
-              <h3 class="text-xl font-bold">{{ quarter.title }}</h3>
-            </div>
-            <ul class="space-y-2 text-muted-foreground ml-6">
-              <li class="flex gap-2" v-for="(task, i) in quarter.tasks" :key="i">
-                <span class="text-primary">•</span>
-                <span>{{ task }}</span>
-              </li>
-            </ul>
-          </div>
-        </div>
       </div>
-    </div>
+    </section>
-  </section>
 
-  <!-- Updates -->
+    <section class="">
-  <section class="border-t border-border">
+      <div class="container mx-auto">
-    <div class="container py-24">
+        <UnderConstruction />
-      <div class="max-w-3xl mx-auto">
-        <div class="flex items-center gap-3 mb-8">
-          <div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
-            <Calendar class="h-6 w-6 text-primary" />
-          </div>
-          <h2 class="text-3xl md:text-4xl font-bold">Recent Updates</h2>
-        </div>
-
-        <div class="space-y-6">
-          <Card v-for="(update, index) in updates" :key="index">
-            <CardContent class="pt-6">
-              <div class="flex items-start justify-between mb-2">
-                <h3 class="text-lg font-bold">{{ update.title }}</h3>
-                <span class="text-sm text-muted-foreground">{{ update.date }}</span>
-              </div>
-              <p class="text-muted-foreground text-sm">{{ update.description }}</p>
-            </CardContent>
-          </Card>
-        </div>
       </div>
-    </div>
+    </section>
-  </section>
   </div>
 </template>

src/views/Docs.vue

@@ -11,179 +11,31 @@ import {
 import { Book, Code, Shield, HelpCircle } from "lucide-vue-next"
 import { RouterLink } from "vue-router"
 import Button from "@/components/ui/Button.vue"
+import DocsHero from "@/components/sections/documentation/DocsHero.vue"
+import DocsQuickLinks from "@/components/sections/documentation/DocsQuickLinks.vue"
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
 </script>
 
 <template>
+
   <div class="flex flex-col">
-
+    <section class="border-b border-border">
-    <!-- Hero -->
+      <div class="container mx-auto">
-    <section class="container py-24 md:py-32">
+        <DocsHero />
-      <div class="max-w-3xl mx-auto text-center">
-        <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
-          <Book class="h-4 w-4" />
-          Documentation
-        </div>
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Developer Documentation</h1>
-        <p class="text-xl text-muted-foreground">
-          Everything you need to use, customize, and build on our P2P platform
-        </p>
       </div>
     </section>
 
-    <!-- Quick Links -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-12">
+        <DocsQuickLinks />
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
-          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
-            <RouterLink to="#installation" class="flex flex-col items-center gap-2">
-              <Book class="h-5 w-5" />
-              <span>Installation</span>
-            </RouterLink>
-          </Button>
-          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
-            <RouterLink to="#architecture" class="flex flex-col items-center gap-2">
-              <Code class="h-5 w-5" />
-              <span>Architecture</span>
-            </RouterLink>
-          </Button>
-          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
-            <RouterLink to="#security" class="flex flex-col items-center gap-2">
-              <Shield class="h-5 w-5" />
-              <span>Security</span>
-            </RouterLink>
-          </Button>
-          <Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
-            <RouterLink to="#faq" class="flex flex-col items-center gap-2">
-              <HelpCircle class="h-5 w-5" />
-              <span>FAQ</span>
-            </RouterLink>
-          </Button>
-        </div>
       </div>
     </section>
 
-    <!-- Installation Guide -->
+    <section class="">
-    <section id="installation" class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <UnderConstruction />
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl md:text-4xl font-bold mb-8">Installation Guide</h2>
-
-          <div class="space-y-6">
-            <!-- Windows -->
-            <Card>
-              <CardContent class="pt-6">
-                <h3 class="text-xl font-bold mb-4">Windows Installation</h3>
-                <ol class="space-y-3 text-muted-foreground">
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Windows installer from the downloads page</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify the SHA256 checksum matches the published value</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Run the installer and follow the setup wizard</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Launch the application and create your cryptographic identity</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Back up your private keys in a secure location</li>
-                </ol>
-              </CardContent>
-            </Card>
-
-            <!-- Linux -->
-            <Card>
-              <CardContent class="pt-6">
-                <h3 class="text-xl font-bold mb-4">Linux Installation</h3>
-                <ol class="space-y-3 text-muted-foreground">
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Linux package (.deb or .rpm) or AppImage</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum: sha256sum p2p-network.deb</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Install: sudo dpkg -i p2p-network.deb (for Debian/Ubuntu)</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Or make AppImage executable: chmod +x p2p-network.AppImage</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Run the application and complete setup</li>
-                </ol>
-              </CardContent>
-            </Card>
-
-            <!-- macOS -->
-            <Card>
-              <CardContent class="pt-6">
-                <h3 class="text-xl font-bold mb-4">macOS Installation</h3>
-                <ol class="space-y-3 text-muted-foreground">
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the macOS .dmg file</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum using Terminal</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Open the .dmg file and drag the app to Applications</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Right-click the app and select Open to bypass Gatekeeper</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Complete the initial setup and back up your keys</li>
-                </ol>
-              </CardContent>
-            </Card>
-
-            <!-- Android -->
-            <Card>
-              <CardContent class="pt-6">
-                <h3 class="text-xl font-bold mb-4">Android Installation</h3>
-                <ol class="space-y-3 text-muted-foreground">
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Enable "Install from Unknown Sources" in Android settings</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Download the APK file to your device</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Verify the checksum if possible</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Tap the APK file to install</li>
-                  <li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Open the app and create your account</li>
-                </ol>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Module Architecture -->
-    <section id="architecture" class="border-t border-border bg-card">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl md:text-4xl font-bold mb-8">Module Architecture</h2>
-          <p class="text-muted-foreground leading-relaxed mb-8">
-            The P2P Network is built on a modular architecture where each module handles specific functionality. All
-            modules communicate through encrypted channels and respect the decentralized nature of the network.
-          </p>
-
-          <Card class="mb-8">
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-4">Core Modules</h3>
-              <div class="space-y-4">
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/network</code>
-                  <p class="text-sm text-muted-foreground mt-1">Handles peer discovery, connection management, and network protocol</p>
-                </div>
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/crypto</code>
-                  <p class="text-sm text-muted-foreground mt-1">Manages encryption, key generation, and cryptographic operations</p>
-                </div>
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/storage</code>
-                  <p class="text-sm text-muted-foreground mt-1">Local data storage and persistence layer</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-4">Feature Modules</h3>
-              <div class="space-y-4">
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/chat</code>
-                  <p class="text-sm text-muted-foreground mt-1">Direct messaging and group conversations</p>
-                </div>
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/social</code>
-                  <p class="text-sm text-muted-foreground mt-1">Waves, Currents, profiles, and feeds</p>
-                </div>
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/files</code>
-                  <p class="text-sm text-muted-foreground mt-1">Peer-to-peer file transfer</p>
-                </div>
-                <div>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/filter</code>
-                  <p class="text-sm text-muted-foreground mt-1">Content filtering and preferences</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
   </div>
+
 </template>

src/views/Downloads.vue

@@ -4,229 +4,31 @@ import CardContent from "@/components/ui/CardContent.vue"
 import Button from "@/components/ui/Button.vue"
 import { Download, Shield, AlertTriangle } from "lucide-vue-next"
 import { RouterLink } from "vue-router"
+import DownloadsHero from "@/components/sections/downloads/DownloadsHero.vue"
+import SupportGettingStarted from "@/components/sections/support/SupportGettingStarted.vue"
+import SupportNeedHelp from "@/components/sections/support/SupportNeedHelp.vue"
 
-const downloads = [
-  {
-    platform: "Windows",
-    version: "v1.2.0",
-    size: "45 MB",
-    sha256: "a3f5e9d2c8b1a7f4e6d3c9b2a5f8e1d4c7b0a3f6e9d2c5b8a1f4e7d0c3b6a9f2",
-    url: "/downloads/libs/app/app.zip",
-  },
-  {
-    platform: "Linux",
-    version: "v1.2.0",
-    size: "42 MB",
-    sha256: "b4g6f0e3d9c2b8g5f7e4d0c3b6a9f2e5d8c1b4g7f0e3d6c9b2a5f8e1d4c7b0a3",
-    url: "/downloads/libs/app/app.zip",
-  },
-  {
-    platform: "macOS",
-    version: "v1.2.0",
-    size: "48 MB",
-    sha256: "c5h7g1f4e0d3c9h6g8f5e1d4c7b0a3g8f1e4d7c0b3a6f9e2d5c8b1a4g7f0e3d6",
-    url: "/downloads/libs/app/app.zip",
-  },
-  {
-    platform: "Android APK",
-    version: "v1.2.0",
-    size: "38 MB",
-    sha256: "d6i8h2g5f1e4d0i7h9g6f2e5d8c1b4h9g2f5e8d1c4b7a0f3e6d9c2b5a8g1f4e7",
-    url: "/downloads/libs/app/app.zip",
-  },
-]
 
-function downloadFile(url) {
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = url.split('/').pop();
-  document.body.appendChild(link);
-  console.log(link)
-  link.click();
-  document.body.removeChild(link);
-}
 </script>
 
 <template>
+
   <div class="flex flex-col">
-    <!-- Hero -->
+    <section class="">
-    <section class="container py-24 md:py-32">
+      <div class="container mx-auto">
-      <div class="max-w-3xl mx-auto text-center">
+        <DownloadsHero />
-        <div
-          class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6"
-        >
-          <Download class="h-4 w-4" />
-          Latest Release
-        </div>
-
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
-          Download NoSys
-        </h1>
-
-        <p class="text-xl text-muted-foreground mb-8">
-          Get started with decentralized social networking. Choose your platform and join the revolution.
-        </p>
-
-        <Card class="text-left">
-            <CardContent>
-              <Shield class="h-4 w-4" />
-                All downloads are signed and include SHA256 checksums. Always verify checksums before installing.
-          </CardContent>
-        </Card>
       </div>
     </section>
 
-    <!-- Downloads -->
+    <section class="">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportGettingStarted />
-        <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card
-            v-for="download in downloads"
-            :key="download.platform"
-            class="border-2"
-          >
-            <CardContent class="p-6">
-              <div class="flex items-start justify-between mb-4">
-                <div>
-                  <h3 class="text-2xl font-bold mb-1">{{ download.platform }}</h3>
-                  <p class="text-sm text-muted-foreground">
-                    {{ download.version }} • {{ download.size }}
-                  </p>
-                </div>
-                <Download class="h-6 w-6 text-primary" />
-              </div>
-
-              <Button class="w-full mb-3" @click="downloadFile(download.url)">
-                Download for {{ download.platform }}
-              </Button>
-
-              <details class="text-sm">
-                <summary class="cursor-pointer text-muted-foreground hover:text-foreground mb-2">
-                  SHA256 Checksum
-                </summary>
-
-                <code class="block p-2 bg-muted rounded text-xs font-mono break-all">
-                  {{ download.sha256 }}
-                </code>
-              </details>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
 
-    <!-- Disclaimer -->
+    <section class="">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportNeedHelp />
-        <div class="max-w-3xl mx-auto">
-          <Card class="border-primary/50 bg-primary/5">
-            <AlertTriangle class="h-4 w-4 text-primary" />
-            <CardContent class="text-muted-foreground leading-relaxed">
-              <strong class="text-foreground">Important:</strong>
-              This application is fully decentralized. You must back up your encryption keys. Losing your private key
-              means permanent loss of access.
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </section>
-
-    <!-- Release Notes -->
-    <section class="border-t border-border bg-card">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl font-bold mb-8">Release Notes</h2>
-
-          <!-- v1.2.0 -->
-          <div class="space-y-8">
-            <div>
-              <div class="flex items-center gap-3 mb-4">
-                <h3 class="text-xl font-bold">v1.2.0</h3>
-                <span class="text-sm px-2 py-1 bg-primary/10 text-primary rounded">Latest</span>
-              </div>
-
-              <p class="text-sm text-muted-foreground mb-3">
-                Released on December 1, 2024
-              </p>
-
-              <ul class="space-y-2 text-muted-foreground">
-                <li class="flex gap-2"><span class="text-primary">•</span> Added support for group Waves</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Improved encryption performance</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Enhanced NAT traversal</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Fixed memory leak in file transfer</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Dark mode improvements</li>
-              </ul>
-            </div>
-
-            <!-- v1.1.5 -->
-            <div class="border-t border-border pt-8">
-              <h3 class="text-xl font-bold mb-4">v1.1.5</h3>
-              <p class="text-sm text-muted-foreground mb-3">
-                Released on November 15, 2024
-              </p>
-              <ul class="space-y-2 text-muted-foreground">
-                <li class="flex gap-2"><span class="text-primary">•</span> Network Contract editor</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Improved peer discovery</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Fixed large file transfer bug</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Mobile optimizations</li>
-              </ul>
-            </div>
-
-            <!-- v1.1.0 -->
-            <div class="border-t border-border pt-8">
-              <h3 class="text-xl font-bold mb-4">v1.1.0</h3>
-              <p class="text-sm text-muted-foreground mb-3">
-                Released on October 30, 2024
-              </p>
-              <ul class="space-y-2 text-muted-foreground">
-                <li class="flex gap-2"><span class="text-primary">•</span> Introduced Currents</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Added Filter Module</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Security improvements</li>
-                <li class="flex gap-2"><span class="text-primary">•</span> Android APK now available</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Verification Guide -->
-    <section class="border-t border-border">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl font-bold mb-8">How to Verify Your Download</h2>
-
-          <Card>
-            <CardContent class="pt-6">
-              <div class="space-y-6">
-                <div>
-                  <h3 class="font-semibold mb-2">Windows</h3>
-                  <code class="block p-3 bg-muted rounded text-sm font-mono">
-                    certutil -hashfile p2p-network-setup.exe SHA256
-                  </code>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-2">Linux / macOS</h3>
-                  <code class="block p-3 bg-muted rounded text-sm font-mono">
-                    sha256sum p2p-network-installer.dmg
-                  </code>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-2">Android</h3>
-                  <code class="block p-3 bg-muted rounded text-sm font-mono">
-                    sha256sum p2p-network.apk
-                  </code>
-                </div>
-
-                <p class="text-sm text-muted-foreground">
-                  Compare the output to the checksums above. They must match exactly.
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
   </div>

src/views/Home.vue

@@ -1,116 +1,28 @@
 <script setup>
-import { RouterLink } from 'vue-router'
+import HomeHero from '@/components/sections/home/HomeHero.vue'
-import { Shield, Users, Unlock } from 'lucide-vue-next'
+import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
-
+import HomeCTA from '@/components/sections/home/HomeCTA.vue'
-import Button from '@/components/ui/Button.vue'
-import Card from '@/components/ui/Card.vue'
-import CardContent from '@/components/ui/CardContent.vue'
-
-import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 
 </script>
 
 <template>
   <div class="flex flex-col">
-
+    <section class="border-b border-border">
-    <!-- Hero Section -->
+      <div class="container mx-auto">
-    <section class="container py-24 md:py-32 lg:py-40">
+        <HomeHero />
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-
-        <div class="space-y-6">
-          <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
-            100% Peer-to-Peer
-          </div>
-
-          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
-            A Social Network No One Can Control
-          </h1>
-
-          <p class="text-xl text-muted-foreground text-pretty">
-            Experience true digital freedom with our fully decentralized P2P social network.
-            No central servers. No censorship. No surveillance. Just pure peer-to-peer connections.
-          </p>
-
-          <div class="flex flex-col sm:flex-row gap-4">
-            <Button size="lg" class="text-lg px-8">
-              <RouterLink to="/downloads">Download Now</RouterLink>
-            </Button>
-
-            <Button variant="outline" size="lg" class="text-lg px-8 bg-transparent">
-              <RouterLink to="/how-it-works">Learn More</RouterLink>
-            </Button>
-          </div>
-        </div>
-        <DotsMouse></DotsMouse>
       </div>
     </section>
 
-    <!-- Three Pillars -->
+    <section class="border-b border-border">
-    <section class="container py-24 border-t border-border">
+      <div class="container mx-auto">
-      <div class="text-center mb-16">
+        <HomePrinciples />
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
-        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
-          Our mission is to give you back control of your digital life
-        </p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-              <Shield class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              End-to-end encryption ensures your data belongs only to you.
-              No corporate surveillance, no data mining, no third-party access.
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-              <Unlock class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              You own your content, connections, and identity.
-              No platform can ban you, shadow ban you, or restrict your reach.
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-              <Users class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Decentralization</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              No single point of failure or control.
-              The network runs on peer-to-peer connections,
-              making it resilient and censorship-resistant.
-            </p>
-          </CardContent>
-        </Card>
-
       </div>
     </section>
 
-    <!-- CTA -->
+    <section class="">
-    <section class="container py-24 border-t border-border">
+      <div class="container mx-auto">
-      <div class="max-w-3xl mx-auto text-center space-y-6">
+        <HomeCTA />
-        <h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
-        <p class="text-xl text-muted-foreground">
-          Download our app and experience a social network built for freedom, not profit.
-        </p>
-        <Button size="lg" class="text-lg px-8">
-          <RouterLink to="/downloads">Get Started</RouterLink>
-        </Button>
       </div>
     </section>
-
   </div>
-</template>
+</template>

src/views/HowItWorks.vue

@@ -1,368 +1,50 @@
 <template>
   <div class="flex flex-col">
-
+    <section class="border-b border-border">
-    <!-- Hero -->
+      <div class="container mx-auto">
-    <section class="container py-24 md:py-32">
+        <HiwHero />
-      <div class="max-w-3xl mx-auto text-center">
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-          How Our P2P Network Works
-        </h1>
-        <p class="text-xl text-muted-foreground">
-          Understanding the technology that makes decentralized social networking possible
-        </p>
       </div>
     </section>
 
-    <!-- P2P Explanation -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <HiwP2P />
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-
-          <!-- Left Text -->
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
-              <Network class="h-4 w-4" />
-              Peer-to-Peer
-            </div>
-
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Direct Connections, No Middlemen
-            </h2>
-
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                In traditional social media, all your data flows through corporate servers...
-              </p>
-              <p>
-                <strong class="text-foreground">
-                  With P2P, you connect directly to other users.
-                </strong>
-              </p>
-              <p>
-                This architecture makes the network censorship-resistant and resilient...
-              </p>
-            </div>
-          </div>
-
-          <!-- Card -->
-          <Card class="border-2">
-            <CardContent class="p-8">
-              <div class="space-y-8">
-                <div>
-                  <h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
-                  <div class="flex items-center justify-center gap-4">
-                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
-                    <div class="text-muted-foreground">→</div>
-                    <div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
-                      Server
-                    </div>
-                    <div class="text-muted-foreground">→</div>
-                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
-                  </div>
-                  <p class="text-sm text-muted-foreground mt-4">
-                    All data flows through corporate servers
-                  </p>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
-                  <div class="flex items-center justify-center gap-4">
-                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
-                      Peer
-                    </div>
-                    <div class="text-primary">↔</div>
-                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
-                      Peer
-                    </div>
-                  </div>
-                  <p class="text-sm text-muted-foreground mt-4">
-                    Direct connections between users
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-        </div>
       </div>
     </section>
 
-    <!-- Security & Cryptography -->
+    <section class="border-b border-border">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <HiwEncryption />
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-
-          <!-- Card -->
-          <Card class="border-2 order-2 lg:order-1">
-            <CardContent class="p-8">
-              <div class="space-y-6">
-                <div>
-                  <h3 class="font-semibold mb-2">End-to-End Encryption</h3>
-                  <p class="text-sm text-muted-foreground">
-                    Messages are encrypted on your device...
-                  </p>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-2">Public Key Cryptography</h3>
-                  <p class="text-sm text-muted-foreground">
-                    Each user has a cryptographic identity...
-                  </p>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-2">Zero-Knowledge Architecture</h3>
-                  <p class="text-sm text-muted-foreground">
-                    The network operates without any central authority...
-                  </p>
-                </div>
-
-                <div>
-                  <h3 class="font-semibold mb-2">Secure by Default</h3>
-                  <p class="text-sm text-muted-foreground">
-                    All connections are encrypted automatically
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <!-- Right Text -->
-          <div class="order-1 lg:order-2">
-            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
-              <Lock class="h-4 w-4" />
-              Security
-            </div>
-
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Military-Grade Encryption
-            </h2>
-
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                Security isn't optional—it's fundamental to our network...
-              </p>
-              <p>
-                Unlike traditional platforms, our encryption ensures only recipients can read content.
-              </p>
-              <p>
-                Your identity is protected by cryptographic keys...
-              </p>
-            </div>
-          </div>
-
-        </div>
       </div>
     </section>
 
-    <!-- Core Features -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <HiwCore />
-        <div class="max-w-3xl mx-auto text-center mb-16">
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">Understanding the Core Features</h2>
-          <p class="text-xl text-muted-foreground">
-            Our platform consists of key components...
-          </p>
-        </div>
-
-        <div class="max-w-4xl mx-auto space-y-6">
-
-          <!-- Waves -->
-          <Card>
-            <CardContent class="p-6">
-              <div class="flex gap-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                  <FileText class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Waves (Posts)</h3>
-                  <p class="text-muted-foreground leading-relaxed">
-                    Waves propagate through peer-to-peer connections...
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <!-- Currents -->
-          <Card>
-            <CardContent class="p-6">
-              <div class="flex gap-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                  <MessageSquare class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Currents (Comments)</h3>
-                  <p class="text-muted-foreground leading-relaxed">
-                    Currents are replies that travel with Waves...
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <!-- Network Contracts -->
-          <Card>
-            <CardContent class="p-6">
-              <div class="flex gap-4">
-                <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                  <FileText class="h-6 w-6 text-primary" />
-                </div>
-                <div>
-                  <h3 class="text-xl font-bold mb-2">Network Contracts</h3>
-                  <p class="text-muted-foreground leading-relaxed">
-                    JSON-based rules define how the network operates...
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-        </div>
       </div>
     </section>
 
-    <!-- Modules -->
+    <section class="border-b border-border">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <HiwModules />
-
-        <div class="max-w-3xl mx-auto text-center mb-16">
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">Modular Architecture</h2>
-          <p class="text-xl text-muted-foreground">
-            Our platform is built with independent modules...
-          </p>
-        </div>
-
-        <div class="max-w-4xl mx-auto">
-          <AccordionRoot type="single" collapsible class="space-y-4">
-
-                <AccordionItem value="item-1" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <MessageSquare class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">Chat Module</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Secure peer-to-peer messaging...
-                </AccordionContent>
-                </AccordionItem>
-
-                <AccordionItem value="item-2" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <Share2 class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">File Transfer Module</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Direct encrypted file-sharing...
-                </AccordionContent>
-                </AccordionItem>
-
-                <AccordionItem value="item-3" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <Network class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">Middle Man Module</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Relay functionality for restrictive networks...
-                </AccordionContent>
-                </AccordionItem>
-
-                <AccordionItem value="item-4" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <Network class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">Rendezvous Client/Server</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Peer discovery without revealing identity...
-                </AccordionContent>
-                </AccordionItem>
-
-                <AccordionItem value="item-5" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <FileText class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">Social Media Module</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Waves, Currents, profiles, feeds — all P2P.
-                </AccordionContent>
-                </AccordionItem>
-
-                <AccordionItem value="item-6" class="border rounded-lg px-6 bg-card">
-                <AccordionTrigger class="hover:no-underline">
-                    <div class="flex items-center gap-3">
-                    <Filter class="h-5 w-5 text-primary" />
-                    <span class="font-semibold">Filter Module</span>
-                    </div>
-                </AccordionTrigger>
-                <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-                    Client-side content filtering...
-                </AccordionContent>
-                </AccordionItem>
-            </AccordionRoot>
-        </div>
-
       </div>
     </section>
 
-    <!-- CTA -->
+    <section class="">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <HiwCTA />
-        <div class="max-w-3xl mx-auto text-center space-y-6">
-          <h2 class="text-3xl md:text-4xl font-bold">
-            Ready to Experience True P2P?
-          </h2>
-          <p class="text-xl text-muted-foreground">
-            Download the app and see decentralized social networking in action
-          </p>
-
-          <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg">
-              <RouterLink to="/downloads">Download Now</RouterLink>
-            </Button>
-
-            <Button size="lg" variant="outline">
-              <RouterLink to="/documentation">Read Documentation</RouterLink>
-            </Button>
-          </div>
-
-        </div>
       </div>
     </section>
-
   </div>
 </template>
 
 <script setup>
 
-import Card from '@/components/ui/Card.vue'
+import HiwHero from '@/components/sections/hiw/HiwHero.vue'
-import CardContent from '@/components/ui/CardContent.vue'
+import HiwP2P from '@/components/sections/hiw/HiwP2P.vue'
-
+import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
-import {
+import HiwCore from '@/components/sections/hiw/HiwCore.vue'
-  AccordionRoot,
+import HiwModules from '@/components/sections/hiw/HiwModules.vue'
-  AccordionItem,
+import HiwCTA from '@/components/sections/hiw/HiwCTA.vue'
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent
-} from "radix-vue"
-
-import Button from '@/components/ui/Button.vue'
-
-import {
-  Network,
-  Lock,
-  FileText,
-  MessageSquare,
-  Share2,
-  Filter
-} from 'lucide-vue-next'
 
 </script>

src/views/Support.vue

@@ -15,176 +15,57 @@ import TextArea from "@/components/ui/TextArea.vue"
 import Label from "@/components/ui/Label.vue"
 import { Search, BookOpen, Zap, Mail } from "lucide-vue-next"
 import { RouterLink } from "vue-router"
+import SupportHero from "@/components/sections/support/SupportHero.vue"
+import SupportQuickLinks from "@/components/sections/support/SupportQuickLinks.vue"
+import SupportFAQ from "@/components/sections/support/SupportFAQ.vue"
+import SupportVideos from "@/components/sections/support/SupportVideos.vue"
+import SupportGettingStarted from "@/components/sections/support/SupportGettingStarted.vue"
+import SupportContactForm from "@/components/sections/support/SupportContactForm.vue"
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
 
-const metadata = {
-  title: "Support - P2P Network",
-  description: "Get help with our decentralized P2P social network platform",
-}
-
-const quickLinks = [
-  { icon: BookOpen, title: "Documentation", description: "Complete technical guides and API reference", href: "/documentation", buttonText: "View Docs" },
-  { icon: Zap, title: "Quick Start", description: "Get up and running in minutes", href: "#quick-start", buttonText: "Get Started" },
-  { icon: Mail, title: "Contact Us", description: "Send us a message directly", href: "#contact", buttonText: "Contact Form" }
-]
-
-const faqs = [
-  { value: "item-1", question: "How do I get started?", answer: "Download the app for your platform from the downloads page, install it, and run the setup wizard. The app will generate your cryptographic keys and connect you to the network. Make sure to back up your private key in a secure location." },
-  { value: "item-2", question: "Is the app really free?", answer: "Yes, completely free and open source. There are no subscriptions, ads, or hidden costs. The project is maintained by the community and supported by voluntary donations." },
-  { value: "item-3", question: "What if I lose my private key?", answer: "Unfortunately, if you lose your private key, you permanently lose access to your account. There's no password reset or account recovery—this is the trade-off for true decentralization. Always keep secure backups of your keys." },
-  { value: "item-4", question: "How do I find other users?", answer: "Users can share their public keys through external channels (email, social media, etc.). Once you have someone's public key, you can add them as a connection. The app also has peer discovery features that help you find users based on shared interests." },
-  { value: "item-5", question: "Why is the app asking for firewall permissions?", answer: "P2P applications need to accept incoming connections from other peers. Your firewall might prompt you to allow this. It's safe—the app uses encrypted connections and doesn't expose your system to security risks." },
-  { value: "item-6", question: "Can I use this on multiple devices?", answer: "Yes, but you'll need to export your private key from one device and import it on others. Be extremely careful when transferring keys—use secure, encrypted channels and delete the key from insecure locations immediately after import." },
-  { value: "item-7", question: "How do I report inappropriate content?", answer: "There's no central authority to report to. Instead, use the Filter Module to block content or users you don't want to see. Communities can also establish their own moderation through Network Contracts with democratic voting systems." },
-  { value: "item-8", question: "Is my internet activity monitored?", answer: "No. All connections are encrypted, and there's no central server logging your activity. Your ISP can see that you're using P2P software but cannot see the content. For maximum privacy, you can route connections through Tor." }
-]
-
-const quickStart = [
-  { title: "Download and Install", description: "Visit the downloads page and get the version for your operating system. Verify the SHA256 checksum before installing." },
-  { title: "Create Your Identity", description: "Launch the app and follow the setup wizard. The app will generate your cryptographic key pair. Choose a strong passphrase to protect your private key." },
-  { title: "Back Up Your Keys", description: "Export your private key and store it securely offline. Consider using an encrypted USB drive or password manager. This is critical—without this backup, you can never recover your account." },
-  { title: "Connect with Peers", description: "Share your public key with friends or join community channels. Add peers by their public keys to start connecting. The app will automatically discover and connect to the network." },
-  { title: "Start Sharing", description: "Create your first Wave (post), send messages, share files, and explore the decentralized network. You're now part of a social network no one can control!" }
-]
-
-const tutorials = [
-  { title: "Getting Started with P2P Network", duration: "15 minutes" },
-  { title: "Understanding Network Contracts", duration: "10 minutes" },
-  { title: "Backing Up and Securing Your Keys", duration: "8 minutes" },
-  { title: "Advanced Privacy Settings", duration: "12 minutes" }
-]
-
-const contactFields = [
-  { id: "name", label: "Name", component: Input, props: { placeholder: "Your name" } },
-  { id: "email", label: "Email", component: Input, props: { type: "email", placeholder: "your@email.com" } },
-  { id: "subject", label: "Subject", component: Input, props: { placeholder: "How can we help?" } },
-  { id: "message", label: "Message", component: TextArea, props: { placeholder: "Describe your issue or question in detail...", class: "min-h-32" } }
-]
 </script>
 
 <template>
   <div class="flex flex-col">
-    <!-- Hero -->
+    <section class="border-b border-border">
-    <section class="container py-24 md:py-32">
+      <div class="container mx-auto">
-      <div class="max-w-3xl mx-auto text-center">
+        <SupportHero />
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">How Can We Help?</h1>
-        <p class="text-xl text-muted-foreground mb-8">
-          Find answers to common questions or reach out to our community
-        </p>
-
-        <!-- Search -->
-        <div class="relative">
-          <Search class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-          <Input placeholder="Search for help..." class="pl-12 h-14 text-lg" />
-        </div>
       </div>
     </section>
 
-    <!-- Quick Links -->
+    <section class="border-b border-border">
-    <section class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-12">
+        <SupportQuickLinks />
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-          <Card class="border-2" v-for="(link, i) in quickLinks" :key="i">
-            <CardContent class="pt-6 text-center">
-              <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
-                <component :is="link.icon" class="h-6 w-6 text-primary" />
-              </div>
-              <h3 class="font-bold mb-2">{{ link.title }}</h3>
-              <p class="text-sm text-muted-foreground mb-4">{{ link.description }}</p>
-              <Button asChild variant="outline" class="w-full bg-transparent">
-                <RouterLink :to="link.href">{{ link.buttonText }}</RouterLink>
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </section>
 
-    <!-- FAQ -->
+    <section class="border-b border-border">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportFAQ />
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl md:text-4xl font-bold mb-8">Frequently Asked Questions</h2>
-          <AccordionRoot type="single" collapsible class="space-y-4">
-            <AccordionItem v-for="(item, i) in faqs" :key="i" :value="item.value" class="border rounded-lg px-6 bg-card">
-              <AccordionTrigger>{{ item.question }}</AccordionTrigger>
-              <AccordionContent class="text-muted-foreground leading-relaxed">{{ item.answer }}</AccordionContent>
-            </AccordionItem>
-          </AccordionRoot>
-        </div>
       </div>
     </section>
 
-    <!-- Quick Start Guide -->
+    <section class="border-b border-border">
-    <section id="quick-start" class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportVideos />
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl md:text-4xl font-bold mb-8">Quick Start Guide</h2>
-
-          <div class="space-y-6">
-            <Card v-for="(step, i) in quickStart" :key="i">
-              <CardContent class="pt-6">
-                <div class="flex gap-4">
-                  <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
-                    {{ i + 1 }}
-                  </div>
-                  <div>
-                    <h3 class="text-lg font-bold mb-2">{{ step.title }}</h3>
-                    <p class="text-muted-foreground text-sm leading-relaxed">{{ step.description }}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
       </div>
     </section>
 
-    <!-- Tutorials -->
+    <section class="border-b border-border">
-    <section class="border-t border-border">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportGettingStarted />
-        <div class="max-w-3xl mx-auto">
-          <h2 class="text-3xl md:text-4xl font-bold mb-8">Video Tutorials</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card v-for="(video, i) in tutorials" :key="i">
-              <CardContent class="pt-6">
-                <div class="aspect-video bg-muted rounded-lg mb-4 flex items-center justify-center">
-                  <span class="text-muted-foreground">Tutorial Video</span>
-                </div>
-                <h3 class="font-bold mb-2">{{ video.title }}</h3>
-                <p class="text-sm text-muted-foreground">{{ video.duration }}</p>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
       </div>
     </section>
 
-    <!-- Contact Form -->
+    <section class="">
-    <section id="contact" class="border-t border-border bg-card">
+      <div class="container mx-auto">
-      <div class="container py-24">
+        <SupportContactForm />
-        <div class="max-w-2xl mx-auto">
+      </div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Still Need Help?</h2>
+    </section>
-          <p class="text-muted-foreground text-center mb-8">
-            Send us a message and we'll get back to you as soon as possible
-          </p>
 
-          <Card>
+    <section class="">
-            <CardContent class="pt-6">
+      <div class="container mx-auto">
-              <form class="space-y-6">
+        <UnderConstruction />
-                <div class="space-y-2" v-for="field in contactFields" :key="field.id">
-                  <Label :for="field.id">{{ field.label }}</Label>
-                  <component :is="field.component" v-bind="field.props" />
-                </div>
-                <Button type="submit" class="w-full">Send Message</Button>
-              </form>
-            </CardContent>
-          </Card>
-
-          <p class="text-sm text-muted-foreground text-center mt-6">
-            You can also reach us at
-            <a href="mailto:support@p2pnetwork.org" class="text-primary hover:underline">support@nosys.org</a>
-          </p>
-        </div>
       </div>
     </section>
   </div>

tailwind.config.js

@@ -0,0 +1,16 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,jsx}'
+  ],
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'rgb(var(--background) / <alpha-value>)',
+        foreground: 'rgb(var(--foreground) / <alpha-value>)',
+      }
+    }
+  },
+  plugins: []
+}