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,56 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface GeometricShapeProps {
+  className?: string;
+  color?: string;
+}
+
+export function GeometricShapes({
+  className = '',
+  color = '#C41E3A'
+}: GeometricShapeProps) {
+  const shapes = [
+    { type: 'circle', size: 120, x: 10, y: 15, delay: 0 },
+    { type: 'square', size: 80, x: 80, y: 20, delay: 1 },
+    { type: 'triangle', size: 60, x: 70, y: 60, delay: 2 },
+    { type: 'circle', size: 40, x: 20, y: 70, delay: 3 },
+    { type: 'square', size: 50, x: 85, y: 75, delay: 4 }
+  ];
+
+  return (
+    <div className={`absolute inset-0 pointer-events-none ${className}`}>
+      {shapes.map((shape, index) => (
+        <motion.div
+          key={index}
+          className="absolute border-2"
+          style={{
+            borderColor: `${color}20`,
+            width: shape.size,
+            height: shape.size,
+            left: `${shape.x}%`,
+            top: `${shape.y}%`,
+            borderRadius: shape.type === 'circle' ? '50%' : '0',
+            transform: shape.type === 'triangle' ? 'rotate(0deg)' : 'rotate(0deg)'
+          }}
+          initial={{ opacity: 0, scale: 0, rotate: 0 }}
+          animate={{
+            opacity: [0, 0.15, 0.15, 0],
+            scale: [0, 1, 1, 0],
+            rotate: [0, 45, 45, 0]
+          }}
+          transition={{
+            duration: 10,
+            delay: shape.delay,
+            repeat: Infinity,
+            ease: 'easeInOut',
+            times: [0, 0.2, 0.8, 1]
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default GeometricShapes;