Fixed design and texts
This commit is contained in:
Lucas
@@ -1,275 +1,42 @@
|
||||
<script setup>
|
||||
import AboutHero from "@/components/sections/about/AboutHero.vue";
|
||||
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
|
||||
import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
|
||||
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
|
||||
import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Taking Control Back from Big Tech
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
In a world where social media platforms control what you see, what you can say,
|
||||
and how your data is used, we're building something different.
|
||||
</p>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutHero/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Problem -->
|
||||
<section class="border-t border-border 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
|
||||
</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 corporations that control the
|
||||
digital lives of billions. These platforms:
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 list-disc list-inside">
|
||||
<li>Censor content based on opaque algorithms and pressure</li>
|
||||
<li>Surveil users and track every click</li>
|
||||
<li>Sell your personal data</li>
|
||||
<li>Manipulate reach with algorithms</li>
|
||||
<li>Ban users without warning</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This centralized control contradicts the promise of free communication.
|
||||
</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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutTheProblem />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission -->
|
||||
<section class="border-t border-border">
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutOurMission />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology -->
|
||||
<section class="border-t border-border 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 P2P Technology
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Modern decentralized tech for privacy and reliability.
|
||||
</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 messages and posts.
|
||||
</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 modules: chat, files, social media, etc.
|
||||
</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 DB to hack.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-border">
|
||||
<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">Download Now</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline">Learn How It Works</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutTechnology />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<AboutCTA/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
|
||||
import { AlertCircle, Target, Zap } from "lucide-vue-next"
|
||||
</script>
|
||||
|
||||
@@ -1,164 +1,43 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- Featured Post -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-16">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full mb-4">
|
||||
Featured
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold mb-4">{{ posts[0].title }}</h2>
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground mb-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<User class="h-4 w-4" />
|
||||
{{ posts[0].author }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar class="h-4 w-4" />
|
||||
{{ posts[0].date }}
|
||||
</span>
|
||||
<span class="px-2 py-1 bg-muted rounded text-xs">{{ posts[0].category }}</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">{{ posts[0].excerpt }}</p>
|
||||
<Button asChild>
|
||||
<RouterLink :to="`/blog/${posts[0].slug}`" class="flex items-center gap-1">
|
||||
Read Article
|
||||
<ArrowRight class="ml-2 h-4 w-4" />
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<section class="border-t border-border">
|
||||
<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>
|
||||
|
||||
<!-- Categories -->
|
||||
<section class="border-t border-border 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { RouterLink } from "vue-router"
|
||||
import { Calendar, User, ArrowRight } from "lucide-vue-next"
|
||||
import BlogHero from "@/components/sections/blog/BlogHero.vue"
|
||||
import BlocgRecentArticles from "@/components/sections/blog/BlogRecentArticles.vue"
|
||||
import BlogRecentArticles from "@/components/sections/blog/BlogRecentArticles.vue"
|
||||
import BlogSections from "@/components/sections/blog/BlogSections.vue"
|
||||
import UnderConstruction from "@/components/sections/UnderConstruction.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",
|
||||
},
|
||||
{
|
||||
title: "Building Privacy-First Applications",
|
||||
excerpt:
|
||||
"How we designed our platform with privacy as the foundation, not an afterthought. Learn about the cryptographic principles that protect user data.",
|
||||
author: "Security Team",
|
||||
date: "November 20, 2024",
|
||||
category: "Security",
|
||||
slug: "privacy-first-apps",
|
||||
},
|
||||
{
|
||||
title: "The Network Effect in Decentralized Systems",
|
||||
excerpt:
|
||||
"Can decentralized platforms compete with established giants? Exploring how P2P networks can grow and sustain themselves without corporate backing.",
|
||||
author: "Core Team",
|
||||
date: "November 10, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "network-effect",
|
||||
},
|
||||
{
|
||||
title: "Module Development Guide",
|
||||
excerpt:
|
||||
"A comprehensive guide for developers looking to extend the platform. Learn how to create custom modules while respecting privacy and security.",
|
||||
author: "Dev Team",
|
||||
date: "November 1, 2024",
|
||||
category: "Development",
|
||||
slug: "module-development",
|
||||
},
|
||||
{
|
||||
title: "Digital Freedom in the Modern Age",
|
||||
excerpt:
|
||||
"Why digital freedom matters more than ever in an age of increasing surveillance, censorship, and corporate control over online spaces.",
|
||||
author: "Core Team",
|
||||
date: "October 25, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "digital-freedom",
|
||||
},
|
||||
]
|
||||
|
||||
const categories = ["Philosophy", "Technology", "Security", "Development", "Community", "Updates"]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<BlogHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<BlogRecentArticles />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<BlogSections />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<UnderConstruction />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -3,6 +3,12 @@ import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { Github, MessageCircle, Bug, Code, Lightbulb, Calendar, Heart, Wallet } from "lucide-vue-next"
|
||||
import CommunityHero from "@/components/sections/community/CommunityHero.vue"
|
||||
import CommunityProjectSupport from "@/components/sections/community/CommunityProjectSupport.vue"
|
||||
import CommunityDevRoadMap from "@/components/sections/community/CommunityDevRoadMap.vue"
|
||||
import CommunityHowToContribute from "@/components/sections/community/CommunityHowToContribute.vue"
|
||||
import CommunityUpdates from "@/components/sections/community/CommunityUpdates.vue"
|
||||
import UnderConstruction from "@/components/sections/UnderConstruction.vue"
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
@@ -92,291 +98,40 @@ const updates = [
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<CommunityHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community Links -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Github class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">GitHub</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
View our source code, report issues, and contribute to development
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="w-full">
|
||||
<a href="https://github.com" target="_blank" rel="noopener noreferrer">Visit GitHub</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<MessageCircle class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Discord</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Chat with the community, get help, and discuss the platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="w-full">
|
||||
<a href="https://discord.gg" target="_blank" rel="noopener noreferrer">Join Discord</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<MessageCircle class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Matrix</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Decentralized chat alternative for those who prefer Matrix
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://matrix.to" target="_blank" rel="noopener noreferrer">Join Matrix</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Bug class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Issue Tracker</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Report bugs, request features, and track development
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://github.com/issues" target="_blank" rel="noopener noreferrer">View Issues</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<CommunityProjectSupport />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Support the Project -->
|
||||
<section id="donate" class="border-t border-border 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">
|
||||
P2P Network 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-3 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">
|
||||
<Heart class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Patreon</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Become a patron and get exclusive updates and perks
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://patreon.com" target="_blank" rel="noopener noreferrer">Join on Patreon</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">
|
||||
bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Ethereum (ETH)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Monero (XMR)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
4AdUndXHHZ6cfufTMvppY6JwXNouMBzSkbLYfpAV5Usx3skxNgYeYTRj5UzqtReoS44qo9mtmXCqY45DJ852K5Jv2684Rge
|
||||
</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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<CommunityDevRoadMap />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contribution Guide -->
|
||||
<section class="border-t border-border">
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<CommunityHowToContribute />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Roadmap -->
|
||||
<section class="border-t border-border 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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<CommunityUpdates />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Updates -->
|
||||
<section class="border-t border-border">
|
||||
<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>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<UnderConstruction />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,179 +11,31 @@ import {
|
||||
import { Book, Code, Shield, HelpCircle } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import DocsHero from "@/components/sections/documentation/DocsHero.vue"
|
||||
import DocsQuickLinks from "@/components/sections/documentation/DocsQuickLinks.vue"
|
||||
import UnderConstruction from "@/components/sections/UnderConstruction.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero -->
|
||||
<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 our P2P platform
|
||||
</p>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<DocsHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<section class="border-t border-border 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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<DocsQuickLinks />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Installation Guide -->
|
||||
<section id="installation" class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Installation Guide</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Windows -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Windows Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Windows installer from the downloads page</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify the SHA256 checksum matches the published value</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Run the installer and follow the setup wizard</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Launch the application and create your cryptographic identity</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Back up your private keys in a secure location</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Linux -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Linux Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Linux package (.deb or .rpm) or AppImage</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum: sha256sum p2p-network.deb</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Install: sudo dpkg -i p2p-network.deb (for Debian/Ubuntu)</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Or make AppImage executable: chmod +x p2p-network.AppImage</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Run the application and complete setup</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- macOS -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">macOS Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the macOS .dmg file</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum using Terminal</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Open the .dmg file and drag the app to Applications</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Right-click the app and select Open to bypass Gatekeeper</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Complete the initial setup and back up your keys</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Android -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Android Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Enable "Install from Unknown Sources" in Android settings</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Download the APK file to your device</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Verify the checksum if possible</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Tap the APK file to install</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Open the app and create your account</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Module Architecture -->
|
||||
<section id="architecture" class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Module Architecture</h2>
|
||||
<p class="text-muted-foreground leading-relaxed mb-8">
|
||||
The P2P Network is built on a modular architecture where each module handles specific functionality. All
|
||||
modules communicate through encrypted channels and respect the decentralized nature of the network.
|
||||
</p>
|
||||
|
||||
<Card class="mb-8">
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Core Modules</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/network</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Handles peer discovery, connection management, and network protocol</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/crypto</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Manages encryption, key generation, and cryptographic operations</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/storage</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Local data storage and persistence layer</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Feature Modules</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/chat</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Direct messaging and group conversations</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/social</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Waves, Currents, profiles, and feeds</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/files</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Peer-to-peer file transfer</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/filter</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Content filtering and preferences</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<UnderConstruction />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -4,229 +4,31 @@ import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { Download, Shield, AlertTriangle } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
import DownloadsHero from "@/components/sections/downloads/DownloadsHero.vue"
|
||||
import SupportGettingStarted from "@/components/sections/support/SupportGettingStarted.vue"
|
||||
import SupportNeedHelp from "@/components/sections/support/SupportNeedHelp.vue"
|
||||
|
||||
const downloads = [
|
||||
{
|
||||
platform: "Windows",
|
||||
version: "v1.2.0",
|
||||
size: "45 MB",
|
||||
sha256: "a3f5e9d2c8b1a7f4e6d3c9b2a5f8e1d4c7b0a3f6e9d2c5b8a1f4e7d0c3b6a9f2",
|
||||
url: "/downloads/libs/app/app.zip",
|
||||
},
|
||||
{
|
||||
platform: "Linux",
|
||||
version: "v1.2.0",
|
||||
size: "42 MB",
|
||||
sha256: "b4g6f0e3d9c2b8g5f7e4d0c3b6a9f2e5d8c1b4g7f0e3d6c9b2a5f8e1d4c7b0a3",
|
||||
url: "/downloads/libs/app/app.zip",
|
||||
},
|
||||
{
|
||||
platform: "macOS",
|
||||
version: "v1.2.0",
|
||||
size: "48 MB",
|
||||
sha256: "c5h7g1f4e0d3c9h6g8f5e1d4c7b0a3g8f1e4d7c0b3a6f9e2d5c8b1a4g7f0e3d6",
|
||||
url: "/downloads/libs/app/app.zip",
|
||||
},
|
||||
{
|
||||
platform: "Android APK",
|
||||
version: "v1.2.0",
|
||||
size: "38 MB",
|
||||
sha256: "d6i8h2g5f1e4d0i7h9g6f2e5d8c1b4h9g2f5e8d1c4b7a0f3e6d9c2b5a8g1f4e7",
|
||||
url: "/downloads/libs/app/app.zip",
|
||||
},
|
||||
]
|
||||
|
||||
function downloadFile(url) {
|
||||
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>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<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. Choose your platform and join the revolution.
|
||||
</p>
|
||||
|
||||
<Card class="text-left">
|
||||
<CardContent>
|
||||
<Shield class="h-4 w-4" />
|
||||
All downloads are signed and include SHA256 checksums. Always verify checksums before installing.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<DownloadsHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Downloads -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card
|
||||
v-for="download in downloads"
|
||||
:key="download.platform"
|
||||
class="border-2"
|
||||
>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-1">{{ download.platform }}</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ download.version }} • {{ download.size }}
|
||||
</p>
|
||||
</div>
|
||||
<Download class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<Button class="w-full mb-3" @click="downloadFile(download.url)">
|
||||
Download for {{ download.platform }}
|
||||
</Button>
|
||||
|
||||
<details class="text-sm">
|
||||
<summary class="cursor-pointer text-muted-foreground hover:text-foreground mb-2">
|
||||
SHA256 Checksum
|
||||
</summary>
|
||||
|
||||
<code class="block p-2 bg-muted rounded text-xs font-mono break-all">
|
||||
{{ download.sha256 }}
|
||||
</code>
|
||||
</details>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<SupportGettingStarted />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<Card class="border-primary/50 bg-primary/5">
|
||||
<AlertTriangle class="h-4 w-4 text-primary" />
|
||||
<CardContent class="text-muted-foreground leading-relaxed">
|
||||
<strong class="text-foreground">Important:</strong>
|
||||
This application is fully decentralized. You must back up your encryption keys. Losing your private key
|
||||
means permanent loss of access.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Release Notes -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Release Notes</h2>
|
||||
|
||||
<!-- v1.2.0 -->
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<h3 class="text-xl font-bold">v1.2.0</h3>
|
||||
<span class="text-sm px-2 py-1 bg-primary/10 text-primary rounded">Latest</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on December 1, 2024
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Added support for group Waves</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Improved encryption performance</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Enhanced NAT traversal</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Fixed memory leak in file transfer</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Dark mode improvements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- v1.1.5 -->
|
||||
<div class="border-t border-border pt-8">
|
||||
<h3 class="text-xl font-bold mb-4">v1.1.5</h3>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on November 15, 2024
|
||||
</p>
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Network Contract editor</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Improved peer discovery</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Fixed large file transfer bug</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Mobile optimizations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- v1.1.0 -->
|
||||
<div class="border-t border-border pt-8">
|
||||
<h3 class="text-xl font-bold mb-4">v1.1.0</h3>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on October 30, 2024
|
||||
</p>
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Introduced Currents</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Added Filter Module</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Security improvements</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Android APK now available</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Verification Guide -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">How to Verify Your Download</h2>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Windows</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
certutil -hashfile p2p-network-setup.exe SHA256
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Linux / macOS</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
sha256sum p2p-network-installer.dmg
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Android</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
sha256sum p2p-network.apk
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Compare the output to the checksums above. They must match exactly.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<SupportNeedHelp />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,116 +1,28 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Shield, Users, Unlock } from 'lucide-vue-next'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
import HomeHero from '@/components/sections/home/HomeHero.vue'
|
||||
import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
|
||||
import HomeCTA from '@/components/sections/home/HomeCTA.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<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 No One Can Control
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground text-pretty">
|
||||
Experience true digital freedom with our fully decentralized P2P social network.
|
||||
No central servers. No censorship. No surveillance. Just pure peer-to-peer connections.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" class="text-lg px-8">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="lg" class="text-lg px-8 bg-transparent">
|
||||
<RouterLink to="/how-it-works">Learn More</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomeHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Three Pillars -->
|
||||
<section class="container py-24 border-t border-border">
|
||||
<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 mb-4">
|
||||
<Shield class="h-6 w-6 text-primary" />
|
||||
</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 mb-4">
|
||||
<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 mb-4">
|
||||
<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>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HomePrinciples />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="container py-24 border-t border-border">
|
||||
<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">
|
||||
<RouterLink to="/downloads">Get Started</RouterLink>
|
||||
</Button>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<HomeCTA />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -1,368 +1,50 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero -->
|
||||
<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 Our P2P Network Works
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Understanding the technology that makes decentralized social networking possible
|
||||
</p>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- P2P Explanation -->
|
||||
<section class="border-t border-border 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 -->
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwP2P />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security & Cryptography -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Card -->
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Messages are encrypted on your device...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Public Key Cryptography</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Each user has a cryptographic identity...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Zero-Knowledge Architecture</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
The network operates without any central authority...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Secure by Default</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
All connections are encrypted automatically
|
||||
</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">
|
||||
Military-Grade Encryption
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Security isn't optional—it's fundamental to our network...
|
||||
</p>
|
||||
<p>
|
||||
Unlike traditional platforms, our encryption ensures only recipients can read content.
|
||||
</p>
|
||||
<p>
|
||||
Your identity is protected by cryptographic keys...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwEncryption />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Features -->
|
||||
<section class="border-t border-border 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">Understanding the Core Features</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Our platform consists of key components...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
<!-- Waves -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<FileText class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Waves (Posts)</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Waves propagate through peer-to-peer connections...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Currents -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<MessageSquare class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Currents (Comments)</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Currents are replies that travel with Waves...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Network Contracts -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<FileText class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Network Contracts</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
JSON-based rules define how the network operates...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwCore />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Modules -->
|
||||
<section class="border-t border-border">
|
||||
<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">
|
||||
Our platform is built with independent modules...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||
|
||||
<AccordionItem value="item-1" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<MessageSquare class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Chat Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Secure peer-to-peer messaging...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Share2 class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">File Transfer Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Direct encrypted file-sharing...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Network class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Middle Man Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Relay functionality for restrictive networks...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Network class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Rendezvous Client/Server</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Peer discovery without revealing identity...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<FileText class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Social Media Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Waves, Currents, profiles, feeds — all P2P.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Filter class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Filter Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Client-side content filtering...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</AccordionRoot>
|
||||
</div>
|
||||
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<HiwModules />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-border 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">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button size="lg" variant="outline">
|
||||
<RouterLink to="/documentation">Read Documentation</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<HiwCTA />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
AccordionContent
|
||||
} from "radix-vue"
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
|
||||
import {
|
||||
Network,
|
||||
Lock,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Share2,
|
||||
Filter
|
||||
} from 'lucide-vue-next'
|
||||
import HiwHero from '@/components/sections/hiw/HiwHero.vue'
|
||||
import HiwP2P from '@/components/sections/hiw/HiwP2P.vue'
|
||||
import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
|
||||
import HiwCore from '@/components/sections/hiw/HiwCore.vue'
|
||||
import HiwModules from '@/components/sections/hiw/HiwModules.vue'
|
||||
import HiwCTA from '@/components/sections/hiw/HiwCTA.vue'
|
||||
|
||||
</script>
|
||||
|
||||
@@ -15,176 +15,57 @@ import TextArea from "@/components/ui/TextArea.vue"
|
||||
import Label from "@/components/ui/Label.vue"
|
||||
import { Search, BookOpen, Zap, Mail } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
import SupportHero from "@/components/sections/support/SupportHero.vue"
|
||||
import SupportQuickLinks from "@/components/sections/support/SupportQuickLinks.vue"
|
||||
import SupportFAQ from "@/components/sections/support/SupportFAQ.vue"
|
||||
import SupportVideos from "@/components/sections/support/SupportVideos.vue"
|
||||
import SupportGettingStarted from "@/components/sections/support/SupportGettingStarted.vue"
|
||||
import SupportContactForm from "@/components/sections/support/SupportContactForm.vue"
|
||||
import UnderConstruction from "@/components/sections/UnderConstruction.vue"
|
||||
|
||||
const metadata = {
|
||||
title: "Support - P2P Network",
|
||||
description: "Get help with our decentralized P2P social network platform",
|
||||
}
|
||||
|
||||
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" }
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{ value: "item-1", question: "How do I get started?", answer: "Download the app for your platform from the downloads page, install it, and run the setup wizard. The app will generate your cryptographic keys and connect you to the network. Make sure to back up your private key in a secure location." },
|
||||
{ value: "item-2", question: "Is the app really free?", answer: "Yes, completely free and open source. There are no subscriptions, ads, or hidden costs. The project is maintained by the community and supported by voluntary donations." },
|
||||
{ value: "item-3", question: "What if I lose my private key?", answer: "Unfortunately, if you lose your private key, you permanently lose access to your account. There's no password reset or account recovery—this is the trade-off for true decentralization. Always keep secure backups of your keys." },
|
||||
{ value: "item-4", question: "How do I find other users?", answer: "Users can share their public keys through external channels (email, social media, etc.). Once you have someone's public key, you can add them as a connection. The app also has peer discovery features that help you find users based on shared interests." },
|
||||
{ value: "item-5", question: "Why is the app asking for firewall permissions?", answer: "P2P applications need to accept incoming connections from other peers. Your firewall might prompt you to allow this. It's safe—the app uses encrypted connections and doesn't expose your system to security risks." },
|
||||
{ value: "item-6", question: "Can I use this on multiple devices?", answer: "Yes, but you'll need to export your private key from one device and import it on others. Be extremely careful when transferring keys—use secure, encrypted channels and delete the key from insecure locations immediately after import." },
|
||||
{ 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." }
|
||||
]
|
||||
|
||||
const quickStart = [
|
||||
{ title: "Download and Install", description: "Visit the downloads page and get the version for your operating system. Verify the SHA256 checksum before installing." },
|
||||
{ title: "Create Your Identity", description: "Launch the app and follow the setup wizard. The app will generate your cryptographic key pair. Choose a strong passphrase to protect your private key." },
|
||||
{ title: "Back Up Your Keys", description: "Export your private key and store it securely offline. Consider using an encrypted USB drive or password manager. This is critical—without this backup, you can never recover your account." },
|
||||
{ title: "Connect with Peers", description: "Share your public key with friends or join community channels. Add peers by their public keys to start connecting. The app will automatically discover and connect to the network." },
|
||||
{ title: "Start Sharing", description: "Create your first Wave (post), send messages, share files, and explore the decentralized network. You're now part of a social network no one can control!" }
|
||||
]
|
||||
|
||||
const tutorials = [
|
||||
{ title: "Getting Started with P2P Network", duration: "15 minutes" },
|
||||
{ title: "Understanding Network Contracts", duration: "10 minutes" },
|
||||
{ title: "Backing Up and Securing Your Keys", duration: "8 minutes" },
|
||||
{ title: "Advanced Privacy Settings", duration: "12 minutes" }
|
||||
]
|
||||
|
||||
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>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<SupportHero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<section class="border-t border-border 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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<SupportQuickLinks />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<SupportFAQ />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Guide -->
|
||||
<section id="quick-start" class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Quick Start Guide</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(step, i) in quickStart" :key="i">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||||
{{ i + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-2">{{ step.title }}</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">{{ step.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<SupportVideos />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tutorials -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<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>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<SupportGettingStarted />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="border-t border-border 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>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<SupportContactForm />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<UnderConstruction />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user