Add comprehensive unit tests for homepage components and utilities

- Introduced unit tests for homepage components: `QuickStartCode`, `Header`, `DemoCredentialsModal`, `AnimatedTerminal`, `CTASection`, and `StatsSection`.
- Added utility tests for `chart-colors` including opacity, palettes, and gradient validation.
- Mocked dependencies (`framer-motion`, `react-syntax-highlighter`, `DemoCredentialsModal`) for isolated testing.
- Verified accessibility features, animations, and interactive behaviors across components.

frontend/tests/components/home/StatsSection.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * Tests for StatsSection component
+ */
+
+import { render, screen } from '@testing-library/react';
+import { StatsSection } from '@/components/home/StatsSection';
+
+// Mock framer-motion
+jest.mock('framer-motion', () => {
+  const React = require('react');
+  return {
+    motion: {
+      div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    },
+    useInView: () => true, // Always in view for tests
+  };
+});
+
+describe('StatsSection', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders section heading', () => {
+    render(<StatsSection />);
+
+    expect(screen.getByText('Built with Quality in Mind')).toBeInTheDocument();
+    expect(screen.getByText(/Not just another template/i)).toBeInTheDocument();
+  });
+
+  it('renders all stat cards', () => {
+    render(<StatsSection />);
+
+    expect(screen.getByText('Test Coverage')).toBeInTheDocument();
+    expect(screen.getByText('Passing Tests')).toBeInTheDocument();
+    expect(screen.getByText('Flaky Tests')).toBeInTheDocument();
+    expect(screen.getByText('API Endpoints')).toBeInTheDocument();
+  });
+
+  it('displays stat descriptions', () => {
+    render(<StatsSection />);
+
+    expect(screen.getByText(/Comprehensive testing across backend and frontend/i)).toBeInTheDocument();
+    expect(screen.getByText(/Backend, frontend unit, and E2E tests/i)).toBeInTheDocument();
+    expect(screen.getByText(/Production-stable test suite/i)).toBeInTheDocument();
+    expect(screen.getByText(/Fully documented with OpenAPI/i)).toBeInTheDocument();
+  });
+
+  it('renders animated counters with correct suffixes', () => {
+    render(<StatsSection />);
+
+    // Counters start at 0, so we should see 0 initially
+    const counters = screen.getAllByText(/^[0-9]+[%+]?$/);
+    expect(counters.length).toBeGreaterThan(0);
+  });
+
+  it('animates counters when in view', () => {
+    render(<StatsSection />);
+
+    // The useInView mock returns true, so animation should start
+    // Advance timers to let the counter animation run
+    jest.advanceTimersByTime(2000);
+
+    // After animation, we should see the final values
+    // The component should eventually show the stat values
+    const statsSection = screen.getByText('Test Coverage').parentElement;
+    expect(statsSection).toBeInTheDocument();
+  });
+
+  it('displays icons for each stat', () => {
+    render(<StatsSection />);
+
+    // Icons are rendered via lucide-react components
+    // We can verify the stat cards are rendered with proper structure
+    const testCoverageCard = screen.getByText('Test Coverage').closest('div');
+    expect(testCoverageCard).toBeInTheDocument();
+
+    const passingTestsCard = screen.getByText('Passing Tests').closest('div');
+    expect(passingTestsCard).toBeInTheDocument();
+
+    const flakyTestsCard = screen.getByText('Flaky Tests').closest('div');
+    expect(flakyTestsCard).toBeInTheDocument();
+
+    const apiEndpointsCard = screen.getByText('API Endpoints').closest('div');
+    expect(apiEndpointsCard).toBeInTheDocument();
+  });
+
+  describe('Accessibility', () => {
+    it('has proper heading hierarchy', () => {
+      render(<StatsSection />);
+
+      const heading = screen.getByRole('heading', { name: /built with quality in mind/i });
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('has descriptive labels for stats', () => {
+      render(<StatsSection />);
+
+      const statLabels = [
+        'Test Coverage',
+        'Passing Tests',
+        'Flaky Tests',
+        'API Endpoints',
+      ];
+
+      statLabels.forEach(label => {
+        expect(screen.getByText(label)).toBeInTheDocument();
+      });
+    });
+  });
+});