Fixed design and texts
This commit is contained in:
Lucas
@@ -6,9 +6,9 @@ const currentYear = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="border-t border-border bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<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">
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
@@ -18,7 +18,7 @@ const currentYear = new Date().getFullYear()
|
||||
<span class="font-bold text-lg">NoSys</span>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
A social network no one can control. 100% decentralized.
|
||||
A social network no one can control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -53,11 +53,6 @@ const currentYear = new Date().getFullYear()
|
||||
Documentation
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Community
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Blog
|
||||
@@ -85,33 +80,52 @@ const currentYear = new Date().getFullYear()
|
||||
Open Source License
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Community -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink
|
||||
to="/community#donate"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Heart class="h-4 w-4" />
|
||||
Donate
|
||||
<RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Other plataforms
|
||||
</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 flex items-center gap-2"
|
||||
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 border-t border-border text-center text-sm text-muted-foreground">
|
||||
<p>© {{ currentYear }} NoSys. Open source and decentralized.</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
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)
|
||||
|
||||
@@ -17,13 +17,14 @@ const navLinks = [
|
||||
{ href: "/blog", label: "Blog" },
|
||||
{ href: "/support", label: "Support" },
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
|
||||
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 flex h-16 items-center justify-between">
|
||||
<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" />
|
||||
@@ -32,7 +33,7 @@ const navLinks = [
|
||||
</RouterLink>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
<nav class="hidden md:flex items-center gap-4">
|
||||
<RouterLink
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
@@ -49,9 +50,11 @@ const navLinks = [
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ThemeToggleButton class="hidden md:flex mr-5"></ThemeToggleButton>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
class="md:hidden"
|
||||
class="md:hidden pr-4"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
@@ -62,7 +65,7 @@ const navLinks = [
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
|
||||
<nav class="container py-4 flex flex-col gap-4">
|
||||
<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"
|
||||
@@ -76,6 +79,8 @@ const navLinks = [
|
||||
<Button class="w-full">
|
||||
<RouterLink to="/downloads">Download</RouterLink>
|
||||
</Button>
|
||||
|
||||
<ThemeToggleButton></ThemeToggleButton>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
28
src/components/sections/UnderConstruction.vue
Normal file
28
src/components/sections/UnderConstruction.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import { Wrench } from "lucide-vue-next"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="py-24 bg-background">
|
||||
<div class="container mx-auto max-w-3xl px-4 text-center">
|
||||
|
||||
<div class="flex flex-col items-center gap-6 border border-border rounded-xl bg-card p-10">
|
||||
<Wrench class="h-10 w-10 text-muted-foreground animate-spin-slow" />
|
||||
|
||||
<h2 class="text-3xl font-bold">
|
||||
Page Under Construction
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed max-w-xl">
|
||||
This page is currently being developed.
|
||||
We are actively working on it and it will be available soon.
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-muted-foreground">
|
||||
NoSys is built openly and evolves continuously with the community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
29
src/components/sections/about/AboutCTA.vue
Normal file
29
src/components/sections/about/AboutCTA.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download the app and experience social media without corporate control.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<RouterLink to="/downloads">
|
||||
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">Download Now</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline" class="hover:text-amber-500">Learn How It Works</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
20
src/components/sections/about/AboutHero.vue
Normal file
20
src/components/sections/about/AboutHero.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 text-center">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Taking Control Back from Big Tech
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
In a world where social media platforms control what you see, what you can say,
|
||||
and how your data is used, we're building something different.
|
||||
</p>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
87
src/components/sections/about/AboutOurMission.vue
Normal file
87
src/components/sections/about/AboutOurMission.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Target } from 'lucide-vue-next';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">No Central Authority</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Peer-to-peer connections remove central control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Communications secured and private
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">User Ownership</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
You own your identity and data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Open Source</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Transparency through open code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="order-1 lg:order-2">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
|
||||
text-primary rounded-full border border-primary/20 mb-6"
|
||||
>
|
||||
<Target class="h-4 w-4" />
|
||||
Our Mission
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Giving Control Back to Users
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
We're building a social network based on privacy, free expression and autonomy.
|
||||
</p>
|
||||
|
||||
<p class="text-lg font-semibold text-foreground">
|
||||
A truly peer-to-peer network where no one can censor or exploit you.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Decentralization + encryption + open source = independence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
67
src/components/sections/about/AboutTechnology.vue
Normal file
67
src/components/sections/about/AboutTechnology.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Zap } from 'lucide-vue-next';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
|
||||
text-accent rounded-full border border-accent/20 mb-6"
|
||||
>
|
||||
<Zap class="h-4 w-4" />
|
||||
Technology
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Built on Modern Peer-to-Peer Technology
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Designed with contemporary decentralized architectures to deliver privacy, resilience, and reliable communication without central dependencies.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Direct peer communication without servers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encrypted data.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Modular Design</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Expand with community modules.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Distributed Network</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No servers to shut down, no central database to hack.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
109
src/components/sections/about/AboutTheProblem.vue
Normal file
109
src/components/sections/about/AboutTheProblem.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<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 Problem of Centralization
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Centralized Platforms Are Broken
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Today's social media landscape is dominated by centralized corporations that
|
||||
control the digital lives of billions and operate under state jurisdiction.
|
||||
These platforms:
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 list-disc list-inside">
|
||||
<li>Censor content based on opaque algorithms and legal pressure</li>
|
||||
<li>Are subject to state laws, regulations, and political influence</li>
|
||||
<li>Surveil users and track every interaction</li>
|
||||
<li>Sell personal data as a business model</li>
|
||||
<li>Manipulate visibility through proprietary algorithms</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
When communication infrastructure is centralized and bound by state authority,
|
||||
true freedom of expression becomes structurally impossible.
|
||||
</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">Censorship</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Arbitrary content removal without transparency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Surveillance</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Constant tracking of user activities
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Data Exploitation</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Personal information sold as a commodity
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Algorithmic Control</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Manipulation of what content you see
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">State Dependency</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
User expression limited by government authority
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
17
src/components/sections/blog/BlogHero.vue
Normal file
17
src/components/sections/blog/BlogHero.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Blog</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Thoughts on digital freedom, decentralization, privacy, and the future of social networking
|
||||
</p>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
66
src/components/sections/blog/BlogRecentArticles.vue
Normal file
66
src/components/sections/blog/BlogRecentArticles.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
|
||||
const posts = [
|
||||
// {
|
||||
// title: "The Case for Decentralized Social Media",
|
||||
// excerpt:
|
||||
// "Why the future of social networking must be peer-to-peer, and how centralized platforms have failed users through censorship, surveillance, and data exploitation.",
|
||||
// author: "Core Team",
|
||||
// date: "December 5, 2024",
|
||||
// category: "Philosophy",
|
||||
// slug: "case-for-decentralization",
|
||||
// },
|
||||
// {
|
||||
// title: "Understanding P2P Networking",
|
||||
// excerpt:
|
||||
// "A deep dive into how peer-to-peer networks function, the challenges they solve, and why they're more resilient than traditional client-server architectures.",
|
||||
// author: "Tech Team",
|
||||
// date: "November 28, 2024",
|
||||
// category: "Technology",
|
||||
// slug: "understanding-p2p",
|
||||
// },
|
||||
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Recent Articles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card v-for="post in posts.slice(1)" :key="post.slug">
|
||||
<CardContent class="pt-6">
|
||||
<div class="mb-3">
|
||||
<span class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">{{ post.category }}</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">{{ post.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed mb-4">{{ post.excerpt }}</p>
|
||||
<div class="flex items-center gap-3 text-xs text-muted-foreground mb-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<User class="h-3 w-3" />
|
||||
{{ post.author }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar class="h-3 w-3" />
|
||||
{{ post.date }}
|
||||
</span>
|
||||
</div>
|
||||
<Button asChild variant="ghost" size="sm" class="p-0 h-auto">
|
||||
<RouterLink :to="`/blog/${post.slug}`" class="flex items-center gap-1">
|
||||
Read More
|
||||
<ArrowRight class="h-4 w-4" />
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
20
src/components/sections/blog/BlogSections.vue
Normal file
20
src/components/sections/blog/BlogSections.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
const categories = ["Philosophy", "Technology", "Security", "Development", "Community", "Updates"]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Browse by Category</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<Button v-for="category in categories" :key="category" asChild variant="outline">
|
||||
<RouterLink :to="`/blog/category/${category.toLowerCase()}`">{{ category }}</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
66
src/components/sections/community/CommunityDevRoadMap.vue
Normal file
66
src/components/sections/community/CommunityDevRoadMap.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<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>
|
||||
18
src/components/sections/community/CommunityHero.vue
Normal file
18
src/components/sections/community/CommunityHero.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Connect with developers, contributors, and users who are building the future of decentralized social media
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<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>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Github, Heart, Wallet } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="donate" class="bg-primary/5">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8 justify-center">
|
||||
<Heart class="h-8 w-8 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
|
||||
</div>
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
NoSys is a 100% open-source project built by volunteers who believe in a free and decentralized
|
||||
internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-12">
|
||||
<Button size="lg" class="text-lg px-8 py-6 h-auto">
|
||||
<Heart class="h-5 w-5 mr-2" />
|
||||
Support Our Mission
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 gap-6">
|
||||
<!-- <Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Github class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Support us directly through GitHub's sponsorship program
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
|
||||
Sponsor on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card> -->
|
||||
|
||||
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Wallet class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Crypto</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Donate using Bitcoin, Ethereum, or other cryptocurrencies
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="#crypto-wallets">View Wallets</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Crypto Wallets -->
|
||||
<div class="mt-12 p-6 bg-card rounded-lg border border-border">
|
||||
<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<Wallet class="h-5 w-5 text-primary" />
|
||||
Cryptocurrency Wallets
|
||||
</h3>
|
||||
<div class="space-y-4" id="crypto-wallets">
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-4">
|
||||
All donations go directly to supporting development, infrastructure, and community initiatives. Thank
|
||||
you for your support!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
50
src/components/sections/community/CommunityUpdates.vue
Normal file
50
src/components/sections/community/CommunityUpdates.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<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>
|
||||
23
src/components/sections/documentation/DocsHero.vue
Normal file
23
src/components/sections/documentation/DocsHero.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
import { Book } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Book class="h-4 w-4" />
|
||||
Documentation
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Developer Documentation</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Everything you need to use, customize, and build on NoSys
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
39
src/components/sections/documentation/DocsQuickLinks.vue
Normal file
39
src/components/sections/documentation/DocsQuickLinks.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import { Book, Code, HelpCircle, Shield } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#installation" class="flex flex-col items-center gap-2">
|
||||
<Book class="h-5 w-5" />
|
||||
<span>Installation</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#architecture" class="flex flex-col items-center gap-2">
|
||||
<Code class="h-5 w-5" />
|
||||
<span>Architecture</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#security" class="flex flex-col items-center gap-2">
|
||||
<Shield class="h-5 w-5" />
|
||||
<span>Security</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#faq" class="flex flex-col items-center gap-2">
|
||||
<HelpCircle class="h-5 w-5" />
|
||||
<span>FAQ</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
60
src/components/sections/downloads/DownloadsHero.vue
Normal file
60
src/components/sections/downloads/DownloadsHero.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Download, Shield } from 'lucide-vue-next';
|
||||
|
||||
function downloadFile() {
|
||||
const url = "/downloads/libs/app/start.py";
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = url.split('/').pop();
|
||||
document.body.appendChild(link);
|
||||
console.log(link)
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6"
|
||||
>
|
||||
<Download class="h-4 w-4" />
|
||||
Latest Release
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||||
Download NoSys
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground mb-8">
|
||||
Get started with decentralized social networking.
|
||||
</p>
|
||||
|
||||
<div class=" flex items-center justify-center mt-4">
|
||||
<Card class="border-2 flex justify-center items-center">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-1">Windows / Linux / MacOs</h3>
|
||||
</div>
|
||||
<Download class="ml-4 h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<Button class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black" @click="downloadFile()">
|
||||
Download
|
||||
</Button>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
|
||||
|
||||
</section>
|
||||
</template>
|
||||
31
src/components/sections/hiw/HiwCTA.vue
Normal file
31
src/components/sections/hiw/HiwCTA.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Ready to Experience True P2P?
|
||||
</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download the app and see decentralized social networking in action
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button size="lg" variant="outline" class="hover:text-amber-500">
|
||||
<RouterLink to="/documentation">Read Documentation</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
50
src/components/sections/hiw/HiwCore.vue
Normal file
50
src/components/sections/hiw/HiwCore.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
import { Zap, Server, FileText } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
|
||||
<p class="text-muted-foreground max-w-xl mx-auto">
|
||||
NoSys empowers you to create decentralized networks with full control over communication rules,
|
||||
while providing tools to easily discover and connect with peers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center">
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<FileText class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">Networks</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Create your own networks and define the rules for how peers communicate within them.
|
||||
You control who can join and how information flows.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8 text-center">
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<Server class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">Rendezvous Servers</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
These central points help you find and connect to peers when you first join a network.
|
||||
They make peer discovery simple while keeping your interactions decentralized.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
84
src/components/sections/hiw/HiwEncryption.vue
Normal file
84
src/components/sections/hiw/HiwEncryption.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Lock } from 'lucide-vue-next';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Messages are protected from the moment they leave your device
|
||||
until they reach the intended recipient.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Key-Based Identity</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Your identity is represented by cryptographic keys stored locally,
|
||||
not by accounts managed on central servers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Public Verification</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Public keys allow others to verify interactions without accessing
|
||||
private information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Decentralized Trust</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Trust is established through cryptography, not through a single authority.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Right Text -->
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Lock class="h-4 w-4" />
|
||||
Security
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Encryption You Control
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Security is not a feature — it is the foundation of the network.
|
||||
</p>
|
||||
<p>
|
||||
Each user has a private key that stays on their device.
|
||||
This key represents your identity and is used to securely sign and protect
|
||||
your interactions on the network.
|
||||
</p>
|
||||
<p>
|
||||
Public keys allow others to verify your identity and exchange information
|
||||
with you safely, without revealing your private data.
|
||||
</p>
|
||||
<p>
|
||||
Instead of relying on centralized databases of passwords,
|
||||
identity is managed locally through cryptographic keys that you own.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
19
src/components/sections/hiw/HiwHero.vue
Normal file
19
src/components/sections/hiw/HiwHero.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
How NoSys Works
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Understanding the technology that makes decentralized social networking possible
|
||||
</p>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
137
src/components/sections/hiw/HiwModules.vue
Normal file
137
src/components/sections/hiw/HiwModules.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { Box, Key, Cpu, Server, File, Users, Lock, Cable, AppWindowMac, FileBox, MessageSquareLock, MessageSquareQuote } from "lucide-vue-next"
|
||||
import {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
AccordionContent
|
||||
} from "radix-vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<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">Modular Architecture</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
NoSys is built with independent modules. Some come by default, and the community can add more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||
|
||||
<AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Box class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">FSPN</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
The Free Speech Protocol Network handles the basic connections between users, ensuring everyone can communicate freely.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Key class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">LockBox</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Manages your private and public keys, keeping your identity and data secure.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="nosys-core" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Cpu class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">NoSys Core</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
The heart of the platform: manages peers, connections, settings, servers, and modules.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="api" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Cable class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">API</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Handles the endpoints that modules expose, allowing secure communication and integration.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="vuernosys" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<AppWindowMac class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">VueNoSys</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
The browser-based front-end: modules provide their interfaces here, all running locally.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Server class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Rendezvous</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Helps users and servers find each other, simplifying initial connections.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<FileBox class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">FileTransfer</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Securely manages file transfers, ensuring reliability and privacy.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="p2post" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<MessageSquareQuote class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">P2Post</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
The social network module: creates networks, manages posts, profiles, friends, and network rules.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="p2private" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<MessageSquareLock class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">P2Private</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Focused on private communication between you and your contacts, keeping messages secure.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
</AccordionRoot>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
81
src/components/sections/hiw/HiwP2P.vue
Normal file
81
src/components/sections/hiw/HiwP2P.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Network } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Left Text -->
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Network class="h-4 w-4" />
|
||||
Peer-to-Peer
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Direct Connections, No Middlemen
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
In traditional social media, all your data flows through corporate servers...
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-foreground">
|
||||
With P2P, you connect directly to other users.
|
||||
</strong>
|
||||
</p>
|
||||
<p>
|
||||
This architecture makes the network censorship-resistant and resilient...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
||||
<div class="text-muted-foreground">→</div>
|
||||
<div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
|
||||
Server
|
||||
</div>
|
||||
<div class="text-muted-foreground">→</div>
|
||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground mt-4">
|
||||
All data flows through corporate servers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
||||
Peer
|
||||
</div>
|
||||
<div class="text-primary">↔</div>
|
||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
||||
Peer
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground mt-4">
|
||||
Direct connections between users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
20
src/components/sections/home/HomeCTA.vue
Normal file
20
src/components/sections/home/HomeCTA.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<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-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download our app and experience a social network built for freedom, not profit.
|
||||
</p>
|
||||
<Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
|
||||
<RouterLink to="/downloads">Get Started</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
40
src/components/sections/home/HomeHero.vue
Normal file
40
src/components/sections/home/HomeHero.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32 lg:py-40">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||
100% Peer-to-Peer
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||
A Social Network Built for Free Expression
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground text-pretty">
|
||||
A peer-to-peer social network designed to keep communication open,
|
||||
transparent, and user-controlled.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="lg" class="text-lg px-8 bg-transparent hover:text-amber-500">
|
||||
<RouterLink to="/how-it-works">Learn More</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
62
src/components/sections/home/HomePrinciples.vue
Normal file
62
src/components/sections/home/HomePrinciples.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { Shield, Unlock, Users } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Our mission is to give you back control of your digital life
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<Shield class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Privacy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encryption ensures your data belongs only to you.
|
||||
No corporate surveillance, no data mining, no third-party access.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Unlock class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Autonomy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
You own your content, connections, and identity.
|
||||
No platform can ban you, shadow ban you, or restrict your reach.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Users class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Decentralization</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No single point of failure or control.
|
||||
The network runs on peer-to-peer connections,
|
||||
making it resilient and censorship-resistant.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
45
src/components/sections/support/SupportContactForm.vue
Normal file
45
src/components/sections/support/SupportContactForm.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import Input from '@/components/ui/Input.vue';
|
||||
import Label from '@/components/ui/Label.vue';
|
||||
import TextArea from '@/components/ui/TextArea.vue';
|
||||
|
||||
const contactFields = [
|
||||
{ id: "name", label: "Name", component: Input, props: { placeholder: "Your name" } },
|
||||
{ id: "email", label: "Email", component: Input, props: { type: "email", placeholder: "your@email.com" } },
|
||||
{ id: "subject", label: "Subject", component: Input, props: { placeholder: "How can we help?" } },
|
||||
{ id: "message", label: "Message", component: TextArea, props: { placeholder: "Describe your issue or question in detail...", class: "min-h-32" } }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="contact" class=" bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Still Need Help?</h2>
|
||||
<p class="text-muted-foreground text-center mb-8">
|
||||
Send us a message and we'll get back to you as soon as possible
|
||||
</p>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<form class="space-y-6">
|
||||
<div class="space-y-2" v-for="field in contactFields" :key="field.id">
|
||||
<Label :for="field.id">{{ field.label }}</Label>
|
||||
<component :is="field.component" v-bind="field.props" />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">Send Message</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<p class="text-sm text-muted-foreground text-center mt-6">
|
||||
You can also reach us at
|
||||
<a href="mailto:support@p2pnetwork.org" class="text-primary hover:underline">support@nosys.org</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
24
src/components/sections/support/SupportFAQ.vue
Normal file
24
src/components/sections/support/SupportFAQ.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue';
|
||||
|
||||
const faqs = [
|
||||
// { value: "item-7", question: "How do I report inappropriate content?", answer: "There's no central authority to report to. Instead, use the Filter Module to block content or users you don't want to see. Communities can also establish their own moderation through Network Contracts with democratic voting systems." },
|
||||
// { value: "item-8", question: "Is my internet activity monitored?", answer: "No. All connections are encrypted, and there's no central server logging your activity. Your ISP can see that you're using P2P software but cannot see the content. For maximum privacy, you can route connections through Tor." }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24 text-center">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Frequently Asked Questions</h2>
|
||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||
<AccordionItem v-for="(item, i) in faqs" :key="i" :value="item.value" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger>{{ item.question }}</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground leading-relaxed">{{ item.answer }}</AccordionContent>
|
||||
</AccordionItem>
|
||||
</AccordionRoot>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
75
src/components/sections/support/SupportGettingStarted.vue
Normal file
75
src/components/sections/support/SupportGettingStarted.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="py-24 bg-background">
|
||||
<div class="container mx-auto max-w-4xl px-4">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Getting Started
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
NoSys is designed to be simple, portable, and fully under your control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="space-y-10">
|
||||
|
||||
<!-- What you download -->
|
||||
<div class="bg-card border border-border rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-3">
|
||||
What You Download
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
The download provides a single file: <strong>start.py</strong>.
|
||||
This file is responsible for setting up and launching NoSys on your machine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Requirements -->
|
||||
<div class="bg-card border border-border rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-3">
|
||||
System Requirements
|
||||
</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-muted-foreground">
|
||||
<li>Python installed and available in your system path</li>
|
||||
<li>Node.js installed (used for the user interface)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="bg-card border border-border rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4">
|
||||
How to Run NoSys
|
||||
</h3>
|
||||
|
||||
<ol class="list-decimal list-inside space-y-3 text-muted-foreground">
|
||||
<li>Create a directory anywhere on your system (empty is recommended).</li>
|
||||
<li>Place <strong>start.py</strong> inside that directory.</li>
|
||||
<li>Run the script using Python.</li>
|
||||
</ol>
|
||||
|
||||
<div class="mt-6 rounded-lg bg-background border border-border p-4 font-mono text-sm">
|
||||
<span class="text-primary">$</span> python start.py
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What happens -->
|
||||
<div class="bg-card border border-border rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-3">
|
||||
What Happens Next
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
When executed, the script automatically downloads all required components,
|
||||
creates an isolated environment, prepares data and log folders,
|
||||
and launches NoSys when everything is ready.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
26
src/components/sections/support/SupportHero.vue
Normal file
26
src/components/sections/support/SupportHero.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
|
||||
import Input from '@/components/ui/Input.vue';
|
||||
import { Search } from 'lucide-vue-next';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">How Can We Help?</h1>
|
||||
<p class="text-xl text-muted-foreground mb-8">
|
||||
Find answers to common questions or reach out to our community
|
||||
</p>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<Search class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input placeholder="Search for help..." class="pl-12 h-14 text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DotsMouse></DotsMouse>
|
||||
</section>
|
||||
</template>
|
||||
30
src/components/sections/support/SupportNeedHelp.vue
Normal file
30
src/components/sections/support/SupportNeedHelp.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="py-16 bg-background">
|
||||
<div class="container mx-auto max-w-3xl px-4 text-center">
|
||||
|
||||
<div class="bg-card border border-border rounded-xl p-8">
|
||||
<h3 class="text-2xl font-semibold mb-4">
|
||||
Need Help?
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
If you encounter any issues while setting up or running NoSys,
|
||||
we recommend visiting our support page. There you will find guidance,
|
||||
troubleshooting steps, and ways to get help from the community.
|
||||
</p>
|
||||
|
||||
<RouterLink
|
||||
to="/support"
|
||||
class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-primary-foreground font-medium hover:opacity-90 transition"
|
||||
>
|
||||
Go to Support
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
33
src/components/sections/support/SupportQuickLinks.vue
Normal file
33
src/components/sections/support/SupportQuickLinks.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
import { BookOpen, Mail, Zap } from 'lucide-vue-next';
|
||||
|
||||
const quickLinks = [
|
||||
{ icon: BookOpen, title: "Documentation", description: "Complete technical guides and API reference", href: "/documentation", buttonText: "View Docs" },
|
||||
{ icon: Zap, title: "Quick Start", description: "Get up and running in minutes", href: "#quick-start", buttonText: "Get Started" },
|
||||
{ icon: Mail, title: "Contact Us", description: "Send us a message directly", href: "#contact", buttonText: "Contact Form" }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
<Card class="border-2" v-for="(link, i) in quickLinks" :key="i">
|
||||
<CardContent class="pt-6 text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<component :is="link.icon" class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">{{ link.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">{{ link.description }}</p>
|
||||
<Button asChild variant="outline" class="w-full bg-transparent">
|
||||
<RouterLink :to="link.href">{{ link.buttonText }}</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
29
src/components/sections/support/SupportVideos.vue
Normal file
29
src/components/sections/support/SupportVideos.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import Card from '@/components/ui/Card.vue';
|
||||
import CardContent from '@/components/ui/CardContent.vue';
|
||||
|
||||
const tutorials = [
|
||||
// { title: "Getting Started with NoSys", duration: "10 minutes" },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="">
|
||||
<div class="container py-24 text-center">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Video Tutorials</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card v-for="(video, i) in tutorials" :key="i">
|
||||
<CardContent class="pt-6">
|
||||
<div class="aspect-video bg-muted rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="text-muted-foreground">Tutorial Video</span>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">{{ video.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ video.duration }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
29
src/components/ui/ThemeToggleButton.vue
Normal file
29
src/components/ui/ThemeToggleButton.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import { Moon, Sun } from 'lucide-vue-next'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isDark = computed(() => themeStore.theme === 'dark')
|
||||
|
||||
function toggleTheme() {
|
||||
themeStore.setTheme(isDark.value ? 'light' : 'dark')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click="toggleTheme"
|
||||
class="flex items-center justify-center p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition w-10 h-10"
|
||||
:aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
|
||||
>
|
||||
<Moon v-if="isDark" class="h-5 w-5" />
|
||||
<Sun v-else class="h-5 w-5" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user