NoSys as platform

src/components/sections/home/HomePrinciples.vue

@@ -1,62 +1,84 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Shield, Unlock, Users } from 'lucide-vue-next';
-
+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">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>
+  <section class="container py-24">
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4">
+        Core Infrastructure Principles
+      </h2>
 
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-              <Shield class="h-6 w-6" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              End-to-end encryption ensures your data belongs only to you.
-              No corporate surveillance, no data mining, no third-party access.
-            </p>
-          </CardContent>
-        </Card>
+      <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
+        Built to reduce dependency on centralized systems
+      </p>
+    </div>
 
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-              <Unlock class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              You own your content, connections, and identity.
-              No platform can ban you, shadow ban you, or restrict your reach.
-            </p>
-          </CardContent>
-        </Card>
+    <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">
-              <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>
+      <Card class="border-2">
+        <CardContent class="pt-6">
 
-      </div>
-    </section>
+          <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>