wangjia
4df8dc6f87
新建 web/website/（Astro 零 SSR）： - 组件迁移：交互块保留 .jsx 经 @astrojs/react（Header/AnnouncementBar/SignupForm/PricingPlans），纯展示块转 .astro 去运行时 JS；像素以原型为基准。 - 令牌同源：build-tokens.mjs 从 design/colors_and_type.css 生成 tokens.gen.css，仅剔除第三方 Google Fonts @import，数值不改。 - 字体自托管：@fontsource（Sora/Manrope/Noto Sans SC/JetBrains Mono），无第三方 CDN。 - 图标：Lucide 构建期内联 SVG（替代 unpkg CDN），零运行时、零 CDN。 - i18n：/（zh）与 /en/（en）双路由单显，语言切换组件；文案沿用 ui_kits 脱敏文案。 - 安全：public/_headers 严格 CSP（全 self + 自托管资源 + 内联片段 sha256，无 unsafe-inline）+ HSTS；无支付表单。 - CI：.gitea/workflows/website.yml 构建（红线扫描+lint+CSP 哈希）→ 同时发布 Cloudflare Pages 主站与镜像。 - 灾备：README 写明干净环境 npm ci && npm run build 可直接部署到任意静态托管；dist 指纹确定性，主站镜像一致。 测试：npm run lint（0 error）/ npm test（build+CSP 哈希注入+红线扫描 0 命中）/ 两次干净构建 dist 指纹一致。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
42 lines
1.4 KiB
Plaintext
42 lines
1.4 KiB
Plaintext
---
|
|
import Icon from './Icon.astro';
|
|
import type { T } from '../i18n/strings';
|
|
|
|
interface Props { t: T }
|
|
const { t } = Astro.props;
|
|
|
|
const cards = [
|
|
{ icon: 'gift', t: 'why.1t', d: 'why.1d' },
|
|
{ icon: 'monitor-smartphone', t: 'why.2t', d: 'why.2d' },
|
|
{ icon: 'badge-check', t: 'why.3t', d: 'why.3d' },
|
|
];
|
|
---
|
|
<section id="why-signup">
|
|
<div class="wrap center">
|
|
<div class="eyebrow">{t('why.eyebrow')}</div>
|
|
<h2 class="h-sec">{t('why.h')}</h2>
|
|
<p class="sub-sec">{t('why.sub')}</p>
|
|
</div>
|
|
<div class="wrap">
|
|
<div class="why-grid">
|
|
{cards.map((c) => (
|
|
<div class="why">
|
|
<div class="ico"><Icon name={c.icon} /></div>
|
|
<h3>{t(c.t)}</h3>
|
|
<p>{t(c.d)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step"><span class="n">1</span><Icon name="mail" /><span class="t">{t('why.s1')}</span></div>
|
|
<span class="step-arr"><Icon name="arrow-right" /></span>
|
|
<div class="step"><span class="n">2</span><Icon name="shield-check" /><span class="t">{t('why.s2')}</span></div>
|
|
<span class="step-arr"><Icon name="arrow-right" /></span>
|
|
<div class="step"><span class="n">3</span><Icon name="power" /><span class="t">{t('why.s3')}</span></div>
|
|
</div>
|
|
<div class="why-cta">
|
|
<a class="btn btn-primary btn-lg" href="#signup"><span>{t('why.cta')}</span></a>
|
|
</div>
|
|
</div>
|
|
</section>
|