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

refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2

Browse Source 
- Remove TestimonialSection from homepage (no customers yet)
- Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links
- Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
This commit is contained in:
张翔
2026-04-30 22:00:00 +08:00
parent b6d2313e8f
commit fe6e4b1c54
24 changed files with 8928 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/home-content-v2.tsx
-6
View File
@@ -27,11 +27,6 @@ const ChallengeSection = dynamic(
{ loading: () => <SectionSkeleton />, ssr: false }
);
const TestimonialSection = dynamic(
() => import('@/components/sections/testimonial-section').then(mod => ({ default: mod.TestimonialSection })),
{ loading: () => <SectionSkeleton />, ssr: false }
);
const CTASection = dynamic(
() => import('@/components/sections/cta-section').then(mod => ({ default: mod.CTASection })),
{ loading: () => <SectionSkeleton />, ssr: false }
@@ -79,7 +74,6 @@ function HomeContentV2() {
<SocialProofSection />
<ProductMatrixSection />
<ChallengeSection />
<TestimonialSection />
<CTASection />
</main>
);
src/components/layout/footer.tsx
+95 -95
View File
@@ -1,151 +1,151 @@
import { StaticLink } from '@/components/ui/static-link';
import Image from 'next/image';
import { Mail, MapPin } from 'lucide-react';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-[#F5F5F5] border-t border-[#E5E5E5] py-12" data-testid="footer" role="contentinfo">
<footer className="bg-[#1C1C1C] 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-3 gap-6 lg:gap-8">
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-brand">
<div className="flex items-center mb-6">
<Image
src="/logo.svg"
alt={COMPANY_INFO.name}
width={192}
height={48}
className="transition-transform duration-200 hover:scale-105"
<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="mb-6">
<Image
src="/logo.svg"
alt={COMPANY_INFO.name}
width={160}
height={40}
className="brightness-0 invert"
loading="eager"
priority
/>
</div>
<p className="text-[#5C5C5C] text-sm leading-relaxed mb-6">
<p className="text-[#A0A0A0] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="pt-6 border-t border-[#E5E5E5]">
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">关注公众号</p>
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
<Image
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
alt="微信公众号二维码"
width={120}
height={120}
className="w-30 h-30"
<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]">
<Image
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
alt="微信公众号二维码"
width={100}
height={100}
className="w-25 h-25"
loading="lazy"
/>
</div>
<p className="text-xs text-[#718096] mt-2">扫码关注获取最新资讯</p>
</div>
</div>
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-navigation">
<div className="mb-6">
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">快速链接</h3>
<ul className="space-y-2.5">
{NAVIGATION.map((item) => (
<li key={item.id}>
<StaticLink
href={item.href}
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1"
>
{item.label}
</StaticLink>
</li>
))}
</ul>
</div>
<div className="pt-6 border-t border-[#E5E5E5]">
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">服务项目</h3>
<ul className="space-y-2.5">
<li>
<StaticLink href="/services/software" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
软件开发
<div data-testid="card-navigation">
<h3 className="font-semibold text-base mb-5 text-white">快速导航</h3>
<ul className="space-y-3">
{NAVIGATION_V2.map((item) => (
<li key={item.id}>
<StaticLink
href={item.href}
className="text-[#A0A0A0] hover:text-white transition-colors duration-200 text-sm"
>
{item.label}
</StaticLink>
</li>
<li>
<StaticLink href="/services/data" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
数据分析
</StaticLink>
</li>
<li>
<StaticLink href="/services/consulting" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
技术咨询
</StaticLink>
</li>
<li>
<StaticLink href="/services/solutions" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-all duration-200 inline-block hover:translate-x-1">
解决方案
</StaticLink>
</li>
</ul>
</div>
))}
</ul>
</div>
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-contact">
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">联系方式</h3>
<div data-testid="card-products">
<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"
>
{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"
>
{item.title}
</StaticLink>
</li>
))}
</ul>
</div>
<div data-testid="card-contact">
<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-5 h-5 text-[#C41E3A] mt-0.5 shrink-0" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.address}</span>
<MapPin className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0" />
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[#C41E3A] shrink-0" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.email}</span>
<Mail className="w-4 h-4 text-[#C41E3A] shrink-0" />
<span className="text-[#A0A0A0] text-sm">{COMPANY_INFO.email}</span>
</li>
</ul>
<div className="mt-6 pt-6 border-t border-[#E5E5E5]">
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">企业微信业务咨询</p>
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
<Image
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
alt="企业微信业务咨询二维码"
width={120}
height={120}
className="w-30 h-30"
<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]">
<Image
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
alt="企业微信业务咨询二维码"
width={100}
height={100}
className="w-25 h-25"
loading="lazy"
/>
</div>
<p className="text-xs text-[#718096] mt-2">扫码添加企业微信客服</p>
</div>
</div>
</div>
<div className="border-t border-[#E5E5E5] mt-12 pt-8">
<div className="border-t border-[#333] mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-[#5C5C5C] text-sm">
<p className="text-[#666] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<StaticLink href="/privacy" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
<StaticLink href="/privacy" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
隐私政策
</StaticLink>
<StaticLink href="/terms" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
<StaticLink href="/terms" className="text-[#666] hover:text-white text-sm transition-colors duration-200">
服务条款
</StaticLink>
</div>
</div>
<div className="text-center mt-6 pt-6 border-t border-[#E5E5E5]">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#718096]">
<a
href="https://beian.miit.gov.cn/"
target="_blank"
<div className="text-center mt-6 pt-6 border-t border-[#333]">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#555]">
<a
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#C41E3A] transition-colors duration-200"
className="hover:text-white transition-colors duration-200"
>
{COMPANY_INFO.icp}
</a>
<span className="hidden sm:inline">|</span>
<a
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
target="_blank"
<a
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
target="_blank"
rel="noreferrer"
className="hover:text-[#C41E3A] transition-colors duration-200 inline-flex items-center gap-1"
className="hover:text-white transition-colors duration-200 inline-flex items-center gap-1"
>
<Image
src="/images/beian-icon.png"
alt="公安备案"
<Image
src="/images/beian-icon.png"
alt="公安备案"
width={14}
height={14}
className="w-3.5 h-3.5"
src/components/layout/mobile-menu.tsx
+56 -28
View File
@@ -1,8 +1,9 @@
'use client';
import { useState, useEffect } from 'react';
import { Menu, X } from 'lucide-react';
import { NAVIGATION } from '@/lib/constants';
import { Menu, X, ChevronDown } from 'lucide-react';
import { StaticLink } from '@/components/ui/static-link';
import { NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
import { cn } from '@/lib/utils';
import { useFocusTrap } from '@/hooks/use-focus-trap';
@@ -12,6 +13,7 @@ interface MobileMenuProps {
export function MobileMenu({ className }: MobileMenuProps) {
const [isOpen, setIsOpen] = useState(false);
const [expandedDropdown, setExpandedDropdown] = useState<string | null>(null);
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
useEffect(() => {
@@ -20,34 +22,25 @@ export function MobileMenu({ className }: MobileMenuProps) {
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
const handleNavClick = (id: string) => {
setIsOpen(false);
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
const handleKeyDown = (event: React.KeyboardEvent, id?: string) => {
const handleKeyDown = (event: React.KeyboardEvent, action?: () => void) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
if (id) {
handleNavClick(id);
} else {
setIsOpen(!isOpen);
}
action?.();
}
if (event.key === 'Escape' && isOpen) {
setIsOpen(false);
}
};
const toggleDropdown = (key: string) => {
setExpandedDropdown(expandedDropdown === key ? null : key);
};
return (
<div className={cn('lg:hidden', className)} ref={focusTrapRef}>
<button
@@ -72,24 +65,59 @@ export function MobileMenu({ className }: MobileMenuProps) {
onClick={() => setIsOpen(false)}
aria-hidden="true"
/>
<nav
<nav
id="mobile-menu-panel"
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg"
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg max-h-[calc(100vh-4rem)] overflow-y-auto"
role="navigation"
aria-label="移动端导航"
>
<div className="container-wide py-4">
<ul className="space-y-1" role="list">
{NAVIGATION.map((item) => (
{NAVIGATION_V2.map((item) => (
<li key={item.id}>
<button
onClick={() => handleNavClick(item.id)}
onKeyDown={(e) => handleKeyDown(e, item.id)}
className="block w-full text-left px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset min-h-[48px]"
>
{item.label}
</button>
{item.hasDropdown && item.dropdownKey ? (
<div>
<button
onClick={() => toggleDropdown(item.dropdownKey!)}
onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
className="flex items-center justify-between w-full text-left px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset min-h-[48px]"
aria-expanded={expandedDropdown === item.dropdownKey}
>
{item.label}
<ChevronDown
className={cn(
'w-4 h-4 transition-transform duration-200',
expandedDropdown === item.dropdownKey && 'rotate-180'
)}
/>
</button>
{expandedDropdown === item.dropdownKey && (
<ul className="pl-4 space-y-1 mt-1 mb-2" role="list">
{(MEGA_DROPDOWN_DATA[item.dropdownKey] ?? []).map((sub) => (
<li key={sub.id}>
<StaticLink
href={sub.href}
onClick={() => setIsOpen(false)}
className="block px-4 py-3 text-sm text-[#595959] hover:text-[#C41E3A] hover:bg-[#FEF2F4] rounded-md transition-colors"
>
<span className="font-medium text-[#1C1C1C]">{sub.title}</span>
<span className="block text-xs text-[#8C8C8C] mt-0.5">{sub.description}</span>
</StaticLink>
</li>
))}
</ul>
)}
</div>
) : (
<StaticLink
href={item.href}
onClick={() => setIsOpen(false)}
className="block px-4 py-4 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors min-h-[48px]"
>
{item.label}
</StaticLink>
)}
</li>
))}
</ul>