chore: remove GitHub Actions workflows, use Woodpecker CI exclusively

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono, Noto_Sans_SC, Ma_Shan_Zheng, Long_Cang } from "next/
 import "./globals.css";
 import { ThemeProvider } from "@/contexts/theme-context";
 import { WebVitals } from "@/components/analytics/web-vitals";
+import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
 import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
@@ -139,6 +140,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} ${maShanZheng.variable} ${longCang.variable} font-sans antialiased`}
         style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
       >
+        <GoogleAnalytics />
         <WebVitals />
         <SessionProvider>
           <ThemeProvider>

src/components/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import Script from 'next/script';
+import { useEffect } from 'react';
+import { GA_MEASUREMENT_ID } from '@/lib/analytics';
+
+export function GoogleAnalytics() {
+  useEffect(() => {
+    if (GA_MEASUREMENT_ID) {
+      console.log('Google Analytics initialized:', GA_MEASUREMENT_ID);
+    }
+  }, []);
+
+  if (!GA_MEASUREMENT_ID) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          window.gtag = gtag;
+          gtag('js', new Date());
+          gtag('config', '${GA_MEASUREMENT_ID}', {
+            page_path: window.location.pathname,
+            send_page_view: false
+          });
+        `}
+      </Script>
+    </>
+  );
+}

src/components/examples/ContactFormAnalyticsExample.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState } from 'react';
+import { trackContactForm } from '@/lib/analytics';
+
+export function ContactFormAnalyticsExample() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    company: '',
+    message: ''
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      // 追踪表单提交
+      trackContactForm(formData);
+
+      // 提交表单逻辑...
+      console.log('Form submitted:', formData);
+
+    } catch (error) {
+      console.error('Form submission error:', error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium mb-1">
+          姓名
+        </label>
+        <input
+          id="name"
+          type="text"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+          required
+        />
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          邮箱
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={formData.email}
+          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+          required
+        />
+      </div>
+
+      <div>
+        <label htmlFor="phone" className="block text-sm font-medium mb-1">
+          电话
+        </label>
+        <input
+          id="phone"
+          type="tel"
+          value={formData.phone}
+          onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="company" className="block text-sm font-medium mb-1">
+          公司
+        </label>
+        <input
+          id="company"
+          type="text"
+          value={formData.company}
+          onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="message" className="block text-sm font-medium mb-1">
+          留言内容
+        </label>
+        <textarea
+          id="message"
+          value={formData.message}
+          onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg h-32"
+          required
+        />
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
+      >
+        提交
+      </button>
+    </form>
+  );
+}

src/components/layout/footer.test.tsx

@@ -0,0 +1,183 @@
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('next/link', () => {
+  return ({ children, href, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  );
+});
+
+jest.mock('next/image', () => {
+  return ({ src, alt, width, height, className, ...props }: any) => (
+    <img src={src} alt={alt} width={width} height={height} className={className} {...props} />
+  );
+});
+
+jest.mock('lucide-react', () => ({
+  Mail: () => <span data-testid="mail-icon" />,
+  Phone: () => <span data-testid="phone-icon" />,
+  MapPin: () => <span data-testid="map-pin-icon" />,
+}));
+
+jest.mock('@/lib/constants', () => ({
+  COMPANY_INFO: {
+    name: '四川睿新致远科技有限公司',
+    description: '以智慧连接数字趋势，以伙伴身份陪您成长',
+    email: 'contact@novalon.cn',
+    phone: '028-88888888',
+    address: '中国四川省成都市龙泉驿区幸福路12号',
+    icp: '蜀ICP备XXXXXXXX号',
+    police: '川公网安备XXXXXXXXXXX号',
+  },
+  NAVIGATION: [
+    { id: 'home', label: '首页', href: '/' },
+    { id: 'services', label: '服务', href: '/#services' },
+    { id: 'products', label: '产品', href: '/#products' },
+    { id: 'cases', label: '案例', href: '/#cases' },
+    { id: 'about', label: '关于', href: '/#about' },
+    { id: 'contact', label: '联系', href: '/contact' },
+  ],
+}));
+
+import { Footer } from './footer';
+
+describe('Footer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render footer component', () => {
+      render(<Footer />);
+      expect(screen.getByTestId('footer')).toBeInTheDocument();
+    });
+
+    it('should render logo', () => {
+      render(<Footer />);
+      const logo = screen.getByAltText('四川睿新致远科技有限公司');
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('should render company description', () => {
+      render(<Footer />);
+      expect(screen.getByText('以智慧连接数字趋势，以伙伴身份陪您成长')).toBeInTheDocument();
+    });
+
+    it('should render quick links section', () => {
+      render(<Footer />);
+      expect(screen.getByText('快速链接')).toBeInTheDocument();
+    });
+
+    it('should render service items section', () => {
+      render(<Footer />);
+      expect(screen.getByText('服务项目')).toBeInTheDocument();
+    });
+
+    it('should render contact information section', () => {
+      render(<Footer />);
+      expect(screen.getByText('联系方式')).toBeInTheDocument();
+    });
+
+    it('should render navigation links', () => {
+      render(<Footer />);
+      expect(screen.getByText('首页')).toBeInTheDocument();
+      expect(screen.getByText('服务')).toBeInTheDocument();
+      expect(screen.getByText('产品')).toBeInTheDocument();
+      expect(screen.getByText('案例')).toBeInTheDocument();
+      expect(screen.getByText('关于')).toBeInTheDocument();
+      expect(screen.getByText('联系')).toBeInTheDocument();
+    });
+
+    it('should render service links', () => {
+      render(<Footer />);
+      expect(screen.getByText('软件开发')).toBeInTheDocument();
+      expect(screen.getByText('云服务')).toBeInTheDocument();
+      expect(screen.getByText('数据分析')).toBeInTheDocument();
+      expect(screen.getByText('信息安全')).toBeInTheDocument();
+    });
+
+    it('should render contact details', () => {
+      render(<Footer />);
+      expect(screen.getByText('contact@novalon.cn')).toBeInTheDocument();
+      expect(screen.getByText('028-88888888')).toBeInTheDocument();
+      expect(screen.getByText('中国四川省成都市龙泉驿区幸福路12号')).toBeInTheDocument();
+    });
+  });
+
+  describe('Icons', () => {
+    it('should render contact icons', () => {
+      render(<Footer />);
+      expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('phone-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('map-pin-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Legal Links', () => {
+    it('should render privacy policy link', () => {
+      render(<Footer />);
+      expect(screen.getByText('隐私政策')).toBeInTheDocument();
+    });
+
+    it('should render terms of service link', () => {
+      render(<Footer />);
+      expect(screen.getByText('服务条款')).toBeInTheDocument();
+    });
+
+    it('should render ICP filing info', () => {
+      render(<Footer />);
+      expect(screen.getByText('蜀ICP备XXXXXXXX号')).toBeInTheDocument();
+    });
+
+    it('should render police filing info', () => {
+      render(<Footer />);
+      expect(screen.getByText('川公网安备XXXXXXXXXXX号')).toBeInTheDocument();
+    });
+  });
+
+  describe('Copyright', () => {
+    it('should render copyright with current year', () => {
+      render(<Footer />);
+      const currentYear = new Date().getFullYear();
+      expect(screen.getByText(new RegExp(`${currentYear}`))).toBeInTheDocument();
+    });
+
+    it('should render company name in copyright', () => {
+      render(<Footer />);
+      expect(screen.getByText(/四川睿新致远科技有限公司/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper role attribute', () => {
+      render(<Footer />);
+      const footer = screen.getByTestId('footer');
+      expect(footer).toHaveAttribute('role', 'contentinfo');
+    });
+
+    it('should have proper link hrefs', () => {
+      render(<Footer />);
+      const privacyLink = screen.getByText('隐私政策').closest('a');
+      const termsLink = screen.getByText('服务条款').closest('a');
+      
+      expect(privacyLink).toHaveAttribute('href', '/privacy');
+      expect(termsLink).toHaveAttribute('href', '/terms');
+    });
+  });
+
+  describe('QR Code Section', () => {
+    it('should render QR code image', () => {
+      render(<Footer />);
+      const qrCode = screen.getByAltText('微信公众号二维码');
+      expect(qrCode).toBeInTheDocument();
+    });
+
+    it('should render QR code description', () => {
+      render(<Footer />);
+      expect(screen.getByText('扫码关注获取最新资讯')).toBeInTheDocument();
+    });
+  });
+});

src/components/layout/header.test.tsx

@@ -0,0 +1,199 @@
+import { describe, it, expect, jest, beforeEach, afterEach } from '@jest/globals';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const mockPush = jest.fn();
+const mockReplace = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => '/'),
+  useSearchParams: jest.fn(() => new URLSearchParams()),
+  useRouter: jest.fn(() => ({
+    push: mockPush,
+    replace: mockReplace,
+  })),
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href, onClick, ...props }: any) => (
+    <a href={href} onClick={onClick} {...props}>
+      {children}
+    </a>
+  );
+});
+
+jest.mock('next/image', () => {
+  return ({ src, alt, width, height, className, ...props }: any) => (
+    <img src={src} alt={alt} width={width} height={height} className={className} {...props} />
+  );
+});
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, ...props }: any) => (
+      <div className={className} {...props}>
+        {children}
+      </div>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock('lucide-react', () => ({
+  Menu: () => <span data-testid="menu-icon" />,
+  X: () => <span data-testid="x-icon" />,
+}));
+
+jest.mock('@/components/ui/button', () => ({
+  Button: ({ children, className, asChild, ...props }: any) => (
+    <button className={className} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('@/lib/constants', () => ({
+  COMPANY_INFO: {
+    name: '四川睿新致远科技有限公司',
+    shortName: '睿新致遠',
+  },
+  NAVIGATION: [
+    { id: 'home', label: '首页', href: '/' },
+    { id: 'services', label: '服务', href: '/#services' },
+    { id: 'products', label: '产品', href: '/#products' },
+    { id: 'cases', label: '案例', href: '/#cases' },
+    { id: 'about', label: '关于', href: '/#about' },
+    { id: 'contact', label: '联系', href: '/contact' },
+  ],
+}));
+
+jest.mock('@/hooks/use-focus-trap', () => ({
+  useFocusTrap: () => ({ current: null }),
+}));
+
+import { Header } from './header';
+
+describe('Header', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render header component', () => {
+      render(<Header />);
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+    });
+
+    it('should render logo', () => {
+      render(<Header />);
+      const logo = screen.getByAltText('四川睿新致远科技有限公司');
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('should render desktop navigation', () => {
+      render(<Header />);
+      expect(screen.getByTestId('desktop-navigation')).toBeInTheDocument();
+    });
+
+    it('should render navigation items', () => {
+      render(<Header />);
+      expect(screen.getByText('首页')).toBeInTheDocument();
+      expect(screen.getByText('服务')).toBeInTheDocument();
+      expect(screen.getByText('产品')).toBeInTheDocument();
+      expect(screen.getByText('案例')).toBeInTheDocument();
+      expect(screen.getByText('关于')).toBeInTheDocument();
+      expect(screen.getByText('联系')).toBeInTheDocument();
+    });
+
+    it('should render consult button', () => {
+      render(<Header />);
+      expect(screen.getByTestId('consult-button')).toBeInTheDocument();
+    });
+
+    it('should render mobile menu button', () => {
+      render(<Header />);
+      expect(screen.getByTestId('mobile-menu-button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Mobile Menu', () => {
+    it('should toggle mobile menu on button click', async () => {
+      render(<Header />);
+      const menuButton = screen.getByTestId('mobile-menu-button');
+      
+      expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
+      
+      fireEvent.click(menuButton);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('mobile-navigation')).toBeInTheDocument();
+      });
+      
+      fireEvent.click(menuButton);
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should show X icon when menu is open', async () => {
+      render(<Header />);
+      const menuButton = screen.getByTestId('mobile-menu-button');
+      
+      fireEvent.click(menuButton);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('x-icon')).toBeInTheDocument();
+      });
+    });
+
+    it('should show Menu icon when menu is closed', () => {
+      render(<Header />);
+      expect(screen.getByTestId('menu-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes on menu button', () => {
+      render(<Header />);
+      const menuButton = screen.getByTestId('mobile-menu-button');
+      
+      expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+      expect(menuButton).toHaveAttribute('aria-controls', 'mobile-menu');
+      expect(menuButton).toHaveAttribute('aria-label', '打开菜单');
+    });
+
+    it('should update aria-expanded when menu is toggled', async () => {
+      render(<Header />);
+      const menuButton = screen.getByTestId('mobile-menu-button');
+      
+      fireEvent.click(menuButton);
+      
+      await waitFor(() => {
+        expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+        expect(menuButton).toHaveAttribute('aria-label', '关闭菜单');
+      });
+    });
+
+    it('should have proper navigation role', () => {
+      render(<Header />);
+      const nav = screen.getByTestId('desktop-navigation');
+      expect(nav).toHaveAttribute('role', 'navigation');
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should have correct href for navigation items', () => {
+      render(<Header />);
+      const homeLink = screen.getByText('首页').closest('a');
+      const contactLink = screen.getByText('联系').closest('a');
+      
+      expect(homeLink).toHaveAttribute('href', '/');
+      expect(contactLink).toHaveAttribute('href', '/contact');
+    });
+  });
+});

src/components/layout/mobile-menu.test.tsx

@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MobileMenu } from './mobile-menu';
+
+jest.mock('@/hooks/use-focus-trap', () => ({
+  useFocusTrap: () => ({ current: null }),
+}));
+
+describe('MobileMenu', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render menu button', () => {
+      render(<MobileMenu />);
+      expect(screen.getByRole('button', { name: '打开菜单' })).toBeInTheDocument();
+    });
+
+    it('should render menu icon when closed', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should not render menu panel when closed', () => {
+      render(<MobileMenu />);
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Opening Menu', () => {
+    it('should open menu when button clicked', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+
+    it('should change button label when open', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      expect(screen.getByRole('button', { name: '关闭菜单' })).toBeInTheDocument();
+    });
+
+    it('should render navigation items', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      expect(screen.getByText('首页')).toBeInTheDocument();
+      expect(screen.getByText('核心业务')).toBeInTheDocument();
+    });
+  });
+
+  describe('Closing Menu', () => {
+    it('should close menu when button clicked again', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      const closeButton = screen.getByRole('button', { name: '关闭菜单' });
+      fireEvent.click(closeButton);
+      
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+
+    it('should close menu when overlay clicked', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      const overlay = document.querySelector('.fixed.inset-0');
+      if (overlay) {
+        fireEvent.click(overlay);
+      }
+      
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should open menu with Enter key', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.keyDown(button, { key: 'Enter' });
+      
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+
+    it('should open menu with Space key', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.keyDown(button, { key: ' ' });
+      
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+
+    it('should close menu with Escape key', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      fireEvent.keyDown(button, { key: 'Escape' });
+      
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have aria-expanded attribute', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should update aria-expanded when open', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('should have aria-controls attribute', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-controls', 'mobile-menu-panel');
+    });
+
+    it('should have navigation role', () => {
+      render(<MobileMenu />);
+      const button = screen.getByRole('button', { name: '打开菜单' });
+      fireEvent.click(button);
+      
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-label', '移动端导航');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have responsive visibility', () => {
+      const { container } = render(<MobileMenu />);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('lg:hidden');
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<MobileMenu className="custom-class" />);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('custom-class');
+    });
+  });
+});

src/components/layout/mobile-tab-bar.test.tsx

@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MobileTabBar } from './mobile-tab-bar';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+}));
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+describe('MobileTabBar', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render tab bar', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should render all tabs', () => {
+      render(<MobileTabBar />);
+      expect(screen.getByText('首页')).toBeInTheDocument();
+      expect(screen.getByText('服务')).toBeInTheDocument();
+      expect(screen.getByText('产品')).toBeInTheDocument();
+      expect(screen.getByText('新闻')).toBeInTheDocument();
+      expect(screen.getByText('联系')).toBeInTheDocument();
+    });
+
+    it('should render tab icons', () => {
+      render(<MobileTabBar />);
+      const icons = document.querySelectorAll('svg');
+      expect(icons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Active State', () => {
+    it('should highlight active tab', () => {
+      render(<MobileTabBar />);
+      const homeTab = screen.getByText('首页').closest('a');
+      expect(homeTab).toBeInTheDocument();
+    });
+
+    it('should show active indicator', () => {
+      render(<MobileTabBar />);
+      const activeIndicator = document.querySelector('.bg-\\[\\#C41E3A\\]');
+      expect(activeIndicator).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation Links', () => {
+    it('should have correct href for home', () => {
+      render(<MobileTabBar />);
+      const homeLink = screen.getByText('首页').closest('a');
+      expect(homeLink).toHaveAttribute('href', '/');
+    });
+
+    it('should have correct href for services', () => {
+      render(<MobileTabBar />);
+      const servicesLink = screen.getByText('服务').closest('a');
+      expect(servicesLink).toHaveAttribute('href', '/#services');
+    });
+
+    it('should have correct href for products', () => {
+      render(<MobileTabBar />);
+      const productsLink = screen.getByText('产品').closest('a');
+      expect(productsLink).toHaveAttribute('href', '/#products');
+    });
+
+    it('should have correct href for news', () => {
+      render(<MobileTabBar />);
+      const newsLink = screen.getByText('新闻').closest('a');
+      expect(newsLink).toHaveAttribute('href', '/#news');
+    });
+
+    it('should have correct href for contact', () => {
+      render(<MobileTabBar />);
+      const contactLink = screen.getByText('联系').closest('a');
+      expect(contactLink).toHaveAttribute('href', '/#contact');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have navigation role', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should have accessible tab labels', () => {
+      render(<MobileTabBar />);
+      const tabs = screen.getAllByRole('link');
+      expect(tabs.length).toBe(5);
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have fixed positioning', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('fixed');
+      expect(nav).toHaveClass('bottom-0');
+    });
+
+    it('should have responsive visibility', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('md:hidden');
+    });
+
+    it('should have backdrop blur', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('backdrop-blur-xl');
+    });
+
+    it('should have proper height', () => {
+      render(<MobileTabBar />);
+      const nav = screen.getByRole('navigation');
+      const heightDiv = nav.querySelector('.h-16');
+      expect(heightDiv).toBeInTheDocument();
+    });
+  });
+});

src/components/sections/about-section.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AboutSection } from './about-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+describe('AboutSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render about section', () => {
+      render(<AboutSection />);
+      const section = document.querySelector('section#about');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<AboutSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render company slogan', () => {
+      render(<AboutSection />);
+      expect(screen.getByText(/企业需要的/)).toBeInTheDocument();
+    });
+
+    it('should render company mission', () => {
+      render(<AboutSection />);
+      expect(screen.getByText(/我们只做一件事/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Statistics', () => {
+    it('should render statistics cards', () => {
+      render(<AboutSection />);
+      const cards = document.querySelectorAll('.text-3xl');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should display statistics in grid layout', () => {
+      const { container } = render(<AboutSection />);
+      const grid = container.querySelector('.grid-cols-2');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+
+  describe('Call to Action', () => {
+    it('should render learn more button', () => {
+      render(<AboutSection />);
+      expect(screen.getByRole('link', { name: /了解更多关于我们/ })).toBeInTheDocument();
+    });
+
+    it('should link to about page', () => {
+      render(<AboutSection />);
+      const link = screen.getByRole('link', { name: /了解更多关于我们/ });
+      expect(link).toHaveAttribute('href', '/about');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have region role', () => {
+      render(<AboutSection />);
+      const section = screen.getByRole('region');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have aria-labelledby attribute', () => {
+      render(<AboutSection />);
+      const section = document.querySelector('section#about');
+      expect(section).toHaveAttribute('aria-labelledby', 'about-heading');
+    });
+
+    it('should have accessible heading', () => {
+      render(<AboutSection />);
+      const heading = screen.getByRole('heading', { level: 2 });
+      expect(heading).toHaveAttribute('id', 'about-heading');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have background color', () => {
+      render(<AboutSection />);
+      const section = document.querySelector('section#about');
+      expect(section).toHaveClass('bg-[#FAFAFA]');
+    });
+
+    it('should have proper padding', () => {
+      render(<AboutSection />);
+      const section = document.querySelector('section#about');
+      expect(section).toHaveClass('py-24');
+    });
+
+    it('should have decorative background pattern', () => {
+      const { container } = render(<AboutSection />);
+      const pattern = container.querySelector('.absolute.inset-0');
+      expect(pattern).toBeInTheDocument();
+    });
+  });
+});

src/components/sections/cases-section.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CasesSection } from './cases-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+jest.mock('@/lib/constants', () => ({
+  CASES: [
+    {
+      id: 'case-1',
+      client: '测试客户',
+      title: '测试案例',
+      description: '测试描述',
+      industry: '制造业',
+      results: [{ value: '40%', label: '效率提升' }],
+    },
+    {
+      id: 'case-2',
+      client: '测试客户2',
+      title: '测试案例2',
+      description: '测试描述2',
+      industry: '零售业',
+      results: [{ value: '50%', label: '成本降低' }],
+    },
+  ],
+}));
+
+describe('CasesSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render cases section', () => {
+      render(<CasesSection />);
+      const section = document.querySelector('section#cases');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<CasesSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<CasesSection />);
+      expect(screen.getByText(/我们与优秀的企业同行/)).toBeInTheDocument();
+    });
+
+    it('should render case cards', () => {
+      render(<CasesSection />);
+      expect(screen.getByText('测试案例')).toBeInTheDocument();
+    });
+
+    it('should render client names', () => {
+      render(<CasesSection />);
+      expect(screen.getByText('测试客户')).toBeInTheDocument();
+    });
+
+    it('should render industry badges', () => {
+      render(<CasesSection />);
+      expect(screen.getByText('制造业')).toBeInTheDocument();
+    });
+
+    it('should render results', () => {
+      render(<CasesSection />);
+      expect(screen.getByText('40%')).toBeInTheDocument();
+    });
+
+    it('should render view more button', () => {
+      render(<CasesSection />);
+      expect(screen.getByText('查看更多案例')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have section id', () => {
+      render(<CasesSection />);
+      const section = document.querySelector('section#cases');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have region role', () => {
+      render(<CasesSection />);
+      const section = document.querySelector('section[role="region"]');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have aria-labelledby', () => {
+      render(<CasesSection />);
+      const section = document.querySelector('section[aria-labelledby="cases-heading"]');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have correct background', () => {
+      render(<CasesSection />);
+      const section = document.querySelector('section.bg-white');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have container', () => {
+      render(<CasesSection />);
+      const container = document.querySelector('.container-wide');
+      expect(container).toBeInTheDocument();
+    });
+  });
+});

src/components/sections/contact-section.test.tsx

@@ -0,0 +1,227 @@
+import { describe, it, expect, jest, beforeAll, afterEach } from '@jest/globals';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, ...props }: any) => (
+      <div className={className} {...props}>
+        {children}
+      </div>
+    ),
+    section: ({ children, className, ...props }: any) => (
+      <section className={className} {...props}>
+        {children}
+      </section>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock('lucide-react', () => ({
+  Mail: () => <span data-testid="mail-icon" />,
+  Phone: () => <span data-testid="phone-icon" />,
+  MapPin: () => <span data-testid="map-pin-icon" />,
+  Send: () => <span data-testid="send-icon" />,
+  Loader2: () => <span data-testid="loader-icon" />,
+  Clock: () => <span data-testid="clock-icon" />,
+  HeadphonesIcon: () => <span data-testid="headphones-icon" />,
+  CheckCircle2: () => <span data-testid="check-circle-icon" />,
+}));
+
+jest.mock('@/lib/sanitize', () => ({
+  sanitizeInput: (value: string) => value,
+}));
+
+jest.mock('@/lib/csrf', () => ({
+  generateCSRFToken: jest.fn(() => 'test-csrf-token'),
+  setCSRFTokenToStorage: jest.fn(),
+  getCSRFTokenFromStorage: jest.fn(() => 'test-csrf-token'),
+}));
+
+jest.mock('@/lib/constants', () => ({
+  COMPANY_INFO: {
+    name: '四川睿新致远科技有限公司',
+    email: 'contact@novalon.cn',
+    phone: '028-88888888',
+    address: '中国四川省成都市龙泉驿区幸福路12号',
+  },
+}));
+
+jest.mock('@/components/ui/button', () => ({
+  Button: ({ children, className, disabled, ...props }: any) => (
+    <button className={className} disabled={disabled} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('@/components/ui/input', () => ({
+  Input: ({ label, id, placeholder, required, value, onChange, onBlur, error, ...props }: any) => (
+    <div>
+      <label htmlFor={id}>{label}{required && '*'}</label>
+      <input
+        id={id}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        data-testid={`${id}-input`}
+        {...props}
+      />
+      {error && <span data-testid={`${id}-error`}>{error}</span>}
+    </div>
+  ),
+}));
+
+jest.mock('@/components/ui/textarea', () => ({
+  Textarea: ({ label, id, placeholder, rows, required, value, onChange, onBlur, error, ...props }: any) => (
+    <div>
+      <label htmlFor={id}>{label}{required && '*'}</label>
+      <textarea
+        id={id}
+        placeholder={placeholder}
+        rows={rows}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        data-testid={`${id}-input`}
+        {...props}
+      />
+      {error && <span data-testid={`${id}-error`}>{error}</span>}
+    </div>
+  ),
+}));
+
+jest.mock('@/components/ui/toast', () => ({
+  Toast: ({ message, type, onClose, ...props }: any) => (
+    <div data-testid="toast-notification" data-type={type} {...props}>
+      {message}
+      <button onClick={onClose}>关闭</button>
+    </div>
+  ),
+}));
+
+import { ContactSection } from './contact-section';
+
+describe('ContactSection', () => {
+  beforeAll(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render contact section', () => {
+      render(<ContactSection />);
+      const section = document.querySelector('section#contact');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render contact form', () => {
+      render(<ContactSection />);
+      expect(screen.getByTestId('name-input')).toBeInTheDocument();
+      expect(screen.getByTestId('phone-input')).toBeInTheDocument();
+      expect(screen.getByTestId('email-input')).toBeInTheDocument();
+      expect(screen.getByTestId('message-input')).toBeInTheDocument();
+    });
+
+    it('should render submit button', () => {
+      render(<ContactSection />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render company contact information', () => {
+      render(<ContactSection />);
+      expect(screen.getByText('contact@novalon.cn')).toBeInTheDocument();
+      expect(screen.getByText('028-88888888')).toBeInTheDocument();
+      expect(screen.getByText('中国四川省成都市龙泉驿区幸福路12号')).toBeInTheDocument();
+    });
+
+    it('should render work hours card', () => {
+      render(<ContactSection />);
+      expect(screen.getByTestId('work-hours-card')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('should show error for invalid name', async () => {
+      render(<ContactSection />);
+      const nameInput = screen.getByTestId('name-input');
+      
+      await userEvent.type(nameInput, '张');
+      fireEvent.blur(nameInput);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('name-error')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error for invalid phone', async () => {
+      render(<ContactSection />);
+      const phoneInput = screen.getByTestId('phone-input');
+      
+      await userEvent.type(phoneInput, '1234567890');
+      fireEvent.blur(phoneInput);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('phone-error')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error for invalid email', async () => {
+      render(<ContactSection />);
+      const emailInput = screen.getByTestId('email-input');
+      
+      await userEvent.type(emailInput, 'invalid-email');
+      fireEvent.blur(emailInput);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('email-error')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error for short message', async () => {
+      render(<ContactSection />);
+      const messageInput = screen.getByTestId('message-input');
+      
+      await userEvent.type(messageInput, '短留言');
+      fireEvent.blur(messageInput);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('message-error')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper form labels', () => {
+      render(<ContactSection />);
+      
+      expect(screen.getByLabelText(/姓名/)).toBeInTheDocument();
+      expect(screen.getByLabelText(/电话/)).toBeInTheDocument();
+      expect(screen.getByLabelText(/邮箱/)).toBeInTheDocument();
+      expect(screen.getByLabelText(/留言/)).toBeInTheDocument();
+    });
+
+    it('should have proper ARIA attributes', () => {
+      render(<ContactSection />);
+      const section = document.querySelector('section#contact');
+      expect(section).toHaveAttribute('role', 'region');
+      expect(section).toHaveAttribute('aria-labelledby', 'contact-heading');
+    });
+  });
+
+  describe('CSRF Protection', () => {
+    it('should generate CSRF token on mount', () => {
+      const { generateCSRFToken, setCSRFTokenToStorage } = require('@/lib/csrf');
+      render(<ContactSection />);
+      
+      expect(generateCSRFToken).toHaveBeenCalled();
+      expect(setCSRFTokenToStorage).toHaveBeenCalledWith('test-csrf-token');
+    });
+  });
+});

src/components/sections/hero-section.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, jest, beforeAll } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, ...props }: any) => (
+      <div className={className} {...props}>
+        {children}
+      </div>
+    ),
+    section: ({ children, className, ...props }: any) => (
+      <section className={className} {...props}>
+        {children}
+      </section>
+    ),
+    span: ({ children, className, ...props }: any) => (
+      <span className={className} {...props}>
+        {children}
+      </span>
+    ),
+    h1: ({ children, className, ...props }: any) => (
+      <h1 className={className} {...props}>
+        {children}
+      </h1>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  );
+});
+
+jest.mock('lucide-react', () => ({
+  ArrowRight: () => <span data-testid="arrow-right" />,
+  Shield: () => <span data-testid="shield-icon" />,
+  Zap: () => <span data-testid="zap-icon" />,
+  Award: () => <span data-testid="award-icon" />,
+}));
+
+jest.mock('next/dynamic', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: (importFn: any, options: any) => {
+      return React.forwardRef((props: any, ref: any) => {
+        return null;
+      });
+    },
+  };
+});
+
+jest.mock('@/components/ui/ripple-button', () => ({
+  RippleButton: ({ children, className, ...props }: any) => (
+    <button className={className} {...props}>
+      {children}
+    </button>
+  ),
+  SealButton: ({ children, className, ...props }: any) => (
+    <button className={className} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('@/lib/animations', () => ({
+  GradientText: ({ children, className }: any) => (
+    <span className={className}>{children}</span>
+  ),
+  MagneticButton: ({ children, className }: any) => (
+    <button className={className}>{children}</button>
+  ),
+  BlurReveal: ({ children, className }: any) => (
+    <div className={className}>{children}</div>
+  ),
+  CounterWithEffect: ({ end, suffix, className }: any) => (
+    <span className={className}>{end}{suffix || ''}</span>
+  ),
+}));
+
+jest.mock('@/lib/constants', () => ({
+  COMPANY_INFO: {
+    name: '四川睿新致远科技有限公司',
+    shortName: '睿新致遠',
+    description: '以智慧连接数字趋势，以伙伴身份陪您成长',
+  },
+  STATS: [
+    { value: '10+', label: '企业客户' },
+    { value: '20+', label: '成功案例' },
+    { value: '30+', label: '项目交付' },
+    { value: '12+', label: '年行业经验' },
+  ],
+}));
+
+import { HeroSection } from './hero-section';
+
+describe('HeroSection', () => {
+  beforeAll(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render hero section', () => {
+      render(<HeroSection />);
+      const section = document.querySelector('section#home');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render company name', () => {
+      render(<HeroSection />);
+      expect(screen.getByText('睿新致遠')).toBeInTheDocument();
+    });
+
+    it('should render features', () => {
+      render(<HeroSection />);
+      expect(screen.getByText('安全可靠')).toBeInTheDocument();
+      expect(screen.getByText('高效便捷')).toBeInTheDocument();
+      expect(screen.getByText('专业服务')).toBeInTheDocument();
+    });
+  });
+
+  describe('Statistics', () => {
+    it('should render statistics section', () => {
+      render(<HeroSection />);
+      expect(screen.getByText('企业客户')).toBeInTheDocument();
+      expect(screen.getByText('成功案例')).toBeInTheDocument();
+      expect(screen.getByText('项目交付')).toBeInTheDocument();
+      expect(screen.getByText('年行业经验')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA labels', () => {
+      render(<HeroSection />);
+      const section = document.querySelector('section#home');
+      expect(section).toHaveAttribute('aria-labelledby', 'hero-heading');
+    });
+
+    it('should have accessible buttons', () => {
+      render(<HeroSection />);
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+  });
+});

src/components/sections/insights-section.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InsightsSection } from './insights-section';
+
+jest.mock('@/components/ui/insight-card', () => ({
+  InsightCard: ({ title, category }: any) => (
+    <div data-testid="insight-card">
+      <div>{title}</div>
+      <div>{category}</div>
+    </div>
+  ),
+}));
+
+describe('InsightsSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render insights section', () => {
+      render(<InsightsSection />);
+      const section = document.querySelector('section#insights');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<InsightsSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<InsightsSection />);
+      expect(screen.getByText(/分享前沿技术趋势/)).toBeInTheDocument();
+    });
+
+    it('should render insight cards', () => {
+      render(<InsightsSection />);
+      const cards = screen.getAllByTestId('insight-card');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should render insight titles', () => {
+      render(<InsightsSection />);
+      expect(screen.getByText('2025年技术趋势：AI驱动的数字化转型')).toBeInTheDocument();
+    });
+
+    it('should render insight categories', () => {
+      render(<InsightsSection />);
+      expect(screen.getByText('技术趋势')).toBeInTheDocument();
+    });
+
+    it('should render view all button', () => {
+      render(<InsightsSection />);
+      expect(screen.getByText('查看全部洞察')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have section id', () => {
+      render(<InsightsSection />);
+      const section = document.querySelector('section#insights');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have correct background', () => {
+      render(<InsightsSection />);
+      const section = document.querySelector('section.bg-\\[\\#FAFAFA\\]');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have container', () => {
+      render(<InsightsSection />);
+      const container = document.querySelector('.container-wide');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should have grid layout', () => {
+      render(<InsightsSection />);
+      const grid = document.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+});

src/components/sections/news-section.test.tsx

@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NewsSection } from './news-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+describe('NewsSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render news section', () => {
+      render(<NewsSection />);
+      const section = document.querySelector('section#news');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<NewsSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<NewsSection />);
+      expect(screen.getByText(/了解公司最新动态/)).toBeInTheDocument();
+    });
+  });
+
+  describe('News Cards', () => {
+    it('should render news cards', () => {
+      render(<NewsSection />);
+      const cards = document.querySelectorAll('[class*="flex-col"]');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should display news in grid layout', () => {
+      const { container } = render(<NewsSection />);
+      const grid = container.querySelector('.grid-cols-1');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should render news categories', () => {
+      render(<NewsSection />);
+      const categories = document.querySelectorAll('[class*="rounded-full"]');
+      expect(categories.length).toBeGreaterThan(0);
+    });
+
+    it('should render news dates', () => {
+      render(<NewsSection />);
+      const dates = document.querySelectorAll('[class*="text-sm"]');
+      expect(dates.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Call to Action', () => {
+    it('should render view all news link', () => {
+      render(<NewsSection />);
+      expect(screen.getByRole('link', { name: /查看全部新闻/ })).toBeInTheDocument();
+    });
+
+    it('should link to news page', () => {
+      render(<NewsSection />);
+      const link = screen.getByRole('link', { name: /查看全部新闻/ });
+      expect(link).toHaveAttribute('href', '/news');
+    });
+
+    it('should render read more links', () => {
+      render(<NewsSection />);
+      const readMoreLinks = screen.getAllByText(/阅读更多/);
+      expect(readMoreLinks.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have region role', () => {
+      render(<NewsSection />);
+      const section = screen.getByRole('region');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have aria-labelledby attribute', () => {
+      render(<NewsSection />);
+      const section = document.querySelector('section#news');
+      expect(section).toHaveAttribute('aria-labelledby', 'news-heading');
+    });
+
+    it('should have accessible heading', () => {
+      render(<NewsSection />);
+      const heading = screen.getByRole('heading', { level: 2 });
+      expect(heading).toHaveAttribute('id', 'news-heading');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have background color', () => {
+      render(<NewsSection />);
+      const section = document.querySelector('section#news');
+      expect(section).toHaveClass('bg-[#F5F5F5]');
+    });
+
+    it('should have proper padding', () => {
+      render(<NewsSection />);
+      const section = document.querySelector('section#news');
+      expect(section).toHaveClass('py-24');
+    });
+
+    it('should have container styling', () => {
+      const { container } = render(<NewsSection />);
+      const containerDiv = container.querySelector('.container-custom');
+      expect(containerDiv).toBeInTheDocument();
+    });
+  });
+});

src/components/sections/products-section.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProductsSection } from './products-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+describe('ProductsSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render products section', () => {
+      render(<ProductsSection />);
+      const section = document.querySelector('section#products');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<ProductsSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<ProductsSection />);
+      expect(screen.getByText(/自主研发的企业级产品/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Product Cards', () => {
+    it('should render product cards', () => {
+      render(<ProductsSection />);
+      const cards = document.querySelectorAll('[class*="flex-col"]');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should display products in grid layout', () => {
+      const { container } = render(<ProductsSection />);
+      const grid = container.querySelector('.grid-cols-1');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should render product categories', () => {
+      render(<ProductsSection />);
+      const badges = document.querySelectorAll('[class*="rounded-full"]');
+      expect(badges.length).toBeGreaterThan(0);
+    });
+
+    it('should render product features', () => {
+      render(<ProductsSection />);
+      const features = document.querySelectorAll('[class*="inline-flex"]');
+      expect(features.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Custom Solution Section', () => {
+    it('should render custom solution section', () => {
+      render(<ProductsSection />);
+      expect(screen.getByText(/需要定制化解决方案/)).toBeInTheDocument();
+    });
+
+    it('should render custom solution description', () => {
+      render(<ProductsSection />);
+      expect(screen.getByText(/我们的专业团队/)).toBeInTheDocument();
+    });
+
+    it('should render contact button', () => {
+      render(<ProductsSection />);
+      expect(screen.getByRole('link', { name: /联系我们/ })).toBeInTheDocument();
+    });
+
+    it('should link to contact page', () => {
+      render(<ProductsSection />);
+      const link = screen.getByRole('link', { name: /联系我们/ });
+      expect(link).toHaveAttribute('href', '/contact');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have region role', () => {
+      render(<ProductsSection />);
+      const section = screen.getByRole('region');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have aria-labelledby attribute', () => {
+      render(<ProductsSection />);
+      const section = document.querySelector('section#products');
+      expect(section).toHaveAttribute('aria-labelledby', 'products-heading');
+    });
+
+    it('should have accessible heading', () => {
+      render(<ProductsSection />);
+      const heading = screen.getByRole('heading', { level: 2 });
+      expect(heading).toHaveAttribute('id', 'products-heading');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have background color', () => {
+      render(<ProductsSection />);
+      const section = document.querySelector('section#products');
+      expect(section).toHaveClass('bg-[#F5F7FA]');
+    });
+
+    it('should have proper padding', () => {
+      render(<ProductsSection />);
+      const section = document.querySelector('section#products');
+      expect(section).toHaveClass('py-24');
+    });
+
+    it('should have decorative background elements', () => {
+      const { container } = render(<ProductsSection />);
+      const decorativeElements = container.querySelectorAll('.blur-3xl');
+      expect(decorativeElements.length).toBeGreaterThan(0);
+    });
+  });
+});

src/components/sections/services-section.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ServicesSection } from './services-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+describe('ServicesSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render services section', () => {
+      render(<ServicesSection />);
+      const section = document.querySelector('section#services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<ServicesSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<ServicesSection />);
+      expect(screen.getByText(/专业技术团队/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Service Cards', () => {
+    it('should render service cards', () => {
+      render(<ServicesSection />);
+      const cards = document.querySelectorAll('.p-6');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should display services in grid layout', () => {
+      const { container } = render(<ServicesSection />);
+      const grid = container.querySelector('.grid-cols-1');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should render service icons', () => {
+      render(<ServicesSection />);
+      const icons = document.querySelectorAll('svg');
+      expect(icons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Call to Action', () => {
+    it('should render view all services button', () => {
+      render(<ServicesSection />);
+      expect(screen.getByRole('link', { name: /查看全部服务/ })).toBeInTheDocument();
+    });
+
+    it('should link to services page', () => {
+      render(<ServicesSection />);
+      const link = screen.getByRole('link', { name: /查看全部服务/ });
+      expect(link).toHaveAttribute('href', '/services');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have section with id', () => {
+      render(<ServicesSection />);
+      const section = document.querySelector('section#services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have aria-labelledby attribute', () => {
+      render(<ServicesSection />);
+      const section = document.querySelector('section#services');
+      expect(section).toHaveAttribute('aria-labelledby', 'services-heading');
+    });
+
+    it('should have accessible heading', () => {
+      render(<ServicesSection />);
+      const heading = screen.getByRole('heading', { level: 2 });
+      expect(heading).toHaveAttribute('id', 'services-heading');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have white background', () => {
+      render(<ServicesSection />);
+      const section = document.querySelector('section#services');
+      expect(section).toHaveClass('bg-white');
+    });
+
+    it('should have proper padding', () => {
+      render(<ServicesSection />);
+      const section = document.querySelector('section#services');
+      expect(section).toHaveClass('py-24');
+    });
+
+    it('should have decorative background elements', () => {
+      const { container } = render(<ServicesSection />);
+      const decorativeElements = container.querySelectorAll('.blur-3xl');
+      expect(decorativeElements.length).toBeGreaterThan(0);
+    });
+  });
+});

src/components/sections/testimonials-section.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TestimonialsSection } from './testimonials-section';
+
+jest.mock('@/components/ui/testimonial-card', () => ({
+  TestimonialCard: ({ author, quote }: any) => (
+    <div data-testid="testimonial-card">
+      <div>{author}</div>
+      <div>{quote}</div>
+    </div>
+  ),
+}));
+
+describe('TestimonialsSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render testimonials section', () => {
+      render(<TestimonialsSection />);
+      const section = document.querySelector('section#testimonials');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render section heading', () => {
+      render(<TestimonialsSection />);
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+
+    it('should render section description', () => {
+      render(<TestimonialsSection />);
+      expect(screen.getByText(/听听我们的客户怎么说/)).toBeInTheDocument();
+    });
+
+    it('should render testimonial cards', () => {
+      render(<TestimonialsSection />);
+      const cards = screen.getAllByTestId('testimonial-card');
+      expect(cards.length).toBeGreaterThan(0);
+    });
+
+    it('should render testimonial authors', () => {
+      render(<TestimonialsSection />);
+      expect(screen.getByText('张总')).toBeInTheDocument();
+    });
+
+    it('should render testimonial quotes', () => {
+      render(<TestimonialsSection />);
+      expect(screen.getByText(/睿新致远的团队非常专业/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have section id', () => {
+      render(<TestimonialsSection />);
+      const section = document.querySelector('section#testimonials');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have correct background', () => {
+      render(<TestimonialsSection />);
+      const section = document.querySelector('section.bg-white');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should have container', () => {
+      render(<TestimonialsSection />);
+      const container = document.querySelector('.container-wide');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should have grid layout', () => {
+      render(<TestimonialsSection />);
+      const grid = document.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/animated-card.test.tsx

@@ -0,0 +1,185 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InkCard, GeometricCard, FlipCard, TiltCard, GlowCard, ExpandCard } from './animated-card';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, onHoverStart, onHoverEnd, onClick, ...props }: any) => (
+      <div
+        {...props}
+        onMouseEnter={onHoverStart}
+        onMouseLeave={onHoverEnd}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+    ),
+  },
+}));
+
+describe('Animated Cards', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('InkCard', () => {
+    it('should render ink card', () => {
+      render(<InkCard>Test Content</InkCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<InkCard className="custom-class">Test</InkCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should handle mouse move', () => {
+      const { container } = render(<InkCard>Test</InkCard>);
+      const card = container.firstChild as HTMLElement;
+      
+      fireEvent.mouseMove(card, {
+        clientX: 100,
+        clientY: 100,
+      });
+      
+      expect(card).toBeInTheDocument();
+    });
+
+    it('should handle hover events', () => {
+      const { container } = render(<InkCard>Test</InkCard>);
+      const card = container.firstChild as HTMLElement;
+      
+      fireEvent.mouseEnter(card);
+      fireEvent.mouseLeave(card);
+      
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('GeometricCard', () => {
+    it('should render geometric card', () => {
+      render(<GeometricCard>Test Content</GeometricCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<GeometricCard className="custom-class">Test</GeometricCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should have corner decorations', () => {
+      const { container } = render(<GeometricCard>Test</GeometricCard>);
+      const corners = container.querySelectorAll('.absolute');
+      expect(corners.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('FlipCard', () => {
+    it('should render flip card', () => {
+      render(
+        <FlipCard front="Front" back="Back" />
+      );
+      expect(screen.getByText('Front')).toBeInTheDocument();
+      expect(screen.getByText('Back')).toBeInTheDocument();
+    });
+
+    it('should flip on click', () => {
+      const { container } = render(
+        <FlipCard front="Front" back="Back" />
+      );
+      
+      const card = container.firstChild as HTMLElement;
+      fireEvent.click(card);
+      
+      expect(card).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <FlipCard front="Front" back="Back" className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('TiltCard', () => {
+    it('should render tilt card', () => {
+      render(<TiltCard>Test Content</TiltCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<TiltCard className="custom-class">Test</TiltCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should handle mouse move', () => {
+      const { container } = render(<TiltCard>Test</TiltCard>);
+      const card = container.firstChild as HTMLElement;
+      
+      fireEvent.mouseMove(card, {
+        clientX: 100,
+        clientY: 100,
+      });
+      
+      expect(card).toBeInTheDocument();
+    });
+
+    it('should handle mouse leave', () => {
+      const { container } = render(<TiltCard>Test</TiltCard>);
+      const card = container.firstChild as HTMLElement;
+      
+      fireEvent.mouseLeave(card);
+      
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('GlowCard', () => {
+    it('should render glow card', () => {
+      render(<GlowCard>Test Content</GlowCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<GlowCard className="custom-class">Test</GlowCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should handle mouse move', () => {
+      const { container } = render(<GlowCard>Test</GlowCard>);
+      const card = container.firstChild as HTMLElement;
+      
+      fireEvent.mouseMove(card, {
+        clientX: 100,
+        clientY: 100,
+      });
+      
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('ExpandCard', () => {
+    it('should render expand card', () => {
+      render(<ExpandCard>Test Content</ExpandCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<ExpandCard className="custom-class">Test</ExpandCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should expand on click', () => {
+      const { container } = render(
+        <ExpandCard expandedContent={<div>Expanded</div>}>Test</ExpandCard>
+      );
+      
+      const card = container.firstChild as HTMLElement;
+      fireEvent.click(card);
+      
+      expect(screen.getByText('Expanded')).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/animated-number.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AnimatedNumber, StatCard } from './animated-number';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    span: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+describe('AnimatedNumber', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render number', () => {
+      render(<AnimatedNumber value={100} />);
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('should render with prefix', () => {
+      render(<AnimatedNumber value={100} prefix="$" />);
+      expect(screen.getByText(/\$0/)).toBeInTheDocument();
+    });
+
+    it('should render with suffix', () => {
+      render(<AnimatedNumber value={100} suffix="+" />);
+      expect(screen.getByText(/0\+/)).toBeInTheDocument();
+    });
+
+    it('should render with prefix and suffix', () => {
+      render(<AnimatedNumber value={100} prefix="$" suffix="+" />);
+      expect(screen.getByText(/\$0\+/)).toBeInTheDocument();
+    });
+
+    it('should render with custom className', () => {
+      const { container } = render(<AnimatedNumber value={100} className="custom-class" />);
+      const element = container.querySelector('.custom-class');
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  describe('Animation', () => {
+    it('should accept duration prop', () => {
+      render(<AnimatedNumber value={100} duration={3000} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should accept delay prop', () => {
+      render(<AnimatedNumber value={100} delay={500} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should start from 0', () => {
+      render(<AnimatedNumber value={100} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle zero value', () => {
+      render(<AnimatedNumber value={0} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should handle large numbers', () => {
+      render(<AnimatedNumber value={1000000} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should handle decimal numbers', () => {
+      render(<AnimatedNumber value={99} />);
+      const element = screen.getByText('0');
+      expect(element).toBeInTheDocument();
+    });
+  });
+});
+
+describe('StatCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render stat card', () => {
+      render(<StatCard value={100} label="Users" />);
+      expect(screen.getByText('Users')).toBeInTheDocument();
+    });
+
+    it('should render with prefix', () => {
+      render(<StatCard value={100} label="Revenue" prefix="$" />);
+      expect(screen.getByText('Revenue')).toBeInTheDocument();
+    });
+
+    it('should render with suffix', () => {
+      render(<StatCard value={100} label="Growth" suffix="%" />);
+      expect(screen.getByText('Growth')).toBeInTheDocument();
+    });
+
+    it('should render with prefix and suffix', () => {
+      render(<StatCard value={100} label="Score" prefix="+" suffix="pts" />);
+      expect(screen.getByText('Score')).toBeInTheDocument();
+    });
+
+    it('should render with index', () => {
+      render(<StatCard value={100} label="Users" index={2} />);
+      expect(screen.getByText('Users')).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have text-center class', () => {
+      const { container } = render(<StatCard value={100} label="Users" />);
+      const card = container.querySelector('.text-center');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('should have group class', () => {
+      const { container } = render(<StatCard value={100} label="Users" />);
+      const card = container.querySelector('.group');
+      expect(card).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/back-button.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BackButton } from './back-button';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    back: jest.fn(),
+  }),
+}));
+
+describe('BackButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render back button', () => {
+      render(<BackButton />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render button text', () => {
+      render(<BackButton />);
+      expect(screen.getByText('返回')).toBeInTheDocument();
+    });
+
+    it('should render arrow icon', () => {
+      const { container } = render(<BackButton />);
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call router.back() when clicked', () => {
+      const mockBack = jest.fn();
+      jest.spyOn(require('next/navigation'), 'useRouter').mockReturnValue({
+        back: mockBack,
+      });
+
+      render(<BackButton />);
+      fireEvent.click(screen.getByRole('button'));
+      
+      expect(mockBack).toHaveBeenCalled();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have ghost variant', () => {
+      const { container } = render(<BackButton />);
+      const button = container.querySelector('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should have small size', () => {
+      const { container } = render(<BackButton />);
+      const button = container.querySelector('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/badge.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Badge } from './badge';
+
+describe('Badge', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render badge with text', () => {
+      render(<Badge>Test Badge</Badge>);
+      expect(screen.getByText('Test Badge')).toBeInTheDocument();
+    });
+
+    it('should render as span by default', () => {
+      const { container } = render(<Badge>Badge</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should have data-slot attribute', () => {
+      const { container } = render(<Badge>Badge</Badge>);
+      const badge = container.querySelector('[data-slot="badge"]');
+      expect(badge).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    it('should render default variant', () => {
+      const { container } = render(<Badge>Default</Badge>);
+      const badge = container.querySelector('[data-variant="default"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render secondary variant', () => {
+      const { container } = render(<Badge variant="secondary">Secondary</Badge>);
+      const badge = container.querySelector('[data-variant="secondary"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render destructive variant', () => {
+      const { container } = render(<Badge variant="destructive">Destructive</Badge>);
+      const badge = container.querySelector('[data-variant="destructive"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render outline variant', () => {
+      const { container } = render(<Badge variant="outline">Outline</Badge>);
+      const badge = container.querySelector('[data-variant="outline"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render ghost variant', () => {
+      const { container } = render(<Badge variant="ghost">Ghost</Badge>);
+      const badge = container.querySelector('[data-variant="ghost"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render success variant', () => {
+      const { container } = render(<Badge variant="success">Success</Badge>);
+      const badge = container.querySelector('[data-variant="success"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render warning variant', () => {
+      const { container } = render(<Badge variant="warning">Warning</Badge>);
+      const badge = container.querySelector('[data-variant="warning"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should render info variant', () => {
+      const { container } = render(<Badge variant="info">Info</Badge>);
+      const badge = container.querySelector('[data-variant="info"]');
+      expect(badge).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<Badge className="custom-class">Badge</Badge>);
+      const badge = container.querySelector('.custom-class');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should have rounded-full class', () => {
+      const { container } = render(<Badge>Badge</Badge>);
+      const badge = container.querySelector('.rounded-full');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('should have inline-flex class', () => {
+      const { container } = render(<Badge>Badge</Badge>);
+      const badge = container.querySelector('.inline-flex');
+      expect(badge).toBeInTheDocument();
+    });
+  });
+
+  describe('AsChild', () => {
+    it('should render as child component when asChild is true', () => {
+      const { container } = render(
+        <Badge asChild>
+          <button>Button Badge</button>
+        </Badge>
+      );
+      const button = container.querySelector('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent('Button Badge');
+    });
+  });
+});

src/components/ui/button.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Button } from './button';
+
+describe('Button Component', () => {
+  describe('Rendering', () => {
+    it('should render button with text', () => {
+      render(<Button>Click me</Button>);
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('should render as a button element by default', () => {
+      render(<Button>Test</Button>);
+      const button = screen.getByRole('button');
+      expect(button.tagName).toBe('BUTTON');
+    });
+
+    it('should apply default variant styles', () => {
+      render(<Button>Default</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('bg-[#C41E3A]');
+    });
+  });
+
+  describe('Variants', () => {
+    it('should apply secondary variant styles', () => {
+      render(<Button variant="secondary">Secondary</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('bg-[#1C1C1C]');
+    });
+
+    it('should apply outline variant styles', () => {
+      render(<Button variant="outline">Outline</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('border-2');
+      expect(button).toHaveClass('border-[#1C1C1C]');
+    });
+
+    it('should apply ghost variant styles', () => {
+      render(<Button variant="ghost">Ghost</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('text-[#3D3D3D]');
+    });
+
+    it('should apply link variant styles', () => {
+      render(<Button variant="link">Link</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('underline-offset-4');
+    });
+
+    it('should apply destructive variant styles', () => {
+      render(<Button variant="destructive">Destructive</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('bg-[#C41E3A]');
+    });
+  });
+
+  describe('Sizes', () => {
+    it('should apply default size styles', () => {
+      render(<Button size="default">Default Size</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-11');
+    });
+
+    it('should apply small size styles', () => {
+      render(<Button size="sm">Small</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-9');
+    });
+
+    it('should apply large size styles', () => {
+      render(<Button size="lg">Large</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-12');
+    });
+
+    it('should apply icon size styles', () => {
+      render(<Button size="icon">Icon</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-11');
+      expect(button).toHaveClass('w-11');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be focusable', () => {
+      render(<Button>Focusable</Button>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('should have proper disabled state', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+      expect(button).toHaveClass('disabled:opacity-50');
+    });
+
+    it('should have focus visible styles', () => {
+      render(<Button>Focus Visible</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('focus-visible:ring-2');
+    });
+  });
+
+  describe('Custom Props', () => {
+    it('should apply custom className', () => {
+      render(<Button className="custom-class">Custom</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+
+    it('should pass through additional props', () => {
+      render(<Button data-testid="custom-button" type="submit">Submit</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('data-testid', 'custom-button');
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+
+    it('should handle click events', () => {
+      const handleClick = jest.fn();
+      render(<Button onClick={handleClick}>Click</Button>);
+      const button = screen.getByRole('button');
+      button.click();
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Touch Support', () => {
+    it('should have touch manipulation', () => {
+      render(<Button>Touch</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('touch-manipulation');
+    });
+
+    it('should have minimum touch target size', () => {
+      render(<Button>Touch Target</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('min-h-[44px]');
+      expect(button).toHaveClass('min-w-[44px]');
+    });
+  });
+});

src/components/ui/card.test.tsx

@@ -0,0 +1,232 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from './card';
+
+describe('Card Components', () => {
+  describe('Card', () => {
+    it('should render card with children', () => {
+      render(
+        <Card>
+          <div>Card Content</div>
+        </Card>
+      );
+      expect(screen.getByText('Card Content')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<Card data-testid="card">Test</Card>);
+      const card = screen.getByTestId('card');
+      expect(card).toHaveAttribute('data-slot', 'card');
+    });
+
+    it('should apply default styles', () => {
+      render(<Card data-testid="card">Test</Card>);
+      const card = screen.getByTestId('card');
+      expect(card).toHaveClass('bg-[#FAFAFA]');
+      expect(card).toHaveClass('rounded-xl');
+    });
+
+    it('should apply custom className', () => {
+      render(<Card className="custom-card">Test</Card>);
+      const card = screen.getByText('Test');
+      expect(card).toHaveClass('custom-card');
+    });
+
+    it('should have hover effects', () => {
+      render(<Card data-testid="card">Test</Card>);
+      const card = screen.getByTestId('card');
+      expect(card).toHaveClass('hover:border-[#1C1C1C]');
+      expect(card).toHaveClass('hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)]');
+    });
+  });
+
+  describe('CardHeader', () => {
+    it('should render header with children', () => {
+      render(
+        <CardHeader>
+          <div>Header Content</div>
+        </CardHeader>
+      );
+      expect(screen.getByText('Header Content')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardHeader data-testid="header">Test</CardHeader>);
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-slot', 'card-header');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardHeader data-testid="header">Test</CardHeader>);
+      const header = screen.getByTestId('header');
+      expect(header).toHaveClass('px-6');
+    });
+  });
+
+  describe('CardTitle', () => {
+    it('should render title text', () => {
+      render(<CardTitle>Card Title</CardTitle>);
+      expect(screen.getByText('Card Title')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardTitle data-testid="title">Test</CardTitle>);
+      const title = screen.getByTestId('title');
+      expect(title).toHaveAttribute('data-slot', 'card-title');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardTitle data-testid="title">Test</CardTitle>);
+      const title = screen.getByTestId('title');
+      expect(title).toHaveClass('font-semibold');
+      expect(title).toHaveClass('text-[#1C1C1C]');
+    });
+  });
+
+  describe('CardDescription', () => {
+    it('should render description text', () => {
+      render(<CardDescription>Card Description</CardDescription>);
+      expect(screen.getByText('Card Description')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardDescription data-testid="desc">Test</CardDescription>);
+      const desc = screen.getByTestId('desc');
+      expect(desc).toHaveAttribute('data-slot', 'card-description');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardDescription data-testid="desc">Test</CardDescription>);
+      const desc = screen.getByTestId('desc');
+      expect(desc).toHaveClass('text-[#5C5C5C]');
+      expect(desc).toHaveClass('text-sm');
+    });
+  });
+
+  describe('CardAction', () => {
+    it('should render action content', () => {
+      render(<CardAction>Action Button</CardAction>);
+      expect(screen.getByText('Action Button')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardAction data-testid="action">Test</CardAction>);
+      const action = screen.getByTestId('action');
+      expect(action).toHaveAttribute('data-slot', 'card-action');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardAction data-testid="action">Test</CardAction>);
+      const action = screen.getByTestId('action');
+      expect(action).toHaveClass('col-start-2');
+    });
+  });
+
+  describe('CardContent', () => {
+    it('should render content', () => {
+      render(<CardContent>Content Body</CardContent>);
+      expect(screen.getByText('Content Body')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardContent data-testid="content">Test</CardContent>);
+      const content = screen.getByTestId('content');
+      expect(content).toHaveAttribute('data-slot', 'card-content');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardContent data-testid="content">Test</CardContent>);
+      const content = screen.getByTestId('content');
+      expect(content).toHaveClass('px-6');
+    });
+  });
+
+  describe('CardFooter', () => {
+    it('should render footer content', () => {
+      render(<CardFooter>Footer Content</CardFooter>);
+      expect(screen.getByText('Footer Content')).toBeInTheDocument();
+    });
+
+    it('should have proper data-slot attribute', () => {
+      render(<CardFooter data-testid="footer">Test</CardFooter>);
+      const footer = screen.getByTestId('footer');
+      expect(footer).toHaveAttribute('data-slot', 'card-footer');
+    });
+
+    it('should apply default styles', () => {
+      render(<CardFooter data-testid="footer">Test</CardFooter>);
+      const footer = screen.getByTestId('footer');
+      expect(footer).toHaveClass('px-6');
+      expect(footer).toHaveClass('border-t');
+    });
+  });
+
+  describe('Card Composition', () => {
+    it('should render complete card structure', () => {
+      render(
+        <Card>
+          <CardHeader>
+            <CardTitle>Test Title</CardTitle>
+            <CardDescription>Test Description</CardDescription>
+            <CardAction>Action</CardAction>
+          </CardHeader>
+          <CardContent>Content</CardContent>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      );
+
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+      expect(screen.getByText('Action')).toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+      expect(screen.getByText('Footer')).toBeInTheDocument();
+    });
+
+    it('should allow nested components', () => {
+      render(
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <span>Nested Title</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div>
+              <p>Nested Content</p>
+            </div>
+          </CardContent>
+        </Card>
+      );
+
+      expect(screen.getByText('Nested Title')).toBeInTheDocument();
+      expect(screen.getByText('Nested Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be accessible as a div element', () => {
+      render(<Card>Accessible Card</Card>);
+      const card = screen.getByText('Accessible Card');
+      expect(card.tagName).toBe('DIV');
+    });
+
+    it('should support custom ARIA attributes', () => {
+      render(
+        <Card role="region" aria-label="Test Card">
+          Test
+        </Card>
+      );
+      const card = screen.getByRole('region', { name: 'Test Card' });
+      expect(card).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/dialog.test.tsx

@@ -0,0 +1,172 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './dialog';
+
+jest.mock('@radix-ui/react-dialog', () => ({
+  Root: ({ children, open }: any) => <div data-open={open}>{children}</div>,
+  Trigger: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+  Portal: ({ children }: any) => <div>{children}</div>,
+  Close: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+  Overlay: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  Content: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  Title: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  Description: ({ children, ...props }: any) => <p {...props}>{children}</p>,
+}));
+
+describe('Dialog Components', () => {
+  describe('Dialog', () => {
+    it('should render dialog root', () => {
+      render(
+        <Dialog>
+          <div>Dialog Content</div>
+        </Dialog>
+      );
+      expect(screen.getByText('Dialog Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('DialogTrigger', () => {
+    it('should render trigger button', () => {
+      render(
+        <Dialog>
+          <DialogTrigger>Open Dialog</DialogTrigger>
+        </Dialog>
+      );
+      expect(screen.getByRole('button', { name: 'Open Dialog' })).toBeInTheDocument();
+    });
+  });
+
+  describe('DialogContent', () => {
+    it('should render content with children', () => {
+      render(
+        <Dialog open>
+          <DialogContent>
+            <p>Dialog Body</p>
+          </DialogContent>
+        </Dialog>
+      );
+      expect(screen.getByText('Dialog Body')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(
+        <Dialog open>
+          <DialogContent className="custom-class">
+            <p>Test</p>
+          </DialogContent>
+        </Dialog>
+      );
+      const content = screen.getByText('Test').parentElement;
+      expect(content).toHaveClass('custom-class');
+    });
+  });
+
+  describe('DialogHeader', () => {
+    it('should render header with children', () => {
+      render(<DialogHeader>Header Content</DialogHeader>);
+      expect(screen.getByText('Header Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(<DialogHeader className="custom-header">Test</DialogHeader>);
+      const header = screen.getByText('Test');
+      expect(header).toHaveClass('custom-header');
+    });
+  });
+
+  describe('DialogFooter', () => {
+    it('should render footer with children', () => {
+      render(<DialogFooter>Footer Content</DialogFooter>);
+      expect(screen.getByText('Footer Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(<DialogFooter className="custom-footer">Test</DialogFooter>);
+      const footer = screen.getByText('Test');
+      expect(footer).toHaveClass('custom-footer');
+    });
+  });
+
+  describe('DialogTitle', () => {
+    it('should render title text', () => {
+      render(<DialogTitle>Dialog Title</DialogTitle>);
+      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+    });
+
+    it('should render as h2 element', () => {
+      render(<DialogTitle>Test Title</DialogTitle>);
+      const title = screen.getByRole('heading', { level: 2 });
+      expect(title).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(<DialogTitle className="custom-title">Test</DialogTitle>);
+      const title = screen.getByText('Test');
+      expect(title).toHaveClass('custom-title');
+    });
+  });
+
+  describe('DialogDescription', () => {
+    it('should render description text', () => {
+      render(<DialogDescription>Dialog Description</DialogDescription>);
+      expect(screen.getByText('Dialog Description')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(<DialogDescription className="custom-desc">Test</DialogDescription>);
+      const desc = screen.getByText('Test');
+      expect(desc).toHaveClass('custom-desc');
+    });
+  });
+
+  describe('Dialog Composition', () => {
+    it('should render complete dialog structure', () => {
+      render(
+        <Dialog open>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription>This is a test dialog</DialogDescription>
+            </DialogHeader>
+            <div>Dialog Body</div>
+            <DialogFooter>
+              <button>Close Dialog</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+      expect(screen.getByText('Test Dialog')).toBeInTheDocument();
+      expect(screen.getByText('This is a test dialog')).toBeInTheDocument();
+      expect(screen.getByText('Dialog Body')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Close Dialog' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have accessible title', () => {
+      render(<DialogTitle>Accessible Title</DialogTitle>);
+      const title = screen.getByRole('heading', { name: 'Accessible Title' });
+      expect(title).toBeInTheDocument();
+    });
+
+    it('should support custom ARIA attributes', () => {
+      render(
+        <DialogContent aria-label="Test Dialog">
+          <p>Content</p>
+        </DialogContent>
+      );
+      const content = screen.getByText('Content').parentElement;
+      expect(content).toHaveAttribute('aria-label', 'Test Dialog');
+    });
+  });
+});

src/components/ui/dropdown-menu.test.tsx

@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+} from './dropdown-menu';
+
+describe('DropdownMenu', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render dropdown menu trigger', () => {
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Open Menu')).toBeInTheDocument();
+    });
+
+    it('should render menu items', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
+
+    it('should render menu label', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>Menu Label</DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Menu Label')).toBeInTheDocument();
+    });
+
+    it('should render separator', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      const separator = document.querySelector('[role="separator"]');
+      expect(separator).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should open menu on trigger click', () => {
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      
+      const trigger = screen.getByText('Open Menu');
+      fireEvent.click(trigger);
+      
+      expect(trigger).toBeInTheDocument();
+    });
+
+    it('should close menu on item click', () => {
+      const onSelect = jest.fn();
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={onSelect}>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      
+      const item = screen.getByText('Item 1');
+      fireEvent.click(item);
+      
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+
+  describe('DropdownMenuShortcut', () => {
+    it('should render shortcut text', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              Save
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Save')).toBeInTheDocument();
+      expect(screen.getByText('⌘S')).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom className to trigger', () => {
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger className="custom-trigger">Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Open Menu')).toBeInTheDocument();
+    });
+
+    it('should apply custom className to content', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent className="custom-content">
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+    });
+
+    it('should apply custom className to item', () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem className="custom-item">Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/error-boundary.test.tsx

@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ErrorBoundary } from './error-boundary';
+
+const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
+  if (shouldThrow) {
+    throw new Error('Test error');
+  }
+  return <div>No error</div>;
+};
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('Normal Rendering', () => {
+    it('should render children when no error', () => {
+      render(
+        <ErrorBoundary>
+          <div>Test Content</div>
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should not show error UI when no error', () => {
+      render(
+        <ErrorBoundary>
+          <div>Normal Content</div>
+        </ErrorBoundary>
+      );
+      
+      expect(screen.queryByText('出错了')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should catch errors and display fallback UI', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('出错了')).toBeInTheDocument();
+    });
+
+    it('should display default error message', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText(/抱歉，页面出现了问题/)).toBeInTheDocument();
+    });
+
+    it('should display custom fallback if provided', () => {
+      render(
+        <ErrorBoundary fallback={<div>Custom Error UI</div>}>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('Custom Error UI')).toBeInTheDocument();
+    });
+
+    it('should log error to console', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      expect(console.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('Error Recovery', () => {
+    it('should have retry button', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByRole('button', { name: '重试' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have accessible error icon', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      const icon = document.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('should have accessible retry button', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      const button = screen.getByRole('button', { name: '重试' });
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent('重试');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have centered layout', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      const container = screen.getByText('出错了').closest('div');
+      expect(container).toHaveClass('text-center');
+    });
+
+    it('should have error icon with red background', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      const iconContainer = document.querySelector('.bg-red-100');
+      expect(iconContainer).toBeInTheDocument();
+    });
+
+    it('should have styled retry button', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowError shouldThrow={true} />
+        </ErrorBoundary>
+      );
+      
+      const button = screen.getByRole('button', { name: '重试' });
+      expect(button).toHaveClass('bg-[#C41E3A]');
+      expect(button).toHaveClass('text-white');
+    });
+  });
+});

src/components/ui/glass-card.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { GlassCard } from './glass-card';
+
+describe('GlassCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render glass card', () => {
+      const { container } = render(<GlassCard>Test Content</GlassCard>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render children', () => {
+      render(<GlassCard>Test Content</GlassCard>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<GlassCard className="custom-class">Test</GlassCard>);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Variants', () => {
+    it('should render default variant', () => {
+      const { container } = render(<GlassCard>Test</GlassCard>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render elevated variant', () => {
+      const { container } = render(<GlassCard variant="elevated">Test</GlassCard>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render outline variant', () => {
+      const { container } = render(<GlassCard variant="outline">Test</GlassCard>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render glow variant', () => {
+      const { container } = render(<GlassCard variant="glow">Test</GlassCard>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have rounded class', () => {
+      const { container } = render(<GlassCard>Test</GlassCard>);
+      expect(container.firstChild).toHaveClass('rounded-2xl');
+    });
+
+    it('should have border class', () => {
+      const { container } = render(<GlassCard>Test</GlassCard>);
+      expect(container.firstChild).toHaveClass('border');
+    });
+
+    it('should have backdrop-blur class', () => {
+      const { container } = render(<GlassCard>Test</GlassCard>);
+      expect(container.firstChild).toHaveClass('backdrop-blur-xl');
+    });
+  });
+
+  describe('Forward Ref', () => {
+    it('should forward ref', () => {
+      const ref = { current: null };
+      render(<GlassCard ref={ref}>Test</GlassCard>);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+});

src/components/ui/input.test.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Input } from './input';
+
+jest.mock('@/lib/utils', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('Input', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render input element', () => {
+      render(<Input />);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should render with label', () => {
+      render(<Input label="用户名" />);
+      expect(screen.getByLabelText('用户名')).toBeInTheDocument();
+    });
+
+    it('should render required indicator when required', () => {
+      render(<Input label="用户名" required />);
+      expect(screen.getByText('*')).toBeInTheDocument();
+    });
+
+    it('should render error message', () => {
+      render(<Input label="用户名" error="请输入用户名" />);
+      expect(screen.getByRole('alert')).toHaveTextContent('请输入用户名');
+    });
+
+    it('should render with placeholder', () => {
+      render(<Input placeholder="请输入用户名" />);
+      expect(screen.getByPlaceholderText('请输入用户名')).toBeInTheDocument();
+    });
+
+    it('should render with custom data-testid', () => {
+      render(<Input data-testid="custom-input" />);
+      expect(screen.getByTestId('custom-input')).toBeInTheDocument();
+    });
+  });
+
+  describe('Types', () => {
+    it('should render text input by default', () => {
+      render(<Input />);
+      const input = screen.getByRole('textbox');
+      expect(input.tagName.toLowerCase()).toBe('input');
+    });
+
+    it('should render email input', () => {
+      render(<Input type="email" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('type', 'email');
+    });
+
+    it('should render password input', () => {
+      render(<Input type="password" />);
+      const input = screen.getByDisplayValue('');
+      expect(input).toHaveAttribute('type', 'password');
+    });
+
+    it('should render tel input', () => {
+      render(<Input type="tel" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('type', 'tel');
+    });
+  });
+
+  describe('User Interaction', () => {
+    it('should handle user input', async () => {
+      render(<Input />);
+      const input = screen.getByRole('textbox');
+      
+      await userEvent.type(input, 'test value');
+      expect(input).toHaveValue('test value');
+    });
+
+    it('should handle onChange event', async () => {
+      const handleChange = jest.fn();
+      render(<Input onChange={handleChange} />);
+      const input = screen.getByRole('textbox');
+      
+      await userEvent.type(input, 'a');
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('should handle onBlur event', async () => {
+      const handleBlur = jest.fn();
+      render(<Input onBlur={handleBlur} />);
+      const input = screen.getByRole('textbox');
+      
+      await userEvent.click(input);
+      await userEvent.tab();
+      expect(handleBlur).toHaveBeenCalled();
+    });
+
+    it('should handle onFocus event', async () => {
+      const handleFocus = jest.fn();
+      render(<Input onFocus={handleFocus} />);
+      const input = screen.getByRole('textbox');
+      
+      await userEvent.click(input);
+      expect(handleFocus).toHaveBeenCalled();
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('should be disabled when disabled prop is true', () => {
+      render(<Input disabled />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
+    });
+
+    it('should not accept input when disabled', async () => {
+      render(<Input disabled />);
+      const input = screen.getByRole('textbox');
+      
+      expect(input).toBeDisabled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have aria-required when required', () => {
+      render(<Input required />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-required', 'true');
+    });
+
+    it('should have aria-invalid when error exists', () => {
+      render(<Input error="错误信息" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('should have aria-describedby when error exists', () => {
+      render(<Input error="错误信息" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-describedby');
+    });
+
+    it('should have proper label association', () => {
+      render(<Input label="用户名" id="username" />);
+      const input = screen.getByLabelText('用户名');
+      expect(input).toHaveAttribute('id', 'username');
+    });
+
+    it('should have role="alert" on error message', () => {
+      render(<Input error="错误信息" />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Styling', () => {
+    it('should apply custom className', () => {
+      render(<Input className="custom-class" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('custom-class');
+    });
+
+    it('should have error styling when error exists', () => {
+      render(<Input error="错误信息" />);
+      const input = screen.getByRole('textbox');
+      expect(input.className).toMatch(/border-\[#C41E3A\]/);
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('should forward ref to input element', () => {
+      const ref = React.createRef<HTMLInputElement>();
+      render(<Input ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
+  });
+});

src/components/ui/insight-card.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InsightCard } from './insight-card';
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, fill, className }: any) => (
+    <img src={src} alt={alt} className={className} data-fill={fill} />
+  ),
+}));
+
+describe('InsightCard', () => {
+  const defaultProps = {
+    title: 'Test Title',
+    excerpt: 'Test excerpt',
+    category: 'Technology',
+    readTime: '5 min',
+    publishedAt: '2026-01-01',
+    href: '/test-article',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render insight card', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
+
+    it('should render title', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+    });
+
+    it('should render excerpt', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('Test excerpt')).toBeInTheDocument();
+    });
+
+    it('should render category badge', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('Technology')).toBeInTheDocument();
+    });
+
+    it('should render read time', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('5 min')).toBeInTheDocument();
+    });
+
+    it('should render published date', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('2026-01-01')).toBeInTheDocument();
+    });
+
+    it('should render read more link', () => {
+      render(<InsightCard {...defaultProps} />);
+      expect(screen.getByText('阅读更多')).toBeInTheDocument();
+    });
+  });
+
+  describe('Image', () => {
+    it('should render image when imageUrl is provided', () => {
+      render(<InsightCard {...defaultProps} imageUrl="/test.jpg" />);
+      const image = screen.getByAltText('Test Title');
+      expect(image).toBeInTheDocument();
+    });
+
+    it('should not render image when imageUrl is not provided', () => {
+      render(<InsightCard {...defaultProps} />);
+      const image = screen.queryByRole('img');
+      expect(image).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Featured', () => {
+    it('should not be featured by default', () => {
+      const { container } = render(<InsightCard {...defaultProps} />);
+      const article = container.querySelector('article');
+      expect(article).not.toHaveClass('md:col-span-2');
+    });
+
+    it('should be featured when featured prop is true', () => {
+      const { container } = render(<InsightCard {...defaultProps} featured />);
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('md:col-span-2');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have article element', () => {
+      const { container } = render(<InsightCard {...defaultProps} />);
+      const article = container.querySelector('article');
+      expect(article).toBeInTheDocument();
+    });
+
+    it('should have border class', () => {
+      const { container } = render(<InsightCard {...defaultProps} />);
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('border');
+    });
+
+    it('should have rounded class', () => {
+      const { container } = render(<InsightCard {...defaultProps} />);
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('rounded-lg');
+    });
+  });
+});

src/components/ui/loading-skeleton.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Skeleton,
+  CardSkeleton,
+  ServiceCardSkeleton,
+  CaseCardSkeleton,
+  ProductCardSkeleton,
+  NewsCardSkeleton,
+  SectionSkeleton,
+} from './loading-skeleton';
+
+describe('Loading Skeleton Components', () => {
+  describe('Skeleton', () => {
+    it('should render skeleton element', () => {
+      const { container } = render(<Skeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should apply default styles', () => {
+      const { container } = render(<Skeleton />);
+      const skeleton = container.firstChild as HTMLElement;
+      expect(skeleton).toHaveClass('animate-pulse');
+      expect(skeleton).toHaveClass('bg-[#F5F5F5]');
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<Skeleton className="custom-class" />);
+      const skeleton = container.firstChild as HTMLElement;
+      expect(skeleton).toHaveClass('custom-class');
+    });
+  });
+
+  describe('CardSkeleton', () => {
+    it('should render card skeleton', () => {
+      const { container } = render(<CardSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should have correct structure', () => {
+      const { container } = render(<CardSkeleton />);
+      const skeletonElements = container.querySelectorAll('.animate-pulse');
+      expect(skeletonElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('ServiceCardSkeleton', () => {
+    it('should render service card skeleton', () => {
+      const { container } = render(<ServiceCardSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should have full height', () => {
+      const { container } = render(<ServiceCardSkeleton />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('h-full');
+    });
+  });
+
+  describe('CaseCardSkeleton', () => {
+    it('should render case card skeleton', () => {
+      const { container } = render(<CaseCardSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should have image placeholder', () => {
+      const { container } = render(<CaseCardSkeleton />);
+      const imageSkeleton = container.querySelector('.h-48');
+      expect(imageSkeleton).toBeInTheDocument();
+    });
+  });
+
+  describe('ProductCardSkeleton', () => {
+    it('should render product card skeleton', () => {
+      const { container } = render(<ProductCardSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should have flex column layout', () => {
+      const { container } = render(<ProductCardSkeleton />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('flex');
+      expect(card).toHaveClass('flex-col');
+    });
+  });
+
+  describe('NewsCardSkeleton', () => {
+    it('should render news card skeleton', () => {
+      const { container } = render(<NewsCardSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should have image placeholder', () => {
+      const { container } = render(<NewsCardSkeleton />);
+      const imageSkeleton = container.querySelector('.h-48');
+      expect(imageSkeleton).toBeInTheDocument();
+    });
+  });
+
+  describe('SectionSkeleton', () => {
+    it('should render section skeleton', () => {
+      const { container } = render(<SectionSkeleton />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render multiple service card skeletons', () => {
+      const { container } = render(<SectionSkeleton />);
+      const cards = container.querySelectorAll('.bg-white');
+      expect(cards.length).toBe(4);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should not have any accessible content', () => {
+      const { container } = render(<CardSkeleton />);
+      const textContent = container.textContent;
+      expect(textContent).toBe('');
+    });
+
+    it('should be purely decorative', () => {
+      const { container } = render(<SectionSkeleton />);
+      const elements = container.querySelectorAll('*');
+      elements.forEach(element => {
+        expect(element).not.toHaveAttribute('aria-label');
+        expect(element).not.toHaveAttribute('aria-labelledby');
+      });
+    });
+  });
+
+  describe('Animation', () => {
+    it('should have pulse animation', () => {
+      const { container } = render(<Skeleton />);
+      const skeleton = container.firstChild as HTMLElement;
+      expect(skeleton).toHaveClass('animate-pulse');
+    });
+
+    it('should apply animation to all skeleton elements', () => {
+      const { container } = render(<CardSkeleton />);
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+  });
+});

src/components/ui/optimized-image.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { OptimizedImage } from './optimized-image';
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, onLoad, onError, className, ...props }: any) => (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      onLoad={onLoad}
+      onError={onError}
+      data-testid="optimized-image"
+      {...props}
+    />
+  ),
+}));
+
+describe('OptimizedImage', () => {
+  const defaultProps = {
+    src: '/test.jpg',
+    alt: 'Test Image',
+    width: 100,
+    height: 100,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render optimized image', () => {
+      render(<OptimizedImage {...defaultProps} />);
+      expect(screen.getByTestId('optimized-image')).toBeInTheDocument();
+    });
+
+    it('should render with alt text', () => {
+      render(<OptimizedImage {...defaultProps} />);
+      expect(screen.getByAltText('Test Image')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      render(<OptimizedImage {...defaultProps} className="custom-class" />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('custom-class');
+    });
+
+    it('should apply container className', () => {
+      const { container } = render(
+        <OptimizedImage {...defaultProps} containerClassName="container-class" />
+      );
+      expect(container.firstChild).toHaveClass('container-class');
+    });
+  });
+
+  describe('Loading States', () => {
+    it('should handle onLoad event', () => {
+      const onLoad = jest.fn();
+      render(<OptimizedImage {...defaultProps} onLoad={onLoad} />);
+      
+      const image = screen.getByTestId('optimized-image');
+      fireEvent.load(image);
+      
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    it('should handle onError event', () => {
+      const onError = jest.fn();
+      render(<OptimizedImage {...defaultProps} onError={onError} />);
+      
+      const image = screen.getByTestId('optimized-image');
+      fireEvent.error(image);
+      
+      expect(onError).toHaveBeenCalled();
+    });
+
+    it('should show error state on error', () => {
+      render(<OptimizedImage {...defaultProps} />);
+      
+      const image = screen.getByTestId('optimized-image');
+      fireEvent.error(image);
+      
+      const errorIcon = document.querySelector('svg');
+      expect(errorIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('Object Fit', () => {
+    it('should apply cover object fit by default', () => {
+      render(<OptimizedImage {...defaultProps} />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('object-cover');
+    });
+
+    it('should apply contain object fit', () => {
+      render(<OptimizedImage {...defaultProps} objectFit="contain" />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('object-contain');
+    });
+
+    it('should apply fill object fit', () => {
+      render(<OptimizedImage {...defaultProps} objectFit="fill" />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('object-fill');
+    });
+
+    it('should apply none object fit', () => {
+      render(<OptimizedImage {...defaultProps} objectFit="none" />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('object-none');
+    });
+
+    it('should apply scale-down object fit', () => {
+      render(<OptimizedImage {...defaultProps} objectFit="scale-down" />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toHaveClass('object-scale-down');
+    });
+  });
+
+  describe('Fill Mode', () => {
+    it('should render in fill mode', () => {
+      const { container } = render(<OptimizedImage {...defaultProps} fill />);
+      expect(container.firstChild).toHaveClass('relative');
+    });
+  });
+
+  describe('Priority', () => {
+    it('should handle priority prop', () => {
+      render(<OptimizedImage {...defaultProps} priority />);
+      const image = screen.getByTestId('optimized-image');
+      expect(image).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/page-header.test.tsx

@@ -0,0 +1,94 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PageHeader } from './page-header';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    h1: ({ children, ...props }: any) => <h1 {...props}>{children}</h1>,
+    p: ({ children, ...props }: any) => <p {...props}>{children}</p>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('@/components/ui/ink-decoration', () => ({
+  InkBackground: () => <div data-testid="ink-background" />,
+}));
+
+jest.mock('@/components/effects/data-particle-flow', () => ({
+  DataParticleFlow: () => <div data-testid="data-particle-flow" />,
+}));
+
+jest.mock('@/components/effects/subtle-dots', () => ({
+  SubtleDots: () => <div data-testid="subtle-dots" />,
+}));
+
+describe('PageHeader', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render page header', () => {
+      render(<PageHeader title="Test Title" />);
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+
+    it('should render title', () => {
+      render(<PageHeader title="Test Title" />);
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
+
+    it('should render description when provided', () => {
+      render(<PageHeader title="Test" description="Test description" />);
+      expect(screen.getByText('Test description')).toBeInTheDocument();
+    });
+
+    it('should not render description when not provided', () => {
+      render(<PageHeader title="Test" />);
+      expect(screen.queryByText('Test description')).not.toBeInTheDocument();
+    });
+
+    it('should render badge when provided', () => {
+      render(<PageHeader title="Test" badge="Test Badge" />);
+      expect(screen.getByText('Test Badge')).toBeInTheDocument();
+    });
+
+    it('should not render badge when not provided', () => {
+      render(<PageHeader title="Test" />);
+      expect(screen.queryByText('Test Badge')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Effects', () => {
+    it('should render ink background', () => {
+      render(<PageHeader title="Test" />);
+      expect(screen.getByTestId('ink-background')).toBeInTheDocument();
+    });
+
+    it('should render data particle flow', () => {
+      render(<PageHeader title="Test" />);
+      expect(screen.getByTestId('data-particle-flow')).toBeInTheDocument();
+    });
+
+    it('should render subtle dots', () => {
+      render(<PageHeader title="Test" />);
+      expect(screen.getByTestId('subtle-dots')).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have container class', () => {
+      const { container } = render(<PageHeader title="Test" />);
+      const containerDiv = container.querySelector('.container-wide');
+      expect(containerDiv).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(<PageHeader title="Test" className="custom-class" />);
+      const customDiv = container.querySelector('.custom-class');
+      expect(customDiv).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/sheet.test.tsx

@@ -0,0 +1,262 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+} from './sheet';
+
+describe('Sheet', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render sheet trigger', () => {
+      render(
+        <Sheet>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Open Sheet')).toBeInTheDocument();
+    });
+
+    it('should render sheet content when open', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Sheet Title')).toBeInTheDocument();
+    });
+
+    it('should render sheet title', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByRole('heading', { name: 'Sheet Title' })).toBeInTheDocument();
+    });
+
+    it('should render sheet description', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+              <SheetDescription>Sheet Description</SheetDescription>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Sheet Description')).toBeInTheDocument();
+    });
+
+    it('should render sheet footer', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetFooter>
+              <button>Footer Button</button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Footer Button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should open sheet on trigger click', () => {
+      render(
+        <Sheet>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      
+      const trigger = screen.getByText('Open Sheet');
+      fireEvent.click(trigger);
+      
+      expect(screen.getByText('Sheet Title')).toBeInTheDocument();
+    });
+
+    it('should close sheet on close button click', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      fireEvent.click(closeButton);
+      
+      expect(screen.queryByText('Sheet Title')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Sides', () => {
+    it('should render right side by default', () => {
+      const { container } = render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render left side', () => {
+      const { container } = render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render top side', () => {
+      const { container } = render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent side="top">
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render bottom side', () => {
+      const { container } = render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent side="bottom">
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom className to content', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent className="custom-content">
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Sheet Title')).toBeInTheDocument();
+    });
+
+    it('should apply custom className to header', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader className="custom-header">
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Sheet Title')).toBeInTheDocument();
+    });
+
+    it('should apply custom className to footer', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetFooter className="custom-footer">
+              <button>Footer</button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByText('Footer')).toBeInTheDocument();
+    });
+  });
+
+  describe('Close Button', () => {
+    it('should show close button by default', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+    });
+
+    it('should hide close button when showCloseButton is false', () => {
+      render(
+        <Sheet defaultOpen>
+          <SheetTrigger>Open Sheet</SheetTrigger>
+          <SheetContent showCloseButton={false}>
+            <SheetHeader>
+              <SheetTitle>Sheet Title</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      );
+      expect(screen.queryByRole('button', { name: /close/i })).not.toBeInTheDocument();
+    });
+  });
+});

src/components/ui/testimonial-card.test.tsx

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TestimonialCard } from './testimonial-card';
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, width, height, className }: any) => (
+    <img src={src} alt={alt} width={width} height={height} className={className} />
+  ),
+}));
+
+describe('TestimonialCard', () => {
+  const defaultProps = {
+    quote: 'Test quote',
+    author: 'Test Author',
+    position: 'Manager',
+    company: 'Test Company',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render testimonial card', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      const blockquote = screen.getByText((content, element) => {
+        return element?.tagName === 'BLOCKQUOTE' && content.includes('Test quote');
+      });
+      expect(blockquote).toBeInTheDocument();
+    });
+
+    it('should render author name', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText('Test Author')).toBeInTheDocument();
+    });
+
+    it('should render position and company', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText(/Manager · Test Company/)).toBeInTheDocument();
+    });
+
+    it('should render quote with quotes', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      const blockquote = screen.getByText((content, element) => {
+        return element?.tagName === 'BLOCKQUOTE' && content.includes('Test quote');
+      });
+      expect(blockquote).toBeInTheDocument();
+    });
+  });
+
+  describe('Rating', () => {
+    it('should render 5 stars by default', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      const stars = document.querySelectorAll('svg.w-4.h-4');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('should render custom rating', () => {
+      render(<TestimonialCard {...defaultProps} rating={3} />);
+      const stars = document.querySelectorAll('svg.w-4.h-4');
+      expect(stars).toHaveLength(3);
+    });
+
+    it('should not render stars when rating is 0', () => {
+      render(<TestimonialCard {...defaultProps} rating={0} />);
+      const stars = document.querySelectorAll('svg.w-4.h-4');
+      expect(stars).toHaveLength(0);
+    });
+  });
+
+  describe('Avatar', () => {
+    it('should render avatar when avatarUrl is provided', () => {
+      render(<TestimonialCard {...defaultProps} avatarUrl="/avatar.jpg" />);
+      const avatar = screen.getByAltText('Test Author');
+      expect(avatar).toBeInTheDocument();
+    });
+
+    it('should not render avatar when avatarUrl is not provided', () => {
+      render(<TestimonialCard {...defaultProps} />);
+      const avatar = screen.queryByAltText('Test Author');
+      expect(avatar).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have correct card classes', () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('relative');
+      expect(card).toHaveClass('p-8');
+      expect(card).toHaveClass('rounded-lg');
+    });
+
+    it('should have border class', () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('border');
+    });
+
+    it('should have background class', () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      const card = container.firstChild as HTMLElement;
+      expect(card.className).toContain('bg-white');
+    });
+  });
+});

src/components/ui/textarea.test.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Textarea } from './textarea';
+
+jest.mock('@/lib/utils', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('Textarea', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render textarea element', () => {
+      render(<Textarea />);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should render with label', () => {
+      render(<Textarea label="留言内容" />);
+      expect(screen.getByLabelText('留言内容')).toBeInTheDocument();
+    });
+
+    it('should render required indicator when required', () => {
+      render(<Textarea label="留言内容" required />);
+      expect(screen.getByText('*')).toBeInTheDocument();
+    });
+
+    it('should render error message', () => {
+      render(<Textarea label="留言内容" error="请输入留言内容" />);
+      expect(screen.getByRole('alert')).toHaveTextContent('请输入留言内容');
+    });
+
+    it('should render with placeholder', () => {
+      render(<Textarea placeholder="请输入留言内容" />);
+      expect(screen.getByPlaceholderText('请输入留言内容')).toBeInTheDocument();
+    });
+
+    it('should render with custom data-testid', () => {
+      render(<Textarea data-testid="custom-textarea" />);
+      expect(screen.getByTestId('custom-textarea')).toBeInTheDocument();
+    });
+
+    it('should render with default rows', () => {
+      render(<Textarea rows={5} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('rows', '5');
+    });
+  });
+
+  describe('User Interaction', () => {
+    it('should handle user input', async () => {
+      render(<Textarea />);
+      const textarea = screen.getByRole('textbox');
+      
+      await userEvent.type(textarea, '这是一段测试留言');
+      expect(textarea).toHaveValue('这是一段测试留言');
+    });
+
+    it('should handle onChange event', async () => {
+      const handleChange = jest.fn();
+      render(<Textarea onChange={handleChange} />);
+      const textarea = screen.getByRole('textbox');
+      
+      await userEvent.type(textarea, 'a');
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('should handle onBlur event', async () => {
+      const handleBlur = jest.fn();
+      render(<Textarea onBlur={handleBlur} />);
+      const textarea = screen.getByRole('textbox');
+      
+      await userEvent.click(textarea);
+      await userEvent.tab();
+      expect(handleBlur).toHaveBeenCalled();
+    });
+
+    it('should handle onFocus event', async () => {
+      const handleFocus = jest.fn();
+      render(<Textarea onFocus={handleFocus} />);
+      const textarea = screen.getByRole('textbox');
+      
+      await userEvent.click(textarea);
+      expect(handleFocus).toHaveBeenCalled();
+    });
+
+    it('should handle multiline input', async () => {
+      render(<Textarea />);
+      const textarea = screen.getByRole('textbox');
+      
+      await userEvent.type(textarea, '第一行{enter}第二行');
+      expect(textarea).toHaveValue('第一行\n第二行');
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('should be disabled when disabled prop is true', () => {
+      render(<Textarea disabled />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toBeDisabled();
+    });
+
+    it('should not accept input when disabled', async () => {
+      render(<Textarea disabled />);
+      const textarea = screen.getByRole('textbox');
+      
+      expect(textarea).toBeDisabled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have aria-required when required', () => {
+      render(<Textarea required />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-required', 'true');
+    });
+
+    it('should have aria-invalid when error exists', () => {
+      render(<Textarea error="错误信息" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('should have aria-describedby when error exists', () => {
+      render(<Textarea error="错误信息" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-describedby');
+    });
+
+    it('should have proper label association', () => {
+      render(<Textarea label="留言内容" id="message" />);
+      const textarea = screen.getByLabelText('留言内容');
+      expect(textarea).toHaveAttribute('id', 'message');
+    });
+
+    it('should have role="alert" on error message', () => {
+      render(<Textarea error="错误信息" />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Styling', () => {
+    it('should apply custom className', () => {
+      render(<Textarea className="custom-class" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('custom-class');
+    });
+
+    it('should have error styling when error exists', () => {
+      render(<Textarea error="错误信息" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea.className).toMatch(/border-\[#C41E3A\]/);
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('should forward ref to textarea element', () => {
+      const ref = React.createRef<HTMLTextAreaElement>();
+      render(<Textarea ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+    });
+  });
+
+  describe('Value Handling', () => {
+    it('should display controlled value', () => {
+      render(<Textarea value="预设内容" onChange={() => {}} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveValue('预设内容');
+    });
+
+    it('should display defaultValue', () => {
+      render(<Textarea defaultValue="默认内容" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveValue('默认内容');
+    });
+  });
+
+  describe('MaxLength', () => {
+    it('should respect maxLength attribute', () => {
+      render(<Textarea maxLength={100} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('maxlength', '100');
+    });
+  });
+});

src/components/ui/toast.test.tsx

@@ -0,0 +1,163 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Toast } from './toast';
+
+describe('Toast Component', () => {
+  const mockOnClose = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('Rendering', () => {
+    it('should render toast with message', () => {
+      render(<Toast message="Test message" onClose={mockOnClose} />);
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it('should render with success type by default', () => {
+      render(<Toast message="Success" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveAttribute('data-type', 'success');
+    });
+
+    it('should render with error type', () => {
+      render(<Toast message="Error" type="error" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveAttribute('data-type', 'error');
+    });
+
+    it('should render with info type', () => {
+      render(<Toast message="Info" type="info" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveAttribute('data-type', 'info');
+    });
+
+    it('should render close button', () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      expect(screen.getByRole('button', { name: '关闭提示' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Auto-close', () => {
+    it('should auto-close after default duration (3000ms)', async () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      
+      expect(mockOnClose).not.toHaveBeenCalled();
+      
+      jest.advanceTimersByTime(3000);
+      await waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+
+    it('should auto-close after custom duration', async () => {
+      render(<Toast message="Test" duration={5000} onClose={mockOnClose} />);
+      
+      jest.advanceTimersByTime(5000);
+      await waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+
+    it('should cleanup timer on unmount', () => {
+      const { unmount } = render(<Toast message="Test" onClose={mockOnClose} />);
+      unmount();
+      
+      jest.advanceTimersByTime(3000);
+      expect(mockOnClose).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Manual Close', () => {
+    it('should close when close button clicked', async () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      
+      const closeButton = screen.getByRole('button', { name: '关闭提示' });
+      fireEvent.click(closeButton);
+      
+      jest.advanceTimersByTime(300);
+      await waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have alert role', () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('should have aria-live attribute', () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('should have accessible close button', () => {
+      render(<Toast message="Test" onClose={mockOnClose} />);
+      const closeButton = screen.getByRole('button', { name: '关闭提示' });
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Attributes', () => {
+    it('should support custom data-testid', () => {
+      render(
+        <Toast 
+          message="Test" 
+          onClose={mockOnClose} 
+          data-testid="custom-toast"
+        />
+      );
+      expect(screen.getByTestId('custom-toast')).toBeInTheDocument();
+    });
+  });
+
+  describe('Icons', () => {
+    it('should render success icon for success type', () => {
+      render(<Toast message="Success" type="success" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('should render error icon for error type', () => {
+      render(<Toast message="Error" type="error" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('should render info icon for info type', () => {
+      render(<Toast message="Info" type="info" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.querySelector('svg')).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply success background color', () => {
+      render(<Toast message="Success" type="success" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.className).toContain('bg-green-50');
+    });
+
+    it('should apply error background color', () => {
+      render(<Toast message="Error" type="error" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.className).toContain('bg-red-50');
+    });
+
+    it('should apply info background color', () => {
+      render(<Toast message="Info" type="info" onClose={mockOnClose} />);
+      const toast = screen.getByRole('alert');
+      expect(toast.className).toContain('bg-blue-50');
+    });
+  });
+});

src/components/ui/touch-button.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TouchButton } from './touch-button';
+
+describe('TouchButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render button with text', () => {
+      render(<TouchButton>Click Me</TouchButton>);
+      expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('should render button element', () => {
+      render(<TouchButton>Button</TouchButton>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <TouchButton className="custom-class">Button</TouchButton>
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Variants', () => {
+    it('should render primary variant by default', () => {
+      const { container } = render(<TouchButton>Primary</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render secondary variant', () => {
+      const { container } = render(<TouchButton variant="secondary">Secondary</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render ghost variant', () => {
+      const { container } = render(<TouchButton variant="ghost">Ghost</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Sizes', () => {
+    it('should render small size', () => {
+      const { container } = render(<TouchButton size="sm">Small</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render medium size by default', () => {
+      const { container } = render(<TouchButton>Medium</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render large size', () => {
+      const { container } = render(<TouchButton size="lg">Large</TouchButton>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Full Width', () => {
+    it('should not be full width by default', () => {
+      const { container } = render(<TouchButton>Button</TouchButton>);
+      expect(container.firstChild).not.toHaveClass('w-full');
+    });
+
+    it('should be full width when fullWidth is true', () => {
+      const { container } = render(<TouchButton fullWidth>Button</TouchButton>);
+      expect(container.firstChild).toHaveClass('w-full');
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('should not be disabled by default', () => {
+      render(<TouchButton>Button</TouchButton>);
+      expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+
+    it('should be disabled when disabled prop is true', () => {
+      render(<TouchButton disabled>Button</TouchButton>);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
+
+  describe('Touch Events', () => {
+    it('should handle touch start', () => {
+      const { container } = render(<TouchButton>Button</TouchButton>);
+      const button = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(button);
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should handle touch end', () => {
+      const { container } = render(<TouchButton>Button</TouchButton>);
+      const button = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(button);
+      fireEvent.touchEnd(button);
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should handle touch cancel', () => {
+      const { container } = render(<TouchButton>Button</TouchButton>);
+      const button = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(button);
+      fireEvent.touchCancel(button);
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('Click Events', () => {
+    it('should handle click events', () => {
+      const onClick = jest.fn();
+      render(<TouchButton onClick={onClick}>Button</TouchButton>);
+      
+      fireEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+});

src/components/ui/touch-swipe.test.tsx

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TouchSwipe } from './touch-swipe';
+
+describe('TouchSwipe', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render children', () => {
+      render(
+        <TouchSwipe>
+          <div>Test Content</div>
+        </TouchSwipe>
+      );
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <TouchSwipe className="custom-class">
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Touch Events', () => {
+    it('should handle touch start', () => {
+      const { container } = render(
+        <TouchSwipe>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 100, clientY: 100 }],
+      });
+      
+      expect(div).toBeInTheDocument();
+    });
+
+    it('should handle touch end', () => {
+      const { container } = render(
+        <TouchSwipe>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 100, clientY: 100 }],
+      });
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 150, clientY: 100 }],
+      });
+      
+      expect(div).toBeInTheDocument();
+    });
+
+    it('should call onSwipeLeft when swiping left', () => {
+      const onSwipeLeft = jest.fn();
+      const { container } = render(
+        <TouchSwipe onSwipeLeft={onSwipeLeft}>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 150, clientY: 100 }],
+      });
+      
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 50, clientY: 100 }],
+      });
+      
+      expect(onSwipeLeft).toHaveBeenCalled();
+    });
+
+    it('should call onSwipeRight when swiping right', () => {
+      const onSwipeRight = jest.fn();
+      const { container } = render(
+        <TouchSwipe onSwipeRight={onSwipeRight}>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 50, clientY: 100 }],
+      });
+      
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 150, clientY: 100 }],
+      });
+      
+      expect(onSwipeRight).toHaveBeenCalled();
+    });
+
+    it('should not trigger swipe when below threshold', () => {
+      const onSwipeLeft = jest.fn();
+      const { container } = render(
+        <TouchSwipe onSwipeLeft={onSwipeLeft} threshold={100}>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 100, clientY: 100 }],
+      });
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 80, clientY: 100 }],
+      });
+      
+      expect(onSwipeLeft).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Threshold', () => {
+    it('should use default threshold of 50', () => {
+      const onSwipeLeft = jest.fn();
+      const { container } = render(
+        <TouchSwipe onSwipeLeft={onSwipeLeft}>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 100, clientY: 100 }],
+      });
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 40, clientY: 100 }],
+      });
+      
+      expect(onSwipeLeft).toHaveBeenCalled();
+    });
+
+    it('should accept custom threshold', () => {
+      const onSwipeLeft = jest.fn();
+      const { container } = render(
+        <TouchSwipe onSwipeLeft={onSwipeLeft} threshold={200}>
+          <div>Test</div>
+        </TouchSwipe>
+      );
+      
+      const div = container.firstChild as HTMLElement;
+      
+      fireEvent.touchStart(div, {
+        touches: [{ clientX: 300, clientY: 100 }],
+      });
+      
+      fireEvent.touchEnd(div, {
+        changedTouches: [{ clientX: 50, clientY: 100 }],
+      });
+      
+      expect(onSwipeLeft).toHaveBeenCalled();
+    });
+  });
+});

src/hooks/use-focus-trap.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { renderHook, act } from '@testing-library/react';
+import { useFocusTrap } from './use-focus-trap';
+
+describe('useFocusTrap', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Initial State', () => {
+    it('should return a ref', () => {
+      const { result } = renderHook(() => useFocusTrap<HTMLDivElement>(false));
+      expect(result.current).toBeDefined();
+      expect(result.current.current).toBeNull();
+    });
+  });
+
+  describe('When Active', () => {
+    it('should store previous active element', () => {
+      const { result } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      expect(result.current).toBeDefined();
+    });
+
+    it('should add keydown event listener', () => {
+      const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+      renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+    });
+
+    it('should set body overflow to hidden', () => {
+      renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      expect(document.body.style.overflow).toBe('hidden');
+    });
+  });
+
+  describe('When Inactive', () => {
+    it('should not add keydown event listener', () => {
+      const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+      renderHook(() => useFocusTrap<HTMLDivElement>(false));
+      expect(addEventListenerSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not set body overflow', () => {
+      renderHook(() => useFocusTrap<HTMLDivElement>(false));
+      expect(document.body.style.overflow).toBe('unset');
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should remove keydown event listener on unmount', () => {
+      const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+      const { unmount } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      unmount();
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+    });
+
+    it('should restore body overflow on unmount', () => {
+      const { unmount } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      unmount();
+      expect(document.body.style.overflow).toBe('unset');
+    });
+  });
+
+  describe('Tab Navigation', () => {
+    it('should handle Tab key press', () => {
+      const { result } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Tab' });
+      document.dispatchEvent(mockEvent);
+      
+      expect(result.current).toBeDefined();
+    });
+
+    it('should handle Shift+Tab key press', () => {
+      const { result } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true });
+      document.dispatchEvent(mockEvent);
+      
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('Escape Key', () => {
+    it('should handle Escape key press', () => {
+      const { result } = renderHook(() => useFocusTrap<HTMLDivElement>(true));
+      
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      document.dispatchEvent(mockEvent);
+      
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('State Changes', () => {
+    it('should handle activation change', () => {
+      const { result, rerender } = renderHook(
+        ({ isActive }) => useFocusTrap<HTMLDivElement>(isActive),
+        { initialProps: { isActive: false } }
+      );
+      
+      expect(result.current).toBeDefined();
+      
+      rerender({ isActive: true });
+      expect(document.body.style.overflow).toBe('hidden');
+      
+      rerender({ isActive: false });
+      expect(document.body.style.overflow).toBe('unset');
+    });
+  });
+});

src/hooks/use-intersection-observer.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react';
+import { useIntersectionObserver } from './use-intersection-observer';
+
+describe('useIntersectionObserver', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Initial State', () => {
+    it('should return ref and isIntersecting state', () => {
+      const { result } = renderHook(() => useIntersectionObserver<HTMLDivElement>());
+      expect(result.current[0]).toBeDefined();
+      expect(typeof result.current[1]).toBe('boolean');
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should return ref with null current value', () => {
+      const { result } = renderHook(() => useIntersectionObserver<HTMLDivElement>());
+      expect(result.current[0].current).toBeNull();
+    });
+  });
+
+  describe('Options', () => {
+    it('should accept threshold option', () => {
+      const { result } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ threshold: 0.5 })
+      );
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should accept root option', () => {
+      const { result } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ root: null })
+      );
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should accept rootMargin option', () => {
+      const { result } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ rootMargin: '10px' })
+      );
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should accept freezeOnceVisible option', () => {
+      const { result } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ freezeOnceVisible: true })
+      );
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should use default options', () => {
+      const { result } = renderHook(() => useIntersectionObserver<HTMLDivElement>());
+      expect(result.current[1]).toBe(false);
+    });
+
+    it('should accept multiple thresholds', () => {
+      const { result } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ threshold: [0, 0.25, 0.5, 0.75, 1] })
+      );
+      expect(result.current[1]).toBe(false);
+    });
+  });
+
+  describe('Behavior', () => {
+    it('should not observe when freezeOnceVisible is true and already intersecting', () => {
+      const { result, rerender } = renderHook(() => 
+        useIntersectionObserver<HTMLDivElement>({ freezeOnceVisible: true })
+      );
+      
+      expect(result.current[1]).toBe(false);
+      
+      rerender();
+      expect(result.current[1]).toBe(false);
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should cleanup observer on unmount', () => {
+      const { unmount } = renderHook(() => useIntersectionObserver<HTMLDivElement>());
+      unmount();
+    });
+  });
+
+  describe('Type Safety', () => {
+    it('should work with different element types', () => {
+      const { result: result1 } = renderHook(() => useIntersectionObserver<HTMLDivElement>());
+      const { result: result2 } = renderHook(() => useIntersectionObserver<HTMLSpanElement>());
+      const { result: result3 } = renderHook(() => useIntersectionObserver<HTMLElement>());
+      
+      expect(result1.current[1]).toBe(false);
+      expect(result2.current[1]).toBe(false);
+      expect(result3.current[1]).toBe(false);
+    });
+  });
+});

src/hooks/use-media-query.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react';
+import { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop } from './use-media-query';
+
+describe('useMediaQuery', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useMediaQuery', () => {
+    it('should return false on server side', () => {
+      const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+      expect(result.current).toBe(false);
+    });
+
+    it('should return boolean value', () => {
+      const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+      expect(typeof result.current).toBe('boolean');
+    });
+  });
+
+  describe('useIsMobile', () => {
+    it('should return boolean value', () => {
+      const { result } = renderHook(() => useIsMobile());
+      expect(typeof result.current).toBe('boolean');
+    });
+
+    it('should use correct media query', () => {
+      const { result } = renderHook(() => useIsMobile());
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('useIsTablet', () => {
+    it('should return boolean value', () => {
+      const { result } = renderHook(() => useIsTablet());
+      expect(typeof result.current).toBe('boolean');
+    });
+
+    it('should use correct media query', () => {
+      const { result } = renderHook(() => useIsTablet());
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('useIsDesktop', () => {
+    it('should return boolean value', () => {
+      const { result } = renderHook(() => useIsDesktop());
+      expect(typeof result.current).toBe('boolean');
+    });
+
+    it('should use correct media query', () => {
+      const { result } = renderHook(() => useIsDesktop());
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('Media Query Behavior', () => {
+    it('should handle different queries', () => {
+      const { result: result1 } = renderHook(() => useMediaQuery('(min-width: 1024px)'));
+      const { result: result2 } = renderHook(() => useMediaQuery('(max-width: 767px)'));
+      
+      expect(typeof result1.current).toBe('boolean');
+      expect(typeof result2.current).toBe('boolean');
+    });
+
+    it('should handle complex queries', () => {
+      const { result } = renderHook(() => 
+        useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
+      );
+      expect(typeof result.current).toBe('boolean');
+    });
+  });
+});

src/hooks/use-scroll-reveal.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react';
+import { useScrollReveal, useScrollProgress, useParallax } from './use-scroll-reveal';
+
+describe('useScrollReveal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useScrollReveal', () => {
+    it('should return ref and isVisible state', () => {
+      const { result } = renderHook(() => useScrollReveal());
+      expect(result.current).toHaveProperty('ref');
+      expect(result.current).toHaveProperty('isVisible');
+      expect(result.current.isVisible).toBe(false);
+    });
+
+    it('should accept custom options', () => {
+      const { result } = renderHook(() => 
+        useScrollReveal({ threshold: 0.5, rootMargin: '10px', triggerOnce: false })
+      );
+      expect(result.current).toHaveProperty('ref');
+      expect(result.current).toHaveProperty('isVisible');
+    });
+
+    it('should use default options', () => {
+      const { result } = renderHook(() => useScrollReveal());
+      expect(result.current.isVisible).toBe(false);
+    });
+  });
+
+  describe('useScrollProgress', () => {
+    it('should return progress value', () => {
+      const { result } = renderHook(() => useScrollProgress());
+      expect(typeof result.current).toBe('number');
+      expect(result.current).toBeGreaterThanOrEqual(0);
+      expect(result.current).toBeLessThanOrEqual(1);
+    });
+
+    it('should accept threshold option', () => {
+      const { result } = renderHook(() => useScrollProgress({ threshold: 0.5 }));
+      expect(typeof result.current).toBe('number');
+    });
+
+    it('should use default threshold', () => {
+      const { result } = renderHook(() => useScrollProgress());
+      expect(result.current).toBeDefined();
+    });
+  });
+
+  describe('useParallax', () => {
+    it('should return ref and offset', () => {
+      const { result } = renderHook(() => useParallax());
+      expect(result.current).toHaveProperty('ref');
+      expect(result.current).toHaveProperty('offset');
+      expect(typeof result.current.offset).toBe('number');
+    });
+
+    it('should accept speed option', () => {
+      const { result } = renderHook(() => useParallax({ speed: 0.8 }));
+      expect(result.current).toHaveProperty('ref');
+      expect(result.current).toHaveProperty('offset');
+    });
+
+    it('should use default speed', () => {
+      const { result } = renderHook(() => useParallax());
+      expect(result.current.offset).toBe(0);
+    });
+
+    it('should handle different speed values', () => {
+      const { result: result1 } = renderHook(() => useParallax({ speed: 0 }));
+      const { result: result2 } = renderHook(() => useParallax({ speed: 1 }));
+      
+      expect(result1.current.offset).toBeDefined();
+      expect(result2.current.offset).toBeDefined();
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should cleanup intersection observer on unmount', () => {
+      const { unmount } = renderHook(() => useScrollReveal());
+      unmount();
+    });
+
+    it('should cleanup scroll listener on unmount', () => {
+      const { unmount } = renderHook(() => useScrollProgress());
+      unmount();
+    });
+
+    it('should cleanup parallax scroll listener on unmount', () => {
+      const { unmount } = renderHook(() => useParallax());
+      unmount();
+    });
+  });
+});

src/lib/analytics.test.ts

@@ -0,0 +1,95 @@
+jest.mock('./analytics', () => {
+  const actual = jest.requireActual('./analytics');
+  return {
+    ...actual,
+    pageview: jest.fn(),
+    event: jest.fn(),
+    trackContactForm: jest.fn(),
+    trackButtonClick: jest.fn(),
+    trackPageView: jest.fn(),
+  };
+});
+
+import {
+  pageview,
+  event,
+  trackContactForm,
+  trackButtonClick,
+  trackPageView,
+} from './analytics';
+
+describe('analytics', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('pageview', () => {
+    it('should be defined', () => {
+      expect(pageview).toBeDefined();
+      expect(typeof pageview).toBe('function');
+    });
+
+    it('should be callable', () => {
+      pageview('/test-page');
+      expect(pageview).toHaveBeenCalledWith('/test-page');
+    });
+  });
+
+  describe('event', () => {
+    it('should be defined', () => {
+      expect(event).toBeDefined();
+      expect(typeof event).toBe('function');
+    });
+
+    it('should be callable with all parameters', () => {
+      event('click', 'button', 'submit', 1);
+      expect(event).toHaveBeenCalledWith('click', 'button', 'submit', 1);
+    });
+
+    it('should be callable with minimal parameters', () => {
+      event('click', 'button');
+      expect(event).toHaveBeenCalledWith('click', 'button');
+    });
+  });
+
+  describe('trackContactForm', () => {
+    it('should be defined', () => {
+      expect(trackContactForm).toBeDefined();
+      expect(typeof trackContactForm).toBe('function');
+    });
+
+    it('should be callable', () => {
+      const formData = {
+        name: 'John Doe',
+        email: 'john@example.com',
+        message: 'Test message',
+      };
+      trackContactForm(formData);
+      expect(trackContactForm).toHaveBeenCalledWith(formData);
+    });
+  });
+
+  describe('trackButtonClick', () => {
+    it('should be defined', () => {
+      expect(trackButtonClick).toBeDefined();
+      expect(typeof trackButtonClick).toBe('function');
+    });
+
+    it('should be callable', () => {
+      trackButtonClick('submit', 'header');
+      expect(trackButtonClick).toHaveBeenCalledWith('submit', 'header');
+    });
+  });
+
+  describe('trackPageView', () => {
+    it('should be defined', () => {
+      expect(trackPageView).toBeDefined();
+      expect(typeof trackPageView).toBe('function');
+    });
+
+    it('should be callable', () => {
+      trackPageView('Home Page', '/home');
+      expect(trackPageView).toHaveBeenCalledWith('Home Page', '/home');
+    });
+  });
+});

src/lib/analytics.ts

@@ -0,0 +1,37 @@
+export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || '';
+
+declare global {
+  interface Window {
+    gtag: (command: string, targetId: string, config?: Record<string, unknown>) => void;
+  }
+}
+
+export const pageview = (url: string) => {
+  if (typeof window !== 'undefined' && window.gtag && GA_MEASUREMENT_ID) {
+    window.gtag('config', GA_MEASUREMENT_ID, {
+      page_path: url,
+    });
+  }
+};
+
+export const event = (action: string, category: string, label?: string, value?: number) => {
+  if (typeof window !== 'undefined' && window.gtag && GA_MEASUREMENT_ID) {
+    window.gtag('event', action, {
+      event_category: category,
+      event_label: label,
+      value: value,
+    });
+  }
+};
+
+export const trackContactForm = (formData: Record<string, string>) => {
+  event('submit', 'contact_form', 'contact_form_submission');
+};
+
+export const trackButtonClick = (buttonName: string, location: string) => {
+  event('click', 'button', `${location}_${buttonName}`);
+};
+
+export const trackPageView = (pageTitle: string, pagePath: string) => {
+  event('page_view', 'navigation', pageTitle);
+};

src/lib/animations.test.tsx

@@ -0,0 +1,539 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, initial, animate, variants, className, whileHover, whileTap, ...props }: any) => (
+      <div
+        data-testid="motion-div"
+        data-initial={JSON.stringify(initial)}
+        data-animate={JSON.stringify(animate)}
+        data-variants={JSON.stringify(variants)}
+        data-while-hover={JSON.stringify(whileHover)}
+        data-while-tap={JSON.stringify(whileTap)}
+        className={className}
+        {...props}
+      >
+        {children}
+      </div>
+    ),
+    button: ({ children, onClick, className, whileHover, whileTap, ...props }: any) => (
+      <button
+        data-testid="motion-button"
+        onClick={onClick}
+        className={className}
+        data-while-hover={JSON.stringify(whileHover)}
+        data-while-tap={JSON.stringify(whileTap)}
+        {...props}
+      >
+        {children}
+      </button>
+    ),
+    span: ({ children, className, animate, ...props }: any) => (
+      <span
+        data-testid="motion-span"
+        className={className}
+        data-animate={JSON.stringify(animate)}
+        {...props}
+      >
+        {children}
+      </span>
+    ),
+    svg: ({ children, className, ...props }: any) => (
+      <svg data-testid="motion-svg" className={className} {...props}>
+        {children}
+      </svg>
+    ),
+    circle: ({ variants, ...props }: any) => (
+      <circle data-testid="motion-circle" data-variants={JSON.stringify(variants)} {...props} />
+    ),
+    path: ({ variants, ...props }: any) => (
+      <path data-testid="motion-path" data-variants={JSON.stringify(variants)} {...props} />
+    ),
+  },
+  useInView: jest.fn(() => true),
+  useSpring: jest.fn((value) => value),
+  useTransform: jest.fn((value) => value),
+}));
+
+describe('Animation Variants', () => {
+  describe('inkVariants', () => {
+    it('should have correct hidden state', async () => {
+      const { inkVariants } = await import('./animations');
+      expect(inkVariants.hidden).toEqual({
+        opacity: 0,
+        scale: 0.8,
+        filter: 'blur(10px)',
+      });
+    });
+
+    it('should have correct visible state', async () => {
+      const { inkVariants } = await import('./animations');
+      expect(inkVariants.visible).toHaveProperty('opacity', 1);
+      expect(inkVariants.visible).toHaveProperty('scale', 1);
+      expect(inkVariants.visible).toHaveProperty('filter', 'blur(0px)');
+    });
+
+    it('should have correct transition configuration', async () => {
+      const { inkVariants } = await import('./animations');
+      const transition = inkVariants.visible.transition as any;
+      expect(transition.duration).toBe(0.8);
+      expect(transition.ease).toEqual([0.16, 1, 0.3, 1]);
+    });
+  });
+
+  describe('sealStampVariants', () => {
+    it('should have correct hidden state', async () => {
+      const { sealStampVariants } = await import('./animations');
+      expect(sealStampVariants.hidden).toEqual({
+        opacity: 0,
+        scale: 1.5,
+        rotate: -15,
+      });
+    });
+
+    it('should have correct visible state', async () => {
+      const { sealStampVariants } = await import('./animations');
+      expect(sealStampVariants.visible).toHaveProperty('opacity', 1);
+      expect(sealStampVariants.visible).toHaveProperty('scale', 1);
+      expect(sealStampVariants.visible).toHaveProperty('rotate', 0);
+    });
+
+    it('should use spring animation', async () => {
+      const { sealStampVariants } = await import('./animations');
+      const transition = sealStampVariants.visible.transition as any;
+      expect(transition.type).toBe('spring');
+      expect(transition.stiffness).toBe(300);
+      expect(transition.damping).toBe(20);
+    });
+  });
+
+  describe('brushStrokeVariants', () => {
+    it('should have correct hidden state', async () => {
+      const { brushStrokeVariants } = await import('./animations');
+      expect(brushStrokeVariants.hidden).toEqual({
+        pathLength: 0,
+        opacity: 0,
+      });
+    });
+
+    it('should have correct visible state', async () => {
+      const { brushStrokeVariants } = await import('./animations');
+      expect(brushStrokeVariants.visible).toHaveProperty('pathLength', 1);
+      expect(brushStrokeVariants.visible).toHaveProperty('opacity', 1);
+    });
+  });
+
+  describe('fadeUpVariants', () => {
+    it('should have correct hidden state', async () => {
+      const { fadeUpVariants } = await import('./animations');
+      expect(fadeUpVariants.hidden).toEqual({
+        opacity: 0,
+        y: 30,
+      });
+    });
+
+    it('should have correct visible state', async () => {
+      const { fadeUpVariants } = await import('./animations');
+      expect(fadeUpVariants.visible).toHaveProperty('opacity', 1);
+      expect(fadeUpVariants.visible).toHaveProperty('y', 0);
+    });
+  });
+
+  describe('staggerContainerVariants', () => {
+    it('should have staggerChildren configured', async () => {
+      const { staggerContainerVariants } = await import('./animations');
+      const transition = staggerContainerVariants.visible.transition as any;
+      expect(transition.staggerChildren).toBe(0.1);
+      expect(transition.delayChildren).toBe(0.1);
+    });
+  });
+
+  describe('staggerItemVariants', () => {
+    it('should have correct hidden state', async () => {
+      const { staggerItemVariants } = await import('./animations');
+      expect(staggerItemVariants.hidden).toEqual({
+        opacity: 0,
+        y: 20,
+        scale: 0.95,
+      });
+    });
+
+    it('should have correct visible state', async () => {
+      const { staggerItemVariants } = await import('./animations');
+      expect(staggerItemVariants.visible).toHaveProperty('opacity', 1);
+      expect(staggerItemVariants.visible).toHaveProperty('y', 0);
+      expect(staggerItemVariants.visible).toHaveProperty('scale', 1);
+    });
+  });
+});
+
+describe('Animation Components', () => {
+  describe('InkReveal', () => {
+    it('should render children correctly', async () => {
+      const { InkReveal } = await import('./animations');
+      render(<InkReveal>Test Content</InkReveal>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { InkReveal } = await import('./animations');
+      render(<InkReveal className="custom-class">Test</InkReveal>);
+      const element = screen.getByTestId('motion-div');
+      expect(element).toHaveClass('custom-class');
+    });
+
+    it('should use inkVariants', async () => {
+      const { InkReveal, inkVariants } = await import('./animations');
+      render(<InkReveal>Test</InkReveal>);
+      const element = screen.getByTestId('motion-div');
+      const variants = JSON.parse(element.getAttribute('data-variants') || '{}');
+      expect(variants).toEqual(inkVariants);
+    });
+  });
+
+  describe('SealStamp', () => {
+    it('should render children correctly', async () => {
+      const { SealStamp } = await import('./animations');
+      render(<SealStamp>Seal Content</SealStamp>);
+      expect(screen.getByText('Seal Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { SealStamp } = await import('./animations');
+      render(<SealStamp className="seal-class">Test</SealStamp>);
+      const element = screen.getByTestId('motion-div');
+      expect(element).toHaveClass('seal-class');
+    });
+  });
+
+  describe('FadeUp', () => {
+    it('should render children correctly', async () => {
+      const { FadeUp } = await import('./animations');
+      render(<FadeUp>Fade Content</FadeUp>);
+      expect(screen.getByText('Fade Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom duration', async () => {
+      const { FadeUp } = await import('./animations');
+      render(<FadeUp duration={1.2}>Test</FadeUp>);
+      const element = screen.getByTestId('motion-div');
+      const variants = JSON.parse(element.getAttribute('data-variants') || '{}');
+      expect(variants.visible.transition.duration).toBe(1.2);
+    });
+
+    it('should apply delay prop', async () => {
+      const { FadeUp } = await import('./animations');
+      render(<FadeUp delay={0.3}>Test</FadeUp>);
+      const element = screen.getByTestId('motion-div');
+      const variants = JSON.parse(element.getAttribute('data-variants') || '{}');
+      expect(variants.visible.transition.delay).toBe(0.3);
+    });
+  });
+
+  describe('StaggerContainer', () => {
+    it('should render children correctly', async () => {
+      const { StaggerContainer } = await import('./animations');
+      render(
+        <StaggerContainer>
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </StaggerContainer>
+      );
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
+
+    it('should apply custom staggerDelay', async () => {
+      const { StaggerContainer } = await import('./animations');
+      render(<StaggerContainer staggerDelay={0.2}>Test</StaggerContainer>);
+      const element = screen.getByTestId('motion-div');
+      const variants = JSON.parse(element.getAttribute('data-variants') || '{}');
+      expect(variants.visible.transition.staggerChildren).toBe(0.2);
+    });
+  });
+
+  describe('StaggerItem', () => {
+    it('should render children correctly', async () => {
+      const { StaggerItem } = await import('./animations');
+      render(<StaggerItem>Item Content</StaggerItem>);
+      expect(screen.getByText('Item Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('RippleButton', () => {
+    it('should render children correctly', async () => {
+      const { RippleButton } = await import('./animations');
+      render(<RippleButton>Click Me</RippleButton>);
+      expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('should handle click events', async () => {
+      const { RippleButton } = await import('./animations');
+      const handleClick = jest.fn();
+      render(<RippleButton onClick={handleClick}>Click Me</RippleButton>);
+      
+      const button = screen.getByTestId('motion-button');
+      fireEvent.click(button);
+      
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    it('should apply custom className', async () => {
+      const { RippleButton } = await import('./animations');
+      render(<RippleButton className="custom-button">Test</RippleButton>);
+      const element = screen.getByTestId('motion-button');
+      expect(element).toHaveClass('custom-button');
+    });
+  });
+
+  describe('InkCard', () => {
+    it('should render children correctly', async () => {
+      const { InkCard } = await import('./animations');
+      render(<InkCard>Card Content</InkCard>);
+      expect(screen.getByText('Card Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom hoverScale', async () => {
+      const { InkCard } = await import('./animations');
+      render(<InkCard hoverScale={1.1}>Test</InkCard>);
+      const element = screen.getByTestId('motion-div');
+      const whileHover = JSON.parse(element.getAttribute('data-while-hover') || '{}');
+      expect(whileHover.scale).toBe(1.1);
+    });
+  });
+
+  describe('CountUp', () => {
+    it('should render with prefix and suffix', async () => {
+      const { CountUp } = await import('./animations');
+      render(<CountUp end={100} prefix="$" suffix="%" />);
+      expect(screen.getByText(/\$/)).toBeInTheDocument();
+      expect(screen.getByText(/%/)).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { CountUp } = await import('./animations');
+      render(<CountUp end={100} className="counter-class" />);
+      const element = screen.getByTestId('motion-span');
+      expect(element).toHaveClass('counter-class');
+    });
+  });
+
+  describe('Typewriter', () => {
+    it('should render component correctly', async () => {
+      const { Typewriter } = await import('./animations');
+      render(<Typewriter text="Hello" />);
+      const cursor = screen.getByText('|');
+      expect(cursor).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { Typewriter } = await import('./animations');
+      render(<Typewriter text="Test" className="typewriter-class" />);
+      const container = screen.getByText('|').closest('.typewriter-class');
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('FloatingElement', () => {
+    it('should render children correctly', async () => {
+      const { FloatingElement } = await import('./animations');
+      render(<FloatingElement>Floating Content</FloatingElement>);
+      expect(screen.getByText('Floating Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom amplitude', async () => {
+      const { FloatingElement } = await import('./animations');
+      render(<FloatingElement amplitude={20}>Test</FloatingElement>);
+      const element = screen.getByTestId('motion-div');
+      const animate = JSON.parse(element.getAttribute('data-animate') || '{}');
+      expect(animate.y).toEqual([-20, 20, -20]);
+    });
+  });
+
+  describe('PulseElement', () => {
+    it('should render children correctly', async () => {
+      const { PulseElement } = await import('./animations');
+      render(<PulseElement>Pulse Content</PulseElement>);
+      expect(screen.getByText('Pulse Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom scale', async () => {
+      const { PulseElement } = await import('./animations');
+      render(<PulseElement scale={1.1}>Test</PulseElement>);
+      const element = screen.getByTestId('motion-div');
+      const animate = JSON.parse(element.getAttribute('data-animate') || '{}');
+      expect(animate.scale).toEqual([1, 1.1, 1]);
+    });
+  });
+
+  describe('GradientText', () => {
+    it('should render children correctly', async () => {
+      const { GradientText } = await import('./animations');
+      render(<GradientText>Gradient Text</GradientText>);
+      expect(screen.getByText('Gradient Text')).toBeInTheDocument();
+    });
+
+    it('should apply custom colors', async () => {
+      const { GradientText } = await import('./animations');
+      render(<GradientText colors={['#ff0000', '#00ff00', '#0000ff']}>Test</GradientText>);
+      const element = screen.getByTestId('motion-span');
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  describe('SplitText', () => {
+    it('should render text correctly', async () => {
+      const { SplitText } = await import('./animations');
+      render(<SplitText text="Hi" />);
+      expect(screen.getByText('H')).toBeInTheDocument();
+      expect(screen.getByText('i')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { SplitText } = await import('./animations');
+      render(<SplitText text="Test" className="split-class" />);
+      const elements = screen.getAllByTestId('motion-span');
+      const parentElement = elements.find(el => el.classList.contains('split-class'));
+      expect(parentElement).toBeDefined();
+    });
+  });
+
+  describe('GlitchText', () => {
+    it('should render text correctly', async () => {
+      const { GlitchText } = await import('./animations');
+      render(<GlitchText text="Glitch" />);
+      const glitchElements = screen.getAllByText('Glitch');
+      expect(glitchElements.length).toBeGreaterThan(0);
+    });
+
+    it('should apply custom className', async () => {
+      const { GlitchText } = await import('./animations');
+      render(<GlitchText text="Test" className="glitch-class" />);
+      const testElements = screen.getAllByText('Test');
+      const container = testElements[0].closest('.glitch-class');
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('MagneticButton', () => {
+    it('should render children correctly', async () => {
+      const { MagneticButton } = await import('./animations');
+      render(<MagneticButton>Magnetic</MagneticButton>);
+      expect(screen.getByText('Magnetic')).toBeInTheDocument();
+    });
+
+    it('should handle click events', async () => {
+      const { MagneticButton } = await import('./animations');
+      const handleClick = jest.fn();
+      render(<MagneticButton onClick={handleClick}>Click</MagneticButton>);
+      
+      const element = screen.getByText('Click');
+      fireEvent.click(element);
+      
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('BlurReveal', () => {
+    it('should render children correctly', async () => {
+      const { BlurReveal } = await import('./animations');
+      render(<BlurReveal>Blur Content</BlurReveal>);
+      expect(screen.getByText('Blur Content')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { BlurReveal } = await import('./animations');
+      render(<BlurReveal className="blur-class">Test</BlurReveal>);
+      const element = screen.getByTestId('motion-div');
+      expect(element).toHaveClass('blur-class');
+    });
+  });
+
+  describe('WaveText', () => {
+    it('should render text correctly', async () => {
+      const { WaveText } = await import('./animations');
+      render(<WaveText text="Hi" />);
+      expect(screen.getByText('H')).toBeInTheDocument();
+      expect(screen.getByText('i')).toBeInTheDocument();
+    });
+  });
+
+  describe('ShimmerButton', () => {
+    it('should render children correctly', async () => {
+      const { ShimmerButton } = await import('./animations');
+      render(<ShimmerButton>Shimmer</ShimmerButton>);
+      expect(screen.getByText('Shimmer')).toBeInTheDocument();
+    });
+
+    it('should handle click events', async () => {
+      const { ShimmerButton } = await import('./animations');
+      const handleClick = jest.fn();
+      render(<ShimmerButton onClick={handleClick}>Click</ShimmerButton>);
+      
+      const button = screen.getByTestId('motion-button');
+      fireEvent.click(button);
+      
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('Animation Hooks', () => {
+  describe('useParallax', () => {
+    it('should be defined', async () => {
+      const { useParallax } = await import('./animations');
+      expect(useParallax).toBeDefined();
+    });
+  });
+
+  describe('useSmoothSpring', () => {
+    it('should be defined', async () => {
+      const { useSmoothSpring } = await import('./animations');
+      expect(useSmoothSpring).toBeDefined();
+    });
+  });
+});
+
+describe('SVG Components', () => {
+  describe('InkDropSVG', () => {
+    it('should render SVG correctly', async () => {
+      const { InkDropSVG } = await import('./animations');
+      render(<InkDropSVG />);
+      expect(screen.getByTestId('motion-svg')).toBeInTheDocument();
+      expect(screen.getByTestId('motion-circle')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', async () => {
+      const { InkDropSVG } = await import('./animations');
+      render(<InkDropSVG className="ink-drop-class" />);
+      const element = screen.getByTestId('motion-svg');
+      expect(element).toHaveClass('ink-drop-class');
+    });
+  });
+
+  describe('InkSplash', () => {
+    it('should render SVG correctly', async () => {
+      const { InkSplash } = await import('./animations');
+      render(<InkSplash />);
+      expect(screen.getByTestId('motion-svg')).toBeInTheDocument();
+      expect(screen.getByTestId('motion-path')).toBeInTheDocument();
+    });
+
+    it('should apply custom color', async () => {
+      const { InkSplash } = await import('./animations');
+      render(<InkSplash color="#ff0000" />);
+      const path = screen.getByTestId('motion-path');
+      expect(path).toHaveAttribute('fill', '#ff0000');
+    });
+
+    it('should apply custom size', async () => {
+      const { InkSplash } = await import('./animations');
+      render(<InkSplash size={200} />);
+      const svg = screen.getByTestId('motion-svg');
+      expect(svg).toHaveAttribute('width', '200');
+      expect(svg).toHaveAttribute('height', '200');
+    });
+  });
+});

src/lib/audit.test.ts

@@ -0,0 +1,106 @@
+const mockInsert = jest.fn().mockReturnValue({
+  values: jest.fn().mockResolvedValue(undefined),
+});
+
+jest.mock('@/db', () => ({
+  db: {
+    insert: mockInsert,
+  },
+}));
+
+jest.mock('nanoid', () => ({
+  nanoid: jest.fn(() => 'test-id'),
+}));
+
+import { createAuditLog, getActionLabel, getActionColor } from './audit';
+
+describe('audit', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('createAuditLog', () => {
+    it('should create audit log successfully', async () => {
+      const mockValues = jest.fn().mockResolvedValue(undefined);
+      mockInsert.mockReturnValue({ values: mockValues });
+
+      const logData = {
+        userId: 'user-123',
+        action: 'LOGIN',
+        details: { ip: '192.168.1.1' },
+      };
+
+      await createAuditLog(logData);
+
+      expect(mockValues).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'test-id',
+          userId: 'user-123',
+          action: 'LOGIN',
+          details: { ip: '192.168.1.1' },
+          timestamp: expect.any(Date),
+        })
+      );
+    });
+
+    it('should handle missing optional fields', async () => {
+      const mockValues = jest.fn().mockResolvedValue(undefined);
+      mockInsert.mockReturnValue({ values: mockValues });
+
+      const logData = {
+        userId: 'user-456',
+        action: 'LOGOUT',
+      };
+
+      await createAuditLog(logData);
+
+      expect(mockValues).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'test-id',
+          userId: 'user-456',
+          action: 'LOGOUT',
+          timestamp: expect.any(Date),
+        })
+      );
+    });
+
+    it('should handle database errors gracefully', async () => {
+      const mockValues = jest.fn().mockRejectedValue(new Error('Database error'));
+      mockInsert.mockReturnValue({ values: mockValues });
+
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+      await createAuditLog({
+        userId: 'user-789',
+        action: 'LOGIN',
+      });
+
+      expect(consoleSpy).toHaveBeenCalled();
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getActionLabel', () => {
+    it('should return correct label for known actions', () => {
+      expect(getActionLabel('login')).toBe('登录');
+      expect(getActionLabel('logout')).toBe('登出');
+      expect(getActionLabel('create')).toBe('创建');
+      expect(getActionLabel('update')).toBe('更新');
+      expect(getActionLabel('delete')).toBe('删除');
+      expect(getActionLabel('publish')).toBe('发布');
+      expect(getActionLabel('upload')).toBe('上传');
+    });
+  });
+
+  describe('getActionColor', () => {
+    it('should return correct color for known actions', () => {
+      expect(getActionColor('login')).toBe('bg-cyan-100 text-cyan-800');
+      expect(getActionColor('logout')).toBe('bg-gray-100 text-gray-800');
+      expect(getActionColor('create')).toBe('bg-green-100 text-green-800');
+      expect(getActionColor('update')).toBe('bg-blue-100 text-blue-800');
+      expect(getActionColor('delete')).toBe('bg-red-100 text-red-800');
+      expect(getActionColor('publish')).toBe('bg-purple-100 text-purple-800');
+      expect(getActionColor('upload')).toBe('bg-yellow-100 text-yellow-800');
+    });
+  });
+});

src/lib/auth.test.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect } from '@jest/globals';
+
+jest.mock('next-auth', () => {
+  const mockNextAuth = jest.fn(() => ({
+    handlers: {
+      authOptions: {
+        providers: [
+          {
+            name: '邮箱密码',
+            credentials: {
+              email: { label: '邮箱', type: 'email' },
+              password: { label: '密码', type: 'password' },
+            },
+          },
+        ],
+        callbacks: {
+          jwt: jest.fn(),
+          session: jest.fn(),
+        },
+        pages: {
+          signIn: '/admin/login',
+          error: '/admin/login',
+        },
+        session: {
+          strategy: 'jwt',
+        },
+      },
+    },
+    signIn: jest.fn(),
+    signOut: jest.fn(),
+    auth: jest.fn(),
+  }));
+  
+  return {
+    __esModule: true,
+    default: mockNextAuth,
+  };
+});
+
+jest.mock('next-auth/providers/credentials', () => {
+  return jest.fn(() => ({
+    name: '邮箱密码',
+    credentials: {
+      email: { label: '邮箱', type: 'email' },
+      password: { label: '密码', type: 'password' },
+    },
+  }));
+});
+
+jest.mock('@/db', () => ({
+  db: {
+    select: jest.fn().mockReturnThis(),
+    from: jest.fn().mockReturnThis(),
+    where: jest.fn().mockReturnThis(),
+    limit: jest.fn(),
+  },
+}));
+
+jest.mock('bcryptjs', () => ({
+  default: {
+    compare: jest.fn(),
+  },
+}));
+
+describe('Auth Module Configuration', () => {
+  describe('Provider Configuration', () => {
+    it('should export handlers', async () => {
+      const auth = await import('./auth');
+      expect(auth).toHaveProperty('handlers');
+    });
+
+    it('should export signIn function', async () => {
+      const auth = await import('./auth');
+      expect(auth).toHaveProperty('signIn');
+      expect(typeof auth.signIn).toBe('function');
+    });
+
+    it('should export signOut function', async () => {
+      const auth = await import('./auth');
+      expect(auth).toHaveProperty('signOut');
+      expect(typeof auth.signOut).toBe('function');
+    });
+
+    it('should export auth function', async () => {
+      const auth = await import('./auth');
+      expect(auth).toHaveProperty('auth');
+      expect(typeof auth.auth).toBe('function');
+    });
+  });
+
+  describe('Auth Options', () => {
+    it('should have authOptions in handlers', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers).toHaveProperty('authOptions');
+    });
+
+    it('should have providers configured', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions).toHaveProperty('providers');
+      expect(Array.isArray(handlers.authOptions.providers)).toBe(true);
+    });
+
+    it('should have correct provider name', async () => {
+      const { handlers } = await import('./auth');
+      const provider = handlers.authOptions.providers[0];
+      expect(provider.name).toBe('邮箱密码');
+    });
+
+    it('should have email credential', async () => {
+      const { handlers } = await import('./auth');
+      const provider = handlers.authOptions.providers[0];
+      expect(provider.credentials).toHaveProperty('email');
+    });
+
+    it('should have password credential', async () => {
+      const { handlers } = await import('./auth');
+      const provider = handlers.authOptions.providers[0];
+      expect(provider.credentials).toHaveProperty('password');
+    });
+  });
+
+  describe('Page Configuration', () => {
+    it('should have correct sign-in page', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions.pages.signIn).toBe('/admin/login');
+    });
+
+    it('should have correct error page', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions.pages.error).toBe('/admin/login');
+    });
+  });
+
+  describe('Session Configuration', () => {
+    it('should use JWT session strategy', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions.session.strategy).toBe('jwt');
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('should have jwt callback', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions.callbacks).toHaveProperty('jwt');
+      expect(typeof handlers.authOptions.callbacks.jwt).toBe('function');
+    });
+
+    it('should have session callback', async () => {
+      const { handlers } = await import('./auth');
+      expect(handlers.authOptions.callbacks).toHaveProperty('session');
+      expect(typeof handlers.authOptions.callbacks.session).toBe('function');
+    });
+  });
+});

src/lib/auth/check-permission.test.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+import { checkPermission, requirePermission } from './check-permission';
+
+jest.mock('../auth', () => ({
+  auth: jest.fn(),
+}));
+
+import { auth } from '../auth';
+
+const mockAuth = auth as jest.MockedFunction<typeof auth>;
+
+describe('check-permission', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('checkPermission', () => {
+    it('should return allowed: false when no session', async () => {
+      mockAuth.mockResolvedValue(null as any);
+      
+      const result = await checkPermission('content', 'read');
+      
+      expect(result).toEqual({ allowed: false });
+    });
+
+    it('should return allowed: false when no user', async () => {
+      mockAuth.mockResolvedValue({} as any);
+      
+      const result = await checkPermission('content', 'read');
+      
+      expect(result).toEqual({ allowed: false });
+    });
+
+    it('should return allowed: true for admin with valid permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-1',
+          role: 'admin',
+        },
+      } as any);
+      
+      const result = await checkPermission('content', 'create');
+      
+      expect(result.allowed).toBe(true);
+      expect(result.userId).toBe('user-1');
+      expect(result.role).toBe('admin');
+    });
+
+    it('should return allowed: false for viewer with invalid permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-2',
+          role: 'viewer',
+        },
+      } as any);
+      
+      const result = await checkPermission('content', 'create');
+      
+      expect(result.allowed).toBe(false);
+      expect(result.userId).toBe('user-2');
+      expect(result.role).toBe('viewer');
+    });
+
+    it('should return allowed: true for editor with valid permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-3',
+          role: 'editor',
+        },
+      } as any);
+      
+      const result = await checkPermission('content', 'update');
+      
+      expect(result.allowed).toBe(true);
+      expect(result.userId).toBe('user-3');
+      expect(result.role).toBe('editor');
+    });
+
+    it('should return allowed: false for editor with delete permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-4',
+          role: 'editor',
+        },
+      } as any);
+      
+      const result = await checkPermission('content', 'delete');
+      
+      expect(result.allowed).toBe(false);
+    });
+
+    it('should handle different resources', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-5',
+          role: 'admin',
+        },
+      } as any);
+      
+      const result = await checkPermission('users', 'delete');
+      
+      expect(result.allowed).toBe(true);
+    });
+  });
+
+  describe('requirePermission', () => {
+    it('should throw error when no permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-6',
+          role: 'viewer',
+        },
+      } as any);
+      
+      await expect(requirePermission('content', 'create')).rejects.toThrow('无权限执行此操作');
+    });
+
+    it('should return userId and role when has permission', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-7',
+          role: 'admin',
+        },
+      } as any);
+      
+      const result = await requirePermission('content', 'create');
+      
+      expect(result).toEqual({
+        userId: 'user-7',
+        role: 'admin',
+      });
+    });
+
+    it('should throw error when no session', async () => {
+      mockAuth.mockResolvedValue(null as any);
+      
+      await expect(requirePermission('content', 'read')).rejects.toThrow('无权限执行此操作');
+    });
+
+    it('should allow editor to publish content', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-8',
+          role: 'editor',
+        },
+      } as any);
+      
+      const result = await requirePermission('content', 'publish');
+      
+      expect(result.userId).toBe('user-8');
+      expect(result.role).toBe('editor');
+    });
+
+    it('should deny viewer to update config', async () => {
+      mockAuth.mockResolvedValue({
+        user: {
+          id: 'user-9',
+          role: 'viewer',
+        },
+      } as any);
+      
+      await expect(requirePermission('config', 'update')).rejects.toThrow('无权限执行此操作');
+    });
+  });
+});

src/lib/color-contrast.test.ts

@@ -0,0 +1,127 @@
+import {
+  calculateContrastRatio,
+  meetsWCAGStandard,
+} from './color-contrast';
+
+describe('color-contrast', () => {
+  describe('calculateContrastRatio', () => {
+    it('should calculate contrast ratio for black on white', () => {
+      const ratio = calculateContrastRatio('#000000', '#FFFFFF');
+      expect(ratio).toBeCloseTo(21, 0);
+    });
+
+    it('should calculate contrast ratio for white on black', () => {
+      const ratio = calculateContrastRatio('#FFFFFF', '#000000');
+      expect(ratio).toBeCloseTo(21, 0);
+    });
+
+    it('should calculate contrast ratio for gray on white', () => {
+      const ratio = calculateContrastRatio('#666666', '#FFFFFF');
+      expect(ratio).toBeGreaterThan(4);
+      expect(ratio).toBeLessThan(6);
+    });
+
+    it('should calculate contrast ratio for dark blue on white', () => {
+      const ratio = calculateContrastRatio('#00008B', '#FFFFFF');
+      expect(ratio).toBeGreaterThan(8);
+    });
+
+    it('should calculate contrast ratio for same colors', () => {
+      const ratio = calculateContrastRatio('#FF0000', '#FF0000');
+      expect(ratio).toBe(1);
+    });
+
+    it('should handle lowercase hex', () => {
+      const ratio1 = calculateContrastRatio('#000000', '#FFFFFF');
+      const ratio2 = calculateContrastRatio('#000000', '#ffffff');
+      expect(ratio1).toBe(ratio2);
+    });
+  });
+
+  describe('meetsWCAGStandard', () => {
+    describe('AA level - normal text', () => {
+      it('should pass for black on white', () => {
+        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA', 'normal');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(4.5);
+      });
+
+      it('should fail for light gray on white', () => {
+        const result = meetsWCAGStandard('#CCCCCC', '#FFFFFF', 'AA', 'normal');
+        expect(result.passes).toBe(false);
+        expect(result.requiredRatio).toBe(4.5);
+      });
+
+      it('should pass for dark blue on white', () => {
+        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AA', 'normal');
+        expect(result.passes).toBe(true);
+      });
+    });
+
+    describe('AA level - large text', () => {
+      it('should pass for gray on white', () => {
+        const result = meetsWCAGStandard('#666666', '#FFFFFF', 'AA', 'large');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(3);
+      });
+
+      it('should fail for light gray on white', () => {
+        const result = meetsWCAGStandard('#CCCCCC', '#FFFFFF', 'AA', 'large');
+        expect(result.passes).toBe(false);
+        expect(result.requiredRatio).toBe(3);
+      });
+    });
+
+    describe('AAA level - normal text', () => {
+      it('should pass for black on white', () => {
+        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AAA', 'normal');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(7);
+      });
+
+      it('should pass for dark blue on white', () => {
+        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AAA', 'normal');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(7);
+      });
+    });
+
+    describe('AAA level - large text', () => {
+      it('should pass for dark blue on white', () => {
+        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AAA', 'large');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(4.5);
+      });
+
+      it('should pass for gray on white', () => {
+        const result = meetsWCAGStandard('#666666', '#FFFFFF', 'AAA', 'large');
+        expect(result.passes).toBe(true);
+        expect(result.requiredRatio).toBe(4.5);
+      });
+    });
+
+    describe('default parameters', () => {
+      it('should default to AA level', () => {
+        const result = meetsWCAGStandard('#000000', '#FFFFFF');
+        expect(result.requiredRatio).toBe(4.5);
+      });
+
+      it('should default to normal text size', () => {
+        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA');
+        expect(result.requiredRatio).toBe(4.5);
+      });
+    });
+
+    describe('result structure', () => {
+      it('should return result with all required properties', () => {
+        const result = meetsWCAGStandard('#000000', '#FFFFFF');
+        expect(result).toHaveProperty('passes');
+        expect(result).toHaveProperty('ratio');
+        expect(result).toHaveProperty('requiredRatio');
+        expect(typeof result.passes).toBe('boolean');
+        expect(typeof result.ratio).toBe('number');
+        expect(typeof result.requiredRatio).toBe('number');
+      });
+    });
+  });
+});

src/lib/colors.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect } from '@jest/globals';
+import { brandColors, colorValues, gradients } from './colors';
+
+describe('colors', () => {
+  describe('brandColors', () => {
+    it('should have primary color palette', () => {
+      expect(brandColors.primary).toBeDefined();
+      expect(brandColors.primary[900]).toBe('#0A0A0A');
+      expect(brandColors.primary[50]).toBe('#F5F5F5');
+    });
+
+    it('should have brand color palette', () => {
+      expect(brandColors.brand).toBeDefined();
+      expect(brandColors.brand[600]).toBe('#C41E3A');
+      expect(brandColors.brand[100]).toBe('#FEF2F4');
+    });
+
+    it('should have neutral color palette', () => {
+      expect(brandColors.neutral).toBeDefined();
+      expect(brandColors.neutral[900]).toBe('#1C1C1C');
+      expect(brandColors.neutral[50]).toBe('#FFFBF5');
+    });
+
+    it('should have success color palette', () => {
+      expect(brandColors.success).toBeDefined();
+      expect(brandColors.success[600]).toBe('#16A34A');
+      expect(brandColors.success[100]).toBe('#F0FDF4');
+    });
+
+    it('should have warning color palette', () => {
+      expect(brandColors.warning).toBeDefined();
+      expect(brandColors.warning[600]).toBe('#D97706');
+      expect(brandColors.warning[100]).toBe('#FFFBEB');
+    });
+
+    it('should have info color palette', () => {
+      expect(brandColors.info).toBeDefined();
+      expect(brandColors.info[600]).toBe('#5C5C5C');
+      expect(brandColors.info[100]).toBe('#F5F5F5');
+    });
+
+    it('should have error color palette', () => {
+      expect(brandColors.error).toBeDefined();
+      expect(brandColors.error[600]).toBe('#C41E3A');
+      expect(brandColors.error[100]).toBe('#FEF2F4');
+    });
+
+    it('should have valid hex color format', () => {
+      const hexPattern = /^#[0-9A-Fa-f]{6}$/;
+      
+      Object.values(brandColors.primary).forEach(color => {
+        expect(color).toMatch(hexPattern);
+      });
+      
+      Object.values(brandColors.brand).forEach(color => {
+        expect(color).toMatch(hexPattern);
+      });
+    });
+  });
+
+  describe('colorValues', () => {
+    it('should have primary colors', () => {
+      expect(colorValues.primary).toBe('#1C1C1C');
+      expect(colorValues.primaryHover).toBe('#0A0A0A');
+      expect(colorValues.primaryLight).toBe('#3D3D3D');
+      expect(colorValues.primaryLighter).toBe('#F5F5F5');
+    });
+
+    it('should have brand colors', () => {
+      expect(colorValues.brand).toBe('#C41E3A');
+      expect(colorValues.brandHover).toBe('#A01830');
+      expect(colorValues.brandLight).toBe('#E04A68');
+      expect(colorValues.brandBg).toBe('#FEF2F4');
+    });
+
+    it('should have text colors', () => {
+      expect(colorValues.textPrimary).toBe('#1C1C1C');
+      expect(colorValues.textSecondary).toBe('#3D3D3D');
+      expect(colorValues.textTertiary).toBe('#5C5C5C');
+      expect(colorValues.textMuted).toBe('#8C8C8C');
+    });
+
+    it('should have background colors', () => {
+      expect(colorValues.bgPrimary).toBe('#FAFAFA');
+      expect(colorValues.bgSecondary).toBe('#FFFBF5');
+      expect(colorValues.bgTertiary).toBe('#F5F5F5');
+      expect(colorValues.bgHover).toBe('#EFEFEF');
+    });
+
+    it('should have border colors', () => {
+      expect(colorValues.border).toBe('#E5E5E5');
+      expect(colorValues.borderSecondary).toBe('#D4D4D4');
+      expect(colorValues.borderAccent).toBe('#1C1C1C');
+    });
+
+    it('should have link colors', () => {
+      expect(colorValues.link).toBe('#1C1C1C');
+      expect(colorValues.linkHover).toBe('#C41E3A');
+    });
+
+    it('should have status colors', () => {
+      expect(colorValues.success).toBe('#16A34A');
+      expect(colorValues.successBg).toBe('#F0FDF4');
+      expect(colorValues.warning).toBe('#D97706');
+      expect(colorValues.warningBg).toBe('#FFFBEB');
+      expect(colorValues.info).toBe('#5C5C5C');
+      expect(colorValues.infoBg).toBe('#F5F5F5');
+      expect(colorValues.error).toBe('#C41E3A');
+      expect(colorValues.errorBg).toBe('#FEF2F4');
+    });
+
+    it('should have valid hex color format', () => {
+      const hexPattern = /^#[0-9A-Fa-f]{6}$/;
+      
+      Object.values(colorValues).forEach(color => {
+        expect(color).toMatch(hexPattern);
+      });
+    });
+  });
+
+  describe('gradients', () => {
+    it('should have primary gradient', () => {
+      expect(gradients.primary).toBeDefined();
+      expect(gradients.primary).toContain('linear-gradient');
+      expect(gradients.primary).toContain('135deg');
+    });
+
+    it('should have hero gradient', () => {
+      expect(gradients.hero).toBeDefined();
+      expect(gradients.hero).toContain('linear-gradient');
+      expect(gradients.hero).toContain('180deg');
+    });
+
+    it('should have brand gradient', () => {
+      expect(gradients.brand).toBeDefined();
+      expect(gradients.brand).toContain('linear-gradient');
+      expect(gradients.brand).toContain('135deg');
+    });
+
+    it('should have subtle gradient', () => {
+      expect(gradients.subtle).toBeDefined();
+      expect(gradients.subtle).toContain('linear-gradient');
+      expect(gradients.subtle).toContain('180deg');
+    });
+
+    it('should have card gradient', () => {
+      expect(gradients.card).toBeDefined();
+      expect(gradients.card).toContain('linear-gradient');
+      expect(gradients.card).toContain('180deg');
+    });
+
+    it('should have cta gradient', () => {
+      expect(gradients.cta).toBeDefined();
+      expect(gradients.cta).toContain('linear-gradient');
+      expect(gradients.cta).toContain('135deg');
+    });
+
+    it('should have valid gradient format', () => {
+      const gradientPattern = /^linear-gradient\(/;
+      
+      Object.values(gradients).forEach(gradient => {
+        expect(gradient).toMatch(gradientPattern);
+      });
+    });
+  });
+
+  describe('Type Exports', () => {
+    it('should export BrandColor type', () => {
+      const color: typeof brandColors = brandColors;
+      expect(color).toBeDefined();
+    });
+
+    it('should export ColorValue type', () => {
+      const value: typeof colorValues = colorValues;
+      expect(value).toBeDefined();
+    });
+
+    it('should export Gradient type', () => {
+      const gradient: typeof gradients = gradients;
+      expect(gradient).toBeDefined();
+    });
+  });
+});

src/lib/constants.test.ts

@@ -0,0 +1,242 @@
+import { describe, it, expect } from '@jest/globals';
+import {
+  COMPANY_INFO,
+  NAVIGATION,
+  STATS,
+  SERVICES,
+  PRODUCTS,
+  NEWS,
+} from './constants';
+
+describe('Constants', () => {
+  describe('COMPANY_INFO', () => {
+    it('should have company name', () => {
+      expect(COMPANY_INFO.name).toBe('四川睿新致远科技有限公司');
+    });
+
+    it('should have short name', () => {
+      expect(COMPANY_INFO.shortName).toBe('睿新致遠');
+    });
+
+    it('should have slogan', () => {
+      expect(COMPANY_INFO.slogan).toBe('智连未来，成长伙伴');
+    });
+
+    it('should have contact information', () => {
+      expect(COMPANY_INFO.email).toBeDefined();
+      expect(COMPANY_INFO.phone).toBeDefined();
+      expect(COMPANY_INFO.address).toBeDefined();
+    });
+
+    it('should have legal information', () => {
+      expect(COMPANY_INFO.icp).toBeDefined();
+      expect(COMPANY_INFO.police).toBeDefined();
+    });
+  });
+
+  describe('NAVIGATION', () => {
+    it('should be an array', () => {
+      expect(Array.isArray(NAVIGATION)).toBe(true);
+    });
+
+    it('should have navigation items', () => {
+      expect(NAVIGATION.length).toBeGreaterThan(0);
+    });
+
+    it('should have required properties', () => {
+      NAVIGATION.forEach(item => {
+        expect(item).toHaveProperty('id');
+        expect(item).toHaveProperty('label');
+        expect(item).toHaveProperty('href');
+      });
+    });
+
+    it('should have home navigation', () => {
+      const homeNav = NAVIGATION.find(item => item.id === 'home');
+      expect(homeNav).toBeDefined();
+      expect(homeNav?.label).toBe('首页');
+    });
+
+    it('should have contact navigation', () => {
+      const contactNav = NAVIGATION.find(item => item.id === 'contact');
+      expect(contactNav).toBeDefined();
+      expect(contactNav?.href).toBe('/contact');
+    });
+  });
+
+  describe('STATS', () => {
+    it('should be an array', () => {
+      expect(Array.isArray(STATS)).toBe(true);
+    });
+
+    it('should have stat items', () => {
+      expect(STATS.length).toBeGreaterThan(0);
+    });
+
+    it('should have required properties', () => {
+      STATS.forEach(stat => {
+        expect(stat).toHaveProperty('value');
+        expect(stat).toHaveProperty('label');
+      });
+    });
+
+    it('should have numeric values', () => {
+      STATS.forEach(stat => {
+        expect(stat.value).toMatch(/\d+/);
+      });
+    });
+  });
+
+  describe('SERVICES', () => {
+    it('should be an array', () => {
+      expect(Array.isArray(SERVICES)).toBe(true);
+    });
+
+    it('should have service items', () => {
+      expect(SERVICES.length).toBeGreaterThan(0);
+    });
+
+    it('should have required properties', () => {
+      SERVICES.forEach(service => {
+        expect(service).toHaveProperty('id');
+        expect(service).toHaveProperty('title');
+        expect(service).toHaveProperty('description');
+        expect(service).toHaveProperty('icon');
+        expect(service).toHaveProperty('features');
+        expect(service).toHaveProperty('benefits');
+        expect(service).toHaveProperty('process');
+      });
+    });
+
+    it('should have software service', () => {
+      const softwareService = SERVICES.find(s => s.id === 'software');
+      expect(softwareService).toBeDefined();
+      expect(softwareService?.title).toBe('软件开发');
+    });
+
+    it('should have cloud service', () => {
+      const cloudService = SERVICES.find(s => s.id === 'cloud');
+      expect(cloudService).toBeDefined();
+      expect(cloudService?.title).toBe('云服务');
+    });
+
+    it('should have data service', () => {
+      const dataService = SERVICES.find(s => s.id === 'data');
+      expect(dataService).toBeDefined();
+      expect(dataService?.title).toBe('数据分析');
+    });
+
+    it('should have security service', () => {
+      const securityService = SERVICES.find(s => s.id === 'security');
+      expect(securityService).toBeDefined();
+      expect(securityService?.title).toBe('信息安全');
+    });
+
+    it('should have features as array', () => {
+      SERVICES.forEach(service => {
+        expect(Array.isArray(service.features)).toBe(true);
+        expect(service.features.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should have benefits as array', () => {
+      SERVICES.forEach(service => {
+        expect(Array.isArray(service.benefits)).toBe(true);
+        expect(service.benefits.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('PRODUCTS', () => {
+    it('should be an array', () => {
+      expect(Array.isArray(PRODUCTS)).toBe(true);
+    });
+
+    it('should have product items', () => {
+      expect(PRODUCTS.length).toBeGreaterThan(0);
+    });
+
+    it('should have required properties', () => {
+      PRODUCTS.forEach(product => {
+        expect(product).toHaveProperty('id');
+        expect(product).toHaveProperty('title');
+        expect(product).toHaveProperty('description');
+        expect(product).toHaveProperty('category');
+        expect(product).toHaveProperty('features');
+        expect(product).toHaveProperty('benefits');
+        expect(product).toHaveProperty('pricing');
+      });
+    });
+
+    it('should have ERP product', () => {
+      const erpProduct = PRODUCTS.find(p => p.id === 'erp');
+      expect(erpProduct).toBeDefined();
+      expect(erpProduct?.title).toContain('ERP');
+    });
+
+    it('should have CRM product', () => {
+      const crmProduct = PRODUCTS.find(p => p.id === 'crm');
+      expect(crmProduct).toBeDefined();
+      expect(crmProduct?.title).toContain('客户关系管理');
+    });
+
+    it('should have CMS product', () => {
+      const cmsProduct = PRODUCTS.find(p => p.id === 'cms');
+      expect(cmsProduct).toBeDefined();
+      expect(cmsProduct?.title).toContain('内容管理');
+    });
+
+    it('should have BI product', () => {
+      const biProduct = PRODUCTS.find(p => p.id === 'bi');
+      expect(biProduct).toBeDefined();
+      expect(biProduct?.title).toContain('商业智能');
+    });
+
+    it('should have pricing object', () => {
+      PRODUCTS.forEach(product => {
+        expect(product.pricing).toHaveProperty('base');
+        expect(product.pricing).toHaveProperty('standard');
+        expect(product.pricing).toHaveProperty('enterprise');
+      });
+    });
+  });
+
+  describe('NEWS', () => {
+    it('should be an array', () => {
+      expect(Array.isArray(NEWS)).toBe(true);
+    });
+
+    it('should have news items', () => {
+      expect(NEWS.length).toBeGreaterThan(0);
+    });
+
+    it('should have required properties', () => {
+      NEWS.forEach(news => {
+        expect(news).toHaveProperty('id');
+        expect(news).toHaveProperty('title');
+        expect(news).toHaveProperty('excerpt');
+        expect(news).toHaveProperty('date');
+        expect(news).toHaveProperty('category');
+        expect(news).toHaveProperty('content');
+      });
+    });
+
+    it('should have valid categories', () => {
+      const validCategories = ['公司新闻', '产品发布', '合作动态', '行业资讯'];
+      NEWS.forEach(news => {
+        expect(validCategories).toContain(news.category);
+      });
+    });
+
+    it('should have valid date format', () => {
+      NEWS.forEach(news => {
+        expect(news.date).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+      });
+    });
+
+    it('should have founding news', () => {
+      const foundingNews = NEWS.find(n => n.title.includes('成立'));
+      expect(foundingNews).toBeDefined();
+    });
+  });
+});

src/lib/csrf.test.ts

@@ -0,0 +1,66 @@
+import {
+  generateCSRFToken,
+  validateCSRFToken,
+  getCSRFTokenFromStorage,
+  setCSRFTokenToStorage,
+} from './csrf';
+
+describe('csrf', () => {
+  describe('generateCSRFToken', () => {
+    it('should generate a token of correct length', () => {
+      const token = generateCSRFToken();
+      expect(token).toHaveLength(64);
+    });
+
+    it('should generate unique tokens', () => {
+      const token1 = generateCSRFToken();
+      const token2 = generateCSRFToken();
+      expect(token1).not.toBe(token2);
+    });
+
+    it('should only contain hexadecimal characters', () => {
+      const token = generateCSRFToken();
+      expect(token).toMatch(/^[0-9a-f]{64}$/);
+    });
+  });
+
+  describe('validateCSRFToken', () => {
+    it('should return true for matching tokens', () => {
+      const token = generateCSRFToken();
+      expect(validateCSRFToken(token, token)).toBe(true);
+    });
+
+    it('should return false for mismatched tokens', () => {
+      const token1 = generateCSRFToken();
+      const token2 = generateCSRFToken();
+      expect(validateCSRFToken(token1, token2)).toBe(false);
+    });
+
+    it('should return false for empty tokens', () => {
+      expect(validateCSRFToken('', '')).toBe(false);
+      expect(validateCSRFToken('token', '')).toBe(false);
+      expect(validateCSRFToken('', 'token')).toBe(false);
+    });
+  });
+
+  describe('getCSRFTokenFromStorage', () => {
+    it('should return token from sessionStorage', () => {
+      sessionStorage.setItem('csrf_token', 'test-token');
+      const token = getCSRFTokenFromStorage();
+      expect(token).toBe('test-token');
+    });
+
+    it('should return null when token not found', () => {
+      sessionStorage.removeItem('csrf_token');
+      const token = getCSRFTokenFromStorage();
+      expect(token).toBeNull();
+    });
+  });
+
+  describe('setCSRFTokenToStorage', () => {
+    it('should set token in sessionStorage', () => {
+      setCSRFTokenToStorage('test-token');
+      expect(sessionStorage.getItem('csrf_token')).toBe('test-token');
+    });
+  });
+});

src/lib/email-templates.test.ts

@@ -0,0 +1,379 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
+
+jest.mock('./constants', () => ({
+  COMPANY_INFO: {
+    name: '诺瓦隆科技',
+    email: 'contact@novalon.cn',
+    phone: '400-123-4567',
+    address: '北京市朝阳区科技园区',
+  },
+}));
+
+describe('Email Templates', () => {
+  const mockContactData = {
+    name: '张三',
+    phone: '13800138000',
+    email: 'zhangsan@example.com',
+    message: '这是一条测试留言',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('generateNotificationEmail', () => {
+    it('should generate valid HTML email', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('<!DOCTYPE html>');
+      expect(email).toContain('<html>');
+      expect(email).toContain('</html>');
+    });
+
+    it('should include customer name', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('张三');
+      expect(email).toContain('客户姓名');
+    });
+
+    it('should include customer phone', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('13800138000');
+      expect(email).toContain('联系电话');
+    });
+
+    it('should include customer email', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('zhangsan@example.com');
+      expect(email).toContain('电子邮箱');
+    });
+
+    it('should include message content', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('这是一条测试留言');
+      expect(email).toContain('留言内容');
+    });
+
+    it('should include company name', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('诺瓦隆科技');
+    });
+
+    it('should include submit time', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('提交时间');
+    });
+
+    it('should include mailto link', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('mailto:zhangsan@example.com');
+      expect(email).toContain('快速回复');
+    });
+
+    it('should include company address in footer', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('北京市朝阳区科技园区');
+    });
+
+    it('should have proper email title', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('官网留言通知');
+    });
+
+    it('should include responsive meta tag', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('viewport');
+      expect(email).toContain('width=device-width');
+    });
+
+    it('should include UTF-8 charset', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('charset="utf-8"');
+    });
+
+    it('should handle long messages', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const longMessage = '这是一条很长的留言'.repeat(100);
+      const data = { ...mockContactData, message: longMessage };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain(longMessage);
+    });
+
+    it('should handle special characters in name', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, name: '张三 <script>alert("xss")</script>' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('张三 <script>alert("xss")</script>');
+    });
+
+    it('should handle special characters in message', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, message: '测试 & < > " \'' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('测试 & < > " \'');
+    });
+  });
+
+  describe('generateConfirmationEmail', () => {
+    it('should generate valid HTML email', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('<!DOCTYPE html>');
+      expect(email).toContain('<html>');
+      expect(email).toContain('</html>');
+    });
+
+    it('should include customer name', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('张三');
+      expect(email).toContain('尊敬的');
+    });
+
+    it('should include message content', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('这是一条测试留言');
+      expect(email).toContain('您的留言内容');
+    });
+
+    it('should include company name', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('诺瓦隆科技');
+    });
+
+    it('should include company contact information', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('contact@novalon.cn');
+      expect(email).toContain('400-123-4567');
+      expect(email).toContain('北京市朝阳区科技园区');
+    });
+
+    it('should include expected response time', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('预计回复时间');
+      expect(email).toContain('2小时内');
+    });
+
+    it('should include working hours', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('工作日');
+      expect(email).toContain('9:00 - 18:00');
+    });
+
+    it('should have proper email title', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('感谢您的留言');
+    });
+
+    it('should include success icon', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('🎉');
+    });
+
+    it('should include current year in footer', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      const currentYear = new Date().getFullYear().toString();
+      
+      expect(email).toContain(`© ${currentYear}`);
+    });
+
+    it('should include responsive meta tag', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('viewport');
+      expect(email).toContain('width=device-width');
+    });
+
+    it('should include UTF-8 charset', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('charset="utf-8"');
+    });
+
+    it('should handle long messages', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const longMessage = '这是一条很长的留言'.repeat(100);
+      const data = { ...mockContactData, message: longMessage };
+      const email = generateConfirmationEmail(data);
+      
+      expect(email).toContain(longMessage);
+    });
+
+    it('should handle special characters in name', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, name: '张三 <script>alert("xss")</script>' };
+      const email = generateConfirmationEmail(data);
+      
+      expect(email).toContain('张三 <script>alert("xss")</script>');
+    });
+  });
+
+  describe('Email Template Structure', () => {
+    it('should have consistent styling in notification email', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('style');
+      expect(email).toContain('font-family');
+      expect(email).toContain('max-width: 600px');
+    });
+
+    it('should have consistent styling in confirmation email', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('style');
+      expect(email).toContain('font-family');
+      expect(email).toContain('max-width: 600px');
+    });
+
+    it('should use brand colors in notification email', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('#C41E3A');
+      expect(email).toContain('#1C1C1C');
+    });
+
+    it('should use brand colors in confirmation email', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('#C41E3A');
+      expect(email).toContain('#1C1C1C');
+    });
+
+    it('should have proper container structure in notification email', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const email = generateNotificationEmail(mockContactData);
+      
+      expect(email).toContain('class="container"');
+      expect(email).toContain('class="header"');
+      expect(email).toContain('class="content"');
+      expect(email).toContain('class="footer"');
+    });
+
+    it('should have proper container structure in confirmation email', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const email = generateConfirmationEmail(mockContactData);
+      
+      expect(email).toContain('class="container"');
+      expect(email).toContain('class="header"');
+      expect(email).toContain('class="content"');
+      expect(email).toContain('class="footer"');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty message', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, message: '' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('留言内容');
+    });
+
+    it('should handle empty name', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, name: '' };
+      const email = generateConfirmationEmail(data);
+      
+      expect(email).toContain('尊敬的');
+    });
+
+    it('should handle email with special characters', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, email: 'test+special@example.com' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('test+special@example.com');
+    });
+
+    it('should handle phone number with spaces', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, phone: '138 0013 8000' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('138 0013 8000');
+    });
+
+    it('should handle unicode characters in message', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      const data = { ...mockContactData, message: '测试 emoji: 😀 🎉 📧' };
+      const email = generateNotificationEmail(data);
+      
+      expect(email).toContain('测试 emoji: 😀 🎉 📧');
+    });
+  });
+
+  describe('Performance Tests', () => {
+    it('should generate notification email quickly', async () => {
+      const { generateNotificationEmail } = await import('./email-templates');
+      
+      const start = performance.now();
+      for (let i = 0; i < 100; i++) {
+        generateNotificationEmail(mockContactData);
+      }
+      const end = performance.now();
+      
+      expect(end - start).toBeLessThan(1000);
+    });
+
+    it('should generate confirmation email quickly', async () => {
+      const { generateConfirmationEmail } = await import('./email-templates');
+      
+      const start = performance.now();
+      for (let i = 0; i < 100; i++) {
+        generateConfirmationEmail(mockContactData);
+      }
+      const end = performance.now();
+      
+      expect(end - start).toBeLessThan(1000);
+    });
+  });
+});

src/lib/gradients.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect } from '@jest/globals';
+import {
+  getGradientStyle,
+  getGlowStyle,
+  getBorderGradientStyle,
+  getTextGradientStyle,
+  getHeroGradientStyle,
+  getCTAGradientStyle,
+} from './gradients';
+
+describe('gradients', () => {
+  describe('getGradientStyle', () => {
+    it('should return primary gradient style', () => {
+      const style = getGradientStyle('primary');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should return hero gradient style', () => {
+      const style = getGradientStyle('hero');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should return brand gradient style', () => {
+      const style = getGradientStyle('brand');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should return subtle gradient style', () => {
+      const style = getGradientStyle('subtle');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should return card gradient style', () => {
+      const style = getGradientStyle('card');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should return cta gradient style', () => {
+      const style = getGradientStyle('cta');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+  });
+
+  describe('getGlowStyle', () => {
+    it('should return primary glow style with default opacity', () => {
+      const style = getGlowStyle('primary');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('radial-gradient');
+      expect(style.background).toContain('0, 94, 184');
+    });
+
+    it('should return brand glow style with default opacity', () => {
+      const style = getGlowStyle('brand');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('radial-gradient');
+      expect(style.background).toContain('196, 30, 58');
+    });
+
+    it('should return glow style with custom opacity', () => {
+      const style = getGlowStyle('primary', 0.5);
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('0.5');
+    });
+
+    it('should return glow style with zero opacity', () => {
+      const style = getGlowStyle('brand', 0);
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('0)');
+    });
+
+    it('should return glow style with full opacity', () => {
+      const style = getGlowStyle('primary', 1);
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('1)');
+    });
+  });
+
+  describe('getBorderGradientStyle', () => {
+    it('should return border gradient style', () => {
+      const style = getBorderGradientStyle();
+      expect(style).toHaveProperty('borderImage');
+      expect(style.borderImage).toContain('linear-gradient');
+    });
+  });
+
+  describe('getTextGradientStyle', () => {
+    it('should return primary text gradient style', () => {
+      const style = getTextGradientStyle('primary');
+      expect(style).toHaveProperty('background');
+      expect(style).toHaveProperty('WebkitBackgroundClip');
+      expect(style).toHaveProperty('WebkitTextFillColor');
+      expect(style).toHaveProperty('backgroundClip');
+      expect(style.WebkitBackgroundClip).toBe('text');
+      expect(style.WebkitTextFillColor).toBe('transparent');
+    });
+
+    it('should return brand text gradient style', () => {
+      const style = getTextGradientStyle('brand');
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+    });
+
+    it('should default to primary gradient', () => {
+      const style = getTextGradientStyle();
+      expect(style).toHaveProperty('background');
+    });
+  });
+
+  describe('getHeroGradientStyle', () => {
+    it('should return hero gradient style', () => {
+      const style = getHeroGradientStyle();
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+      expect(style.background).toContain('180deg');
+    });
+  });
+
+  describe('getCTAGradientStyle', () => {
+    it('should return CTA gradient style', () => {
+      const style = getCTAGradientStyle();
+      expect(style).toHaveProperty('background');
+      expect(style.background).toContain('linear-gradient');
+      expect(style.background).toContain('135deg');
+    });
+  });
+});

src/lib/integration.test.ts

@@ -0,0 +1,169 @@
+import { sanitizeInput, sanitizeHTML, sanitizeURL } from './sanitize';
+import { isAllowedType, validateFileSignature, isDangerousFile } from './upload';
+import { generateCSRFToken, validateCSRFToken } from './csrf';
+import { calculateContrastRatio, meetsWCAGStandard } from './color-contrast';
+import { PerformanceMonitor } from './monitoring';
+
+describe('Integration Tests', () => {
+  describe('Input Sanitization Flow', () => {
+    it('should sanitize user input end-to-end', () => {
+      const userInput = '<script>alert("xss")</script>Hello World';
+      const sanitized = sanitizeInput(userInput);
+
+      expect(sanitized).not.toContain('<script>');
+      expect(sanitized).toContain('Hello World');
+    });
+
+    it('should sanitize HTML content', () => {
+      const htmlContent = '<p onclick="alert(1)">Safe text</p><script>evil()</script>';
+      const sanitized = sanitizeHTML(htmlContent);
+
+      expect(sanitized).not.toContain('onclick');
+      expect(sanitized).not.toContain('<script>');
+      expect(sanitized).toContain('Safe text');
+    });
+
+    it('should sanitize URLs', () => {
+      const maliciousUrl = 'javascript:alert(1)';
+      const safeUrl = 'https://example.com';
+
+      expect(sanitizeURL(maliciousUrl)).toBe('');
+      expect(sanitizeURL(safeUrl)).toBe(safeUrl);
+    });
+  });
+
+  describe('CSRF Protection Flow', () => {
+    it('should generate and validate CSRF tokens', () => {
+      const token = generateCSRFToken();
+      expect(token).toBeDefined();
+      expect(typeof token).toBe('string');
+      expect(token.length).toBeGreaterThan(0);
+
+      const isValid = validateCSRFToken(token, token);
+      expect(isValid).toBe(true);
+    });
+
+    it('should reject invalid CSRF tokens', () => {
+      const invalidToken = 'invalid-token-123';
+      const storedToken = 'different-token';
+      const isValid = validateCSRFToken(invalidToken, storedToken);
+      expect(isValid).toBe(false);
+    });
+
+    it('should reject empty tokens', () => {
+      const isValid = validateCSRFToken('', 'some-token');
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('File Validation Flow', () => {
+    it('should validate allowed file types', () => {
+      const isImageAllowed = isAllowedType('image/jpeg', 'image');
+      const isDocAllowed = isAllowedType('application/pdf', 'document');
+
+      expect(isImageAllowed).toBe(true);
+      expect(isDocAllowed).toBe(true);
+    });
+
+    it('should reject dangerous file types', () => {
+      const isDangerous = isDangerousFile('malware.exe');
+      expect(isDangerous).toBe(true);
+
+      const isSafe = isDangerousFile('document.pdf');
+      expect(isSafe).toBe(false);
+    });
+
+    it('should validate file signatures', async () => {
+      const pngSignature = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+      const isValid = validateFileSignature(pngSignature, 'image/png');
+      expect(isValid).toBe(true);
+    });
+  });
+
+  describe('Color Contrast Validation Flow', () => {
+    it('should validate accessible color combinations', () => {
+      const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA', 'normal');
+      expect(result.passes).toBe(true);
+      expect(result.ratio).toBeGreaterThan(4.5);
+    });
+
+    it('should reject inaccessible color combinations', () => {
+      const result = meetsWCAGStandard('#CCCCCC', '#FFFFFF', 'AA', 'normal');
+      expect(result.passes).toBe(false);
+    });
+
+    it('should calculate contrast ratios correctly', () => {
+      const blackOnWhite = calculateContrastRatio('#000000', '#FFFFFF');
+      const whiteOnBlack = calculateContrastRatio('#FFFFFF', '#000000');
+
+      expect(blackOnWhite).toBeCloseTo(21, 0);
+      expect(whiteOnBlack).toBeCloseTo(21, 0);
+    });
+  });
+
+  describe('Performance Monitoring Flow', () => {
+    beforeEach(() => {
+      PerformanceMonitor['instance'] = null as any;
+    });
+
+    it('should track metrics across operations', () => {
+      const monitor = PerformanceMonitor.getInstance();
+
+      monitor.recordMetric('response_time', 100);
+      monitor.recordMetric('response_time', 200);
+      monitor.recordMetric('response_time', 150);
+
+      const stats = monitor.getStats('response_time');
+      expect(stats.count).toBe(3);
+      expect(stats.avg).toBe(150);
+      expect(stats.min).toBe(100);
+      expect(stats.max).toBe(200);
+    });
+
+    it('should track multiple metrics independently', () => {
+      const monitor = PerformanceMonitor.getInstance();
+
+      monitor.recordMetric('api_calls', 1);
+      monitor.recordMetric('api_calls', 1);
+      monitor.recordMetric('db_queries', 5);
+      monitor.recordMetric('db_queries', 5);
+
+      expect(monitor.getCount('api_calls')).toBe(2);
+      expect(monitor.getCount('db_queries')).toBe(2);
+      expect(monitor.getAverage('api_calls')).toBe(1);
+      expect(monitor.getAverage('db_queries')).toBe(5);
+    });
+  });
+
+  describe('Combined Security Validation Flow', () => {
+    it('should validate and sanitize user input comprehensively', () => {
+      const maliciousInput = {
+        name: '<script>alert("xss")</script>John',
+        email: 'john@example.com',
+        website: 'javascript:alert(1)',
+        message: '<p onclick="evil()">Hello</p>',
+      };
+
+      const sanitized = {
+        name: sanitizeInput(maliciousInput.name),
+        email: sanitizeInput(maliciousInput.email),
+        website: sanitizeURL(maliciousInput.website),
+        message: sanitizeHTML(maliciousInput.message),
+      };
+
+      expect(sanitized.name).not.toContain('<script>');
+      expect(sanitized.email).toBe('john@example.com');
+      expect(sanitized.website).toBe('');
+      expect(sanitized.message).not.toContain('onclick');
+    });
+
+    it('should validate file upload with CSRF protection', () => {
+      const csrfToken = generateCSRFToken();
+      const isValidCSRF = validateCSRFToken(csrfToken, csrfToken);
+      expect(isValidCSRF).toBe(true);
+
+      const isAllowed = isAllowedType('application/pdf', 'document');
+      expect(isAllowed).toBe(true);
+    });
+  });
+});

src/lib/monitoring.test.ts

@@ -0,0 +1,200 @@
+import { PerformanceMonitor, monitor } from './monitoring';
+
+describe('PerformanceMonitor', () => {
+  beforeEach(() => {
+    PerformanceMonitor['instance'] = null as any;
+  });
+
+  describe('getInstance', () => {
+    it('should return singleton instance', () => {
+      const instance1 = PerformanceMonitor.getInstance();
+      const instance2 = PerformanceMonitor.getInstance();
+
+      expect(instance1).toBe(instance2);
+    });
+  });
+
+  describe('recordMetric', () => {
+    it('should record a metric value', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+
+      expect(instance.getCount('test-metric')).toBe(1);
+    });
+
+    it('should record multiple metric values', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+      instance.recordMetric('test-metric', 200);
+      instance.recordMetric('test-metric', 300);
+
+      expect(instance.getCount('test-metric')).toBe(3);
+    });
+
+    it('should maintain max 1000 values per metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      for (let i = 0; i < 1005; i++) {
+        instance.recordMetric('test-metric', i);
+      }
+
+      expect(instance.getCount('test-metric')).toBe(1000);
+    });
+  });
+
+  describe('getAverage', () => {
+    it('should return 0 for empty metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      expect(instance.getAverage('empty-metric')).toBe(0);
+    });
+
+    it('should calculate average correctly', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+      instance.recordMetric('test-metric', 200);
+      instance.recordMetric('test-metric', 300);
+
+      expect(instance.getAverage('test-metric')).toBe(200);
+    });
+  });
+
+  describe('getPercentile', () => {
+    it('should return 0 for empty metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      expect(instance.getPercentile('empty-metric', 50)).toBe(0);
+    });
+
+    it('should calculate 50th percentile correctly', () => {
+      const instance = PerformanceMonitor.getInstance();
+      for (let i = 1; i <= 100; i++) {
+        instance.recordMetric('test-metric', i);
+      }
+
+      expect(instance.getPercentile('test-metric', 50)).toBe(50);
+    });
+
+    it('should calculate 95th percentile correctly', () => {
+      const instance = PerformanceMonitor.getInstance();
+      for (let i = 1; i <= 100; i++) {
+        instance.recordMetric('test-metric', i);
+      }
+
+      expect(instance.getPercentile('test-metric', 95)).toBe(95);
+    });
+
+    it('should calculate 99th percentile correctly', () => {
+      const instance = PerformanceMonitor.getInstance();
+      for (let i = 1; i <= 100; i++) {
+        instance.recordMetric('test-metric', i);
+      }
+
+      expect(instance.getPercentile('test-metric', 99)).toBe(99);
+    });
+  });
+
+  describe('getCount', () => {
+    it('should return 0 for non-existent metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      expect(instance.getCount('non-existent')).toBe(0);
+    });
+
+    it('should return count for existing metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+      instance.recordMetric('test-metric', 200);
+
+      expect(instance.getCount('test-metric')).toBe(2);
+    });
+  });
+
+  describe('getMin', () => {
+    it('should return 0 for empty metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      expect(instance.getMin('empty-metric')).toBe(0);
+    });
+
+    it('should return minimum value', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+      instance.recordMetric('test-metric', 50);
+      instance.recordMetric('test-metric', 200);
+
+      expect(instance.getMin('test-metric')).toBe(50);
+    });
+  });
+
+  describe('getMax', () => {
+    it('should return 0 for empty metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      expect(instance.getMax('empty-metric')).toBe(0);
+    });
+
+    it('should return maximum value', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('test-metric', 100);
+      instance.recordMetric('test-metric', 200);
+      instance.recordMetric('test-metric', 50);
+
+      expect(instance.getMax('test-metric')).toBe(200);
+    });
+  });
+
+  describe('getStats', () => {
+    it('should return stats for empty metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      const stats = instance.getStats('empty-metric');
+
+      expect(stats).toEqual({
+        count: 0,
+        avg: 0,
+        min: 0,
+        max: 0,
+        p50: 0,
+        p95: 0,
+        p99: 0,
+      });
+    });
+
+    it('should return complete stats for metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      for (let i = 1; i <= 100; i++) {
+        instance.recordMetric('test-metric', i);
+      }
+
+      const stats = instance.getStats('test-metric');
+
+      expect(stats.count).toBe(100);
+      expect(stats.avg).toBe(50.5);
+      expect(stats.min).toBe(1);
+      expect(stats.max).toBe(100);
+      expect(stats.p50).toBe(50);
+      expect(stats.p95).toBe(95);
+      expect(stats.p99).toBe(99);
+    });
+  });
+
+  describe('clearMetrics', () => {
+    it('should clear specific metric', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('metric1', 100);
+      instance.recordMetric('metric2', 200);
+
+      instance.clearMetrics('metric1');
+
+      expect(instance.getCount('metric1')).toBe(0);
+      expect(instance.getCount('metric2')).toBe(1);
+    });
+
+    it('should clear all metrics when no name provided', () => {
+      const instance = PerformanceMonitor.getInstance();
+      instance.recordMetric('metric1', 100);
+      instance.recordMetric('metric2', 200);
+      instance.recordMetric('metric3', 300);
+
+      instance.clearMetrics();
+
+      expect(instance.getCount('metric1')).toBe(0);
+      expect(instance.getCount('metric2')).toBe(0);
+      expect(instance.getCount('metric3')).toBe(0);
+    });
+  });
+});

src/lib/sanitize.test.ts

@@ -0,0 +1,80 @@
+import { sanitizeHTML, sanitizeInput, sanitizeURL, escapeHTML } from './sanitize';
+
+describe('sanitize', () => {
+  describe('sanitizeHTML', () => {
+    it('should allow safe HTML tags', () => {
+      const result = sanitizeHTML('<p>Hello <b>world</b></p>');
+      expect(result).toContain('<p>');
+      expect(result).toContain('<b>');
+    });
+
+    it('should remove dangerous tags', () => {
+      const result = sanitizeHTML('<script>alert("xss")</script><p>safe</p>');
+      expect(result).not.toContain('<script>');
+      expect(result).toContain('<p>');
+    });
+
+    it('should remove dangerous attributes', () => {
+      const result = sanitizeHTML('<a href="#" onclick="alert(1)">link</a>');
+      expect(result).not.toContain('onclick');
+    });
+
+    it('should handle empty input', () => {
+      expect(sanitizeHTML('')).toBe('');
+    });
+  });
+
+  describe('sanitizeInput', () => {
+    it('should remove all HTML tags', () => {
+      const result = sanitizeInput('<p>Hello <b>world</b></p>');
+      expect(result).not.toContain('<p>');
+      expect(result).not.toContain('<b>');
+      expect(result).toContain('Hello');
+      expect(result).toContain('world');
+    });
+
+    it('should handle special characters', () => {
+      const result = sanitizeInput('<script>alert("xss")</script>');
+      expect(result).not.toContain('<script>');
+    });
+  });
+
+  describe('sanitizeURL', () => {
+    it('should allow valid http URLs', () => {
+      expect(sanitizeURL('http://example.com')).toBe('http://example.com');
+    });
+
+    it('should allow valid https URLs', () => {
+      expect(sanitizeURL('https://example.com')).toBe('https://example.com');
+    });
+
+    it('should allow mailto URLs', () => {
+      expect(sanitizeURL('mailto:test@example.com')).toBe('mailto:test@example.com');
+    });
+
+    it('should reject javascript URLs', () => {
+      expect(sanitizeURL('javascript:alert(1)')).toBe('');
+    });
+
+    it('should reject data URLs', () => {
+      expect(sanitizeURL('data:text/html,<script>alert(1)</script>')).toBe('');
+    });
+  });
+
+  describe('escapeHTML', () => {
+    it('should escape HTML special characters', () => {
+      expect(escapeHTML('<div>')).toBe('&lt;div&gt;');
+      expect(escapeHTML('&')).toBe('&amp;');
+      expect(escapeHTML('"')).toBe('&quot;');
+      expect(escapeHTML("'")).toBe('&#x27;');
+    });
+
+    it('should handle mixed content', () => {
+      expect(escapeHTML('<script>alert("test")</script>')).toBe('&lt;script&gt;alert(&quot;test&quot;)&lt;&#x2F;script&gt;');
+    });
+
+    it('should handle empty string', () => {
+      expect(escapeHTML('')).toBe('');
+    });
+  });
+});

src/lib/sentry.test.ts

@@ -0,0 +1,53 @@
+import { initSentry } from './sentry';
+
+describe('sentry', () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...originalEnv };
+    console.error = jest.fn();
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+  });
+
+  describe('initSentry', () => {
+    it('should not initialize Sentry in non-production environment', () => {
+      process.env.NODE_ENV = 'development';
+      process.env.NEXT_PUBLIC_SENTRY_DSN = 'test-dsn';
+
+      initSentry();
+
+      expect(console.error).not.toHaveBeenCalled();
+    });
+
+    it('should not initialize Sentry when DSN is not set', () => {
+      process.env.NODE_ENV = 'production';
+      process.env.NEXT_PUBLIC_SENTRY_DSN = '';
+
+      initSentry();
+
+      expect(console.error).not.toHaveBeenCalled();
+    });
+
+    it('should initialize Sentry in production with DSN', () => {
+      process.env.NODE_ENV = 'production';
+      process.env.NEXT_PUBLIC_SENTRY_DSN = 'https://test@sentry.io/123';
+
+      initSentry();
+
+      expect(console.error).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing NODE_ENV gracefully', () => {
+      delete process.env.NODE_ENV;
+      process.env.NEXT_PUBLIC_SENTRY_DSN = 'https://test@sentry.io/123';
+
+      initSentry();
+
+      expect(console.error).not.toHaveBeenCalled();
+    });
+  });
+});

src/lib/utils.test.ts

@@ -0,0 +1,142 @@
+import { cn, formatNumber, formatCurrency, debounce, throttle, randomBetween, lerp, clamp } from './utils';
+
+describe('utils', () => {
+  describe('cn', () => {
+    it('should merge class names correctly', () => {
+      expect(cn('foo', 'bar')).toBe('foo bar');
+    });
+
+    it('should handle conditional classes', () => {
+      expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz');
+    });
+
+    it('should handle empty input', () => {
+      expect(cn()).toBe('');
+    });
+  });
+
+  describe('formatNumber', () => {
+    it('should format numbers with Chinese locale', () => {
+      expect(formatNumber(1234567)).toBe('1,234,567');
+    });
+
+    it('should handle decimal numbers', () => {
+      expect(formatNumber(1234.56)).toBe('1,234.56');
+    });
+
+    it('should handle zero', () => {
+      expect(formatNumber(0)).toBe('0');
+    });
+  });
+
+  describe('formatCurrency', () => {
+    it('should format numbers as CNY currency', () => {
+      expect(formatCurrency(1234.56)).toBe('¥1,234.56');
+    });
+
+    it('should handle large numbers', () => {
+      expect(formatCurrency(1000000)).toBe('¥1,000,000.00');
+    });
+
+    it('should handle zero', () => {
+      expect(formatCurrency(0)).toBe('¥0.00');
+    });
+  });
+
+  describe('debounce', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should delay function execution', () => {
+      const mockFn = jest.fn();
+      const debouncedFn = debounce(mockFn, 100);
+
+      debouncedFn();
+      expect(mockFn).not.toHaveBeenCalled();
+
+      jest.advanceTimersByTime(100);
+      expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should cancel previous calls', () => {
+      const mockFn = jest.fn();
+      const debouncedFn = debounce(mockFn, 100);
+
+      debouncedFn();
+      jest.advanceTimersByTime(50);
+      debouncedFn();
+      jest.advanceTimersByTime(100);
+
+      expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('throttle', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should limit function execution rate', () => {
+      const mockFn = jest.fn();
+      const throttledFn = throttle(mockFn, 100);
+
+      throttledFn();
+      throttledFn();
+      throttledFn();
+
+      expect(mockFn).toHaveBeenCalledTimes(1);
+
+      jest.advanceTimersByTime(100);
+      throttledFn();
+
+      expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('randomBetween', () => {
+    it('should generate number in range', () => {
+      const result = randomBetween(1, 10);
+      expect(result).toBeGreaterThanOrEqual(1);
+      expect(result).toBeLessThanOrEqual(10);
+    });
+
+    it('should handle negative numbers', () => {
+      const result = randomBetween(-10, -1);
+      expect(result).toBeGreaterThanOrEqual(-10);
+      expect(result).toBeLessThanOrEqual(-1);
+    });
+  });
+
+  describe('lerp', () => {
+    it('should interpolate between values', () => {
+      expect(lerp(0, 10, 0.5)).toBe(5);
+      expect(lerp(0, 100, 0.25)).toBe(25);
+    });
+
+    it('should handle edge cases', () => {
+      expect(lerp(0, 10, 0)).toBe(0);
+      expect(lerp(0, 10, 1)).toBe(10);
+    });
+  });
+
+  describe('clamp', () => {
+    it('should clamp values within range', () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+      expect(clamp(-5, 0, 10)).toBe(0);
+      expect(clamp(15, 0, 10)).toBe(10);
+    });
+
+    it('should handle equal min and max', () => {
+      expect(clamp(5, 5, 5)).toBe(5);
+    });
+  });
+});