NoSys pages initial commit

src/components/FeatureCard.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300 hover:border-[#ff6b6b]/50 hover:shadow-lg hover:shadow-[#ff6b6b]/20">
-    <div class="w-12 h-12 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-[#ff6b6b]/30">
-      <component :is="icon" class="w-6 h-6 text-white" />
-    </div>
-    <h3 class="text-xl font-bold mb-2 text-white">{{ title }}</h3>
-    <p class="text-gray-300 leading-relaxed">{{ description }}</p>
-  </div>
-</template>
-<script setup>
-defineProps({
-  icon: Object,
-  title: String,
-  description: String,
-});
-</script>

src/components/Footer.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { RouterLink } from "vue-router"
+import { Github, Heart } from "lucide-vue-next"
+
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="border-t border-border bg-card">
+    <div class="container py-12">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <!-- 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>
+            <span class="font-bold text-lg">NoSys</span>
+          </div>
+          <p class="text-sm text-muted-foreground">
+            A social network no one can control. 100% decentralized.
+          </p>
+        </div>
+
+        <!-- Product -->
+        <div>
+          <h3 class="font-semibold mb-4">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>
+          </ul>
+        </div>
+
+        <!-- Resources -->
+        <div>
+          <h3 class="font-semibold mb-4">Resources</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="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Community
+              </RouterLink>
+            </li>
+            <li>
+              <RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Blog
+              </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="/community#donate"
+                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
+              >
+                <Heart class="h-4 w-4" />
+                Donate
+              </RouterLink>
+            </li>
+            <li>
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
+              >
+                <Github class="h-4 w-4" />
+                GitHub
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+        <p>© {{ currentYear }} NoSys. Open source and decentralized.</p>
+      </div>
+    </div>
+  </footer>
+</template>

src/components/Navbar.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import { Menu, X } from 'lucide-vue-next'
+
+import Button from '@/components/ui/Button.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" },
+]
+</script>
+
+<template>
+  <header
+    class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+  >
+    <div class="container flex h-16 items-center justify-between">
+      <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" />
+        </div>
+        <span class="font-bold text-lg">NoSys</span>
+      </RouterLink>
+
+      <!-- Desktop Navigation -->
+      <nav class="hidden md:flex items-center gap-6">
+        <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>
+
+      <div class="hidden md:flex items-center gap-4">
+        <Button>
+          <RouterLink to="/downloads">Download</RouterLink>
+        </Button>
+      </div>
+
+      <!-- Mobile Menu Button -->
+      <button
+        class="md:hidden"
+        @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>
+
+    <!-- Mobile Navigation -->
+    <div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
+      <nav class="container py-4 flex flex-col 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"
+          @click="mobileMenuOpen = false"
+        >
+          {{ link.label }}
+        </RouterLink>
+
+        <Button class="w-full">
+          <RouterLink to="/downloads">Download</RouterLink>
+        </Button>
+      </nav>
+    </div>
+  </header>
+</template>

src/components/ui/Card.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="rounded-2xl border bg-card text-card-foreground shadow-sm"
+    :class="customClass"
+  >
+    <slot>
+        
+    </slot>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  class: { type: String, default: "" }
+})
+
+const customClass = props.class
+</script>

src/components/ui/CardContent.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="p-6" :class="customClass">
+    <slot>
+        
+    </slot>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  class: { type: String, default: "" }
+})
+
+const customClass = props.class
+</script>

src/components/ui/Label.vue

@@ -0,0 +1,11 @@
+<template>
+  <label :for="for" class="block text-sm font-medium text-gray-700 mb-1">
+    <slot></slot>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  for: String
+})
+</script>

src/components/ui/TextArea.vue

@@ -0,0 +1,13 @@
+<template>
+  <textarea
+    :id="id"
+    v-bind="$attrs"
+    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
+  ></textarea>
+</template>
+
+<script setup>
+defineProps({
+  id: String
+})
+</script>