NoSys

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>