NoSys as platform
This commit is contained in:
Lucas
@@ -21,7 +21,7 @@ const currentYear = new Date().getFullYear()
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-muted-foreground">
|
<p class="text-sm text-muted-foreground">
|
||||||
A social network no one can control.
|
Infrastructure for a Decentralized Future.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,29 +1,52 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Button from '@/components/ui/Button.vue';
|
import Button from '@/components/ui/Button.vue'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
|
|
||||||
|
|
||||||
<p class="text-xl text-muted-foreground">
|
<section>
|
||||||
Download the app and experience social media without corporate control.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
<div class="container py-24">
|
||||||
<RouterLink to="/downloads">
|
|
||||||
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">Download Now</Button>
|
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||||
</RouterLink>
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">
|
||||||
|
Explore the Platform
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground">
|
||||||
|
Build decentralized systems, experiment with peer-to-peer infrastructure,
|
||||||
|
and participate in the future of open networks.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
|
||||||
|
<RouterLink to="/downloads">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
class="bg-amber-400 hover:bg-amber-500 text-black"
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<RouterLink to="/docs">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
class="hover:text-amber-500"
|
||||||
|
>
|
||||||
|
Documentation
|
||||||
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
<RouterLink to="/how-it-works">
|
|
||||||
<Button size="lg" variant="outline" class="hover:text-amber-500">Learn How It Works</Button>
|
|
||||||
</RouterLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,20 +1,30 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24 md:py-32 text-center">
|
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
<section class="container py-24 md:py-32 text-center">
|
||||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
|
||||||
Taking Control Back from Big Tech
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
</h1>
|
|
||||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
|
||||||
In a world where social media platforms control what you see, what you can say,
|
Open Infrastructure for Decentralized Systems
|
||||||
and how your data is used, we're building something different.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<DotsMouse></DotsMouse>
|
|
||||||
</section>
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||||
|
Technology Should Belong to Its Users
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
|
||||||
|
Modern digital infrastructure is increasingly controlled by centralized corporations and platforms.
|
||||||
|
NoSys exists to provide an alternative: open, peer-to-peer infrastructure designed for decentralized systems and communities.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DotsMouse />
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Card from '@/components/ui/Card.vue';
|
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
|
||||||
import { Target } from 'lucide-vue-next';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section class="">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
||||||
<Card class="border-2 order-2 lg:order-1">
|
|
||||||
<CardContent class="p-8">
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">No Central Authority</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Peer-to-peer connections remove central control
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">End-to-End Encryption</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Communications secured and private
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">User Ownership</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
You own your identity and data
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">Open Source</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Transparency through open code
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div class="order-1 lg:order-2">
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
|
|
||||||
text-primary rounded-full border border-primary/20 mb-6"
|
|
||||||
>
|
|
||||||
<Target class="h-4 w-4" />
|
|
||||||
Our Mission
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Giving Control Back to Users
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
|
||||||
<p>
|
|
||||||
We're building a social network based on privacy, free expression and autonomy.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="text-lg font-semibold text-foreground">
|
|
||||||
A truly peer-to-peer network where no one can censor or exploit you.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Decentralization + encryption + open source = independence.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
@@ -1,67 +1,99 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { Zap } from 'lucide-vue-next';
|
|
||||||
|
import { Zap } from 'lucide-vue-next'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="bg-card">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
|
|
||||||
text-accent rounded-full border border-accent/20 mb-6"
|
|
||||||
>
|
|
||||||
<Zap class="h-4 w-4" />
|
|
||||||
Technology
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
<section class="bg-card">
|
||||||
Built on Modern Peer-to-Peer Technology
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-xl text-muted-foreground">
|
<div class="container py-24">
|
||||||
Designed with contemporary decentralized architectures to deliver privacy, resilience, and reliable communication without central dependencies.
|
|
||||||
</p>
|
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center gap-2 px-3 py-1 text-sm
|
||||||
|
bg-accent/10 text-accent rounded-full
|
||||||
|
border border-accent/20 mb-6"
|
||||||
|
>
|
||||||
|
<Zap class="h-4 w-4" />
|
||||||
|
Architecture
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
<Card>
|
Built as Decentralized Infrastructure
|
||||||
<CardContent class="pt-6">
|
</h2>
|
||||||
<h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
|
|
||||||
<p class="text-muted-foreground leading-relaxed">
|
|
||||||
Direct peer communication without servers.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
<p class="text-xl text-muted-foreground">
|
||||||
<CardContent class="pt-6">
|
noSys provides foundational peer-to-peer components for building distributed systems and decentralized applications.
|
||||||
<h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
|
</p>
|
||||||
<p class="text-muted-foreground leading-relaxed">
|
|
||||||
End-to-end encrypted data.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent class="pt-6">
|
|
||||||
<h3 class="text-xl font-bold mb-3">Modular Design</h3>
|
|
||||||
<p class="text-muted-foreground leading-relaxed">
|
|
||||||
Expand with community modules.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent class="pt-6">
|
|
||||||
<h3 class="text-xl font-bold mb-3">Distributed Network</h3>
|
|
||||||
<p class="text-muted-foreground leading-relaxed">
|
|
||||||
No servers to shut down, no central database to hack.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent class="pt-6">
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-3">
|
||||||
|
Peer Discovery
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground leading-relaxed">
|
||||||
|
Mechanisms for discovering and connecting peers across decentralized networks.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent class="pt-6">
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-3">
|
||||||
|
Rendezvous Infrastructure
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground leading-relaxed">
|
||||||
|
Coordination systems for establishing peer communication across different network environments.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent class="pt-6">
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-3">
|
||||||
|
Modular Runtime
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground leading-relaxed">
|
||||||
|
Build independent decentralized applications on shared infrastructure components.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent class="pt-6">
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-3">
|
||||||
|
Distributed Communication
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground leading-relaxed">
|
||||||
|
Direct peer communication without mandatory centralized routing.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,109 +1,124 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { AlertCircle } from 'lucide-vue-next';
|
|
||||||
|
|
||||||
|
|
||||||
|
import { AlertCircle } from 'lucide-vue-next'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class=" bg-card">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
|
|
||||||
text-destructive rounded-full border border-destructive/20 mb-6"
|
|
||||||
>
|
|
||||||
<AlertCircle class="h-4 w-4" />
|
|
||||||
The Problem of Centralization
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
<section class="bg-card">
|
||||||
Centralized Platforms Are Broken
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
<div class="container py-24">
|
||||||
<p>
|
|
||||||
Today's social media landscape is dominated by centralized corporations that
|
|
||||||
control the digital lives of billions and operate under state jurisdiction.
|
|
||||||
These platforms:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul class="space-y-2 list-disc list-inside">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
<li>Censor content based on opaque algorithms and legal pressure</li>
|
|
||||||
<li>Are subject to state laws, regulations, and political influence</li>
|
|
||||||
<li>Surveil users and track every interaction</li>
|
|
||||||
<li>Sell personal data as a business model</li>
|
|
||||||
<li>Manipulate visibility through proprietary algorithms</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
<div>
|
||||||
When communication infrastructure is centralized and bound by state authority,
|
|
||||||
true freedom of expression becomes structurally impossible.
|
<div
|
||||||
</p>
|
class="inline-flex items-center gap-2 px-3 py-1 text-sm
|
||||||
</div>
|
bg-destructive/10 text-destructive rounded-full
|
||||||
|
border border-destructive/20 mb-6"
|
||||||
|
>
|
||||||
|
<AlertCircle class="h-4 w-4" />
|
||||||
|
The Centralization Problem
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card class="border-2">
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
<CardContent class="p-8">
|
Critical Infrastructure Is Becoming Centralized
|
||||||
<div class="space-y-6 ">
|
</h2>
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">Censorship</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Arbitrary content removal without transparency
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">Surveillance</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Constant tracking of user activities
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
<p>
|
||||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
|
Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
|
||||||
<div>
|
</p>
|
||||||
<h3 class="font-semibold mb-1">Data Exploitation</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Personal information sold as a commodity
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
<p>
|
||||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
As technology becomes more integrated into everyday life, centralized control over infrastructure creates structural dependency on entities users cannot govern or audit.
|
||||||
<div>
|
</p>
|
||||||
<h3 class="font-semibold mb-1">Algorithmic Control</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Manipulation of what content you see
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
NoSys was created to explore a different direction:
|
||||||
|
decentralized systems where coordination happens directly between participants instead of through centralized intermediaries.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="flex items-start gap-4">
|
</div>
|
||||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-1">State Dependency</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
User expression limited by government authority
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Card class="border-2">
|
||||||
|
|
||||||
|
<CardContent class="p-8">
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Infrastructure Dependency
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Critical systems increasingly rely on centralized providers
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Platform Control
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Access, visibility, and communication controlled by private entities
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Data Concentration
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Massive amounts of user data aggregated into centralized systems
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Single Points of Failure
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Centralized architecture creates systemic fragility
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
37
src/components/sections/about/AboutVision.vue
Normal file
37
src/components/sections/about/AboutVision.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="container py-24">
|
||||||
|
|
||||||
|
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||||
|
|
||||||
|
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border">
|
||||||
|
Long-Term Vision
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold text-balance">
|
||||||
|
Decentralization
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||||
|
Future systems may include communication networks, collaborative platforms,
|
||||||
|
autonomous machine coordination, distributed communities, and applications
|
||||||
|
that do not yet exist.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-lg text-muted-foreground leading-relaxed">
|
||||||
|
NoSys is designed as foundational infrastructure for that future —
|
||||||
|
open, adaptable, and owned by no single corporation or institution.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</template>
|
||||||
125
src/components/sections/about/AboutWhy.vue
Normal file
125
src/components/sections/about/AboutWhy.vue
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<script setup>
|
||||||
|
import Card from '@/components/ui/Card.vue'
|
||||||
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
|
|
||||||
|
import { Compass } from 'lucide-vue-next'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="container py-24">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
|
||||||
|
<Card class="border-2 order-2 lg:order-1">
|
||||||
|
|
||||||
|
<CardContent class="p-8">
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Open Source
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Transparent infrastructure that can be audited, modified, and evolved by the community
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Peer Coordination
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Systems communicate directly without mandatory centralized intermediaries
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Modular Infrastructure
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Different decentralized applications can coexist on shared infrastructure
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-1">
|
||||||
|
Community Ownership
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Infrastructure designed to reduce dependence on centralized institutional control
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div class="order-1 lg:order-2">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center gap-2 px-3 py-1 text-sm
|
||||||
|
bg-primary/10 text-primary rounded-full
|
||||||
|
border border-primary/20 mb-6"
|
||||||
|
>
|
||||||
|
<Compass class="h-4 w-4" />
|
||||||
|
Why noSys Exists
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Building Infrastructure That Cannot Be Owned by a Single Entity
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
NoSys is an experiment in decentralized coordination infrastructure.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The objective is not simply to create applications,
|
||||||
|
but to provide foundations for systems that remain open,
|
||||||
|
resilient, and community-driven over time.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-lg font-semibold text-foreground">
|
||||||
|
Protocols instead of platforms. Coordination instead of control.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</template>
|
||||||
@@ -1,18 +1,28 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24 md:py-32">
|
<section class="container py-24 md:py-32">
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
|
||||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
<p class="text-xl text-muted-foreground">
|
|
||||||
Connect with developers, contributors, and users who are building the future of decentralized social media
|
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
|
||||||
|
Open Source Infrastructure • Peer-to-Peer Systems • Modular Runtime
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||||
|
Build and Contribute to NoSys
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
|
||||||
|
NoSys is an open infrastructure platform for decentralized systems.
|
||||||
|
Join as a developer, contributor, or operator building peer-to-peer applications and modules on top of the runtime.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DotsMouse></DotsMouse>
|
<DotsMouse />
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,94 +1,141 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Button from '@/components/ui/Button.vue';
|
import Button from '@/components/ui/Button.vue'
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { Github, Heart, Wallet } from 'lucide-vue-next';
|
import { Heart, Wallet, Github } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section id="donate" class="bg-primary/5">
|
<section id="donate" class="bg-primary/5">
|
||||||
<div class="container py-24">
|
|
||||||
<div class="max-w-3xl mx-auto">
|
<div class="container py-24">
|
||||||
<div class="flex items-center gap-3 mb-8 justify-center">
|
|
||||||
<Heart class="h-8 w-8 text-primary" />
|
<div class="max-w-3xl mx-auto">
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
|
|
||||||
</div>
|
<!-- Header -->
|
||||||
<div class="text-center mb-8">
|
|
||||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
<div class="text-center mb-10">
|
||||||
NoSys is a 100% open-source project built by volunteers who believe in a free and decentralized
|
|
||||||
internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
|
<div class="flex items-center justify-center gap-3 mb-4">
|
||||||
</p>
|
<Heart class="h-7 w-7 text-primary" />
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">
|
||||||
|
Support Development
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-center mb-12">
|
<p class="text-muted-foreground text-lg leading-relaxed">
|
||||||
<Button size="lg" class="text-lg px-8 py-6 h-auto">
|
NoSys is open-source infrastructure built to support decentralized systems.
|
||||||
<Heart class="h-5 w-5 mr-2" />
|
Contributions help fund development, testing, and long-term protocol maintenance.
|
||||||
Support Our Mission
|
</p>
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-1 gap-6">
|
|
||||||
<!-- <Card class="border-2">
|
|
||||||
<CardContent class="pt-6">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
|
||||||
<Github class="h-6 w-6 text-primary" />
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
|
|
||||||
<p class="text-muted-foreground text-sm mb-4">
|
|
||||||
Support us directly through GitHub's sponsorship program
|
|
||||||
</p>
|
|
||||||
<Button variant="outline" class="w-full bg-transparent">
|
|
||||||
<a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
|
|
||||||
Sponsor on GitHub
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Card class="border-2">
|
|
||||||
<CardContent class="pt-6">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
|
||||||
<Wallet class="h-6 w-6 text-primary" />
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Crypto</h3>
|
|
||||||
<p class="text-muted-foreground text-sm mb-4">
|
|
||||||
Donate using Bitcoin, Ethereum, or other cryptocurrencies
|
|
||||||
</p>
|
|
||||||
<Button variant="outline" class="w-full bg-transparent">
|
|
||||||
<a href="#crypto-wallets">View Wallets</a>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Crypto Wallets -->
|
|
||||||
<div class="mt-12 p-6 bg-card rounded-lg border border-border">
|
|
||||||
<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
|
|
||||||
<Wallet class="h-5 w-5 text-primary" />
|
|
||||||
Cryptocurrency Wallets
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-4" id="crypto-wallets">
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
|
|
||||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
|
||||||
bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-muted-foreground mt-4">
|
|
||||||
All donations go directly to supporting development, infrastructure, and community initiatives. Thank
|
|
||||||
you for your support!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
|
||||||
|
<div class="flex justify-center mb-12">
|
||||||
|
|
||||||
|
<Button size="lg" class="text-lg px-8 py-6 h-auto">
|
||||||
|
<Heart class="h-5 w-5 mr-2" />
|
||||||
|
Contribute
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Support Options -->
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
|
||||||
|
<!-- GitHub -->
|
||||||
|
|
||||||
|
<Card class="border-2">
|
||||||
|
|
||||||
|
<CardContent class="pt-6 text-center">
|
||||||
|
|
||||||
|
<div class="flex justify-center mb-4">
|
||||||
|
<Github class="h-10 w-10 text-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-2">
|
||||||
|
Open Source Contributions
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground text-sm mb-5">
|
||||||
|
Contribute code, review modules, or support development through GitHub.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Button variant="outline" class="w-full bg-transparent">
|
||||||
|
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
|
||||||
|
View Repository
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Crypto -->
|
||||||
|
|
||||||
|
<Card class="border-2">
|
||||||
|
|
||||||
|
<CardContent class="pt-6 text-center">
|
||||||
|
|
||||||
|
<div class="flex justify-center mb-4">
|
||||||
|
<Wallet class="h-10 w-10 text-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-xl font-bold mb-2">
|
||||||
|
Cryptocurrency Funding
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground text-sm mb-5">
|
||||||
|
Direct contributions via crypto wallets for protocol and infrastructure development.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Button variant="outline" class="w-full bg-transparent">
|
||||||
|
<a href="#crypto-wallets">
|
||||||
|
View Wallets
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallets -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="crypto-wallets"
|
||||||
|
class="mt-12 p-6 bg-card rounded-lg border border-border"
|
||||||
|
>
|
||||||
|
|
||||||
|
<h3 class="text-lg font-bold mb-6 flex items-center gap-2">
|
||||||
|
<Wallet class="h-5 w-5 text-primary" />
|
||||||
|
Funding Wallets
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
|
||||||
|
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||||
|
bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-xs text-muted-foreground mt-4">
|
||||||
|
Contributions are used for core development, protocol research,
|
||||||
|
and infrastructure maintenance.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
71
src/components/sections/hiw/HiwAppLayer.vue
Normal file
71
src/components/sections/hiw/HiwAppLayer.vue
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<script setup>
|
||||||
|
import { Layers, Globe, MessageSquare, Bot, Network } from "lucide-vue-next"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="bg-card">
|
||||||
|
<div class="container py-24">
|
||||||
|
|
||||||
|
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||||
|
|
||||||
|
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
|
||||||
|
Application Layer
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
What You Can Build on NoSys
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground">
|
||||||
|
NoSys is infrastructure. Applications are built independently on top of it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
|
||||||
|
<div class="p-6 border rounded-xl bg-background">
|
||||||
|
<MessageSquare class="h-8 w-8 text-primary mb-4" />
|
||||||
|
<h3 class="font-semibold mb-2">Communication Systems</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Messaging, chat, and real-time coordination built directly on peer-to-peer transport.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 border rounded-xl bg-background">
|
||||||
|
<Globe class="h-8 w-8 text-primary mb-4" />
|
||||||
|
<h3 class="font-semibold mb-2">Distributed Networks</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Social graphs, communities, and collaborative environments without centralized servers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 border rounded-xl bg-background">
|
||||||
|
<Network class="h-8 w-8 text-primary mb-4" />
|
||||||
|
<h3 class="font-semibold mb-2">Coordination Systems</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Multi-node systems for synchronization, data sharing, and distributed workflows.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 border rounded-xl bg-background">
|
||||||
|
<Bot class="h-8 w-8 text-primary mb-4" />
|
||||||
|
<h3 class="font-semibold mb-2">Autonomous Agents</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Machine-to-machine networks and AI-driven coordination layers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 border rounded-xl bg-background">
|
||||||
|
<Layers class="h-8 w-8 text-primary mb-4" />
|
||||||
|
<h3 class="font-semibold mb-2">Modular Systems</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Extensible applications composed of independent interoperable modules.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
@@ -1,31 +1,40 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Button from '@/components/ui/Button.vue';
|
import Button from '@/components/ui/Button.vue'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="bg-card">
|
<section>
|
||||||
<div class="container py-24">
|
<div class="container py-24">
|
||||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">
|
|
||||||
Ready to Experience True P2P?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-muted-foreground">
|
|
||||||
Download the app and see decentralized social networking in action
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">
|
||||||
|
Build on the Infrastructure
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground">
|
||||||
|
Explore NoSys, run it locally, and start building decentralized systems on top of peer-to-peer infrastructure.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
|
||||||
|
<RouterLink to="/downloads">
|
||||||
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">
|
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">
|
||||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
Download
|
||||||
</Button>
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<RouterLink to="/documentation">
|
||||||
<Button size="lg" variant="outline" class="hover:text-amber-500">
|
<Button size="lg" variant="outline" class="hover:text-amber-500">
|
||||||
<RouterLink to="/documentation">Read Documentation</RouterLink>
|
Documentation
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</RouterLink>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,50 +1,140 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue'
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<section class="bg-card">
|
<section class="bg-card">
|
||||||
|
|
||||||
<div class="container py-24">
|
<div class="container py-24">
|
||||||
|
|
||||||
<div class="text-center mb-16">
|
<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">
|
<div
|
||||||
NoSys empowers you to create decentralized networks with full control over communication rules,
|
class="inline-flex items-center px-3 py-1 text-sm
|
||||||
while providing tools to easily discover and connect with peers.
|
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>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
||||||
|
<!-- Peer Discovery -->
|
||||||
<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>
|
|
||||||
|
|
||||||
<Card class="border-2">
|
<Card class="border-2">
|
||||||
<CardContent class="p-8 text-center">
|
|
||||||
<div class="flex items-center justify-center mb-4">
|
<CardContent class="p-8">
|
||||||
<Server class="h-10 w-10 text-primary" />
|
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<Search class="h-10 w-10 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="font-bold mb-2">Rendezvous Servers</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
<h3 class="font-bold text-xl mb-3">
|
||||||
These central points help you find and connect to peers when you first join a network.
|
Peer Discovery
|
||||||
They make peer discovery simple while keeping your interactions decentralized.
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-muted-foreground leading-relaxed">
|
||||||
|
Locate peers across decentralized environments and establish
|
||||||
|
communication paths between distributed nodes.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
||||||
</Card>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
|
||||||
|
</template>
|
||||||
@@ -1,84 +1,127 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { Lock } from 'lucide-vue-next';
|
|
||||||
|
import {
|
||||||
|
KeyRound,
|
||||||
|
ShieldCheck
|
||||||
|
} from 'lucide-vue-next'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
||||||
|
|
||||||
<Card class="border-2 order-2 lg:order-1">
|
<section>
|
||||||
<CardContent class="p-8">
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-2">End-to-End Encryption</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Messages are protected from the moment they leave your device
|
|
||||||
until they reach the intended recipient.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div class="container py-24">
|
||||||
<h3 class="font-semibold mb-2">Key-Based Identity</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Your identity is represented by cryptographic keys stored locally,
|
|
||||||
not by accounts managed on central servers.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
<h3 class="font-semibold mb-2">Public Verification</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Public keys allow others to verify interactions without accessing
|
|
||||||
private information.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<!-- LEFT CARD -->
|
||||||
<h3 class="font-semibold mb-2">Decentralized Trust</h3>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Trust is established through cryptography, not through a single authority.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<Card class="border-2 order-2 lg:order-1">
|
||||||
</CardContent>
|
|
||||||
</Card>
|
<CardContent class="p-8">
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">
|
||||||
|
Local Key Ownership
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Cryptographic keys are generated and stored locally,
|
||||||
|
allowing peers to control their own identity and authentication.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">
|
||||||
|
Decentralized Identity
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Identity is represented through cryptographic credentials
|
||||||
|
instead of centralized account systems.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">
|
||||||
|
Signed Interactions
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Peers can verify the authenticity and integrity of
|
||||||
|
communications through cryptographic signatures.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">
|
||||||
|
Encrypted Communication
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Data exchanged between peers can be protected through
|
||||||
|
end-to-end encryption mechanisms.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Right Text -->
|
|
||||||
<div class="order-1 lg:order-2">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
|
||||||
<Lock class="h-4 w-4" />
|
|
||||||
Security
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
</CardContent>
|
||||||
Encryption You Control
|
|
||||||
</h2>
|
</Card>
|
||||||
|
|
||||||
|
<!-- RIGHT CONTENT -->
|
||||||
|
|
||||||
|
<div class="order-1 lg:order-2">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center gap-2 px-3 py-1 text-sm
|
||||||
|
bg-primary/10 text-primary rounded-full
|
||||||
|
border border-primary/20 mb-6"
|
||||||
|
>
|
||||||
|
<KeyRound class="h-4 w-4" />
|
||||||
|
Identity & Cryptography
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Distributed Identity Secured by Cryptography
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||||
|
|
||||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
|
||||||
<p>
|
|
||||||
Security is not a feature — it is the foundation of the network.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Each user has a private key that stays on their device.
|
|
||||||
This key represents your identity and is used to securely sign and protect
|
|
||||||
your interactions on the network.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Public keys allow others to verify your identity and exchange information
|
|
||||||
with you safely, without revealing your private data.
|
|
||||||
</p>
|
|
||||||
<p>
|
<p>
|
||||||
Instead of relying on centralized databases of passwords,
|
NoSys uses cryptographic identity systems instead of centralized
|
||||||
identity is managed locally through cryptographic keys that you own.
|
account management infrastructure.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
|
<p>
|
||||||
|
Each peer controls their own private keys locally,
|
||||||
|
allowing authentication, verification, and secure communication
|
||||||
|
without depending on centralized identity providers.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Public keys enable peers to verify interactions and establish trust
|
||||||
|
relationships across decentralized environments.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This model reduces dependency on centralized credential storage
|
||||||
|
while enabling secure peer coordination and encrypted communication.
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,19 +1,38 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24 md:py-32">
|
<section class="container py-24 md:py-32">
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
|
||||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
How NoSys Works
|
|
||||||
</h1>
|
<div
|
||||||
<p class="text-xl text-muted-foreground">
|
class="inline-flex items-center px-3 py-1 text-sm rounded-full
|
||||||
Understanding the technology that makes decentralized social networking possible
|
border border-border mb-6"
|
||||||
</p>
|
>
|
||||||
|
Distributed Systems • Peer-to-Peer • Modular Runtime
|
||||||
</div>
|
</div>
|
||||||
<DotsMouse></DotsMouse>
|
|
||||||
</section>
|
<h1
|
||||||
|
class="text-4xl md:text-5xl lg:text-6xl
|
||||||
|
font-bold mb-6 text-balance"
|
||||||
|
>
|
||||||
|
How NoSys Works
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p
|
||||||
|
class="text-xl text-muted-foreground
|
||||||
|
leading-relaxed max-w-3xl mx-auto"
|
||||||
|
>
|
||||||
|
Understanding the peer-to-peer infrastructure,
|
||||||
|
distributed coordination systems, and modular runtime
|
||||||
|
architecture behind noSys.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DotsMouse />
|
||||||
|
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Box, Key, Cpu, Server, File, Users, Lock, Cable, AppWindowMac, FileBox, MessageSquareLock, MessageSquareQuote } from "lucide-vue-next"
|
import { Box, Key, Cpu, Server, FileBox, AppWindowMac } from "lucide-vue-next"
|
||||||
import {
|
import {
|
||||||
AccordionRoot,
|
AccordionRoot,
|
||||||
AccordionItem,
|
AccordionItem,
|
||||||
@@ -9,129 +9,106 @@ import {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="">
|
<section>
|
||||||
<div class="container py-24">
|
<div class="container py-24">
|
||||||
|
|
||||||
|
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||||
|
|
||||||
|
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
|
||||||
|
Runtime Architecture
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Modular System Components
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground">
|
||||||
|
noSys is composed of independent runtime modules that handle networking,
|
||||||
|
identity, coordination, and system-level operations.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
|
||||||
|
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||||
|
|
||||||
|
<AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<Box class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">FSPN (Core Protocol)</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Core peer communication protocol responsible for message transport and distributed connectivity across nodes.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<Key class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">LockBox</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Local cryptographic identity and key management system.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="core" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<Cpu class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">noSys Core</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Coordinates peers, modules, runtime state, and system services across the platform.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<Server class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">Rendezvous Layer</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Coordination layer that assists peers in discovering and establishing connections across network boundaries.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<FileBox class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">Distributed File Transfer</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Secure peer-to-peer file exchange infrastructure.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="ui" class="border rounded-lg px-6 bg-card">
|
||||||
|
<AccordionTrigger class="hover:no-underline">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<AppWindowMac class="h-5 w-5 text-primary" />
|
||||||
|
<span class="font-semibold">Local UI Runtime</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||||
|
Interface layer where modules expose decentralized application interfaces running locally on each node.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
</AccordionRoot>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Modular Architecture</h2>
|
|
||||||
<p class="text-xl text-muted-foreground">
|
|
||||||
NoSys is built with independent modules. Some come by default, and the community can add more.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="max-w-4xl mx-auto">
|
</template>
|
||||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
|
||||||
|
|
||||||
<AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Box class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">FSPN</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
The Free Speech Protocol Network handles the basic connections between users, ensuring everyone can communicate freely.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Key class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">LockBox</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
Manages your private and public keys, keeping your identity and data secure.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="nosys-core" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Cpu class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">NoSys Core</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
The heart of the platform: manages peers, connections, settings, servers, and modules.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="api" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Cable class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">API</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
Handles the endpoints that modules expose, allowing secure communication and integration.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="vuernosys" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<AppWindowMac class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">VueNoSys</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
The browser-based front-end: modules provide their interfaces here, all running locally.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Server class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">Rendezvous</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
Helps users and servers find each other, simplifying initial connections.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<FileBox class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">FileTransfer</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
Securely manages file transfers, ensuring reliability and privacy.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="p2post" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<MessageSquareQuote class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">P2Post</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
The social network module: creates networks, manages posts, profiles, friends, and network rules.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem value="p2private" class="border rounded-lg px-6 bg-card">
|
|
||||||
<AccordionTrigger class="hover:no-underline">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<MessageSquareLock class="h-5 w-5 text-primary" />
|
|
||||||
<span class="font-semibold">P2Private</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
|
||||||
Focused on private communication between you and your contacts, keeping messages secure.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
</AccordionRoot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
@@ -1,81 +1,189 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { Network } from 'lucide-vue-next';
|
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
Network,
|
||||||
|
Server,
|
||||||
|
Router,
|
||||||
|
Globe
|
||||||
|
} from 'lucide-vue-next'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="bg-card">
|
|
||||||
<div class="container py-24">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
||||||
|
|
||||||
<!-- Left Text -->
|
<section class="bg-card">
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
|
||||||
<Network class="h-4 w-4" />
|
|
||||||
Peer-to-Peer
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
<div class="container py-24">
|
||||||
Direct Connections, No Middlemen
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
<p>
|
|
||||||
In traditional social media, all your data flows through corporate servers...
|
<!-- LEFT CONTENT -->
|
||||||
</p>
|
|
||||||
<p>
|
<div>
|
||||||
<strong class="text-foreground">
|
|
||||||
With P2P, you connect directly to other users.
|
<div
|
||||||
</strong>
|
class="inline-flex items-center gap-2 px-3 py-1 text-sm
|
||||||
</p>
|
bg-primary/10 text-primary rounded-full
|
||||||
<p>
|
border border-primary/20 mb-6"
|
||||||
This architecture makes the network censorship-resistant and resilient...
|
>
|
||||||
</p>
|
<Network class="h-4 w-4" />
|
||||||
</div>
|
Distributed Networking
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card class="border-2">
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
<CardContent class="p-8">
|
Peer Coordination Without Centralized Infrastructure
|
||||||
<div class="space-y-8">
|
</h2>
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
|
|
||||||
<div class="flex items-center justify-center gap-4">
|
|
||||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
|
||||||
<div class="text-muted-foreground">→</div>
|
|
||||||
<div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
|
|
||||||
Server
|
|
||||||
</div>
|
|
||||||
<div class="text-muted-foreground">→</div>
|
|
||||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-muted-foreground mt-4">
|
|
||||||
All data flows through corporate servers
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||||
<h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
|
|
||||||
<div class="flex items-center justify-center gap-4">
|
<p>
|
||||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
Traditional applications route communication through centralized infrastructure,
|
||||||
Peer
|
creating dependency on providers that control connectivity,
|
||||||
</div>
|
coordination, and access.
|
||||||
<div class="text-primary">↔</div>
|
</p>
|
||||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
|
||||||
Peer
|
<p>
|
||||||
</div>
|
NoSys enables peers to discover and communicate directly using
|
||||||
</div>
|
decentralized networking and coordination mechanisms.
|
||||||
<p class="text-sm text-muted-foreground mt-4">
|
</p>
|
||||||
Direct connections between users
|
|
||||||
</p>
|
<p>
|
||||||
</div>
|
Rendezvous services assist peers in locating each other and establishing
|
||||||
</div>
|
communication paths across different network environments,
|
||||||
</CardContent>
|
while peer-to-peer communication reduces dependency on centralized intermediaries.
|
||||||
</Card>
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This architecture allows decentralized systems to remain resilient,
|
||||||
|
modular, and adaptable across different types of applications.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT CARD -->
|
||||||
|
|
||||||
|
<Card class="border-2">
|
||||||
|
|
||||||
|
<CardContent class="p-8">
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
|
||||||
|
<!-- Traditional -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<Server class="h-5 w-5 text-destructive" />
|
||||||
|
|
||||||
|
<h3 class="font-semibold text-destructive">
|
||||||
|
Traditional Architecture
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-4">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-12 w-12 rounded-full bg-muted
|
||||||
|
flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
Client
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-muted-foreground">
|
||||||
|
→
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-16 w-16 rounded-lg
|
||||||
|
bg-destructive/20 border-2 border-destructive
|
||||||
|
flex items-center justify-center text-xs text-center"
|
||||||
|
>
|
||||||
|
Central
|
||||||
|
Server
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-muted-foreground">
|
||||||
|
→
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-12 w-12 rounded-full bg-muted
|
||||||
|
flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
Client
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground mt-4">
|
||||||
|
Communication depends on centralized coordination infrastructure
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Distributed -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<Globe class="h-5 w-5 text-primary" />
|
||||||
|
|
||||||
|
<h3 class="font-semibold text-primary">
|
||||||
|
Distributed Architecture
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-3 flex-wrap">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-12 w-12 rounded-full
|
||||||
|
bg-primary/20 border-2 border-primary
|
||||||
|
flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
Peer
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Router class="h-4 w-4 text-primary" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-12 w-12 rounded-full
|
||||||
|
bg-primary/20 border-2 border-primary
|
||||||
|
flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
Peer
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Router class="h-4 w-4 text-primary" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="h-12 w-12 rounded-full
|
||||||
|
bg-primary/20 border-2 border-primary
|
||||||
|
flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
Peer
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-muted-foreground mt-4">
|
||||||
|
Peers coordinate directly through distributed networking
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,20 +1,32 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { RouterLink } from 'vue-router'
|
import { RouterLink } from 'vue-router'
|
||||||
import Button from '@/components/ui/Button.vue';
|
import Button from '@/components/ui/Button.vue'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24">
|
<section class="container py-24">
|
||||||
<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>
|
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||||
<p class="text-xl text-muted-foreground">
|
|
||||||
Download our app and experience a social network built for freedom, not profit.
|
<h2 class="text-3xl md:text-4xl font-bold">
|
||||||
</p>
|
Start Building Decentralized Systems
|
||||||
<Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
|
</h2>
|
||||||
<RouterLink to="/downloads">Get Started</RouterLink>
|
|
||||||
</Button>
|
<p class="text-xl text-muted-foreground">
|
||||||
</div>
|
Explore the platform, connect peers, and build applications
|
||||||
</section>
|
without centralized infrastructure.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
|
||||||
|
>
|
||||||
|
<RouterLink to="/downloads">
|
||||||
|
Get Started
|
||||||
|
</RouterLink>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
43
src/components/sections/home/HomeEcosystem.vue
Normal file
43
src/components/sections/home/HomeEcosystem.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<script setup>
|
||||||
|
const items = [
|
||||||
|
'Social Networks',
|
||||||
|
'Encrypted Messaging',
|
||||||
|
'File Distribution',
|
||||||
|
'IoT Networks',
|
||||||
|
'Autonomous Systems',
|
||||||
|
'Collaborative Platforms',
|
||||||
|
'Distributed Communities',
|
||||||
|
'Future Decentralized Applications'
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="container py-24">
|
||||||
|
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Build Anything on Top
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
NoSys is designed as infrastructure for decentralized ecosystems,
|
||||||
|
enabling entirely different categories of peer-to-peer applications.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item"
|
||||||
|
class="border rounded-xl p-6 text-center bg-card hover:border-primary transition-colors"
|
||||||
|
>
|
||||||
|
<p class="font-medium">
|
||||||
|
{{ item }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
@@ -1,40 +1,58 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { RouterLink } from 'vue-router'
|
import { RouterLink } from 'vue-router'
|
||||||
import Button from '@/components/ui/Button.vue';
|
import Button from '@/components/ui/Button.vue'
|
||||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24 md:py-32 lg:py-40">
|
<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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
<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">
|
<div class="space-y-6">
|
||||||
A Social Network Built for Free Expression
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-muted-foreground text-pretty">
|
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||||
A peer-to-peer social network designed to keep communication open,
|
Open Source • Peer-to-Peer • Decentralized
|
||||||
transparent, and user-controlled.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4">
|
|
||||||
<Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
|
|
||||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button variant="outline" size="lg" class="text-lg px-8 bg-transparent hover:text-amber-500">
|
|
||||||
<RouterLink to="/how-it-works">Learn More</RouterLink>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<DotsMouse></DotsMouse>
|
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||||
|
Infrastructure for a Decentralized Future
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground text-pretty max-w-2xl">
|
||||||
|
NoSys is a peer-to-peer platform for building decentralized systems.
|
||||||
|
Create social networks, communication platforms, autonomous networks,
|
||||||
|
distributed applications, and future technologies without relying on centralized infrastructure.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
|
||||||
|
>
|
||||||
|
<RouterLink to="/downloads">
|
||||||
|
Download
|
||||||
|
</RouterLink>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
class="text-lg px-8 bg-transparent hover:text-amber-500"
|
||||||
|
>
|
||||||
|
<RouterLink to="/docs">
|
||||||
|
Documentation
|
||||||
|
</RouterLink>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
<DotsMouse />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
31
src/components/sections/home/HomePlatform.vue
Normal file
31
src/components/sections/home/HomePlatform.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="container py-24">
|
||||||
|
|
||||||
|
<div class="max-w-4xl mx-auto text-center space-y-6">
|
||||||
|
|
||||||
|
<div class="inline-block px-3 py-1 text-sm rounded-full border border-border">
|
||||||
|
What is NoSys?
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold text-balance">
|
||||||
|
A Platform, Not an Application
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||||
|
NoSys provides the foundation for decentralized communication and coordination.
|
||||||
|
It includes peer discovery, rendezvous, encrypted communication,
|
||||||
|
sub-network management, and modular infrastructure for building distributed systems.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-lg text-muted-foreground leading-relaxed">
|
||||||
|
Instead of relying on centralized servers controlled by corporations,
|
||||||
|
applications built on NoSys communicate directly between peers.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
@@ -1,62 +1,84 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Card from '@/components/ui/Card.vue';
|
import Card from '@/components/ui/Card.vue'
|
||||||
import CardContent from '@/components/ui/CardContent.vue';
|
import CardContent from '@/components/ui/CardContent.vue'
|
||||||
import { Shield, Unlock, Users } from 'lucide-vue-next';
|
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
Network,
|
||||||
|
Shield,
|
||||||
|
Blocks
|
||||||
|
} from 'lucide-vue-next'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="container py-24">
|
<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>
|
|
||||||
|
|
||||||
<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">
|
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||||
<CardContent class="pt-6">
|
Built to reduce dependency on centralized systems
|
||||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
</p>
|
||||||
<Shield class="h-6 w-6" />
|
</div>
|
||||||
</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">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<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>
|
|
||||||
|
|
||||||
<Card class="border-2">
|
<Card class="border-2">
|
||||||
<CardContent class="pt-6">
|
<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>
|
|
||||||
|
|
||||||
</div>
|
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||||
</section>
|
<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>
|
</template>
|
||||||
@@ -133,12 +133,11 @@ function drawIfMouseMoving() {
|
|||||||
if (!mouseMoving){
|
if (!mouseMoving){
|
||||||
if (dots.length > 0 && dots[dots.length - 1] === undefined) {
|
if (dots.length > 0 && dots[dots.length - 1] === undefined) {
|
||||||
dots = [];
|
dots = [];
|
||||||
console.log("Cleaning dots")
|
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
};
|
};
|
||||||
|
|
||||||
if (dots.length === 0 || ! getPreviousDot(dots.length, 1)) {
|
if (dots.length === 0 || !getPreviousDot(dots.length, 1)) {
|
||||||
const seedDot = new Dot(0, mouseX, mouseY);
|
const seedDot = new Dot(0, mouseX, mouseY);
|
||||||
dots.push(seedDot);
|
dots.push(seedDot);
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AboutHero from "@/components/sections/about/AboutHero.vue";
|
import AboutHero from "@/components/sections/about/AboutHero.vue"
|
||||||
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
|
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue"
|
||||||
import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
|
import AboutWhy from "@/components/sections/about/AboutWhy.vue"
|
||||||
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
|
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue"
|
||||||
import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
import AboutVision from "@/components/sections/about/AboutVision.vue"
|
||||||
|
import AboutCTA from "@/components/sections/about/AboutCTA.vue"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
|
|
||||||
<section class="border-b border-border">
|
<section class="border-b border-border">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<AboutHero/>
|
<AboutHero />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -23,7 +25,7 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
|||||||
|
|
||||||
<section class="border-b border-border">
|
<section class="border-b border-border">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<AboutOurMission />
|
<AboutWhy />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -32,11 +34,19 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
|||||||
<AboutTechnology />
|
<AboutTechnology />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="border-b border-border">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<AboutVision />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<AboutCTA />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="">
|
</template>
|
||||||
<div class="container mx-auto">
|
|
||||||
<AboutCTA/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
@@ -1,28 +1,43 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import HomeHero from '@/components/sections/home/HomeHero.vue'
|
import HomeHero from '@/components/sections/home/HomeHero.vue'
|
||||||
|
import HomePlatform from '@/components/sections/home/HomePlatform.vue'
|
||||||
import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
|
import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
|
||||||
|
import HomeEcosystem from '@/components/sections/home/HomeEcosystem.vue'
|
||||||
import HomeCTA from '@/components/sections/home/HomeCTA.vue'
|
import HomeCTA from '@/components/sections/home/HomeCTA.vue'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
|
|
||||||
<section class="border-b border-border">
|
<section class="border-b border-border">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<HomeHero />
|
<HomeHero />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="border-b border-border">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<HomePlatform />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="border-b border-border">
|
<section class="border-b border-border">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<HomePrinciples />
|
<HomePrinciples />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="">
|
<section class="border-b border-border">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<HomeEcosystem />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<HomeCTA />
|
<HomeCTA />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -30,6 +30,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="border-b border-border">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<HiwAppLayer />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="">
|
<section class="">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<HiwCTA />
|
<HiwCTA />
|
||||||
@@ -45,6 +51,7 @@ import HiwP2P from '@/components/sections/hiw/HiwP2P.vue'
|
|||||||
import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
|
import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
|
||||||
import HiwCore from '@/components/sections/hiw/HiwCore.vue'
|
import HiwCore from '@/components/sections/hiw/HiwCore.vue'
|
||||||
import HiwModules from '@/components/sections/hiw/HiwModules.vue'
|
import HiwModules from '@/components/sections/hiw/HiwModules.vue'
|
||||||
|
import HiwAppLayer from '@/components/sections/hiw/HiwAppLayer.vue'
|
||||||
import HiwCTA from '@/components/sections/hiw/HiwCTA.vue'
|
import HiwCTA from '@/components/sections/hiw/HiwCTA.vue'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user