张翔
016b7cfb91
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
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
'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; |