fix(brand): unify calligraphy logo across header, footer and brand page
- logo.svg: remove dark-mode white fill so header/hero calligraphy stays visible on white backgrounds and matches footer logo-white.svg - about/brand: replace sans-serif brand title with BrandCalligraphyName, reusing the same AoyagiReisho SVG paths as the footer logo without loading the 4.4MB font file - add unit tests for BrandCalligraphyName and document decision in CONTEXT.md
This commit is contained in:
@@ -159,6 +159,7 @@ Novalon 的 6 个核心产品，互为互补关系，常以组合形式出现在
|
||||
| 生产部署模式 | 2026-08 切换为混合渲染：`next.config.mjs` 使用 `output: 'standalone'`，`Dockerfile.prod` + `docker-compose.server.yml` 启动 Next.js 容器，Nginx 托管静态资源并代理 `/api/*`、`/admin/*`、ISR 回源；生产 SQLite 位于 `data/prod.db`，通过 `DATABASE_URL=file:/app/data/prod.db` 与 `PRISMA_QUERY_ENGINE_LIBRARY` 运行 | ✅ 2026-08 确认 |
|
||||
| 动效强度 | 体验级全场景动效叙事（Porsche Consulting水准，但克制不炫技） | ✅ 2026-06-29 确认 |
|
||||
| 排版方向 | Accenture信息密度 + Bain标题对比 + Porsche图文节奏的融合方案 | ✅ 2026-06-29 确认 |
|
||||
| 品牌故事页品牌名 | 使用与 footer Logo 完全相同的青柳隶书 SVG path（`BrandCalligraphyName`），不加载 4.4MB 的 AoyagiReisho 字体文件，兼顾品牌一致性与性能 | ✅ 2026-08-18 确认 |
|
||||
|
||||
## 页面类型与四层映射
|
||||
|
||||
|
||||
+2
-9
@@ -51,17 +51,10 @@
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<style>
|
||||
.logo-text { fill: #0A0E14; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo-text { fill: #FFFFFF; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 公司名称 -->
|
||||
<g transform="translate(110, 60)">
|
||||
<!-- 睿新致遠 - 书法字体路径 -->
|
||||
<g transform="translate(0, 0)" class="logo-text">
|
||||
<!-- 睿新致遠 - 书法字体路径（与 footer logo-white.svg 同一套书法路径，固定深色以适配白色 header/hero 背景） -->
|
||||
<g transform="translate(0, 0)" fill="#0A0E14">
|
||||
<g transform="translate(0.00, 0) scale(0.048)">
|
||||
<path d="M 378.00 62.00 L 356.00 55.00 L 348.00 29.00 L 326.00 29.00 L 326.00 -2.00 L 326.00 -60.00 L 326.00 -125.00 L 318.00 -183.00 L 304.00 -208.00 L 289.00 -208.00 L 222.00 -118.00 L 177.00 -106.00 L 177.00 -92.00 L 162.00 -92.00 L 147.00 -86.00 L 125.00 -86.00 L 117.00 -86.00 L 88.00 -106.00 L 131.00 -138.00 L 222.00 -203.00 L 296.00 -279.00 L 364.00 -356.00 L 386.00 -402.00 L 378.00 -402.00 L 348.00 -389.00 L 348.00 -370.00 L 318.00 -363.00 L 318.00 -370.00 L 311.00 -370.00 L 296.00 -383.00 L 273.00 -383.00 L 273.00 -402.00 L 273.00 -409.00 L 326.00 -479.00 L 296.00 -479.00 L 296.00 -511.00 L 304.00 -525.00 L 326.00 -531.00 L 378.00 -543.00 L 431.00 -550.00 L 482.00 -550.00 L 513.00 -550.00 L 557.00 -531.00 L 557.00 -511.00 L 520.00 -505.00 L 409.00 -511.00 L 401.00 -505.00 L 378.00 -505.00 L 356.00 -499.00 L 334.00 -492.00 L 340.00 -479.00 L 386.00 -409.00 L 401.00 -409.00 L 409.00 -441.00 L 453.00 -441.00 L 468.00 -434.00 L 476.00 -409.00 L 520.00 -376.00 L 565.00 -351.00 L 618.00 -324.00 L 640.00 -312.00 L 677.00 -298.00 L 766.00 -273.00 L 856.00 -254.00 L 938.00 -234.00 L 991.00 -240.00 L 1013.00 -247.00 L 1005.00 -247.00 L 967.00 -164.00 L 894.00 -144.00 L 863.00 -157.00 L 804.00 -170.00 L 744.00 -183.00 L 691.00 -215.00 L 662.00 -215.00 L 647.00 48.00 L 610.00 55.00 L 610.00 41.00 L 520.00 36.00 L 505.00 41.00 L 468.00 41.00 L 431.00 48.00 L 393.00 48.00 Z M 580.00 5.00 L 580.00 -9.00 L 587.00 -86.00 L 573.00 -86.00 L 393.00 -67.00 L 386.00 -9.00 L 401.00 5.00 L 453.00 5.00 L 505.00 5.00 L 557.00 5.00 Z M 214.00 -118.00 L 206.00 -125.00 L 200.00 -118.00 L 206.00 -112.00 Z M 587.00 -118.00 L 580.00 -183.00 L 565.00 -183.00 L 565.00 -176.00 L 543.00 -176.00 L 498.00 -176.00 L 460.00 -170.00 L 415.00 -157.00 L 401.00 -150.00 L 386.00 -99.00 L 401.00 -99.00 Z M 565.00 -203.00 L 549.00 -240.00 L 498.00 -247.00 L 371.00 -222.00 L 371.00 -208.00 L 378.00 -189.00 L 409.00 -189.00 L 527.00 -203.00 L 557.00 -196.00 Z M 356.00 -254.00 L 378.00 -266.00 L 423.00 -273.00 L 476.00 -279.00 L 527.00 -279.00 L 557.00 -279.00 L 557.00 -293.00 L 543.00 -298.00 L 505.00 -324.00 L 476.00 -351.00 L 438.00 -370.00 L 415.00 -363.00 L 401.00 -351.00 L 371.00 -324.00 L 356.00 -293.00 L 334.00 -266.00 L 334.00 -247.00 L 348.00 -247.00 Z M 610.00 -389.00 L 520.00 -434.00 L 520.00 -486.00 L 535.00 -486.00 L 662.00 -414.00 L 654.00 -414.00 L 632.00 -389.00 Z M 102.00 -428.00 L 102.00 -434.00 L 88.00 -486.00 L 95.00 -492.00 L 95.00 -518.00 L 95.00 -537.00 L 102.00 -564.00 L 117.00 -557.00 L 131.00 -543.00 L 147.00 -525.00 L 162.00 -499.00 L 162.00 -467.00 L 162.00 -453.00 L 139.00 -428.00 Z M 789.00 -492.00 L 774.00 -531.00 L 789.00 -576.00 L 758.00 -582.00 L 699.00 -595.00 L 632.00 -601.00 L 573.00 -608.00 L 535.00 -608.00 L 460.00 -589.00 L 453.00 -569.00 L 415.00 -569.00 L 356.00 -582.00 L 334.00 -576.00 L 281.00 -569.00 L 236.00 -557.00 L 200.00 -537.00 L 169.00 -537.00 L 169.00 -564.00 L 177.00 -582.00 L 192.00 -582.00 L 192.00 -595.00 L 222.00 -595.00 L 273.00 -608.00 L 326.00 -615.00 L 378.00 -627.00 L 401.00 -634.00 L 409.00 -737.00 L 393.00 -802.00 L 438.00 -808.00 L 476.00 -775.00 L 476.00 -750.00 L 580.00 -731.00 L 587.00 -692.00 L 580.00 -679.00 L 476.00 -673.00 L 468.00 -634.00 L 505.00 -634.00 L 624.00 -640.00 L 841.00 -601.00 L 849.00 -537.00 L 827.00 -499.00 Z"/>
|
||||
</g>
|
||||
|
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
@@ -2,6 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { BrandCalligraphyName } from '@/components/ui/brand-calligraphy-name';
|
||||
import {
|
||||
ArrowRight,
|
||||
Target,
|
||||
@@ -91,11 +92,15 @@ export default function BrandContent() {
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-8 sm:mb-10"
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl text-ink leading-[1.05] tracking-tight mb-8 sm:mb-10"
|
||||
>
|
||||
睿新致远
|
||||
<span className="sr-only">睿新致遠</span>
|
||||
<BrandCalligraphyName
|
||||
className="block h-[0.95em] w-auto text-ink"
|
||||
ariaHidden
|
||||
/>
|
||||
<br />
|
||||
<span className="text-brand">以技术驱动业务增长</span>
|
||||
<span className="text-brand font-black">以技术驱动业务增长</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* 数据条 */}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { describe, it, expect } from '@jest/globals';
|
||||
import { render } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { BrandCalligraphyName } from './brand-calligraphy-name';
|
||||
|
||||
describe('BrandCalligraphyName', () => {
|
||||
it('renders the four calligraphy glyph paths from the logo asset', () => {
|
||||
const { container } = render(<BrandCalligraphyName />);
|
||||
const svg = container.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(svg).toHaveAttribute('viewBox', '0 -40 200 48');
|
||||
expect(svg!.querySelectorAll('path')).toHaveLength(4);
|
||||
expect(svg!.querySelectorAll('path')[0]!.getAttribute('d')).toContain('M 378.00 62.00');
|
||||
expect(svg!.querySelectorAll('path')[3]!.getAttribute('d')).toContain('M 799.00 85.00');
|
||||
});
|
||||
|
||||
it('is exposed as an image with a brand label by default', () => {
|
||||
const { container } = render(<BrandCalligraphyName />);
|
||||
const svg = container.querySelector('svg');
|
||||
expect(svg).toHaveAttribute('role', 'img');
|
||||
expect(svg).toHaveAttribute('aria-label', '睿新致遠');
|
||||
});
|
||||
|
||||
it('can be hidden from assistive technology when paired with sr-only text', () => {
|
||||
const { container } = render(<BrandCalligraphyName ariaHidden />);
|
||||
const svg = container.querySelector('svg');
|
||||
expect(svg).toHaveAttribute('aria-hidden', 'true');
|
||||
expect(svg).not.toHaveAttribute('role');
|
||||
expect(svg).not.toHaveAttribute('aria-label');
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user