NoSys as platform

src/components/sections/hiw/HiwCore.vue

@@ -1,50 +1,140 @@
 <script setup>
 import Card from '@/components/ui/Card.vue'
 import CardContent from '@/components/ui/CardContent.vue'
-import { Zap, Server, FileText } from 'lucide-vue-next'
+
+import {
+  Search,
+  ServerCog,
+  Network,
+  Workflow
+} from 'lucide-vue-next'
 </script>
 
 <template>
+
   <section class="bg-card">
+
     <div class="container py-24">
-        
+
       <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
-        <p class="text-muted-foreground max-w-xl mx-auto">
-          NoSys empowers you to create decentralized networks with full control over communication rules, 
-          while providing tools to easily discover and connect with peers.
+
+        <div
+          class="inline-flex items-center px-3 py-1 text-sm
+                 rounded-full border border-border mb-6"
+        >
+          Infrastructure Layers
+        </div>
+
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Core Infrastructure
+        </h2>
+
+        <p class="text-muted-foreground max-w-3xl mx-auto text-lg">
+          NoSys provides foundational infrastructure components for
+          decentralized communication, peer coordination,
+          network management, and extensible distributed systems.
         </p>
+
       </div>
 
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-        
-        <Card class="border-2">
-          <CardContent class="p-8 text-center">
-            <div class="flex items-center justify-center mb-4">
-              <FileText class="h-10 w-10 text-primary" />
-            </div>
-            <h3 class="font-bold mb-2">Networks</h3>
-            <p class="text-sm text-muted-foreground">
-              Create your own networks and define the rules for how peers communicate within them. 
-              You control who can join and how information flows.
-            </p>
-          </CardContent>
-        </Card>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+
+        <!-- Peer Discovery -->
 
         <Card class="border-2">
-          <CardContent class="p-8 text-center">
-            <div class="flex items-center justify-center mb-4">
-              <Server class="h-10 w-10 text-primary" />
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Search class="h-10 w-10 text-primary" />
             </div>
-            <h3 class="font-bold mb-2">Rendezvous Servers</h3>
-            <p class="text-sm text-muted-foreground">
-              These central points help you find and connect to peers when you first join a network. 
-              They make peer discovery simple while keeping your interactions decentralized.
+
+            <h3 class="font-bold text-xl mb-3">
+              Peer Discovery
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Locate peers across decentralized environments and establish
+              communication paths between distributed nodes.
             </p>
+
           </CardContent>
+
         </Card>
+
+        <!-- Rendezvous -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <ServerCog class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Rendezvous Coordination
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Assist peers behind NATs and isolated networks in discovering
+              and connecting to each other across different environments.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
+        <!-- Network Management -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Network class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Network Management
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Create isolated decentralized sub-networks with independent peers,
+              communication rules, and coordination models.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
+        <!-- Event System -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Workflow class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Modular Event System
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Infrastructure components and modules communicate through observable
+              events, enabling extensibility and interoperability across the platform.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
       </div>
+
     </div>
+
   </section>
-</template>
+
+</template>