SoftUnis
ecb29e0aa4
包含 VitePress 文档站完整源码及全新自定义首页设计： - 自定义首页组件 (Home.vue)：Hero + 终端动效 + 核心能力 + 架构展示 + 快速开始 + CTA - 自定义 Layout.vue：首页/文档页布局切换 - 金铜色品牌主题样式 - 完整文档页面（指南、API、更新日志、演示、社区） - SEO 配置（sitemap、robots、meta 标签）
797 lines
43 KiB
Vue
797 lines
43 KiB
Vue
<template>
|
||
<div class="home-new">
|
||
<!-- ============ Navbar ============ -->
|
||
<header class="nav" :class="{ scrolled }" ref="navEl">
|
||
<div class="nav-inner">
|
||
<a class="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="nav-links" aria-label="主导航">
|
||
<a href="#top" class="active">首页</a>
|
||
<a href="/guide/what-is-mengstack.html">指南</a>
|
||
<a href="/api/overview.html">API 参考</a>
|
||
<a href="/changelog.html">更新日志</a>
|
||
<a href="/demo.html">在线演示</a>
|
||
<a href="/community.html">社区</a>
|
||
</nav>
|
||
<div class="nav-actions">
|
||
<button class="icon-btn" @click="toggleTheme" aria-label="切换明暗主题" title="切换主题">
|
||
<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="icon-btn hamburger" ref="menuBtn" aria-label="展开菜单" aria-expanded="false" @click="toggleMenu">
|
||
<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="hero">
|
||
<div class="wrap hero-grid">
|
||
<div>
|
||
<span class="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="hero-actions">
|
||
<a class="btn btn-primary btn-lg" href="/guide/getting-started.html">
|
||
快速开始
|
||
<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="btn btn-ghost btn-lg" href="/demo.html">在线演示</a>
|
||
<a class="btn btn-ghost 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="terminal" aria-label="代码示例终端">
|
||
<div class="terminal-bar"><i></i><i></i><i></i><span>main.go — mengstack</span></div>
|
||
<div class="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="trust">
|
||
<div class="trust-inner">
|
||
<span class="trust-label">运行环境</span>
|
||
<span class="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="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="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="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="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="section features" id="features">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="eyebrow">Core Capabilities</span>
|
||
<h2>七大核心能力，覆盖企业级开发全链路</h2>
|
||
<p>从架构搭建到 AI 集成，生产验证的模块开箱即用，大幅降低中大型项目的架构成本。</p>
|
||
</div>
|
||
<div class="feature-grid stagger">
|
||
<article class="feature reveal" style="--i:0">
|
||
<div class="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="more" href="/guide/what-is-mengstack.html">了解架构<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="feature reveal" style="--i:1">
|
||
<div class="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="more" href="/guide/dependency-injection.html">查看文档<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="feature reveal" style="--i:2">
|
||
<div class="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="feature reveal" style="--i:3">
|
||
<div class="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="feature reveal" style="--i:4">
|
||
<div class="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="more" href="/guide/getting-started.html">快速开始<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="feature reveal" style="--i:5">
|
||
<div class="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="feature feature--wide reveal" style="--i:6">
|
||
<div class="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="wtext">
|
||
<h3>完全开源开放</h3>
|
||
<p>核心代码 MIT 协议开源，无商业限制，社区持续迭代，可自由定制扩展。</p>
|
||
</div>
|
||
<a class="btn btn-primary wcta" href="/community.html">加入社区</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ Architecture ============ -->
|
||
<section class="section arch" id="architecture">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="eyebrow">Architecture</span>
|
||
<h2>三层隔离架构，全链路一站打通</h2>
|
||
<p>覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，层间解耦、演进自由。</p>
|
||
</div>
|
||
<div class="arch-layers stagger">
|
||
<div class="layer reveal" style="--i:0">
|
||
<div class="layer-num">LAYER 01</div>
|
||
<h3>前端交互层</h3>
|
||
<p>内置前端模板，统一交互规范，与后端接口无缝对接。</p>
|
||
<ul><li>前端模板</li><li>API 网关</li><li>认证鉴权</li></ul>
|
||
</div>
|
||
<div class="layer reveal" style="--i:1">
|
||
<div class="layer-num">LAYER 02</div>
|
||
<h3>后端服务层</h3>
|
||
<p>模块四层模式配合零侵入依赖注入，业务边界清晰，按需装配。</p>
|
||
<ul><li>模块四层模式</li><li>Wire / fx 注入</li><li>消息队列 · 定时任务</li></ul>
|
||
</div>
|
||
<div class="layer reveal" style="--i:2">
|
||
<div class="layer-num">LAYER 03</div>
|
||
<h3>数据与 AI 层</h3>
|
||
<p>数据治理与智能能力一体集成，并完成全链路国产化适配。</p>
|
||
<ul><li>分布式缓存</li><li>向量数据库</li><li>大模型 · Agent</li></ul>
|
||
</div>
|
||
</div>
|
||
<div class="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="section qs" id="quickstart">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="eyebrow">Quick Start</span>
|
||
<h2>三步启动，5 分钟跑起项目环境</h2>
|
||
<p>推荐使用 Docker Compose 一键拉起 API、PostgreSQL 与 Redis，无需手动配置依赖。</p>
|
||
</div>
|
||
<div class="qs-grid stagger">
|
||
<div class="qs-step reveal" style="--i:0">
|
||
<h3><span class="step-no">1</span>克隆项目</h3>
|
||
<p>从 Gitea 仓库拉取最新代码。</p>
|
||
<div class="codeblock">
|
||
<button class="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="qs-step reveal" style="--i:1">
|
||
<h3><span class="step-no">2</span>启动服务</h3>
|
||
<p>一条命令启动全部依赖服务。</p>
|
||
<div class="codeblock">
|
||
<button class="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="qs-step reveal" style="--i:2">
|
||
<h3><span class="step-no">3</span>验证访问</h3>
|
||
<p>打开浏览器或调用健康检查接口。</p>
|
||
<div class="codeblock">
|
||
<button class="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="stats">
|
||
<div class="wrap stats-grid">
|
||
<div class="stat reveal">
|
||
<div class="v">5<small style="font-size:.55em">分钟</small></div>
|
||
<div class="l">完成项目环境搭建</div>
|
||
</div>
|
||
<div class="stat reveal">
|
||
<div class="v">70%+</div>
|
||
<div class="l">新成员接入周期缩短</div>
|
||
</div>
|
||
<div class="stat reveal">
|
||
<div class="v">MIT</div>
|
||
<div class="l">核心代码开源协议 · 无商业限制</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ About ============ -->
|
||
<section class="section about" id="about">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="eyebrow">About</span>
|
||
<h2>关于 MengStack</h2>
|
||
</div>
|
||
<div class="about-card reveal">
|
||
<p>MengStack 是面向云原生与 AI 时代的一站式全栈开发底座，整合主流开源技术能力，为开发者提供开箱即用的组件化开发体验，大幅降低中大型项目的架构搭建成本，让团队专注于核心业务逻辑落地，无需重复造轮子。</p>
|
||
<p>我们坚持全栈开源、无厂商锁定的设计理念，覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，适配国产化软硬件生态，为企业级项目提供稳定、高效、可扩展的技术支撑。</p>
|
||
<div class="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="cta-band">
|
||
<div class="wrap">
|
||
<div class="cta-card reveal">
|
||
<h2>现在开始，用 MengStack 搭建你的下一个项目</h2>
|
||
<p>完善中文文档与活跃社区，陪你从第一行代码走到生产上线。</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary btn-lg" href="/guide/getting-started.html">5 分钟快速开始</a>
|
||
<a class="btn btn-ghost btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">访问 Gitea 仓库</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============ Footer ============ -->
|
||
<footer class="footer">
|
||
<div class="wrap 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="footer-links" aria-label="页脚导航">
|
||
<a href="/guide/what-is-mengstack.html">指南</a>
|
||
<a href="/api/overview.html">API 参考</a>
|
||
<a href="/demo.html">在线演示</a>
|
||
<a href="/community.html">社区</a>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { useData } from 'vitepress/data'
|
||
|
||
const { isDark } = useData()
|
||
|
||
const navEl = ref(null)
|
||
const menuBtn = ref(null)
|
||
const scrolled = ref(false)
|
||
|
||
let scrollHandler = null
|
||
let observer = null
|
||
let mutationObserver = null
|
||
|
||
function toggleTheme() {
|
||
const el = document.documentElement
|
||
el.classList.toggle('dark')
|
||
const dark = el.classList.contains('dark')
|
||
isDark.value = dark
|
||
try { localStorage.setItem('ms-theme', dark ? 'dark' : 'light') } catch (e) {}
|
||
}
|
||
|
||
function toggleMenu() {
|
||
const nav = navEl.value
|
||
if (!nav) return
|
||
const open = nav.classList.toggle('nav-menu-open')
|
||
menuBtn.value?.setAttribute('aria-expanded', open ? 'true' : 'false')
|
||
}
|
||
|
||
function copyCode(event) {
|
||
const btn = event.currentTarget
|
||
const pre = btn.parentElement.querySelector('pre')
|
||
const text = pre ? pre.innerText : ''
|
||
const done = () => {
|
||
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 = '<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>'
|
||
}, 1600)
|
||
}
|
||
try {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(done).catch(done)
|
||
} else { done() }
|
||
} catch (e) { done() }
|
||
}
|
||
|
||
onMounted(() => {
|
||
const root = document.documentElement
|
||
|
||
try {
|
||
const saved = localStorage.getItem('ms-theme')
|
||
if (saved === 'dark' || (!saved && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
root.classList.add('dark')
|
||
isDark.value = true
|
||
} else {
|
||
root.classList.remove('dark')
|
||
isDark.value = false
|
||
}
|
||
} catch (e) {}
|
||
|
||
mutationObserver = new MutationObserver(() => {
|
||
isDark.value = root.classList.contains('dark')
|
||
})
|
||
mutationObserver.observe(root, { attributes: true, attributeFilter: ['class'] })
|
||
|
||
scrollHandler = () => { scrolled.value = window.scrollY > 8 }
|
||
window.addEventListener('scroll', scrollHandler, { passive: true })
|
||
scrollHandler()
|
||
|
||
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||
if (reduce || !('IntersectionObserver' in window)) {
|
||
root.querySelectorAll('.reveal').forEach(el => el.classList.add('in'))
|
||
} else {
|
||
observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('in')
|
||
observer.unobserve(entry.target)
|
||
}
|
||
})
|
||
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' })
|
||
root.querySelectorAll('.reveal').forEach(el => observer.observe(el))
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (scrollHandler) window.removeEventListener('scroll', scrollHandler)
|
||
if (observer) observer.disconnect()
|
||
if (mutationObserver) mutationObserver.disconnect()
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
/* ============ Design Tokens ============ */
|
||
:root{
|
||
--ms-gold:#C8963E;
|
||
--ms-gold-light:#E0B86A;
|
||
--ms-gold-dark:#A07830;
|
||
--ms-bronze:#B87333;
|
||
--ms-bronze-dark:#8B5A2B;
|
||
--ms-cream:#FDF8EF;
|
||
--ms-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-hero-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-radius-sm:12px;
|
||
--home-maxw:1180px;
|
||
--home-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||
--home-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
|
||
}
|
||
html.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-hero-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);
|
||
}
|
||
|
||
/* ============ Hide VitePress nav/footer on homepage ============ */
|
||
.home-layout .VPNav,
|
||
.home-layout .VPFooter {
|
||
display: none !important;
|
||
}
|
||
.home-layout .VPContent {
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
/* ============ Home Page Base ============ */
|
||
.home-new{
|
||
font-family:var(--home-font);
|
||
color:var(--home-ink);
|
||
background:var(--home-bg);
|
||
line-height:1.7;
|
||
font-size:16px;
|
||
-webkit-font-smoothing:antialiased;
|
||
overflow-x:hidden;
|
||
}
|
||
.home-new *,.home-new *::before,.home-new *::after{box-sizing:border-box}
|
||
.home-new a{color:inherit;text-decoration:none}
|
||
.home-new img{max-width:100%;display:block}
|
||
.home-new h1,.home-new h2,.home-new h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
|
||
.home-new p{margin:0}
|
||
.home-new .wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px}
|
||
|
||
/* ============ Navbar ============ */
|
||
.home-new .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-new .nav.scrolled{border-bottom-color:var(--home-border)}
|
||
.home-new .nav-inner{max-width:var(--home-maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:28px}
|
||
.home-new .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
|
||
.home-new .brand img{width:30px;height:30px}
|
||
.home-new .brand .dark-logo{display:none}
|
||
html.dark .home-new .brand .light-logo{display:none}
|
||
html.dark .home-new .brand .dark-logo{display:block}
|
||
.home-new .nav-links{display:flex;gap:4px;margin-left:auto}
|
||
.home-new .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;
|
||
}
|
||
.home-new .nav-links a:hover{color:var(--ms-gold-dark);background:var(--home-bg-soft)}
|
||
html.dark .home-new .nav-links a:hover{color:var(--ms-gold-light)}
|
||
.home-new .nav-links a.active{color:var(--ms-gold-dark);font-weight:600}
|
||
html.dark .home-new .nav-links a.active{color:var(--ms-gold-light)}
|
||
.home-new .nav-actions{display:flex;align-items:center;gap:8px}
|
||
.home-new .icon-btn{
|
||
width:38px;height:38px;border-radius:10px;border:1px solid var(--home-border);background:var(--home-bg);
|
||
display:grid;place-items:center;cursor:pointer;color:var(--home-ink-soft);transition:all .2s;
|
||
}
|
||
.home-new .icon-btn:hover{border-color:var(--home-border-strong);color:var(--ms-gold-dark);transform:translateY(-1px)}
|
||
.home-new .icon-btn .moon{display:none}
|
||
html.dark .home-new .icon-btn .sun{display:none}
|
||
html.dark .home-new .icon-btn .moon{display:block}
|
||
.home-new .hamburger{display:none}
|
||
|
||
/* ============ Buttons ============ */
|
||
.home-new .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-new .btn:hover{transform:translateY(-2px)}
|
||
.home-new .btn-primary{
|
||
background:linear-gradient(135deg,var(--ms-gold) 0%,var(--ms-bronze) 100%);
|
||
color:#fff;box-shadow:0 6px 20px -6px rgba(200,150,62,.55);
|
||
}
|
||
.home-new .btn-primary:hover{box-shadow:0 10px 28px -6px rgba(200,150,62,.65)}
|
||
.home-new .btn-ghost{background:var(--home-bg-elev);border-color:var(--home-border-strong);color:var(--home-ink)}
|
||
.home-new .btn-ghost:hover{border-color:var(--ms-gold);color:var(--ms-gold-dark)}
|
||
html.dark .home-new .btn-ghost:hover{color:var(--ms-gold-light)}
|
||
.home-new .btn-lg{padding:14px 28px;font-size:16px}
|
||
|
||
/* ============ Hero ============ */
|
||
.home-new .hero{position:relative;padding:148px 0 88px;overflow:hidden}
|
||
.home-new .hero::before{
|
||
content:"";position:absolute;inset:0;pointer-events:none;
|
||
background:
|
||
radial-gradient(640px 380px at 82% -8%,var(--home-hero-glow),transparent 70%),
|
||
radial-gradient(520px 360px at 8% 12%,rgba(184,115,51,.08),transparent 70%);
|
||
}
|
||
.home-new .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-new .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
|
||
.home-new .badge{
|
||
display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
|
||
background:var(--ms-cream);border:1px solid var(--home-border-strong);color:var(--ms-bronze-dark);
|
||
font-size:13.5px;font-weight:600;margin-bottom:22px;
|
||
}
|
||
html.dark .home-new .badge{background:rgba(200,150,62,.12);color:var(--ms-gold-light);border-color:var(--home-border-strong)}
|
||
.home-new .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ms-gold);box-shadow:0 0 0 4px rgba(200,150,62,.2)}
|
||
.home-new .hero h1{font-size:clamp(34px,4.6vw,54px)}
|
||
.home-new .hero h1 .grad{
|
||
background:linear-gradient(120deg,var(--ms-gold) 10%,var(--ms-bronze) 55%,var(--ms-gold-dark) 95%);
|
||
-webkit-background-clip:text;background-clip:text;color:transparent;
|
||
}
|
||
.home-new .hero .sub{font-size:clamp(17px,2vw,21px);color:var(--home-ink-soft);margin-top:14px;font-weight:500}
|
||
.home-new .hero .tagline{font-size:15.5px;color:var(--home-ink-faint);margin-top:12px;max-width:520px}
|
||
.home-new .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
|
||
|
||
/* Terminal */
|
||
.home-new .terminal{
|
||
background:var(--home-code-bg);border-radius:14px;overflow:hidden;box-shadow:var(--home-shadow-lg);
|
||
border:1px solid #3a3326;font-family:var(--home-mono);
|
||
}
|
||
.home-new .terminal-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#26211a;border-bottom:1px solid #3a3326}
|
||
.home-new .terminal-bar i{width:11px;height:11px;border-radius:50%;display:block}
|
||
.home-new .terminal-bar i:nth-child(1){background:#ff5f57}
|
||
.home-new .terminal-bar i:nth-child(2){background:#febc2e}
|
||
.home-new .terminal-bar i:nth-child(3){background:#28c840}
|
||
.home-new .terminal-bar span{margin-left:8px;font-size:12.5px;color:#8d8472;font-family:var(--home-font)}
|
||
.home-new .terminal-body{padding:20px 20px 22px;font-size:13.5px;line-height:1.85;color:var(--home-code-ink);overflow-x:auto}
|
||
.home-new .terminal-body .ln{white-space:pre;opacity:0;transform:translateY(6px);animation:termIn .45s ease forwards}
|
||
.home-new .terminal-body .cmt{color:#8d8472}
|
||
.home-new .terminal-body .prompt{color:var(--ms-gold-light);user-select:none}
|
||
.home-new .terminal-body .ok{color:#7fd49c}
|
||
.home-new .terminal-body .kw{color:#c792ea}
|
||
.home-new .terminal-body .fn{color:#82b4ff}
|
||
.home-new .terminal-body .str{color:#a5d6a0}
|
||
.home-new .terminal-body .num{color:#f0b97a}
|
||
.home-new .terminal-body .ln:nth-child(1){animation-delay:.15s}
|
||
.home-new .terminal-body .ln:nth-child(2){animation-delay:.35s}
|
||
.home-new .terminal-body .ln:nth-child(3){animation-delay:.55s}
|
||
.home-new .terminal-body .ln:nth-child(4){animation-delay:.85s}
|
||
.home-new .terminal-body .ln:nth-child(5){animation-delay:1.1s}
|
||
.home-new .terminal-body .ln:nth-child(6){animation-delay:1.5s}
|
||
.home-new .terminal-body .ln:nth-child(7){animation-delay:1.9s}
|
||
.home-new .terminal-body .ln:nth-child(8){animation-delay:2.25s}
|
||
.home-new .terminal-body .cursor{display:inline-block;width:8px;height:16px;background:var(--ms-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-new .trust{border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);background:var(--home-bg-soft)}
|
||
.home-new .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-new .trust-label{font-size:13.5px;color:var(--home-ink-faint);font-weight:600;letter-spacing:.04em}
|
||
.home-new .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);
|
||
}
|
||
.home-new .chip svg{width:15px;height:15px;color:var(--ms-gold)}
|
||
|
||
/* ============ Sections ============ */
|
||
.home-new .section{padding:92px 0}
|
||
.home-new .section-head{max-width:680px;margin:0 auto 56px;text-align:center}
|
||
.home-new .eyebrow{
|
||
display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
|
||
color:var(--ms-bronze);margin-bottom:14px;
|
||
}
|
||
html.dark .home-new .eyebrow{color:var(--ms-gold-light)}
|
||
.home-new .section-head h2{font-size:clamp(26px,3.2vw,38px)}
|
||
.home-new .section-head p{margin-top:14px;color:var(--home-ink-soft);font-size:16.5px}
|
||
|
||
/* ============ Features ============ */
|
||
.home-new .features{background:var(--home-bg)}
|
||
.home-new .feature-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
|
||
.home-new .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-new .feature:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
|
||
.home-new .feature:hover .ficon{transform:scale(1.08) rotate(-3deg)}
|
||
.home-new .ficon{
|
||
width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
|
||
background:linear-gradient(135deg,var(--ms-cream),var(--ms-cream-dark));
|
||
color:var(--ms-bronze);transition:transform .3s ease;flex:none;
|
||
}
|
||
html.dark .home-new .ficon{background:rgba(200,150,62,.14);color:var(--ms-gold-light)}
|
||
.home-new .ficon svg{width:24px;height:24px}
|
||
.home-new .feature h3{font-size:18px;margin-bottom:9px}
|
||
.home-new .feature p{font-size:14.5px;color:var(--home-ink-soft)}
|
||
.home-new .feature .more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--ms-gold-dark);display:inline-flex;align-items:center;gap:6px}
|
||
html.dark .home-new .feature .more{color:var(--ms-gold-light)}
|
||
.home-new .feature .more svg{width:14px;height:14px;transition:transform .2s}
|
||
.home-new .feature:hover .more svg{transform:translateX(4px)}
|
||
.home-new .feature--wide{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;padding:34px 38px;
|
||
background:linear-gradient(120deg,var(--ms-cream) 0%,var(--home-bg-elev) 62%)}
|
||
html.dark .home-new .feature--wide{background:linear-gradient(120deg,rgba(200,150,62,.13) 0%,var(--home-bg-elev) 62%)}
|
||
.home-new .feature--wide .ficon{margin-bottom:0}
|
||
.home-new .feature--wide .wtext{flex:1}
|
||
.home-new .feature--wide .wcta{flex:none}
|
||
|
||
/* ============ Architecture ============ */
|
||
.home-new .arch{background:var(--home-bg-soft)}
|
||
.home-new .arch-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||
.home-new .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);
|
||
}
|
||
.home-new .layer-num{
|
||
font-family:var(--home-mono);font-size:13px;font-weight:700;color:var(--ms-gold);
|
||
display:flex;align-items:center;gap:10px;margin-bottom:16px;
|
||
}
|
||
.home-new .layer-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--home-border-strong),transparent)}
|
||
.home-new .layer h3{font-size:19px;margin-bottom:10px}
|
||
.home-new .layer p{font-size:14.5px;color:var(--home-ink-soft);margin-bottom:16px}
|
||
.home-new .layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
|
||
.home-new .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);
|
||
}
|
||
.home-new .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-new .arch-flow svg{width:18px;height:18px;color:var(--ms-gold)}
|
||
|
||
/* ============ Quick start ============ */
|
||
.home-new .qs{background:var(--home-bg)}
|
||
.home-new .qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
|
||
.home-new .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;
|
||
}
|
||
.home-new .qs-step h3{font-size:16.5px;margin:14px 0 6px;display:flex;align-items:center;gap:10px}
|
||
.home-new .step-no{
|
||
width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
|
||
background:linear-gradient(135deg,var(--ms-gold),var(--ms-bronze));color:#fff;
|
||
font-family:var(--home-mono);font-size:13.5px;font-weight:700;
|
||
}
|
||
.home-new .qs-step>p{font-size:13.5px;color:var(--home-ink-faint);margin-bottom:14px}
|
||
.home-new .codeblock{margin-top:auto;position:relative;background:var(--home-code-bg);border-radius:10px;padding:14px 16px;overflow-x:auto}
|
||
.home-new .codeblock pre{margin:0;font-family:var(--home-mono);font-size:12.5px;line-height:1.7;color:var(--home-code-ink);white-space:pre}
|
||
.home-new .codeblock .c-comment{color:#8d8472}
|
||
.home-new .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-new .codeblock:hover .copy-btn,.home-new .copy-btn:focus-visible{opacity:1}
|
||
.home-new .copy-btn:hover{color:var(--ms-gold-light)}
|
||
.home-new .copy-btn svg{width:14px;height:14px}
|
||
.home-new .copy-btn.copied{color:#7fd49c;opacity:1}
|
||
|
||
/* ============ Stats ============ */
|
||
.home-new .stats{background:var(--home-bg-soft);border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)}
|
||
.home-new .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:64px 0}
|
||
.home-new .stat{text-align:center;padding:0 20px}
|
||
.home-new .stat .v{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.02em;
|
||
background:linear-gradient(120deg,var(--ms-gold),var(--ms-bronze));
|
||
-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.home-new .stat .l{margin-top:8px;font-size:15px;color:var(--home-ink-soft);font-weight:500}
|
||
|
||
/* ============ About ============ */
|
||
.home-new .about .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-new .about-card p{color:var(--home-ink-soft);font-size:16px}
|
||
.home-new .about-card p+p{margin-top:18px}
|
||
.home-new .about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
|
||
.home-new .about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink)}
|
||
.home-new .about-points svg{width:19px;height:19px;color:var(--ms-gold);flex:none;margin-top:3px}
|
||
|
||
/* ============ CTA ============ */
|
||
.home-new .cta-band{padding:0 0 96px}
|
||
.home-new .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-new .cta-card::before{
|
||
content:"";position:absolute;inset:0;
|
||
background:radial-gradient(520px 240px at 50% -30%,rgba(224,184,106,.32),transparent 70%);
|
||
}
|
||
.home-new .cta-card h2{position:relative;color:#fbf3e2;font-size:clamp(25px,3vw,34px)}
|
||
.home-new .cta-card p{position:relative;color:#c9bca0;margin-top:12px}
|
||
.home-new .cta-card .hero-actions{justify-content:center;margin-top:30px}
|
||
.home-new .cta-card .btn-ghost{background:transparent;border-color:#6b5a38;color:#f0e6d0}
|
||
.home-new .cta-card .btn-ghost:hover{border-color:var(--ms-gold-light);color:var(--ms-gold-light)}
|
||
|
||
/* ============ Footer ============ */
|
||
.home-new .footer{border-top:1px solid var(--home-border);background:var(--home-bg-soft);padding:44px 0}
|
||
.home-new .footer-inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
|
||
.home-new .footer p{font-size:13.5px;color:var(--home-ink-faint);line-height:1.9}
|
||
.home-new .footer a{color:var(--home-ink-soft)}
|
||
.home-new .footer a:hover{color:var(--ms-gold-dark)}
|
||
html.dark .home-new .footer a:hover{color:var(--ms-gold-light)}
|
||
.home-new .footer-links{display:flex;gap:18px;flex-wrap:wrap}
|
||
.home-new .footer-links a{font-size:13.5px;font-weight:500}
|
||
|
||
/* ============ Reveal animation ============ */
|
||
.home-new .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
|
||
.home-new .reveal.in{opacity:1;transform:none}
|
||
.home-new .stagger>*{transition-delay:calc(var(--i,0)*70ms)}
|
||
|
||
/* ============ Responsive ============ */
|
||
@media (max-width:980px){
|
||
.home-new .hero{padding:120px 0 64px}
|
||
.home-new .hero-grid{grid-template-columns:1fr;gap:44px}
|
||
.home-new .feature{grid-column:span 6}
|
||
.home-new .feature--wide{grid-column:span 12;flex-direction:column;align-items:flex-start;gap:18px}
|
||
.home-new .arch-layers,.home-new .qs-grid,.home-new .stats-grid,.home-new .about-points{grid-template-columns:1fr}
|
||
.home-new .stat{padding:10px 0}
|
||
.home-new .nav-links{display:none}
|
||
.home-new .hamburger{display:grid}
|
||
.home-new .nav-menu-open .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-new .about .about-card{padding:32px 24px}
|
||
}
|
||
@media (max-width:560px){
|
||
.home-new .feature{grid-column:span 12}
|
||
.home-new .section{padding:68px 0}
|
||
.home-new .hero-actions .btn{width:100%;justify-content:center}
|
||
.home-new .footer-inner{flex-direction:column;align-items:flex-start}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
|
||
.home-new .reveal{opacity:1;transform:none}
|
||
.home-new .terminal-body .ln{opacity:1;transform:none}
|
||
}
|
||
</style>
|