73 lines
3.2 KiB
Vue
73 lines
3.2 KiB
Vue
<template>
|
||
<div class="docs-container p-6 bg-slate-900/50 rounded-xl border border-slate-700/50 backdrop-blur-md overflow-y-auto max-h-[80vh]">
|
||
<h1 class="text-3xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
|
||
Welcome to Plexus
|
||
</h1>
|
||
|
||
<section class="mb-8">
|
||
<h2 class="text-xl font-semibold mb-4 text-indigo-300">👋 Introduction</h2>
|
||
<p class="text-slate-300 leading-relaxed mb-4">
|
||
Plexus is a next-generation crypto-native social layer. Connect your wallet, chat in real-time, and earn $PLEXUS for your contributions.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="mb-8">
|
||
<h2 class="text-xl font-semibold mb-4 text-indigo-300">⚖️ The Rules of the Room</h2>
|
||
<ul class="list-disc list-inside text-slate-300 space-y-2">
|
||
<li>Be respectful to other degens.</li>
|
||
<li>No spam or repetitive shills in main channels.</li>
|
||
<li>Alpha is rewarded; noise is filtered.</li>
|
||
<li>Your wallet is your identity. Guard it well.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="mb-8">
|
||
<h2 class="text-xl font-semibold mb-4 text-indigo-300">💰 Token Economy</h2>
|
||
<p class="text-slate-300 mb-4">
|
||
Every user starts with <span class="text-indigo-400 font-mono">100 $PLEXUS</span>.
|
||
</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
|
||
<h3 class="font-bold text-slate-100 mb-2">Earning</h3>
|
||
<p class="text-sm text-slate-400">Receive reactions (Coming soon), participate in discussions, and contribute alpha to boost your balance.</p>
|
||
</div>
|
||
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
|
||
<h3 class="font-bold text-slate-100 mb-2">Spending</h3>
|
||
<p class="text-sm text-slate-400">Updating your username costs <span class="text-indigo-400 font-mono">30 $PLEXUS</span>. Quality costs, alpha pays.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mb-8">
|
||
<h2 class="text-xl font-semibold mb-4 text-indigo-300">🤖 AI Summaries</h2>
|
||
<p class="text-slate-300 leading-relaxed">
|
||
Feeling overwhelmed? Use the <span class="font-bold text-indigo-400">AI Summary</span> button in any channel to get a high-signal brief of everything you missed.
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="text-xl font-semibold mb-4 text-indigo-300">❓ FAQ</h2>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h3 class="text-slate-100 font-medium">How do I change my profile?</h3>
|
||
<p class="text-slate-400 text-sm">Head to "My Profile" in the sidebar to update your bio and banner color.</p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-slate-100 font-medium">Why did my message turn red?</h3>
|
||
<p class="text-slate-400 text-sm">A red status indicates a transaction failure or connection issue. Try refreshing!</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.docs-container::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.docs-container::-webkit-scrollbar-thumb {
|
||
background: rgba(99, 102, 241, 0.2);
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|