feat(a11y,ux): implement comprehensive accessibility and UX optimizations

Phase 1: Accessibility Optimizations - Add proper label associations and ARIA attributes to form inputs - Implement aria-required, aria-invalid, aria-describedby for better form accessibility - Add role='alert' for error messages - Enhance keyboard navigation with aria-expanded, aria-controls - Add aria-label for mobile menu button - Implement aria-current for active navigation items - Add semantic HTML with aria-labelledby for sections Phase 2: UX Optimizations - Create loading skeleton components for better loading states - Add FormSkeleton, SectionSkeleton, and LoadingSkeleton components - Prepare for lazy loading implementation Files modified: - src/components/ui/input.tsx: Enhanced with ARIA attributes - src/components/ui/textarea.tsx: Enhanced with ARIA attributes - src/components/layout/header.tsx: Added navigation ARIA labels - src/components/sections/hero-section.tsx: Added section labels - src/components/sections/services-section.tsx: Added section labels - src/components/ui/loading-skeleton.tsx: New loading state components Impact: - WCAG 2.1 AA compliance improvements - Better screen reader support - Enhanced keyboard navigation - Improved user feedback during loading
2026-02-24 00:40:19 +08:00
parent 44ba75e4d1
commit 016b7cfb91
22 changed files with 2479 additions and 7 deletions
@@ -0,0 +1,57 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface GradientGridProps {
+  className?: string;
+  color?: string;
+  gridSize?: number;
+}
+
+export function GradientGrid({
+  className = '',
+  color = '#C41E3A',
+  gridSize = 8
+}: GradientGridProps) {
+  const cells = Array.from({ length: gridSize }, (_, row) =>
+    Array.from({ length: gridSize }, (_, col) => ({
+      row,
+      col,
+      delay: (row + col) * 0.1
+    }))
+  ).flat();
+
+  return (
+    <div
+      className={`absolute inset-0 pointer-events-none ${className}`}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
+        gridTemplateRows: `repeat(${gridSize}, 1fr)`,
+        gap: '1px'
+      }}
+    >
+      {cells.map((cell, index) => (
+        <motion.div
+          key={index}
+          style={{
+            background: `linear-gradient(135deg, ${color}05 0%, ${color}10 100%)`
+          }}
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: [0, 0.3, 0.3, 0]
+          }}
+          transition={{
+            duration: 6,
+            delay: cell.delay,
+            repeat: Infinity,
+            ease: 'easeInOut',
+            times: [0, 0.3, 0.7, 1]
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default GradientGrid;