fix: resolve test failures and improve test stability

- Fix navigation menu display and click issues
- Fix scroll to top/bottom test failures
- Fix section display tests by removing non-existent contact section
- Add data-testid attributes for better test reliability
- Optimize test expectations for scroll behavior
- Add contact page layout for metadata export
- Update section components with proper ARIA attributes

src/components/sections/about-section.tsx

@@ -14,7 +14,7 @@ export function AboutSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="about" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
+    <section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
       <div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
       <div className="container-wide relative z-10">
         <motion.div 
@@ -24,7 +24,7 @@ export function AboutSection() {
           className="max-w-4xl mx-auto"
         >
           <div className="text-center mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
+            <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
               关于 <span className="tracking-tight font-calligraphy text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
             </h2>
             <p className="text-lg text-[#5C5C5C] mb-8">

src/components/sections/cases-section.tsx

@@ -18,7 +18,7 @@ export function CasesSection() {
   const featuredCases = CASES.slice(0, 3);
 
   return (
-    <section id="cases" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+    <section id="cases" role="region" aria-labelledby="cases-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
       <div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
       <div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
       
@@ -29,7 +29,7 @@ export function CasesSection() {
           transition={{ duration: 0.6 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
+          <h2 id="cases-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
             与谁同行，<span className="text-[#C41E3A]">决定能走多远</span>
           </h2>
           <p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">

src/components/sections/contact-section.tsx

@@ -149,7 +149,7 @@ export function ContactSection() {
   }
 
   return (
-    <section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
+    <section id="contact" role="region" aria-labelledby="contact-heading" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
       {showToast && (
         <Toast
           message={toastMessage}
@@ -173,7 +173,7 @@ export function ContactSection() {
             <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
             <span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
           </div>
-          <h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
+          <h2 id="contact-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
             开启 <span className="text-[#C41E3A]">合作</span>
           </h2>
           <p className="mt-4 text-[#5C5C5C] max-w-2xl">
@@ -226,13 +226,13 @@ export function ContactSection() {
               </div>
             </div>
 
-            <div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
+            <div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" aria-label="工作时间" data-testid="work-hours-card">
               <div className="flex items-center gap-2 mb-3">
                 <Clock className="w-4 h-4 text-[#C41E3A]" />
                 <h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
               </div>
               <div className="space-y-1">
-                <div className="flex justify-between text-sm">
+                <div className="flex justify-between text-sm" data-testid="work-hours-row">
                   <span className="text-[#5C5C5C]">周一至周五</span>
                   <span className="text-[#C41E3A]">9:00 - 18:00</span>
                 </div>

src/components/sections/news-section.tsx

@@ -15,7 +15,7 @@ export function NewsSection() {
   const displayedNews = useMemo(() => NEWS.slice(0, 4), []);
 
   return (
-    <section id="news" className="py-24 bg-[#F5F5F5]" ref={ref}>
+    <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
       <div className="container-custom">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -23,7 +23,7 @@ export function NewsSection() {
           transition={{ duration: 0.5 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
+          <h2 id="news-heading" className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
             最新<span className="text-[#C41E3A]">资讯</span>
           </h2>
           <p className="text-lg text-[#5C5C5C]">

src/components/sections/products-section.tsx

@@ -15,7 +15,7 @@ export function ProductsSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="products" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
+    <section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
       <div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
       <div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
       <div className="container-wide relative z-10">
@@ -25,7 +25,7 @@ export function ProductsSection() {
           transition={{ duration: 0.6 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
+          <h2 id="products-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
             我们的<span className="text-[#C41E3A]">产品</span>
           </h2>
           <p className="text-lg text-[#5C5C5C]">