NoSys
This commit is contained in:
Lucas
@@ -1,134 +1,105 @@
|
||||
<script setup>
|
||||
import { RouterLink } from "vue-router"
|
||||
import { Github, Heart } from "lucide-vue-next"
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Github, Heart, Shield, Boxes } from 'lucide-vue-next'
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="border-t border-border bg-card justify-center text-center">
|
||||
<div class="container mx-auto py-12 px-2">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<footer class="border-t border-border bg-card">
|
||||
|
||||
<div class="container mx-auto py-16">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
|
||||
<div class="lg:col-span-1">
|
||||
|
||||
<RouterLink to="/" class="flex items-center gap-3 mb-5">
|
||||
<div class="h-9 w-9 rounded-xl bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground"></div>
|
||||
</div>
|
||||
<h1 class="leading-none font-bold text-lg">
|
||||
|
||||
<h1 class="font-bold text-lg">
|
||||
<span class="text-yellow-400">No</span>
|
||||
<span class="text-foreground">Sys</span>
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Infrastructure for a Decentralized Future.
|
||||
</RouterLink>
|
||||
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||||
Open peer-to-peer infrastructure for modular decentralized systems.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-4 mt-6">
|
||||
<a href="https://github.com" target="_blank" class="text-muted-foreground hover:text-foreground">
|
||||
<Github class="h-5 w-5" />
|
||||
</a>
|
||||
|
||||
<RouterLink to="/contribute" class="text-muted-foreground hover:text-foreground">
|
||||
<Heart class="h-5 w-5" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Product</h3>
|
||||
<h3 class="font-semibold mb-5">Product</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
About
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/how-it-works" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
How It Works
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/downloads" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Downloads
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li><RouterLink to="/modules" class="footer-link">Modules</RouterLink></li>
|
||||
<li><RouterLink to="/downloads" class="footer-link">Downloads</RouterLink></li>
|
||||
<li><RouterLink to="/about" class="footer-link">About</RouterLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<!-- Builders -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Resources</h3>
|
||||
<h3 class="font-semibold mb-5">Developers</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/documentation" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Documentation
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Blog
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/support" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Support
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Legal</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/privacy" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Privacy Policy
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/license" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Open Source License
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li><RouterLink to="/docs" class="footer-link">Documentation</RouterLink></li>
|
||||
<li><RouterLink to="/architecture" class="footer-link">Architecture</RouterLink></li>
|
||||
<li><RouterLink to="/blog" class="footer-link">Blog</RouterLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Community -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Community</h3>
|
||||
<h3 class="font-semibold mb-5">Community</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><RouterLink to="/community" class="footer-link">Community Hub</RouterLink></li>
|
||||
<li><RouterLink to="/help" class="footer-link">Help</RouterLink></li>
|
||||
<li><RouterLink to="/contribute" class="footer-link">Contribute</RouterLink></li>
|
||||
|
||||
<li>
|
||||
<RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Other plataforms
|
||||
<RouterLink to="/security" class="footer-link flex items-center gap-2">
|
||||
<Shield class="h-4 w-4" />
|
||||
Security
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink
|
||||
to="/community#donate"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors items-center gap-2"
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-4 justify-center">
|
||||
<Heart class="h-4 w-4 flex" />
|
||||
Donate
|
||||
</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<div >
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors gap-2 flex flex-row justify-center items-center"
|
||||
>
|
||||
<Github class="h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-muted-foreground gap-2 justify-center text-center">
|
||||
<p>© {{ currentYear }} NoSys.</p>
|
||||
<p>Open source and decentralized.</p>
|
||||
<!-- Bottom -->
|
||||
<div class="mt-16 pt-8 border-t border-border flex flex-col md:flex-row justify-between gap-4">
|
||||
|
||||
<p class="text-sm text-muted-foreground">
|
||||
© {{ currentYear }} NoSys. Open source infrastructure for decentralized systems.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-6 text-sm text-muted-foreground">
|
||||
<RouterLink to="/faq" class="hover:text-foreground">FAQ</RouterLink>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Boxes class="h-4 w-4" />
|
||||
Modular Runtime
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
</template>
|
||||
@@ -2,89 +2,146 @@
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Menu, X } from 'lucide-vue-next'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import ThemeToggleButton from './ui/ThemeToggleButton.vue'
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
const navLinks = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/how-it-works", label: "How It Works" },
|
||||
{ href: "/downloads", label: "Downloads" },
|
||||
{ href: "/documentation", label: "Docs" },
|
||||
{ href: "/community", label: "Community" },
|
||||
{ href: "/blog", label: "Blog" },
|
||||
{ href: "/support", label: "Support" },
|
||||
/**
|
||||
* USER-FACING (simple, adoption-focused)
|
||||
*/
|
||||
const primaryLinks = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{ href: '/modules', label: 'Modules' },
|
||||
{ href: '/downloads', label: 'Downloads' },
|
||||
]
|
||||
|
||||
/**
|
||||
* BUILDER / TECH (optional depth)
|
||||
*/
|
||||
const secondaryLinks = [
|
||||
{ href: '/docs', label: 'Docs' },
|
||||
{ href: '/architecture', label: 'Architecture' },
|
||||
{ href: '/blog', label: 'Blog' },
|
||||
]
|
||||
|
||||
/**
|
||||
* COMMUNITY / ACTION
|
||||
*/
|
||||
const actionLinks = [
|
||||
{ href: '/community', label: 'Community' },
|
||||
{ href: '/help', label: 'Help' },
|
||||
{ href: '/contribute', label: 'Contribute' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-50 w-screen border-b border-border/40 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60"
|
||||
>
|
||||
<div class="container mx-auto flex h-16 items-center justify-between gap-4">
|
||||
<RouterLink to="/" class="flex items-center gap-2">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
|
||||
<header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/90 backdrop-blur-xl">
|
||||
|
||||
<div class="container mx-auto h-16 flex items-center justify-between gap-6">
|
||||
|
||||
<!-- Brand -->
|
||||
<RouterLink to="/" class="flex items-center gap-3 shrink-0">
|
||||
<div class="h-9 w-9 rounded-xl bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground"></div>
|
||||
</div>
|
||||
<h1 class="leading-none font-bold text-lg">
|
||||
|
||||
<h1 class="font-bold text-lg">
|
||||
<span class="text-yellow-400">No</span>
|
||||
<span class="text-foreground">Sys</span>
|
||||
</h1>
|
||||
</RouterLink>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center gap-4">
|
||||
<RouterLink
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
<!-- Desktop Nav -->
|
||||
<div class="hidden lg:flex items-center gap-10 flex-1">
|
||||
|
||||
<!-- Primary -->
|
||||
<nav class="flex items-center gap-6">
|
||||
<RouterLink
|
||||
v-for="link in primaryLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<!-- Secondary -->
|
||||
<nav class="flex items-center gap-5 ml-auto">
|
||||
<RouterLink
|
||||
v-for="link in secondaryLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
|
||||
<span class="text-muted-foreground">|</span>
|
||||
|
||||
<RouterLink
|
||||
v-for="link in actionLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<Button>
|
||||
<RouterLink to="/downloads">Download</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ThemeToggleButton class="hidden md:flex mr-5"></ThemeToggleButton>
|
||||
<!-- Actions -->
|
||||
<div class="hidden lg:flex items-center gap-3">
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
class="md:hidden pr-4"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<X v-if="mobileMenuOpen" class="h-6 w-6" />
|
||||
<Menu v-else class="h-6 w-6"></Menu>
|
||||
</button>
|
||||
</div>
|
||||
<ThemeToggleButton />
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
|
||||
<nav class="container mx-auto py-4 flex flex-col gap-4 text-center justify-center items-center">
|
||||
<RouterLink
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ link.label }}
|
||||
<RouterLink to="/downloads">
|
||||
<Button class="bg-amber-400 hover:bg-amber-500 text-black">
|
||||
Download noSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<Button class="w-full">
|
||||
<RouterLink to="/downloads">Download</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<button class="lg:hidden" @click="mobileMenuOpen = !mobileMenuOpen">
|
||||
<X v-if="mobileMenuOpen" class="h-6 w-6" />
|
||||
<Menu v-else class="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div v-if="mobileMenuOpen" class="lg:hidden border-t border-border">
|
||||
<nav class="container mx-auto py-6 flex flex-col gap-6">
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<RouterLink
|
||||
v-for="link in [...primaryLinks, ...secondaryLinks, ...actionLinks]"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="block text-sm font-medium text-muted-foreground hover:text-foreground"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<RouterLink to="/downloads" @click="mobileMenuOpen = false">
|
||||
<Button class="w-full bg-amber-400 hover:bg-amber-500 text-black">
|
||||
Download noSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<ThemeToggleButton />
|
||||
|
||||
<ThemeToggleButton></ThemeToggleButton>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
</template>
|
||||
@@ -1,52 +1,39 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<section>
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<div class="container py-24">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-balance">
|
||||
Explore the NoSys Ecosystem
|
||||
</h2>
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Download NoSys, explore decentralized applications,
|
||||
or learn how the platform works.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Explore the Platform
|
||||
</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
|
||||
<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>
|
||||
<RouterLink to="/downloads">
|
||||
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black px-8">
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline" class="px-8">
|
||||
Learn How It Works
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
31
src/components/sections/about/AboutFuture.vue
Normal file
31
src/components/sections/about/AboutFuture.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<h2 class="text-3xl md:text-5xl font-bold text-balance">
|
||||
Exploring the Future of Decentralized Systems
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6 text-lg text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
NoSys is an ongoing experiment in open digital infrastructure.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The project explores how peer-to-peer systems,
|
||||
modular ecosystems, distributed communication,
|
||||
and community-driven development can support a more resilient internet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Social networks are only one possible application.
|
||||
The long-term vision is broader:
|
||||
decentralized ecosystems capable of supporting many forms of digital interaction.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -3,28 +3,30 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 lg:py-40">
|
||||
|
||||
<section class="container py-24 md:py-32 text-center">
|
||||
<div class="max-w-5xl mx-auto text-center space-y-8">
|
||||
|
||||
<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
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm"
|
||||
>
|
||||
About NoSys
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Technology Should Belong to Its Users
|
||||
</h1>
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tight text-balance leading-tight">
|
||||
Infrastructure for a Decentralized Future
|
||||
</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>
|
||||
<p class="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-4xl mx-auto">
|
||||
NoSys is an open-source peer-to-peer platform designed to reduce dependence
|
||||
on centralized digital infrastructure and give communities direct control
|
||||
over communication, applications, and networks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<DotsMouse />
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
68
src/components/sections/about/AboutPrinciples.vue
Normal file
68
src/components/sections/about/AboutPrinciples.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
const principles = [
|
||||
{
|
||||
title: 'Decentralization',
|
||||
description: 'Reduce dependency on central infrastructure and concentrated control.'
|
||||
},
|
||||
{
|
||||
title: 'Open Source',
|
||||
description: 'Technology should be transparent, auditable, and collaborative.'
|
||||
},
|
||||
{
|
||||
title: 'User Ownership',
|
||||
description: 'People should control their identity, data, and applications.'
|
||||
},
|
||||
{
|
||||
title: 'Modularity',
|
||||
description: 'Applications and systems should remain replaceable and extensible.'
|
||||
},
|
||||
{
|
||||
title: 'Community-Driven Innovation',
|
||||
description: 'Infrastructure evolves through open ecosystems and collective development.'
|
||||
},
|
||||
{
|
||||
title: 'Resilience',
|
||||
description: 'Distributed systems reduce single points of failure and dependency.'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||
Core Principles
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
NoSys is guided by architectural and social principles
|
||||
focused on openness, resilience, and decentralization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<Card
|
||||
v-for="principle in principles"
|
||||
:key="principle.title"
|
||||
class="border-2"
|
||||
>
|
||||
<CardContent class="p-8 space-y-4">
|
||||
<h3 class="text-2xl font-bold">
|
||||
{{ principle.title }}
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ principle.description }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
79
src/components/sections/about/AboutProblem.vue
Normal file
79
src/components/sections/about/AboutProblem.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { AlertTriangle } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-destructive/20 bg-destructive/10 text-destructive text-sm mb-6"
|
||||
>
|
||||
<AlertTriangle class="h-4 w-4" />
|
||||
The Centralization Problem
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
|
||||
The Internet Became Increasingly Centralized
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5 text-lg text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Large platforms increasingly control communication,
|
||||
identity, visibility, moderation, and user data.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Modern digital ecosystems often depend on centralized servers,
|
||||
closed infrastructures, and corporate-controlled platforms.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As more of society becomes digital,
|
||||
dependence on centralized infrastructure becomes a structural risk.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-8">
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Platform Dependency</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Entire communities and applications depend on centralized services.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Single Points of Failure</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Infrastructure outages or policy changes affect millions simultaneously.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Closed Ecosystems</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Users often cannot control or verify the systems they depend on.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Data Concentration</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Massive centralized data collection creates power asymmetry.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
80
src/components/sections/about/AboutSolution.vue
Normal file
80
src/components/sections/about/AboutSolution.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { ShieldCheck } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8 space-y-8">
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Peer-to-Peer Networking</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Devices communicate directly instead of relying entirely on central servers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Open Source Infrastructure</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Systems remain transparent, auditable, and community-driven.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Modular Ecosystem</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Applications can evolve independently without platform lock-in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2">Distributed Coordination</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
Networks can operate collaboratively without centralized ownership.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="order-1 lg:order-2">
|
||||
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm mb-6"
|
||||
>
|
||||
<ShieldCheck class="h-4 w-4" />
|
||||
The NoSys Approach
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
|
||||
Building Open Decentralized Infrastructure
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5 text-lg text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
NoSys provides peer-to-peer infrastructure that applications can build upon.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Instead of creating a single centralized platform,
|
||||
NoSys focuses on enabling decentralized ecosystems.
|
||||
</p>
|
||||
|
||||
<p class="text-foreground font-medium">
|
||||
The goal is not to control the network.
|
||||
The goal is to make control less necessary.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,124 +0,0 @@
|
||||
<script setup>
|
||||
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 Centralization Problem
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Critical Infrastructure Is Becoming Centralized
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
|
||||
<p>
|
||||
Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
</template>
|
||||
@@ -1,37 +1,83 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Globe, Network, Cpu } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<section>
|
||||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 text-balance">
|
||||
Technology Is Becoming Infrastructure
|
||||
</h2>
|
||||
|
||||
<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.
|
||||
<div class="space-y-6 text-lg text-muted-foreground leading-relaxed max-w-3xl mx-auto">
|
||||
<p>
|
||||
Communication, transportation, finance, media, identity,
|
||||
and social interaction increasingly depend on digital systems.
|
||||
</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>
|
||||
When these systems are controlled by a small number of corporations
|
||||
or centralized authorities, societies become dependent on entities
|
||||
capable of controlling access, visibility, data, and participation.
|
||||
</p>
|
||||
|
||||
<p class="text-foreground font-medium">
|
||||
NoSys exists to explore a different direction:
|
||||
open infrastructure built by communities, for communities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Globe class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Open Infrastructure</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Infrastructure should belong to ecosystems and communities,
|
||||
not isolated corporate silos.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Network class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Distributed Systems</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Decentralized architectures reduce dependency on single points
|
||||
of control and failure.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Cpu class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Community Innovation</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Anyone can build applications, protocols,
|
||||
and new decentralized experiences.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
38
src/components/sections/community/CommunityCTA.vue
Normal file
38
src/components/sections/community/CommunityCTA.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<h2 class="text-4xl md:text-5xl font-bold">
|
||||
Be Part of the Network Layer of the Future
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Join the community shaping decentralized infrastructure, applications, and ecosystems.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
|
||||
<RouterLink to="/downloads">
|
||||
<Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/documentation">
|
||||
<Button variant="outline" class="px-8">
|
||||
Explore Documentation
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
50
src/components/sections/community/CommunityContribute.vue
Normal file
50
src/components/sections/community/CommunityContribute.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-6">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
How People Contribute
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
You don’t need to be a developer to contribute to NoSys.
|
||||
The ecosystem grows through ideas, feedback, modules, and testing.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left mt-10">
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Feedback & Ideas</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Help shape the direction of the ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Testing & Usage</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Use NoSys and report real-world behavior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Modules</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Build or share applications on top of the runtime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Documentation</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Improve clarity for future users and contributors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script setup>
|
||||
import { Lightbulb } from 'lucide-vue-next';
|
||||
|
||||
const roadmap = [
|
||||
// {
|
||||
// title: "Q1 2026 - In Progress",
|
||||
// dotColor: "bg-primary",
|
||||
// tasks: [
|
||||
// "x",
|
||||
// "x",
|
||||
// "x",
|
||||
// "x",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: "Q2 2026 - Planned",
|
||||
// dotColor: "bg-muted-foreground",
|
||||
// tasks: [
|
||||
// "y",
|
||||
// "y",
|
||||
// "y",
|
||||
// "y",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: "Q3-Q4 2026 - Future",
|
||||
// dotColor: "bg-muted-foreground",
|
||||
// tasks: [
|
||||
// "z",
|
||||
// "z",
|
||||
// "z",
|
||||
// "z",
|
||||
// ],
|
||||
// },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Lightbulb class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Development Roadmap</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div v-for="(quarter, index) in roadmap" :key="index">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div :class="['h-3 w-3 rounded-full', quarter.dotColor]" />
|
||||
<h3 class="text-xl font-bold">{{ quarter.title }}</h3>
|
||||
</div>
|
||||
<ul class="space-y-2 text-muted-foreground ml-6">
|
||||
<li class="flex gap-2" v-for="(task, i) in quarter.tasks" :key="i">
|
||||
<span class="text-primary">•</span>
|
||||
<span>{{ task }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
60
src/components/sections/community/CommunityEcosystem.vue
Normal file
60
src/components/sections/community/CommunityEcosystem.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Boxes } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
A Growing Ecosystem
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg">
|
||||
NoSys is not a single application — it is a base layer for many systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-3">
|
||||
<h3 class="text-xl font-bold">Community Modules</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Anyone can build and share modules that run on top of the runtime.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-3">
|
||||
<h3 class="text-xl font-bold">Decentralized Apps</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Social apps, messaging, tools, and systems built on peer-to-peer infrastructure.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-3">
|
||||
<h3 class="text-xl font-bold">Experimental Systems</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Research and experimentation in distributed architectures.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-3">
|
||||
<h3 class="text-xl font-bold">Open Collaboration</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Shared development between users, not controlled by a single entity.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -5,24 +5,23 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<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 mb-6">
|
||||
Open Source Infrastructure • Peer-to-Peer Systems • Modular Runtime
|
||||
<div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
|
||||
Open Community • Ecosystem Driven
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Build and Contribute to NoSys
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-balance">
|
||||
Join the NoSys Community
|
||||
</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 class="text-xl text-muted-foreground leading-relaxed">
|
||||
NoSys is built by people, not companies.
|
||||
Users, contributors, and builders shape the ecosystem together.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<DotsMouse />
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,62 +0,0 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Code } from 'lucide-vue-next';
|
||||
|
||||
const contributionItems = [
|
||||
{
|
||||
title: "Code Contributions",
|
||||
description: "We welcome contributions to the core platform and modules. Fork the repository, make your changes, and submit a pull request.",
|
||||
points: [
|
||||
"Follow the existing code style and conventions",
|
||||
"Write tests for new features",
|
||||
"Update documentation as needed",
|
||||
"Ensure all tests pass before submitting",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Documentation",
|
||||
description: "Help improve our documentation by fixing errors, adding examples, or writing guides. Clear documentation makes the platform more accessible to everyone.",
|
||||
},
|
||||
{
|
||||
title: "Bug Reports",
|
||||
description: "Found a bug? Report it on our issue tracker with detailed steps to reproduce, your system information, and any relevant logs.",
|
||||
},
|
||||
{
|
||||
title: "Feature Requests",
|
||||
description: "Have an idea for a new feature? Open an issue describing the feature, its use case, and how it fits with the project's goals of decentralization and privacy.",
|
||||
},
|
||||
{
|
||||
title: "Testing",
|
||||
description: "Test beta releases, provide feedback, and help us identify issues before they reach stable releases.",
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<Code class="h-8 w-8 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(item, index) in contributionItems" :key="index">
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
|
||||
<ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
|
||||
<li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
|
||||
<span class="text-primary">•</span>
|
||||
<span>{{ point }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,141 +0,0 @@
|
||||
<script setup>
|
||||
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">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
54
src/components/sections/community/CommunitySpaces.vue
Normal file
54
src/components/sections/community/CommunitySpaces.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { MessageSquare, Github, Globe } 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">
|
||||
Where the Community Lives
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg">
|
||||
Connect, discuss, and follow the evolution of NoSys.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center space-y-4">
|
||||
<MessageSquare class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">Discussions</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Talk about features, ideas, and ecosystem direction.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center space-y-4">
|
||||
<Github class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">Open Source</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Explore the code, report issues, and follow development.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center space-y-4">
|
||||
<Globe class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">Ecosystem</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Discover modules and applications built on NoSys.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
30
src/components/sections/community/CommunitySupport.vue
Normal file
30
src/components/sections/community/CommunitySupport.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { Heart } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 bg-card">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Support the Ecosystem
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
NoSys is open-source and community-driven.
|
||||
Support helps infrastructure, development, and long-term sustainability.
|
||||
</p>
|
||||
|
||||
<RouterLink to="/contribute">
|
||||
<Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
|
||||
<Heart class="h-4 w-4 mr-2" />
|
||||
Donate or Support
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,50 +0,0 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Calendar } from 'lucide-vue-next';
|
||||
|
||||
const updates = [
|
||||
// {
|
||||
// title: "v1.2.0 Released",
|
||||
// date: "Dec 1, 2024",
|
||||
// description: "xxxxxxxxxxxxxxxxxxx.",
|
||||
// },
|
||||
// {
|
||||
// title: "Community Milestone: 10K Users",
|
||||
// date: "Nov 25, 2024",
|
||||
// description: "We've reached 10,000 active users on the network! Thank you to everyone who's joined the movement for decentralized social media.",
|
||||
// },
|
||||
// {
|
||||
// title: "New Documentation Portal",
|
||||
// date: "Nov 15, 2024",
|
||||
// description: "Launched comprehensive documentation with guides for developers, API references, and security best practices.",
|
||||
// },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Calendar class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Recent Updates</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(update, index) in updates" :key="index">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="text-lg font-bold">{{ update.title }}</h3>
|
||||
<span class="text-sm text-muted-foreground">{{ update.date }}</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground text-sm">{{ update.description }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
41
src/components/sections/contribute/ContributeCTA.vue
Normal file
41
src/components/sections/contribute/ContributeCTA.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { Download, Code } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<h2 class="text-4xl md:text-5xl font-bold">
|
||||
The Ecosystem Is Built by Everyone
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Supporting NoSys means supporting a decentralized infrastructure future.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
|
||||
<RouterLink to="/downloads">
|
||||
<Button class="bg-amber-400 hover:bg-amber-500 text-black px-8">
|
||||
<Download class="h-4 w-4 mr-2" />
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button variant="outline" class="px-8">
|
||||
<Code class="h-4 w-4 mr-2" />
|
||||
Understand the System
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
64
src/components/sections/contribute/ContributeDonate.vue
Normal file
64
src/components/sections/contribute/ContributeDonate.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { Wallet, Copy, Check } from 'lucide-vue-next'
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
const address = "bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku"
|
||||
|
||||
function copy() {
|
||||
navigator.clipboard.writeText(address)
|
||||
copied.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 1500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Donate in Bitcoin
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground text-lg">
|
||||
Currently, NoSys accepts BTC donations only. More options will be added as the ecosystem grows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-6 text-center">
|
||||
|
||||
<Wallet class="h-10 w-10 mx-auto text-primary" />
|
||||
|
||||
<h3 class="text-xl font-bold">Bitcoin (BTC)</h3>
|
||||
|
||||
<div class="bg-muted p-4 rounded text-sm break-all text-left">
|
||||
{{ address }}
|
||||
</div>
|
||||
|
||||
<Button class="w-full" @click="copy">
|
||||
<Copy v-if="!copied" class="h-4 w-4 mr-2" />
|
||||
<Check v-else class="h-4 w-4 mr-2" />
|
||||
{{ copied ? "Copied" : "Copy Address" }}
|
||||
</Button>
|
||||
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Send only BTC. Sending other assets may result in permanent loss.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
36
src/components/sections/contribute/ContributeFuture.vue
Normal file
36
src/components/sections/contribute/ContributeFuture.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="container py-24 bg-card">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-6">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Future Support Options
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
Additional contribution methods will be introduced as the ecosystem matures.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||||
|
||||
<div class="p-6 border rounded-lg">
|
||||
<h3 class="font-bold">GitHub Sponsors</h3>
|
||||
<p class="text-sm text-muted-foreground">Direct developer sponsorship</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg">
|
||||
<h3 class="font-bold">Lightning Network</h3>
|
||||
<p class="text-sm text-muted-foreground">Fast micro-donations</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg">
|
||||
<h3 class="font-bold">Recurring Support</h3>
|
||||
<p class="text-sm text-muted-foreground">Monthly contributions</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
22
src/components/sections/contribute/ContributeHero.vue
Normal file
22
src/components/sections/contribute/ContributeHero.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 text-center">
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
<div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
|
||||
Open Source • Community Funded
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-balance">
|
||||
Support the NoSys Ecosystem
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
NoSys is built and maintained as an open-source infrastructure project.
|
||||
Contributions help sustain development, infrastructure, and long-term research.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
How Funds Are Used
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
Donations are not profit-driven. They support infrastructure and development.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Development</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Core runtime, protocol, and module ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Infrastructure</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Servers, testing environments, and distributed network tools.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h3 class="font-bold mb-2">Research</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Protocol design, peer-to-peer systems, and security improvements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
46
src/components/sections/downloads/DownloadCTA.vue
Normal file
46
src/components/sections/downloads/DownloadCTA.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { ArrowRight, Download } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-balance">
|
||||
Start Using a Decentralized Runtime Today
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Download NoSys, launch the runtime, and explore applications built on a
|
||||
peer-to-peer infrastructure — no installation, no configuration, no vendor lock-in.
|
||||
</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 px-8">
|
||||
<Download class="h-4 w-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline" class="px-8">
|
||||
Learn How It Works
|
||||
<ArrowRight class="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Open-source • Self-contained • No system modifications
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
27
src/components/sections/downloads/DownloadHero.vue
Normal file
27
src/components/sections/downloads/DownloadHero.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
|
||||
<div class="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 text-primary border border-primary/20 text-sm">
|
||||
Self-contained runtime • No installation required
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-balance">
|
||||
Download the NoSys Runtime
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
A fully portable peer-to-peer environment containing Python, Node.js,
|
||||
core networking modules, and the application runtime — all bundled in a single package.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<DotsMouse />
|
||||
</section>
|
||||
</template>
|
||||
25
src/components/sections/downloads/DownloadHowItWorks.vue
Normal file
25
src/components/sections/downloads/DownloadHowItWorks.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<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">
|
||||
How it Runs
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
NoSys does not install dependencies on your system. Everything runs inside its own isolated runtime.
|
||||
</p>
|
||||
|
||||
<div class="bg-card border rounded-lg p-6 text-left font-mono text-sm">
|
||||
1. Download ZIP<br/>
|
||||
2. Extract folder<br/>
|
||||
3. Run start.sh or start.bat<br/>
|
||||
4. Runtime launches Python + Node internally<br/>
|
||||
5. Modules load dynamically
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
71
src/components/sections/downloads/DownloadOptions.vue
Normal file
71
src/components/sections/downloads/DownloadOptions.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { Download, Terminal, Package } 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">
|
||||
Choose Your Download Method
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
No installation. No system dependency conflicts. Everything runs inside the noSys runtime folder.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
||||
<!-- ZIP -->
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-6 text-center">
|
||||
|
||||
<Package class="h-10 w-10 mx-auto text-primary" />
|
||||
|
||||
<h3 class="text-2xl font-bold">Runtime Bundle (Recommended)</h3>
|
||||
|
||||
<p class="text-muted-foreground">
|
||||
Download a self-contained .zip with Python, Node.js, core runtime, and default modules.
|
||||
</p>
|
||||
|
||||
<Button class="w-full">
|
||||
<Download class="h-4 w-4 mr-2" />
|
||||
Download ZIP
|
||||
</Button>
|
||||
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Works on Windows, Linux, macOS
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- CLI -->
|
||||
<Card class="border-2 opacity-80">
|
||||
<CardContent class="p-8 space-y-6 text-center">
|
||||
|
||||
<Terminal class="h-10 w-10 mx-auto text-primary" />
|
||||
|
||||
<h3 class="text-2xl font-bold">CLI Bootstrap (Coming Soon)</h3>
|
||||
|
||||
<p class="text-muted-foreground">
|
||||
Install and manage NoSys via a single command in your terminal.
|
||||
</p>
|
||||
|
||||
<div class="bg-muted p-3 rounded text-sm font-mono text-left">
|
||||
curl -sSL nosys.org/install | bash
|
||||
</div>
|
||||
|
||||
<Button variant="outline" disabled class="w-full">
|
||||
Coming Soon
|
||||
</Button>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
47
src/components/sections/downloads/DownloadRequirements.vue
Normal file
47
src/components/sections/downloads/DownloadRequirements.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import { Laptop, HardDrive, Globe } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
System Requirements
|
||||
</h2>
|
||||
|
||||
<p class="text-lg text-muted-foreground">
|
||||
NoSys runs entirely inside its own runtime environment. Your system is only used to launch the bundle.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card text-center space-y-4">
|
||||
<Laptop class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">Any Modern OS</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Windows, Linux, or macOS. No system installation required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card text-center space-y-4">
|
||||
<HardDrive class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">~9999MB Space</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Includes bundled Python runtime, Node runtime, and core modules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border rounded-lg bg-card text-center space-y-4">
|
||||
<Globe class="h-10 w-10 mx-auto text-primary" />
|
||||
<h3 class="text-xl font-bold">Offline Capable</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Works locally. Network only needed for external peer-to-peer connections.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
67
src/components/sections/home/HomeArchitecture.vue
Normal file
67
src/components/sections/home/HomeArchitecture.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Built on Peer-to-Peer Infrastructure
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
NoSys combines distributed networking, cryptographic identity,
|
||||
modular runtimes, and decentralized coordination systems.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="max-w-5xl mx-auto rounded-3xl border bg-background
|
||||
p-8 md:p-12"
|
||||
>
|
||||
|
||||
<div class="space-y-6 text-center">
|
||||
|
||||
<div class="p-5 rounded-2xl border bg-card">
|
||||
Applications & Modules
|
||||
</div>
|
||||
|
||||
<div class="text-muted-foreground">↓</div>
|
||||
|
||||
<div class="p-5 rounded-2xl border bg-card">
|
||||
NoSys Runtime
|
||||
</div>
|
||||
|
||||
<div class="text-muted-foreground">↓</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
|
||||
<div class="p-4 rounded-xl border bg-card">
|
||||
Networking
|
||||
</div>
|
||||
|
||||
<div class="p-4 rounded-xl border bg-card">
|
||||
Identity
|
||||
</div>
|
||||
|
||||
<div class="p-4 rounded-xl border bg-card">
|
||||
Rendezvous
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-muted-foreground">↓</div>
|
||||
|
||||
<div class="p-5 rounded-2xl border bg-card">
|
||||
Peer-to-Peer Network
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,30 +1,48 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<section>
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<div class="container py-24">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Start Building Decentralized Systems
|
||||
</h2>
|
||||
<div class="max-w-3xl mx-auto text-center space-y-8">
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Explore the platform, connect peers, and build applications
|
||||
without centralized infrastructure.
|
||||
</p>
|
||||
<h2 class="text-4xl font-bold text-balance">
|
||||
Explore the NoSys Ecosystem
|
||||
</h2>
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
|
||||
>
|
||||
<RouterLink to="/downloads">
|
||||
Get Started
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Install decentralized applications, join community networks,
|
||||
or build your own modules 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"
|
||||
>
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/modules">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
>
|
||||
Explore Modules
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
77
src/components/sections/home/HomeCapabilities.vue
Normal file
77
src/components/sections/home/HomeCapabilities.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
import {
|
||||
MessageCircle,
|
||||
File,
|
||||
Gamepad2,
|
||||
Bot
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
What You Can Do
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
NoSys is designed to support many types of decentralized systems.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<MessageCircle class="h-8 w-8 text-primary" />
|
||||
<h3 class="font-bold text-lg">Messaging</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Real-time decentralized communication.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<File class="h-8 w-8 text-primary" />
|
||||
<h3 class="font-bold text-lg">File Sharing</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Secure peer-to-peer file transfer systems.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<Gamepad2 class="h-8 w-8 text-primary" />
|
||||
<h3 class="font-bold text-lg">Games</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Multiplayer applications without centralized servers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<Bot class="h-8 w-8 text-primary" />
|
||||
<h3 class="font-bold text-lg">Automation</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
AI agents and distributed autonomous systems.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
83
src/components/sections/home/HomeDecentralization.vue
Normal file
83
src/components/sections/home/HomeDecentralization.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Building2, Database, ShieldOff } from 'lucide-vue-next';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
<div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Why Decentralization Matters
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5 text-muted-foreground leading-relaxed">
|
||||
|
||||
<p>
|
||||
As more communication, identity, and digital interaction move
|
||||
online, centralized platforms gain increasing control over
|
||||
infrastructure, data, and communities.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
NoSys exists to support an alternative model where applications,
|
||||
networks, and communities are owned and operated by their users.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 flex gap-4">
|
||||
<ShieldOff class="h-8 w-8 text-primary shrink-0" />
|
||||
<div>
|
||||
<h3 class="font-bold mb-2">No Central Ownership</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
The ecosystem is not controlled by a single company.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 flex gap-4">
|
||||
<Database class="h-8 w-8 text-primary shrink-0" />
|
||||
<div>
|
||||
<h3 class="font-bold mb-2">Local Identity & Data</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Identity and data are managed directly by users.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 flex gap-4">
|
||||
<Building2 class="h-8 w-8 text-primary shrink-0" />
|
||||
<div>
|
||||
<h3 class="font-bold mb-2">Community Ecosystem</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Applications and networks can evolve independently.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,40 +1,64 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Social Networks',
|
||||
'Encrypted Messaging',
|
||||
'File Distribution',
|
||||
'IoT Networks',
|
||||
'Autonomous Systems',
|
||||
'Collaborative Platforms',
|
||||
'Distributed Communities',
|
||||
'Future Decentralized Applications'
|
||||
]
|
||||
import {
|
||||
Github,
|
||||
Users,
|
||||
Terminal
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<section class="bg-card">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Build Anything on Top
|
||||
</h2>
|
||||
<div class="container py-24">
|
||||
|
||||
<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="max-w-3xl mx-auto text-center mb-16">
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Open Ecosystem
|
||||
</h2>
|
||||
|
||||
<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 class="text-xl text-muted-foreground">
|
||||
NoSys is developed openly with community contributions,
|
||||
public repositories, and modular expansion.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4 text-center">
|
||||
<Github class="h-10 w-10 text-primary mx-auto" />
|
||||
<h3 class="font-bold text-xl">Open Source</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Transparent development and public code.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4 text-center">
|
||||
<Users class="h-10 w-10 text-primary mx-auto" />
|
||||
<h3 class="font-bold text-xl">Community Driven</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Built collaboratively by contributors and users.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6 space-y-4 text-center">
|
||||
<Terminal class="h-10 w-10 text-primary mx-auto" />
|
||||
<h3 class="font-bold text-xl">Developer Friendly</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Create new applications and extend the ecosystem.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
@@ -7,47 +8,69 @@ import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
<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">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-8">
|
||||
|
||||
<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
|
||||
class="inline-flex items-center px-3 py-1 text-sm
|
||||
rounded-full border border-border"
|
||||
>
|
||||
Open Source • Peer-to-Peer • Modular
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||
Infrastructure for a Decentralized Future
|
||||
</h1>
|
||||
<div class="space-y-6">
|
||||
|
||||
<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>
|
||||
<h1
|
||||
class="text-5xl md:text-6xl lg:text-7xl
|
||||
font-bold tracking-tight text-balance"
|
||||
>
|
||||
A Platform for
|
||||
<span class="text-primary">
|
||||
Decentralized Applications
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="text-xl text-muted-foreground
|
||||
leading-relaxed max-w-2xl"
|
||||
>
|
||||
NoSys is a peer-to-peer platform where anyone can install,
|
||||
use, or create decentralized applications without relying on
|
||||
centralized platforms.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<RouterLink to="/downloads">
|
||||
<Button
|
||||
size="lg"
|
||||
class="bg-amber-400 hover:bg-amber-500 text-black"
|
||||
>
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="text-lg px-8 bg-transparent hover:text-amber-500"
|
||||
>
|
||||
<RouterLink to="/docs">
|
||||
Documentation
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<RouterLink to="/modules">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="bg-transparent"
|
||||
>
|
||||
Explore Modules
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-6 pt-4 text-sm text-muted-foreground">
|
||||
<div>Community Modules</div>
|
||||
<div>Distributed Networks</div>
|
||||
<div>Open Ecosystem</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<DotsMouse />
|
||||
|
||||
77
src/components/sections/home/HomeModules.vue
Normal file
77
src/components/sections/home/HomeModules.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
import {
|
||||
MessageSquare,
|
||||
Lock,
|
||||
Folder
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
||||
|
||||
<div class="max-w-2xl">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Featured Modules
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Applications on NoSys are distributed as modules that run
|
||||
on top of the platform.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<MessageSquare class="h-8 w-8 text-primary" />
|
||||
<div>
|
||||
<h3 class="font-bold text-xl mb-2">P2Post</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Decentralized social networking and content sharing.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<Lock class="h-8 w-8 text-primary" />
|
||||
<div>
|
||||
<h3 class="font-bold text-xl mb-2">P2Private</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Secure encrypted peer-to-peer messaging.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2 border-dashed">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<Folder class="h-8 w-8 text-primary" />
|
||||
<div>
|
||||
<h3 class="font-bold text-xl mb-2">More Modules</h3>
|
||||
<p class="text-muted-foreground">
|
||||
The ecosystem is open for community-built applications.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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,84 +0,0 @@
|
||||
<script setup>
|
||||
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">
|
||||
Core Infrastructure Principles
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Built to reduce dependency on centralized systems
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
100
src/components/sections/home/HomeWhatIs.vue
Normal file
100
src/components/sections/home/HomeWhatIs.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Boxes, Network, Shield } from 'lucide-vue-next';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
What is NoSys?
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
NoSys provides the networking, identity, and runtime systems
|
||||
needed for decentralized applications to operate directly
|
||||
between peers.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
|
||||
<div
|
||||
class="h-12 w-12 rounded-xl bg-primary/10
|
||||
flex items-center justify-center"
|
||||
>
|
||||
<Network class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">
|
||||
Peer-to-Peer
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Applications communicate directly between devices without
|
||||
depending on centralized platforms.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
|
||||
<div
|
||||
class="h-12 w-12 rounded-xl bg-primary/10
|
||||
flex items-center justify-center"
|
||||
>
|
||||
<Boxes class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">
|
||||
Modular
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Install community-built modules for messaging, social
|
||||
networking, file sharing, games, automation, and more.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
|
||||
<div
|
||||
class="h-12 w-12 rounded-xl bg-primary/10
|
||||
flex items-center justify-center"
|
||||
>
|
||||
<Shield class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">
|
||||
Open Source
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
The ecosystem is transparent, community-driven,
|
||||
and not controlled by a single company.
|
||||
</p>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
33
src/components/sections/modules/ModulesCTA.vue
Normal file
33
src/components/sections/modules/ModulesCTA.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-balance">
|
||||
Explore the Ecosystem
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Use community applications, discover decentralized experiences,
|
||||
or build entirely new systems on top of NoSys.
|
||||
</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 px-8">
|
||||
Download NoSys
|
||||
</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/documentation">
|
||||
<Button size="lg" variant="outline" class="px-8">
|
||||
Explore Documentation
|
||||
</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
95
src/components/sections/modules/ModulesCategories.vue
Normal file
95
src/components/sections/modules/ModulesCategories.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
MessageCircle,
|
||||
Users,
|
||||
Gamepad2,
|
||||
Folder,
|
||||
Radio,
|
||||
Car,
|
||||
Shield,
|
||||
Network
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const categories = [
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: 'Messaging',
|
||||
description: 'Private communication systems, encrypted chats, and decentralized communities.'
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Social Networks',
|
||||
description: 'Community-driven social platforms without centralized ownership.'
|
||||
},
|
||||
{
|
||||
icon: Folder,
|
||||
title: 'File Systems',
|
||||
description: 'Distributed file sharing and decentralized storage applications.'
|
||||
},
|
||||
{
|
||||
icon: Gamepad2,
|
||||
title: 'Games',
|
||||
description: 'Peer-to-peer multiplayer experiences without centralized servers.'
|
||||
},
|
||||
{
|
||||
icon: Radio,
|
||||
title: 'Communication Networks',
|
||||
description: 'Custom subnetworks and alternative communication layers.'
|
||||
},
|
||||
{
|
||||
icon: Car,
|
||||
title: 'Autonomous Systems',
|
||||
description: 'Machine-to-machine coordination and decentralized automation.'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Security Layers',
|
||||
description: 'Identity systems, verification tools, and trust mechanisms.'
|
||||
},
|
||||
{
|
||||
icon: Network,
|
||||
title: 'Experimental Protocols',
|
||||
description: 'Research projects and new decentralized architectures.'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
What Can Be Built?
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
NoSys is infrastructure.
|
||||
The possibilities are defined by the community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card
|
||||
v-for="category in categories"
|
||||
:key="category.title"
|
||||
class="border-2 hover:border-primary/40 transition-colors"
|
||||
>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<div class="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<component :is="category.icon" class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ category.title }}
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||||
{{ category.description }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
56
src/components/sections/modules/ModulesExamples.vue
Normal file
56
src/components/sections/modules/ModulesExamples.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
const examples = [
|
||||
{
|
||||
title: 'P2Post',
|
||||
description: 'A decentralized social media module built on top of NoSys.'
|
||||
},
|
||||
{
|
||||
title: 'P2Private',
|
||||
description: 'Encrypted peer-to-peer messaging between contacts.'
|
||||
},
|
||||
{
|
||||
title: 'Distributed File Share',
|
||||
description: 'Community-driven file sharing without centralized hosting.'
|
||||
},
|
||||
{
|
||||
title: 'Mesh Coordination Network',
|
||||
description: 'Experimental communication layer for resilient local networks.'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Example Modules
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
NoSys already supports applications that demonstrate
|
||||
what decentralized infrastructure can enable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
<Card
|
||||
v-for="example in examples"
|
||||
:key="example.title"
|
||||
class="border-2"
|
||||
>
|
||||
<CardContent class="p-8 space-y-4">
|
||||
<h3 class="text-2xl font-bold">
|
||||
{{ example.title }}
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ example.description }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
30
src/components/sections/modules/ModulesHero.vue
Normal file
30
src/components/sections/modules/ModulesHero.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 lg:py-40">
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm"
|
||||
>
|
||||
Application Ecosystem
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||
Modules Turn NoSys Into Anything
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
|
||||
NoSys is not a single application.
|
||||
It is a decentralized runtime where the community can build social networks,
|
||||
messaging apps, file systems, games, autonomous coordination systems,
|
||||
and entirely new peer-to-peer experiences.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DotsMouse />
|
||||
</section>
|
||||
</template>
|
||||
59
src/components/sections/modules/ModulesHowTheyWork.vue
Normal file
59
src/components/sections/modules/ModulesHowTheyWork.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
How Modules Run
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Modules operate on top of the NoSys runtime and infrastructure stack.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-3xl border border-border bg-background p-8 md:p-12 space-y-6">
|
||||
|
||||
<div class="rounded-2xl border border-primary/30 bg-primary/5 p-6 text-center">
|
||||
<h3 class="text-xl font-bold mb-2">Applications & Modules</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Social media, messaging, games, file systems, coordination networks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center text-muted-foreground text-2xl">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-border bg-card p-6 text-center">
|
||||
<h3 class="text-xl font-bold mb-2">VueNoSys UI Layer</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Local interfaces rendered directly on the user's machine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center text-muted-foreground text-2xl">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-border bg-card p-6 text-center">
|
||||
<h3 class="text-xl font-bold mb-2">NoSys Runtime</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Module management, APIs, peer connections, networking, and routing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center text-muted-foreground text-2xl">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-border bg-card p-6 text-center">
|
||||
<h3 class="text-xl font-bold mb-2">Core Infrastructure</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Encryption, identity, rendezvous, peer discovery, distributed communication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
68
src/components/sections/modules/ModulesOverview.vue
Normal file
68
src/components/sections/modules/ModulesOverview.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Blocks, Cpu, Globe } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Applications Built on Top of the Network
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Modules use the infrastructure provided by NoSys:
|
||||
peer discovery, encrypted communication, identity, networking,
|
||||
and decentralized coordination.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Blocks class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Independent Modules</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Every application runs as an independent module with its own logic,
|
||||
interfaces, and network behavior.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Cpu class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Shared Infrastructure</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Modules reuse the NoSys stack instead of rebuilding encryption,
|
||||
networking, peer management, and discovery from scratch.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-8 space-y-4">
|
||||
<div class="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Globe class="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold">Open Ecosystem</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Anyone can create modules, publish them,
|
||||
fork them, improve them, or build alternatives.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
75
src/components/sections/modules/ModulesSecurity.vue
Normal file
75
src/components/sections/modules/ModulesSecurity.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { ShieldCheck } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section 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-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm mb-6"
|
||||
>
|
||||
<ShieldCheck class="h-4 w-4" />
|
||||
Open & Verifiable
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Users Choose What They Run
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed text-lg">
|
||||
<p>
|
||||
NoSys does not force a single application ecosystem.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Modules are independent, open, and replaceable.
|
||||
Users can inspect code, fork projects,
|
||||
build alternatives, or choose different applications.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The goal is to reduce dependency on centralized gatekeepers
|
||||
and give communities direct control over their own digital infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Open Source</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Modules can be audited and verified by the community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Local Execution</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Interfaces and logic can run directly on the user's device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Community Governance</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Ecosystems emerge from communities instead of centralized corporations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Replaceable Systems</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
No single module controls the entire network.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user