NoSys pages initial commit
This commit is contained in:
Lucas
382
src/views/Community.vue
Normal file
382
src/views/Community.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<script setup>
|
||||
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"
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
// Contribution Guide items
|
||||
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.",
|
||||
},
|
||||
]
|
||||
|
||||
// Roadmap items
|
||||
const roadmap = [
|
||||
{
|
||||
title: "Q1 2025 - In Progress",
|
||||
dotColor: "bg-primary",
|
||||
tasks: [
|
||||
"Mobile iOS app development",
|
||||
"Improved NAT traversal for restrictive networks",
|
||||
"Group video calling module",
|
||||
"Enhanced content discovery algorithms",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Q2 2025 - Planned",
|
||||
dotColor: "bg-muted-foreground",
|
||||
tasks: [
|
||||
"Distributed storage for larger media files",
|
||||
"Advanced reputation and trust metrics",
|
||||
"Built-in Tor integration for enhanced anonymity",
|
||||
"Marketplace module for P2P commerce",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Q3-Q4 2025 - Future",
|
||||
dotColor: "bg-muted-foreground",
|
||||
tasks: [
|
||||
"Cross-platform desktop synchronization",
|
||||
"Blockchain integration for identity verification (optional)",
|
||||
"Plugin ecosystem marketplace",
|
||||
"Advanced analytics dashboard for users",
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// Recent updates
|
||||
const updates = [
|
||||
{
|
||||
title: "v1.2.0 Released",
|
||||
date: "Dec 1, 2024",
|
||||
description: "Major update with group Waves, improved encryption performance, and enhanced NAT traversal. See full release notes on the downloads page.",
|
||||
},
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user