8bd75f1996
- 引入Google Fonts: Space Grotesk(标题), Inter(正文), Noto Sans SC(中文), Fira Code(代码) - 首页标题使用Space Grotesk，正文使用Inter+思源黑体 - 文档页统一应用新字体方案 - 全部开源字体，商用免费
827 lines
45 KiB
Vue
827 lines
45 KiB
Vue
<template>
|
||
<div class="home-root" :class="{ dark: isDark }">
|
||
|
||
<!-- Navbar -->
|
||
<header class="home-nav" :class="{ scrolled: scrollY > 8, 'nav-menu-open': menuOpen }" ref="navEl">
|
||
<div class="home-nav-inner">
|
||
<a class="home-brand" href="#top" aria-label="MengStack 首页">
|
||
<img class="light-logo" src="/logo-light.png" alt="" width="30" height="30" />
|
||
<img class="dark-logo" src="/logo-dark.png" alt="" width="30" height="30" />
|
||
MengStack
|
||
</a>
|
||
<nav class="home-nav-links" aria-label="主导航">
|
||
<a href="#top" class="active">首页</a>
|
||
<a href="/guide/what-is-mengstack">指南</a>
|
||
<a href="/api/overview">API 参考</a>
|
||
<a href="/changelog">更新日志</a>
|
||
<a href="/demo">在线演示</a>
|
||
<a href="/community">社区</a>
|
||
</nav>
|
||
<div class="home-nav-actions">
|
||
<button class="home-icon-btn" aria-label="切换明暗主题" title="切换主题" @click="handleToggle">
|
||
<svg aria-hidden="true" class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||
<svg aria-hidden="true" class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>
|
||
</button>
|
||
<button class="home-icon-btn hamburger" aria-label="展开菜单" :aria-expanded="menuOpen" @click="menuOpen = !menuOpen">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
|
||
<!-- Hero -->
|
||
<section class="home-hero">
|
||
<div class="home-wrap home-hero-grid">
|
||
<div>
|
||
<span class="home-badge"><span class="dot"></span>云原生 × AI 原生 · MIT 开源</span>
|
||
<h1><span class="grad">MengStack</span><br />企业级 Go 语言微服务开发框架</h1>
|
||
<p class="sub">面向云原生与 AI 时代的一站式全栈开发底座</p>
|
||
<p class="tagline">组件化集成、零侵入依赖注入、全链路国产化适配——开箱即用，让团队专注核心业务，不再重复造轮子。</p>
|
||
<div class="home-hero-actions">
|
||
<a class="home-btn home-btn-primary home-btn-lg" href="/guide/getting-started">
|
||
快速开始
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||
</a>
|
||
<a class="home-btn home-btn-ghost home-btn-lg" href="/demo">在线演示</a>
|
||
<a class="home-btn home-btn-ghost home-btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .3.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
|
||
GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="home-terminal" aria-label="代码示例终端">
|
||
<div class="home-terminal-bar"><i></i><i></i><i></i><span>main.go — mengstack</span></div>
|
||
<div class="home-terminal-body">
|
||
<div class="ln"><span class="kw">package</span> main</div>
|
||
<div class="ln"> </div>
|
||
<div class="ln"><span class="kw">import</span> <span class="str">"github.com/mengstack/mengstack"</span></div>
|
||
<div class="ln"> </div>
|
||
<div class="ln"><span class="kw">func</span> <span class="fn">main</span>() {</div>
|
||
<div class="ln"> app := mengstack.<span class="fn">New</span>()</div>
|
||
<div class="ln"> app.<span class="fn">Run</span>(<span class="num">":2222"</span>) <span class="cursor"></span></div>
|
||
<div class="ln">}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Trust strip -->
|
||
<div class="home-trust">
|
||
<div class="home-trust-inner">
|
||
<span class="home-trust-label">运行环境</span>
|
||
<span class="home-chip">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9V3m0 18v-2M3 12h2m14 0h2M6 6l1.5 1.5M16.5 16.5 18 18M18 6l-1.5 1.5M7.5 16.5 6 18"/><circle cx="12" cy="12" r="3.2"/></svg>
|
||
Go 1.23+
|
||
</span>
|
||
<span class="home-chip">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
|
||
PostgreSQL 14+
|
||
</span>
|
||
<span class="home-chip">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0-6 6v3a6 6 0 0 0 12 0V9"/><path d="M9 21h6M12 18v3"/></svg>
|
||
Redis 7+
|
||
</span>
|
||
<span class="home-chip">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="3" y="9" width="4" height="4"/><rect x="10" y="9" width="4" height="4"/><rect x="17" y="9" width="4" height="4"/><rect x="3" y="15.5" width="4" height="4"/><rect x="10" y="15.5" width="4" height="4"/><rect x="17" y="15.5" width="4" height="4"/><path d="M7 11h3m4 0h3M7 17.5h3m4 0h3"/></svg>
|
||
Docker Compose
|
||
</span>
|
||
<span class="home-chip">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z"/></svg>
|
||
MIT 开源
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features -->
|
||
<section class="home-section home-features" id="features">
|
||
<div class="home-wrap">
|
||
<div class="home-section-head reveal">
|
||
<span class="home-eyebrow">Core Capabilities</span>
|
||
<h2>七大核心能力，覆盖企业级开发全链路</h2>
|
||
<p>从架构搭建到 AI 集成，生产验证的模块开箱即用，大幅降低中大型项目的架构成本。</p>
|
||
</div>
|
||
<div class="home-feature-grid stagger">
|
||
|
||
<article class="home-feature reveal" style="--i:0">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M17.5 14v7M14 17.5h7"/></svg>
|
||
</div>
|
||
<h3>全栈组件化集成</h3>
|
||
<p>内置前端模板、API 网关、分布式缓存、消息队列、定时任务等模块，生产验证，开箱即用。</p>
|
||
<a class="home-more" href="/guide/what-is-mengstack">了解架构<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||
</article>
|
||
|
||
<article class="home-feature reveal" style="--i:1">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></svg>
|
||
</div>
|
||
<h3>零侵入依赖注入</h3>
|
||
<p>兼容 Wire 编译时注入与 uber-go/fx 运行时管理，按需切换，兼顾性能与便捷。</p>
|
||
<a class="home-more" href="/guide/dependency-injection">查看文档<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||
</article>
|
||
|
||
<article class="home-feature reveal" style="--i:2">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="3"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/><circle cx="12" cy="12" r="3"/></svg>
|
||
</div>
|
||
<h3>AI 原生开发支持</h3>
|
||
<p>内置大模型调用、Agent 内存管理、向量数据库集成，快速落地智能业务场景。</p>
|
||
</article>
|
||
|
||
<article class="home-feature reveal" style="--i:3">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z"/><path d="m9 12 2 2 4-4"/></svg>
|
||
</div>
|
||
<h3>全链路国产化适配</h3>
|
||
<p>兼容国产操作系统、数据库、中间件，满足政企金融等保合规要求。</p>
|
||
</article>
|
||
|
||
<article class="home-feature reveal" style="--i:4">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M8 7h7M8 11h7M4 5v14"/></svg>
|
||
</div>
|
||
<h3>极低学习门槛</h3>
|
||
<p>统一代码规范与完善中文文档，新成员接入周期缩短 70% 以上。</p>
|
||
<a class="home-more" href="/guide/getting-started">快速开始<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||
</article>
|
||
|
||
<article class="home-feature reveal" style="--i:5">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5"/><path d="M4 19h16"/><rect x="7" y="11" width="3" height="5"/><rect x="12" y="7" width="3" height="9"/><rect x="17" y="13" width="3" height="3"/></svg>
|
||
</div>
|
||
<h3>生产级可观测</h3>
|
||
<p>内置链路追踪、指标监控、日志聚合，无需额外搭建监控体系。</p>
|
||
</article>
|
||
|
||
<article class="home-feature home-feature--wide reveal" style="--i:6">
|
||
<div class="home-ficon">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 7.7-1.5"/></svg>
|
||
</div>
|
||
<div class="home-wtext">
|
||
<h3>完全开源开放</h3>
|
||
<p>核心代码 MIT 协议开源，无商业限制，社区持续迭代，可自由定制扩展。</p>
|
||
</div>
|
||
<a class="home-btn home-btn-primary home-wcta" href="/community">加入社区</a>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Architecture -->
|
||
<section class="home-section home-arch" id="architecture">
|
||
<div class="home-wrap">
|
||
<div class="home-section-head reveal">
|
||
<span class="home-eyebrow">Architecture</span>
|
||
<h2>三层隔离架构，全链路一站打通</h2>
|
||
<p>覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，层间解耦、演进自由。</p>
|
||
</div>
|
||
<div class="home-arch-layers stagger">
|
||
<div class="home-layer reveal" style="--i:0">
|
||
<div class="home-layer-num">LAYER 01</div>
|
||
<h3>前端交互层</h3>
|
||
<p>内置前端模板，统一交互规范，与后端接口无缝对接。</p>
|
||
<ul><li>前端模板</li><li>API 网关</li><li>认证鉴权</li></ul>
|
||
</div>
|
||
<div class="home-layer reveal" style="--i:1">
|
||
<div class="home-layer-num">LAYER 02</div>
|
||
<h3>后端服务层</h3>
|
||
<p>模块四层模式配合零侵入依赖注入，业务边界清晰，按需装配。</p>
|
||
<ul><li>模块四层模式</li><li>Wire / fx 注入</li><li>消息队列 · 定时任务</li></ul>
|
||
</div>
|
||
<div class="home-layer reveal" style="--i:2">
|
||
<div class="home-layer-num">LAYER 03</div>
|
||
<h3>数据与 AI 层</h3>
|
||
<p>数据治理与智能能力一体集成，并完成全链路国产化适配。</p>
|
||
<ul><li>分布式缓存</li><li>向量数据库</li><li>大模型 · Agent</li></ul>
|
||
</div>
|
||
</div>
|
||
<div class="home-arch-flow reveal">
|
||
前端交互
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||
后端服务
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||
数据治理 · AI 能力
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick start -->
|
||
<section class="home-section home-qs" id="quickstart">
|
||
<div class="home-wrap">
|
||
<div class="home-section-head reveal">
|
||
<span class="home-eyebrow">Quick Start</span>
|
||
<h2>三步启动，5 分钟跑起项目环境</h2>
|
||
<p>推荐使用 Docker Compose 一键拉起 API、PostgreSQL 与 Redis，无需手动配置依赖。</p>
|
||
</div>
|
||
<div class="home-qs-grid stagger">
|
||
<div class="home-qs-step reveal" style="--i:0">
|
||
<h3><span class="home-step-no">1</span>克隆项目</h3>
|
||
<p>从 Gitea 仓库拉取最新代码。</p>
|
||
<div class="home-codeblock">
|
||
<button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
|
||
<pre>git clone https://gitea.softunis.com/mengstack/mengstack.git
|
||
cd mengstack</pre>
|
||
</div>
|
||
</div>
|
||
<div class="home-qs-step reveal" style="--i:1">
|
||
<h3><span class="home-step-no">2</span>启动服务</h3>
|
||
<p>一条命令启动全部依赖服务。</p>
|
||
<div class="home-codeblock">
|
||
<button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
|
||
<pre><span class="c-comment"># 启动所有服务</span>
|
||
docker-compose up -d
|
||
|
||
<span class="c-comment"># 查看日志</span>
|
||
docker-compose logs -f app</pre>
|
||
</div>
|
||
</div>
|
||
<div class="home-qs-step reveal" style="--i:2">
|
||
<h3><span class="home-step-no">3</span>验证访问</h3>
|
||
<p>打开浏览器或调用健康检查接口。</p>
|
||
<div class="home-codeblock">
|
||
<button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
|
||
<pre>API http://localhost:2222
|
||
Docs /swagger/index.html
|
||
Check /health</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats -->
|
||
<section class="home-stats">
|
||
<div class="home-wrap home-stats-grid">
|
||
<div class="home-stat reveal">
|
||
<div class="v">5<small style="font-size:.55em">分钟</small></div>
|
||
<div class="l">完成项目环境搭建</div>
|
||
</div>
|
||
<div class="home-stat reveal">
|
||
<div class="v">70%+</div>
|
||
<div class="l">新成员接入周期缩短</div>
|
||
</div>
|
||
<div class="home-stat reveal">
|
||
<div class="v">MIT</div>
|
||
<div class="l">核心代码开源协议 · 无商业限制</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About -->
|
||
<section class="home-section home-about" id="about">
|
||
<div class="home-wrap">
|
||
<div class="home-section-head reveal">
|
||
<span class="home-eyebrow">About</span>
|
||
<h2>关于 MengStack</h2>
|
||
</div>
|
||
<div class="home-about-card reveal">
|
||
<p>MengStack 是面向云原生与 AI 时代的一站式全栈开发底座，整合主流开源技术能力，为开发者提供开箱即用的组件化开发体验，大幅降低中大型项目的架构搭建成本，让团队专注于核心业务逻辑落地，无需重复造轮子。</p>
|
||
<p>我们坚持全栈开源、无厂商锁定的设计理念，覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，适配国产化软硬件生态，为企业级项目提供稳定、高效、可扩展的技术支撑。</p>
|
||
<div class="home-about-points">
|
||
<div>
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||
全栈开源，无厂商锁定
|
||
</div>
|
||
<div>
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||
组件开箱即用
|
||
</div>
|
||
<div>
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||
国产化生态适配
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="home-cta-band">
|
||
<div class="home-wrap">
|
||
<div class="home-cta-card reveal">
|
||
<h2>现在开始，用 MengStack 搭建你的下一个项目</h2>
|
||
<p>完善中文文档与活跃社区，陪你从第一行代码走到生产上线。</p>
|
||
<div class="home-hero-actions">
|
||
<a class="home-btn home-btn-primary home-btn-lg" href="/guide/getting-started">5 分钟快速开始</a>
|
||
<a class="home-btn home-btn-ghost home-btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">访问 Gitea 仓库</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="home-footer">
|
||
<div class="home-wrap home-footer-inner">
|
||
<div>
|
||
<p>Released under the MIT License.</p>
|
||
<p>Copyright © 2026 <a href="https://www.softunis.com/" target="_blank" rel="noopener noreferrer">软盟 SoftUnis</a><br />
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2023054965号</a> |
|
||
<a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer">粤公网安备 44030502010466号</a></p>
|
||
</div>
|
||
<nav class="home-footer-links" aria-label="页脚导航">
|
||
<a href="/guide/what-is-mengstack">指南</a>
|
||
<a href="/api/overview">API 参考</a>
|
||
<a href="/demo">在线演示</a>
|
||
<a href="/community">社区</a>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||
import { initThemeManager } from './useTheme'
|
||
|
||
const { isDark, handleToggle } = initThemeManager()
|
||
|
||
const navEl = ref(null)
|
||
const scrollY = ref(0)
|
||
const menuOpen = ref(false)
|
||
|
||
function copyCode(e) {
|
||
const btn = e.currentTarget
|
||
const pre = btn.parentElement.querySelector('pre')
|
||
const text = pre ? pre.innerText : ''
|
||
const originalHTML = btn.innerHTML
|
||
const markCopied = () => {
|
||
btn.classList.add('copied')
|
||
btn.innerHTML = '<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
|
||
setTimeout(() => {
|
||
btn.classList.remove('copied')
|
||
btn.innerHTML = originalHTML
|
||
}, 1600)
|
||
}
|
||
try {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(markCopied).catch(markCopied)
|
||
} else { markCopied() }
|
||
} catch { markCopied() }
|
||
}
|
||
|
||
let io = null
|
||
|
||
onMounted(() => {
|
||
const onScroll = () => { scrollY.value = window.scrollY }
|
||
onScroll()
|
||
window.addEventListener('scroll', onScroll, { passive: true })
|
||
|
||
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||
if (reduce || !('IntersectionObserver' in window)) {
|
||
document.querySelectorAll('.home-root .reveal').forEach(el => el.classList.add('in'))
|
||
} else {
|
||
io = new IntersectionObserver((entries) => {
|
||
entries.forEach(en => {
|
||
if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target) }
|
||
})
|
||
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' })
|
||
document.querySelectorAll('.home-root .reveal').forEach(el => io.observe(el))
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (io) io.disconnect()
|
||
})
|
||
|
||
watch(menuOpen, (open) => {
|
||
if (navEl.value) {
|
||
if (open) navEl.value.classList.add('nav-menu-open')
|
||
else navEl.value.classList.remove('nav-menu-open')
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ============ Design Tokens ============ */
|
||
.home-root{
|
||
--home-gold:#C8963E;
|
||
--home-gold-light:#E0B86A;
|
||
--home-gold-dark:#A07830;
|
||
--home-bronze:#B87333;
|
||
--home-bronze-dark:#8B5A2B;
|
||
--home-cream:#FDF8EF;
|
||
--home-cream-dark:#F5EDD8;
|
||
|
||
--home-bg:#ffffff;
|
||
--home-bg-soft:#FAF7F1;
|
||
--home-bg-elev:#ffffff;
|
||
--home-ink:#211d16;
|
||
--home-ink-soft:#5c564b;
|
||
--home-ink-faint:#8a8275;
|
||
--home-border:#ece5d8;
|
||
--home-border-strong:#ddd2bc;
|
||
--home-code-bg:#1d1a14;
|
||
--home-code-ink:#f3ead8;
|
||
--home-glow:rgba(200,150,62,.16);
|
||
--home-shadow:0 1px 2px rgba(60,45,15,.05),0 12px 32px -12px rgba(120,86,30,.16);
|
||
--home-shadow-lg:0 2px 4px rgba(60,45,15,.06),0 24px 56px -16px rgba(120,86,30,.22);
|
||
--home-radius:16px;
|
||
--home-maxw:1180px;
|
||
--font:"Inter","Noto Sans SC",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||
--font-heading:"Space Grotesk","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
|
||
--mono:"Fira Code",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
|
||
}
|
||
@media (min-width:1441px){
|
||
.home-root{--home-maxw:2560px}
|
||
}
|
||
.home-root.dark{
|
||
--home-bg:#16140f;
|
||
--home-bg-soft:#1d1a13;
|
||
--home-bg-elev:#221e16;
|
||
--home-ink:#f4ede0;
|
||
--home-ink-soft:#bfb5a2;
|
||
--home-ink-faint:#8d8472;
|
||
--home-border:#312b20;
|
||
--home-border-strong:#443b2a;
|
||
--home-glow:rgba(200,150,62,.22);
|
||
--home-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.55);
|
||
--home-shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.65);
|
||
}
|
||
.home-root{
|
||
font-family:var(--font);color:var(--home-ink);background:var(--home-bg);
|
||
line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
|
||
}
|
||
.home-root *,.home-root *::before,.home-root *::after{box-sizing:border-box}
|
||
.home-root a{color:inherit;text-decoration:none}
|
||
.home-root img{max-width:100%;display:block}
|
||
.home-root h1,.home-root h2,.home-root h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em;font-family:var(--font-heading)}
|
||
.home-root p{margin:0}
|
||
.home-wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px}
|
||
|
||
/* ============ Navbar ============ */
|
||
.home-nav{
|
||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||
background:color-mix(in srgb,var(--home-bg) 82%,transparent);
|
||
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
|
||
border-bottom:1px solid transparent;transition:border-color .25s;
|
||
}
|
||
.home-nav.scrolled{border-bottom-color:var(--home-border)}
|
||
.home-nav-inner{max-width:var(--home-maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:28px}
|
||
.home-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
|
||
.home-brand img{width:30px;height:30px}
|
||
.home-brand .dark-logo{display:none}
|
||
.home-root.dark .home-brand .light-logo{display:none}
|
||
.home-root.dark .home-brand .dark-logo{display:block}
|
||
.home-nav-links{display:flex;gap:4px;margin-left:auto}
|
||
.home-nav-links a{
|
||
padding:7px 13px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--home-ink-soft);
|
||
transition:color .2s,background .2s;position:relative;
|
||
}
|
||
.home-nav-links a:hover{color:var(--home-gold-dark);background:var(--home-bg-soft)}
|
||
.home-root.dark .home-nav-links a:hover{color:var(--home-gold-light)}
|
||
.home-nav-links a.active{color:var(--home-gold-dark);font-weight:600}
|
||
.home-nav-links a.active::after{
|
||
content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
|
||
width:16px;height:2px;border-radius:1px;background:var(--home-gold);
|
||
}
|
||
.home-root.dark .home-nav-links a.active{color:var(--home-gold-light)}
|
||
.home-nav-actions{display:flex;align-items:center;gap:8px}
|
||
.home-icon-btn{
|
||
width:34px;height:34px;border-radius:8px;border:none;background:transparent;
|
||
display:grid;place-items:center;cursor:pointer;color:var(--home-ink-soft);transition:all .2s;
|
||
}
|
||
.home-icon-btn:hover{background:var(--home-bg-soft);color:var(--home-gold-dark)}
|
||
.home-icon-btn:active{transform:scale(.92)}
|
||
.home-icon-btn svg{width:18px;height:18px}
|
||
.home-icon-btn .moon{display:none}
|
||
.home-root.dark .home-icon-btn .sun{display:none}
|
||
.home-root.dark .home-icon-btn .moon{display:block}
|
||
.hamburger{display:none}
|
||
|
||
/* ============ Buttons ============ */
|
||
.home-btn{
|
||
display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
|
||
font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
|
||
transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;
|
||
}
|
||
.home-btn:hover{transform:translateY(-2px)}
|
||
.home-btn:active{transform:translateY(0) scale(.97)}
|
||
.home-btn-primary{
|
||
background:linear-gradient(135deg,var(--home-gold) 0%,var(--home-bronze) 100%);
|
||
color:#fff;box-shadow:0 6px 20px -6px rgba(200,150,62,.55);
|
||
}
|
||
.home-btn-primary:hover{box-shadow:0 10px 28px -6px rgba(200,150,62,.65)}
|
||
.home-btn-ghost{background:var(--home-bg-elev);border-color:var(--home-border-strong);color:var(--home-ink)}
|
||
.home-btn-ghost:hover{border-color:var(--home-gold);color:var(--home-gold-dark);background:var(--home-cream)}
|
||
.home-root.dark .home-btn-ghost:hover{color:var(--home-gold-light);background:rgba(200,150,62,.08)}
|
||
.home-btn-lg{padding:14px 28px;font-size:16px}
|
||
|
||
/* ============ Hero ============ */
|
||
.home-hero{position:relative;padding:148px 0 88px;overflow:hidden}
|
||
.home-hero::before{
|
||
content:"";position:absolute;inset:0;pointer-events:none;
|
||
background:
|
||
radial-gradient(640px 380px at 82% -8%,var(--home-glow),transparent 70%),
|
||
radial-gradient(520px 360px at 8% 12%,rgba(184,115,51,.08),transparent 70%);
|
||
}
|
||
.home-hero::after{
|
||
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
|
||
background-image:linear-gradient(var(--home-border) 1px,transparent 1px),linear-gradient(90deg,var(--home-border) 1px,transparent 1px);
|
||
background-size:56px 56px;
|
||
-webkit-mask-image:radial-gradient(720px 420px at 70% 0%,#000 0%,transparent 72%);
|
||
mask-image:radial-gradient(720px 420px at 70% 0%,#000 0%,transparent 72%);
|
||
}
|
||
.home-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
|
||
.home-badge{
|
||
display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
|
||
background:var(--home-cream);border:1px solid var(--home-border-strong);color:var(--home-bronze-dark);
|
||
font-size:13.5px;font-weight:600;margin-bottom:22px;
|
||
}
|
||
.home-root.dark .home-badge{background:rgba(200,150,62,.12);color:var(--home-gold-light);border-color:var(--home-border-strong)}
|
||
.home-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--home-gold);box-shadow:0 0 0 4px rgba(200,150,62,.2)}
|
||
.home-hero h1{font-size:clamp(34px,4.6vw,54px)}
|
||
.home-hero h1 .grad{
|
||
background:linear-gradient(120deg,var(--home-gold) 10%,var(--home-bronze) 55%,var(--home-gold-dark) 95%);
|
||
-webkit-background-clip:text;background-clip:text;color:transparent;
|
||
}
|
||
.home-hero .sub{font-size:clamp(17px,2vw,21px);color:var(--home-ink-soft);margin-top:14px;font-weight:500}
|
||
.home-hero .tagline{font-size:15.5px;color:var(--home-ink-faint);margin-top:12px;max-width:520px}
|
||
.home-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
|
||
|
||
/* Terminal */
|
||
.home-terminal{
|
||
background:var(--home-code-bg);border-radius:14px;overflow:hidden;box-shadow:var(--home-shadow-lg);
|
||
border:1px solid #3a3326;font-family:var(--mono);
|
||
}
|
||
.home-terminal-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#26211a;border-bottom:1px solid #3a3326}
|
||
.home-terminal-bar i{width:11px;height:11px;border-radius:50%;display:block}
|
||
.home-terminal-bar i:nth-child(1){background:#ff5f57}.home-terminal-bar i:nth-child(2){background:#febc2e}.home-terminal-bar i:nth-child(3){background:#28c840}
|
||
.home-terminal-bar span{margin-left:8px;font-size:12.5px;color:#8d8472;font-family:var(--font)}
|
||
.home-terminal-body{padding:20px 20px 22px;font-size:13.5px;line-height:1.85;color:var(--home-code-ink);overflow-x:auto}
|
||
.home-terminal-body .ln{white-space:pre;opacity:0;transform:translateY(6px);animation:termIn .45s ease forwards}
|
||
.home-terminal-body .cmt{color:#8d8472}
|
||
.home-terminal-body .prompt{color:var(--home-gold-light);user-select:none}
|
||
.home-terminal-body .ok{color:#7fd49c}
|
||
.home-terminal-body .kw{color:#c792ea}
|
||
.home-terminal-body .fn{color:#82b4ff}
|
||
.home-terminal-body .str{color:#a5d6a0}
|
||
.home-terminal-body .num{color:#f0b97a}
|
||
.home-terminal-body .ln:nth-child(1){animation-delay:.15s}.home-terminal-body .ln:nth-child(2){animation-delay:.35s}
|
||
.home-terminal-body .ln:nth-child(3){animation-delay:.55s}.home-terminal-body .ln:nth-child(4){animation-delay:.85s}
|
||
.home-terminal-body .ln:nth-child(5){animation-delay:1.1s}.home-terminal-body .ln:nth-child(6){animation-delay:1.5s}
|
||
.home-terminal-body .ln:nth-child(7){animation-delay:1.9s}.home-terminal-body .ln:nth-child(8){animation-delay:2.25s}
|
||
.home-terminal-body .cursor{display:inline-block;width:8px;height:16px;background:var(--home-gold-light);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
|
||
@keyframes termIn{to{opacity:1;transform:none}}
|
||
@keyframes blink{50%{opacity:0}}
|
||
|
||
/* ============ Trust strip ============ */
|
||
.home-trust{border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);background:var(--home-bg-soft)}
|
||
.home-trust-inner{padding:22px 24px;max-width:var(--home-maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px}
|
||
.home-trust-label{font-size:13.5px;color:var(--home-ink-faint);font-weight:600;letter-spacing:.04em}
|
||
.home-chip{
|
||
display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--home-ink-soft);
|
||
padding:6px 14px;border-radius:999px;border:1px solid var(--home-border);background:var(--home-bg);
|
||
transition:border-color .2s,color .2s,background .2s;
|
||
}
|
||
.home-chip:hover{border-color:var(--home-gold);color:var(--home-gold-dark)}
|
||
.home-root.dark .home-chip:hover{color:var(--home-gold-light);background:rgba(200,150,62,.06)}
|
||
.home-chip svg{width:15px;height:15px;color:var(--home-gold)}
|
||
|
||
/* ============ Sections ============ */
|
||
.home-section{padding:92px 0}
|
||
.home-section-head{max-width:680px;margin:0 auto 56px;text-align:center}
|
||
.home-eyebrow{
|
||
display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
|
||
color:var(--home-bronze);margin-bottom:14px;
|
||
}
|
||
.home-root.dark .home-eyebrow{color:var(--home-gold-light)}
|
||
.home-section-head h2{font-size:clamp(26px,3.2vw,38px)}
|
||
.home-section-head p{margin-top:14px;color:var(--home-ink-soft);font-size:16.5px}
|
||
|
||
/* ============ Features ============ */
|
||
.home-features{background:var(--home-bg)}
|
||
.home-feature-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
|
||
.home-feature{
|
||
grid-column:span 4;position:relative;padding:30px 26px;border-radius:var(--home-radius);
|
||
background:var(--home-bg-elev);border:1px solid var(--home-border);box-shadow:var(--home-shadow);
|
||
transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.home-feature:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
|
||
.home-feature:active{transform:translateY(-2px) scale(.99)}
|
||
.home-feature:hover .home-ficon{transform:scale(1.08) rotate(-3deg)}
|
||
.home-ficon{
|
||
width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
|
||
background:linear-gradient(135deg,var(--home-cream),var(--home-cream-dark));
|
||
color:var(--home-bronze);transition:transform .3s ease;flex:none;
|
||
}
|
||
.home-root.dark .home-ficon{background:rgba(200,150,62,.14);color:var(--home-gold-light)}
|
||
.home-ficon svg{width:24px;height:24px}
|
||
.home-feature h3{font-size:18px;margin-bottom:9px}
|
||
.home-feature p{font-size:14.5px;color:var(--home-ink-soft)}
|
||
.home-more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--home-gold-dark);display:inline-flex;align-items:center;gap:6px}
|
||
.home-root.dark .home-more{color:var(--home-gold-light)}
|
||
.home-more svg{width:14px;height:14px;transition:transform .2s}
|
||
.home-feature:hover .home-more svg{transform:translateX(4px)}
|
||
.home-feature--wide{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;padding:34px 38px;
|
||
background:linear-gradient(120deg,var(--home-cream) 0%,var(--home-bg-elev) 62%)}
|
||
.home-root.dark .home-feature--wide{background:linear-gradient(120deg,rgba(200,150,62,.13) 0%,var(--home-bg-elev) 62%)}
|
||
.home-feature--wide .home-ficon{margin-bottom:0}
|
||
.home-wtext{flex:1}
|
||
.home-wcta{flex:none}
|
||
|
||
/* ============ Architecture ============ */
|
||
.home-arch{background:var(--home-bg-soft)}
|
||
.home-arch-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||
.home-layer{
|
||
position:relative;padding:32px 28px;border-radius:var(--home-radius);background:var(--home-bg-elev);
|
||
border:1px solid var(--home-border);box-shadow:var(--home-shadow);
|
||
transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
|
||
}
|
||
.home-layer:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
|
||
.home-layer-num{
|
||
font-family:var(--mono);font-size:13px;font-weight:700;color:var(--home-gold);
|
||
display:flex;align-items:center;gap:10px;margin-bottom:16px;
|
||
}
|
||
.home-layer-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--home-border-strong),transparent)}
|
||
.home-layer h3{font-size:19px;margin-bottom:10px}
|
||
.home-layer p{font-size:14.5px;color:var(--home-ink-soft);margin-bottom:16px}
|
||
.home-layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
|
||
.home-layer li{
|
||
font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:8px;
|
||
background:var(--home-bg-soft);border:1px solid var(--home-border);color:var(--home-ink-soft);
|
||
transition:border-color .2s,color .2s,background .15s;cursor:default;
|
||
}
|
||
.home-layer li:hover{border-color:var(--home-gold);color:var(--home-gold-dark);background:var(--home-cream)}
|
||
.home-root.dark .home-layer li:hover{color:var(--home-gold-light);background:rgba(200,150,62,.1);border-color:var(--home-gold)}
|
||
.home-arch-flow{
|
||
margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
|
||
font-size:14px;color:var(--home-ink-faint);font-weight:600;
|
||
}
|
||
.home-arch-flow svg{width:18px;height:18px;color:var(--home-gold)}
|
||
|
||
/* ============ Quick start ============ */
|
||
.home-qs{background:var(--home-bg)}
|
||
.home-qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
|
||
.home-qs-step{
|
||
padding:26px;border-radius:var(--home-radius);background:var(--home-bg-elev);border:1px solid var(--home-border);
|
||
box-shadow:var(--home-shadow);display:flex;flex-direction:column;min-width:0;
|
||
transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
|
||
}
|
||
.home-qs-step:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
|
||
.home-qs-step h3{font-size:16.5px;margin:14px 0 6px;display:flex;align-items:center;gap:10px}
|
||
.home-step-no{
|
||
width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
|
||
background:linear-gradient(135deg,var(--home-gold),var(--home-bronze));color:#fff;
|
||
font-family:var(--mono);font-size:13.5px;font-weight:700;
|
||
}
|
||
.home-qs-step>p{font-size:13.5px;color:var(--home-ink-faint);margin-bottom:14px}
|
||
.home-codeblock{margin-top:auto;position:relative;background:var(--home-code-bg);border-radius:10px;padding:14px 16px;overflow-x:auto;max-width:100%}
|
||
.home-codeblock pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--home-code-ink);white-space:pre}
|
||
.home-codeblock .c-comment{color:#8d8472}
|
||
.home-copy-btn{
|
||
position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:7px;border:1px solid #4a4232;
|
||
background:#2c271e;color:#b3a88e;display:grid;place-items:center;cursor:pointer;opacity:0;
|
||
transition:opacity .2s,color .2s;
|
||
}
|
||
.home-codeblock:hover .home-copy-btn,.home-copy-btn:focus-visible{opacity:1}
|
||
.home-copy-btn:hover{color:var(--home-gold-light)}
|
||
.home-copy-btn svg{width:14px;height:14px}
|
||
.home-copy-btn.copied{color:#7fd49c;opacity:1}
|
||
|
||
/* ============ Stats ============ */
|
||
.home-stats{background:var(--home-bg-soft);border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)}
|
||
.home-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:64px 0}
|
||
.home-stat{text-align:center;padding:0 20px;transition:transform .2s}
|
||
.home-stat:hover{transform:scale(1.04)}
|
||
.home-stat .v{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.02em;
|
||
background:linear-gradient(120deg,var(--home-gold),var(--home-bronze));
|
||
-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.home-stat .l{margin-top:8px;font-size:15px;color:var(--home-ink-soft);font-weight:500}
|
||
|
||
/* ============ About ============ */
|
||
.home-about .home-about-card{
|
||
max-width:880px;margin:0 auto;padding:48px 52px;border-radius:20px;
|
||
background:var(--home-bg-elev);border:1px solid var(--home-border);box-shadow:var(--home-shadow);
|
||
}
|
||
.home-about-card p{color:var(--home-ink-soft);font-size:16px}
|
||
.home-about-card p+p{margin-top:18px}
|
||
.home-about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
|
||
.home-about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink);transition:color .2s}
|
||
.home-about-points div:hover{color:var(--home-gold-dark)}
|
||
.home-root.dark .home-about-points div:hover{color:var(--home-gold-light)}
|
||
.home-about-points svg{width:19px;height:19px;color:var(--home-gold);flex:none;margin-top:3px}
|
||
|
||
/* ============ CTA ============ */
|
||
.home-cta-band{padding:0 0 96px}
|
||
.home-cta-card{
|
||
position:relative;overflow:hidden;text-align:center;padding:64px 32px;border-radius:22px;
|
||
background:linear-gradient(130deg,#2b2315 0%,#3d2f17 55%,#2b2315 100%);
|
||
border:1px solid #4d3f23;
|
||
}
|
||
.home-cta-card::before{
|
||
content:"";position:absolute;inset:0;
|
||
background:radial-gradient(520px 240px at 50% -30%,rgba(224,184,106,.32),transparent 70%);
|
||
}
|
||
.home-cta-card h2{position:relative;color:#fbf3e2;font-size:clamp(25px,3vw,34px)}
|
||
.home-cta-card p{position:relative;color:#c9bca0;margin-top:12px}
|
||
.home-cta-card .home-hero-actions{justify-content:center;margin-top:30px}
|
||
.home-cta-card .home-btn-ghost{background:transparent;border-color:#6b5a38;color:#f0e6d0}
|
||
.home-cta-card .home-btn-ghost:hover{border-color:var(--home-gold-light);color:var(--home-gold-light);background:rgba(200,150,62,.08)}
|
||
.home-cta-card .home-btn-primary{box-shadow:0 6px 24px -4px rgba(200,150,62,.5)}
|
||
.home-cta-card .home-btn-primary:hover{box-shadow:0 10px 32px -4px rgba(200,150,62,.65)}
|
||
|
||
/* ============ Footer ============ */
|
||
.home-footer{border-top:1px solid var(--home-border);background:var(--home-bg-soft);padding:44px 0}
|
||
.home-footer-inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
|
||
.home-footer p{font-size:13.5px;color:var(--home-ink-faint);line-height:1.9}
|
||
.home-footer a{color:var(--home-ink-soft)}
|
||
.home-footer a:hover{color:var(--home-gold-dark)}
|
||
.home-root.dark .home-footer a:hover{color:var(--home-gold-light)}
|
||
.home-footer-links{display:flex;gap:18px;flex-wrap:wrap}
|
||
.home-footer-links a{font-size:13.5px;font-weight:500}
|
||
|
||
/* ============ Reveal animation ============ */
|
||
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
.stagger>*{transition-delay:calc(var(--i,0)*70ms)}
|
||
|
||
/* ============ Responsive ============ */
|
||
|
||
/* --- Widescreen 1440+ --- */
|
||
@media (min-width:1440px){
|
||
.home-hero{padding:160px 0 100px}
|
||
.home-hero-grid{gap:72px}
|
||
.home-feature-grid{gap:24px}
|
||
.home-section{padding:110px 0}
|
||
.home-arch-layers{gap:24px}
|
||
.home-qs-grid{gap:24px}
|
||
.home-about .home-about-card{max-width:960px;padding:56px 64px}
|
||
}
|
||
|
||
/* --- Tablet landscape 980-1200 --- */
|
||
@media (min-width:981px) and (max-width:1200px){
|
||
.home-feature{grid-column:span 6}
|
||
.home-feature:nth-child(7){grid-column:span 12}
|
||
.home-arch-layers{grid-template-columns:repeat(3,1fr);gap:16px}
|
||
.home-layer{padding:24px 20px}
|
||
}
|
||
|
||
/* --- Tablet portrait 768-980 --- */
|
||
@media (max-width:980px){
|
||
.home-hero{padding:120px 0 64px}
|
||
.home-hero-grid{grid-template-columns:1fr;gap:44px}
|
||
.home-feature{grid-column:span 6}
|
||
.home-feature--wide{grid-column:span 12;flex-direction:column;align-items:flex-start;gap:18px}
|
||
.home-arch-layers{grid-template-columns:1fr}
|
||
.home-qs-grid{grid-template-columns:1fr}
|
||
.home-stats-grid{grid-template-columns:repeat(3,1fr)}
|
||
.home-about-points{grid-template-columns:1fr}
|
||
.home-stat{padding:10px 0}
|
||
.home-nav-links{display:none}
|
||
.hamburger{display:grid}
|
||
.home-nav-actions{margin-left:auto}
|
||
.home-nav.nav-menu-open .home-nav-links{
|
||
display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
|
||
background:var(--home-bg);border-bottom:1px solid var(--home-border);padding:12px 20px 18px;gap:2px;
|
||
box-shadow:var(--home-shadow);
|
||
}
|
||
.home-nav.nav-menu-open .home-nav-links a{padding:10px 14px;font-size:15px}
|
||
.home-about .home-about-card{padding:32px 24px}
|
||
}
|
||
|
||
/* --- Mobile <560 --- */
|
||
@media (max-width:560px){
|
||
.home-feature{grid-column:span 12}
|
||
.home-section{padding:56px 0}
|
||
.home-section-head{margin-bottom:36px}
|
||
.home-hero-actions .home-btn{width:100%;justify-content:center}
|
||
.home-footer-inner{flex-direction:column;align-items:flex-start}
|
||
.home-stats-grid{grid-template-columns:1fr}
|
||
.home-trust-inner{gap:10px 16px}
|
||
.home-chip{font-size:13px;padding:5px 10px}
|
||
.home-terminal-body{font-size:12px;padding:14px 12px;-webkit-overflow-scrolling:touch}
|
||
.home-terminal{border-radius:10px}
|
||
.home-codeblock{padding:12px 14px;border-radius:8px;-webkit-overflow-scrolling:touch}
|
||
.home-codeblock pre{font-size:11.5px;line-height:1.6}
|
||
.home-hero h1{font-size:clamp(28px,7vw,38px)}
|
||
.home-about .home-about-card{padding:24px 18px}
|
||
.home-cta-card{padding:40px 20px}
|
||
.home-cta-card h2{font-size:22px}
|
||
}
|
||
|
||
/* --- Small mobile <380 --- */
|
||
@media (max-width:380px){
|
||
.home-wrap{padding:0 16px}
|
||
.home-nav-inner{padding:0 16px;gap:12px}
|
||
.home-brand{font-size:16px;gap:8px}
|
||
.home-brand img{width:26px;height:26px}
|
||
.home-badge{font-size:12px;padding:5px 10px}
|
||
.home-hero{padding:100px 0 48px}
|
||
.home-terminal-body{font-size:11px;padding:12px 10px}
|
||
.home-codeblock pre{font-size:11px}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
.home-root *,.home-root *::before,.home-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
|
||
.reveal{opacity:1;transform:none}
|
||
.home-terminal-body .ln{opacity:1;transform:none}
|
||
}
|
||
</style>
|