From b8d80ab85d2be21f7cfe237f3c1e8af1cf434dc3 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@lucase.com>
Date: Sat, 30 May 2026 09:51:13 +1000
Subject: [PATCH] NoSys

---
 src/components/Footer.vue                     | 159 ++++++-------
 src/components/Navbar.vue                     | 175 ++++++++++-----
 src/components/sections/about/AboutCTA.vue    |  55 ++---
 src/components/sections/about/AboutFuture.vue |  31 +++
 src/components/sections/about/AboutHero.vue   |  30 +--
 .../sections/about/AboutPrinciples.vue        |  68 ++++++
 .../sections/about/AboutProblem.vue           |  79 +++++++
 .../sections/about/AboutSolution.vue          |  80 +++++++
 .../sections/about/AboutTheProblem.vue        | 124 ----------
 src/components/sections/about/AboutVision.vue |  90 ++++++--
 .../sections/community/CommunityCTA.vue       |  38 ++++
 .../community/CommunityContribute.vue         |  50 +++++
 .../community/CommunityDevRoadMap.vue         |  66 ------
 .../sections/community/CommunityEcosystem.vue |  60 +++++
 .../sections/community/CommunityHero.vue      |  17 +-
 .../community/CommunityHowToContribute.vue    |  62 -----
 .../community/CommunityProjectSupport.vue     | 141 ------------
 .../sections/community/CommunitySpaces.vue    |  54 +++++
 .../sections/community/CommunitySupport.vue   |  30 +++
 .../sections/community/CommunityUpdates.vue   |  50 -----
 .../sections/contribute/ContributeCTA.vue     |  41 ++++
 .../sections/contribute/ContributeDonate.vue  |  64 ++++++
 .../sections/contribute/ContributeFuture.vue  |  36 +++
 .../sections/contribute/ContributeHero.vue    |  22 ++
 .../contribute/ContributeTransparency.vue     |  42 ++++
 .../sections/downloads/DownloadCTA.vue        |  46 ++++
 ...ownloadsHero.vue => DownloadDownloads.vue} |   0
 .../sections/downloads/DownloadHero.vue       |  27 +++
 .../sections/downloads/DownloadHowItWorks.vue |  25 +++
 .../sections/downloads/DownloadOptions.vue    |  71 ++++++
 .../downloads/DownloadRequirements.vue        |  47 ++++
 .../HelpContactForm.vue}                      |   0
 .../sections/{support => help}/SupportFAQ.vue |   0
 .../SupportGettingStarted.vue                 |   0
 .../{support => help}/SupportHero.vue         |   0
 .../{support => help}/SupportNeedHelp.vue     |   0
 .../{support => help}/SupportQuickLinks.vue   |   0
 .../{support => help}/SupportVideos.vue       |   0
 .../sections/home/HomeArchitecture.vue        |  67 ++++++
 src/components/sections/home/HomeCTA.vue      |  52 +++--
 .../sections/home/HomeCapabilities.vue        |  77 +++++++
 .../sections/home/HomeDecentralization.vue    |  83 +++++++
 .../sections/home/HomeEcosystem.vue           |  80 ++++---
 src/components/sections/home/HomeHero.vue     |  81 ++++---
 src/components/sections/home/HomeModules.vue  |  77 +++++++
 src/components/sections/home/HomePlatform.vue |  31 ---
 .../sections/home/HomePrinciples.vue          |  84 -------
 src/components/sections/home/HomeWhatIs.vue   | 100 +++++++++
 .../sections/modules/ModulesCTA.vue           |  33 +++
 .../sections/modules/ModulesCategories.vue    |  95 ++++++++
 .../sections/modules/ModulesExamples.vue      |  56 +++++
 .../sections/modules/ModulesHero.vue          |  30 +++
 .../sections/modules/ModulesHowTheyWork.vue   |  59 +++++
 .../sections/modules/ModulesOverview.vue      |  68 ++++++
 .../sections/modules/ModulesSecurity.vue      |  75 +++++++
 src/router.js                                 | 211 +++++++++++++++---
 src/views/About.vue                           |  57 ++---
 src/views/Architecture.vue                    |  18 ++
 src/views/Article.vue                         |  99 +-------
 src/views/Blog.vue                            |  30 +--
 src/views/Community.vue                       | 127 ++---------
 src/views/Contribute.vue                      |  43 ++++
 src/views/Docs.vue                            |  16 +-
 src/views/Downloads.vue                       |  44 ++--
 src/views/FAQ.vue                             |  17 ++
 src/views/GettingStarted.vue                  |  17 ++
 src/views/Help.vue                            |  17 ++
 src/views/Home.vue                            |  29 ++-
 src/views/ModuleDetails.vue                   |  43 ++++
 src/views/Modules.vue                         |  55 +++++
 src/views/Roadmap.vue                         |  17 ++
 src/views/Security.vue                        |  17 ++
 src/views/Support.vue                         |  72 ------
 73 files changed, 2706 insertions(+), 1251 deletions(-)
 create mode 100644 src/components/sections/about/AboutFuture.vue
 create mode 100644 src/components/sections/about/AboutPrinciples.vue
 create mode 100644 src/components/sections/about/AboutProblem.vue
 create mode 100644 src/components/sections/about/AboutSolution.vue
 delete mode 100644 src/components/sections/about/AboutTheProblem.vue
 create mode 100644 src/components/sections/community/CommunityCTA.vue
 create mode 100644 src/components/sections/community/CommunityContribute.vue
 delete mode 100644 src/components/sections/community/CommunityDevRoadMap.vue
 create mode 100644 src/components/sections/community/CommunityEcosystem.vue
 delete mode 100644 src/components/sections/community/CommunityHowToContribute.vue
 delete mode 100644 src/components/sections/community/CommunityProjectSupport.vue
 create mode 100644 src/components/sections/community/CommunitySpaces.vue
 create mode 100644 src/components/sections/community/CommunitySupport.vue
 delete mode 100644 src/components/sections/community/CommunityUpdates.vue
 create mode 100644 src/components/sections/contribute/ContributeCTA.vue
 create mode 100644 src/components/sections/contribute/ContributeDonate.vue
 create mode 100644 src/components/sections/contribute/ContributeFuture.vue
 create mode 100644 src/components/sections/contribute/ContributeHero.vue
 create mode 100644 src/components/sections/contribute/ContributeTransparency.vue
 create mode 100644 src/components/sections/downloads/DownloadCTA.vue
 rename src/components/sections/downloads/{DownloadsHero.vue => DownloadDownloads.vue} (100%)
 create mode 100644 src/components/sections/downloads/DownloadHero.vue
 create mode 100644 src/components/sections/downloads/DownloadHowItWorks.vue
 create mode 100644 src/components/sections/downloads/DownloadOptions.vue
 create mode 100644 src/components/sections/downloads/DownloadRequirements.vue
 rename src/components/sections/{support/SupportContactForm.vue => help/HelpContactForm.vue} (100%)
 rename src/components/sections/{support => help}/SupportFAQ.vue (100%)
 rename src/components/sections/{support => help}/SupportGettingStarted.vue (100%)
 rename src/components/sections/{support => help}/SupportHero.vue (100%)
 rename src/components/sections/{support => help}/SupportNeedHelp.vue (100%)
 rename src/components/sections/{support => help}/SupportQuickLinks.vue (100%)
 rename src/components/sections/{support => help}/SupportVideos.vue (100%)
 create mode 100644 src/components/sections/home/HomeArchitecture.vue
 create mode 100644 src/components/sections/home/HomeCapabilities.vue
 create mode 100644 src/components/sections/home/HomeDecentralization.vue
 create mode 100644 src/components/sections/home/HomeModules.vue
 delete mode 100644 src/components/sections/home/HomePlatform.vue
 delete mode 100644 src/components/sections/home/HomePrinciples.vue
 create mode 100644 src/components/sections/home/HomeWhatIs.vue
 create mode 100644 src/components/sections/modules/ModulesCTA.vue
 create mode 100644 src/components/sections/modules/ModulesCategories.vue
 create mode 100644 src/components/sections/modules/ModulesExamples.vue
 create mode 100644 src/components/sections/modules/ModulesHero.vue
 create mode 100644 src/components/sections/modules/ModulesHowTheyWork.vue
 create mode 100644 src/components/sections/modules/ModulesOverview.vue
 create mode 100644 src/components/sections/modules/ModulesSecurity.vue
 create mode 100644 src/views/Architecture.vue
 create mode 100644 src/views/Contribute.vue
 create mode 100644 src/views/FAQ.vue
 create mode 100644 src/views/GettingStarted.vue
 create mode 100644 src/views/Help.vue
 create mode 100644 src/views/ModuleDetails.vue
 create mode 100644 src/views/Modules.vue
 create mode 100644 src/views/Roadmap.vue
 create mode 100644 src/views/Security.vue
 delete mode 100644 src/views/Support.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index f14aa94..6eb3c97 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,134 +1,105 @@
 <script setup>
-import { RouterLink } from "vue-router"
-import { Github, Heart } from "lucide-vue-next"
+import { RouterLink } from 'vue-router'
+import { Github, Heart, Shield, Boxes } from 'lucide-vue-next'
 
 const currentYear = new Date().getFullYear()
 </script>
 
 <template>
-  <footer class="border-t border-border bg-card justify-center text-center">
-    <div class="container mx-auto py-12 px-2">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
+  <footer class="border-t border-border bg-card">
+
+    <div class="container mx-auto py-16">
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+
         <!-- Brand -->
-        <div>
-          <div class="flex items-center gap-2 mb-4">
-            <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" />
+        <div class="lg:col-span-1">
+
+          <RouterLink to="/" class="flex items-center gap-3 mb-5">
+            <div class="h-9 w-9 rounded-xl bg-primary flex items-center justify-center">
+              <div class="h-4 w-4 rounded-full border-2 border-primary-foreground"></div>
             </div>
-            <h1 class="leading-none font-bold text-lg">
+
+            <h1 class="font-bold text-lg">
               <span class="text-yellow-400">No</span>
               <span class="text-foreground">Sys</span>
             </h1>
-          </div>
-          <p class="text-sm text-muted-foreground">
-            Infrastructure for a Decentralized Future.
+          </RouterLink>
+
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            Open peer-to-peer infrastructure for modular decentralized systems.
           </p>
+
+          <div class="flex items-center gap-4 mt-6">
+            <a href="https://github.com" target="_blank" class="text-muted-foreground hover:text-foreground">
+              <Github class="h-5 w-5" />
+            </a>
+
+            <RouterLink to="/contribute" class="text-muted-foreground hover:text-foreground">
+              <Heart class="h-5 w-5" />
+            </RouterLink>
+          </div>
+
         </div>
 
         <!-- Product -->
         <div>
-          <h3 class="font-semibold mb-4">Product</h3>
+          <h3 class="font-semibold mb-5">Product</h3>
           <ul class="space-y-3">
-            <li>
-              <RouterLink to="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                About
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink to="/how-it-works" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                How It Works
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink to="/downloads" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Downloads
-              </RouterLink>
-            </li>
+            <li><RouterLink to="/modules" class="footer-link">Modules</RouterLink></li>
+            <li><RouterLink to="/downloads" class="footer-link">Downloads</RouterLink></li>
+            <li><RouterLink to="/about" class="footer-link">About</RouterLink></li>
           </ul>
         </div>
 
-        <!-- Resources -->
+        <!-- Builders -->
         <div>
-          <h3 class="font-semibold mb-4">Resources</h3>
+          <h3 class="font-semibold mb-5">Developers</h3>
           <ul class="space-y-3">
-            <li>
-              <RouterLink to="/documentation" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Documentation
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Blog
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink to="/support" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Support
-              </RouterLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Legal -->
-        <div>
-          <h3 class="font-semibold mb-4">Legal</h3>
-          <ul class="space-y-3">
-            <li>
-              <RouterLink to="/privacy" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Privacy Policy
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink to="/license" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Open Source License
-              </RouterLink>
-            </li>
+            <li><RouterLink to="/docs" class="footer-link">Documentation</RouterLink></li>
+            <li><RouterLink to="/architecture" class="footer-link">Architecture</RouterLink></li>
+            <li><RouterLink to="/blog" class="footer-link">Blog</RouterLink></li>
           </ul>
         </div>
 
         <!-- Community -->
         <div>
-          <h3 class="font-semibold mb-4">Community</h3>
+          <h3 class="font-semibold mb-5">Community</h3>
           <ul class="space-y-3">
+            <li><RouterLink to="/community" class="footer-link">Community Hub</RouterLink></li>
+            <li><RouterLink to="/help" class="footer-link">Help</RouterLink></li>
+            <li><RouterLink to="/contribute" class="footer-link">Contribute</RouterLink></li>
+
             <li>
-              <RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Other plataforms
+              <RouterLink to="/security" class="footer-link flex items-center gap-2">
+                <Shield class="h-4 w-4" />
+                Security
               </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 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 flex flex-col md:flex-row justify-between items-center text-sm text-muted-foreground gap-2 justify-center text-center">
-        <p>© {{ currentYear }} NoSys.</p>
-        <p>Open source and decentralized.</p>
+      <!-- Bottom -->
+      <div class="mt-16 pt-8 border-t border-border flex flex-col md:flex-row justify-between gap-4">
+
+        <p class="text-sm text-muted-foreground">
+          © {{ currentYear }} NoSys. Open source infrastructure for decentralized systems.
+        </p>
+
+        <div class="flex items-center gap-6 text-sm text-muted-foreground">
+          <RouterLink to="/faq" class="hover:text-foreground">FAQ</RouterLink>
+
+          <div class="flex items-center gap-2">
+            <Boxes class="h-4 w-4" />
+            Modular Runtime
+          </div>
+        </div>
+
       </div>
 
     </div>
+
   </footer>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 38f8a88..7b6fa9b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -2,89 +2,146 @@
 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)
 
-const navLinks = [
-  { href: "/", label: "Home" },
-  { href: "/about", label: "About" },
-  { href: "/how-it-works", label: "How It Works" },
-  { href: "/downloads", label: "Downloads" },
-  { href: "/documentation", label: "Docs" },
-  { href: "/community", label: "Community" },
-  { href: "/blog", label: "Blog" },
-  { href: "/support", label: "Support" },
+/**
+ * USER-FACING (simple, adoption-focused)
+ */
+const primaryLinks = [
+  { href: '/', label: 'Home' },
+  { href: '/modules', label: 'Modules' },
+  { href: '/downloads', label: 'Downloads' },
 ]
 
+/**
+ * BUILDER / TECH (optional depth)
+ */
+const secondaryLinks = [
+  { href: '/docs', label: 'Docs' },
+  { href: '/architecture', label: 'Architecture' },
+  { href: '/blog', label: 'Blog' },
+]
+
+/**
+ * COMMUNITY / ACTION
+ */
+const actionLinks = [
+  { href: '/community', label: 'Community' },
+  { href: '/help', label: 'Help' },
+  { href: '/contribute', label: 'Contribute' },
+]
 </script>
 
 <template>
-  <header
-    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 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" />
+  <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/90 backdrop-blur-xl">
+
+    <div class="container mx-auto h-16 flex items-center justify-between gap-6">
+
+      <!-- Brand -->
+      <RouterLink to="/" class="flex items-center gap-3 shrink-0">
+        <div class="h-9 w-9 rounded-xl bg-primary flex items-center justify-center">
+          <div class="h-4 w-4 rounded-full border-2 border-primary-foreground"></div>
         </div>
-        <h1 class="leading-none font-bold text-lg">
+
+        <h1 class="font-bold text-lg">
           <span class="text-yellow-400">No</span>
           <span class="text-foreground">Sys</span>
         </h1>
       </RouterLink>
 
-      <!-- Desktop Navigation -->
-      <nav class="hidden md:flex items-center gap-4">
-        <RouterLink
-          v-for="link in navLinks"
-          :key="link.href"
-          :to="link.href"
-          class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {{ link.label }}
-        </RouterLink>
-      </nav>
+      <!-- Desktop Nav -->
+      <div class="hidden lg:flex items-center gap-10 flex-1">
+
+        <!-- Primary -->
+        <nav class="flex items-center gap-6">
+          <RouterLink
+            v-for="link in primaryLinks"
+            :key="link.href"
+            :to="link.href"
+            class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {{ link.label }}
+          </RouterLink>
+        </nav>
+
+        <!-- Secondary -->
+        <nav class="flex items-center gap-5 ml-auto">
+          <RouterLink
+            v-for="link in secondaryLinks"
+            :key="link.href"
+            :to="link.href"
+            class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {{ link.label }}
+          </RouterLink>
+
+          <span class="text-muted-foreground">|</span>
+
+          <RouterLink
+            v-for="link in actionLinks"
+            :key="link.href"
+            :to="link.href"
+            class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {{ link.label }}
+          </RouterLink>
+        </nav>
 
-      <div class="hidden md:flex items-center gap-4">
-        <Button>
-          <RouterLink to="/downloads">Download</RouterLink>
-        </Button>
       </div>
 
-      <ThemeToggleButton class="hidden md:flex mr-5"></ThemeToggleButton>
+      <!-- Actions -->
+      <div class="hidden lg:flex items-center gap-3">
 
-      <!-- Mobile Menu Button -->
-      <button
-        class="md:hidden pr-4"
-        @click="mobileMenuOpen = !mobileMenuOpen"
-        aria-label="Toggle menu"
-      >
-        <X v-if="mobileMenuOpen" class="h-6 w-6" />
-        <Menu v-else class="h-6 w-6"></Menu>
-      </button>
-    </div>
+        <ThemeToggleButton />
 
-    <!-- Mobile Navigation -->
-    <div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
-      <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"
-          :to="link.href"
-          class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-          @click="mobileMenuOpen = false"
-        >
-          {{ link.label }}
+        <RouterLink to="/downloads">
+          <Button class="bg-amber-400 hover:bg-amber-500 text-black">
+            Download noSys
+          </Button>
         </RouterLink>
 
-        <Button class="w-full">
-          <RouterLink to="/downloads">Download</RouterLink>
-        </Button>
+      </div>
+
+      <!-- Mobile -->
+      <button class="lg:hidden" @click="mobileMenuOpen = !mobileMenuOpen">
+        <X v-if="mobileMenuOpen" class="h-6 w-6" />
+        <Menu v-else class="h-6 w-6" />
+      </button>
+
+    </div>
+
+    <!-- Mobile Menu -->
+    <div v-if="mobileMenuOpen" class="lg:hidden border-t border-border">
+      <nav class="container mx-auto py-6 flex flex-col gap-6">
+
+        <div class="space-y-4">
+
+          <RouterLink
+            v-for="link in [...primaryLinks, ...secondaryLinks, ...actionLinks]"
+            :key="link.href"
+            :to="link.href"
+            class="block text-sm font-medium text-muted-foreground hover:text-foreground"
+            @click="mobileMenuOpen = false"
+          >
+            {{ link.label }}
+          </RouterLink>
+
+        </div>
+
+        <RouterLink to="/downloads" @click="mobileMenuOpen = false">
+          <Button class="w-full bg-amber-400 hover:bg-amber-500 text-black">
+            Download noSys
+          </Button>
+        </RouterLink>
+
+        <ThemeToggleButton />
 
-        <ThemeToggleButton></ThemeToggleButton>
       </nav>
     </div>
+
   </header>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutCTA.vue b/src/components/sections/about/AboutCTA.vue
index 1153664..7def354 100644
--- a/src/components/sections/about/AboutCTA.vue
+++ b/src/components/sections/about/AboutCTA.vue
@@ -1,52 +1,39 @@
 <script setup>
-import Button from '@/components/ui/Button.vue'
 import { RouterLink } from 'vue-router'
+import Button from '@/components/ui/Button.vue'
 </script>
 
 <template>
+  <section class="container py-24">
 
-  <section>
+    <div class="max-w-4xl mx-auto text-center space-y-8">
 
-    <div class="container py-24">
+      <h2 class="text-4xl md:text-5xl font-bold text-balance">
+        Explore the NoSys Ecosystem
+      </h2>
 
-      <div class="max-w-3xl mx-auto text-center space-y-6">
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        Download NoSys, explore decentralized applications,
+        or learn how the platform works.
+      </p>
 
-        <h2 class="text-3xl md:text-4xl font-bold">
-          Explore the Platform
-        </h2>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
 
-        <p class="text-xl text-muted-foreground">
-          Build decentralized systems, experiment with peer-to-peer infrastructure,
-          and participate in the future of open networks.
-        </p>
+        <RouterLink to="/downloads">
+          <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black px-8">
+            Download NoSys
+          </Button>
+        </RouterLink>
 
-        <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
-            </Button>
-          </RouterLink>
-
-          <RouterLink to="/docs">
-            <Button
-              size="lg"
-              variant="outline"
-              class="hover:text-amber-500"
-            >
-              Documentation
-            </Button>
-          </RouterLink>
-
-        </div>
+        <RouterLink to="/how-it-works">
+          <Button size="lg" variant="outline" class="px-8">
+            Learn How It Works
+          </Button>
+        </RouterLink>
 
       </div>
 
     </div>
 
   </section>
-
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutFuture.vue b/src/components/sections/about/AboutFuture.vue
new file mode 100644
index 0000000..4abdb40
--- /dev/null
+++ b/src/components/sections/about/AboutFuture.vue
@@ -0,0 +1,31 @@
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <h2 class="text-3xl md:text-5xl font-bold text-balance">
+        Exploring the Future of Decentralized Systems
+      </h2>
+
+      <div class="space-y-6 text-lg text-muted-foreground leading-relaxed">
+        <p>
+          NoSys is an ongoing experiment in open digital infrastructure.
+        </p>
+
+        <p>
+          The project explores how peer-to-peer systems,
+          modular ecosystems, distributed communication,
+          and community-driven development can support a more resilient internet.
+        </p>
+
+        <p>
+          Social networks are only one possible application.
+          The long-term vision is broader:
+          decentralized ecosystems capable of supporting many forms of digital interaction.
+        </p>
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutHero.vue b/src/components/sections/about/AboutHero.vue
index 44ed607..62ae27f 100644
--- a/src/components/sections/about/AboutHero.vue
+++ b/src/components/sections/about/AboutHero.vue
@@ -3,28 +3,30 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
 
 <template>
+  <section class="container py-24 md:py-32 lg:py-40">
 
-  <section class="container py-24 md:py-32 text-center">
+    <div class="max-w-5xl mx-auto text-center space-y-8">
 
-    <div class="max-w-4xl mx-auto text-center">
-
-      <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
-        Open Infrastructure for Decentralized Systems
+      <div
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm"
+      >
+        About NoSys
       </div>
 
-      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-        Technology Should Belong to Its Users
-      </h1>
+      <div class="space-y-6">
+        <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tight text-balance leading-tight">
+          Infrastructure for a Decentralized Future
+        </h1>
 
-      <p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
-        Modern digital infrastructure is increasingly controlled by centralized corporations and platforms.
-        NoSys exists to provide an alternative: open, peer-to-peer infrastructure designed for decentralized systems and communities.
-      </p>
+        <p class="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-4xl mx-auto">
+          NoSys is an open-source peer-to-peer platform designed to reduce dependence
+          on centralized digital infrastructure and give communities direct control
+          over communication, applications, and networks.
+        </p>
+      </div>
 
     </div>
 
     <DotsMouse />
-
   </section>
-
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutPrinciples.vue b/src/components/sections/about/AboutPrinciples.vue
new file mode 100644
index 0000000..175aeb1
--- /dev/null
+++ b/src/components/sections/about/AboutPrinciples.vue
@@ -0,0 +1,68 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+const principles = [
+  {
+    title: 'Decentralization',
+    description: 'Reduce dependency on central infrastructure and concentrated control.'
+  },
+  {
+    title: 'Open Source',
+    description: 'Technology should be transparent, auditable, and collaborative.'
+  },
+  {
+    title: 'User Ownership',
+    description: 'People should control their identity, data, and applications.'
+  },
+  {
+    title: 'Modularity',
+    description: 'Applications and systems should remain replaceable and extensible.'
+  },
+  {
+    title: 'Community-Driven Innovation',
+    description: 'Infrastructure evolves through open ecosystems and collective development.'
+  },
+  {
+    title: 'Resilience',
+    description: 'Distributed systems reduce single points of failure and dependency.'
+  }
+]
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-3xl mx-auto text-center mb-16">
+      <h2 class="text-3xl md:text-5xl font-bold mb-6">
+        Core Principles
+      </h2>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        NoSys is guided by architectural and social principles
+        focused on openness, resilience, and decentralization.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+      <Card
+        v-for="principle in principles"
+        :key="principle.title"
+        class="border-2"
+      >
+        <CardContent class="p-8 space-y-4">
+          <h3 class="text-2xl font-bold">
+            {{ principle.title }}
+          </h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            {{ principle.description }}
+          </p>
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutProblem.vue b/src/components/sections/about/AboutProblem.vue
new file mode 100644
index 0000000..67d3448
--- /dev/null
+++ b/src/components/sections/about/AboutProblem.vue
@@ -0,0 +1,79 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { AlertTriangle } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+      <div>
+        <div
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-destructive/20 bg-destructive/10 text-destructive text-sm mb-6"
+        >
+          <AlertTriangle class="h-4 w-4" />
+          The Centralization Problem
+        </div>
+
+        <h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
+          The Internet Became Increasingly Centralized
+        </h2>
+
+        <div class="space-y-5 text-lg text-muted-foreground leading-relaxed">
+          <p>
+            Large platforms increasingly control communication,
+            identity, visibility, moderation, and user data.
+          </p>
+
+          <p>
+            Modern digital ecosystems often depend on centralized servers,
+            closed infrastructures, and corporate-controlled platforms.
+          </p>
+
+          <p>
+            As more of society becomes digital,
+            dependence on centralized infrastructure becomes a structural risk.
+          </p>
+        </div>
+      </div>
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-8">
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Platform Dependency</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Entire communities and applications depend on centralized services.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Single Points of Failure</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Infrastructure outages or policy changes affect millions simultaneously.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Closed Ecosystems</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Users often cannot control or verify the systems they depend on.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Data Concentration</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Massive centralized data collection creates power asymmetry.
+            </p>
+          </div>
+
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutSolution.vue b/src/components/sections/about/AboutSolution.vue
new file mode 100644
index 0000000..08734e3
--- /dev/null
+++ b/src/components/sections/about/AboutSolution.vue
@@ -0,0 +1,80 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { ShieldCheck } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+      <Card class="border-2 order-2 lg:order-1">
+        <CardContent class="p-8 space-y-8">
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Peer-to-Peer Networking</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Devices communicate directly instead of relying entirely on central servers.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Open Source Infrastructure</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Systems remain transparent, auditable, and community-driven.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Modular Ecosystem</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Applications can evolve independently without platform lock-in.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold text-lg mb-2">Distributed Coordination</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Networks can operate collaboratively without centralized ownership.
+            </p>
+          </div>
+
+        </CardContent>
+      </Card>
+
+      <div class="order-1 lg:order-2">
+
+        <div
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm mb-6"
+        >
+          <ShieldCheck class="h-4 w-4" />
+          The NoSys Approach
+        </div>
+
+        <h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
+          Building Open Decentralized Infrastructure
+        </h2>
+
+        <div class="space-y-5 text-lg text-muted-foreground leading-relaxed">
+          <p>
+            NoSys provides peer-to-peer infrastructure that applications can build upon.
+          </p>
+
+          <p>
+            Instead of creating a single centralized platform,
+            NoSys focuses on enabling decentralized ecosystems.
+          </p>
+
+          <p class="text-foreground font-medium">
+            The goal is not to control the network.
+            The goal is to make control less necessary.
+          </p>
+
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutTheProblem.vue b/src/components/sections/about/AboutTheProblem.vue
deleted file mode 100644
index 1912d87..0000000
--- a/src/components/sections/about/AboutTheProblem.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<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 Centralization Problem
-          </div>
-
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Critical Infrastructure Is Becoming Centralized
-          </h2>
-
-          <div class="space-y-4 text-muted-foreground leading-relaxed">
-
-            <p>
-              Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
-            </p>
-
-            <p>
-              As technology becomes more integrated into everyday life, centralized control over infrastructure creates structural dependency on entities users cannot govern or audit.
-            </p>
-
-            <p>
-              NoSys was created to explore a different direction:
-              decentralized systems where coordination happens directly between participants instead of through centralized intermediaries.
-            </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">
-                    Infrastructure Dependency
-                  </h3>
-
-                  <p class="text-sm text-muted-foreground">
-                    Critical systems increasingly rely on centralized providers
-                  </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">
-                    Platform Control
-                  </h3>
-
-                  <p class="text-sm text-muted-foreground">
-                    Access, visibility, and communication controlled by private entities
-                  </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 Concentration
-                  </h3>
-
-                  <p class="text-sm text-muted-foreground">
-                    Massive amounts of user data aggregated into centralized systems
-                  </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">
-                    Single Points of Failure
-                  </h3>
-
-                  <p class="text-sm text-muted-foreground">
-                    Centralized architecture creates systemic fragility
-                  </p>
-                </div>
-              </div>
-
-            </div>
-
-          </CardContent>
-
-        </Card>
-
-      </div>
-
-    </div>
-
-  </section>
-
-</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutVision.vue b/src/components/sections/about/AboutVision.vue
index 68e1a1b..d0f6c0e 100644
--- a/src/components/sections/about/AboutVision.vue
+++ b/src/components/sections/about/AboutVision.vue
@@ -1,37 +1,83 @@
 <script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Globe, Network, Cpu } from 'lucide-vue-next'
 </script>
 
 <template>
+  <section class="container py-24">
 
-  <section>
+    <div class="max-w-4xl mx-auto text-center mb-16">
+      <h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
+        Technology Is Becoming Infrastructure
+      </h2>
 
-    <div class="container py-24">
-
-      <div class="max-w-4xl mx-auto text-center space-y-8">
-
-        <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border">
-          Long-Term Vision
-        </div>
-
-        <h2 class="text-3xl md:text-5xl font-bold text-balance">
-          Decentralization
-        </h2>
-
-        <p class="text-xl text-muted-foreground leading-relaxed">
-          Future systems may include communication networks, collaborative platforms,
-          autonomous machine coordination, distributed communities, and applications
-          that do not yet exist.
+      <div class="space-y-6 text-lg text-muted-foreground leading-relaxed max-w-3xl mx-auto">
+        <p>
+          Communication, transportation, finance, media, identity,
+          and social interaction increasingly depend on digital systems.
         </p>
 
-        <p class="text-lg text-muted-foreground leading-relaxed">
-          NoSys is designed as foundational infrastructure for that future —
-          open, adaptable, and owned by no single corporation or institution.
+        <p>
+          When these systems are controlled by a small number of corporations
+          or centralized authorities, societies become dependent on entities
+          capable of controlling access, visibility, data, and participation.
         </p>
 
+        <p class="text-foreground font-medium">
+          NoSys exists to explore a different direction:
+          open infrastructure built by communities, for communities.
+        </p>
       </div>
-
     </div>
 
-  </section>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Globe class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Open Infrastructure</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Infrastructure should belong to ecosystems and communities,
+            not isolated corporate silos.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Network class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Distributed Systems</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Decentralized architectures reduce dependency on single points
+            of control and failure.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Cpu class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Community Innovation</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Anyone can build applications, protocols,
+            and new decentralized experiences.
+          </p>
+        </CardContent>
+      </Card>
+
+    </div>
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityCTA.vue b/src/components/sections/community/CommunityCTA.vue
new file mode 100644
index 0000000..1b4c016
--- /dev/null
+++ b/src/components/sections/community/CommunityCTA.vue
@@ -0,0 +1,38 @@
+<script setup>
+import Button from '@/components/ui/Button.vue'
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <h2 class="text-4xl md:text-5xl font-bold">
+        Be Part of the Network Layer of the Future
+      </h2>
+
+      <p class="text-xl text-muted-foreground">
+        Join the community shaping decentralized infrastructure, applications, and ecosystems.
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+
+        <RouterLink to="/downloads">
+          <Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
+            Download NoSys
+          </Button>
+        </RouterLink>
+
+        <RouterLink to="/documentation">
+          <Button variant="outline" class="px-8">
+            Explore Documentation
+          </Button>
+        </RouterLink>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityContribute.vue b/src/components/sections/community/CommunityContribute.vue
new file mode 100644
index 0000000..a983fc4
--- /dev/null
+++ b/src/components/sections/community/CommunityContribute.vue
@@ -0,0 +1,50 @@
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-6">
+
+      <h2 class="text-3xl md:text-4xl font-bold">
+        How People Contribute
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        You don’t need to be a developer to contribute to NoSys.
+        The ecosystem grows through ideas, feedback, modules, and testing.
+      </p>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left mt-10">
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Feedback & Ideas</h3>
+          <p class="text-sm text-muted-foreground">
+            Help shape the direction of the ecosystem.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Testing & Usage</h3>
+          <p class="text-sm text-muted-foreground">
+            Use NoSys and report real-world behavior.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Modules</h3>
+          <p class="text-sm text-muted-foreground">
+            Build or share applications on top of the runtime.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Documentation</h3>
+          <p class="text-sm text-muted-foreground">
+            Improve clarity for future users and contributors.
+          </p>
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityDevRoadMap.vue b/src/components/sections/community/CommunityDevRoadMap.vue
deleted file mode 100644
index 8776c81..0000000
--- a/src/components/sections/community/CommunityDevRoadMap.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityEcosystem.vue b/src/components/sections/community/CommunityEcosystem.vue
new file mode 100644
index 0000000..0002b88
--- /dev/null
+++ b/src/components/sections/community/CommunityEcosystem.vue
@@ -0,0 +1,60 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Boxes } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section 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-4">
+        A Growing Ecosystem
+      </h2>
+      <p class="text-muted-foreground text-lg">
+        NoSys is not a single application — it is a base layer for many systems.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-3">
+          <h3 class="text-xl font-bold">Community Modules</h3>
+          <p class="text-muted-foreground">
+            Anyone can build and share modules that run on top of the runtime.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-3">
+          <h3 class="text-xl font-bold">Decentralized Apps</h3>
+          <p class="text-muted-foreground">
+            Social apps, messaging, tools, and systems built on peer-to-peer infrastructure.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-3">
+          <h3 class="text-xl font-bold">Experimental Systems</h3>
+          <p class="text-muted-foreground">
+            Research and experimentation in distributed architectures.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-3">
+          <h3 class="text-xl font-bold">Open Collaboration</h3>
+          <p class="text-muted-foreground">
+            Shared development between users, not controlled by a single entity.
+          </p>
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityHero.vue b/src/components/sections/community/CommunityHero.vue
index df9b4af..9e8af35 100644
--- a/src/components/sections/community/CommunityHero.vue
+++ b/src/components/sections/community/CommunityHero.vue
@@ -5,24 +5,23 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 <template>
   <section class="container py-24 md:py-32">
 
-    <div class="max-w-4xl mx-auto text-center">
+    <div class="max-w-4xl mx-auto text-center space-y-8">
 
-      <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
-        Open Source Infrastructure • Peer-to-Peer Systems • Modular Runtime
+      <div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
+        Open Community • Ecosystem Driven
       </div>
 
-      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-        Build and Contribute to NoSys
+      <h1 class="text-4xl md:text-6xl font-bold text-balance">
+        Join the NoSys Community
       </h1>
 
-      <p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
-        NoSys is an open infrastructure platform for decentralized systems.
-        Join as a developer, contributor, or operator building peer-to-peer applications and modules on top of the runtime.
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        NoSys is built by people, not companies.
+        Users, contributors, and builders shape the ecosystem together.
       </p>
 
     </div>
 
     <DotsMouse />
-
   </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityHowToContribute.vue b/src/components/sections/community/CommunityHowToContribute.vue
deleted file mode 100644
index 2dfec89..0000000
--- a/src/components/sections/community/CommunityHowToContribute.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityProjectSupport.vue b/src/components/sections/community/CommunityProjectSupport.vue
deleted file mode 100644
index ec80d2a..0000000
--- a/src/components/sections/community/CommunityProjectSupport.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup>
-import Button from '@/components/ui/Button.vue'
-import Card from '@/components/ui/Card.vue'
-import CardContent from '@/components/ui/CardContent.vue'
-import { Heart, Wallet, Github } 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">
-
-        <!-- Header -->
-
-        <div class="text-center mb-10">
-
-          <div class="flex items-center justify-center gap-3 mb-4">
-            <Heart class="h-7 w-7 text-primary" />
-            <h2 class="text-3xl md:text-4xl font-bold">
-              Support Development
-            </h2>
-          </div>
-
-          <p class="text-muted-foreground text-lg leading-relaxed">
-            NoSys is open-source infrastructure built to support decentralized systems.
-            Contributions help fund development, testing, and long-term protocol maintenance.
-          </p>
-
-        </div>
-
-        <!-- CTA -->
-
-        <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" />
-            Contribute
-          </Button>
-
-        </div>
-
-        <!-- Support Options -->
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-          <!-- GitHub -->
-
-          <Card class="border-2">
-
-            <CardContent class="pt-6 text-center">
-
-              <div class="flex justify-center mb-4">
-                <Github class="h-10 w-10 text-primary" />
-              </div>
-
-              <h3 class="text-xl font-bold mb-2">
-                Open Source Contributions
-              </h3>
-
-              <p class="text-muted-foreground text-sm mb-5">
-                Contribute code, review modules, or support development through GitHub.
-              </p>
-
-              <Button variant="outline" class="w-full bg-transparent">
-                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
-                  View Repository
-                </a>
-              </Button>
-
-            </CardContent>
-
-          </Card>
-
-          <!-- Crypto -->
-
-          <Card class="border-2">
-
-            <CardContent class="pt-6 text-center">
-
-              <div class="flex justify-center mb-4">
-                <Wallet class="h-10 w-10 text-primary" />
-              </div>
-
-              <h3 class="text-xl font-bold mb-2">
-                Cryptocurrency Funding
-              </h3>
-
-              <p class="text-muted-foreground text-sm mb-5">
-                Direct contributions via crypto wallets for protocol and infrastructure development.
-              </p>
-
-              <Button variant="outline" class="w-full bg-transparent">
-                <a href="#crypto-wallets">
-                  View Wallets
-                </a>
-              </Button>
-
-            </CardContent>
-
-          </Card>
-
-        </div>
-
-        <!-- Wallets -->
-
-        <div
-          id="crypto-wallets"
-          class="mt-12 p-6 bg-card rounded-lg border border-border"
-        >
-
-          <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
-            <Wallet class="h-5 w-5 text-primary" />
-            Funding Wallets
-          </h3>
-
-          <div class="space-y-4">
-
-            <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">
-            Contributions are used for core development, protocol research,
-            and infrastructure maintenance.
-          </p>
-
-        </div>
-
-      </div>
-
-    </div>
-
-  </section>
-</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunitySpaces.vue b/src/components/sections/community/CommunitySpaces.vue
new file mode 100644
index 0000000..7870388
--- /dev/null
+++ b/src/components/sections/community/CommunitySpaces.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { MessageSquare, Github, Globe } 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">
+        Where the Community Lives
+      </h2>
+      <p class="text-muted-foreground text-lg">
+        Connect, discuss, and follow the evolution of NoSys.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+      <Card class="border-2">
+        <CardContent class="p-8 text-center space-y-4">
+          <MessageSquare class="h-10 w-10 mx-auto text-primary" />
+          <h3 class="text-xl font-bold">Discussions</h3>
+          <p class="text-sm text-muted-foreground">
+            Talk about features, ideas, and ecosystem direction.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="p-8 text-center space-y-4">
+          <Github class="h-10 w-10 mx-auto text-primary" />
+          <h3 class="text-xl font-bold">Open Source</h3>
+          <p class="text-sm text-muted-foreground">
+            Explore the code, report issues, and follow development.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="p-8 text-center space-y-4">
+          <Globe class="h-10 w-10 mx-auto text-primary" />
+          <h3 class="text-xl font-bold">Ecosystem</h3>
+          <p class="text-sm text-muted-foreground">
+            Discover modules and applications built on NoSys.
+          </p>
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunitySupport.vue b/src/components/sections/community/CommunitySupport.vue
new file mode 100644
index 0000000..d418c1d
--- /dev/null
+++ b/src/components/sections/community/CommunitySupport.vue
@@ -0,0 +1,30 @@
+<script setup>
+import Button from '@/components/ui/Button.vue'
+import { Heart } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="container py-24 bg-card">
+
+    <div class="max-w-3xl mx-auto text-center space-y-6">
+
+      <h2 class="text-3xl md:text-4xl font-bold">
+        Support the Ecosystem
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        NoSys is open-source and community-driven.
+        Support helps infrastructure, development, and long-term sustainability.
+      </p>
+
+      <RouterLink to="/contribute">
+        <Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
+          <Heart class="h-4 w-4 mr-2" />
+          Donate or Support
+        </Button>
+      </RouterLink>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityUpdates.vue b/src/components/sections/community/CommunityUpdates.vue
deleted file mode 100644
index ed33fff..0000000
--- a/src/components/sections/community/CommunityUpdates.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/components/sections/contribute/ContributeCTA.vue b/src/components/sections/contribute/ContributeCTA.vue
new file mode 100644
index 0000000..05cb736
--- /dev/null
+++ b/src/components/sections/contribute/ContributeCTA.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import Button from '@/components/ui/Button.vue'
+import { Download, Code } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <h2 class="text-4xl md:text-5xl font-bold">
+        The Ecosystem Is Built by Everyone
+      </h2>
+
+      <p class="text-xl text-muted-foreground">
+        Supporting NoSys means supporting a decentralized infrastructure future.
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+
+        <RouterLink to="/downloads">
+          <Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
+            <Download class="h-4 w-4 mr-2" />
+            Download NoSys
+          </Button>
+        </RouterLink>
+
+        <RouterLink to="/how-it-works">
+          <Button variant="outline" class="px-8">
+            <Code class="h-4 w-4 mr-2" />
+            Understand the System
+          </Button>
+        </RouterLink>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/contribute/ContributeDonate.vue b/src/components/sections/contribute/ContributeDonate.vue
new file mode 100644
index 0000000..d5f56dd
--- /dev/null
+++ b/src/components/sections/contribute/ContributeDonate.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue'
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import Button from '@/components/ui/Button.vue'
+import { Wallet, Copy, Check } from 'lucide-vue-next'
+
+const copied = ref(false)
+
+const address = "bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku"
+
+function copy() {
+  navigator.clipboard.writeText(address)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1500)
+}
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-3xl mx-auto text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4">
+        Donate in Bitcoin
+      </h2>
+
+      <p class="text-muted-foreground text-lg">
+        Currently, NoSys accepts BTC donations only. More options will be added as the ecosystem grows.
+      </p>
+    </div>
+
+    <div class="max-w-2xl mx-auto">
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-6 text-center">
+
+          <Wallet class="h-10 w-10 mx-auto text-primary" />
+
+          <h3 class="text-xl font-bold">Bitcoin (BTC)</h3>
+
+          <div class="bg-muted p-4 rounded text-sm break-all text-left">
+            {{ address }}
+          </div>
+
+          <Button class="w-full" @click="copy">
+            <Copy v-if="!copied" class="h-4 w-4 mr-2" />
+            <Check v-else class="h-4 w-4 mr-2" />
+            {{ copied ? "Copied" : "Copy Address" }}
+          </Button>
+
+          <p class="text-xs text-muted-foreground">
+            Send only BTC. Sending other assets may result in permanent loss.
+          </p>
+
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/contribute/ContributeFuture.vue b/src/components/sections/contribute/ContributeFuture.vue
new file mode 100644
index 0000000..0a140d1
--- /dev/null
+++ b/src/components/sections/contribute/ContributeFuture.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="container py-24 bg-card">
+
+    <div class="max-w-4xl mx-auto text-center space-y-6">
+
+      <h2 class="text-3xl md:text-4xl font-bold">
+        Future Support Options
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        Additional contribution methods will be introduced as the ecosystem matures.
+      </p>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+
+        <div class="p-6 border rounded-lg">
+          <h3 class="font-bold">GitHub Sponsors</h3>
+          <p class="text-sm text-muted-foreground">Direct developer sponsorship</p>
+        </div>
+
+        <div class="p-6 border rounded-lg">
+          <h3 class="font-bold">Lightning Network</h3>
+          <p class="text-sm text-muted-foreground">Fast micro-donations</p>
+        </div>
+
+        <div class="p-6 border rounded-lg">
+          <h3 class="font-bold">Recurring Support</h3>
+          <p class="text-sm text-muted-foreground">Monthly contributions</p>
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/contribute/ContributeHero.vue b/src/components/sections/contribute/ContributeHero.vue
new file mode 100644
index 0000000..69e2b15
--- /dev/null
+++ b/src/components/sections/contribute/ContributeHero.vue
@@ -0,0 +1,22 @@
+<template>
+  <section class="container py-24 md:py-32 text-center">
+
+    <div class="max-w-4xl mx-auto space-y-6">
+
+      <div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
+        Open Source • Community Funded
+      </div>
+
+      <h1 class="text-4xl md:text-6xl font-bold text-balance">
+        Support the NoSys Ecosystem
+      </h1>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        NoSys is built and maintained as an open-source infrastructure project.
+        Contributions help sustain development, infrastructure, and long-term research.
+      </p>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/contribute/ContributeTransparency.vue b/src/components/sections/contribute/ContributeTransparency.vue
new file mode 100644
index 0000000..11798eb
--- /dev/null
+++ b/src/components/sections/contribute/ContributeTransparency.vue
@@ -0,0 +1,42 @@
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <h2 class="text-3xl md:text-4xl font-bold">
+        How Funds Are Used
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        Donations are not profit-driven. They support infrastructure and development.
+      </p>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Development</h3>
+          <p class="text-sm text-muted-foreground">
+            Core runtime, protocol, and module ecosystem.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Infrastructure</h3>
+          <p class="text-sm text-muted-foreground">
+            Servers, testing environments, and distributed network tools.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-lg bg-card">
+          <h3 class="font-bold mb-2">Research</h3>
+          <p class="text-sm text-muted-foreground">
+            Protocol design, peer-to-peer systems, and security improvements.
+          </p>
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/downloads/DownloadCTA.vue b/src/components/sections/downloads/DownloadCTA.vue
new file mode 100644
index 0000000..5c9d489
--- /dev/null
+++ b/src/components/sections/downloads/DownloadCTA.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import Button from '@/components/ui/Button.vue'
+import { ArrowRight, Download } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <h2 class="text-4xl md:text-5xl font-bold text-balance">
+        Start Using a Decentralized Runtime Today
+      </h2>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        Download NoSys, launch the runtime, and explore applications built on a
+        peer-to-peer infrastructure — no installation, no configuration, no vendor lock-in.
+      </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 px-8">
+            <Download class="h-4 w-4 mr-2" />
+            Download
+          </Button>
+        </RouterLink>
+
+        <RouterLink to="/how-it-works">
+          <Button size="lg" variant="outline" class="px-8">
+            Learn How It Works
+            <ArrowRight class="h-4 w-4 ml-2" />
+          </Button>
+        </RouterLink>
+
+      </div>
+
+      <p class="text-xs text-muted-foreground">
+        Open-source • Self-contained • No system modifications
+      </p>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/downloads/DownloadsHero.vue b/src/components/sections/downloads/DownloadDownloads.vue
similarity index 100%
rename from src/components/sections/downloads/DownloadsHero.vue
rename to src/components/sections/downloads/DownloadDownloads.vue
diff --git a/src/components/sections/downloads/DownloadHero.vue b/src/components/sections/downloads/DownloadHero.vue
new file mode 100644
index 0000000..ede5706
--- /dev/null
+++ b/src/components/sections/downloads/DownloadHero.vue
@@ -0,0 +1,27 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
+</script>
+
+<template>
+  <section class="container py-24 md:py-32">
+
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+
+      <div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
+        Self-contained runtime • No installation required
+      </div>
+
+      <h1 class="text-4xl md:text-6xl font-bold text-balance">
+        Download the NoSys Runtime
+      </h1>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        A fully portable peer-to-peer environment containing Python, Node.js,
+        core networking modules, and the application runtime — all bundled in a single package.
+      </p>
+
+    </div>
+
+    <DotsMouse />
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/downloads/DownloadHowItWorks.vue b/src/components/sections/downloads/DownloadHowItWorks.vue
new file mode 100644
index 0000000..6571077
--- /dev/null
+++ b/src/components/sections/downloads/DownloadHowItWorks.vue
@@ -0,0 +1,25 @@
+<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">
+        How it Runs
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        NoSys does not install dependencies on your system. Everything runs inside its own isolated runtime.
+      </p>
+
+      <div class="bg-card border rounded-lg p-6 text-left font-mono text-sm">
+        1. Download ZIP<br/>
+        2. Extract folder<br/>
+        3. Run start.sh or start.bat<br/>
+        4. Runtime launches Python + Node internally<br/>
+        5. Modules load dynamically
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/downloads/DownloadOptions.vue b/src/components/sections/downloads/DownloadOptions.vue
new file mode 100644
index 0000000..ae645a3
--- /dev/null
+++ b/src/components/sections/downloads/DownloadOptions.vue
@@ -0,0 +1,71 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import Button from '@/components/ui/Button.vue'
+import { Download, Terminal, Package } 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">
+        Choose Your Download Method
+      </h2>
+      <p class="text-muted-foreground text-lg max-w-2xl mx-auto">
+        No installation. No system dependency conflicts. Everything runs inside the noSys runtime folder.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+      <!-- ZIP -->
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-6 text-center">
+
+          <Package class="h-10 w-10 mx-auto text-primary" />
+
+          <h3 class="text-2xl font-bold">Runtime Bundle (Recommended)</h3>
+
+          <p class="text-muted-foreground">
+            Download a self-contained .zip with Python, Node.js, core runtime, and default modules.
+          </p>
+
+          <Button class="w-full">
+            <Download class="h-4 w-4 mr-2" />
+            Download ZIP
+          </Button>
+
+          <p class="text-xs text-muted-foreground">
+            Works on Windows, Linux, macOS
+          </p>
+
+        </CardContent>
+      </Card>
+
+      <!-- CLI -->
+      <Card class="border-2 opacity-80">
+        <CardContent class="p-8 space-y-6 text-center">
+
+          <Terminal class="h-10 w-10 mx-auto text-primary" />
+
+          <h3 class="text-2xl font-bold">CLI Bootstrap (Coming Soon)</h3>
+
+          <p class="text-muted-foreground">
+            Install and manage NoSys via a single command in your terminal.
+          </p>
+
+          <div class="bg-muted p-3 rounded text-sm font-mono text-left">
+            curl -sSL nosys.org/install | bash
+          </div>
+
+          <Button variant="outline" disabled class="w-full">
+            Coming Soon
+          </Button>
+
+        </CardContent>
+      </Card>
+
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/downloads/DownloadRequirements.vue b/src/components/sections/downloads/DownloadRequirements.vue
new file mode 100644
index 0000000..b2a30cc
--- /dev/null
+++ b/src/components/sections/downloads/DownloadRequirements.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { Laptop, HardDrive, Globe } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section 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-4">
+        System Requirements
+      </h2>
+
+      <p class="text-lg text-muted-foreground">
+        NoSys runs entirely inside its own runtime environment. Your system is only used to launch the bundle.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+      <div class="p-6 border rounded-lg bg-card text-center space-y-4">
+        <Laptop class="h-10 w-10 mx-auto text-primary" />
+        <h3 class="text-xl font-bold">Any Modern OS</h3>
+        <p class="text-sm text-muted-foreground">
+          Windows, Linux, or macOS. No system installation required.
+        </p>
+      </div>
+
+      <div class="p-6 border rounded-lg bg-card text-center space-y-4">
+        <HardDrive class="h-10 w-10 mx-auto text-primary" />
+        <h3 class="text-xl font-bold">~9999MB Space</h3>
+        <p class="text-sm text-muted-foreground">
+          Includes bundled Python runtime, Node runtime, and core modules.
+        </p>
+      </div>
+
+      <div class="p-6 border rounded-lg bg-card text-center space-y-4">
+        <Globe class="h-10 w-10 mx-auto text-primary" />
+        <h3 class="text-xl font-bold">Offline Capable</h3>
+        <p class="text-sm text-muted-foreground">
+          Works locally. Network only needed for external peer-to-peer connections.
+        </p>
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/support/SupportContactForm.vue b/src/components/sections/help/HelpContactForm.vue
similarity index 100%
rename from src/components/sections/support/SupportContactForm.vue
rename to src/components/sections/help/HelpContactForm.vue
diff --git a/src/components/sections/support/SupportFAQ.vue b/src/components/sections/help/SupportFAQ.vue
similarity index 100%
rename from src/components/sections/support/SupportFAQ.vue
rename to src/components/sections/help/SupportFAQ.vue
diff --git a/src/components/sections/support/SupportGettingStarted.vue b/src/components/sections/help/SupportGettingStarted.vue
similarity index 100%
rename from src/components/sections/support/SupportGettingStarted.vue
rename to src/components/sections/help/SupportGettingStarted.vue
diff --git a/src/components/sections/support/SupportHero.vue b/src/components/sections/help/SupportHero.vue
similarity index 100%
rename from src/components/sections/support/SupportHero.vue
rename to src/components/sections/help/SupportHero.vue
diff --git a/src/components/sections/support/SupportNeedHelp.vue b/src/components/sections/help/SupportNeedHelp.vue
similarity index 100%
rename from src/components/sections/support/SupportNeedHelp.vue
rename to src/components/sections/help/SupportNeedHelp.vue
diff --git a/src/components/sections/support/SupportQuickLinks.vue b/src/components/sections/help/SupportQuickLinks.vue
similarity index 100%
rename from src/components/sections/support/SupportQuickLinks.vue
rename to src/components/sections/help/SupportQuickLinks.vue
diff --git a/src/components/sections/support/SupportVideos.vue b/src/components/sections/help/SupportVideos.vue
similarity index 100%
rename from src/components/sections/support/SupportVideos.vue
rename to src/components/sections/help/SupportVideos.vue
diff --git a/src/components/sections/home/HomeArchitecture.vue b/src/components/sections/home/HomeArchitecture.vue
new file mode 100644
index 0000000..813b49b
--- /dev/null
+++ b/src/components/sections/home/HomeArchitecture.vue
@@ -0,0 +1,67 @@
+<template>
+  <section class="bg-card">
+
+    <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">
+          Built on Peer-to-Peer Infrastructure
+        </h2>
+
+        <p class="text-xl text-muted-foreground leading-relaxed">
+          NoSys combines distributed networking, cryptographic identity,
+          modular runtimes, and decentralized coordination systems.
+        </p>
+
+      </div>
+
+      <div
+        class="max-w-5xl mx-auto rounded-3xl border bg-background
+               p-8 md:p-12"
+      >
+
+        <div class="space-y-6 text-center">
+
+          <div class="p-5 rounded-2xl border bg-card">
+            Applications & Modules
+          </div>
+
+          <div class="text-muted-foreground">↓</div>
+
+          <div class="p-5 rounded-2xl border bg-card">
+            NoSys Runtime
+          </div>
+
+          <div class="text-muted-foreground">↓</div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+            <div class="p-4 rounded-xl border bg-card">
+              Networking
+            </div>
+
+            <div class="p-4 rounded-xl border bg-card">
+              Identity
+            </div>
+
+            <div class="p-4 rounded-xl border bg-card">
+              Rendezvous
+            </div>
+
+          </div>
+
+          <div class="text-muted-foreground">↓</div>
+
+          <div class="p-5 rounded-2xl border bg-card">
+            Peer-to-Peer Network
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeCTA.vue b/src/components/sections/home/HomeCTA.vue
index 3e42c14..d30a06e 100644
--- a/src/components/sections/home/HomeCTA.vue
+++ b/src/components/sections/home/HomeCTA.vue
@@ -1,30 +1,48 @@
 <script setup>
 import { RouterLink } from 'vue-router'
+
 import Button from '@/components/ui/Button.vue'
 </script>
 
 <template>
-  <section class="container py-24">
+  <section>
 
-    <div class="max-w-3xl mx-auto text-center space-y-6">
+    <div class="container py-24">
 
-      <h2 class="text-3xl md:text-4xl font-bold">
-        Start Building Decentralized Systems
-      </h2>
+      <div class="max-w-3xl mx-auto text-center space-y-8">
 
-      <p class="text-xl text-muted-foreground">
-        Explore the platform, connect peers, and build applications
-        without centralized infrastructure.
-      </p>
+        <h2 class="text-4xl font-bold text-balance">
+          Explore the NoSys Ecosystem
+        </h2>
 
-      <Button
-        size="lg"
-        class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
-      >
-        <RouterLink to="/downloads">
-          Get Started
-        </RouterLink>
-      </Button>
+        <p class="text-xl text-muted-foreground leading-relaxed">
+          Install decentralized applications, join community networks,
+          or build your own modules on top of peer-to-peer infrastructure.
+        </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 NoSys
+            </Button>
+          </RouterLink>
+
+          <RouterLink to="/modules">
+            <Button
+              size="lg"
+              variant="outline"
+            >
+              Explore Modules
+            </Button>
+          </RouterLink>
+
+        </div>
+
+      </div>
 
     </div>
 
diff --git a/src/components/sections/home/HomeCapabilities.vue b/src/components/sections/home/HomeCapabilities.vue
new file mode 100644
index 0000000..312f3ab
--- /dev/null
+++ b/src/components/sections/home/HomeCapabilities.vue
@@ -0,0 +1,77 @@
+<script setup>
+import {
+  MessageCircle,
+  File,
+  Gamepad2,
+  Bot
+} from 'lucide-vue-next'
+
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+</script>
+
+<template>
+  <section class="bg-card">
+
+    <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">
+          What You Can Do
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          NoSys is designed to support many types of decentralized systems.
+        </p>
+
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+
+        <Card>
+          <CardContent class="pt-6 space-y-4">
+            <MessageCircle class="h-8 w-8 text-primary" />
+            <h3 class="font-bold text-lg">Messaging</h3>
+            <p class="text-sm text-muted-foreground">
+              Real-time decentralized communication.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6 space-y-4">
+            <File class="h-8 w-8 text-primary" />
+            <h3 class="font-bold text-lg">File Sharing</h3>
+            <p class="text-sm text-muted-foreground">
+              Secure peer-to-peer file transfer systems.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6 space-y-4">
+            <Gamepad2 class="h-8 w-8 text-primary" />
+            <h3 class="font-bold text-lg">Games</h3>
+            <p class="text-sm text-muted-foreground">
+              Multiplayer applications without centralized servers.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6 space-y-4">
+            <Bot class="h-8 w-8 text-primary" />
+            <h3 class="font-bold text-lg">Automation</h3>
+            <p class="text-sm text-muted-foreground">
+              AI agents and distributed autonomous systems.
+            </p>
+          </CardContent>
+        </Card>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeDecentralization.vue b/src/components/sections/home/HomeDecentralization.vue
new file mode 100644
index 0000000..62325ef
--- /dev/null
+++ b/src/components/sections/home/HomeDecentralization.vue
@@ -0,0 +1,83 @@
+<script setup>
+
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Building2, Database, ShieldOff } from 'lucide-vue-next';
+</script>
+
+<template>
+  <section>
+
+    <div class="container py-24">
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+        <div>
+
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Why Decentralization Matters
+          </h2>
+
+          <div class="space-y-5 text-muted-foreground leading-relaxed">
+
+            <p>
+              As more communication, identity, and digital interaction move
+              online, centralized platforms gain increasing control over
+              infrastructure, data, and communities.
+            </p>
+
+            <p>
+              NoSys exists to support an alternative model where applications,
+              networks, and communities are owned and operated by their users.
+            </p>
+
+          </div>
+
+        </div>
+
+        <div class="space-y-6">
+
+          <Card>
+            <CardContent class="pt-6 flex gap-4">
+              <ShieldOff class="h-8 w-8 text-primary shrink-0" />
+              <div>
+                <h3 class="font-bold mb-2">No Central Ownership</h3>
+                <p class="text-sm text-muted-foreground">
+                  The ecosystem is not controlled by a single company.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="pt-6 flex gap-4">
+              <Database class="h-8 w-8 text-primary shrink-0" />
+              <div>
+                <h3 class="font-bold mb-2">Local Identity & Data</h3>
+                <p class="text-sm text-muted-foreground">
+                  Identity and data are managed directly by users.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="pt-6 flex gap-4">
+              <Building2 class="h-8 w-8 text-primary shrink-0" />
+              <div>
+                <h3 class="font-bold mb-2">Community Ecosystem</h3>
+                <p class="text-sm text-muted-foreground">
+                  Applications and networks can evolve independently.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeEcosystem.vue b/src/components/sections/home/HomeEcosystem.vue
index a807ab4..a8f11ab 100644
--- a/src/components/sections/home/HomeEcosystem.vue
+++ b/src/components/sections/home/HomeEcosystem.vue
@@ -1,40 +1,64 @@
 <script setup>
-const items = [
-  'Social Networks',
-  'Encrypted Messaging',
-  'File Distribution',
-  'IoT Networks',
-  'Autonomous Systems',
-  'Collaborative Platforms',
-  'Distributed Communities',
-  'Future Decentralized Applications'
-]
+import {
+  Github,
+  Users,
+  Terminal
+} from 'lucide-vue-next'
+
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
 </script>
 
 <template>
-  <section class="container py-24">
+  <section class="bg-card">
 
-    <div class="text-center mb-16">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Build Anything on Top
-      </h2>
+    <div class="container py-24">
 
-      <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
-        NoSys is designed as infrastructure for decentralized ecosystems,
-        enabling entirely different categories of peer-to-peer applications.
-      </p>
-    </div>
+      <div class="max-w-3xl mx-auto text-center mb-16">
 
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Open Ecosystem
+        </h2>
 
-      <div
-        v-for="item in items"
-        :key="item"
-        class="border rounded-xl p-6 text-center bg-card hover:border-primary transition-colors"
-      >
-        <p class="font-medium">
-          {{ item }}
+        <p class="text-xl text-muted-foreground">
+          NoSys is developed openly with community contributions,
+          public repositories, and modular expansion.
         </p>
+
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+        <Card>
+          <CardContent class="pt-6 space-y-4 text-center">
+            <Github class="h-10 w-10 text-primary mx-auto" />
+            <h3 class="font-bold text-xl">Open Source</h3>
+            <p class="text-muted-foreground">
+              Transparent development and public code.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6 space-y-4 text-center">
+            <Users class="h-10 w-10 text-primary mx-auto" />
+            <h3 class="font-bold text-xl">Community Driven</h3>
+            <p class="text-muted-foreground">
+              Built collaboratively by contributors and users.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6 space-y-4 text-center">
+            <Terminal class="h-10 w-10 text-primary mx-auto" />
+            <h3 class="font-bold text-xl">Developer Friendly</h3>
+            <p class="text-muted-foreground">
+              Create new applications and extend the ecosystem.
+            </p>
+          </CardContent>
+        </Card>
+
       </div>
 
     </div>
diff --git a/src/components/sections/home/HomeHero.vue b/src/components/sections/home/HomeHero.vue
index 310c3b3..ecc6bb0 100644
--- a/src/components/sections/home/HomeHero.vue
+++ b/src/components/sections/home/HomeHero.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { RouterLink } from 'vue-router'
+
 import Button from '@/components/ui/Button.vue'
 import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
@@ -7,47 +8,69 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 <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="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
 
-      <div class="space-y-6">
+      <div class="space-y-8">
 
-        <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
-          Open Source • Peer-to-Peer • Decentralized
+        <div
+          class="inline-flex items-center px-3 py-1 text-sm
+                 rounded-full border border-border"
+        >
+          Open Source • Peer-to-Peer • Modular
         </div>
 
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
-          Infrastructure for a Decentralized Future
-        </h1>
+        <div class="space-y-6">
 
-        <p class="text-xl text-muted-foreground text-pretty max-w-2xl">
-          NoSys is a peer-to-peer platform for building decentralized systems.
-          Create social networks, communication platforms, autonomous networks,
-          distributed applications, and future technologies without relying on centralized infrastructure.
-        </p>
+          <h1
+            class="text-5xl md:text-6xl lg:text-7xl
+                   font-bold tracking-tight text-balance"
+          >
+            A Platform for
+            <span class="text-primary">
+              Decentralized Applications
+            </span>
+          </h1>
+
+          <p
+            class="text-xl text-muted-foreground
+                   leading-relaxed max-w-2xl"
+          >
+            NoSys is a peer-to-peer platform where anyone can install,
+            use, or create decentralized applications without relying on
+            centralized platforms.
+          </p>
+
+        </div>
 
         <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
-            </RouterLink>
-          </Button>
+          <RouterLink to="/downloads">
+            <Button
+              size="lg"
+              class="bg-amber-400 hover:bg-amber-500 text-black"
+            >
+              Download NoSys
+            </Button>
+          </RouterLink>
 
-          <Button
-            variant="outline"
-            size="lg"
-            class="text-lg px-8 bg-transparent hover:text-amber-500"
-          >
-            <RouterLink to="/docs">
-              Documentation
-            </RouterLink>
-          </Button>
+          <RouterLink to="/modules">
+            <Button
+              variant="outline"
+              size="lg"
+              class="bg-transparent"
+            >
+              Explore Modules
+            </Button>
+          </RouterLink>
 
         </div>
 
+        <div class="flex flex-wrap gap-6 pt-4 text-sm text-muted-foreground">
+          <div>Community Modules</div>
+          <div>Distributed Networks</div>
+          <div>Open Ecosystem</div>
+        </div>
+
       </div>
 
       <DotsMouse />
diff --git a/src/components/sections/home/HomeModules.vue b/src/components/sections/home/HomeModules.vue
new file mode 100644
index 0000000..bf4c09b
--- /dev/null
+++ b/src/components/sections/home/HomeModules.vue
@@ -0,0 +1,77 @@
+<script setup>
+import {
+  MessageSquare,
+  Lock,
+  Folder
+} from 'lucide-vue-next'
+
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+</script>
+
+<template>
+  <section>
+
+    <div class="container py-24">
+
+      <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
+
+        <div class="max-w-2xl">
+
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Featured Modules
+          </h2>
+
+          <p class="text-xl text-muted-foreground leading-relaxed">
+            Applications on NoSys are distributed as modules that run
+            on top of the platform.
+          </p>
+
+        </div>
+
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+        <Card class="border-2">
+          <CardContent class="pt-6 space-y-4">
+            <MessageSquare class="h-8 w-8 text-primary" />
+            <div>
+              <h3 class="font-bold text-xl mb-2">P2Post</h3>
+              <p class="text-muted-foreground">
+                Decentralized social networking and content sharing.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6 space-y-4">
+            <Lock class="h-8 w-8 text-primary" />
+            <div>
+              <h3 class="font-bold text-xl mb-2">P2Private</h3>
+              <p class="text-muted-foreground">
+                Secure encrypted peer-to-peer messaging.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2 border-dashed">
+          <CardContent class="pt-6 space-y-4">
+            <Folder class="h-8 w-8 text-primary" />
+            <div>
+              <h3 class="font-bold text-xl mb-2">More Modules</h3>
+              <p class="text-muted-foreground">
+                The ecosystem is open for community-built applications.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomePlatform.vue b/src/components/sections/home/HomePlatform.vue
deleted file mode 100644
index c1d8a2a..0000000
--- a/src/components/sections/home/HomePlatform.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-</script>
-
-<template>
-  <section class="container py-24">
-
-    <div class="max-w-4xl mx-auto text-center space-y-6">
-
-      <div class="inline-block px-3 py-1 text-sm rounded-full border border-border">
-        What is NoSys?
-      </div>
-
-      <h2 class="text-3xl md:text-5xl font-bold text-balance">
-        A Platform, Not an Application
-      </h2>
-
-      <p class="text-xl text-muted-foreground leading-relaxed">
-        NoSys provides the foundation for decentralized communication and coordination.
-        It includes peer discovery, rendezvous, encrypted communication,
-        sub-network management, and modular infrastructure for building distributed systems.
-      </p>
-
-      <p class="text-lg text-muted-foreground leading-relaxed">
-        Instead of relying on centralized servers controlled by corporations,
-        applications built on NoSys communicate directly between peers.
-      </p>
-
-    </div>
-
-  </section>
-</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomePrinciples.vue b/src/components/sections/home/HomePrinciples.vue
deleted file mode 100644
index 70a06f5..0000000
--- a/src/components/sections/home/HomePrinciples.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup>
-import Card from '@/components/ui/Card.vue'
-import CardContent from '@/components/ui/CardContent.vue'
-
-import {
-  Network,
-  Shield,
-  Blocks
-} 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">
-        Core Infrastructure Principles
-      </h2>
-
-      <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
-        Built to reduce dependency on centralized systems
-      </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">
-            <Network class="h-6 w-6 text-primary" />
-          </div>
-
-          <h3 class="text-2xl font-bold mb-3">
-            Peer-to-Peer
-          </h3>
-
-          <p class="text-muted-foreground leading-relaxed">
-            Systems communicate directly between peers without depending on centralized infrastructure or single points of control.
-          </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">
-            <Shield class="h-6 w-6 text-primary" />
-          </div>
-
-          <h3 class="text-2xl font-bold mb-3">
-            Sovereignty
-          </h3>
-
-          <p class="text-muted-foreground leading-relaxed">
-            Identity, communication, and infrastructure belong to the participants of the network, not centralized providers.
-          </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">
-            <Blocks class="h-6 w-6 text-primary" />
-          </div>
-
-          <h3 class="text-2xl font-bold mb-3">
-            Modularity
-          </h3>
-
-          <p class="text-muted-foreground leading-relaxed">
-            Build different systems on top of the same decentralized infrastructure, from social platforms to autonomous machine networks.
-          </p>
-
-        </CardContent>
-      </Card>
-
-    </div>
-
-  </section>
-</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeWhatIs.vue b/src/components/sections/home/HomeWhatIs.vue
new file mode 100644
index 0000000..357979b
--- /dev/null
+++ b/src/components/sections/home/HomeWhatIs.vue
@@ -0,0 +1,100 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Boxes, Network, Shield } from 'lucide-vue-next';
+
+</script>
+
+<template>
+  <section>
+
+    <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">
+          What is NoSys?
+        </h2>
+
+        <p class="text-xl text-muted-foreground leading-relaxed">
+          NoSys provides the networking, identity, and runtime systems
+          needed for decentralized applications to operate directly
+          between peers.
+        </p>
+
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+        <Card class="border-2">
+          <CardContent class="pt-6 space-y-4">
+
+            <div
+              class="h-12 w-12 rounded-xl bg-primary/10
+                     flex items-center justify-center"
+            >
+              <Network class="h-6 w-6 text-primary" />
+            </div>
+
+            <h3 class="text-2xl font-bold">
+              Peer-to-Peer
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Applications communicate directly between devices without
+              depending on centralized platforms.
+            </p>
+
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6 space-y-4">
+
+            <div
+              class="h-12 w-12 rounded-xl bg-primary/10
+                     flex items-center justify-center"
+            >
+              <Boxes class="h-6 w-6 text-primary" />
+            </div>
+
+            <h3 class="text-2xl font-bold">
+              Modular
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Install community-built modules for messaging, social
+              networking, file sharing, games, automation, and more.
+            </p>
+
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6 space-y-4">
+
+            <div
+              class="h-12 w-12 rounded-xl bg-primary/10
+                     flex items-center justify-center"
+            >
+              <Shield class="h-6 w-6 text-primary" />
+            </div>
+
+            <h3 class="text-2xl font-bold">
+              Open Source
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              The ecosystem is transparent, community-driven,
+              and not controlled by a single company.
+            </p>
+
+          </CardContent>
+        </Card>
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesCTA.vue b/src/components/sections/modules/ModulesCTA.vue
new file mode 100644
index 0000000..9e12f99
--- /dev/null
+++ b/src/components/sections/modules/ModulesCTA.vue
@@ -0,0 +1,33 @@
+<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-4xl mx-auto text-center space-y-8">
+      <h2 class="text-4xl md:text-5xl font-bold text-balance">
+        Explore the Ecosystem
+      </h2>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        Use community applications, discover decentralized experiences,
+        or build entirely new systems on top of NoSys.
+      </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 px-8">
+            Download NoSys
+          </Button>
+        </RouterLink>
+
+        <RouterLink to="/documentation">
+          <Button size="lg" variant="outline" class="px-8">
+            Explore Documentation
+          </Button>
+        </RouterLink>
+      </div>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesCategories.vue b/src/components/sections/modules/ModulesCategories.vue
new file mode 100644
index 0000000..53917f3
--- /dev/null
+++ b/src/components/sections/modules/ModulesCategories.vue
@@ -0,0 +1,95 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+import {
+  MessageCircle,
+  Users,
+  Gamepad2,
+  Folder,
+  Radio,
+  Car,
+  Shield,
+  Network
+} from 'lucide-vue-next'
+
+const categories = [
+  {
+    icon: MessageCircle,
+    title: 'Messaging',
+    description: 'Private communication systems, encrypted chats, and decentralized communities.'
+  },
+  {
+    icon: Users,
+    title: 'Social Networks',
+    description: 'Community-driven social platforms without centralized ownership.'
+  },
+  {
+    icon: Folder,
+    title: 'File Systems',
+    description: 'Distributed file sharing and decentralized storage applications.'
+  },
+  {
+    icon: Gamepad2,
+    title: 'Games',
+    description: 'Peer-to-peer multiplayer experiences without centralized servers.'
+  },
+  {
+    icon: Radio,
+    title: 'Communication Networks',
+    description: 'Custom subnetworks and alternative communication layers.'
+  },
+  {
+    icon: Car,
+    title: 'Autonomous Systems',
+    description: 'Machine-to-machine coordination and decentralized automation.'
+  },
+  {
+    icon: Shield,
+    title: 'Security Layers',
+    description: 'Identity systems, verification tools, and trust mechanisms.'
+  },
+  {
+    icon: Network,
+    title: 'Experimental Protocols',
+    description: 'Research projects and new decentralized architectures.'
+  }
+]
+</script>
+
+<template>
+  <section 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">
+        What Can Be Built?
+      </h2>
+
+      <p class="text-xl text-muted-foreground">
+        NoSys is infrastructure.
+        The possibilities are defined by the community.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <Card
+        v-for="category in categories"
+        :key="category.title"
+        class="border-2 hover:border-primary/40 transition-colors"
+      >
+        <CardContent class="pt-6 space-y-4">
+          <div class="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <component :is="category.icon" class="h-6 w-6 text-primary" />
+          </div>
+
+          <h3 class="text-lg font-semibold">
+            {{ category.title }}
+          </h3>
+
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ category.description }}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesExamples.vue b/src/components/sections/modules/ModulesExamples.vue
new file mode 100644
index 0000000..42f1687
--- /dev/null
+++ b/src/components/sections/modules/ModulesExamples.vue
@@ -0,0 +1,56 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+const examples = [
+  {
+    title: 'P2Post',
+    description: 'A decentralized social media module built on top of NoSys.'
+  },
+  {
+    title: 'P2Private',
+    description: 'Encrypted peer-to-peer messaging between contacts.'
+  },
+  {
+    title: 'Distributed File Share',
+    description: 'Community-driven file sharing without centralized hosting.'
+  },
+  {
+    title: 'Mesh Coordination Network',
+    description: 'Experimental communication layer for resilient local networks.'
+  }
+]
+</script>
+
+<template>
+  <section 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">
+        Example Modules
+      </h2>
+
+      <p class="text-xl text-muted-foreground">
+        NoSys already supports applications that demonstrate
+        what decentralized infrastructure can enable.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+      <Card
+        v-for="example in examples"
+        :key="example.title"
+        class="border-2"
+      >
+        <CardContent class="p-8 space-y-4">
+          <h3 class="text-2xl font-bold">
+            {{ example.title }}
+          </h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            {{ example.description }}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesHero.vue b/src/components/sections/modules/ModulesHero.vue
new file mode 100644
index 0000000..efb5e14
--- /dev/null
+++ b/src/components/sections/modules/ModulesHero.vue
@@ -0,0 +1,30 @@
+<script setup>
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
+</script>
+
+<template>
+  <section class="container py-24 md:py-32 lg:py-40">
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+      <div
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm"
+      >
+        Application Ecosystem
+      </div>
+
+      <div class="space-y-6">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
+          Modules Turn NoSys Into Anything
+        </h1>
+
+        <p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
+          NoSys is not a single application.
+          It is a decentralized runtime where the community can build social networks,
+          messaging apps, file systems, games, autonomous coordination systems,
+          and entirely new peer-to-peer experiences.
+        </p>
+      </div>
+    </div>
+
+    <DotsMouse />
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesHowTheyWork.vue b/src/components/sections/modules/ModulesHowTheyWork.vue
new file mode 100644
index 0000000..7f4b58b
--- /dev/null
+++ b/src/components/sections/modules/ModulesHowTheyWork.vue
@@ -0,0 +1,59 @@
+<template>
+  <section class="container py-24">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          How Modules Run
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          Modules operate on top of the NoSys runtime and infrastructure stack.
+        </p>
+      </div>
+
+      <div class="rounded-3xl border border-border bg-background p-8 md:p-12 space-y-6">
+
+        <div class="rounded-2xl border border-primary/30 bg-primary/5 p-6 text-center">
+          <h3 class="text-xl font-bold mb-2">Applications & Modules</h3>
+          <p class="text-muted-foreground">
+            Social media, messaging, games, file systems, coordination networks.
+          </p>
+        </div>
+
+        <div class="flex justify-center text-muted-foreground text-2xl">
+          ↓
+        </div>
+
+        <div class="rounded-2xl border border-border bg-card p-6 text-center">
+          <h3 class="text-xl font-bold mb-2">VueNoSys UI Layer</h3>
+          <p class="text-muted-foreground">
+            Local interfaces rendered directly on the user's machine.
+          </p>
+        </div>
+
+        <div class="flex justify-center text-muted-foreground text-2xl">
+          ↓
+        </div>
+
+        <div class="rounded-2xl border border-border bg-card p-6 text-center">
+          <h3 class="text-xl font-bold mb-2">NoSys Runtime</h3>
+          <p class="text-muted-foreground">
+            Module management, APIs, peer connections, networking, and routing.
+          </p>
+        </div>
+
+        <div class="flex justify-center text-muted-foreground text-2xl">
+          ↓
+        </div>
+
+        <div class="rounded-2xl border border-border bg-card p-6 text-center">
+          <h3 class="text-xl font-bold mb-2">Core Infrastructure</h3>
+          <p class="text-muted-foreground">
+            Encryption, identity, rendezvous, peer discovery, distributed communication.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesOverview.vue b/src/components/sections/modules/ModulesOverview.vue
new file mode 100644
index 0000000..57c436b
--- /dev/null
+++ b/src/components/sections/modules/ModulesOverview.vue
@@ -0,0 +1,68 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Blocks, Cpu, Globe } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section 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">
+        Applications Built on Top of the Network
+      </h2>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        Modules use the infrastructure provided by NoSys:
+        peer discovery, encrypted communication, identity, networking,
+        and decentralized coordination.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Blocks class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Independent Modules</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Every application runs as an independent module with its own logic,
+            interfaces, and network behavior.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Cpu class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Shared Infrastructure</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Modules reuse the NoSys stack instead of rebuilding encryption,
+            networking, peer management, and discovery from scratch.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-8 space-y-4">
+          <div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+            <Globe class="h-7 w-7 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold">Open Ecosystem</h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Anyone can create modules, publish them,
+            fork them, improve them, or build alternatives.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/modules/ModulesSecurity.vue b/src/components/sections/modules/ModulesSecurity.vue
new file mode 100644
index 0000000..8ba4738
--- /dev/null
+++ b/src/components/sections/modules/ModulesSecurity.vue
@@ -0,0 +1,75 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { ShieldCheck } from 'lucide-vue-next'
+</script>
+
+<template>
+  <section 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-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm mb-6"
+        >
+          <ShieldCheck class="h-4 w-4" />
+          Open & Verifiable
+        </div>
+
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Users Choose What They Run
+        </h2>
+
+        <div class="space-y-4 text-muted-foreground leading-relaxed text-lg">
+          <p>
+            NoSys does not force a single application ecosystem.
+          </p>
+
+          <p>
+            Modules are independent, open, and replaceable.
+            Users can inspect code, fork projects,
+            build alternatives, or choose different applications.
+          </p>
+
+          <p>
+            The goal is to reduce dependency on centralized gatekeepers
+            and give communities direct control over their own digital infrastructure.
+          </p>
+        </div>
+      </div>
+
+      <Card class="border-2">
+        <CardContent class="p-8 space-y-6">
+          <div>
+            <h3 class="font-semibold mb-2">Open Source</h3>
+            <p class="text-sm text-muted-foreground">
+              Modules can be audited and verified by the community.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold mb-2">Local Execution</h3>
+            <p class="text-sm text-muted-foreground">
+              Interfaces and logic can run directly on the user's device.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold mb-2">Community Governance</h3>
+            <p class="text-sm text-muted-foreground">
+              Ecosystems emerge from communities instead of centralized corporations.
+            </p>
+          </div>
+
+          <div>
+            <h3 class="font-semibold mb-2">Replaceable Systems</h3>
+            <p class="text-sm text-muted-foreground">
+              No single module controls the entire network.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index d829e94..e348cb3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,77 +1,230 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import Home from './views/Home.vue';
-import About from './views/About.vue';
-import Blog from './views/Blog.vue';
-import Community from './views/Community.vue';
-import Docs from './views/Docs.vue';
-import Downloads from './views/Downloads.vue';
-import HowItWorks from './views/HowItWorks.vue';
-import Support from './views/Support.vue';
-import Article from './views/Article.vue';
+import { createRouter, createWebHistory } from 'vue-router'
+
+// Core Pages
+import Home from './views/Home.vue'
+import About from './views/About.vue'
+import Architecture from './views/Architecture.vue'
+import Downloads from './views/Downloads.vue'
+import Docs from './views/Docs.vue'
+import Modules from './views/Modules.vue'
+import ModuleDetails from './views/ModuleDetails.vue'
+import GettingStarted from './views/GettingStarted.vue'
+
+// Ecosystem
+import Community from './views/Community.vue'
+import Help from './views/Help.vue'
+import Contribute from './views/Contribute.vue'
+import Roadmap from './views/Roadmap.vue'
+import FAQ from './views/FAQ.vue'
+import Security from './views/Security.vue'
+
+// Content
+import Blog from './views/Blog.vue'
+import Article from './views/Article.vue'
 
 const routes = [
+
+  // Home
+
   {
     path: '/',
     name: 'Home',
     component: Home,
+    meta: {
+      title: 'noSys - Peer-to-Peer Platform'
+    }
   },
+
+  // Main Pages
+
   {
     path: '/about',
     name: 'About',
     component: About,
+    meta: {
+      title: 'About noSys'
+    }
   },
+
   {
-    path: '/how-it-works',
-    name: 'HowItWorks',
-    component: HowItWorks,
+    path: '/architecture',
+    name: 'Architecture',
+    component: Architecture,
+    meta: {
+      title: 'How noSys Works'
+    }
   },
+
   {
     path: '/downloads',
     name: 'Downloads',
     component: Downloads,
+    meta: {
+      title: 'Download noSys'
+    }
   },
+
   {
-    path: '/documentation',
-    name: 'Documentation',
+    path: '/docs',
+    name: 'Docs',
     component: Docs,
+    meta: {
+      title: 'Documentation'
+    }
   },
+
+  {
+    path: '/getting-started',
+    name: 'GettingStarted',
+    component: GettingStarted,
+    meta: {
+      title: 'Getting Started'
+    }
+  },
+
+  // Modules Ecosystem
+
+  {
+    path: '/modules',
+    name: 'Modules',
+    component: Modules,
+    meta: {
+      title: 'Modules'
+    }
+  },
+
+  {
+    path: '/modules/:slug',
+    name: 'ModuleDetails',
+    component: ModuleDetails,
+    props: true,
+    meta: {
+      title: 'Module'
+    }
+  },
+
+  // Community / Ecosystem
+
   {
     path: '/community',
     name: 'Community',
     component: Community,
+    meta: {
+      title: 'Community'
+    }
   },
+
+  {
+    path: '/help',
+    name: 'Help',
+    component: Help,
+    meta: {
+      title: 'Help'
+    }
+  },
+
+  {
+    path: '/contribute',
+    name: 'Contribute',
+    component: Contribute,
+    meta: {
+      title: 'Contribute'
+    }
+  },
+
+  {
+    path: '/roadmap',
+    name: 'Roadmap',
+    component: Roadmap,
+    meta: {
+      title: 'Roadmap'
+    }
+  },
+
+  {
+    path: '/security',
+    name: 'Security',
+    component: Security,
+    meta: {
+      title: 'Security'
+    }
+  },
+
+  {
+    path: '/faq',
+    name: 'FAQ',
+    component: FAQ,
+    meta: {
+      title: 'FAQ'
+    }
+  },
+
+  // Blog
+
   {
     path: '/blog',
     name: 'Blog',
     component: Blog,
+    meta: {
+      title: 'Blog'
+    }
   },
+
   {
-    path: "/blog/:slug",
-    name: "Article",
+    path: '/blog/:slug',
+    name: 'Article',
     component: Article,
-    props: true
+    props: true,
+    meta: {
+      title: 'Article'
+    }
   },
+
+  // Legacy Redirects
+
   {
-    path: '/support',
-    name: 'Support',
-    component: Support,
+    path: '/how-it-works',
+    redirect: '/architecture'
   },
+
   {
-    path: "/:pathMatch(.*)*",
-    redirect: "/"
+    path: '/documentation',
+    redirect: '/docs'
+  },
+
+  // 404
+
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/'
   }
-];
+
+]
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
+
   routes,
+
   scrollBehavior(to, from, savedPosition) {
+
     if (savedPosition) {
       return savedPosition
     }
-    
-    return { top: 0 }
-  }
-});
 
-export default router;
\ No newline at end of file
+    return {
+      top: 0
+    }
+  }
+})
+
+router.afterEach((to) => {
+
+  const baseTitle = 'NoSys'
+
+  document.title = to.meta?.title
+    ? `${to.meta.title} • ${baseTitle}`
+    : baseTitle
+})
+
+export default router
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
index 28ced99..9cf1011 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,14 +1,14 @@
 <script setup>
-import AboutHero from "@/components/sections/about/AboutHero.vue"
-import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue"
-import AboutWhy from "@/components/sections/about/AboutWhy.vue"
-import AboutTechnology from "@/components/sections/about/AboutTechnology.vue"
-import AboutVision from "@/components/sections/about/AboutVision.vue"
-import AboutCTA from "@/components/sections/about/AboutCTA.vue"
+import AboutHero from '@/components/sections/about/AboutHero.vue'
+import AboutVision from '@/components/sections/about/AboutVision.vue'
+import AboutProblem from '@/components/sections/about/AboutProblem.vue'
+import AboutSolution from '@/components/sections/about/AboutSolution.vue'
+import AboutPrinciples from '@/components/sections/about/AboutPrinciples.vue'
+import AboutFuture from '@/components/sections/about/AboutFuture.vue'
+import AboutCTA from '@/components/sections/about/AboutCTA.vue'
 </script>
 
 <template>
-
   <div class="flex flex-col">
 
     <section class="border-b border-border">
@@ -17,30 +17,36 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue"
       </div>
     </section>
 
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <AboutTheProblem />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <AboutWhy />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <AboutTechnology />
-      </div>
-    </section>
-
     <section class="border-b border-border">
       <div class="container mx-auto">
         <AboutVision />
       </div>
     </section>
 
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <AboutProblem />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <AboutSolution />
+      </div>
+    </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <AboutPrinciples />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <AboutFuture />
+      </div>
+    </section>
+
     <section>
       <div class="container mx-auto">
         <AboutCTA />
@@ -48,5 +54,4 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue"
     </section>
 
   </div>
-
 </template>
\ No newline at end of file
diff --git a/src/views/Architecture.vue b/src/views/Architecture.vue
new file mode 100644
index 0000000..ec2c1e7
--- /dev/null
+++ b/src/views/Architecture.vue
@@ -0,0 +1,18 @@
+<script setup>
+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="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/Article.vue b/src/views/Article.vue
index 569fdd3..e7ec245 100644
--- a/src/views/Article.vue
+++ b/src/views/Article.vue
@@ -1,96 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
 <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">{{ article?.title }}</h1>
-        <div class="flex justify-center items-center gap-6 text-sm text-muted-foreground mb-4">
-          <span class="flex items-center gap-1">
-            <User class="h-4 w-4" /> {{ article?.author }}
-          </span>
-          <span class="flex items-center gap-1">
-            <Calendar class="h-4 w-4" /> {{ article?.date }}
-          </span>
-          <span class="px-2 py-1 bg-muted rounded text-xs">{{ article?.category }}</span>
-        </div>
-        <p class="text-muted-foreground leading-relaxed">{{ article?.excerpt }}</p>
-      </div>
-    </section>
 
-    <!-- Article Content -->
-    <section class="border-t border-border bg-card">
-      <div class="container py-16">
-        <div class="max-w-4xl mx-auto">
-          <Card>
-            <CardContent class="p-8">
-              <div v-html="articleContent"></div>
-            </CardContent>
-          </Card>
-        </div>
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
       </div>
     </section>
-
-    <!-- Back to Blog -->
-    <section class="container py-16 text-center">
-      <Button asChild variant="outline">
-        <RouterLink to="/blog" class="flex items-center gap-2">
-          <ArrowRight class="h-4 w-4 rotate-180" />
-          Back to Blog
-        </RouterLink>
-      </Button>
-    </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, useRoute } from "vue-router"
-import { Calendar, User, ArrowRight } from "lucide-vue-next"
-
-// Dados de posts (mesmos da página de blog)
-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",
-    content: "<p>The future of social networking must shift toward peer-to-peer (P2P) models because centralized platforms have consistently failed users by enabling censorship, surveillance, and data exploitation, undermining user privacy and freedom of expression. P2P networks decentralize control, empowering individuals to communicate directly without intermediaries, thereby reducing the risks of arbitrary content suppression and government or corporate overreach. Additionally, P2P systems inherently enhance privacy, as data is distributed rather than stored in centralized servers vulnerable to breaches and misuse. This paradigm shift fosters a more open, resilient, and user-centric social networking environment, restoring trust and sovereignty over personal information and online interactions.</p>"
-  },
-  {
-    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",
-    content: "<p>Here we explain how P2P networks work and why they're important...</p>"
-  },
-  {
-    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",
-    content: "<p>Content about privacy-first applications and cryptography...</p>"
-  },
-  // ... adicionar os demais posts conforme necessário
-]
-
-// Pegar o slug da rota
-const route = useRoute()
-const slug = route.params.slug
-
-// Encontrar o artigo correspondente
-const article = posts.find((p) => p.slug === slug)
-
-// Para demo, o conteúdo do artigo pode vir de Markdown convertido para HTML ou API
-const articleContent = article?.content || "<p>Article not found.</p>"
-</script>
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index ddf8f9b..e7ec245 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -1,37 +1,11 @@
 <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"
-
-
 </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">
diff --git a/src/views/Community.vue b/src/views/Community.vue
index c3bc26d..6df01e1 100644
--- a/src/views/Community.vue
+++ b/src/views/Community.vue
@@ -1,103 +1,15 @@
 <script setup>
-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()
-
-// Contribution Guide items
-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.",
-  },
-]
-
-// Roadmap items
-const roadmap = [
-  {
-    title: "Q1 2025 - In Progress",
-    dotColor: "bg-primary",
-    tasks: [
-      "Mobile iOS app development",
-      "Improved NAT traversal for restrictive networks",
-      "Group video calling module",
-      "Enhanced content discovery algorithms",
-    ],
-  },
-  {
-    title: "Q2 2025 - Planned",
-    dotColor: "bg-muted-foreground",
-    tasks: [
-      "Distributed storage for larger media files",
-      "Advanced reputation and trust metrics",
-      "Built-in Tor integration for enhanced anonymity",
-      "Marketplace module for P2P commerce",
-    ],
-  },
-  {
-    title: "Q3-Q4 2025 - Future",
-    dotColor: "bg-muted-foreground",
-    tasks: [
-      "Cross-platform desktop synchronization",
-      "Blockchain integration for identity verification (optional)",
-      "Plugin ecosystem marketplace",
-      "Advanced analytics dashboard for users",
-    ],
-  },
-]
-
-// Recent updates
-const updates = [
-  {
-    title: "v1.2.0 Released",
-    date: "Dec 1, 2024",
-    description: "Major update with group Waves, improved encryption performance, and enhanced NAT traversal. See full release notes on the downloads page.",
-  },
-  {
-    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.",
-  },
-]
+import CommunityHero from '@/components/sections/community/CommunityHero.vue'
+import CommunitySpaces from '@/components/sections/community/CommunitySpaces.vue'
+import CommunityEcosystem from '@/components/sections/community/CommunityEcosystem.vue'
+import CommunityContribute from '@/components/sections/community/CommunityContribute.vue'
+import CommunitySupport from '@/components/sections/community/CommunitySupport.vue'
+import CommunityCTA from '@/components/sections/community/CommunityCTA.vue'
 </script>
 
 <template>
   <div class="flex flex-col">
+
     <section class="border-b border-border">
       <div class="container mx-auto">
         <CommunityHero />
@@ -106,32 +18,33 @@ const updates = [
 
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <CommunityProjectSupport />
+        <CommunitySpaces />
+      </div>
+    </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <CommunityEcosystem />
       </div>
     </section>
 
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <CommunityDevRoadMap />
+        <CommunityContribute />
       </div>
     </section>
 
-    <section class="border-b border-border">
+    <section class="border-b border-border bg-card">
       <div class="container mx-auto">
-        <CommunityHowToContribute />
+        <CommunitySupport />
       </div>
     </section>
 
-    <section class="border-b border-border">
+    <section>
       <div class="container mx-auto">
-        <CommunityUpdates />
+        <CommunityCTA />
       </div>
     </section>
 
-    <section class="">
-      <div class="container mx-auto">
-        <UnderConstruction />
-      </div>
-    </section>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/Contribute.vue b/src/views/Contribute.vue
new file mode 100644
index 0000000..532826b
--- /dev/null
+++ b/src/views/Contribute.vue
@@ -0,0 +1,43 @@
+<script setup>
+import ContributeHero from '@/components/sections/contribute/ContributeHero.vue'
+import ContributeDonate from '@/components/sections/contribute/ContributeDonate.vue'
+import ContributeTransparency from '@/components/sections/contribute/ContributeTransparency.vue'
+import ContributeFuture from '@/components/sections/contribute/ContributeFuture.vue'
+import ContributeCTA from '@/components/sections/contribute/ContributeCTA.vue'
+</script>
+
+<template>
+  <div class="flex flex-col">
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ContributeHero />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ContributeDonate />
+      </div>
+    </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <ContributeTransparency />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ContributeFuture />
+      </div>
+    </section>
+
+    <section>
+      <div class="container mx-auto">
+        <ContributeCTA />
+      </div>
+    </section>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/views/Docs.vue b/src/views/Docs.vue
index c8ec2e3..634794d 100644
--- a/src/views/Docs.vue
+++ b/src/views/Docs.vue
@@ -1,16 +1,4 @@
 <script setup>
-import Card from "@/components/ui/Card.vue"
-import CardContent from "@/components/ui/CardContent.vue"
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent
-} from "radix-vue"
-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"
@@ -19,7 +7,7 @@ import UnderConstruction from "@/components/sections/UnderConstruction.vue"
 <template>
 
   <div class="flex flex-col">
-    <section class="border-b border-border">
+    <!-- <section class="border-b border-border">
       <div class="container mx-auto">
         <DocsHero />
       </div>
@@ -29,7 +17,7 @@ import UnderConstruction from "@/components/sections/UnderConstruction.vue"
       <div class="container mx-auto">
         <DocsQuickLinks />
       </div>
-    </section>
+    </section> -->
 
     <section class="">
       <div class="container mx-auto">
diff --git a/src/views/Downloads.vue b/src/views/Downloads.vue
index fd38333..eaf7cb7 100644
--- a/src/views/Downloads.vue
+++ b/src/views/Downloads.vue
@@ -1,35 +1,43 @@
 <script setup>
-import Card from "@/components/ui/Card.vue"
-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"
-
-
+import DownloadHero from '@/components/sections/downloads/DownloadHero.vue'
+import DownloadOptions from '@/components/sections/downloads/DownloadOptions.vue'
+import DownloadHowItWorks from '@/components/sections/downloads/DownloadHowItWorks.vue'
+import DownloadRequirements from '@/components/sections/downloads/DownloadRequirements.vue'
+import DownloadCTA from '@/components/sections/downloads/DownloadCTA.vue'
 </script>
 
 <template>
-
   <div class="flex flex-col">
-    <section class="">
+
+    <section class="border-b border-border">
       <div class="container mx-auto">
-        <DownloadsHero />
+        <DownloadHero />
       </div>
     </section>
 
-    <section class="">
+    <section class="border-b border-border">
       <div class="container mx-auto">
-        <SupportGettingStarted />
+        <DownloadOptions />
       </div>
     </section>
 
-    <section class="">
+    <section class="border-b border-border">
       <div class="container mx-auto">
-        <SupportNeedHelp />
+        <DownloadHowItWorks />
       </div>
     </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <DownloadRequirements />
+      </div>
+    </section>
+
+    <section>
+      <div class="container mx-auto">
+        <DownloadCTA />
+      </div>
+    </section>
+
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/FAQ.vue b/src/views/FAQ.vue
new file mode 100644
index 0000000..e7ec245
--- /dev/null
+++ b/src/views/FAQ.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
+<template>
+
+  <div class="flex flex-col">
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/GettingStarted.vue b/src/views/GettingStarted.vue
new file mode 100644
index 0000000..e7ec245
--- /dev/null
+++ b/src/views/GettingStarted.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
+<template>
+
+  <div class="flex flex-col">
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/Help.vue b/src/views/Help.vue
new file mode 100644
index 0000000..e7ec245
--- /dev/null
+++ b/src/views/Help.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
+<template>
+
+  <div class="flex flex-col">
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b181a44..1edeacd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,10 @@
 <script setup>
 import HomeHero from '@/components/sections/home/HomeHero.vue'
-import HomePlatform from '@/components/sections/home/HomePlatform.vue'
-import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
+import HomeWhatIs from '@/components/sections/home/HomeWhatIs.vue'
+import HomeCapabilities from '@/components/sections/home/HomeCapabilities.vue'
+import HomeModules from '@/components/sections/home/HomeModules.vue'
+import HomeArchitecture from '@/components/sections/home/HomeArchitecture.vue'
+import HomeDecentralization from '@/components/sections/home/HomeDecentralization.vue'
 import HomeEcosystem from '@/components/sections/home/HomeEcosystem.vue'
 import HomeCTA from '@/components/sections/home/HomeCTA.vue'
 </script>
@@ -17,13 +20,31 @@ import HomeCTA from '@/components/sections/home/HomeCTA.vue'
 
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <HomePlatform />
+        <HomeWhatIs />
       </div>
     </section>
 
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <HomePrinciples />
+        <HomeCapabilities />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeModules />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeArchitecture />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeDecentralization />
       </div>
     </section>
 
diff --git a/src/views/ModuleDetails.vue b/src/views/ModuleDetails.vue
new file mode 100644
index 0000000..5ea8d30
--- /dev/null
+++ b/src/views/ModuleDetails.vue
@@ -0,0 +1,43 @@
+<script setup>
+// import HomeHero from '@/components/sections/home/HomeHero.vue'
+// import HomePlatform from '@/components/sections/home/HomePlatform.vue'
+// import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
+// import HomeEcosystem from '@/components/sections/home/HomeEcosystem.vue'
+// import HomeCTA from '@/components/sections/home/HomeCTA.vue'
+</script>
+
+<template>
+  <!-- <div class="flex flex-col">
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeHero />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomePlatform />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomePrinciples />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeEcosystem />
+      </div>
+    </section>
+
+    <section>
+      <div class="container mx-auto">
+        <HomeCTA />
+      </div>
+    </section>
+
+  </div> -->
+</template>
\ No newline at end of file
diff --git a/src/views/Modules.vue b/src/views/Modules.vue
new file mode 100644
index 0000000..9d3e674
--- /dev/null
+++ b/src/views/Modules.vue
@@ -0,0 +1,55 @@
+<script setup>
+import ModulesHero from '@/components/sections/modules/ModulesHero.vue'
+import ModulesOverview from '@/components/sections/modules/ModulesOverview.vue'
+import ModulesCategories from '@/components/sections/modules/ModulesCategories.vue'
+import ModulesExamples from '@/components/sections/modules/ModulesExamples.vue'
+import ModulesHowTheyWork from '@/components/sections/modules/ModulesHowTheyWork.vue'
+import ModulesSecurity from '@/components/sections/modules/ModulesSecurity.vue'
+import ModulesCTA from '@/components/sections/modules/ModulesCTA.vue'
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ModulesHero />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ModulesOverview />
+      </div>
+    </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <ModulesCategories />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ModulesExamples />
+      </div>
+    </section>
+
+    <section class="border-b border-border bg-card">
+      <div class="container mx-auto">
+        <ModulesHowTheyWork />
+      </div>
+    </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <ModulesSecurity />
+      </div>
+    </section>
+
+    <section>
+      <div class="container mx-auto">
+        <ModulesCTA />
+      </div>
+    </section>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/views/Roadmap.vue b/src/views/Roadmap.vue
new file mode 100644
index 0000000..e7ec245
--- /dev/null
+++ b/src/views/Roadmap.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
+<template>
+
+  <div class="flex flex-col">
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/Security.vue b/src/views/Security.vue
new file mode 100644
index 0000000..e7ec245
--- /dev/null
+++ b/src/views/Security.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+import UnderConstruction from "@/components/sections/UnderConstruction.vue"
+</script>
+
+<template>
+
+  <div class="flex flex-col">
+
+    <section class="">
+      <div class="container mx-auto">
+        <UnderConstruction />
+      </div>
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/Support.vue b/src/views/Support.vue
deleted file mode 100644
index 3dedea8..0000000
--- a/src/views/Support.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup>
-import { ref } from "vue"
-import Card from "@/components/ui/Card.vue"
-import CardContent from "@/components/ui/CardContent.vue"
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent
-} from "radix-vue"
-import Button from "@/components/ui/Button.vue"
-import Input from "@/components/ui/Input.vue"
-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"
-
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <SupportHero />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <SupportQuickLinks />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <SupportFAQ />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <SupportVideos />
-      </div>
-    </section>
-
-    <section class="border-b border-border">
-      <div class="container mx-auto">
-        <SupportGettingStarted />
-      </div>
-    </section>
-
-    <section class="">
-      <div class="container mx-auto">
-        <SupportContactForm />
-      </div>
-    </section>
-
-    <section class="">
-      <div class="container mx-auto">
-        <UnderConstruction />
-      </div>
-    </section>
-  </div>
-</template>