NoSys as platform
This commit is contained in:
Lucas
@@ -21,7 +21,7 @@ const currentYear = new Date().getFullYear()
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
A social network no one can control.
|
||||
Infrastructure for a Decentralized Future.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,29 +1,52 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<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">
|
||||
Download the app and experience social media without corporate control.
|
||||
</p>
|
||||
<section>
|
||||
|
||||
<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 Now</Button>
|
||||
</RouterLink>
|
||||
<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">
|
||||
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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
@@ -1,20 +1,30 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 text-center">
|
||||
<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">
|
||||
Taking Control Back from Big Tech
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
In a world where social media platforms control what you see, what you can say,
|
||||
and how your data is used, we're building something different.
|
||||
</p>
|
||||
|
||||
<section class="container py-24 md:py-32 text-center">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
|
||||
<div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
|
||||
Open Infrastructure for Decentralized Systems
|
||||
</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>
|
||||
@@ -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>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Zap } from 'lucide-vue-next';
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import { Zap } 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 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">
|
||||
Built on Modern Peer-to-Peer Technology
|
||||
</h2>
|
||||
<section class="bg-card">
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Designed with contemporary decentralized architectures to deliver privacy, resilience, and reliable communication without central dependencies.
|
||||
</p>
|
||||
<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" />
|
||||
Architecture
|
||||
</div>
|
||||
|
||||
<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-to-Peer Architecture</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Direct peer communication without servers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Built as Decentralized Infrastructure
|
||||
</h2>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encrypted data.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
noSys provides foundational peer-to-peer components for building distributed systems and decentralized applications.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
@@ -1,109 +1,124 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { AlertCircle } from 'lucide-vue-next';
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<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">
|
||||
Centralized Platforms Are Broken
|
||||
</h2>
|
||||
<section class="bg-card">
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<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>
|
||||
<div class="container py-24">
|
||||
|
||||
<ul class="space-y-2 list-disc list-inside">
|
||||
<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>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<p>
|
||||
When communication infrastructure is centralized and bound by state authority,
|
||||
true freedom of expression becomes structurally impossible.
|
||||
</p>
|
||||
</div>
|
||||
<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 Centralization Problem
|
||||
</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">Censorship</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Arbitrary content removal without transparency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Critical Infrastructure Is Becoming Centralized
|
||||
</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">Surveillance</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Constant tracking of user activities
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
|
||||
<div>
|
||||
<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>
|
||||
<p>
|
||||
Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
|
||||
</p>
|
||||
|
||||
<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">Algorithmic Control</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Manipulation of what content you see
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
As technology becomes more integrated into everyday life, centralized control over infrastructure creates structural dependency on entities users cannot govern or audit.
|
||||
</p>
|
||||
|
||||
<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 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>
|
||||
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</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>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Connect with developers, contributors, and users who are building the future of decentralized social media
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<DotsMouse></DotsMouse>
|
||||
<DotsMouse />
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,94 +1,141 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Github, Heart, Wallet } from 'lucide-vue-next';
|
||||
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Heart, Wallet, Github } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="donate" class="bg-primary/5">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8 justify-center">
|
||||
<Heart class="h-8 w-8 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
|
||||
</div>
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
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.
|
||||
</p>
|
||||
<section id="donate" class="bg-primary/5">
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto">
|
||||
|
||||
<!-- Header -->
|
||||
|
||||
<div class="text-center mb-10">
|
||||
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<Heart class="h-7 w-7 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Support Development
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
Support Our Mission
|
||||
</Button>
|
||||
</div>
|
||||
<p class="text-muted-foreground text-lg leading-relaxed">
|
||||
NoSys is open-source infrastructure built to support decentralized systems.
|
||||
Contributions help fund development, testing, and long-term protocol maintenance.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</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>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<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>
|
||||
<section>
|
||||
<div class="container py-24">
|
||||
|
||||
<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">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
Download
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/documentation">
|
||||
<Button size="lg" variant="outline" class="hover:text-amber-500">
|
||||
<RouterLink to="/documentation">Read Documentation</RouterLink>
|
||||
Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,50 +1,140 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Zap, Server, FileText } from 'lucide-vue-next'
|
||||
|
||||
import {
|
||||
Search,
|
||||
ServerCog,
|
||||
Network,
|
||||
Workflow
|
||||
} from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<section class="bg-card">
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
|
||||
<p class="text-muted-foreground max-w-xl mx-auto">
|
||||
NoSys empowers you to create decentralized networks with full control over communication rules,
|
||||
while providing tools to easily discover and connect with peers.
|
||||
|
||||
<div
|
||||
class="inline-flex items-center px-3 py-1 text-sm
|
||||
rounded-full border border-border mb-6"
|
||||
>
|
||||
Infrastructure Layers
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Core Infrastructure
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground max-w-3xl mx-auto text-lg">
|
||||
NoSys provides foundational infrastructure components for
|
||||
decentralized communication, peer coordination,
|
||||
network management, and extensible distributed systems.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-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" />
|
||||
|
||||
<CardContent class="p-8">
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<Search class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">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.
|
||||
|
||||
<h3 class="font-bold text-xl mb-3">
|
||||
Peer Discovery
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Locate peers across decentralized environments and establish
|
||||
communication paths between distributed nodes.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
|
||||
<!-- Rendezvous -->
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center">
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<Server class="h-10 w-10 text-primary" />
|
||||
|
||||
<CardContent class="p-8">
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<ServerCog class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">Rendezvous Servers</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
These central points help you find and connect to peers when you first join a network.
|
||||
They make peer discovery simple while keeping your interactions decentralized.
|
||||
|
||||
<h3 class="font-bold text-xl mb-3">
|
||||
Rendezvous Coordination
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Assist peers behind NATs and isolated networks in discovering
|
||||
and connecting to each other across different environments.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
|
||||
<!-- Network Management -->
|
||||
|
||||
<Card class="border-2">
|
||||
|
||||
<CardContent class="p-8">
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<Network class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold text-xl mb-3">
|
||||
Network Management
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Create isolated decentralized sub-networks with independent peers,
|
||||
communication rules, and coordination models.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
|
||||
<!-- Event System -->
|
||||
|
||||
<Card class="border-2">
|
||||
|
||||
<CardContent class="p-8">
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<Workflow class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold text-xl mb-3">
|
||||
Modular Event System
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Infrastructure components and modules communicate through observable
|
||||
events, enabling extensibility and interoperability across the platform.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
@@ -1,84 +1,127 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Lock } from 'lucide-vue-next';
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
KeyRound,
|
||||
ShieldCheck
|
||||
} 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>
|
||||
<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>
|
||||
<section>
|
||||
|
||||
<div>
|
||||
<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 class="container py-24">
|
||||
|
||||
<div>
|
||||
<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 class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<!-- LEFT CARD -->
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
|
||||
<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>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Encryption You Control
|
||||
</h2>
|
||||
</CardContent>
|
||||
|
||||
</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>
|
||||
Instead of relying on centralized databases of passwords,
|
||||
identity is managed locally through cryptographic keys that you own.
|
||||
NoSys uses cryptographic identity systems instead of centralized
|
||||
account management infrastructure.
|
||||
</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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
@@ -1,19 +1,38 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
How NoSys Works
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Understanding the technology that makes decentralized social networking possible
|
||||
</p>
|
||||
<section class="container py-24 md:py-32">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
|
||||
<div
|
||||
class="inline-flex items-center px-3 py-1 text-sm rounded-full
|
||||
border border-border mb-6"
|
||||
>
|
||||
Distributed Systems • Peer-to-Peer • Modular Runtime
|
||||
</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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<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 {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
@@ -9,129 +9,106 @@ import {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<section>
|
||||
<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 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</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>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,81 +1,189 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Network } from 'lucide-vue-next';
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
Network,
|
||||
Server,
|
||||
Router,
|
||||
Globe
|
||||
} from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<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 -->
|
||||
<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>
|
||||
<section class="bg-card">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Direct Connections, No Middlemen
|
||||
</h2>
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
In traditional social media, all your data flows through corporate servers...
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-foreground">
|
||||
With P2P, you connect directly to other users.
|
||||
</strong>
|
||||
</p>
|
||||
<p>
|
||||
This architecture makes the network censorship-resistant and resilient...
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- LEFT CONTENT -->
|
||||
|
||||
<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" />
|
||||
Distributed Networking
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-8">
|
||||
<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>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Peer Coordination Without Centralized Infrastructure
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<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 class="text-primary">↔</div>
|
||||
<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">
|
||||
Direct connections between users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
|
||||
<p>
|
||||
Traditional applications route communication through centralized infrastructure,
|
||||
creating dependency on providers that control connectivity,
|
||||
coordination, and access.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
NoSys enables peers to discover and communicate directly using
|
||||
decentralized networking and coordination mechanisms.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Rendezvous services assist peers in locating each other and establishing
|
||||
communication paths across different network environments,
|
||||
while peer-to-peer communication reduces dependency on centralized intermediaries.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This architecture allows decentralized systems to remain resilient,
|
||||
modular, and adaptable across different types of applications.
|
||||
</p>
|
||||
|
||||
</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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
@@ -1,20 +1,32 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download our app and experience a social network built for freedom, not profit.
|
||||
</p>
|
||||
<Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
|
||||
<RouterLink to="/downloads">Get Started</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
<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">
|
||||
Start Building Decentralized Systems
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Explore the platform, connect peers, and build applications
|
||||
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>
|
||||
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>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<section class="container py-24 md:py-32 lg:py-40">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||
100% Peer-to-Peer
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||
A Social Network Built for Free Expression
|
||||
</h1>
|
||||
<div class="space-y-6">
|
||||
|
||||
<p class="text-xl text-muted-foreground text-pretty">
|
||||
A peer-to-peer social network designed to keep communication open,
|
||||
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 class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||
Open Source • Peer-to-Peer • Decentralized
|
||||
</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>
|
||||
|
||||
</section>
|
||||
<DotsMouse />
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</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>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Shield, Unlock, Users } from 'lucide-vue-next';
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
Network,
|
||||
Shield,
|
||||
Blocks
|
||||
} from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Our mission is to give you back control of your digital life
|
||||
</p>
|
||||
</div>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Core Infrastructure Principles
|
||||
</h2>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Shield class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Privacy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encryption ensures your data belongs only to you.
|
||||
No corporate surveillance, no data mining, no third-party access.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Built to reduce dependency on centralized systems
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Unlock class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Autonomy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
You own your content, connections, and identity.
|
||||
No platform can ban you, shadow ban you, or restrict your reach.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Users class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Decentralization</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No single point of failure or control.
|
||||
The network runs on peer-to-peer connections,
|
||||
making it resilient and censorship-resistant.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Network class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold mb-3">
|
||||
Peer-to-Peer
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Systems communicate directly between peers without depending on centralized infrastructure or single points of control.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Shield class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold mb-3">
|
||||
Sovereignty
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Identity, communication, and infrastructure belong to the participants of the network, not centralized providers.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Blocks class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold mb-3">
|
||||
Modularity
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Build different systems on top of the same decentralized infrastructure, from social platforms to autonomous machine networks.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -133,12 +133,11 @@ function drawIfMouseMoving() {
|
||||
if (!mouseMoving){
|
||||
if (dots.length > 0 && dots[dots.length - 1] === undefined) {
|
||||
dots = [];
|
||||
console.log("Cleaning dots")
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
if (dots.length === 0 || ! getPreviousDot(dots.length, 1)) {
|
||||
if (dots.length === 0 || !getPreviousDot(dots.length, 1)) {
|
||||
const seedDot = new Dot(0, mouseX, mouseY);
|
||||
dots.push(seedDot);
|
||||
return;
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<script setup>
|
||||
import AboutHero from "@/components/sections/about/AboutHero.vue";
|
||||
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
|
||||
import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
|
||||
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
|
||||
import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
||||
import AboutHero from "@/components/sections/about/AboutHero.vue"
|
||||
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue"
|
||||
import AboutWhy from "@/components/sections/about/AboutWhy.vue"
|
||||
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue"
|
||||
import AboutVision from "@/components/sections/about/AboutVision.vue"
|
||||
import AboutCTA from "@/components/sections/about/AboutCTA.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutHero/>
|
||||
<AboutHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -23,7 +25,7 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutOurMission />
|
||||
<AboutWhy />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -32,11 +34,19 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
||||
<AboutTechnology />
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<AboutCTA/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,28 +1,43 @@
|
||||
<script setup>
|
||||
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 HomeEcosystem from '@/components/sections/home/HomeEcosystem.vue'
|
||||
import HomeCTA from '@/components/sections/home/HomeCTA.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomeHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomePlatform />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomePrinciples />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="">
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomeEcosystem />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container mx-auto">
|
||||
<HomeCTA />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -30,6 +30,12 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwAppLayer />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<HiwCTA />
|
||||
@@ -45,6 +51,7 @@ import HiwP2P from '@/components/sections/hiw/HiwP2P.vue'
|
||||
import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
|
||||
import HiwCore from '@/components/sections/hiw/HiwCore.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'
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user