Fixed design and texts
This commit is contained in:
Lucas
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user