new file: src/pages/docs.astro
This commit is contained in:
GitHub
parent
e5debfe373
commit
8ea08bf237
1 changed files with 421 additions and 0 deletions
421
src/pages/docs.astro
Normal file
421
src/pages/docs.astro
Normal file
|
|
@ -0,0 +1,421 @@
|
|||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
|
||||
const docCategories = [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
icon: '🚀',
|
||||
color: '#6cf',
|
||||
docs: [
|
||||
{ name: 'Introduction to AeThex', description: 'Overview of the ecosystem and core concepts', time: '5 min read' },
|
||||
{ name: 'Quickstart Guide', description: 'Get up and running in under 10 minutes', time: '10 min read' },
|
||||
{ name: 'Architecture Overview', description: 'Understanding the Trinity structure', time: '8 min read' },
|
||||
{ name: 'Authentication Setup', description: 'Implement SSO and identity verification', time: '12 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Core APIs',
|
||||
icon: '⚡',
|
||||
color: '#ff4d4d',
|
||||
docs: [
|
||||
{ name: 'Identity API', description: 'User authentication and profile management', time: '15 min read' },
|
||||
{ name: 'Asset API', description: 'Digital asset creation and management', time: '12 min read' },
|
||||
{ name: 'Events API', description: 'Real-time event streaming and webhooks', time: '10 min read' },
|
||||
{ name: 'Analytics API', description: 'Usage metrics and insights', time: '8 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'SDKs & Tools',
|
||||
icon: '🛠️',
|
||||
color: '#ffc700',
|
||||
docs: [
|
||||
{ name: 'JavaScript SDK', description: 'Full-featured SDK for web applications', time: '20 min read' },
|
||||
{ name: 'Python SDK', description: 'Backend integration and automation', time: '15 min read' },
|
||||
{ name: 'Unity Plugin', description: 'Game engine integration guide', time: '25 min read' },
|
||||
{ name: 'CLI Reference', description: 'Command-line tools documentation', time: '10 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Advanced Topics',
|
||||
icon: '🧠',
|
||||
color: '#a855f7',
|
||||
docs: [
|
||||
{ name: 'Decentralized Storage', description: 'IPFS and distributed data patterns', time: '18 min read' },
|
||||
{ name: 'Smart Contracts', description: 'On-chain asset management', time: '22 min read' },
|
||||
{ name: 'AI Integration', description: 'Machine learning APIs and models', time: '20 min read' },
|
||||
{ name: 'Security Best Practices', description: 'Hardening your implementation', time: '15 min read' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const popularDocs = [
|
||||
{ name: 'Quickstart Guide', views: '12.4k', icon: '📖' },
|
||||
{ name: 'Authentication Setup', views: '8.2k', icon: '🔐' },
|
||||
{ name: 'JavaScript SDK', views: '6.8k', icon: '💻' },
|
||||
{ name: 'Identity API', views: '5.1k', icon: '👤' },
|
||||
];
|
||||
---
|
||||
<MainLayout>
|
||||
<!-- Hero Section -->
|
||||
<section class="docs-hero">
|
||||
<div class="docs-hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Documentation</h1>
|
||||
<p class="hero-desc">Everything you need to build on the AeThex ecosystem. Comprehensive guides, API references, and tutorials.</p>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="docs-search">
|
||||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search documentation..." class="search-input" />
|
||||
<kbd class="search-shortcut">⌘K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<section class="docs-stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">150+</span>
|
||||
<span class="stat-label">Documentation Pages</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">4</span>
|
||||
<span class="stat-label">SDKs Available</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">50+</span>
|
||||
<span class="stat-label">Code Examples</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">Weekly</span>
|
||||
<span class="stat-label">Updates</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Popular Docs -->
|
||||
<section class="popular-section">
|
||||
<h2 class="section-title">Popular Documentation</h2>
|
||||
<div class="popular-grid">
|
||||
{popularDocs.map(doc => (
|
||||
<a href="/docs" class="popular-card">
|
||||
<span class="popular-icon">{doc.icon}</span>
|
||||
<div class="popular-info">
|
||||
<span class="popular-name">{doc.name}</span>
|
||||
<span class="popular-views">{doc.views} views</span>
|
||||
</div>
|
||||
<svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Documentation Categories -->
|
||||
<section class="docs-categories">
|
||||
{docCategories.map(category => (
|
||||
<div class="category-section">
|
||||
<div class="category-header">
|
||||
<span class="category-icon" style={`background: ${category.color}20; color: ${category.color};`}>{category.icon}</span>
|
||||
<h2 class="category-title">{category.title}</h2>
|
||||
</div>
|
||||
<div class="docs-grid">
|
||||
{category.docs.map(doc => (
|
||||
<a href="/docs" class="doc-card" style={`--accent: ${category.color};`}>
|
||||
<h3 class="doc-title">{doc.name}</h3>
|
||||
<p class="doc-description">{doc.description}</p>
|
||||
<span class="doc-time">{doc.time}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<!-- API Reference CTA -->
|
||||
<section class="api-cta">
|
||||
<div class="cta-content">
|
||||
<h2>Full API Reference</h2>
|
||||
<p>Dive into the complete API documentation with interactive examples, request/response schemas, and authentication guides.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/docs" class="cta-primary">Explore API →</a>
|
||||
<a href="https://github.com/AeThex-LABS" target="_blank" rel="noopener" class="cta-secondary">View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-code">
|
||||
<pre><code><span class="code-comment">// Example: Authenticate a user</span>
|
||||
<span class="code-keyword">const</span> user = <span class="code-keyword">await</span> aethex.auth.login({'{'}
|
||||
<span class="code-string">email</span>: <span class="code-value">'user@example.com'</span>,
|
||||
<span class="code-string">provider</span>: <span class="code-value">'sso'</span>
|
||||
{'}'});
|
||||
|
||||
<span class="code-comment">// Access user profile</span>
|
||||
<span class="code-keyword">console</span>.log(user.profile);</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Hero Section */
|
||||
.docs-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 100px 20px 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.docs-hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #0a0d14 0%, #101827 50%, #0a0d14 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
.docs-hero-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(102, 204, 255, 0.1) 0%, transparent 60%);
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.5em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.docs-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
padding: 12px 20px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.search-icon { color: #666; flex-shrink: 0; }
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
outline: none;
|
||||
}
|
||||
.search-input::placeholder { color: #666; }
|
||||
.search-shortcut {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.docs-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
margin: -30px auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
font-weight: 800;
|
||||
color: #6cf;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Popular Section */
|
||||
.popular-section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.popular-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.popular-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.popular-card:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-color: rgba(102,204,255,0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.popular-icon { font-size: 1.5em; }
|
||||
.popular-info { flex: 1; }
|
||||
.popular-name { display: block; color: #fff; font-weight: 600; font-size: 0.9em; }
|
||||
.popular-views { font-size: 0.75em; color: #666; }
|
||||
.arrow-icon { color: #666; }
|
||||
|
||||
/* Categories */
|
||||
.docs-categories {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
.category-section { margin-bottom: 48px; }
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.category-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.category-title {
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.docs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.doc-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.doc-card:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: var(--accent, #6cf);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.doc-title {
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.doc-description {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.doc-time {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* API CTA */
|
||||
.api-cta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 80px;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, rgba(102,204,255,0.05) 0%, rgba(168,85,247,0.05) 100%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.cta-content h2 {
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.cta-content p {
|
||||
color: #888;
|
||||
margin: 0 0 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cta-buttons { display: flex; gap: 12px; }
|
||||
.cta-primary {
|
||||
background: linear-gradient(135deg, #6cf 0%, #3b82f6 100%);
|
||||
color: #000;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.cta-primary:hover { transform: translateY(-2px); }
|
||||
.cta-secondary {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.cta-secondary:hover { background: rgba(255,255,255,0.1); }
|
||||
.cta-code {
|
||||
background: #0d1117;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.cta-code pre { margin: 0; }
|
||||
.cta-code code {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8;
|
||||
color: #e6edf3;
|
||||
}
|
||||
.code-comment { color: #8b949e; }
|
||||
.code-keyword { color: #ff7b72; }
|
||||
.code-string { color: #79c0ff; }
|
||||
.code-value { color: #a5d6ff; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.docs-stats, .popular-grid, .docs-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.api-cta { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.docs-stats, .popular-grid, .docs-grid { grid-template-columns: 1fr; }
|
||||
.hero-title { font-size: 2.5em; }
|
||||
}
|
||||
</style>
|
||||
</MainLayout>
|
||||
Loading…
Reference in a new issue