novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): 三轮视觉改造与页面过渡动画

Browse Source 
改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
2026-05-10 08:20:27 +08:00
parent 747405dc96
commit 37296b5717
133 changed files with 2583 additions and 13487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/footer.tsx
+26 -29
View File
@@ -5,10 +5,10 @@ import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants
export function Footer() {
return (
<footer className="bg-[#1C1C1C] text-white py-16" data-testid="footer" role="contentinfo">
<footer className="bg-[var(--color-footer-bg)] text-white py-16" data-testid="footer" role="contentinfo">
<div className="container-wide">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
<div data-testid="card-brand">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
<div data-testid="card-brand" className="lg:col-span-2">
<div className="mb-6">
<Image
src="/logo-light.svg"
@@ -19,12 +19,12 @@ export function Footer() {
priority
/>
</div>
<p className="text-[#A0A0A0] text-sm leading-relaxed mb-6">
<p className="text-[var(--color-footer-text)] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="pt-6 border-t border-[#333]">
<p className="text-sm text-[#A0A0A0] mb-3">关注公众号</p>
<div className="inline-block p-2 rounded-lg border border-[#333]">
<div className="pt-6 border-t border-[var(--color-footer-border)]">
<p className="text-sm text-[var(--color-footer-text)] mb-3">关注公众号</p>
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
<Image
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
alt="微信公众号二维码"
@@ -44,7 +44,7 @@ export function Footer() {
<li key={item.id}>
<StaticLink
href={item.href}
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
>
{item.label}
</StaticLink>
@@ -54,26 +54,23 @@ export function Footer() {
</div>
<div data-testid="card-products">
<h3 className="font-semibold text-base mb-5 text-white">产品</h3>
<h3 className="font-semibold text-base mb-5 text-white">产品与方案</h3>
<ul className="space-y-3">
{(MEGA_DROPDOWN_DATA.products ?? []).map((item) => (
<li key={item.id}>
<StaticLink
href={item.href}
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
>
{item.title}
</StaticLink>
</li>
))}
</ul>
<h3 className="font-semibold text-base mb-5 mt-8 text-white">解决方案</h3>
<ul className="space-y-3">
{(MEGA_DROPDOWN_DATA.solutions ?? []).map((item) => (
<li key={item.id}>
<StaticLink
href={item.href}
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
className="text-[var(--color-footer-text)] hover:text-white transition-colors duration-200 text-sm"
>
{item.title}
</StaticLink>
@@ -86,17 +83,17 @@ export function Footer() {
<h3 className="font-semibold text-base mb-5 text-white">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0" />
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.address}</span>
<MapPin className="w-4 h-4 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-4 h-4 text-[#C41E3A] shrink-0" />
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.email}</span>
<Mail className="w-4 h-4 text-[var(--color-brand-primary)] shrink-0" />
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.email}</span>
</li>
</ul>
<div className="mt-6 pt-6 border-t border-[#333]">
<p className="text-sm text-[#A0A0A0] mb-3">企业微信业务咨询</p>
<div className="inline-block p-2 rounded-lg border border-[#333]">
<div className="mt-6 pt-6 border-t border-[var(--color-footer-border)]">
<p className="text-sm text-[var(--color-footer-text)] mb-3">企业微信业务咨询</p>
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
<Image
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
alt="企业微信业务咨询二维码"
@@ -110,37 +107,37 @@ export function Footer() {
</div>
</div>
<div className="border-t border-[#333] mt-12 pt-8 pb-24 md:pb-8">
<div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-[#666] text-sm">
<p className="text-[var(--color-footer-text-muted)] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<StaticLink href="/privacy" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
<StaticLink href="/privacy" className="text-[var(--color-footer-text-muted)] hover:text-white text-sm transition-colors duration-200">
隐私政策
</StaticLink>
<StaticLink href="/terms" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
<StaticLink href="/terms" className="text-[var(--color-footer-text-muted)] hover:text-white text-sm transition-colors duration-200">
服务条款
</StaticLink>
</div>
</div>
<div className="text-center mt-6 pt-6 border-t border-[#333]">
<div className="text-center mt-6 pt-6 border-t border-[var(--color-footer-border)]">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs">
<a
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
className="text-[#E0E0E0] hover:text-white transition-colors duration-200"
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200"
>
{COMPANY_INFO.icp}
</a>
<span className="hidden sm:inline text-[#999]">|</span>
<span className="hidden sm:inline text-[var(--color-footer-text-dim)]">|</span>
<a
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
target="_blank"
rel="noreferrer"
className="text-[#E0E0E0] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
>
<Image
src="/images/beian-icon.png"