NoSys pages initial commit

src/views/Home.vue

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