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

src/components/effects/glow-effect.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+
+interface GlowEffectProps {
+  className?: string;
+  color?: string;
+  count?: number;
+}
+
+export function GlowEffect({
+  className = '',
+  color = '#C41E3A',
+  count = 3
+}: GlowEffectProps) {
+  const [glows, setGlows] = useState<Array<{
+    id: number;
+    size: number;
+    x: number;
+    y: number;
+    delay: number;
+  }>>([]);
+
+  useEffect(() => {
+    const generatedGlows = Array.from({ length: count }, (_, i) => ({
+      id: i,
+      size: 150 + Math.random() * 100,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      delay: i * 2
+    }));
+    setGlows(generatedGlows);
+  }, [count]);
+
+  if (glows.length === 0) {
+    return <div className={`absolute inset-0 pointer-events-none ${className}`} />;
+  }
+
+  return (
+    <div className={`absolute inset-0 pointer-events-none ${className}`}>
+      {glows.map((glow) => (
+        <motion.div
+          key={glow.id}
+          className="absolute rounded-full"
+          style={{
+            width: glow.size,
+            height: glow.size,
+            background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+            left: `${glow.x}%`,
+            top: `${glow.y}%`,
+            transform: 'translate(-50%, -50%)'
+          }}
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{
+            opacity: [0, 0.4, 0.4, 0],
+            scale: [0.5, 1.2, 1.2, 0.5]
+          }}
+          transition={{
+            duration: 8,
+            delay: glow.delay,
+            repeat: Infinity,
+            ease: 'easeInOut',
+            times: [0, 0.3, 0.7, 1]
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default GlowEffect;