NebulaShell/website/views/pages/home.ejs

<!-- 首页 -->
<section class="page-home">
    <!-- 英雄区域 -->
    <div class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="title-line">一切皆为</span>
                    <span class="title-highlight">插件</span>
                </h1>
                <p class="hero-subtitle">
                    FutureOSS 是一款面向开发者的插件化运行时框架，让功能扩展变得前所未有的简单。
                </p>
                <div class="hero-actions">
                    <a href="#start" class="btn btn-primary btn-large" data-action="scroll-to-start">
                        <i class="fas fa-rocket"></i>
                        <span>快速开始</span>
                    </a>
                    <a href="https://gitee.com/starlight-apk/future-oss" class="btn btn-secondary btn-large" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-gitee"></i>
                        <span>查看源码</span>
                    </a>
                </div>
                <div class="hero-stats">
                    <div class="stat-card">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">插件化</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">15+</div>
                        <div class="stat-label">核心插件</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">3</div>
                        <div class="stat-label">协议支持</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">∞</div>
                        <div class="stat-label">扩展可能</div>
                    </div>
                </div>
            </div>
            <div class="hero-visual">
                <div class="visual-container">
                    <div class="plugin-animation">
                        <div class="core-node">
                            <i class="fas fa-cube"></i>
                            <span class="node-label">核心</span>
                        </div>
                        <div class="plugin-node" style="--delay: 0s;">
                            <i class="fas fa-globe"></i>
                            <span class="node-label">HTTP</span>
                        </div>
                        <div class="plugin-node" style="--delay: 0.3s;">
                            <i class="fas fa-bolt"></i>
                            <span class="node-label">WebSocket</span>
                        </div>
                        <div class="plugin-node" style="--delay: 0.6s;">
                            <i class="fas fa-chart-line"></i>
                            <span class="node-label">Dashboard</span>
                        </div>
                        <div class="plugin-node" style="--delay: 0.9s;">
                            <i class="fas fa-shield-alt"></i>
                            <span class="node-label">Security</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 核心价值 -->
    <div class="value-section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">为什么选择 FutureOSS？</h2>
                <p class="section-subtitle">专为现代开发需求设计的强大框架</p>
            </div>
            <div class="value-grid">
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-weight"></i>
                    </div>
                    <h3 class="value-title">极致轻量</h3>
                    <p class="value-desc">核心框架最小化，所有功能通过插件实现，按需加载，资源占用极低。</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="value-title">安全可靠</h3>
                    <p class="value-desc">数字签名验证 + 权限分级控制 + 沙箱环境，确保插件来源可信。</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="value-title">高性能</h3>
                    <p class="value-desc">支持 HTTP、TCP、WebSocket 多协议，满足不同场景的性能需求。</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </div>
                    <h3 class="value-title">无限扩展</h3>
                    <p class="value-desc">插件化架构让功能扩展变得简单，社区生态持续壮大。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速开始 -->
    <div id="start" class="start-section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">快速开始</h2>
                <p class="section-subtitle">几分钟内启动你的第一个 FutureOSS 项目</p>
            </div>
            <div class="start-steps">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <h3 class="step-title">安装依赖</h3>
                    <pre class="step-code"><code>pip install -e .</code></pre>
                    <p class="step-desc">安装 FutureOSS 及其依赖</p>
                </div>
                <div class="step-card">
                    <div class="step-number">2</div>
                    <h3 class="step-title">启动服务</h3>
                    <pre class="step-code"><code>oss serve</code></pre>
                    <p class="step-desc">启动 FutureOSS 服务器</p>
                </div>
                <div class="step-card">
                    <div class="step-number">3</div>
                    <h3 class="step-title">访问控制台</h3>
                    <pre class="step-code"><code>http://localhost:8080</code></pre>
                    <p class="step-desc">打开浏览器访问 Web 控制台</p>
                </div>
                <div class="step-card">
                    <div class="step-number">4</div>
                    <h3 class="step-title">安装插件</h3>
                    <pre class="step-code"><code># 通过控制台或API安装插件</code></pre>
                    <p class="step-desc">按需安装功能插件</p>
                </div>
            </div>
            <div class="start-actions">
                <a href="https://gitee.com/starlight-apk/future-oss/wikis/快速开始" class="btn btn-outline" target="_blank" rel="noopener noreferrer">
                    <i class="fas fa-book"></i>
                    <span>查看完整文档</span>
                </a>
            </div>
        </div>
    </div>

    <!-- CTA区域 -->
    <div class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2 class="cta-title">准备好开始了吗？</h2>
                <p class="cta-subtitle">加入 FutureOSS 社区，一起构建更好的开发者工具生态</p>
                <div class="cta-actions">
                    <a href="https://gitee.com/starlight-apk/future-oss" class="btn btn-primary btn-large" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-gitee"></i>
                        <span>Star 项目</span>
                    </a>
                    <a href="/features" class="btn btn-secondary btn-large" data-page="features">
                        <i class="fas fa-star"></i>
                        <span>了解更多</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>